From fe4c0df49467ccc6f81a662786cd6fe080153139 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 15 Oct 2025 21:01:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=B8=BA=E9=9D=9E?=
 =?UTF-8?q?=E9=81=97=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A9=BA=E7=8A=B6=E6=80=81=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加智能空状态提示信息
- 新增getEmptyTitle、getEmptyDescription等辅助函数
- 升级CoiEmpty组件配置，支持重置搜索和新增操作
- 搜索无结果时显示重置搜索按钮
- 完全无数据时显示新增项目按钮
- 提供友好的操作引导和用户体验
---
 src/views/heritage/items/index.vue | 1462 ++++++++++++++++++++++++++++
 1 file changed, 1462 insertions(+)
 create mode 100644 src/views/heritage/items/index.vue

diff --git a/src/views/heritage/items/index.vue b/src/views/heritage/items/index.vue
new file mode 100644
index 0000000..080c9af
--- /dev/null
+++ b/src/views/heritage/items/index.vue
@@ -0,0 +1,1462 @@
+<template>
+  <div class="heritage-management p-1 bg-gray-50 h-screen flex flex-col">
+    <!-- 单一白色卡片容器 -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 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="name">
+                <n-input
+                  v-model:value="searchForm.name"
+                  placeholder="请输入项目名称"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="分类" path="category">
+                <n-select
+                  v-model:value="searchForm.category"
+                  placeholder="请选择分类"
+                  clearable
+                  :options="categoryOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="级别" path="level">
+                <n-select
+                  v-model:value="searchForm.level"
+                  placeholder="请选择级别"
+                  clearable
+                  :options="levelOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="状态" path="status">
+                <n-select
+                  v-model:value="searchForm.status"
+                  placeholder="请选择状态"
+                  clearable
+                  :options="statusOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="省份" path="province">
+                <n-input
+                  v-model:value="searchForm.province"
+                  placeholder="请输入省份"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="城市" path="city">
+                <n-input
+                  v-model:value="searchForm.city"
+                  placeholder="请输入城市"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="发布状态" path="publishStatus">
+                <n-select
+                  v-model:value="searchForm.publishStatus"
+                  placeholder="请选择发布状态"
+                  clearable
+                  :options="publishStatusOptions"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="是否精选" path="isFeatured">
+                <n-select
+                  v-model:value="searchForm.isFeatured"
+                  placeholder="请选择是否精选"
+                  clearable
+                  :options="featuredOptions"
+                />
+              </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 type="primary" @click="handleAdd">
+            <template #icon>
+              <NIcon><icon-park-outline:plus /></NIcon>
+            </template>
+            新增
+          </NButton>
+          <NButton
+            type="error"
+            :disabled="selectedRowKeys.length === 0"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon><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="loadTableData">
+            <template #icon>
+              <NIcon><IconParkOutlineRefresh /></NIcon>
+            </template>
+          </NButton>
+        </div>
+      </div>
+
+      <!-- 表格包裹器 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <n-data-table
+          v-if="tableData.length > 0 || loading"
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="(row: HeritageItemVo) => row.id"
+          :checked-row-keys="selectedRowKeys"
+          :bordered="false"
+          :single-line="false"
+          class="custom-table"
+          @update:checked-row-keys="handleRowSelectionChange"
+        />
+        <CoiEmpty
+          v-else
+          :type="getEmptyType()"
+          :title="getEmptyTitle()"
+          :description="getEmptyDescription()"
+          :show-action="true"
+          :action-text="getEmptyActionText()"
+          size="medium"
+          @action="handleEmptyAction"
+        >
+          <template #action>
+            <NButton
+              type="primary"
+              size="medium"
+              round
+              @click="handleEmptyAction"
+            >
+              <template #icon>
+                <NIcon>
+                  <IconParkOutlineRefresh v-if="hasSearchConditions()" />
+                  <icon-park-outline:plus v-else />
+                </NIcon>
+              </template>
+              {{ getEmptyActionText() }}
+            </NButton>
+          </template>
+        </CoiEmpty>
+      </div>
+
+      <!-- 分页区域 -->
+      <div v-if="tableData.length > 0" class="border-t border-gray-100">
+        <CoiPagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 表单弹框 -->
+    <CoiDialog
+      ref="formDialogRef"
+      :title="modalTitle"
+      :width="800"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleSubmit"
+      @coi-cancel="handleCancel"
+    >
+      <template #content>
+        <div class="dialog-form-container px-3 py-2">
+          <n-form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+            class="compact-form"
+          >
+            <!-- 基本信息 -->
+            <n-divider title-placement="left">
+              基本信息
+            </n-divider>
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="项目名称" path="name" class="mb-2">
+                  <n-input
+                    v-model:value="formData.name"
+                    placeholder="请输入项目名称"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="英文名称" path="nameEn" class="mb-2">
+                  <n-input
+                    v-model:value="formData.nameEn"
+                    placeholder="请输入英文名称"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="分类" path="category" class="mb-2">
+                  <n-select
+                    v-model:value="formData.category"
+                    placeholder="请选择分类"
+                    :options="categoryOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="级别" path="level" class="mb-2">
+                  <n-select
+                    v-model:value="formData.level"
+                    placeholder="请选择级别"
+                    :options="levelOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="省份" path="province" class="mb-2">
+                  <n-input
+                    v-model:value="formData.province"
+                    placeholder="请输入省份"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="城市" path="city" class="mb-2">
+                  <n-input
+                    v-model:value="formData.city"
+                    placeholder="请输入城市"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="状态" path="status" class="mb-2">
+                  <n-select
+                    v-model:value="formData.status"
+                    placeholder="请选择状态"
+                    :options="statusOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="排序权重" path="sortOrder" class="mb-2">
+                  <n-input-number
+                    v-model:value="formData.sortOrder"
+                    placeholder="请输入排序权重"
+                    :min="0"
+                    class="w-full"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <!-- 详细信息 -->
+            <n-divider title-placement="left">
+              详细信息
+            </n-divider>
+            <n-form-item label="项目介绍" path="description" class="mb-2">
+              <n-input
+                v-model:value="formData.description"
+                type="textarea"
+                placeholder="请输入项目介绍"
+                :rows="3"
+              />
+            </n-form-item>
+
+            <n-form-item label="历史渊源" path="history" class="mb-2">
+              <n-input
+                v-model:value="formData.history"
+                type="textarea"
+                placeholder="请输入历史渊源"
+                :rows="3"
+              />
+            </n-form-item>
+
+            <n-form-item label="技艺特点" path="skills" class="mb-2">
+              <n-input
+                v-model:value="formData.skills"
+                type="textarea"
+                placeholder="请输入技艺特点"
+                :rows="3"
+              />
+            </n-form-item>
+
+            <n-form-item label="文化意义" path="significance" class="mb-2">
+              <n-input
+                v-model:value="formData.significance"
+                type="textarea"
+                placeholder="请输入文化意义"
+                :rows="3"
+              />
+            </n-form-item>
+
+            <!-- 媒体信息 -->
+            <n-divider title-placement="left">
+              媒体信息
+            </n-divider>
+            <n-form-item label="封面图" path="coverImage" class="mb-2">
+              <div class="w-full">
+                <NUpload
+                  v-model:file-list="coverImageFileList"
+                  :max="1"
+                  list-type="image-card"
+                  :before-upload="beforeCoverImageUpload"
+                  :custom-request="customCoverImageUpload"
+                  @remove="handleRemoveCoverImage"
+                >
+                  点击上传封面图
+                </NUpload>
+                <NText depth="3" class="text-xs mt-1">
+                  支持jpg/png/webp格式，大小不超过2MB
+                </NText>
+              </div>
+            </n-form-item>
+
+            <n-form-item label="图片集合" path="images" class="mb-2">
+              <div class="w-full">
+                <NUpload
+                  v-model:file-list="imagesFileList"
+                  :max="10"
+                  multiple
+                  list-type="image-card"
+                  :before-upload="beforeImagesUpload"
+                  :custom-request="customImagesUpload"
+                  @remove="handleRemoveImage"
+                >
+                  点击上传图片
+                </NUpload>
+                <NText depth="3" class="text-xs mt-1">
+                  支持jpg/png/webp格式，大小不超过2MB，最多10张
+                </NText>
+              </div>
+            </n-form-item>
+
+            <n-form-item label="视频URL" path="videoUrl" class="mb-2">
+              <n-input
+                v-model:value="formData.videoUrl"
+                placeholder="请输入视频URL"
+              />
+            </n-form-item>
+
+            <!-- 其他设置 -->
+            <n-divider title-placement="left">
+              其他设置
+            </n-divider>
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="标签" path="tags" class="mb-2">
+                  <n-input
+                    v-model:value="formData.tags"
+                    placeholder="请输入标签（逗号分隔）"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="发布状态" path="publishStatus" class="mb-2">
+                  <n-select
+                    v-model:value="formData.publishStatus"
+                    placeholder="请选择发布状态"
+                    :options="publishStatusOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="是否精选" path="isFeatured" class="mb-2">
+                  <n-select
+                    v-model:value="formData.isFeatured"
+                    placeholder="请选择是否精选"
+                    :options="featuredOptions"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, nextTick, onMounted, ref } from 'vue'
+import type { DataTableColumns, FormInst, FormRules, UploadFileInfo } from 'naive-ui'
+import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NText, NUpload } from 'naive-ui'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import CoiDialog from '@/components/common/CoiDialog.vue'
+import CoiPagination from '@/components/common/CoiPagination.vue'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import type {
+  HeritageItemBo,
+  HeritageItemSearchForm,
+  HeritageItemVo,
+} from '@/service/api/heritage/items'
+import {
+  addHeritageItem,
+  batchDeleteHeritageItems,
+  changePublishStatus,
+  deleteHeritageItem,
+  getHeritageItemList,
+  setFeatured,
+  updateHeritageItem,
+} from '@/service/api/heritage/items'
+import { uploadPicture } from '@/service/api/system/picture'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineEdit from '~icons/icon-park-outline/edit'
+import IconParkOutlineRefresh from '~icons/icon-park-outline/refresh'
+
+// 引用
+const searchFormRef = ref<FormInst>()
+const formRef = ref<FormInst>()
+const formDialogRef = ref()
+
+// 数据状态
+const loading = ref(false)
+const tableData = ref<HeritageItemVo[]>([])
+const selectedRowKeys = ref<string[]>([])
+
+// 搜索表单
+const searchForm = ref<HeritageItemSearchForm>({
+  name: '',
+  category: '',
+  level: '',
+  province: '',
+  city: '',
+  status: '',
+  publishStatus: null,
+  isFeatured: null,
+})
+
+// 分页配置
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+})
+
+// 表单相关
+const modalTitle = ref('新增非遗项目')
+const isEdit = ref(false)
+const formData = ref<HeritageItemBo>({
+  name: '',
+  nameEn: '',
+  category: '',
+  level: '',
+  province: '',
+  city: '',
+  description: '',
+  history: '',
+  skills: '',
+  significance: '',
+  coverImage: '',
+  images: '',
+  videoUrl: '',
+  tags: '',
+  status: 'active',
+  isFeatured: 0,
+  sortOrder: 0,
+  publishStatus: 0,
+})
+
+// 图片上传相关
+const coverImageFileList = ref<UploadFileInfo[]>([])
+const imagesFileList = ref<UploadFileInfo[]>([])
+
+// 下拉选项
+const categoryOptions = [
+  { label: '传统工艺', value: 'traditional-craft' },
+  { label: '传统艺术', value: 'traditional-art' },
+  { label: '传统医药', value: 'traditional-medicine' },
+  { label: '民俗', value: 'folk-custom' },
+  { label: '传统戏剧', value: 'traditional-drama' },
+  { label: '传统音乐', value: 'traditional-music' },
+  { label: '传统舞蹈', value: 'traditional-dance' },
+  { label: '传统体育', value: 'traditional-sports' },
+]
+
+const levelOptions = [
+  { label: '世界级', value: 'world' },
+  { label: '国家级', value: 'national' },
+  { label: '省级', value: 'provincial' },
+  { label: '市级', value: 'municipal' },
+  { label: '县级', value: 'county' },
+]
+
+const statusOptions = [
+  { label: '正常传承', value: 'active' },
+  { label: '濒危', value: 'endangered' },
+]
+
+const publishStatusOptions = [
+  { label: '草稿', value: 0 },
+  { label: '已发布', value: 1 },
+]
+
+const featuredOptions = [
+  { label: '否', value: 0 },
+  { label: '是', value: 1 },
+]
+
+// 表单验证规则
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
+  category: [{ required: true, message: '请选择分类', trigger: 'change' }],
+  level: [{ required: true, message: '请选择级别', trigger: 'change' }],
+}
+
+// 表格列配置
+const columns: DataTableColumns<HeritageItemVo> = [
+  { type: 'selection' },
+  {
+    title: '序号',
+    key: 'index',
+    width: 60,
+    align: 'center',
+    render: (_row, index) => {
+      return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
+    },
+  },
+  {
+    title: '项目名称',
+    key: 'name',
+    width: 200,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '英文名称',
+    key: 'nameEn',
+    width: 180,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '分类',
+    key: 'category',
+    width: 120,
+    align: 'center',
+    render: (row) => {
+      const option = categoryOptions.find(opt => opt.value === row.category)
+      return h(NTag, {
+        type: 'primary',
+        size: 'small',
+      }, { default: () => option?.label || row.category })
+    },
+  },
+  {
+    title: '级别',
+    key: 'level',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      const option = levelOptions.find(opt => opt.value === row.level)
+      const typeMap: Record<string, 'success' | 'warning' | 'error' | 'info'> = {
+        world: 'error',
+        national: 'warning',
+        provincial: 'info',
+        municipal: 'success',
+        county: 'success',
+      }
+      return h(NTag, {
+        type: typeMap[row.level] || 'info',
+        size: 'small',
+      }, { default: () => option?.label || row.level })
+    },
+  },
+  {
+    title: '省份',
+    key: 'province',
+    width: 100,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '城市',
+    key: 'city',
+    width: 100,
+    ellipsis: { tooltip: true },
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      const statusMap = {
+        active: { type: 'success' as const, text: '正常传承' },
+        endangered: { type: 'error' as const, text: '濒危' },
+      }
+      const config = statusMap[row.status as keyof typeof statusMap] || { type: 'default' as const, text: row.status }
+      return h(NTag, {
+        type: config.type,
+        size: 'small',
+      }, { default: () => config.text })
+    },
+  },
+  {
+    title: '浏览量',
+    key: 'viewCount',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '点赞数',
+    key: 'likeCount',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '收藏数',
+    key: 'favoriteCount',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '发布状态',
+    key: 'publishStatus',
+    width: 120,
+    align: 'center',
+    render: (row) => {
+      return h('div', { class: 'flex items-center justify-center' }, [
+        h(NPopconfirm, {
+          onPositiveClick: () => handleTogglePublishStatus(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => `确定要${row.publishStatus === 1 ? '取消发布' : '发布'}此项目吗？`,
+          trigger: () => h(NSwitch, {
+            value: row.publishStatus === 1,
+            size: 'small',
+            checkedChildren: '已发布',
+            uncheckedChildren: '草稿',
+          }),
+        }),
+      ])
+    },
+  },
+  {
+    title: '是否精选',
+    key: 'isFeatured',
+    width: 120,
+    align: 'center',
+    render: (row) => {
+      return h('div', { class: 'flex items-center justify-center' }, [
+        h(NPopconfirm, {
+          onPositiveClick: () => handleToggleFeatured(row),
+          negativeText: '取消',
+          positiveText: '确定',
+        }, {
+          default: () => `确定要${row.isFeatured === 1 ? '取消精选' : '设为精选'}此项目吗？`,
+          trigger: () => h(NSwitch, {
+            value: row.isFeatured === 1,
+            size: 'small',
+            checkedChildren: '精选',
+            uncheckedChildren: '普通',
+          }),
+        }),
+      ])
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 180,
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 280,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 编辑按钮
+      buttons.push(h(NButton, {
+        type: 'primary',
+        size: 'small',
+        class: 'action-btn-primary',
+        onClick: () => handleEdit(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlineEdit),
+        }),
+        default: () => '编辑',
+      }))
+
+      // 删除按钮
+      buttons.push(h(NPopconfirm, {
+        onPositiveClick: () => handleDelete(row.id),
+      }, {
+        trigger: () => h(NButton, {
+          type: 'error',
+          secondary: true,
+          size: 'small',
+          class: 'action-btn-secondary action-btn-danger',
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineDelete),
+          }),
+          default: () => '删除',
+        }),
+        default: () => '确定删除此记录吗？',
+      }))
+
+      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+    },
+  },
+]
+
+// 加载表格数据
+async function loadTableData() {
+  try {
+    loading.value = true
+
+    // 过滤掉空值和null值，只保留有效的搜索条件
+    const filteredParams = Object.entries(searchForm.value).reduce((acc, [key, value]) => {
+      if (value !== null && value !== undefined && value !== '') {
+        acc[key] = value
+      }
+      return acc
+    }, {} as Record<string, any>)
+
+    const params = {
+      pageNum: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      ...filteredParams,
+    }
+
+    const { data, isSuccess } = await getHeritageItemList(params)
+
+    if (isSuccess && data) {
+      tableData.value = data.records || []
+      pagination.value.itemCount = data.total || 0
+    }
+    else {
+      coiMsgError('加载数据失败')
+    }
+  }
+  catch {
+    coiMsgError('加载数据失败，请检查网络连接')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 重置
+async function handleReset() {
+  // 重置搜索表单的所有字段 - 使用null和空字符串确保组件正确重置
+  searchForm.value = {
+    name: '',
+    category: '',
+    level: '',
+    province: '',
+    city: '',
+    status: '',
+    publishStatus: null,
+    isFeatured: null,
+  }
+
+  // 使用 nextTick 确保 DOM 更新后再重置表单状态
+  await nextTick()
+
+  // 重置表单验证状态
+  searchFormRef.value?.restoreValidation()
+
+  // 重置分页到第一页并重新加载数据
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 新增
+function handleAdd() {
+  modalTitle.value = '新增非遗项目'
+  isEdit.value = false
+  formData.value = {
+    name: '',
+    nameEn: '',
+    category: '',
+    level: '',
+    province: '',
+    city: '',
+    description: '',
+    history: '',
+    skills: '',
+    significance: '',
+    coverImage: '',
+    images: '',
+    videoUrl: '',
+    tags: '',
+    status: 'active',
+    isFeatured: 0,
+    sortOrder: 0,
+    publishStatus: 0,
+  }
+  // 清空文件列表
+  coverImageFileList.value = []
+  imagesFileList.value = []
+  formDialogRef.value?.coiOpen()
+}
+
+// 编辑
+function handleEdit(row: HeritageItemVo) {
+  modalTitle.value = '编辑非遗项目'
+  isEdit.value = true
+  formData.value = {
+    id: row.id,
+    name: row.name,
+    nameEn: row.nameEn || '',
+    category: row.category,
+    level: row.level,
+    province: row.province || '',
+    city: row.city || '',
+    description: row.description || '',
+    history: '',
+    skills: '',
+    significance: '',
+    coverImage: row.coverImage || '',
+    images: '',
+    videoUrl: '',
+    tags: row.tags || '',
+    status: row.status,
+    isFeatured: row.isFeatured,
+    sortOrder: row.sortOrder || 0,
+    publishStatus: row.publishStatus,
+  }
+
+  // 初始化文件列表（编辑时显示已有图片）
+  coverImageFileList.value = []
+  imagesFileList.value = []
+
+  // 如果有封面图，添加到文件列表用于预览
+  if (row.coverImage) {
+    coverImageFileList.value = [{
+      id: 'cover-image',
+      name: '封面图',
+      status: 'finished',
+      url: row.coverImage,
+    }]
+  }
+
+  formDialogRef.value?.coiOpen()
+}
+
+// 删除
+async function handleDelete(id: string) {
+  try {
+    const { isSuccess } = await deleteHeritageItem(id)
+
+    if (isSuccess) {
+      coiMsgSuccess('删除成功')
+      await loadTableData()
+    }
+    else {
+      coiMsgError('删除失败，请稍后重试')
+    }
+  }
+  catch {
+    coiMsgError('删除失败，请检查网络连接')
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的记录')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要删除选中的 ${selectedRowKeys.value.length} 条记录吗？`, '批量删除确认')
+
+    const { isSuccess } = await batchDeleteHeritageItems(selectedRowKeys.value)
+
+    if (isSuccess) {
+      coiMsgSuccess('批量删除成功')
+      selectedRowKeys.value = []
+      await loadTableData()
+    }
+    else {
+      coiMsgError('批量删除失败，请稍后重试')
+    }
+  }
+  catch {
+    // 用户取消操作
+  }
+}
+
+// 切换发布状态
+async function handleTogglePublishStatus(row: HeritageItemVo) {
+  const newStatus = row.publishStatus === 1 ? 0 : 1
+  const statusText = newStatus === 1 ? '发布' : '取消发布'
+
+  try {
+    const { isSuccess } = await changePublishStatus(row.id, newStatus)
+
+    if (isSuccess) {
+      coiMsgSuccess(`${statusText}成功`)
+      await loadTableData()
+    }
+    else {
+      coiMsgError(`${statusText}失败，请稍后重试`)
+    }
+  }
+  catch {
+    coiMsgError(`${statusText}失败，请检查网络连接`)
+  }
+}
+
+// 切换精选状态
+async function handleToggleFeatured(row: HeritageItemVo) {
+  const newStatus = row.isFeatured === 1 ? 0 : 1
+  const statusText = newStatus === 1 ? '设为精选' : '取消精选'
+
+  try {
+    const { isSuccess } = await setFeatured(row.id, newStatus)
+
+    if (isSuccess) {
+      coiMsgSuccess(`${statusText}成功`)
+      await loadTableData()
+    }
+    else {
+      coiMsgError(`${statusText}失败，请稍后重试`)
+    }
+  }
+  catch {
+    coiMsgError(`${statusText}失败，请检查网络连接`)
+  }
+}
+
+// 行选择变化
+function handleRowSelectionChange(rowKeys: string[]) {
+  selectedRowKeys.value = rowKeys
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (!formRef.value)
+    return
+
+  try {
+    // 表单验证
+    await formRef.value.validate()
+  }
+  catch {
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  try {
+    const submitData = { ...formData.value }
+
+    const { isSuccess } = isEdit.value
+      ? await updateHeritageItem(submitData)
+      : await addHeritageItem(submitData)
+
+    if (isSuccess) {
+      coiMsgSuccess(isEdit.value ? '修改成功' : '新增成功')
+      formDialogRef.value?.coiClose()
+      await loadTableData()
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请稍后重试' : '新增失败，请稍后重试')
+    }
+  }
+  catch (error) {
+    if (error instanceof Error) {
+      coiMsgError(error.message || (isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接'))
+    }
+    else {
+      coiMsgError(isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接')
+    }
+  }
+}
+
+// 取消表单
+function handleCancel() {
+  formDialogRef.value?.coiClose()
+  // 清空文件列表
+  coverImageFileList.value = []
+  imagesFileList.value = []
+}
+
+// 封面图上传前验证
+function beforeCoverImageUpload(data: { file: UploadFileInfo }) {
+  const file = data.file.file as File
+  const fileSize = file.size / 1024 / 1024
+  const fileExtension = file.name.split('.').pop()?.toLowerCase()
+
+  if (fileSize > 2) {
+    coiMsgError(`图片大小超出限制！当前：${fileSize.toFixed(2)}MB，最大：2MB`)
+    return false
+  }
+
+  const allowedExtensions = ['jpg', 'jpeg', 'png', 'webp']
+  if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+    coiMsgError(`不支持的图片格式"${fileExtension}"，仅支持：${allowedExtensions.join(', ')}`)
+    return false
+  }
+
+  return true
+}
+
+// 封面图自定义上传
+async function customCoverImageUpload({ file, onProgress, onFinish, onError }: any) {
+  try {
+    const fileObj = file.file as File
+    onProgress({ percent: 10 })
+
+    // 调用上传API - 上传到Minio存储
+    // folderName='heritage', fileParam='2', fileSize=2, storageType='minio'
+    const result = await uploadPicture(fileObj, 'heritage', '2', 2, 'minio')
+
+    if (result.isSuccess === false) {
+      onError()
+      const index = coverImageFileList.value.findIndex(item => item.id === file.id)
+      if (index !== -1) {
+        coverImageFileList.value.splice(index, 1)
+      }
+      return
+    }
+
+    onProgress({ percent: 100 })
+    onFinish()
+
+    // 上传成功，直接使用后端返回的完整HTTP访问URL
+    if (result.data && result.data.fileUploadPath) {
+      formData.value.coverImage = result.data.fileUploadPath
+      console.log('封面图上传成功，URL:', result.data.fileUploadPath)
+      coiMsgSuccess('封面图上传成功')
+    }
+  }
+  catch (error) {
+    onError()
+    console.error('封面图上传失败:', error)
+    coiMsgError('封面图上传失败')
+
+    // 从文件列表中移除失败的文件
+    const index = coverImageFileList.value.findIndex(item => item.id === file.id)
+    if (index !== -1) {
+      coverImageFileList.value.splice(index, 1)
+    }
+  }
+}
+
+// 移除封面图
+function handleRemoveCoverImage() {
+  formData.value.coverImage = ''
+}
+
+// 图片集合上传前验证
+function beforeImagesUpload(data: { file: UploadFileInfo }) {
+  const file = data.file.file as File
+  const fileSize = file.size / 1024 / 1024
+  const fileExtension = file.name.split('.').pop()?.toLowerCase()
+
+  if (fileSize > 2) {
+    coiMsgError(`图片大小超出限制！当前：${fileSize.toFixed(2)}MB，最大：2MB`)
+    return false
+  }
+
+  const allowedExtensions = ['jpg', 'jpeg', 'png', 'webp']
+  if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+    coiMsgError(`不支持的图片格式"${fileExtension}"，仅支持：${allowedExtensions.join(', ')}`)
+    return false
+  }
+
+  return true
+}
+
+// 图片集合自定义上传
+async function customImagesUpload({ file, onProgress, onFinish, onError }: any) {
+  try {
+    const fileObj = file.file as File
+    onProgress({ percent: 10 })
+
+    // 调用上传API - 上传到Minio存储
+    const result = await uploadPicture(fileObj, 'heritage', '2', 2, 'minio')
+
+    if (result.isSuccess === false) {
+      onError()
+      const index = imagesFileList.value.findIndex(item => item.id === file.id)
+      if (index !== -1) {
+        imagesFileList.value.splice(index, 1)
+      }
+      return
+    }
+
+    onProgress({ percent: 100 })
+    onFinish()
+
+    // 上传成功，直接使用后端返回的完整HTTP访问URL
+    if (result.data && result.data.fileUploadPath) {
+      const currentImages = formData.value.images ? JSON.parse(formData.value.images) : []
+      currentImages.push(result.data.fileUploadPath)
+      formData.value.images = JSON.stringify(currentImages)
+      console.log('图片上传成功，URL:', result.data.fileUploadPath)
+      coiMsgSuccess(`图片 ${fileObj.name} 上传成功`)
+    }
+  }
+  catch (error) {
+    onError()
+    console.error('图片上传失败:', error)
+    coiMsgError('图片上传失败')
+
+    const index = imagesFileList.value.findIndex(item => item.id === file.id)
+    if (index !== -1) {
+      imagesFileList.value.splice(index, 1)
+    }
+  }
+}
+
+// 移除图片集合中的图片
+function handleRemoveImage(data: { file: UploadFileInfo }) {
+  try {
+    if (!formData.value.images)
+      return
+
+    const currentImages = JSON.parse(formData.value.images)
+    const index = imagesFileList.value.findIndex(item => item.id === data.file.id)
+
+    if (index !== -1 && index < currentImages.length) {
+      currentImages.splice(index, 1)
+      formData.value.images = JSON.stringify(currentImages)
+    }
+  }
+  catch (error) {
+    console.error('移除图片失败:', error)
+  }
+}
+
+// 分页处理函数
+function handlePageChange(page: number) {
+  pagination.value.page = page
+  loadTableData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.value.pageSize = pageSize
+  pagination.value.page = 1
+  loadTableData()
+}
+
+// 判断空状态类型
+function getEmptyType() {
+  // 如果有搜索条件，显示无搜索结果
+  if (hasSearchConditions()) {
+    return 'search'
+  }
+  // 否则显示无数据
+  return 'default'
+}
+
+// 判断是否有搜索条件
+function hasSearchConditions() {
+  return !!(
+    searchForm.value.name
+    || searchForm.value.category
+    || searchForm.value.level
+    || searchForm.value.province
+    || searchForm.value.city
+    || searchForm.value.status
+    || searchForm.value.publishStatus !== undefined
+    || searchForm.value.isFeatured !== undefined
+  )
+}
+
+// 获取空状态标题
+function getEmptyTitle() {
+  if (hasSearchConditions()) {
+    return '未找到相关项目'
+  }
+  return '暂无项目数据'
+}
+
+// 获取空状态描述
+function getEmptyDescription() {
+  if (hasSearchConditions()) {
+    return '没有找到符合条件的非遗项目，请尝试调整搜索条件'
+  }
+  return '当前还没有非遗项目数据，点击下方按钮新增项目'
+}
+
+// 获取空状态操作按钮文字
+function getEmptyActionText() {
+  if (hasSearchConditions()) {
+    return '重置搜索'
+  }
+  return '新增项目'
+}
+
+// 处理空状态操作
+function handleEmptyAction() {
+  if (hasSearchConditions()) {
+    handleReset()
+  }
+  else {
+    handleAdd()
+  }
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  loadTableData()
+})
+</script>
+
+<style scoped>
+/* 页面容器样式 */
+.heritage-management {
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* 弹框表单容器样式 */
+.dialog-form-container {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+/* 弹框表单容器滚动条样式 */
+.dialog-form-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dialog-form-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.dialog-form-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.dialog-form-container::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+/* 搜索表单样式 */
+.search-form :deep(.n-form-item) {
+  margin-bottom: 4px !important;
+}
+
+.search-form :deep(.n-form-item-label) {
+  padding-right: 8px !important;
+}
+
+/* 表格包裹器样式 */
+.table-wrapper {
+  padding: 0 16px 16px 16px;
+}
+
+.table-wrapper :deep(.n-data-table) {
+  overflow-x: auto;
+}
+
+.table-wrapper :deep(.n-data-table-wrapper) {
+  overflow: visible;
+}
+
+/* 自定义滚动条样式 */
+.table-wrapper {
+  min-height: 0;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.table-wrapper::-webkit-scrollbar-corner {
+  background: #f1f1f1;
+}
+
+/* 表格滚动条样式 */
+.custom-table :deep(.n-data-table-base-table) {
+  overflow: auto;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-track {
+  background: #f8f9fa;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb {
+  background: #dee2e6;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb:hover {
+  background: #adb5bd;
+}
+
+/* 表格操作按钮样式 */
+.action-btn-primary {
+  transition: all 0.3s ease;
+}
+
+.action-btn-secondary {
+  transition: all 0.3s ease;
+}
+
+.action-btn-danger {
+  transition: all 0.3s ease;
+}
+
+.action-btn-warning {
+  transition: all 0.3s ease;
+}
+
+.action-btn-info {
+  transition: all 0.3s ease;
+}
+
+/* 紧凑表单样式 */
+.compact-form :deep(.n-form-item) {
+  margin-bottom: 8px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
+  min-height: 0 !important;
+  padding-top: 2px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-label) {
+  padding-bottom: 2px !important;
+}
+
+.compact-form :deep(.n-input),
+.compact-form :deep(.n-input-number),
+.compact-form :deep(.n-select),
+.compact-form :deep(.n-cascader),
+.compact-form :deep(.n-radio-group) {
+  font-size: 14px !important;
+}
+
+.compact-form :deep(.n-input .n-input__input-el),
+.compact-form :deep(.n-input-number .n-input__input-el) {
+  padding: 2px 1px !important;
+  min-height: 32px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
+  padding: 0 6px !important;
+  min-height: 30px !important;
+  line-height: 30px !important;
+}
+
+.compact-form :deep(.n-cascader .n-cascader-trigger) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+/* 自定义表格样式 */
+.custom-table :deep(.n-data-table-td) {
+  padding: 7px 12px;
+  font-size: 14px;
+}
+
+.custom-table :deep(.n-data-table-th) {
+  padding: 9px 12px;
+  background-color: #fafafa;
+  font-weight: normal;
+  font-size: 14px;
+  color: #262626;
+}
+
+.custom-table :deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f8faff;
+}
+</style>