chore: 增加必填星号

packages/app/src/components/operation-field/Area.tsx

@@ -9,6 +9,7 @@ type Props = {
   placeholder?: string;
   width: string;
   height: string;
+  required?: boolean;
 } & UseControllerProps<any, any>;
 
 const OperationField: FC<Props> = function({
@@ -17,11 +18,22 @@ const OperationField: FC<Props> = function({
   label,
   placeholder,
   height,
+  required,
 }) {
   return (
     <Row className='width-full' gutter={12}>
       <Col span={6} offset={2}>
-        <label className={css.textRight} htmlFor={`operation_${name}`}>{label}</label>
+        <label
+          className={
+            classNames([
+              css.textRight,
+              {[css.fieldRequired]: required ?? true},
+            ])
+          }
+          htmlFor={`operation_${name}`}
+        >
+          {label}
+        </label>
       </Col>
       <Col span={12}>
         <Controller

packages/app/src/components/operation-field/Select.tsx

@@ -8,7 +8,8 @@ type Props = {
   label: string;
   placeholder?: string;
   width?: string;
-  data: {value: string, label: string}[]
+  data: {value: string, label: string}[];
+  required?: boolean;
 } & UseControllerProps<any, any>;
 
 const ModalSelect: FC<Props> = function({
@@ -17,11 +18,22 @@ const ModalSelect: FC<Props> = function({
   label,
   placeholder,
   data,
+  required,
 }) {
   return (
     <Row className='full-width' gutter={12}>
       <Col span={6} offset={2}>
-        <label className={css.textRight} htmlFor={`operation_${name}`}>{label}</label>
+        <label
+          className={
+            classNames([
+              css.textRight,
+              {[css.fieldRequired]: required ?? true},
+            ])
+          }
+          htmlFor={`operation_${name}`}
+        >
+          {label}
+        </label>
       </Col>
       <Col span={12}>
         <Controller

packages/app/src/components/operation-field/field.tsx

@@ -10,6 +10,7 @@ type Props = {
   width?: string;
   type?: string;
   disabled?: boolean;
+  required?: boolean;
 } & UseControllerProps<any, any>;
 
 const OperationField: FC<Props> = function({
@@ -19,11 +20,22 @@ const OperationField: FC<Props> = function({
   placeholder,
   type,
   disabled,
+  required,
 }) {
   return (
     <Row gutter={12}>
       <Col span={6} offset={2}>
-        <label className={css.textRight} htmlFor={`operation_${name}`}>{label}</label>
+        <label
+          className={
+            classNames([
+              css.textRight,
+              {[css.fieldRequired]: required ?? true},
+            ])
+          }
+          htmlFor={`operation_${name}`}
+        >
+          {label}
+        </label>
       </Col>
       <Col span={12}>
         <Controller

packages/app/src/components/operation-field/index.module.css

@@ -17,6 +17,14 @@
   text-align: right;
 }
 
+.field-required {
+  &::before {
+    padding-right: 4px;
+    color: #f20c00;
+    content: '*';
+  }
+}
+
 .filed-width {
   width: 260px;
 }

packages/app/src/pages/user/table/modal/Info.tsx

@@ -36,12 +36,27 @@ const UserModalInfo: FC<Props> = function({id}) {
         label='真实姓名'
         width={width}
       />
+      <ModalSelect
+        control={control}
+        name='userDepartment'
+        label='部门'
+        width={width}
+        data={departmentOptions}
+      />
+      <ModalSelect
+        control={control}
+        name='userRole'
+        label='角色'
+        data={roleOptions}
+        width={width}
+      />
       <ModalField
         control={control}
         name='userEmail'
         label='邮箱'
         width={width}
         type='email'
+        required={false}
       />
       <ModalField
         control={control}
@@ -49,6 +64,7 @@ const UserModalInfo: FC<Props> = function({id}) {
         label='电话'
         width={width}
         type='phone'
+        required={false}
       />
       <ModalField
         control={control}
@@ -56,22 +72,8 @@ const UserModalInfo: FC<Props> = function({id}) {
         label='手机'
         width={width}
         type='phone'
+        required={false}
       />
-      <ModalSelect
-        control={control}
-        name='userDepartment'
-        label='部门'
-        width={width}
-        data={departmentOptions}
-      />
-      <ModalSelect
-        control={control}
-        name='userRole'
-        label='角色'
-        data={roleOptions}
-        width={width}
-      />
-
     </>
   );
 };