1. 右键菜单通用组件封装

2. 文件管理优化功能（后续需要新增分组、个人收藏） 3. 优化订单页面、诊所管理页面的布局，更加集中，减少表长度 4. 新增诊所的时候业务员支持气泡卡片点击选择，不用再输入业务码 5. 接口日志筛选优化
2026-06-18 16:42:51 +08:00
parent 073f7f882b
commit 75dd690188
16 changed files with 1282 additions and 46 deletions
--- a/apps/web-antd/src/api/core/file-gallery.ts
+++ b/apps/web-antd/src/api/core/file-gallery.ts
@@ -5,13 +5,39 @@ const prefix = 'file-gallery/';
 export interface FileGalleryItem {
  id: number;
  url: string;
+  file_name?: string;
  file_size: number;
  file_size_text: string;
+  type?: number;
+  type_text?: string;
+  type_icon?: string;
  created_at?: string;
  original_name?: string;
+  object_key?: string;
+  source?: number;
 }

-export async function getFileGalleryList(params?: { page?: number; page_size?: number; pid?: number; type?: number }) {
+export interface FileTypeItem {
+  id: number;
+  name: string;
+  icon?: string;
+  value: number;
+  suffix: string;
+  sort: number;
+}
+
+export interface FileGalleryDetail extends FileGalleryItem {
+  source_text?: string;
+  updated_at?: string;
+}
+
+export async function getFileGalleryList(params?: {
+  page?: number;
+  page_size?: number;
+  pid?: number;
+  type?: number;
+  keyword?: string;
+}) {
  return requestClient.get<{
    items: FileGalleryItem[];
    total: number;
@@ -20,10 +46,33 @@ export async function getFileGalleryList(params?: { page?: number; page_size?: n
  }>(`${prefix}list`, { params });
 }

+export async function getFileGalleryDetail(id: number) {
+  return requestClient.get<FileGalleryDetail>(`${prefix}detail`, { params: { id } });
+}
+
 export async function deleteFileGalleryItem(id: number) {
  return requestClient.post<any>(`${prefix}delete`, { id });
 }

-export async function syncFileGalleryFromOss() {
-  return requestClient.post<{ added: number; skipped: number }>(`${prefix}sync-oss`);
+export async function renameFileGalleryItem(id: number, file_name: string) {
+  return requestClient.post<any>(`${prefix}rename`, { id, file_name });
+}
+
+export async function moveFileGalleryType(id: number, type: number) {
+  return requestClient.post<any>(`${prefix}move-type`, { id, type });
+}
+
+export async function batchArchiveFiles() {
+  return requestClient.post<{
+    reclassified: number;
+    file_name_filled: number;
+  }>(`${prefix}batch-archive`);
+}
+
+export async function getFileTypes() {
+  return requestClient.get<FileTypeItem[]>(`${prefix}file-types`);
+}
+
+export async function syncFileGalleryFromOss() {
+  return requestClient.post<{ synced: number; skipped: number; scanned: number }>(`${prefix}sync-oss`);
 }
--- a/apps/web-antd/src/api/core/file-type.ts
+++ b/apps/web-antd/src/api/core/file-type.ts
@@ -0,0 +1,35 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'file-type/';
+
+export interface FileTypeRecord {
+  id: number;
+  name: string;
+  icon: string;
+  value: number;
+  suffix: string;
+  sort: number;
+  status: number;
+  created_at?: number;
+  updated_at?: number;
+}
+
+export async function getFileTypeList() {
+  return requestClient.get<FileTypeRecord[]>(`${prefix}list`);
+}
+
+export async function getFileTypeDetail(id: number) {
+  return requestClient.get<FileTypeRecord>(`${prefix}detail`, { params: { id } });
+}
+
+export async function createFileType(data: Partial<FileTypeRecord>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+export async function updateFileType(data: Partial<FileTypeRecord> & { id: number }) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+export async function deleteFileType(id: number) {
+  return requestClient.post<any>(`${prefix}delete`, { id });
+}
--- a/apps/web-antd/src/api/core/upload.ts
+++ b/apps/web-antd/src/api/core/upload.ts
@@ -61,7 +61,13 @@ export async function getOssSignature() {
 /**
 * OSS 直传成功后登记 xk_file
 */
-export async function registerOssFile(data: { url: string; type?: number; source?: number; file_size?: number }) {
+export async function registerOssFile(data: {
+  url: string;
+  type?: number;
+  source?: number;
+  file_size?: number;
+  file_name?: string;
+}) {
  return requestClient.post('/upload/register-oss-file', data);
 }

--- a/apps/web-antd/src/app.vue
+++ b/apps/web-antd/src/app.vue
@@ -8,6 +8,7 @@ import { useUserStore as useVbenUserStore } from '@vben/stores';
 import { App, ConfigProvider, theme } from 'ant-design-vue';

 import { antdLocale } from '#/locales';
+import { GlobalContextMenu } from '#/components/context-menu';
 import { useWebSocket } from '#/views/business/chat/composables/useWebSocket';
 import { useChatStore } from '#/views/business/chat/stores/chat';
 import { useUserStore } from '#/views/business/chat/stores/user';
@@ -80,6 +81,7 @@ watch(userInfoLoaded, (loaded) => {
  <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
    <App>
      <RouterView />
+      <GlobalContextMenu />
    </App>
  </ConfigProvider>
 </template>
--- a/apps/web-antd/src/components/context-menu/global-context-menu.vue
+++ b/apps/web-antd/src/components/context-menu/global-context-menu.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { ContextMenuItem } from './types';
+import MIcon from '#/components/icon/icon.vue';
+import {
+  contextMenuState,
+  getSubmenuPosition,
+  hideContextMenu,
+  MENU_ITEM_HEIGHT,
+  MENU_WIDTH,
+  showSubmenu,
+  submenuState,
+} from './use-context-menu';
+
+defineOptions({ name: 'GlobalContextMenu' });
+
+function onItemEnter(item: ContextMenuItem, e: MouseEvent) {
+  if (!item.children?.length || item.disabled) {
+    showSubmenu('', [], 0, 0);
+    return;
+  }
+
+  const target = e.currentTarget as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  const pos = getSubmenuPosition(rect, item.children.length);
+  showSubmenu(item.key, item.children, pos.left, pos.top);
+}
+
+function handleClick(item: ContextMenuItem) {
+  if (item.disabled || item.children?.length) {
+    return;
+  }
+  item.handler?.(contextMenuState.payload);
+  hideContextMenu();
+}
+
+function handleSubmenuClick(item: ContextMenuItem) {
+  if (item.disabled) {
+    return;
+  }
+  item.handler?.(contextMenuState.payload);
+  hideContextMenu();
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="contextMenuState.visible"
+      class="global-context-menu"
+      :style="{ left: `${contextMenuState.x}px`, top: `${contextMenuState.y}px`, width: `${MENU_WIDTH}px` }"
+      @contextmenu.prevent
+    >
+      <div
+        v-for="item in contextMenuState.items"
+        :key="item.key"
+        class="context-menu-item"
+        :class="{ disabled: item.disabled, 'has-children': !!item.children?.length }"
+        @click.stop="handleClick(item)"
+        @mouseenter="onItemEnter(item, $event)"
+      >
+        <span class="item-icon">
+          <component :is="item.icon" v-if="item.icon" />
+          <MIcon v-else-if="item.iconName" :icon="item.iconName" size="14" />
+        </span>
+        <span class="item-label">{{ item.label }}</span>
+        <span v-if="item.children?.length" class="item-arrow">›</span>
+      </div>
+    </div>
+
+    <div
+      v-if="contextMenuState.visible && submenuState.activeKey && submenuState.items.length"
+      class="global-context-menu submenu"
+      :style="{ left: `${submenuState.left}px`, top: `${submenuState.top}px`, width: `${MENU_WIDTH}px` }"
+      @contextmenu.prevent
+    >
+      <div
+        v-for="child in submenuState.items"
+        :key="child.key"
+        class="context-menu-item"
+        :class="{ disabled: child.disabled }"
+        @click.stop="handleSubmenuClick(child)"
+      >
+        <span class="item-icon">
+          <component :is="child.icon" v-if="child.icon" />
+          <MIcon v-else-if="child.iconName" :icon="child.iconName" size="14" />
+        </span>
+        <span class="item-label">{{ child.label }}</span>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.global-context-menu {
+  position: fixed;
+  z-index: 9999;
+  padding: 4px 0;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 8px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 12px;
+  font-size: 13px;
+  color: #1d2129;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover:not(.disabled) {
+    background: #f2f7ff;
+    color: #165dff;
+  }
+
+  &.disabled {
+    color: #c9cdd4;
+    cursor: not-allowed;
+  }
+
+  &.has-children {
+    padding-right: 8px;
+  }
+}
+
+.item-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-arrow {
+  color: #86909c;
+  font-size: 14px;
+}
+
+.dark {
+  .global-context-menu {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .context-menu-item {
+    color: #e5e7eb;
+
+    &:hover:not(.disabled) {
+      background: #374151;
+      color: #93c5fd;
+    }
+  }
+}
+</style>
--- a/apps/web-antd/src/components/context-menu/index.ts
+++ b/apps/web-antd/src/components/context-menu/index.ts
@@ -0,0 +1,3 @@
+export type { ContextMenuItem } from './types';
+export { showContextMenu, hideContextMenu } from './use-context-menu';
+export { default as GlobalContextMenu } from './global-context-menu.vue';
--- a/apps/web-antd/src/components/context-menu/types.ts
+++ b/apps/web-antd/src/components/context-menu/types.ts
@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+
+export interface ContextMenuItem {
+  key: string;
+  label: string;
+  icon?: Component;
+  iconName?: string;
+  disabled?: boolean;
+  handler?: (payload?: any) => void;
+  children?: ContextMenuItem[];
+}
+
+export interface ContextMenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+  payload: any;
+}
--- a/apps/web-antd/src/components/context-menu/use-context-menu.ts
+++ b/apps/web-antd/src/components/context-menu/use-context-menu.ts
@@ -0,0 +1,110 @@
+import { reactive } from 'vue';
+
+import type { ContextMenuItem, ContextMenuState } from './types';
+
+const MENU_WIDTH = 180;
+const MENU_ITEM_HEIGHT = 36;
+const SUBMENU_GAP = 4;
+
+let listenersBound = false;
+
+export const contextMenuState = reactive<ContextMenuState>({
+  visible: false,
+  x: 0,
+  y: 0,
+  items: [],
+  payload: null,
+});
+
+export const submenuState = reactive({
+  activeKey: null as string | null,
+  items: [] as ContextMenuItem[],
+  left: 0,
+  top: 0,
+});
+
+function bindGlobalListeners() {
+  if (listenersBound) {
+    return;
+  }
+  listenersBound = true;
+
+  const hide = () => hideContextMenu();
+
+  document.addEventListener('click', hide, true);
+  document.addEventListener('scroll', hide, true);
+  window.addEventListener('resize', hide);
+}
+
+export function resetSubmenu() {
+  submenuState.activeKey = null;
+  submenuState.items = [];
+  submenuState.left = 0;
+  submenuState.top = 0;
+}
+
+export function showSubmenu(key: string, items: ContextMenuItem[], left: number, top: number) {
+  submenuState.activeKey = key;
+  submenuState.items = items;
+  submenuState.left = left;
+  submenuState.top = top;
+}
+
+export function showContextMenu(
+  e: MouseEvent,
+  items: ContextMenuItem[],
+  payload?: any,
+) {
+  e.preventDefault();
+  hideContextMenu();
+
+  const estimatedHeight = estimateMenuHeight(items);
+  let x = e.clientX;
+  let y = e.clientY;
+
+  if (x + MENU_WIDTH > window.innerWidth) {
+    x = Math.max(8, window.innerWidth - MENU_WIDTH - 8);
+  }
+  if (y + estimatedHeight > window.innerHeight) {
+    y = Math.max(8, window.innerHeight - estimatedHeight - 8);
+  }
+
+  contextMenuState.x = x;
+  contextMenuState.y = y;
+  contextMenuState.items = items;
+  contextMenuState.payload = payload ?? null;
+  contextMenuState.visible = true;
+
+  bindGlobalListeners();
+}
+
+export function hideContextMenu() {
+  contextMenuState.visible = false;
+  contextMenuState.items = [];
+  contextMenuState.payload = null;
+  resetSubmenu();
+}
+
+export function estimateMenuHeight(items: ContextMenuItem[]): number {
+  return items.length * MENU_ITEM_HEIGHT + 8;
+}
+
+export function getSubmenuPosition(
+  parentRect: DOMRect,
+  childCount: number,
+): { left: number; top: number } {
+  const submenuHeight = childCount * MENU_ITEM_HEIGHT + 8;
+  let left = parentRect.right + SUBMENU_GAP;
+  let top = parentRect.top;
+
+  if (left + MENU_WIDTH > window.innerWidth) {
+    left = parentRect.left - MENU_WIDTH - SUBMENU_GAP;
+  }
+  if (top + submenuHeight > window.innerHeight) {
+    top = Math.max(8, window.innerHeight - submenuHeight - 8);
+  }
+
+  return { left, top };
+}
+
+export { MENU_WIDTH, MENU_ITEM_HEIGHT };
--- a/apps/web-antd/src/components/form/components/gallery-pick-link.vue
+++ b/apps/web-antd/src/components/form/components/gallery-pick-link.vue
@@ -36,7 +36,7 @@ function onSelect(urls: string[]) {

 <template>
  <div class="gallery-pick-link-wrap">
-    <a class="gallery-pick-link" :class="{ disabled }" @click.prevent="openGallery">从图库选择</a>
+    <a class="gallery-pick-link" :class="{ disabled }" @click.prevent="openGallery">从文件库选择</a>
    <ImageGalleryPicker
      v-model:open="galleryOpen"
      :multiple="multiple"
--- a/apps/web-antd/src/components/form/components/image-gallery-picker.vue
+++ b/apps/web-antd/src/components/form/components/image-gallery-picker.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';

-import { Empty, Modal, Pagination, Spin } from 'ant-design-vue';
+import { Empty, Input, Modal, Pagination, Spin, Tabs } from 'ant-design-vue';

+import MIcon from '#/components/icon/icon.vue';
+import { useFileGalleryFilter } from '#/composables/use-file-gallery-filter';
+import { resolveTypeIcon } from '#/composables/use-file-type-icon';
 import type { FileGalleryItem } from '#/api/core/file-gallery';
 import { getFileGalleryList } from '#/api/core/file-gallery';

@@ -28,17 +31,25 @@ const items = ref<FileGalleryItem[]>([]);
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(24);
+const pageSizeOptions = ['12', '24', '48'];
 const selected = ref<string[]>([]);

+const {
+  activeType,
+  keyword,
+  tabs,
+  setActiveType,
+  buildListParams,
+  fileTypes,
+  typesLoading,
+} = useFileGalleryFilter('file-picker-active-type');
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
 async function load() {
  loading.value = true;
  try {
-    const res = await getFileGalleryList({
-      page: page.value,
-      page_size: pageSize.value,
-      pid: 0,
-      type: 0,
-    });
+    const res = await getFileGalleryList(buildListParams(page.value, pageSize.value));
    const data = (res as any)?.data ?? res;
    items.value = data?.items ?? [];
    total.value = data?.total ?? 0;
@@ -53,11 +64,19 @@ watch(
    if (val) {
      selected.value = [];
      page.value = 1;
-      load();
+      if (!typesLoading.value) {
+        void load();
+      }
    }
  },
 );

+watch(typesLoading, (val) => {
+  if (!val && props.open) {
+    void load();
+  }
+});
+
 function toggleSelect(url: string) {
  if (props.multiple) {
    const idx = selected.value.indexOf(url);
@@ -90,21 +109,73 @@ function handleCancel() {
  emit('update:open', false);
 }

-function onPageChange(p: number) {
+function onPageChange(p: number, size?: number) {
  page.value = p;
-  load();
+  if (size) {
+    pageSize.value = size;
+  }
+  void load();
+}
+
+function onShowSizeChange(_current: number, size: number) {
+  page.value = 1;
+  pageSize.value = size;
+  void load();
+}
+
+function onTabChange(key: string | number) {
+  setActiveType(Number(key));
+  page.value = 1;
+  void load();
+}
+
+function onSearch(value: string) {
+  keyword.value = value;
+  page.value = 1;
+  if (searchTimer) {
+    clearTimeout(searchTimer);
+  }
+  searchTimer = setTimeout(() => {
+    void load();
+  }, 300);
+}
+
+function itemIcon(item: FileGalleryItem) {
+  return item.type_icon || resolveTypeIcon(item.type, fileTypes.value);
 }
 </script>

 <template>
  <Modal
    :open="open"
-    title="从图库选择"
+    title="从文件库选择"
    width="820px"
    :ok-button-props="{ disabled: !selected.length }"
    @ok="handleOk"
    @cancel="handleCancel"
  >
+    <Tabs :active-key="String(activeType)" size="small" @change="onTabChange">
+      <Tabs.TabPane v-for="tab in tabs" :key="String(tab.value)">
+        <template #tab>
+          <span class="tab-label">
+            <MIcon v-if="tab.icon" :icon="tab.icon" size="12" />
+            {{ tab.label }}
+          </span>
+        </template>
+      </Tabs.TabPane>
+    </Tabs>
+
+    <div class="picker-toolbar">
+      <Input.Search
+        v-model:value="keyword"
+        allow-clear
+        placeholder="按文件名搜索"
+        size="small"
+        @search="onSearch"
+        @change="(e) => onSearch(e.target.value ?? '')"
+      />
+    </div>
+
    <Spin :spinning="loading">
      <div v-if="items.length" class="gallery-grid">
        <div
@@ -114,22 +185,33 @@ function onPageChange(p: number) {
          :class="{ active: isSelected(item.url) }"
          @click="toggleSelect(item.url)"
        >
-          <img :src="item.url" alt="" class="gallery-thumb" />
+          <img v-if="item.type === 0" :src="item.url" alt="" class="gallery-thumb" />
+          <div v-else class="gallery-file-icon">
+            <MIcon :icon="itemIcon(item)" size="28" />
+            <span class="file-name">{{ item.file_name || item.original_name || '未命名' }}</span>
+          </div>
          <div class="gallery-meta">
+            <div class="file-title">
+              <MIcon :icon="itemIcon(item)" size="11" class="meta-icon" />
+              {{ item.file_name || item.original_name || '-' }}
+            </div>
            <div>{{ item.file_size_text || '-' }}</div>
-            <div>{{ item.created_at || '-' }}</div>
          </div>
        </div>
      </div>
-      <Empty v-else description="图库暂无图片" />
-      <div v-if="total > pageSize" class="gallery-pagination">
+      <Empty v-else description="暂无文件" />
+      <div v-if="total > 0" class="gallery-pagination">
        <Pagination
          :current="page"
          :page-size="pageSize"
+          :page-size-options="pageSizeOptions"
          :total="total"
          size="small"
          show-less-items
+          show-size-changer
+          :show-total="(t) => `共 ${t} 条`"
          @change="onPageChange"
+          @show-size-change="onShowSizeChange"
        />
      </div>
    </Spin>
@@ -139,6 +221,16 @@ function onPageChange(p: number) {
 <style scoped lang="scss">
@use './picker-card-theme.scss' as picker;

+.tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.picker-toolbar {
+  margin-bottom: 12px;
+}
+
 .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
@@ -167,9 +259,42 @@ function onPageChange(p: number) {
  background: #f5f5f5;
 }

+.gallery-file-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 88px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  color: #4e5969;
+  padding: 6px;
+
+  .file-name {
+    font-size: 11px;
+    text-align: center;
+    word-break: break-all;
+    line-height: 1.2;
+    max-height: 28px;
+    overflow: hidden;
+  }
+}
+
 .gallery-meta {
  font-size: 11px;
  color: #86909c;
+
+  .file-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #1d2129;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

 .gallery-pagination {
@@ -189,12 +314,17 @@ function onPageChange(p: number) {
    }
  }

-  .gallery-thumb {
+  .gallery-thumb,
+  .gallery-file-icon {
    background: #374151;
  }

  .gallery-meta {
    @include picker.picker-text-secondary-dark;
+
+    .file-title {
+      color: #e5e7eb;
+    }
  }
 }
 </style>
--- a/apps/web-antd/src/composables/use-file-gallery-filter.ts
+++ b/apps/web-antd/src/composables/use-file-gallery-filter.ts
@@ -0,0 +1,104 @@
+import { computed, onMounted, ref } from 'vue';
+
+import type { FileTypeItem } from '#/api/core/file-gallery';
+import { getFileTypes } from '#/api/core/file-gallery';
+
+export const ALL_TYPE_VALUE = -1;
+
+import { ALL_TYPE_ICON } from '#/composables/use-file-type-icon';
+
+export interface FileGalleryTab {
+  key: string;
+  value: number;
+  label: string;
+  icon?: string;
+}
+
+export function useFileGalleryFilter(storageKey: string) {
+  const fileTypes = ref<FileTypeItem[]>([]);
+  const activeType = ref<number>(ALL_TYPE_VALUE);
+  const keyword = ref('');
+  const typesLoading = ref(false);
+
+  const tabs = computed<FileGalleryTab[]>(() => [
+    { key: 'all', value: ALL_TYPE_VALUE, label: '全部', icon: ALL_TYPE_ICON },
+    ...fileTypes.value.map((item) => ({
+      key: String(item.value),
+      value: item.value,
+      label: item.name,
+      icon: item.icon,
+    })),
+  ]);
+
+  function restoreActiveType() {
+    const saved = localStorage.getItem(storageKey);
+    if (saved === null) {
+      activeType.value = ALL_TYPE_VALUE;
+      return;
+    }
+    const parsed = Number.parseInt(saved, 10);
+    if (parsed === ALL_TYPE_VALUE) {
+      activeType.value = ALL_TYPE_VALUE;
+      return;
+    }
+    const exists = fileTypes.value.some((item) => item.value === parsed);
+    activeType.value = exists ? parsed : ALL_TYPE_VALUE;
+  }
+
+  function setActiveType(value: number) {
+    activeType.value = value;
+    localStorage.setItem(storageKey, String(value));
+  }
+
+  function buildListParams(page: number, pageSize: number) {
+    const params: {
+      page: number;
+      page_size: number;
+      pid: number;
+      type?: number;
+      keyword?: string;
+    } = {
+      page,
+      page_size: pageSize,
+      pid: 0,
+    };
+
+    if (activeType.value !== ALL_TYPE_VALUE) {
+      params.type = activeType.value;
+    }
+
+    const kw = keyword.value.trim();
+    if (kw) {
+      params.keyword = kw;
+    }
+
+    return params;
+  }
+
+  async function loadFileTypes() {
+    typesLoading.value = true;
+    try {
+      const res = await getFileTypes();
+      const data = (res as any)?.data ?? res;
+      fileTypes.value = Array.isArray(data) ? data : [];
+      restoreActiveType();
+    } finally {
+      typesLoading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    void loadFileTypes();
+  });
+
+  return {
+    fileTypes,
+    activeType,
+    keyword,
+    typesLoading,
+    tabs,
+    setActiveType,
+    buildListParams,
+    loadFileTypes,
+  };
+}
--- a/apps/web-antd/src/composables/use-file-type-icon.ts
+++ b/apps/web-antd/src/composables/use-file-type-icon.ts
@@ -0,0 +1,22 @@
+import type { FileTypeItem } from '#/api/core/file-gallery';
+
+export const ALL_TYPE_ICON = 'ant-design:appstore-outlined';
+
+export function resolveTypeIcon(
+  typeValue: number | undefined,
+  fileTypes: FileTypeItem[],
+  fallback = 'ant-design:file-outlined',
+): string {
+  if (typeValue === undefined || typeValue === null) {
+    return fallback;
+  }
+  const matched = fileTypes.find((item) => item.value === typeValue);
+  return matched?.icon || fallback;
+}
+
+export function iconToMenuItem(iconName: string) {
+  if (!iconName) {
+    return undefined;
+  }
+  return iconName;
+}
--- a/apps/web-antd/src/utils/oss-upload.ts
+++ b/apps/web-antd/src/utils/oss-upload.ts
@@ -286,7 +286,7 @@ export async function uploadToOss(options: UploadOptions): Promise<UploadResult>
        // 注意：使用后端返回的host，确保配置的灵活性
        const fileUrl = `${signature.host}/${objectName}`;

-        registerOssFile({ url: fileUrl, source: 0, file_size: file.size }).catch((err) => {
+        registerOssFile({ url: fileUrl, source: 0, file_size: file.size, file_name: file.name }).catch((err) => {
          console.warn('OSS 文件登记失败:', err);
        });

--- a/apps/web-antd/src/views/system/file-gallery/components/file-detail-drawer.vue
+++ b/apps/web-antd/src/views/system/file-gallery/components/file-detail-drawer.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Button, Descriptions, Image, Spin } from 'ant-design-vue';
+
+import MIcon from '#/components/icon/icon.vue';
+import type { FileGalleryDetail } from '#/api/core/file-gallery';
+import { getFileGalleryDetail } from '#/api/core/file-gallery';
+
+defineOptions({ name: 'FileDetailDrawer' });
+
+const loading = ref(false);
+const detail = ref<FileGalleryDetail | null>(null);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  class: 'w-[520px]',
+  showConfirmButton: false,
+  showCancelButton: false,
+  destroyOnClose: true,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      void loadDetail();
+    } else {
+      detail.value = null;
+    }
+  },
+});
+
+function downloadFile() {
+  if (!detail.value?.url) {
+    return;
+  }
+
+  const link = document.createElement('a');
+  link.href = detail.value.url;
+  link.download =
+    detail.value.file_name || detail.value.original_name || 'file';
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+async function loadDetail() {
+  const data = drawerApi.getData<{ id?: number }>();
+  if (!data?.id) {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const res = await getFileGalleryDetail(data.id);
+    detail.value = ((res as any)?.data ?? res) as FileGalleryDetail;
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({
+  drawerApi,
+});
+</script>
+
+<template>
+  <Drawer title="文件详情">
+    <Spin :spinning="loading">
+      <template v-if="detail">
+        <div class="preview-wrap">
+          <Image v-if="detail.type === 0" :src="detail.url" :width="220" />
+          <video
+            v-else-if="detail.type === 1"
+            class="media-player"
+            controls
+            :src="detail.url"
+          />
+          <audio
+            v-else-if="detail.type === 2"
+            class="media-player audio"
+            controls
+            :src="detail.url"
+          />
+          <div v-else-if="detail.type === 5" class="fallback-preview">
+            <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="48" />
+            <Button type="primary" @click="downloadFile">下载 PDF</Button>
+          </div>
+          <div v-else class="fallback-preview">
+            <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="48" />
+            <a :href="detail.url" target="_blank" rel="noopener noreferrer">下载/打开文件</a>
+          </div>
+        </div>
+        <Descriptions bordered :column="1" size="small" class="mt-4">
+          <Descriptions.Item label="文件名">{{ detail.file_name || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="分类">
+            <span class="type-row">
+              <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="14" />
+              {{ detail.type_text || '-' }}
+            </span>
+          </Descriptions.Item>
+          <Descriptions.Item label="大小">{{ detail.file_size_text || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="来源">{{ detail.source_text || detail.source }}</Descriptions.Item>
+          <Descriptions.Item label="上传时间">{{ detail.created_at || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="原始名">{{ detail.original_name || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="OSS路径">{{ detail.object_key || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="访问地址">
+            <a :href="detail.url" target="_blank" rel="noopener noreferrer">{{ detail.url }}</a>
+          </Descriptions.Item>
+        </Descriptions>
+      </template>
+    </Spin>
+  </Drawer>
+</template>
+
+<style scoped lang="scss">
+.preview-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 12px 0;
+}
+
+.media-player {
+  width: 100%;
+  max-width: 100%;
+  border-radius: 8px;
+  background: #000;
+}
+
+.media-player.audio {
+  height: 48px;
+  background: transparent;
+}
+
+.fallback-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+}
+
+.type-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>
--- a/apps/web-antd/src/views/system/file-gallery/index.vue
+++ b/apps/web-antd/src/views/system/file-gallery/index.vue
@@ -1,35 +1,72 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';

-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';

-import { Button, Card, Empty, Modal, Pagination, Spin, message } from 'ant-design-vue';
+import { EditOutlined, FolderOutlined } from '@ant-design/icons-vue';
+import {
+  Button,
+  Card,
+  Empty,
+  Input,
+  Modal,
+  Pagination,
+  Spin,
+  Tabs,
+  message,
+} from 'ant-design-vue';

+import type { ContextMenuItem } from '#/components/context-menu';
+import { showContextMenu } from '#/components/context-menu';
+import MIcon from '#/components/icon/icon.vue';
+import { useFileGalleryFilter } from '#/composables/use-file-gallery-filter';
+import { resolveTypeIcon } from '#/composables/use-file-type-icon';
 import type { FileGalleryItem } from '#/api/core/file-gallery';
 import {
+  batchArchiveFiles,
  deleteFileGalleryItem,
  getFileGalleryList,
+  moveFileGalleryType,
+  renameFileGalleryItem,
  syncFileGalleryFromOss,
 } from '#/api/core/file-gallery';

-defineOptions({ name: 'FileGallery' });
+import FileDetailDrawer from './components/file-detail-drawer.vue';
+
+defineOptions({ name: 'FileManagement' });

 const loading = ref(false);
+const archiving = ref(false);
 const syncing = ref(false);
+const renameOpen = ref(false);
+const renameValue = ref('');
+const renameTarget = ref<FileGalleryItem | null>(null);
 const items = ref<FileGalleryItem[]>([]);
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(24);
+const pageSizeOptions = ['12', '24', '48', '96'];
+
+const {
+  activeType,
+  keyword,
+  tabs,
+  setActiveType,
+  buildListParams,
+  fileTypes,
+  typesLoading,
+} = useFileGalleryFilter('file-management-active-type');
+
+const [DetailDrawer, detailDrawerApi] = useVbenDrawer({
+  connectedComponent: FileDetailDrawer,
+});
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null;

 async function load() {
  loading.value = true;
  try {
-    const res = await getFileGalleryList({
-      page: page.value,
-      page_size: pageSize.value,
-      pid: 0,
-      type: 0,
-    });
+    const res = await getFileGalleryList(buildListParams(page.value, pageSize.value));
    const data = (res as any)?.data ?? res;
    items.value = data?.items ?? [];
    total.value = data?.total ?? 0;
@@ -43,13 +80,29 @@ async function handleSync() {
  try {
    const res = await syncFileGalleryFromOss();
    const data = (res as any)?.data ?? res;
-    message.success(`同步完成：扫描 ${data?.scanned ?? 0} 个，新增 ${data?.added ?? 0} 张，跳过 ${data?.skipped ?? 0} 张`);
+    message.success(
+      `同步完成：扫描 ${data?.scanned ?? 0} 个，新增 ${data?.synced ?? 0} 个，跳过 ${data?.skipped ?? 0} 个`,
+    );
    await load();
  } finally {
    syncing.value = false;
  }
 }

+async function handleArchive() {
+  archiving.value = true;
+  try {
+    const res = await batchArchiveFiles();
+    const data = (res as any)?.data ?? res;
+    message.success(
+      `归档完成：修正分类 ${data?.reclassified ?? 0} 个，补全文件名 ${data?.file_name_filled ?? 0} 个`,
+    );
+    await load();
+  } finally {
+    archiving.value = false;
+  }
+}
+
 function handleDelete(item: FileGalleryItem) {
  Modal.confirm({
    title: '确认删除',
@@ -65,56 +118,208 @@ function handleDelete(item: FileGalleryItem) {
  });
 }

-function onPageChange(p: number) {
-  page.value = p;
-  load();
+function openDetail(item: FileGalleryItem) {
+  detailDrawerApi.setData({ id: item.id });
+  detailDrawerApi.open();
 }

-load();
+function handleRename(item: FileGalleryItem) {
+  renameTarget.value = item;
+  renameValue.value = item.file_name || item.original_name || '';
+  renameOpen.value = true;
+}
+
+async function submitRename() {
+  const name = renameValue.value.trim();
+  if (!name) {
+    message.warning('文件名不能为空');
+    return;
+  }
+  if (!renameTarget.value) {
+    return;
+  }
+  await renameFileGalleryItem(renameTarget.value.id, name);
+  message.success('重命名成功');
+  renameOpen.value = false;
+  renameTarget.value = null;
+  await load();
+}
+
+async function handleMoveType(item: FileGalleryItem, type: number) {
+  await moveFileGalleryType(item.id, type);
+  message.success('分类已更新');
+  await load();
+}
+
+function buildContextMenus(item: FileGalleryItem): ContextMenuItem[] {
+  const moveChildren: ContextMenuItem[] = fileTypes.value.map((typeItem) => ({
+    key: `move-${typeItem.value}`,
+    label: typeItem.name,
+    iconName: typeItem.icon,
+    disabled: item.type === typeItem.value,
+    handler: () => handleMoveType(item, typeItem.value),
+  }));
+
+  return [
+    {
+      key: 'rename',
+      label: '重命名',
+      icon: EditOutlined,
+      handler: () => handleRename(item),
+    },
+    {
+      key: 'move',
+      label: '移动分类',
+      icon: FolderOutlined,
+      children: moveChildren,
+    },
+  ];
+}
+
+function onContextMenu(e: MouseEvent, item: FileGalleryItem) {
+  showContextMenu(e, buildContextMenus(item), item);
+}
+
+function onTabChange(key: string | number) {
+  setActiveType(Number(key));
+  page.value = 1;
+  void load();
+}
+
+function onSearch(value: string) {
+  keyword.value = value;
+  page.value = 1;
+  if (searchTimer) {
+    clearTimeout(searchTimer);
+  }
+  searchTimer = setTimeout(() => {
+    void load();
+  }, 300);
+}
+
+function onPageChange(p: number, size?: number) {
+  page.value = p;
+  if (size) {
+    pageSize.value = size;
+  }
+  void load();
+}
+
+function onShowSizeChange(_current: number, size: number) {
+  page.value = 1;
+  pageSize.value = size;
+  void load();
+}
+
+function itemIcon(item: FileGalleryItem) {
+  return item.type_icon || resolveTypeIcon(item.type, fileTypes.value);
+}
+
+watch(typesLoading, (val) => {
+  if (!val) {
+    void load();
+  }
+});
 </script>

 <template>
-  <Page auto-content-height title="图库管理">
+  <Page auto-content-height title="文件管理">
    <Card>
+      <Tabs :active-key="String(activeType)" @change="onTabChange">
+        <Tabs.TabPane v-for="tab in tabs" :key="String(tab.value)">
+          <template #tab>
+            <span class="tab-label">
+              <MIcon v-if="tab.icon" :icon="tab.icon" size="14" />
+              {{ tab.label }}
+            </span>
+          </template>
+        </Tabs.TabPane>
+      </Tabs>
+
      <div class="toolbar">
-        <Button type="primary" :loading="syncing" @click="handleSync">同步 OSS 图片</Button>
+        <Input.Search
+          v-model:value="keyword"
+          allow-clear
+          placeholder="按文件名搜索"
+          style="width: 260px"
+          @search="onSearch"
+          @change="(e) => onSearch(e.target.value ?? '')"
+        />
+        <Button :loading="syncing" @click="handleSync">从 OSS 同步</Button>
+        <Button type="primary" :loading="archiving" @click="handleArchive">一键归档</Button>
        <Button :loading="loading" @click="load">刷新</Button>
      </div>

      <Spin :spinning="loading">
        <div v-if="items.length" class="gallery-grid">
-          <div v-for="item in items" :key="item.id" class="gallery-card">
-            <img :src="item.url" alt="" class="gallery-thumb" />
+          <div
+            v-for="item in items"
+            :key="item.id"
+            class="gallery-card"
+            @click="openDetail(item)"
+            @contextmenu.prevent="onContextMenu($event, item)"
+          >
+            <img v-if="item.type === 0" :src="item.url" alt="" class="gallery-thumb" />
+            <div v-else class="gallery-file-icon">
+              <MIcon :icon="itemIcon(item)" size="36" />
+              <span class="file-name">{{ item.file_name || item.original_name || '未命名' }}</span>
+            </div>
            <div class="gallery-meta">
-              <div>{{ item.file_size_text || '-' }}</div>
+              <div class="file-title">
+                <MIcon :icon="itemIcon(item)" size="12" class="meta-icon" />
+                {{ item.file_name || item.original_name || '-' }}
+              </div>
+              <div>{{ item.type_text || '-' }} · {{ item.file_size_text || '-' }}</div>
              <div>{{ item.created_at || '-' }}</div>
            </div>
-            <Button danger size="small" block @click="handleDelete(item)">删除</Button>
+            <Button danger size="small" block @click.stop="handleDelete(item)">删除</Button>
          </div>
        </div>
-        <Empty v-else description="暂无图片，可点击「同步 OSS 图片」导入" />
+        <Empty v-else description="暂无文件，可点击「从 OSS 同步」导入" />
      </Spin>

-      <div v-if="total > pageSize" class="gallery-pagination">
+      <div v-if="total > 0" class="gallery-pagination">
        <Pagination
          :current="page"
          :page-size="pageSize"
+          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
+          :show-total="(t) => `共 ${t} 条`"
          @change="onPageChange"
+          @show-size-change="onShowSizeChange"
        />
      </div>
    </Card>
+
+    <DetailDrawer />
+
+    <Modal
+      v-model:open="renameOpen"
+      title="重命名"
+      ok-text="保存"
+      cancel-text="取消"
+      @ok="submitRename"
+    >
+      <Input v-model:value="renameValue" placeholder="请输入文件名" />
+    </Modal>
  </Page>
 </template>

 <style scoped lang="scss">
@use '#/components/form/components/picker-card-theme.scss' as theme;

+.tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
+  flex-wrap: wrap;
 }

 .gallery-grid {
@@ -131,6 +336,7 @@ load();
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  background: #fff;
+  cursor: pointer;
 }

 .gallery-thumb {
@@ -141,10 +347,50 @@ load();
  background: #f5f5f5;
 }

+.gallery-file-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 120px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  color: #4e5969;
+  padding: 8px;
+
+  .file-name {
+    font-size: 12px;
+    text-align: center;
+    word-break: break-all;
+    line-height: 1.3;
+    max-height: 32px;
+    overflow: hidden;
+  }
+}
+
 .gallery-meta {
  font-size: 12px;
  color: #86909c;
  text-align: center;
+
+  .file-title {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: #1d2129;
+    font-weight: 500;
+    margin-bottom: 4px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .meta-icon {
+    flex-shrink: 0;
+  }
 }

 .gallery-pagination {
@@ -158,12 +404,17 @@ load();
    @include theme.picker-card-dark-props;
  }

-  .gallery-thumb {
+  .gallery-thumb,
+  .gallery-file-icon {
    background: #374151;
  }

  .gallery-meta {
    @include theme.picker-text-secondary-dark;
+
+    .file-title {
+      color: #e5e7eb;
+    }
  }
 }
 </style>
--- a/apps/web-antd/src/views/system/file-type/index.vue
+++ b/apps/web-antd/src/views/system/file-type/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, Form, Input, InputNumber, Modal, Select, Space, Switch, Table, message } from 'ant-design-vue';
+
+import MIcon from '#/components/icon/icon.vue';
+import type { FileTypeRecord } from '#/api/core/file-type';
+import {
+  createFileType,
+  deleteFileType,
+  getFileTypeList,
+  updateFileType,
+} from '#/api/core/file-type';
+
+defineOptions({ name: 'FileType' });
+
+const loading = ref(false);
+const items = ref<FileTypeRecord[]>([]);
+const modalOpen = ref(false);
+const isUpdate = ref(false);
+const form = ref<Partial<FileTypeRecord>>({
+  name: '',
+  icon: '',
+  value: 0,
+  suffix: '',
+  sort: 0,
+  status: 1,
+});
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 70 },
+  { title: '图标', key: 'icon', width: 80 },
+  { title: '名称', dataIndex: 'name' },
+  { title: '值', dataIndex: 'value', width: 70 },
+  { title: '后缀', dataIndex: 'suffix' },
+  { title: '排序', dataIndex: 'sort', width: 80 },
+  { title: '状态', key: 'status', width: 90 },
+  { title: '操作', key: 'action', width: 140 },
+];
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await getFileTypeList();
+    const data = (res as any)?.data ?? res;
+    items.value = Array.isArray(data) ? data : [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreate() {
+  isUpdate.value = false;
+  form.value = { name: '', icon: '', value: 0, suffix: '', sort: 0, status: 1 };
+  modalOpen.value = true;
+}
+
+function openEdit(row: FileTypeRecord) {
+  isUpdate.value = true;
+  form.value = { ...row };
+  modalOpen.value = true;
+}
+
+async function submitForm() {
+  if (!form.value.name?.trim() || !form.value.suffix?.trim()) {
+    message.warning('请填写名称和后缀');
+    return;
+  }
+  if (isUpdate.value && form.value.id) {
+    await updateFileType({
+      id: form.value.id,
+      name: form.value.name,
+      icon: form.value.icon,
+      suffix: form.value.suffix,
+      sort: form.value.sort,
+      status: form.value.status,
+    });
+    message.success('更新成功');
+  } else {
+    await createFileType(form.value);
+    message.success('创建成功');
+  }
+  modalOpen.value = false;
+  await load();
+}
+
+function handleDelete(row: FileTypeRecord) {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定删除分类「${row.name}」吗？`,
+    okType: 'danger',
+    async onOk() {
+      await deleteFileType(row.id);
+      message.success('删除成功');
+      await load();
+    },
+  });
+}
+
+void load();
+</script>
+
+<template>
+  <Page auto-content-height title="文件分类管理">
+    <Card>
+      <div class="toolbar">
+        <Button type="primary" @click="openCreate">新增分类</Button>
+        <Button :loading="loading" @click="load">刷新</Button>
+      </div>
+
+      <Table
+        :columns="columns"
+        :data-source="items"
+        :loading="loading"
+        :pagination="false"
+        row-key="id"
+        size="small"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'icon'">
+            <MIcon v-if="record.icon" :icon="record.icon" size="18" />
+            <span v-else>-</span>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            {{ record.status === 1 ? '启用' : '禁用' }}
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <Space>
+              <Button type="link" size="small" @click="openEdit(record)">编辑</Button>
+              <Button danger type="link" size="small" @click="handleDelete(record)">删除</Button>
+            </Space>
+          </template>
+        </template>
+      </Table>
+    </Card>
+
+    <Modal
+      v-model:open="modalOpen"
+      :title="isUpdate ? '编辑分类' : '新增分类'"
+      ok-text="保存"
+      cancel-text="取消"
+      @ok="submitForm"
+    >
+      <Form layout="vertical" class="mt-2">
+        <Form.Item label="名称" required>
+          <Input v-model:value="form.name" placeholder="如：图片" />
+        </Form.Item>
+        <Form.Item label="图标 (Iconify)">
+          <Input v-model:value="form.icon" placeholder="ant-design:file-image-outlined" />
+          <div v-if="form.icon" class="icon-preview">
+            <MIcon :icon="form.icon" size="20" />
+          </div>
+        </Form.Item>
+        <Form.Item v-if="!isUpdate" label="分类值 (对应 xk_file.type)" required>
+          <InputNumber v-model:value="form.value" :min="0" :max="99" class="w-full" />
+        </Form.Item>
+        <Form.Item v-else label="分类值">
+          <Input :value="String(form.value)" disabled />
+        </Form.Item>
+        <Form.Item label="后缀（逗号分隔）" required>
+          <Input v-model:value="form.suffix" placeholder="jpg,png,gif" />
+        </Form.Item>
+        <Form.Item label="排序">
+          <InputNumber v-model:value="form.sort" :min="0" class="w-full" />
+        </Form.Item>
+        <Form.Item label="状态">
+          <Switch
+            :checked="form.status === 1"
+            checked-children="启用"
+            un-checked-children="禁用"
+            @change="(v) => (form.status = v ? 1 : 0)"
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  </Page>
+</template>
+
+<style scoped lang="scss">
+.toolbar {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.icon-preview {
+  margin-top: 8px;
+}
+</style>