refactor(知识类型): 优化表单和表格字段顺序及抽屉组件使用

重构知识类型配置，调整表单和表格字段顺序以提升一致性
使用 useVbenDrawer 替代手动 ref 管理抽屉组件

apps/web-ele/src/views/knowledge/type/config-data.tsx

@@ -46,13 +46,7 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     },
     fieldName: 'id',
   },
-  {
-    component: 'Input',
-    fieldName: 'icon',
-    label: '知识图标',
-    // 使用插槽自定义上传组件
-    rules: 'required',
-  },
+
   {
     component: 'Input',
     fieldName: 'name',
@@ -75,7 +69,13 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     },
     rules: 'required',
   },
-
+  {
+    component: 'Input',
+    fieldName: 'icon',
+    label: '知识图标',
+    // 使用插槽自定义上传组件
+    rules: 'required',
+  },
   {
     component: 'Input',
     fieldName: 'admin',
@@ -122,6 +122,12 @@ export const tableColumns: VxeGridProps['columns'] = [
     width: 60,
   },
   {
+    field: 'icon',
+    slots: { default: 'icon' },
+    title: '类别图标',
+    minWidth: 100,
+  },
+  {
     field: 'id',
     title: '类别ID',
     width: 80,
@@ -131,12 +137,7 @@ export const tableColumns: VxeGridProps['columns'] = [
     title: '类别名称',
     minWidth: 120,
   },
-  {
-    field: 'icon',
-    slots: { default: 'icon' },
-    title: '类别图标',
-    minWidth: 100,
-  },
+
   {
     field: 'description',
     title: '类别描述',

apps/web-ele/src/views/knowledge/type/index.vue

@@ -5,10 +5,9 @@ import type { KnowledgeType } from './config-data';
 
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import { ElImage, ElMessageBox } from 'element-plus';
 
@@ -74,6 +73,11 @@ const getKnowledgeTypeList = async (params: any) => {
   return mockData;
 };
 
+// 定义侧拉
+const [TypeDrawerCom, typeDrawerApi] = useVbenDrawer({
+  connectedComponent: TypeDrawer,
+});
+
 const deleteKnowledgeType = async (ids: string[]) => {
   // 模拟删除操作
   // console.log('删除知识库类别', ids);
@@ -134,25 +138,16 @@ const [BasicTable, BasicTableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-// 抽屉组件引用
-const typeDrawerRef = ref();
-
 // 新增知识库类别
 const handleAdd = () => {
   // 调用抽屉组件的open方法
-  const drawerApi = typeDrawerRef.value?.getDrawerApi?.();
-  if (drawerApi) {
-    drawerApi.setData({ isUpdate: false }).open();
-  }
+  typeDrawerApi.setData({ isUpdate: false }).open();
 };
 
 // 编辑知识库类别
 const handleEdit = (row: KnowledgeType) => {
   // 调用抽屉组件的open方法
-  const drawerApi = typeDrawerRef.value?.getDrawerApi?.();
-  if (drawerApi) {
-    drawerApi.setData({ id: row.id, isUpdate: true }).open();
-  }
+  typeDrawerApi.setData({ id: row.id, isUpdate: true }).open();
 };
 
 // 查看知识库类别详情
@@ -203,6 +198,6 @@ const handleDelete = async (row: KnowledgeType) => {
     </BasicTable>
 
     <!-- 抽屉组件 -->
-    <TypeDrawer @reload="BasicTableApi.reload()" />
+    <TypeDrawerCom />
   </Page>
 </template>