feat: 移动素材分类页面

Dockerfile

@@ -1,5 +1,4 @@
 FROM node:20-alpine as builder
-
 # 指定工作目录方便下一阶段引用
 WORKDIR /app
 # 启用pnpm功能(v16+)
@@ -14,7 +13,6 @@ COPY . .
 RUN pnpm build
 
 FROM nginx:alpine
-
 # 复制产物
 COPY --from=builder /app/dist /usr/share/nginx/html
 # 复制nginx配置

src/pages/_layout/components/userDropdown.vue

@@ -11,13 +11,14 @@
       <password-modal></password-modal>
     </span>
     <template #content>
-      <a-doption>
+      <a-doption class="bg-transparent!">
         <div class="w-[200px] flex items-center gap-2">
           <a-avatar :size="32">
             <img :src="userStore.avatar || 'https://github.com/juetan.png'" :alt="userStore.nickname" />
           </a-avatar>
           <div class="leading-4 my-2">
             {{ userStore.nickname }}
+            <span class="text-xs text-gray-400">(管理员)</span>
             <div class="text-xs text-gray-500">@{{ userStore.username }}</div>
           </div>
         </div>
@@ -33,7 +34,7 @@
         <template #icon>
           <i class="icon-park-outline-user"></i>
         </template>
-        个人设置
+        账号信息
       </a-doption>
       <a-doption @click="router.push('/my')">
         <template #icon>

src/pages/content/material/components/AnCategory.vue

@@ -0,0 +1,110 @@
+<template>
+  <CategoryTable />
+</template>
+
+<script setup lang="tsx">
+import { api } from '@/api';
+import { useCreateColumn, useTable, useUpdateColumn } from '@/components/AnTable';
+import { listToTree } from '@/utils/listToTree';
+
+const { component: CategoryTable } = useTable({
+  columns: [
+    {
+      title: '分类名称',
+      dataIndex: 'title',
+      render: ({ record }) => (
+        <div class="flex flex-col overflow-hidden">
+          <span>
+            {record.name}
+          <span class="text-gray-400 text-xs truncate ml-2">@{record.code}</span>
+          </span>
+          <div class="text-gray-400 text-xs truncate mt-0.5">{record.description}</div>
+        </div>
+      ),
+    },
+    useCreateColumn(),
+    useUpdateColumn(),
+    {
+      type: 'button',
+      title: '操作',
+      width: 120,
+      buttons: [
+        {
+          type: 'modify',
+          text: '修改',
+        },
+        {
+          type: 'delete',
+          text: '删除',
+          onClick({ record }) {
+            return api.category.delCategory(record.id);
+          },
+        },
+      ],
+    },
+  ],
+  source: async model => {
+    const res = await api.fileCategory.getFileCategorys(model);
+    const data = listToTree(res.data.data ?? []);
+    return { data: { data, total: (res.data as any).total } };
+  },
+  search: [
+    {
+      field: 'name',
+      label: '分类名称',
+      setter: 'search',
+      enterable: true,
+      searchable: true,
+    },
+  ],
+  create: {
+    title: '添加分类',
+    width: 580,
+    items: [
+      {
+        field: 'name',
+        label: '名称',
+        setter: 'input',
+        required: true,
+      },
+      {
+        field: 'code',
+        label: '别名',
+        setter: 'input',
+        required: true,
+        setterProps: {
+          placeholder: '只包含字母、小数和连字符'
+        }
+      },
+      {
+        field: 'description',
+        label: '备注',
+        setter: 'textarea',
+        required: false,
+      },
+    ],
+    submit: model => {
+      return api.fileCategory.addFileCategory(model as any);
+    },
+  },
+  modify: {
+    extend: true,
+    title: '修改分类',
+    submit: model => {
+      return api.fileCategory.setFileCategory(model.id, model as any);
+    },
+  },
+});
+</script>
+
+<style scoped></style>
+
+<route lang="json">
+{
+  "meta": {
+    "sort": 10300,
+    "title": "分类管理",
+    "icon": "icon-park-outline-category-management"
+  }
+}
+</route>

src/pages/content/material/index.vue

@@ -15,7 +15,13 @@
             </div>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="2" title="分类管理"></a-tab-pane>
+        <a-tab-pane key="2" title="分类管理">
+          <div class="overflow-hidden grid grid-cols-[auto_1fr] gap-2 m-4 mt-1">
+            <div class="bg-white p-4">
+              <AnCategory></AnCategory>
+            </div>
+          </div>
+        </a-tab-pane>
         <a-tab-pane key="3" title="显示设置"></a-tab-pane>
       </a-tabs>
     </template>
@@ -27,7 +33,7 @@ import { FileCategory, api } from '@/api';
 import { useCreateColumn, useTable, useTableDelete, useUpdateColumn } from '@/components/AnTable';
 import { Message } from '@arco-design/web-vue';
 import numeral from 'numeral';
-import AnGroup from './components/AnGroup.vue';
+import AnCategory from './components/AnCategory.vue';
 import AnPreview from './components/AnPreview.vue';
 import AnUpload from './components/AnUpload.vue';
 import { getIcon } from './components/util';

src/pages/system/dict/index.vue

@@ -8,10 +8,15 @@
         <ani-group :current="current" @change="onTypeChange"></ani-group>
       </div>
       <div class="bg-white p-4">
-        <a-alert :show-icon="false" class="mb-3 !border-brand-500">
+        <div :show-icon="false" class="rounded mb-3 bg-gray-100 px-4 py-3">
-          <span class="text-brand-500 font-bold">{{ current?.name }}</span>
+          <span class="text-base">
-          <div class="mt-1">描述：{{ current?.description }}</div>
+            <i class="icon-park-outline-folder-close"></i>
-        </a-alert>
+            {{ current?.name }}
+          </span>
+          <div class="mt-1.5 text-gray-500">
+            描述：{{ current?.description }}
+          </div>
+        </div>
         <dict-table></dict-table>
       </div>
     </div>