feat: 优化 GiForm（同步 GiDemo 更新）

src/views/system/user/UserAddDrawer.vue

@@ -4,11 +4,11 @@
     :title="title"
     :mask-closable="false"
     :esc-to-close="false"
-    :width="width >= 600 ? 600 : '100%'"
+    :width="width >= 500 ? 500 : '100%'"
     @before-ok="save"
     @close="reset"
   >
-    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+    <GiForm ref="formRef" v-model="form" :columns="columns" />
   </a-drawer>
 </template>
 
@@ -16,7 +16,7 @@
 import { Message, type TreeNodeData } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
 import { addUser, getUser, updateUser } from '@/apis/system/user'
-import { type Columns, GiForm, type Options } from '@/components/GiForm'
+import { type ColumnItem, GiForm } from '@/components/GiForm'
 import type { Gender, Status } from '@/types/global'
 import { GenderList } from '@/constant/common'
 import { useResetReactive } from '@/hooks'
@@ -37,21 +37,17 @@ const formRef = ref<InstanceType<typeof GiForm>>()
 const { roleList, getRoleList } = useRole()
 const { deptList, getDeptList } = useDept()
 
-const options: Options = {
-  form: { size: 'large' },
-  btns: { hide: true },
-}
-
 const [form, resetForm] = useResetReactive({
   gender: 1 as Gender,
   status: 1 as Status,
 })
 
-const columns: Columns = reactive([
+const columns: ColumnItem[] = reactive([
   {
     label: '用户名',
     field: 'username',
     type: 'input',
+    span: 24,
     props: {
       maxLength: 64,
       showWordLimit: true,
@@ -62,6 +58,7 @@ const columns: Columns = reactive([
     label: '昵称',
     field: 'nickname',
     type: 'input',
+    span: 24,
     props: {
       maxLength: 30,
       showWordLimit: true,
@@ -72,6 +69,7 @@ const columns: Columns = reactive([
     label: '密码',
     field: 'password',
     type: 'input-password',
+    span: 24,
     props: {
       maxLength: 32,
       showWordLimit: true,
@@ -85,6 +83,7 @@ const columns: Columns = reactive([
     label: '手机号码',
     field: 'phone',
     type: 'input',
+    span: 24,
     props: {
       maxLength: 11,
     },
@@ -93,6 +92,7 @@ const columns: Columns = reactive([
     label: '邮箱',
     field: 'email',
     type: 'input',
+    span: 24,
     props: {
       maxLength: 255,
     },
@@ -101,14 +101,18 @@ const columns: Columns = reactive([
     label: '性别',
     field: 'gender',
     type: 'radio-group',
-    options: GenderList,
+    span: 24,
+    props: {
+      options: GenderList,
+    },
   },
   {
     label: '所属部门',
     field: 'deptId',
     type: 'tree-select',
-    data: deptList,
+    span: 24,
     props: {
+      data: deptList,
       allowClear: true,
       allowSearch: true,
       fallbackOption: false,
@@ -125,8 +129,9 @@ const columns: Columns = reactive([
     label: '角色',
     field: 'roleIds',
     type: 'select',
-    options: roleList,
+    span: 24,
     props: {
+      options: roleList,
       multiple: true,
       allowClear: true,
       allowSearch: true,
@@ -137,6 +142,7 @@ const columns: Columns = reactive([
     label: '描述',
     field: 'description',
     type: 'textarea',
+    span: 24,
     props: {
       maxLength: 200,
       showWordLimit: true,
@@ -147,6 +153,7 @@ const columns: Columns = reactive([
     label: '状态',
     field: 'status',
     type: 'switch',
+    span: 24,
     props: {
       type: 'round',
       checkedValue: 1,