feat: 优化菜单管理页面

.env

@@ -24,7 +24,7 @@ VITE_PORT = 3020
 # 代理前缀
 VITE_PROXY_PREFIX = /api,/upload
 # 代理地址
-VITE_PROXY = https://appnify.app.juetan.cn/
+VITE_PROXY = http://127.0.0.1:3030/
 # API文档 说明：需返回符合 OPENAPI 规范的json内容
 VITE_OPENAPI = http://127.0.0.1:3030/openapi.json
 # 文件后缀 说明：设为dev时会优先加载index.dev.vue文件，否则回退至index.vue文件

src/components/AnForm/hooks/useForm.tsx

@@ -1,3 +1,4 @@
+import { merge } from 'lodash-es';
 import { AnForm, AnFormInstance, AnFormProps } from '../components/Form';
 import { FormItem, useItems } from './useItems';
 
@@ -17,7 +18,8 @@ export type FormUseOptions = Partial<Omit<AnFormProps, 'items'>> & {
 };
 
 export function useFormProps(options: FormUseOptions): Required<AnFormProps> {
-  const { model = {}, items: _items = [], submit = () => null, formProps = {} } = options;
+  const { model: _model = {}, items: _items = [], submit = () => null, formProps = {} } = options;
+  const model = merge({ id: undefined }, _model);
   const items = useItems(_items ?? [], model);
   return {
     model,

src/pages/content/category/index.vue

@@ -12,27 +12,28 @@ import { listToTree } from '@/utils/listToTree';
 const { component: CategoryTable } = useTable({
   columns: [
     {
-      title: '名称',
+      title: '分类名称',
       dataIndex: 'title',
-      width: 240,
       render: ({ record }) => (
         <div class="flex flex-col overflow-hidden">
-          <span>{record.title}</span>
-          <span class="text-gray-400 text-xs truncate">#{record.slug}</span>
+          <span>
+            {record.title}
+          <span class="text-gray-400 text-xs truncate ml-2">@{record.slug}</span>
+          </span>
+          <div class="text-gray-400 text-xs truncate mt-0.5">{record.description}</div>
         </div>
       ),
     },
-    {
-      title: '描述',
-      dataIndex: 'description',
-    },
     useCreateColumn(),
     useUpdateColumn(),
     {
       type: 'button',
       title: '操作',
-      width: 120,
+      width: 180,
       buttons: [
+        {
+          text: '文章列表',
+        },
         {
           type: 'modify',
           text: '修改',
@@ -67,15 +68,18 @@ const { component: CategoryTable } = useTable({
     items: [
       {
         field: 'title',
-        label: '分类名称',
+        label: '名称',
         setter: 'input',
         required: true,
       },
       {
         field: 'slug',
-        label: '分类别名',
+        label: '别名',
         setter: 'input',
         required: true,
+        setterProps: {
+          placeholder: '只包含字母、小数和连字符'
+        }
       },
       {
         field: 'description',

src/pages/content/media/index.vue

@@ -19,11 +19,11 @@
 <script setup lang="tsx">
 import { FileCategory, api } from '@/api';
 import { useCreateColumn, useTable, useTableDelete, useUpdateColumn } from '@/components/AnTable';
-import { getIcon } from './components/util';
+import { Message } from '@arco-design/web-vue';
 import numeral from 'numeral';
 import AnGroup from './components/AnGroup.vue';
 import AnUpload from './components/AnUpload.vue';
-import { Message } from '@arco-design/web-vue';
+import { getIcon } from './components/util';
 
 const visible = ref(false);
 const current = ref<FileCategory>();
@@ -80,8 +80,8 @@ const {
               >
                 {record.name}
               </span>
-              <span class="hidden group-hover:inline text-xs text-gray-400 ml-0" title="复制地址" onClick={() => copyLink(record)}>
-                <i class=" icon-park-outline-copy hover:text-gray-700 cursor-pointer"></i>
+              <span class="inline-block w-5 text-xs text-gray-400 ml-0" title="复制地址" onClick={() => copyLink(record)}>
+                <i class="hidden! group-hover:inline-block! icon-park-outline-copy hover:text-gray-700 cursor-pointer"></i>
               </span>
             </span>
             <div class="h-5 inline-flex items-center text-xs text-gray-400 space-x-4">

src/pages/system/logl/index.vue

@@ -35,34 +35,24 @@ const { component: LoginLogTable } = useTable({
     return api.log.getLoginLogs(model);
   },
   columns: [
-    {
-      title: '登陆账号',
-      dataIndex: 'nickname',
-      width: 140,
-      render({ record }) {
-        return (
-          <div class="overflow-hidden">
-            <i class="icon-park-outline-user mr-2"></i>
-            <span>{record.nickname}</span>
-          </div>
-        );
-      },
-    },
     {
       title: '操作描述',
       dataIndex: 'description',
-      render: ({ record: { status, description } }) => {
+      render: ({ record }) => {
         return (
-          <span>
+          <div class="flex items-center gap-2">
             <span
               class={
-                status === null || status
+                record.status === null || record.status
                   ? 'text-base text-green-500 icon-park-outline-check-one mr-2'
                   : 'text-base text-red-500 icon-park-outline-close-one mr-2'
               }
             ></span>
-            {description}
-          </span>
+            <div>
+              <div>{record.nickname}</div>
+              <div class="text-xs text-gray-400">{record.description}</div>
+            </div>
+          </div>
         );
       },
     },

src/pages/system/menu/index.vue

@@ -72,10 +72,6 @@ const [menuTable, menu] = useAniTable({
       type: "button",
       width: 200,
       buttons: [
-        {
-          type: "modify",
-          text: "修改",
-        },
         {
           text: "新增子项",
           disabled: ({ record }) => record.type === MenuType.BUTTON,
@@ -83,6 +79,10 @@ const [menuTable, menu] = useAniTable({
             console.log(record);
           },
         },
+        {
+          type: "modify",
+          text: "修改",
+        },
         {
           text: "删除",
           type: "delete",

src/pages/system/user/index.vue

@@ -33,7 +33,7 @@ const { component: UserTable } = useTable({
             </div>
             <div class="w-full text-gray-400 space-x-4 text-xs">
               <span>
-                <i class="icon-park-outline-mail mr-1 align-[-3px]"></i>
+                <i class="icon-park-outline-mail mr-1 align-[-4px]"></i>
                 contact@juetan.cn
               </span>
               <span>

src/types/auto-component.d.ts

@@ -13,7 +13,6 @@ declare module '@vue/runtime-core' {
     ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
     ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
     AButton: typeof import('@arco-design/web-vue')['Button']
-    ACard: typeof import('@arco-design/web-vue')['Card']
     ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
     ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
     AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
@@ -26,7 +25,6 @@ declare module '@vue/runtime-core' {
     AEmpty: typeof import('@arco-design/web-vue')['Empty']
     AForm: typeof import('@arco-design/web-vue')['Form']
     AFormItem: typeof import('@arco-design/web-vue')['FormItem']
-    AImage: typeof import('@arco-design/web-vue')['Image']
     AImagePreview: typeof import('@arco-design/web-vue')['ImagePreview']
     AInput: typeof import('@arco-design/web-vue')['Input']
     AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
@@ -37,15 +35,11 @@ declare module '@vue/runtime-core' {
     ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
     ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
     ALink: typeof import('@arco-design/web-vue')['Link']
-    AList: typeof import('@arco-design/web-vue')['List']
-    AListItem: typeof import('@arco-design/web-vue')['ListItem']
-    AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta']
     AMenu: typeof import('@arco-design/web-vue')['Menu']
     AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
     AModal: typeof import('@arco-design/web-vue')['Modal']
     AnEmpty: typeof import('./../components/AnEmpty/AnEmpty.vue')['default']
     AnForbidden: typeof import('./../components/AnForbidden/AnForbidden.vue')['default']
-    AnForbiden: typeof import('./../components/AnForbidden/AnForbiden.vue')['default']
     AnToast: typeof import('./../components/AnToast/AnToast.vue')['default']
     APagination: typeof import('@arco-design/web-vue')['Pagination']
     APopover: typeof import('@arco-design/web-vue')['Popover']
@@ -62,7 +56,6 @@ declare module '@vue/runtime-core' {
     ATag: typeof import('@arco-design/web-vue')['Tag']
     ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
-    ATree: typeof import('@arco-design/web-vue')['Tree']
     AUpload: typeof import('@arco-design/web-vue')['Upload']
     BaseOption: typeof import('./../components/editor/components/BaseOption.vue')['default']
     BreadCrumb: typeof import('./../components/breadcrumb/bread-crumb.vue')['default']
@@ -77,7 +70,6 @@ declare module '@vue/runtime-core' {
     InputTexter: typeof import('./../components/editor/components/InputTexter.vue')['default']
     Marquee: typeof import('./../components/editor/blocks/text/marquee.vue')['default']
     Option: typeof import('./../components/editor/blocks/date/option.vue')['default']
-    Page403: typeof import('./../components/AnForbiden/page-403.vue')['default']
     PanelHeader: typeof import('./../components/editor/components/PanelHeader.vue')['default']
     PanelLeft: typeof import('./../components/editor/components/PanelLeft.vue')['default']
     PanelMain: typeof import('./../components/editor/components/PanelMain.vue')['default']