From 5b2c57ca3421a9806f8c1680c45fe9ea42c546eb Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Tue, 8 Jul 2025 20:34:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(pages):=20=E6=96=B0=E5=A2=9E=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=AE=A1=E7=90=86=E5=92=8C=E5=9B=BE=E5=BA=93=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**文件管理页面:**
- 实现完整的文件管理界面，支持文件的增删改查操作
- 左侧文件分类导航，支持按文件类型筛选（全部、图片、文档、视频等）
- 右侧文件列表，支持表格和卡片两种显示模式
- 完整的搜索功能，支持文件名、服务类型、上传日期范围等条件筛选
- 文件上传功能，支持拖拽上传和点击上传两种方式
- 批量操作功能，支持批量删除选中文件
- 文件预览和下载功能，提升用户体验

**图库管理页面:**
- 专门的图片管理界面，针对图片文件进行优化
- 图片网格展示，支持缩略图预览
- 图片上传、编辑、删除等基础管理功能
- 支持图片批量操作和分类管理
- 响应式设计，适配不同屏幕尺寸

**技术特点:**
- 严格遵循项目开发规范，统一使用CoiDialog弹框组件
- 所有按钮配备图标，遵循图标使用规范
- 使用NTag组件显示标签，遵循主题色统一规范
- 完整的表单验证和错误处理机制
- 响应式布局设计，良好的用户交互体验
- TypeScript类型安全，完整的类型定义
---
 src/views/system/file/index.vue    |  938 ++++++++++++++++++++++++
 src/views/system/picture/index.vue | 1084 ++++++++++++++++++++++++++++
 2 files changed, 2022 insertions(+)
 create mode 100644 src/views/system/file/index.vue
 create mode 100644 src/views/system/picture/index.vue

diff --git a/src/views/system/file/index.vue b/src/views/system/file/index.vue
new file mode 100644
index 0000000..ece7fac
--- /dev/null
+++ b/src/views/system/file/index.vue
@@ -0,0 +1,938 @@
+<template>
+  <div class="file-management p-1 bg-gray-50 h-screen flex flex-col">
+    <div class="flex-1 flex gap-2 overflow-hidden">
+      <!-- 左侧文件分类 -->
+      <div class="w-48 bg-white rounded-lg shadow-sm border border-gray-100 flex flex-col overflow-hidden">
+        <div class="px-4 py-3 border-b border-gray-100">
+          <h3 class="text-sm font-medium text-gray-900">
+            文件分类
+          </h3>
+        </div>
+        <div class="flex-1 overflow-y-auto">
+          <div class="p-2 space-y-1">
+            <div
+              v-for="category in fileCategories"
+              :key="category.value"
+              class="flex items-center px-3 py-2 rounded-md cursor-pointer transition-colors category-item"
+              :class="selectedCategory === category.value ? 'category-selected' : 'category-unselected'"
+              @click="handleCategoryChange(category.value)"
+            >
+              <component :is="category.icon" class="w-4 h-4 mr-2" />
+              <span class="text-sm flex-1">{{ category.label }}</span>
+              <NTag
+                v-if="selectedCategory === category.value"
+                type="primary"
+                size="small"
+                class="ml-auto"
+              >
+                ✓
+              </NTag>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧文件列表 -->
+      <div class="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 flex flex-col overflow-hidden">
+        <!-- 搜索表单 -->
+        <div class="px-4 py-2 border-b border-gray-100">
+          <n-form
+            ref="searchFormRef"
+            :model="searchForm"
+            label-placement="left"
+            label-width="auto"
+            class="search-form"
+          >
+            <n-grid :cols="5" :x-gap="8" :y-gap="4">
+              <n-grid-item>
+                <n-form-item label="文件名称" path="fileName">
+                  <n-input
+                    v-model:value="searchForm.fileName"
+                    placeholder="请输入文件名称"
+                    clearable
+                    @keydown.enter="handleSearch"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="文件后缀" path="fileSuffix">
+                  <n-input
+                    v-model:value="searchForm.fileSuffix"
+                    placeholder="请输入文件后缀"
+                    clearable
+                    @keydown.enter="handleSearch"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="存储类型" path="fileService">
+                  <n-select
+                    v-model:value="searchForm.fileService"
+                    placeholder="请选择存储类型"
+                    clearable
+                    :options="FILE_SERVICE_OPTIONS"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="" path="">
+                  <NSpace>
+                    <NButton type="primary" @click="handleSearch">
+                      <template #icon>
+                        <NIcon><icon-park-outline:search /></NIcon>
+                      </template>
+                      搜索
+                    </NButton>
+                    <NButton @click="handleReset">
+                      <template #icon>
+                        <NIcon><icon-park-outline:refresh /></NIcon>
+                      </template>
+                      重置
+                    </NButton>
+                  </NSpace>
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+          </n-form>
+        </div>
+
+        <!-- 表格头部操作栏 -->
+        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+          <div class="flex items-center gap-4">
+            <NButton
+              v-permission="PERMISSIONS.FILE.UPLOAD"
+              type="primary"
+              class="px-3 flex items-center"
+              @click="handleUpload"
+            >
+              <template #icon>
+                <NIcon class="mr-1" style="transform: translateY(-1px)">
+                  <icon-park-outline:upload />
+                </NIcon>
+              </template>
+              上传文件
+            </NButton>
+
+            <NButton
+              v-permission="PERMISSIONS.FILE.DELETE"
+              type="error"
+              :disabled="selectedRows.length === 0"
+              class="px-3 flex items-center"
+              @click="handleBatchDelete"
+            >
+              <template #icon>
+                <NIcon class="mr-1" style="transform: translateY(-1px)">
+                  <icon-park-outline:delete />
+                </NIcon>
+              </template>
+              批量删除
+            </NButton>
+          </div>
+
+          <div class="flex items-center gap-4 text-sm text-gray-500">
+            <span>共 {{ pagination.itemCount }} 条</span>
+            <NButton text @click="handleRefresh">
+              <template #icon>
+                <NIcon><icon-park-outline:refresh /></NIcon>
+              </template>
+            </NButton>
+          </div>
+        </div>
+
+        <!-- 表格内容 -->
+        <div class="table-wrapper flex-1 overflow-auto pt-4">
+          <!-- 数据表格 -->
+          <NDataTable
+            v-if="tableData.length > 0 || loading"
+            ref="tableRef"
+            :columns="columns"
+            :data="tableData"
+            :loading="loading"
+            :row-key="(row: SysFileVo) => row.fileId"
+            :checked-row-keys="selectedRowKeys"
+            :on-update:checked-row-keys="handleRowKeysUpdate"
+            :bordered="false"
+            :single-line="false"
+            :scroll-x="1600"
+            size="small"
+            class="custom-table"
+          />
+
+          <!-- 空状态 -->
+          <CoiEmpty
+            v-else
+            type="empty"
+            title="暂无文件数据"
+            description="当前没有找到任何文件记录"
+            size="medium"
+          />
+        </div>
+
+        <!-- 分页器 -->
+        <div v-if="tableData.length > 0" class="flex items-center px-4 py-2 border-t border-gray-100">
+          <div class="text-sm text-gray-500 mr-4">
+            共 {{ pagination.itemCount }} 条
+          </div>
+          <n-pagination
+            v-model:page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :item-count="pagination.itemCount"
+            :show-size-picker="true"
+            :page-sizes="[10, 20, 50, 100]"
+            show-quick-jumper
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 文件上传弹框 -->
+    <CoiDialog
+      ref="uploadDialogRef"
+      title="上传操作 ☀️"
+      :width="600"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleUploadConfirm"
+      @coi-cancel="handleUploadCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="uploadFormRef"
+            :model="uploadForm"
+            :rules="uploadRules"
+            label-placement="left"
+            label-width="100px"
+            require-mark-placement="right-hanging"
+          >
+            <!-- 文件服务选择 -->
+            <n-form-item label="文件服务" path="fileService">
+              <n-select
+                v-model:value="uploadForm.fileService"
+                placeholder="请选择文件服务"
+                :options="[
+                  { label: 'LOCAL', value: 'LOCAL' },
+                  { label: 'MINIO', value: 'MINIO' },
+                  { label: 'OSS', value: 'OSS' },
+                ]"
+              />
+            </n-form-item>
+
+            <!-- 文件回显路径 -->
+            <n-form-item label="文件回显路径" path="filePath">
+              <n-input
+                v-model:value="uploadForm.filePath"
+                placeholder="系统自动生成"
+                readonly
+                disabled
+              />
+            </n-form-item>
+
+            <!-- 文件上传区域 -->
+            <n-form-item label="上传文件" path="files">
+              <div class="w-full">
+                <NUpload
+                  ref="uploadRef"
+                  v-model:file-list="uploadFileList"
+                  :max="5"
+                  multiple
+                  directory-dnd
+                  :before-upload="beforeUpload"
+                  :custom-request="customUpload"
+                  :on-remove="handleRemoveFile"
+                  :on-error="handleUploadError"
+                  @change="handleFileChange"
+                >
+                  <NUploadDragger>
+                    <div class="text-center">
+                      <div class="mb-3">
+                        <NIcon size="48" class="text-blue-500">
+                          <icon-park-outline:upload />
+                        </NIcon>
+                      </div>
+                      <NText class="text-base">
+                        点击或者拖动文件到该区域来上传
+                      </NText>
+                      <NP depth="3" class="mt-2">
+                        支持图片[jpg, jpeg, png, gif, bmp, webp, svg] 文档[doc/docx/pdf/txt/xls/xlsx/ppt/pptx/md/zip/rar/7z]；
+                      </NP>
+                      <NP depth="3">
+                        文件大小不能超过2MB；最多上传5个；
+                      </NP>
+                    </div>
+                  </NUploadDragger>
+                </NUpload>
+              </div>
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+
+    <!-- 图片预览弹框 -->
+    <n-modal
+      v-model:show="imagePreviewVisible"
+      preset="card"
+      title="图片预览"
+      :style="{ width: '80%', maxWidth: '800px' }"
+      :mask-closable="true"
+    >
+      <div class="text-center">
+        <img
+          v-if="previewImageUrl"
+          :src="previewImageUrl"
+          :alt="previewImageName"
+          class="max-w-full max-h-96 mx-auto"
+        >
+        <div class="mt-2 text-sm text-gray-500">
+          {{ previewImageName }}
+        </div>
+      </div>
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, onMounted, ref } from 'vue'
+import { NButton, NIcon, NImage, NP, NPopconfirm, NSpace, NTag, NText, NUpload, NUploadDragger } from 'naive-ui'
+import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import { usePermission } from '@/hooks/usePermission'
+import { PERMISSIONS } from '@/constants/permissions'
+import {
+  batchDeleteSysFiles,
+  deleteSysFile,
+  FILE_SERVICE_OPTIONS,
+  getSysFileList,
+  uploadFile,
+} from '@/service/api/system/file'
+import type { SysFileQueryBo, SysFileSearchForm, SysFileVo } from '@/service/api/system/file'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
+
+// 文件分类图标组件
+const StarIcon = () => h('span', { class: 'text-yellow-500' }, '✨')
+const _ImageIcon = () => h('span', { class: 'text-pink-500' }, '🎨')
+const DocumentIcon = () => h('span', { class: 'text-blue-500' }, '📄')
+const AudioIcon = () => h('span', { class: 'text-purple-500' }, '🎵')
+const VideoIcon = () => h('span', { class: 'text-red-500' }, '📹')
+const ArchiveIcon = () => h('span', { class: 'text-orange-500' }, '🗂️')
+const AppIcon = () => h('span', { class: 'text-green-500' }, '🦄')
+const OtherIcon = () => h('span', { class: 'text-gray-500' }, '🎃')
+
+// 文件分类选项
+const fileCategories = [
+  { label: '全部', value: '0', icon: StarIcon },
+  { label: '图片', value: '1', icon: StarIcon },
+  { label: '文档', value: '2', icon: DocumentIcon },
+  { label: '音频', value: '3', icon: AudioIcon },
+  { label: '视频', value: '4', icon: VideoIcon },
+  { label: '压缩包', value: '5', icon: ArchiveIcon },
+  { label: '应用程序', value: '6', icon: AppIcon },
+  { label: '其他', value: '9', icon: OtherIcon },
+]
+
+// 权限验证
+const { hasPermission } = usePermission()
+
+// 响应式数据
+const searchFormRef = ref<FormInst>()
+const tableRef = ref<DataTableInst>()
+const uploadFormRef = ref<FormInst>()
+const uploadRef = ref<UploadInst>()
+const uploadDialogRef = ref()
+const loading = ref(false)
+const tableData = ref<SysFileVo[]>([])
+const selectedCategory = ref<string>('0') // 默认选中全部
+const selectedRows = ref<SysFileVo[]>([])
+const selectedRowKeys = ref<number[]>([])
+
+// 搜索表单
+const searchForm = ref<SysFileSearchForm>({
+  fileName: '',
+  fileSuffix: '',
+  fileService: '',
+  fileType: '0', // 默认全部
+})
+
+// 图片预览相关
+const imagePreviewVisible = ref(false)
+const previewImageUrl = ref('')
+const previewImageName = ref('')
+
+// 文件上传相关
+const uploadFileList = ref<UploadFileInfo[]>([])
+const uploading = ref(false)
+
+// 上传表单数据
+const uploadForm = ref({
+  fileService: 'LOCAL',
+  filePath: '',
+})
+
+// 上传表单验证规则
+const uploadRules = {
+  fileService: [
+    { required: true, message: '请选择文件服务', trigger: 'change' },
+  ],
+}
+
+// 分页设置
+const pagination = ref({
+  page: 1,
+  pageSize: 20,
+  itemCount: 0,
+})
+
+// 表格列定义
+const columns: DataTableColumns<SysFileVo> = [
+  {
+    type: 'selection',
+    width: 50,
+    disabled: (_row: SysFileVo) => !hasPermission(PERMISSIONS.FILE.DELETE),
+  },
+  {
+    title: '序号',
+    key: 'index',
+    width: 80,
+    render: (_, index) => {
+      return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
+    },
+  },
+  {
+    title: '文件原始名称',
+    key: 'fileName',
+    width: 200,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '文件新名称',
+    key: 'newName',
+    width: 200,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '文件后缀',
+    key: 'fileSuffix',
+    width: 100,
+    render: (row) => {
+      return h(NTag, {
+        type: 'primary',
+        size: 'small',
+      }, { default: () => row.fileSuffix?.toUpperCase() })
+    },
+  },
+  {
+    title: '文件上传路径',
+    key: 'fileUpload',
+    width: 250,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '文件回显路径',
+    key: 'filePath',
+    width: 200,
+    ellipsis: {
+      tooltip: true,
+    },
+    render: (row) => {
+      const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(
+        row.fileSuffix?.toLowerCase() || '',
+      )
+
+      if (isImage && row.filePath) {
+        return h(NImage, {
+          src: row.filePath,
+          width: 45,
+          height: 30,
+          objectFit: 'cover',
+          previewDisabled: true,
+          onClick: () => handleImagePreview(row.filePath!, row.fileName),
+          class: 'cursor-pointer rounded border',
+        })
+      }
+
+      // 对于非图片文件，返回文本让 ellipsis 配置生效
+      return row.filePath || '--'
+    },
+  },
+  {
+    title: '文件服务类型',
+    key: 'fileService',
+    width: 120,
+    render: (row) => {
+      const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
+        1: { type: 'success', text: '本地存储' },
+        2: { type: 'info', text: 'MinIO' },
+        3: { type: 'warning', text: '阿里云OSS' },
+      }
+      const config = serviceMap[row.fileService] || { type: 'info', text: '未知' }
+      return h(NTag, {
+        type: config.type,
+        size: 'small',
+      }, { default: () => config.text })
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 160,
+    render: (row) => {
+      return row.createTime ? new Date(row.createTime).toLocaleString() : '--'
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 160,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 预览按钮
+      buttons.push(h(NButton, {
+        type: 'primary',
+        size: 'small',
+        onClick: () => handlePreview(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlinePreviewOpen),
+        }),
+        default: () => '预览',
+      }))
+
+      // 删除按钮
+      if (hasPermission(PERMISSIONS.FILE.DELETE)) {
+        buttons.push(h(NPopconfirm, {
+          onPositiveClick: () => handleDelete(row.fileId!),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => '确定删除此文件吗？',
+          trigger: () => h(NButton, {
+            type: 'error',
+            size: 'small',
+          }, {
+            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+              default: () => h(IconParkOutlineDelete),
+            }),
+            default: () => '删除',
+          }),
+        }))
+      }
+
+      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+    },
+  },
+]
+
+// 查询文件列表
+async function fetchData() {
+  loading.value = true
+  try {
+    const params: SysFileQueryBo = {
+      pageNo: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      fileName: searchForm.value.fileName || undefined,
+      fileSuffix: searchForm.value.fileSuffix || undefined,
+      fileService: searchForm.value.fileService || undefined,
+      fileType: selectedCategory.value === '0' ? undefined : selectedCategory.value,
+    }
+
+    const { data } = await getSysFileList(params)
+    if (data) {
+      tableData.value = data.records
+      pagination.value.itemCount = data.total
+    }
+  }
+  catch {
+    coiMsgError('获取文件列表失败')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.page = 1
+  fetchData()
+}
+
+// 重置搜索
+function handleReset() {
+  searchForm.value = {
+    fileName: '',
+    fileSuffix: '',
+    fileService: '',
+    fileType: '0',
+  }
+  selectedCategory.value = '0'
+  handleSearch()
+}
+
+// 刷新
+function handleRefresh() {
+  fetchData()
+}
+
+// 分页变化处理
+function handlePageChange(page: number) {
+  pagination.value.page = page
+  fetchData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.value.pageSize = pageSize
+  pagination.value.page = 1
+  fetchData()
+}
+
+// 分类切换
+function handleCategoryChange(category: string) {
+  selectedCategory.value = category
+  searchForm.value.fileType = category
+  handleSearch()
+}
+
+// 表格行选择
+function handleRowKeysUpdate(keys: number[]) {
+  selectedRowKeys.value = keys
+  selectedRows.value = tableData.value.filter(row => keys.includes(row.fileId!))
+}
+
+// 删除文件
+async function handleDelete(id: number) {
+  try {
+    await deleteSysFile(id)
+    coiMsgSuccess('删除成功')
+    fetchData()
+  }
+  catch {
+    coiMsgError('删除失败')
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的文件')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要删除选中的 ${selectedRowKeys.value.length} 个文件吗？`, '批量删除确认')
+    await batchDeleteSysFiles(selectedRowKeys.value)
+    coiMsgSuccess('批量删除成功')
+    selectedRowKeys.value = []
+    selectedRows.value = []
+    fetchData()
+  }
+  catch (error) {
+    if (error !== 'cancel') {
+      coiMsgError('批量删除失败')
+    }
+  }
+}
+
+// 预览文件
+function handlePreview(row: SysFileVo) {
+  if (row.filePath) {
+    handleImagePreview(row.filePath, row.fileName)
+  }
+}
+
+// 图片预览
+function handleImagePreview(url: string, name: string) {
+  previewImageUrl.value = url
+  previewImageName.value = name
+  imagePreviewVisible.value = true
+}
+
+// 文件上传相关函数
+
+// 打开上传弹框
+function handleUpload() {
+  uploadForm.value = {
+    fileService: 'LOCAL',
+    filePath: '',
+  }
+  uploadFileList.value = []
+  uploading.value = false
+  uploadDialogRef.value?.coiOpen()
+}
+
+// 通用文件验证函数
+function validateFile(file: File, fileName: string, showError: boolean = true) {
+  // 文件空检查
+  if (!file || file.size === 0) {
+    if (showError)
+      coiMsgError('请选择有效的文件')
+    return false
+  }
+
+  // 文件名检查
+  if (!fileName) {
+    if (showError)
+      coiMsgError('无法获取文件名信息')
+    return false
+  }
+
+  // 提取文件扩展名
+  const fileExtension = fileName.split('.').pop()?.toLowerCase()
+  if (!fileExtension) {
+    if (showError)
+      coiMsgError('文件必须有扩展名')
+    return false
+  }
+
+  // 文件大小验证 (2MB)
+  const fileSize = file.size / 1024 / 1024
+  if (fileSize > 2) {
+    if (showError) {
+      coiMsgError(`文件大小超出限制！当前文件：${fileSize.toFixed(2)}MB，最大允许：2MB`)
+    }
+    return false
+  }
+
+  // 文件格式验证 - 与后端完全一致
+  const allowedImageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
+  const allowedDocumentExtensions = ['doc', 'docx', 'pdf', 'txt', 'xls', 'xlsx', 'ppt', 'pptx', 'md', 'zip', 'rar', '7z']
+  const allAllowedExtensions = [...allowedImageExtensions, ...allowedDocumentExtensions]
+
+  if (!allAllowedExtensions.includes(fileExtension)) {
+    if (showError) {
+      coiMsgError(`不支持的文件格式"${fileExtension}"，仅支持：${allAllowedExtensions.join(', ')}`)
+    }
+    return false
+  }
+
+  return true
+}
+
+// 文件上传前验证
+function beforeUpload(data: { file: UploadFileInfo }) {
+  try {
+    const file = data.file.file as File
+    const fileName = data.file.name || file?.name || ''
+
+    // 显示错误提示的主要验证点
+    return validateFile(file, fileName, true)
+  }
+  catch {
+    coiMsgError('文件验证失败，请重新选择文件')
+    return false
+  }
+}
+
+// 自定义上传逻辑
+async function customUpload({ file, onProgress, onFinish, onError }: any) {
+  try {
+    const fileObj = file.file as File
+    const fileName = file.name || fileObj.name
+
+    // 在 customUpload 中再次验证 - 双重保险
+    if (!validateFile(fileObj, fileName, false)) {
+      onError()
+      return
+    }
+
+    // 判断文件夹名称：图片文件夹为 pictures，其他为 files
+    const fileExtension = fileName.split('.').pop()?.toLowerCase()
+    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(fileExtension || '')
+    const folderName = isImage ? 'pictures' : 'files'
+
+    // 设置进度
+    onProgress({ percent: 10 })
+
+    // 调用上传API - 使用2MB限制
+    await uploadFile(fileObj, folderName, 2, '-1')
+
+    // 设置完成进度
+    onProgress({ percent: 100 })
+
+    // 完成上传
+    onFinish()
+
+    coiMsgSuccess(`文件 ${fileObj.name} 上传成功`)
+  }
+  catch (error: any) {
+    onError()
+
+    // 解析后端错误信息
+    let errorMessage = `文件 ${file.file.name} 上传失败`
+
+    // 检查是否是服务返回的结构化错误
+    if (error?.isSuccess === false) {
+      if (error.message) {
+        errorMessage = error.message
+      }
+      else if (error.msg) {
+        errorMessage = error.msg
+      }
+    }
+    else if (error?.response?.data?.msg) {
+      errorMessage = error.response.data.msg
+    }
+    else if (error?.message) {
+      if (error.message.includes('413')) {
+        errorMessage = '文件大小超出限制，请选择较小的文件'
+      }
+      else if (error.message.includes('400')) {
+        errorMessage = '文件格式不支持或文件无效'
+      }
+      else {
+        errorMessage = error.message
+      }
+    }
+
+    coiMsgError(errorMessage)
+  }
+}
+
+// 文件列表变化处理
+function handleFileChange(data: { fileList: UploadFileInfo[] }) {
+  uploadFileList.value = data.fileList
+}
+
+// 移除文件
+function handleRemoveFile(data: { file: UploadFileInfo }) {
+  const index = uploadFileList.value.findIndex(item => item.id === data.file.id)
+  if (index !== -1) {
+    uploadFileList.value.splice(index, 1)
+  }
+}
+
+// 上传错误处理 - 静默处理，避免重复错误提示
+function handleUploadError(_data: { file: UploadFileInfo, event?: ProgressEvent }) {
+  // 静默处理，主要错误信息已在 customUpload 中处理
+}
+
+// 确认上传
+async function handleUploadConfirm() {
+  if (!uploadFormRef.value)
+    return
+
+  try {
+    // 表单验证
+    await uploadFormRef.value.validate()
+  }
+  catch {
+    coiMsgWarning('请检查表单填写')
+    return
+  }
+
+  // 检查是否有待上传的文件
+  const pendingFiles = uploadFileList.value.filter(file => file.status === 'pending')
+  if (pendingFiles.length > 0) {
+    coiMsgWarning('还有文件未完成上传，请等待上传完成')
+    return
+  }
+
+  // 检查是否有上传失败的文件
+  const errorFiles = uploadFileList.value.filter(file => file.status === 'error')
+  if (errorFiles.length > 0) {
+    coiMsgWarning('有文件上传失败，请重新上传')
+    return
+  }
+
+  // 如果有上传成功的文件，刷新列表
+  const finishedFiles = uploadFileList.value.filter(file => file.status === 'finished')
+  if (finishedFiles.length > 0) {
+    coiMsgSuccess('所有文件上传完成')
+    uploadDialogRef.value?.coiClose()
+    await fetchData() // 刷新文件列表
+  }
+  else {
+    coiMsgWarning('请先选择要上传的文件')
+  }
+}
+
+// 取消上传
+function handleUploadCancel() {
+  uploadDialogRef.value?.coiClose()
+  uploadFileList.value = []
+  uploading.value = false
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.search-form :deep(.n-form-item-label) {
+  font-size: 12px;
+  color: #666;
+}
+
+.search-form :deep(.n-form-item) {
+  margin-bottom: 0;
+}
+
+.file-management {
+  min-height: 0;
+}
+
+.file-management .n-data-table {
+  --n-th-font-weight: normal;
+}
+
+/* 表格字体和间距优化 */
+.custom-table :deep(.n-data-table-td) {
+  font-size: 13px;
+  padding: 8px 12px;
+}
+
+.custom-table :deep(.n-data-table-th) {
+  font-size: 13px;
+  padding: 10px 12px;
+  font-weight: 500;
+}
+
+/* 操作按钮尺寸优化 */
+.custom-table :deep(.n-button--small-type) {
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+/* 标签尺寸优化 */
+.custom-table :deep(.n-tag--small-type) {
+  font-size: 11px;
+  padding: 2px 6px;
+}
+
+/* 分类选择器样式 */
+.category-item {
+  transition: all 0.2s ease;
+}
+
+.category-selected {
+  background-color: #f8faff;
+  font-weight: 500;
+}
+
+.category-unselected {
+  color: #666;
+}
+
+.category-unselected:hover {
+  background-color: #f5f5f5;
+  color: #333;
+}
+</style>
diff --git a/src/views/system/picture/index.vue b/src/views/system/picture/index.vue
new file mode 100644
index 0000000..dbba566
--- /dev/null
+++ b/src/views/system/picture/index.vue
@@ -0,0 +1,1084 @@
+<template>
+  <div class="picture-management p-1 bg-gray-50 h-screen flex flex-col">
+    <div class="flex-1 flex gap-2 overflow-hidden">
+      <!-- 左侧图片分类 -->
+      <div class="w-48 bg-white rounded-lg shadow-sm border border-gray-100 flex flex-col">
+        <div class="px-4 py-3 border-b border-gray-100">
+          <h3 class="text-sm font-medium text-gray-900">
+            📸 图片分类
+          </h3>
+        </div>
+        <div class="flex-1">
+          <div class="p-2 space-y-1">
+            <div
+              v-for="category in pictureCategories"
+              :key="category.value"
+              class="flex items-center px-3 py-2 rounded-md cursor-pointer transition-colors category-item"
+              :class="selectedCategory === category.value ? 'category-selected' : 'category-unselected'"
+              @click="handleCategoryChange(category.value)"
+            >
+              <component :is="category.icon" class="w-4 h-4 mr-2" />
+              <span class="text-sm flex-1">{{ category.label }}</span>
+              <NTag
+                v-if="selectedCategory === category.value"
+                type="primary"
+                size="small"
+                class="ml-auto"
+              >
+                ✓
+              </NTag>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧图片列表 -->
+      <div class="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 flex flex-col overflow-hidden">
+        <!-- 搜索表单 -->
+        <div class="px-4 py-2 border-b border-gray-100">
+          <n-form
+            ref="searchFormRef"
+            :model="searchForm"
+            label-placement="left"
+            label-width="auto"
+            class="search-form"
+          >
+            <n-grid :cols="5" :x-gap="8" :y-gap="4">
+              <n-grid-item>
+                <n-form-item label="图片名称" path="pictureName">
+                  <n-input
+                    v-model:value="searchForm.pictureName"
+                    placeholder="请输入图片名称"
+                    clearable
+                    @keydown.enter="handleSearch"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="图片后缀" path="pictureSuffix">
+                  <n-input
+                    v-model:value="searchForm.pictureSuffix"
+                    placeholder="请输入图片后缀"
+                    clearable
+                    @keydown.enter="handleSearch"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="存储类型" path="pictureService">
+                  <n-select
+                    v-model:value="searchForm.pictureService"
+                    placeholder="请选择存储类型"
+                    clearable
+                    :options="PICTURE_SERVICE_OPTIONS"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="" path="">
+                  <NSpace>
+                    <NButton type="primary" @click="handleSearch">
+                      <template #icon>
+                        <NIcon><icon-park-outline:search /></NIcon>
+                      </template>
+                      搜索
+                    </NButton>
+                    <NButton @click="handleReset">
+                      <template #icon>
+                        <NIcon><icon-park-outline:refresh /></NIcon>
+                      </template>
+                      重置
+                    </NButton>
+                  </NSpace>
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+          </n-form>
+        </div>
+
+        <!-- 表格头部操作栏 -->
+        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+          <div class="flex items-center gap-4">
+            <NButton
+              v-permission="PERMISSIONS.PICTURE.ADD"
+              type="primary"
+              class="px-3 flex items-center"
+              @click="handleUpload"
+            >
+              <template #icon>
+                <NIcon class="mr-1" style="transform: translateY(-1px)">
+                  <icon-park-outline:upload />
+                </NIcon>
+              </template>
+              上传图片
+            </NButton>
+
+            <NButton
+              v-permission="PERMISSIONS.PICTURE.DELETE"
+              type="error"
+              :disabled="selectedRows.length === 0"
+              class="px-3 flex items-center"
+              @click="handleBatchDelete"
+            >
+              <template #icon>
+                <NIcon class="mr-1" style="transform: translateY(-1px)">
+                  <icon-park-outline:delete />
+                </NIcon>
+              </template>
+              批量删除
+            </NButton>
+
+            <!-- 视图切换按钮 -->
+            <NButton
+              class="px-3 flex items-center"
+              @click="handleViewToggle"
+            >
+              <template #icon>
+                <NIcon class="mr-1" style="transform: translateY(-1px)">
+                  <icon-park-outline:switch v-if="viewMode === 'table'" />
+                  <icon-park-outline:list v-else />
+                </NIcon>
+              </template>
+              {{ viewMode === 'table' ? '图库视图' : '表格视图' }}
+            </NButton>
+          </div>
+
+          <div class="flex items-center gap-4 text-sm text-gray-500">
+            <span>共 {{ pagination.itemCount }} 条</span>
+            <NButton text @click="handleRefresh">
+              <template #icon>
+                <NIcon><icon-park-outline:refresh /></NIcon>
+              </template>
+            </NButton>
+          </div>
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="table-wrapper flex-1 overflow-auto pt-4">
+          <!-- 表格视图 -->
+          <n-data-table
+            v-if="(viewMode === 'table') && (tableData.length > 0 || loading)"
+            ref="tableRef"
+            :columns="columns"
+            :data="tableData"
+            :loading="loading"
+            :row-key="(row: SysPictureVo) => row.pictureId"
+            :checked-row-keys="selectedRowKeys"
+            :bordered="false"
+            :single-line="false"
+            :scroll-x="1600"
+            size="small"
+            class="custom-table"
+            @update:checked-row-keys="handleRowKeysUpdate"
+          />
+
+          <!-- 图库视图 -->
+          <div
+            v-else-if="(viewMode === 'gallery') && (tableData.length > 0 || loading)"
+            class="gallery-view p-4"
+          >
+            <NSpin :show="loading">
+              <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+                <NTooltip
+                  v-for="picture in tableData"
+                  :key="picture.pictureId"
+                  placement="top"
+                  trigger="hover"
+                >
+                  <template #trigger>
+                    <div class="picture-card group relative bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow cursor-pointer">
+                      <!-- 图片预览 -->
+                      <div class="aspect-square relative overflow-hidden bg-gray-100">
+                        <img
+                          :src="picture.picturePath"
+                          :alt="picture.pictureName"
+                          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                          @error="handleImageError"
+                        >
+                      </div>
+
+                      <!-- 图片信息 -->
+                      <div class="p-3 relative">
+                        <div class="text-sm font-medium text-gray-900 truncate" :title="picture.pictureName">
+                          {{ picture.pictureName }}
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1">
+                          {{ picture.pictureSize }} • {{ picture.pictureSuffix?.toUpperCase() }}
+                        </div>
+
+                        <!-- 操作按钮 - 右下角 -->
+                        <div class="absolute bottom-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                          <NButton
+                            size="tiny"
+                            circle
+                            type="primary"
+                            @click.stop="handleDownload(picture)"
+                          >
+                            <template #icon>
+                              <NIcon size="12">
+                                <icon-park-outline:download />
+                              </NIcon>
+                            </template>
+                          </NButton>
+
+                          <NButton
+                            v-permission="PERMISSIONS.PICTURE.DELETE"
+                            size="tiny"
+                            circle
+                            type="error"
+                            @click.stop="handleDelete(picture.pictureId!)"
+                          >
+                            <template #icon>
+                              <NIcon size="12">
+                                <icon-park-outline:delete />
+                              </NIcon>
+                            </template>
+                          </NButton>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+
+                  <!-- Tooltip 内容 - 显示详细信息 -->
+                  <template #default>
+                    <div class="max-w-xs">
+                      <div class="text-sm font-medium mb-2">
+                        {{ picture.pictureName }}
+                      </div>
+                      <div class="space-y-1 text-xs">
+                        <div><span class="text-gray-400">新名称:</span> {{ picture.newName }}</div>
+                        <div><span class="text-gray-400">文件大小:</span> {{ picture.pictureSize }}</div>
+                        <div><span class="text-gray-400">文件后缀:</span> {{ picture.pictureSuffix?.toUpperCase() }}</div>
+                        <div><span class="text-gray-400">服务类型:</span> {{ getPictureServiceText(picture.pictureService) }}</div>
+                        <div><span class="text-gray-400">创建时间:</span> {{ picture.createTime ? new Date(picture.createTime).toLocaleString() : '--' }}</div>
+                        <div><span class="text-gray-400">创建者:</span> {{ picture.createBy || '--' }}</div>
+                      </div>
+                    </div>
+                  </template>
+                </NTooltip>
+              </div>
+            </NSpin>
+          </div>
+
+          <!-- 空状态 -->
+          <CoiEmpty
+            v-else
+            type="empty"
+            title="暂无图片数据"
+            description="当前没有找到任何图片记录"
+            size="medium"
+          >
+            <template #action>
+              <NButton
+                v-permission="PERMISSIONS.PICTURE.ADD"
+                type="primary"
+                round
+                @click="handleUpload"
+              >
+                <template #icon>
+                  <NIcon>
+                    <icon-park-outline:plus />
+                  </NIcon>
+                </template>
+                上传图片
+              </NButton>
+            </template>
+          </CoiEmpty>
+        </div>
+
+        <!-- 分页器 -->
+        <div v-if="tableData.length > 0" class="flex items-center px-4 py-2 border-t border-gray-100">
+          <div class="text-sm text-gray-500 mr-4">
+            共 {{ pagination.itemCount }} 条
+          </div>
+          <n-pagination
+            v-model:page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :item-count="pagination.itemCount"
+            :show-size-picker="true"
+            :page-sizes="[12, 24, 48, 96]"
+            show-quick-jumper
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 图片上传弹框 -->
+    <CoiDialog
+      ref="uploadDialogRef"
+      title="上传操作 🌻"
+      :width="600"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleUploadConfirm"
+      @coi-cancel="handleUploadCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="uploadFormRef"
+            :model="uploadForm"
+            :rules="uploadRules"
+            label-placement="left"
+            label-width="100px"
+            require-mark-placement="right-hanging"
+          >
+            <!-- 图片分类选择 -->
+            <n-form-item label="图片类型" path="pictureType">
+              <n-select
+                v-model:value="uploadForm.pictureType"
+                placeholder="请选择图片类型"
+                :options="uploadPictureTypeOptions"
+              />
+            </n-form-item>
+
+            <!-- 服务类型选择 -->
+            <n-form-item label="服务类型" path="pictureService">
+              <n-select
+                v-model:value="uploadForm.pictureService"
+                placeholder="请选择服务类型"
+                :options="[
+                  { label: 'LOCAL', value: 'LOCAL' },
+                  { label: 'MINIO', value: 'MINIO' },
+                  { label: 'OSS', value: 'OSS' },
+                ]"
+              />
+            </n-form-item>
+
+            <!-- 图片回显路径 -->
+            <n-form-item label="图片回显路径" path="picturePath">
+              <n-input
+                v-model:value="uploadForm.picturePath"
+                placeholder="系统自动生成"
+                readonly
+                disabled
+              />
+            </n-form-item>
+
+            <!-- 图片上传区域 -->
+            <n-form-item label="上传图片" path="files">
+              <div class="w-full">
+                <NUpload
+                  ref="uploadRef"
+                  v-model:file-list="uploadFileList"
+                  :max="10"
+                  multiple
+                  directory-dnd
+                  :before-upload="beforeUpload"
+                  :custom-request="customUpload"
+                  :on-remove="handleRemoveFile"
+                  @change="handleFileChange"
+                >
+                  <NUploadDragger>
+                    <div class="text-center">
+                      <div class="mb-3">
+                        <NIcon size="48" class="text-blue-500">
+                          <icon-park-outline:camera />
+                        </NIcon>
+                      </div>
+                      <NText class="text-base">
+                        点击或者拖动图片到该区域来上传
+                      </NText>
+                      <NP depth="3" class="mt-2">
+                        支持图片格式[jpg/jpeg/png/gif/bmp/webp/svg]；
+                      </NP>
+                      <NP depth="3">
+                        图片大小不能超过2MB；最多上传10张；
+                      </NP>
+                    </div>
+                  </NUploadDragger>
+                </NUpload>
+              </div>
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, onMounted, ref } from 'vue'
+import { NButton, NIcon, NImage, NP, NPopconfirm, NSpace, NSpin, NTag, NText, NTooltip, NUpload, NUploadDragger } from 'naive-ui'
+import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import CoiDialog from '@/components/common/CoiDialog.vue'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import { usePermission } from '@/hooks/usePermission'
+import { PERMISSIONS } from '@/constants/permissions'
+import {
+  batchDeleteSysPictures,
+  deleteSysPicture,
+  getSysPictureList,
+  PICTURE_SERVICE_OPTIONS,
+  PICTURE_TYPE_OPTIONS,
+  uploadPicture,
+} from '@/service/api/system/picture'
+import type { SysPictureQueryBo, SysPictureSearchForm, SysPictureVo } from '@/service/api/system/picture'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineDownload from '~icons/icon-park-outline/download'
+
+// 图片分类图标组件
+const StarIcon = () => h('span', { class: 'text-yellow-500' }, '✨')
+const UserIcon = () => h('span', { class: 'text-green-500' }, '👤')
+const AnimationIcon = () => h('span', { class: 'text-pink-500' }, '🎨')
+const BeautyIcon = () => h('span', { class: 'text-red-500' }, '🌹')
+const SceneryIcon = () => h('span', { class: 'text-blue-500' }, '🌄')
+const StarCelebrityIcon = () => h('span', { class: 'text-purple-500' }, '⭐')
+const AnimalIcon = () => h('span', { class: 'text-orange-500' }, '🐾')
+const OtherIcon = () => h('span', { class: 'text-gray-500' }, '📷')
+
+// 图片分类选项
+const pictureCategories = [
+  { label: '全部数据', value: '0', icon: StarIcon },
+  { label: '用户头像', value: '1', icon: UserIcon },
+  { label: '动漫分类', value: '2', icon: AnimationIcon },
+  { label: '美女分类', value: '3', icon: BeautyIcon },
+  { label: '风景分类', value: '4', icon: SceneryIcon },
+  { label: '明星分类', value: '5', icon: StarCelebrityIcon },
+  { label: '动物分类', value: '6', icon: AnimalIcon },
+  { label: '其他分类', value: '9', icon: OtherIcon },
+]
+
+// 上传用的图片类型选项 (排除全部数据)
+const uploadPictureTypeOptions = PICTURE_TYPE_OPTIONS.filter(option => option.value !== '0')
+
+// 权限验证
+const { hasPermission } = usePermission()
+
+// 响应式数据
+const searchFormRef = ref<FormInst>()
+const tableRef = ref<DataTableInst>()
+const uploadFormRef = ref<FormInst>()
+const uploadRef = ref<UploadInst>()
+const uploadDialogRef = ref()
+const loading = ref(false)
+const tableData = ref<SysPictureVo[]>([])
+const selectedCategory = ref<string>('0') // 默认选中全部
+const selectedRows = ref<SysPictureVo[]>([])
+const selectedRowKeys = ref<number[]>([])
+const viewMode = ref<'table' | 'gallery'>('table') // 视图模式
+
+// 搜索表单
+const searchForm = ref<SysPictureSearchForm>({
+  pictureName: '',
+  pictureSuffix: '',
+  pictureService: '',
+  pictureType: '0', // 默认全部
+})
+
+// 图片上传相关
+const uploadFileList = ref<UploadFileInfo[]>([])
+const uploading = ref(false)
+
+// 上传表单数据
+const uploadForm = ref({
+  pictureService: 'LOCAL',
+  pictureType: '9', // 默认其他分类
+  picturePath: '',
+})
+
+// 上传表单验证规则
+const uploadRules = {
+  pictureType: [
+    { required: true, message: '请选择图片类型', trigger: 'change' },
+  ],
+  pictureService: [
+    { required: true, message: '请选择服务类型', trigger: 'change' },
+  ],
+}
+
+// 分页设置
+const pagination = ref({
+  page: 1,
+  pageSize: 24,
+  itemCount: 0,
+})
+
+// 表格列定义
+const columns: DataTableColumns<SysPictureVo> = [
+  {
+    type: 'selection',
+    width: 50,
+    disabled: (_row: SysPictureVo) => !hasPermission(PERMISSIONS.PICTURE.DELETE),
+  },
+  {
+    title: '序号',
+    key: 'index',
+    width: 60,
+    render: (_, index) => {
+      return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
+    },
+  },
+  {
+    title: '图片原始名称',
+    key: 'pictureName',
+    width: 200,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '图片新名称',
+    key: 'newName',
+    width: 200,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '图片大小',
+    key: 'pictureSize',
+    width: 100,
+  },
+  {
+    title: '图片后缀',
+    key: 'pictureSuffix',
+    width: 100,
+    render: (row) => {
+      return h(NTag, {
+        type: 'primary',
+        size: 'small',
+      }, { default: () => row.pictureSuffix?.toUpperCase() })
+    },
+  },
+  {
+    title: '图片上传路径',
+    key: 'pictureUpload',
+    width: 250,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '图片回显路径',
+    key: 'picturePath',
+    width: 200,
+    ellipsis: {
+      tooltip: true,
+    },
+    render: (row) => {
+      if (row.picturePath) {
+        return h(NImage, {
+          src: row.picturePath,
+          width: 45,
+          height: 30,
+          objectFit: 'cover',
+          previewDisabled: true,
+          class: 'rounded border',
+        })
+      }
+      return '--'
+    },
+  },
+  {
+    title: '服务类型',
+    key: 'pictureService',
+    width: 120,
+    render: (row) => {
+      const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
+        1: { type: 'success', text: '本地存储' },
+        2: { type: 'info', text: 'MinIO' },
+        3: { type: 'warning', text: '阿里云OSS' },
+      }
+      const config = serviceMap[row.pictureService] || { type: 'info', text: '未知' }
+      return h(NTag, {
+        type: config.type,
+        size: 'small',
+      }, { default: () => config.text })
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 160,
+    render: (row) => {
+      return row.createTime ? new Date(row.createTime).toLocaleString() : '--'
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 160,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 下载按钮
+      buttons.push(h(NButton, {
+        type: 'primary',
+        size: 'small',
+        onClick: () => handleDownload(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlineDownload),
+        }),
+        default: () => '下载',
+      }))
+
+      // 删除按钮
+      if (hasPermission(PERMISSIONS.PICTURE.DELETE)) {
+        buttons.push(h(NPopconfirm, {
+          onPositiveClick: () => handleDelete(row.pictureId!),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => '确定删除此图片吗？',
+          trigger: () => h(NButton, {
+            type: 'error',
+            size: 'small',
+          }, {
+            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+              default: () => h(IconParkOutlineDelete),
+            }),
+            default: () => '删除',
+          }),
+        }))
+      }
+
+      return h('div', { class: 'flex items-center justify-center gap-1' }, buttons)
+    },
+  },
+]
+
+// 查询图片列表
+async function fetchData() {
+  loading.value = true
+  try {
+    const params: SysPictureQueryBo = {
+      pageNo: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      pictureName: searchForm.value.pictureName || undefined,
+      pictureSuffix: searchForm.value.pictureSuffix || undefined,
+      pictureService: searchForm.value.pictureService || undefined,
+      pictureType: selectedCategory.value === '0' ? undefined : selectedCategory.value,
+    }
+
+    const { data } = await getSysPictureList(params)
+    if (data) {
+      tableData.value = data.records
+      pagination.value.itemCount = data.total
+    }
+  }
+  catch {
+    coiMsgError('获取图片列表失败')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.page = 1
+  fetchData()
+}
+
+// 重置搜索
+function handleReset() {
+  searchForm.value = {
+    pictureName: '',
+    pictureSuffix: '',
+    pictureService: '',
+    pictureType: '0',
+  }
+  selectedCategory.value = '0'
+  handleSearch()
+}
+
+// 刷新
+function handleRefresh() {
+  fetchData()
+}
+
+// 分页变化处理
+function handlePageChange(page: number) {
+  pagination.value.page = page
+  fetchData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.value.pageSize = pageSize
+  pagination.value.page = 1
+  fetchData()
+}
+
+// 分类切换
+function handleCategoryChange(category: string) {
+  selectedCategory.value = category
+  searchForm.value.pictureType = category
+  handleSearch()
+}
+
+// 视图切换
+function handleViewToggle() {
+  viewMode.value = viewMode.value === 'table' ? 'gallery' : 'table'
+
+  // 切换到图库视图时使用较大的分页大小
+  if (viewMode.value === 'gallery') {
+    pagination.value.pageSize = 24
+  }
+  else {
+    pagination.value.pageSize = 20
+  }
+  pagination.value.page = 1
+  fetchData()
+}
+
+// 表格行选择
+function handleRowKeysUpdate(keys: number[]) {
+  selectedRowKeys.value = keys
+  selectedRows.value = tableData.value.filter(row => keys.includes(row.pictureId!))
+}
+
+// 删除图片
+async function handleDelete(id: number) {
+  try {
+    await deleteSysPicture(id)
+    coiMsgSuccess('删除成功')
+    fetchData()
+  }
+  catch {
+    coiMsgError('删除失败')
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的图片')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要删除选中的 ${selectedRowKeys.value.length} 张图片吗？`, '批量删除确认')
+    await batchDeleteSysPictures(selectedRowKeys.value)
+    coiMsgSuccess('批量删除成功')
+    selectedRowKeys.value = []
+    selectedRows.value = []
+    fetchData()
+  }
+  catch (error) {
+    if (error !== 'cancel') {
+      coiMsgError('批量删除失败')
+    }
+  }
+}
+
+// 下载图片
+function handleDownload(row: SysPictureVo) {
+  if (row.picturePath) {
+    const link = document.createElement('a')
+    link.href = row.picturePath
+    link.download = row.pictureName
+    link.target = '_blank'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    coiMsgSuccess('开始下载图片')
+  }
+  else {
+    coiMsgError('图片路径不存在')
+  }
+}
+
+// 图片加载错误处理
+function handleImageError(e: Event) {
+  const img = e.target as HTMLImageElement
+  img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRjVGNUY1Ii8+CjxwYXRoIGQ9Ik0yMCAyMEw0NCA0NEwyMCA0NFYyMFoiIGZpbGw9IiNEOUQ5RDkiLz4KPGNpcmNsZSBjeD0iMjgiIGN5PSIyOCIgcj0iNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L3N2Zz4K'
+}
+
+// 获取图片服务类型文本
+function getPictureServiceText(serviceType: string): string {
+  const serviceMap: Record<string, string> = {
+    1: '本地存储',
+    2: 'MinIO存储',
+    3: '阿里云OSS',
+  }
+  return serviceMap[serviceType] || '未知'
+}
+
+// 图片上传相关函数
+
+// 打开上传弹框
+function handleUpload() {
+  uploadForm.value = {
+    pictureService: 'LOCAL',
+    pictureType: selectedCategory.value === '0' ? '9' : selectedCategory.value, // 根据当前分类设置默认值
+    picturePath: '',
+  }
+  uploadFileList.value = []
+  uploading.value = false
+  uploadDialogRef.value?.coiOpen()
+}
+
+// 图片上传前验证
+function beforeUpload(data: { file: UploadFileInfo }) {
+  try {
+    const file = data.file.file as File
+
+    // 添加调试日志
+    // console.log('beforeUpload 验证开始:', {
+    //   fileName: file.name,
+    //   fileSize: file.size,
+    //   fileSizeMB: (file.size / 1024 / 1024).toFixed(2),
+    // })
+
+    const fileSize = file.size / 1024 / 1024 // 转换为MB
+    const fileName = file.name
+    const fileExtension = fileName.split('.').pop()?.toLowerCase()
+
+    // 文件空检查
+    if (!file || file.size === 0) {
+      coiMsgError('请选择有效的图片文件')
+      return false
+    }
+
+    // 文件大小验证
+    if (fileSize > 2) {
+      // console.log('图片大小超限:', `${fileSize.toFixed(2)}MB`)
+      coiMsgError(`图片大小超出限制！当前图片：${fileSize.toFixed(2)}MB，最大允许：2MB`)
+      return false
+    }
+
+    // 图片格式验证
+    const allowedImageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
+
+    if (!fileExtension) {
+      coiMsgError('图片文件必须有扩展名')
+      return false
+    }
+
+    if (!allowedImageExtensions.includes(fileExtension)) {
+      // console.log('图片格式不支持:', fileExtension)
+      coiMsgError(`不支持的图片格式"${fileExtension}"，仅支持：${allowedImageExtensions.join(', ')}`)
+      return false
+    }
+
+    // console.log('图片验证通过:', fileName)
+    return true
+  }
+  catch (error) {
+    console.error('beforeUpload 验证出错:', error)
+    coiMsgError('图片验证失败，请重新选择图片')
+    return false
+  }
+}
+
+// 自定义上传逻辑
+async function customUpload({ file, onProgress, onFinish, onError }: any) {
+  try {
+    const fileObj = file.file as File
+
+    // 添加上传开始日志
+    // console.log('customUpload 开始上传:', {
+    //   fileName: fileObj.name,
+    //   fileSize: fileObj.size,
+    //   fileSizeMB: (fileObj.size / 1024 / 1024).toFixed(2),
+    // })
+
+    // 设置进度
+    onProgress({ percent: 10 })
+
+    // 调用上传API - 使用选择的分类
+    // console.log('调用上传API:', { pictureType: uploadForm.value.pictureType, fileSize: 2 })
+    await uploadPicture(fileObj, uploadForm.value.pictureType, 2)
+
+    // 设置完成进度
+    onProgress({ percent: 100 })
+
+    // 完成上传
+    onFinish()
+
+    coiMsgSuccess(`图片 ${fileObj.name} 上传成功`)
+  }
+  catch (error: any) {
+    onError()
+
+    console.error('图片上传失败:', error)
+
+    // 解析后端返回的错误信息
+    let errorMessage = `图片 ${file.file.name} 上传失败`
+
+    // 检查是否是服务返回的结构化错误
+    if (error?.isSuccess === false) {
+      // alova 返回的结构化错误
+      if (error.message) {
+        errorMessage = error.message
+      }
+      else if (error.msg) {
+        errorMessage = error.msg
+      }
+    }
+    else if (error?.response?.data?.msg) {
+      // 原始HTTP响应错误
+      errorMessage = error.response.data.msg
+    }
+    else if (error?.message) {
+      // 网络错误或其他错误
+      if (error.message.includes('413')) {
+        errorMessage = '图片大小超出限制，请选择较小的图片'
+      }
+      else if (error.message.includes('400')) {
+        errorMessage = '图片格式不支持或图片无效'
+      }
+      else {
+        errorMessage = error.message
+      }
+    }
+
+    coiMsgError(errorMessage)
+  }
+}
+
+// 文件列表变化处理
+function handleFileChange(data: { fileList: UploadFileInfo[] }) {
+  uploadFileList.value = data.fileList
+}
+
+// 移除文件
+function handleRemoveFile(data: { file: UploadFileInfo }) {
+  const index = uploadFileList.value.findIndex(item => item.id === data.file.id)
+  if (index !== -1) {
+    uploadFileList.value.splice(index, 1)
+  }
+}
+
+// 确认上传
+async function handleUploadConfirm() {
+  if (!uploadFormRef.value)
+    return
+
+  try {
+    // 表单验证
+    await uploadFormRef.value.validate()
+  }
+  catch {
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  // 检查是否有待上传的文件
+  const pendingFiles = uploadFileList.value.filter(file => file.status === 'pending')
+  if (pendingFiles.length > 0) {
+    coiMsgWarning('还有图片未完成上传，请等待上传完成')
+    return
+  }
+
+  // 检查是否有上传失败的文件
+  const errorFiles = uploadFileList.value.filter(file => file.status === 'error')
+  if (errorFiles.length > 0) {
+    coiMsgWarning('有图片上传失败，请重新上传')
+    return
+  }
+
+  // 如果有上传成功的文件，刷新列表
+  const finishedFiles = uploadFileList.value.filter(file => file.status === 'finished')
+  if (finishedFiles.length > 0) {
+    coiMsgSuccess('所有图片上传完成')
+    uploadDialogRef.value?.coiClose()
+    await fetchData() // 刷新图片列表
+  }
+  else {
+    coiMsgWarning('请先选择要上传的图片')
+  }
+}
+
+// 取消上传
+function handleUploadCancel() {
+  uploadDialogRef.value?.coiClose()
+  uploadFileList.value = []
+  uploading.value = false
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.search-form :deep(.n-form-item-label) {
+  font-size: 12px;
+  color: #666;
+}
+
+.search-form :deep(.n-form-item) {
+  margin-bottom: 0;
+}
+
+.picture-management {
+  min-height: 0;
+}
+
+.custom-table :deep(.n-data-table-td) {
+  font-size: 13px;
+  padding: 8px 12px;
+}
+
+.custom-table :deep(.n-data-table-th) {
+  font-size: 13px;
+  padding: 10px 12px;
+  background-color: #fafafa;
+  font-weight: 500;
+  color: #262626;
+}
+
+.custom-table :deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f8faff;
+}
+
+/* 操作按钮尺寸优化 */
+.custom-table :deep(.n-button--small-type) {
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+/* 标签尺寸优化 */
+.custom-table :deep(.n-tag--small-type) {
+  font-size: 11px;
+  padding: 2px 6px;
+}
+
+/* 分类选择器样式 */
+.category-item {
+  transition: all 0.2s ease;
+}
+
+.category-selected {
+  background-color: #f8faff;
+  font-weight: 500;
+}
+
+.category-unselected {
+  color: #666;
+}
+
+.category-unselected:hover {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.gallery-view {
+  min-height: 400px;
+}
+
+.picture-card {
+  transition: all 0.2s ease;
+}
+
+.picture-card:hover {
+  transform: translateY(-2px);
+}
+
+.picture-card img {
+  transition: transform 0.2s ease;
+}
+</style>