feat: first commit

src/components/bl-form-item/index.less

@@ -0,0 +1,45 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.bl-form-item {
+  width: 100%;
+  margin-bottom: 40px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &__header {
+    .flex-row();
+
+    &__title {
+      font-size: 28px;
+      line-height: 32px;
+      font-weight: 400;
+      color: @blColor;
+    }
+
+    &__type {
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 400;
+      color: @blColorG1;
+      margin-left: 4px;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    .flex-row();
+    margin-top: 24px;
+    padding: 0 32px;
+    box-sizing: border-box;
+
+    &.dynamicHeight {
+      height: fit-content;
+    }
+  }
+}

src/components/bl-form-item/index.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import './index.less';
+
+interface IProps extends React.PropsWithChildren {
+  title: string;
+  subTitle?: string | boolean;
+  optional?: boolean;
+  dynamicHeight?: boolean;
+  className?: string;
+  contentClassName?: string;
+}
+
+const PREFIX = 'bl-form-item';
+
+function BlFormItem(props: IProps) {
+  const {
+    children,
+    className,
+    contentClassName,
+    title,
+    subTitle = true,
+    optional = false,
+    dynamicHeight = false,
+  } = props;
+  return (
+    <div className={classNames(PREFIX, className)}>
+      <div className={`${PREFIX}__header`}>
+        <div className={`${PREFIX}__header__title`}>{title}</div>
+        {subTitle !== false && (
+          <div
+            className={`${PREFIX}__header__type`}
+          >{`(${typeof subTitle === 'string' ? subTitle : optional ? '建议填写' : '必填'})`}</div>
+        )}
+      </div>
+      <div className={classNames(`${PREFIX}__content`, contentClassName, { dynamicHeight })}>{children}</div>
+    </div>
+  );
+}
+
+export default BlFormItem;