diff --git a/chenhai-ui/package.json b/chenhai-ui/package.json
index d113430..20fe953 100644
--- a/chenhai-ui/package.json
+++ b/chenhai-ui/package.json
@@ -24,6 +24,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.28.1",
     "clipboard": "2.0.8",
diff --git a/chenhai-ui/src/api/vet/article.js b/chenhai-ui/src/api/vet/article.js
index 96dc4d0..6e0156a 100644
--- a/chenhai-ui/src/api/vet/article.js
+++ b/chenhai-ui/src/api/vet/article.js
@@ -1,136 +1,159 @@
 import request from '@/utils/request'
 
-// 获取论坛首页文章列表
-export function getForumHome(params) {
+// 查询兽医经验文章列表（论坛首页）
+export function listArticle(query) {
   return request({
-    url: '/vet/article/forum/home',
+    url: '/vet/article/list',
     method: 'get',
-    params
-  });
-}
-
-// 获取文章详情（自动增加浏览数）
-export function getForumDetail(id) {
-  return request({
-    url: `/vet/article/forum/detail/${id}`,
-    method: 'get'
-  });
+    params: query
+  })
 }
 
-// 发布论坛文章
-export function publishForumArticle(data) {
+// 查询我的文章列表
+export function listMyArticle(query) {
   return request({
-    url: '/vet/article/forum/publish',
-    method: 'post',
-    data
-  });
+    url: '/vet/article/myList',
+    method: 'get',
+    params: query
+  })
 }
 
-// 获取当前用户的文章列表
-export function getMyForumArticles(params) {
+// 查询兽医经验文章详细（包含相关文章）
+export function getArticle(id) {
   return request({
-    url: '/vet/article/forum/myArticles',
-    method: 'get',
-    params
-  });
+    url: '/vet/article/' + id,
+    method: 'get'
+  })
 }
 
-// 点赞文章
-export function likeForumArticle(id) {
+// 新增兽医经验文章（发布文章）
+export function addArticle(data) {
   return request({
-    url: `/forum/${id}/like`,
-    method: 'post'
-  });
+    url: '/vet/article',
+    method: 'post',
+    data: data
+  })
 }
 
-// 收藏文章
-export function collectForumArticle(id) {
+// 修改兽医经验文章
+export function updateArticle(data) {
   return request({
-    url: `/forum/${id}/collect`,
-    method: 'post'
-  });
+    url: '/vet/article',
+    method: 'put',
+    data: data
+  })
 }
 
-// 搜索论坛文章
-export function searchForumArticle(params) {
+// 删除兽医经验文章
+export function delArticle(id) {
   return request({
-    url: '/forum/search',
-    method: 'get',
-    params: params
-  });
+    url: '/vet/article/' + id,
+    method: 'delete'
+  })
 }
 
-// 获取热门标签
-export function getForumHotTags() {
+// 获取分类选项
+export function getCategoryOptions() {
   return request({
-    url: '/forum/hotTags',
+    url: '/vet/article/options',
     method: 'get'
-  });
+  })
 }
 
-// 根据分类查询文章
-export function getArticlesByCategory(categoryId) {
+// 获取标签选项
+export function getTagOptions() {
   return request({
-    url: '/vet/article/' + categoryId + '/articles',
+    url: '/vet/article/tags/options',
     method: 'get'
-  });
+  })
 }
 
-// 获取分类列表
-export function getArticleOptions() {
+// 点赞文章
+export function likeArticle(id) {
   return request({
-    url: '/vet/article/options',
-    method: 'get'
-  });
+    url: '/vet/article/' + id + '/like',
+    method: 'post'
+  })
 }
 
-// 获取文章统计信息
-export function getMySimpleStats() {
+// 收藏文章
+export function collectArticle(id) {
   return request({
-    url: '/vet/article/my/simpleStats',
-    method: 'get'
-  });
+    url: '/vet/article/' + id + '/collect',
+    method: 'post'
+  })
 }
 
-// 查询兽医经验文章列表
-export function listArticle(query) {
+// 获取我的收藏文章列表
+export function getMyCollections(query) {
   return request({
-    url: '/vet/article/list',
+    url: '/vet/article/myCollections',
     method: 'get',
     params: query
   })
 }
 
-// 查询兽医经验文章详细
-export function getArticle(id) {
+// 获取论坛统计信息
+export function getStatistics() {
   return request({
-    url: '/vet/article/' + id,
+    url: '/vet/article/statistics',
     method: 'get'
   })
 }
 
-// 新增兽医经验文章
-export function addArticle(data) {
+
+// 获取最新文章
+export function getLatestArticles(limit = 10) {
   return request({
-    url: '/vet/article',
-    method: 'post',
-    data: data
+    url: '/vet/article/latest',
+    method: 'get',
+    params: { limit }
   })
 }
 
-// 修改兽医经验文章
-export function updateArticle(data) {
+
+// 搜索文章
+export function searchArticles(keyword) {
   return request({
-    url: '/vet/article',
-    method: 'put',
-    data: data
+    url: '/vet/article/search',
+    method: 'get',
+    params: { keyword }
   })
 }
 
-// 删除兽医经验文章
-export function delArticle(id) {
+export function getForumHome() {
   return request({
-    url: '/vet/article/' + id,
-    method: 'delete'
+    url: '/vet/article/statistics',
+    method: 'get'
   })
 }
+
+// 论坛文章详情
+export function getForumDetail(id) {
+  return getArticle(id)
+}
+
+// 发布论坛文章
+export function publishForumArticle(data) {
+  return addArticle(data)
+}
+
+// 我的文章
+export function getMyForumArticles(query) {
+  return listMyArticle(query)
+}
+
+// 点赞文章
+export function likeForumArticle(id) {
+  return likeArticle(id)
+}
+
+// 收藏文章
+export function collectForumArticle(id) {
+  return collectArticle(id)
+}
+
+// 搜索文章
+export function searchForumArticles(query) {
+  return searchArticles(query.keyword)
+}
diff --git a/chenhai-ui/src/api/vet/qualification.js b/chenhai-ui/src/api/vet/qualification.js
index 89c255f..1eb029c 100644
--- a/chenhai-ui/src/api/vet/qualification.js
+++ b/chenhai-ui/src/api/vet/qualification.js
@@ -9,6 +9,23 @@ export function submitAuditQualification(data) {
   })
 }
 
+// 获取兽医资质审核状态
+export function getQualificationStatus() {
+  return request({
+    url: '/vet/qualification/checkNeedQualification',
+    method: 'get'
+  })
+}
+
+// 重新提交
+export function resubmitQualification(data) {
+  return request({
+    url: '/vet/qualification/resubmit',
+    method: 'post',
+    data: data,
+  })
+}
+
 // 兽医资质提交审核
 // export function submitAuditQualification(qualificationId) {
 //   return request({
@@ -26,6 +43,14 @@ export function auditQualification(data) {
   })
 }
 
+// 获取证书列表
+export function getQualificationCertificates() {
+  return request({
+    url: '/vet/qualification/certificate/list',
+    method: 'get',
+  })
+}
+
 // 获取资质类型列表
 export function getQualificationTypeOptions() {
   return request({
@@ -42,14 +67,12 @@ export function getScopeOptions() {
   })
 }
 
+// 资质上传
 export function uploadQualification(data) {
   return request({
     url: '/vet/qualification/upload',
     method: 'post',
     data: data,
-    headers: {
-      'Content-Type': 'multipart/form-data'
-    },
   })
 }
 
@@ -63,9 +86,20 @@ export function listQualification(query) {
 }
 
 // 查询兽医资质详细
-export function getQualification(qualificationId) {
+export function getQualification(qualificationId, certId) {
   return request({
     url: '/vet/qualification/' + qualificationId,
+    method: 'get',
+    params: {
+      certId: certId
+    }
+  })
+}
+
+// 证书详情
+export function getQualificationCertificate(certId) {
+  return request({
+    url: '/vet/qualification/certificate/' + certId,
     method: 'get'
   })
 }
@@ -96,7 +130,7 @@ export function delQualification(qualificationId) {
   })
 }
 
-
+// 提交审核
 export function submitQualification(data) {
   return request({
     url: '/vet/qualification/submit',
@@ -105,5 +139,14 @@ export function submitQualification(data) {
   })
 }
 
+// 重新提交
+export function updateAndSubmitQualification(data) {
+  return request({
+    url: '/vet/qualification/certificate/updateAndSubmit',
+    method: 'post',
+    data: data
+  })
+}
+
 
 
diff --git a/chenhai-ui/src/assets/images/tz.png b/chenhai-ui/src/assets/images/tz.png
new file mode 100644
index 0000000..c8da7ab
Binary files /dev/null and b/chenhai-ui/src/assets/images/tz.png differ
diff --git a/chenhai-ui/src/assets/images/tz1.png b/chenhai-ui/src/assets/images/tz1.png
new file mode 100644
index 0000000..62b0020
Binary files /dev/null and b/chenhai-ui/src/assets/images/tz1.png differ
diff --git a/chenhai-ui/src/views/syd.vue b/chenhai-ui/src/views/syd.vue
index 8edfd6f..d86ccdb 100644
--- a/chenhai-ui/src/views/syd.vue
+++ b/chenhai-ui/src/views/syd.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-
     <!-- 消息通知 -->
     <div class="info-container">
       <div class="card-container">
@@ -13,10 +12,10 @@
             <span class="info-title">通知</span>
             <div class="status-container">
               <div class="status-row">
-                <span class="status-text">未读：{{  tjzs.unreadCount }}</span>
+                <span class="status-text">未读：{{  tjzs.unreadCount || 0 }}</span>
               </div>
               <div class="status-row">
-                <span class="status-text">已读：{{ tjzs.readCount }}</span>
+                <span class="status-text">已读：{{ tjzs.readCount || 0 }}</span>
               </div>
             </div>
           </div>
@@ -27,7 +26,7 @@
           </div>
           <div class="card-text">
             <div class="card-title">总数</div>
-            <div class="card-value">{{ tjzs.totalCount }}</div>
+            <div class="card-value">{{ tjzs.totalCount || 0 }}</div>
           </div>
         </div>
         <div class="stat-card">
@@ -36,7 +35,7 @@
           </div>
           <div class="card-text">
             <div class="card-title">已读</div>
-            <div class="card-value">{{ tjzs.readCount }}</div>
+            <div class="card-value">{{ tjzs.readCount || 0 }}</div>
           </div>
         </div>
         <div class="stat-card">
@@ -45,7 +44,7 @@
           </div>
           <div class="card-text">
             <div class="card-title">未读</div>
-            <div class="card-value">{{  tjzs.unreadCount }}</div>
+            <div class="card-value">{{  tjzs.unreadCount || 0 }}</div>
           </div>
         </div>
       </div>
@@ -53,7 +52,7 @@
 
     <!-- 资质弹窗 -->
     <el-dialog :title="title" :visible.sync="flag" width="800px" append-to-body>
-      <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 10px;">
+      <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 40px;">
         <el-step title="选择经营范围"></el-step>
         <el-step title="上传资质"></el-step>
         <el-step title="提交审核"></el-step>
@@ -84,9 +83,7 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="证书编号" prop="certificateNo">
-            <el-input v-model="qualificationForm.certificateNo" placeholder="请输入证书编号" />
-          </el-form-item>
+
           <el-form-item label="经营范围" prop="scopeIds">
             <el-select
               v-model="qualificationForm.scopeIds"
@@ -114,9 +111,16 @@
           <div class="summary-item">
             <span class="summary-label">资质类型：</span>
             <div class="scope-tags">
+<!--              <el-tag-->
+<!--                v-for="qualificationType in qualificationForm.qualificationType"-->
+<!--                :key="qualificationType"-->
+<!--                type="info"-->
+<!--                size="small"-->
+<!--                class="scope-tag"-->
+<!--              >-->
+<!--                {{ getQualificationTypeLabel(qualificationForm.qualificationType) }}-->
+<!--              </el-tag>-->
               <el-tag
-                v-for="qualificationType in qualificationForm.qualificationType"
-                :key="qualificationType"
                 type="info"
                 size="small"
                 class="scope-tag"
@@ -143,36 +147,91 @@
 
         <div style="margin-bottom: 15px; color: #f56c6c; font-size: 14px;">
           <i class="el-icon-warning"></i>
-          需要您上传相关的资质文件：
+          需要您上传相关的证书文件：
         </div>
 
-        <el-form>
-          <el-form-item label="资质文件" required>
-            <el-upload
-              ref="upload"
-              action="#"
-              :multiple="true"
-              :file-list="fileList"
-              :auto-upload="false"
-              :on-change="handleFileChange"
-              :on-remove="handleRemove"
-              :show-file-list="true"
-              accept=".jpg,.jpeg,.png,.pdf,.JPG,.JPEG,.PNG,.PDF"
-            >
-              <el-button type="primary">选择文件</el-button>
-              <div slot="tip" class="el-upload__tip">
-                请上传清晰的资质文件照片或扫描件（支持JPG、PNG、PDF格式）
+        <el-form ref="qualificationForm" :model="qualificationForm">
+          <div class="certificate-upload-container">
+            <div v-for="(certificate, index) in qualificationForm.certificateslist" :key="index" class="certificate-card">
+              <div class="certificate-header">
+                <span class="certificate-title">证书 {{ index + 1 }}</span>
+                <el-button
+                  v-if="qualificationForm.certificateslist.length > 1"
+                  type="danger"
+                  icon="el-icon-delete"
+                  circle
+                  size="mini"
+                  @click="removeCertificate(index)"
+                  title="删除此证书"
+                ></el-button>
               </div>
-            </el-upload>
-          </el-form-item>
 
-          <div v-if="uploadedFiles.length > 0" class="uploaded-files">
-            <div class="file-list-title">已上传文件：</div>
-            <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item">
-              <i class="el-icon-document"></i>
-              {{ file.name }}
+              <div class="certificate-form">
+                <el-row :gutter="20">
+                  <el-col :span="12">
+                    <el-form-item label="证书名称" :prop="'certificateslist.' + index + '.certName'">
+                      <el-input v-model="certificate.certName" placeholder="请输入证书名称" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="发证机构" :prop="'certificateslist.' + index + '.issueOrg'">
+                      <el-input v-model="certificate.issueOrg" placeholder="请输入发证机构" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+
+                <el-row :gutter="20">
+                  <el-col :span="24">
+                    <el-form-item label="证书编号" :prop="'certificateslist.' + index + '.certificateNo'">
+                      <el-input v-model="certificate.certificateNo" placeholder="请输入证书编号" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="12">
+                    <el-form-item label="发证日期" :prop="'certificateslist.' + index + '.issueDate'">
+                      <el-date-picker
+                        v-model="certificate.issueDate"
+                        type="date"
+                        placeholder="请选择发证日期"
+                        style="width: 100%;"
+                        value-format="yyyy-MM-dd"
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="到期日期" :prop="'certificateslist.' + index + '.expireDate'">
+                      <el-date-picker
+                        v-model="certificate.expireDate"
+                        type="date"
+                        placeholder="请选择到期日期"
+                        style="width: 100%;"
+                        value-format="yyyy-MM-dd"
+                      />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-form>
+                  <el-form-item label="资质文件" :prop="'certificateslist.' + index + '.certificateFiles'">
+                    <file-upload
+                      v-model="certificate.certificateFiles"
+                      :limit="1"
+                      :file-type="['pdf','png','jpg','jpeg']"
+                    />
+                  </el-form-item>
+                </el-form>
+              </div>
             </div>
           </div>
+
+          <div class="add-certificate-btn">
+            <el-button type="primary" icon="el-icon-plus" @click="addCertificate" plain>
+              添加证书
+            </el-button>
+            <span class="certificate-count">
+              已添加 {{ qualificationForm.certificateslist.length }} 个证书
+            </span>
+          </div>
         </el-form>
       </div>
 
@@ -189,12 +248,11 @@
           <div style="margin-bottom: 8px;"><strong>基本信息</strong></div>
           <div style="margin-bottom: 5px;">真实姓名：{{ qualificationForm.realName }}</div>
           <div style="margin-bottom: 5px;">身份证号：{{ qualificationForm.idCard }}</div>
-          <div style="margin-bottom: 5px;">资质类型：{{ qualificationForm.qualificationType }}</div>
-          <div>证书编号：{{ qualificationForm.certificateNo }}</div>
+          <div style="margin-bottom: 5px;">资质类型：{{ getQualificationTypeLabel(qualificationForm.qualificationType) }}</div>
         </div>
 
-        <div style="margin-bottom: 15px; color: #606266;">
-          <div>经营范围：</div>
+        <div style="background: #f8f9fa; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
+          <div style="margin-bottom: 8px;"><strong>经营范围</strong></div>
           <div class="scope-tags">
             <el-tag
               v-for="scopeId in qualificationForm.scopeIds"
@@ -208,14 +266,61 @@
           </div>
         </div>
 
-        <div style="background: #f8f9fa; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
-          <div style="margin-bottom: 8px;"><strong>上传文件</strong></div>
-          <div v-if="fileList.length > 0">
-            <div v-for="(file, index) in fileList" :key="index" style="margin-bottom: 5px;">
-              {{ file.name }}
+        <div style="background: #f8f9fa; border-radius: 4px; margin-bottom: 20px;">
+          <div v-if="qualificationForm.certificateslist.length > 0" style="background: #f8f9fa; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
+            <div style="margin-bottom: 15px;"><strong>证书信息</strong></div>
+
+            <div v-for="(certificate, index) in qualificationForm.certificateslist" :key="index" class="certificate-review">
+              <div style="font-weight: bold; margin-bottom: 8px; color: #409EFF;">
+                证书 {{ index + 1 }}
+              </div>
+
+              <el-row :gutter="20">
+                <el-col :span="8">
+                  <div class="review-item">
+                    <span class="review-label">证书名称：</span>
+                    <span class="review-value">{{ certificate.certName }}</span>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="review-item">
+                    <span class="review-label">发证机构：</span>
+                    <span class="review-value">{{ certificate.issueOrg }}</span>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="16">
+                  <div class="review-item">
+                    <span class="review-label">证书编号：</span>
+                    <span class="review-value">{{ certificate.certificateNo }}</span>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="8">
+                  <div class="review-item">
+                    <span class="review-label">发证日期：</span>
+                    <span class="review-value">{{ certificate.issueDate  }}</span>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="review-item">
+                    <span class="review-label">到期日期：</span>
+                    <span class="review-value">{{ certificate.expireDate }}</span>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="16">
+                  <div class="review-item">
+                    <span class="review-label">证书文件：</span>
+                    <span class="review-value">{{ certificate.certificateFiles }}</span>
+                  </div>
+                </el-col>
+              </el-row>
             </div>
           </div>
-          <div v-else style="color: #909399;">暂无文件</div>
         </div>
       </div>
 
@@ -227,7 +332,7 @@
 
         <div v-if="activeStep < 2">
           <el-button type="primary" @click="nextStep">
-            {{ activeStep === 1 ? '下一步' : '下一步' }}
+            下一步
           </el-button>
         </div>
 
@@ -243,7 +348,7 @@
 </template>
 
 <script>
-import { submitAuditQualification, qualificationAudit, getQualificationTypeOptions, getScopeOptions, uploadQualification } from "../api/vet/qualification";
+import { submitAuditQualification, getQualificationTypeOptions, getScopeOptions, getQualificationStatus } from "../api/vet/qualification";
 import { getStatsCard } from "../api/vet/notification";
 
 export default {
@@ -252,11 +357,10 @@ export default {
     return {
       // 消息通知
       tjzs: {},
-
       // 资质弹窗
       title: "兽医资质审核",
-      flag: true,
-      open: false,
+      // flag: true,
+      flag: false,
       loading: false,
       activeStep: 0,
       qualificationForm: {
@@ -264,17 +368,20 @@ export default {
         realName: '',
         idCard: '',
         qualificationType: '',
-        certificateNo: '',
         scopeIds: [],
-        certificateFiles: '',
+        certificateslist: [
+          {
+            certName: '',
+            issueOrg: '',
+            certificateNo: '',
+            issueDate: '',
+            expireDate: '',
+            certificateFiles: '',
+          }
+        ],
       },
-      fileList: [],
       scopeOptions: [],
-
-      uploadedFiles: [],
       qualificationTypeOptions: [],
-      selectedScopesDetail: '',
-      fileUploadResponses: [],
 
       rules: {
         realName: [
@@ -286,23 +393,16 @@ export default {
         qualificationType: [
           {required: true, message: "请选择资质类型", trigger: "change"}
         ],
-        certificateNo : [
-          {required: true, message: "请输入证书编号", trigger: "blur"}
-        ],
         scopeIds: [
-          {
-            required: true,
-            type: 'array',
-            message: "请选择至少一个经营范围",
-            trigger: "change"
-          }
-        ]
-      }
+          {required: true, type: 'array', message: "请选择至少一个经营范围", trigger: "change"}
+        ],
+      },
     }
   },
   created() {
     this.initOptions();
-    this.getcountSummary()
+    this.getcountSummary();
+    this.getQualStatusAndHandle();
   },
   methods: {
     // 获取通知数据
@@ -336,69 +436,6 @@ export default {
       return scope ? scope.label : scopeId;
     },
 
-    // 文件上传
-    uploadSingleFile(file) {
-      return new Promise((resolve, reject) => {
-        const formData = new FormData();
-        formData.append('file', file.raw);
-
-        uploadQualification(formData)
-          .then(response => {
-            const filePath = response.data.filePath || response.data.path || response.data.url;
-            this.fileUploadResponses.push({
-              fileName: file.name,
-              filePath: filePath,
-              fileId: response.data.id || response.data.fileId
-            });
-            this.uploadedFiles.push({
-              name: file.name,
-              uid: file.uid,
-              path: filePath
-            });
-            this.$message.success(`${file.name} 上传成功`);
-            resolve(response);
-          })
-          .catch(error => {
-            reject(error);
-          });
-      });
-    },
-
-    // 文件改变
-    handleFileChange(file, fileList) {
-      if (!file.raw ||
-        file.raw.size / 1024 / 1024 >= 10 ||
-        !['image/jpeg', 'image/png', 'application/pdf'].includes(file.raw.type)) {
-        let errorMsg = '';
-        if (!file.raw) errorMsg = '获取文件失败，请重新选择文件';
-        else if (file.raw.size / 1024 / 1024 >= 10) errorMsg = '文件大小不能超过10MB';
-        else errorMsg = '只能上传JPG、PNG或PDF格式的文件';
-        this.$message.error(errorMsg);
-        this.fileList = fileList.filter(item => item.uid !== file.uid);
-        return;
-      }
-      this.fileList = fileList;
-      if (file.status === 'ready') {
-        file.status = 'uploading';
-        this.uploadSingleFile(file)
-          .then(() => file.status = 'success')
-          .catch(() => file.status = 'fail');
-      }
-    },
-
-    // 文件移除
-    handleRemove(file, fileList) {
-      this.fileList = fileList;
-      const showIndex = this.uploadedFiles.findIndex(f => f.name === file.name);
-      if (showIndex > -1) {
-        this.uploadedFiles.splice(showIndex, 1);
-      }
-      const resIndex = this.fileUploadResponses.findIndex(f => f.fileName === file.name);
-      if (resIndex > -1) {
-        this.fileUploadResponses.splice(resIndex, 1);
-      }
-    },
-
     // 上一步
     prevStep() {
       if (this.activeStep > 0) {
@@ -409,68 +446,101 @@ export default {
     // 下一步
     nextStep() {
       if (this.activeStep === 0) {
-        this.$refs.qualificationForm.validate(valid => valid && (this.activeStep++));
+        this.$refs.qualificationForm.validate(valid => {
+          if (valid) this.activeStep++;
+        });
         return;
       }
       if (this.activeStep === 1) {
-        if (!this.fileList.length) {
-          this.$message.warning('请上传资质文件');
-          return;
-        }
-        const anyUploading = this.fileList.some(file => file.status === 'uploading');
-        const anyFailed = this.fileList.some(file => file.status === 'fail');
-        const allSuccess = this.fileList.every(file => file.status === 'success');
-        if (anyUploading) {
-          this.$message.warning('文件正在上传中，请等待上传完成');
-        } else if (anyFailed) {
-          this.$message.warning('存在上传失败的文件，请重新上传或移除失败的文件');
-        } else if (!allSuccess) {
-          this.$message.warning('请确保所有文件都上传成功');
-        } else {
+        let isValid = true;
+        this.qualificationForm.certificateslist.forEach((item, index) => {
+          if (!item.certName || !item.issueOrg || !item.certificateNo || !item.issueDate || !item.expireDate || !item.certificateFiles) {
+            isValid = false;
+            this.$message.warning(`第${index + 1}个证书信息不完整，请检查`);
+          } else if (new Date(item.expireDate) < new Date(item.issueDate)) {
+            isValid = false;
+            this.$message.warning(`第${index + 1}个证书：到期日期不能早于发证日期`);
+          }
+        });
+        if (isValid) {
           this.activeStep++;
         }
       }
     },
 
+    // 获取资质状态
+    getQualStatusAndHandle() {
+      getQualificationStatus()
+        .then(res => {
+          const statusData = res.data || {};
+          if (statusData.needPopup === true || statusData.status === 'empty') {
+            this.flag = true;
+          }
+        })
+    },
+
     // 提交审核
     submitQualification() {
       this.loading = true;
 
+      const certificates = this.qualificationForm.certificateslist.map(item => ({
+        certName: item.certName || '',
+        issueOrg: item.issueOrg || '',
+        certificateNo: item.certificateNo || '',
+        issueDate: item.issueDate,
+        expireDate: item.expireDate,
+        certificateFiles: item.certificateFiles || ''
+      }));
+
       const requestData = {
         realName: this.qualificationForm.realName,
         idCard: this.qualificationForm.idCard,
         qualificationType: this.qualificationForm.qualificationType,
-        certificateNo: this.qualificationForm.certificateNo,
         scopeIds: this.qualificationForm.scopeIds || [],
-        certificateFiles: this.fileUploadResponses.map(item => item.fileUrl).join(','),
-        certificateFileIds: this.fileUploadResponses.map(item => item.fileId).join(',')
+        certificates: certificates,
       };
-      // console.log('提交的数据:', JSON.stringify(requestData, null, 2));
+
       submitAuditQualification(requestData)
         .then(response => {
-          this.$modal.msgSuccess('提交成功，请等待审核');
+          this.$message.success('提交成功，请等待审核');
           this.flag = false;
-          this.resetForm();
+          setTimeout(() => {
+            this.$router.push('/VetQualification');
+          }, 300);
         })
         .catch(error => {
           console.error('提交失败:', error);
-          console.error('错误详情:', error.response?.data);
-          if (error.response?.data?.message) {
-            this.$message.error('提交失败: ' + error.response.data.message);
-          } else {
-            this.$message.error('提交失败，请重试');
-          }
+          this.$message.error(error.response?.data?.message || '提交失败，请重试');
         })
         .finally(() => {
           this.loading = false;
         });
-    }
+    },
+
+    // 移除证书
+    removeCertificate(index) {
+      if (this.qualificationForm.certificateslist.length > 1) {
+        this.qualificationForm.certificateslist.splice(index, 1);
+      } else {
+        this.$message.warning('至少需要保留一个证书的信息');
+      }
+    },
+
+    //  添加证书
+    addCertificate() {
+      this.qualificationForm.certificateslist.push({
+        certName: '',
+        issueOrg: '',
+        certificateNo: '',
+        issueDate: '',
+        expireDate: '',
+        certificateFiles: ''
+      });
+    },
   }
 }
 </script>
 
-
-
 <style scoped lang="scss">
 /* 轮播背景 */
 .card-container {
@@ -513,6 +583,7 @@ export default {
 .shake {
   animation: cardShake 1s infinite linear;
   background-color: #fffde6 !important;
+
   &:hover {
     animation-play-state: paused;
     background-color: #edeacd !important;
@@ -570,15 +641,16 @@ export default {
 .icon-total {
   background: linear-gradient(135deg, #ff9a44 0%, #ff6b08 100%);
 }
+
 .icon-pending {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
+
 .icon-handled {
   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 }
 
 /* 资质弹窗 */
-
 /* 经营范围 */
 .scope-choice {
   color: #b6bbc6;
@@ -616,6 +688,7 @@ export default {
 .scope-tags {
   display: flex;
   flex-wrap: wrap;
+  padding-top: 10px;
   gap: 5px;
 }
 
@@ -688,23 +761,277 @@ export default {
 
 /* 抖动动画 */
 @keyframes cardShake {
-  0% { transform: translateX(0); }
-  10% { transform: translateX(-5px) translateY(-2px); }
-  20% { transform: translateX(5px) translateY(2px); }
-  30% { transform: translateX(-5px) translateY(-2px); }
-  40% { transform: translateX(5px) translateY(2px); }
-  50% { transform: translateX(-3px) translateY(-1px); }
-  60% { transform: translateX(3px) translateY(1px); }
-  70% { transform: translateX(-3px) translateY(-1px); }
-  80% { transform: translateX(3px) translateY(1px); }
-  90% { transform: translateX(-2px) translateY(0); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(-5px) translateY(-2px);
+  }
+  20% {
+    transform: translateX(5px) translateY(2px);
+  }
+  30% {
+    transform: translateX(-5px) translateY(-2px);
+  }
+  40% {
+    transform: translateX(5px) translateY(2px);
+  }
+  50% {
+    transform: translateX(-3px) translateY(-1px);
+  }
+  60% {
+    transform: translateX(3px) translateY(1px);
+  }
+  70% {
+    transform: translateX(-3px) translateY(-1px);
+  }
+  80% {
+    transform: translateX(3px) translateY(1px);
+  }
+  90% {
+    transform: translateX(-2px) translateY(0);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
-.shake {
-  animation: cardShake 1s infinite linear;
+//.shake {
+//  animation: cardShake 1s infinite linear;
+//
+//  &:hover {
+//    animation-play-state: paused;
+//  }
+//}
+
+
+/* 证书上传样式 */
+.certificate-upload-container {
+  max-height: 500px;
+  overflow-y: auto;
+  padding-right: 10px;
+}
+
+.certificate-card {
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  background: #fff;
+  transition: all 0.3s ease;
+
   &:hover {
-    animation-play-state: paused;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-color: #409EFF;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
   }
 }
+
+.certificate-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #e6e6e6;
+}
+
+.certificate-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.certificate-form {
+  margin-top: 15px;
+}
+
+.file-upload-area {
+  margin-bottom: 10px;
+}
+
+.file-info {
+  margin-top: 10px;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e9ecef;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .file-name {
+    flex: 1;
+    margin-left: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-size {
+    color: #909399;
+    font-size: 12px;
+    margin: 0 15px;
+  }
+
+  .file-link {
+    color: #409EFF;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.upload-progress {
+  margin-top: 10px;
+
+  .progress-text {
+    display: block;
+    text-align: center;
+    color: #67C23A;
+    font-size: 12px;
+    margin-top: 5px;
+  }
+}
+
+.upload-tip {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+.file-preview {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px dashed #e6e6e6;
+
+  .preview-title {
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #606266;
+  }
+
+  .preview-image {
+    max-width: 200px;
+    max-height: 200px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+
+.add-certificate-btn {
+  text-align: center;
+  padding: 20px;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+  margin-top: 20px;
+  background: #fafafa;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: #409EFF;
+    background: #ecf5ff;
+  }
+
+  .certificate-count {
+    margin-left: 15px;
+    color: #909399;
+    font-size: 14px;
+  }
+}
+
+/* 审核预览样式 */
+.certificate-review {
+  padding: 15px;
+  background: #fff;
+  border-radius: 6px;
+  margin-bottom: 15px;
+}
+
+.review-item {
+  margin-bottom: 8px;
+
+  .review-label {
+    color: #606266;
+    min-width: 80px;
+    display: inline-block;
+  }
+
+  .review-value {
+    color: #303133;
+    font-weight: 500;
+  }
+}
+
+.preview-thumbnail {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  margin-top: 10px;
+
+  .thumbnail-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+  }
+
+  .thumbnail-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+
+  &:hover .thumbnail-overlay {
+    opacity: 1;
+  }
+}
+
+/* 滚动条样式 */
+.certificate-upload-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.certificate-upload-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.certificate-upload-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.certificate-upload-container::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
 </style>
diff --git a/chenhai-ui/src/views/vet/article/index.vue b/chenhai-ui/src/views/vet/article/index.vue
index a9ac69f..2b48166 100644
--- a/chenhai-ui/src/views/vet/article/index.vue
+++ b/chenhai-ui/src/views/vet/article/index.vue
@@ -1,821 +1,1716 @@
-<template>
-  <div class="app-container">
-    <!-- 论坛标题  -->
-    <div class="forum-header">
-      <h1 class="forum-title">兽医经验分享论坛</h1>
-      <div class="forum-subtitle">专属于兽医相关从业者的交流站</div>
-    </div>
-
-    <!--  搜索部分  -->
-    <div class="forum-filters">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="文章标题" prop="title">
-          <el-input
-            v-model="queryParams.title"
-            placeholder="请输入文章标题"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-<!--        <el-form-item label="文章类别" prop="categoryName">-->
-<!--          <el-select v-model="queryParams.categoryName" placeholder="请选择文章类别" clearable>-->
-<!--            <el-option-->
-<!--              v-for="item in categories"-->
-<!--              :key="item.value"-->
-<!--              :label="item.label"-->
-<!--              :value="item.value"-->
-<!--            ></el-option>-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-        <el-form-item label="文章标签" prop="tags">
-          <el-select v-model="queryParams.tags" placeholder="请选择文章标签" clearable>
-            <el-option
-              v-for="tags in tagOptions"
-              :key="tags.value"
-              :label="tags.label"
-              :value="tags.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <!--  侧边栏  -->
-    <div class="forum-content">
-      <!-- 个人文章 -->
-      <div class="forum-sidebar">
-        <div class="sidebar-card my-articles">
-          <div class="card-header">
-            <i class="el-icon-user-solid card-icon"></i>
-            <span class="card-title">我的文章</span>
-          </div>
-          <div class="card-body">
-            <div class="stats-row">
-              <div class="stat-item">
-                <div class="stat-number">{{ myStats.published || 0 }}</div>
-                <div class="stat-label">已发布</div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-number">{{ myStats.likes || 0 }}</div>
-                <div class="stat-label">获赞</div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-number">{{ myStats.collects || 0 }}</div>
-                <div class="stat-label">收藏</div>
-              </div>
-            </div>
-            <el-button
-              type="text"
-              icon="el-icon-collection"
-              @click="handleViewMyArticles"
-              class="view-all-btn"
-            >
-              查看我的所有文章
-            </el-button>
-          </div>
-        </div>
-
-        <!-- 文章类别 -->
-        <div class="sidebar-card categories">
-          <div class="card-header">
-            <i class="el-icon-folder file-multiple"></i>
-            <span class="card-title">文章分类</span>
-          </div>
-          <div class="card-body">
-            <div class="category-list">
-              <div
-                v-for="category in categories"
-                :key="category.value"
-                class="category-item"
-                :class="{ active: queryParams.categoryName === category.value }"
-                @click="handleCategoryClick(category.value)"
-              >
-                {{ category.label }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!--  热门标签  -->
-        <div class="sidebar-card categories">
-          <div class="card-header">
-            <i class="el-icon-price-tag tag-card-icon"></i>
-            <span class="card-title">️热门标签</span>
-          </div>
-          <div class="card-body">
-            <div class="category-list">
-              <div
-                v-for="tags in tagOptions"
-                :key="tags.value"
-                class="category-item"
-                :class="{ active: queryParams.tagOptionsName === tags.value }"
-                @click="handleTagsClick(tags.value)"
-              >
-                {{ tags.label }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 右侧文章列表  -->
-      <div class="forum-main">
-        <!-- 操作按钮 -->
-        <div class="forum-actions">
-          <!--        <el-row :gutter="10" class="mb8">-->
-          <!--          <el-col :span="1.5">-->
-          <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['vet:article:add']"
-          >发新帖</el-button>
-          <!--          </el-col>-->
-          <!--        </el-row>-->
-        </div>
-        <div>
-
-        </div>
-      </div>
-    </div>
-
-
-
-<!--    <el-row :gutter="10" class="mb8">-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="primary"-->
-<!--          plain-->
-<!--          icon="el-icon-plus"-->
-<!--          size="mini"-->
-<!--          @click="handleAdd"-->
-<!--          v-hasPermi="['vet:article:add']"-->
-<!--        >发新帖</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="success"-->
-<!--          plain-->
-<!--          icon="el-icon-edit"-->
-<!--          size="mini"-->
-<!--          :disabled="single"-->
-<!--          @click="handleUpdate"-->
-<!--          v-hasPermi="['vet:article:edit']"-->
-<!--        >修改</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="danger"-->
-<!--          plain-->
-<!--          icon="el-icon-delete"-->
-<!--          size="mini"-->
-<!--          :disabled="multiple"-->
-<!--          @click="handleDelete"-->
-<!--          v-hasPermi="['vet:article:remove']"-->
-<!--        >删除</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="warning"-->
-<!--          plain-->
-<!--          icon="el-icon-download"-->
-<!--          size="mini"-->
-<!--          @click="handleExport"-->
-<!--          v-hasPermi="['vet:article:export']"-->
-<!--        >导出</el-button>-->
-<!--      </el-col>-->
-<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
-<!--    </el-row>-->
-
-<!--    <el-table v-loading="loading" :data="articleList" @selection-change="handleSelectionChange">-->
-<!--      <el-table-column type="selection" width="55" align="center" />-->
-<!--      &lt;!&ndash;      <el-table-column label="主键ID" align="center" prop="id" />&ndash;&gt;-->
-<!--      <el-table-column label="文章标题" align="center" prop="title" />-->
-<!--      <el-table-column label="文章内容" align="center" prop="content">-->
-<!--        <template #default="scope">-->
-<!--          <div v-html="scope.row.content"></div>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="文章摘要" align="center" prop="summary" />-->
-<!--      <el-table-column label="封面图片" align="center" prop="coverImage" width="100">-->
-<!--        <template slot-scope="scope">-->
-<!--          <image-preview :src="scope.row.coverImage" :width="50" :height="50"/>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="文章图片" align="center" prop="images" />-->
-<!--      &lt;!&ndash;      <el-table-column label="作者" align="center" prop="vetId" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="兽医姓名" align="center" prop="vetName" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="兽医头像" align="center" prop="vetAvatar" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="兽医职称" align="center" prop="vetTitle" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="分类ID" align="center" prop="categoryId" />&ndash;&gt;-->
-<!--      <el-table-column label="分类名称" align="center" prop="categoryName" />-->
-<!--      <el-table-column label="标签" align="center" prop="tags" />-->
-<!--      &lt;!&ndash;      <el-table-column label="是否置顶" align="center" prop="isTop" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="是否精选" align="center" prop="isFeatured" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="状态" align="center" prop="status" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="是否包含敏感词" align="center" prop="isSensitive" />&ndash;&gt;-->
-<!--      &lt;!&ndash;      <el-table-column label="敏感词列表" align="center" prop="sensitiveWords" />&ndash;&gt;-->
-<!--      <el-table-column label="发布时间" align="center" prop="publishTime" width="180">-->
-<!--        <template slot-scope="scope">-->
-<!--          <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d}') }}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180">-->
-<!--        <template slot-scope="scope">-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-edit"-->
-<!--            style="color: #42B983"-->
-<!--            class = "article-btn alter-btn"-->
-<!--            @click="handleUpdate(scope.row)"-->
-<!--            v-hasPermi="['vet:info:edit']"-->
-<!--          >修改</el-button>-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-delete"-->
-<!--            style="color: #f28888"-->
-<!--            class = "article-btn delete-btn"-->
-<!--            @click="handleDelete(scope.row)"-->
-<!--            v-hasPermi="['vet:info:remove']"-->
-<!--          >删除</el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--    </el-table>-->
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改兽医经验文章对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="文章标题" prop="title">
-          <el-input v-model="form.title" placeholder="请输入文章标题" />
-        </el-form-item>
-        <el-form-item label="文章内容">
-          <editor v-model="form.content" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="文章摘要" prop="summary">
-          <el-input v-model="form.summary" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="文章图片" prop="coverImage">
-          <image-upload v-model="form.coverImage"/>
-        </el-form-item>
-<!--        <el-form-item label="文章图片" prop="images">-->
-<!--          <el-input v-model="form.images" type="textarea" placeholder="请输入内容" />-->
-<!--        </el-form-item>-->
-        <!--        <el-form-item label="作者" prop="vetId">-->
-        <!--          <el-input v-model="form.vetId" placeholder="请输入作者" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="兽医姓名" prop="vetName">-->
-        <!--          <el-input v-model="form.vetName" placeholder="请输入兽医姓名" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="兽医头像" prop="vetAvatar">-->
-        <!--          <el-input v-model="form.vetAvatar" placeholder="请输入兽医头像" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="兽医职称" prop="vetTitle">-->
-        <!--          <el-input v-model="form.vetTitle" placeholder="请输入兽医职称" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="分类ID" prop="categoryId">-->
-        <!--          <el-input v-model="form.categoryId" placeholder="请输入分类ID" />-->
-        <!--        </el-form-item>-->
-        <el-form-item label="分类名称" prop="categoryName">
-          <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
-        </el-form-item>
-        <el-form-item label="标签" prop="tags">
-          <el-input v-model="form.tags" placeholder="请输入标签" />
-        </el-form-item>
-        <!--        <el-form-item label="是否置顶" prop="isTop">-->
-        <!--          <el-input v-model="form.isTop" placeholder="请输入是否置顶" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="是否精选" prop="isFeatured">-->
-        <!--          <el-input v-model="form.isFeatured" placeholder="请输入是否精选" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="是否包含敏感词" prop="isSensitive">-->
-        <!--          <el-input v-model="form.isSensitive" placeholder="请输入是否包含敏感词" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item label="敏感词列表" prop="sensitiveWords">-->
-        <!--          <el-input v-model="form.sensitiveWords" type="textarea" placeholder="请输入内容" />-->
-        <!--        </el-form-item>-->
-        <el-form-item label="发布时间" prop="publishTime">
-          <el-date-picker clearable
-                          v-model="form.publishTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择发布时间">
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 查看我的所有文章弹窗 -->
-<!--    <el-dialog :title="title" :visible.sync="flag" width="50%" append-to-body>-->
-<!--      <el-row :gutter="10" class="mb8">-->
-<!--        <el-col :span="1.5">-->
-<!--          <el-button-->
-<!--            type="success"-->
-<!--            plain-->
-<!--            icon="el-icon-edit"-->
-<!--            size="mini"-->
-<!--            :disabled="single"-->
-<!--            @click="handleUpdate"-->
-<!--            v-hasPermi="['vet:article:edit']"-->
-<!--          >修改</el-button>-->
-<!--        </el-col>-->
-<!--        <el-col :span="1.5">-->
+<!--<template>-->
+<!--  <div class="app-container forum-container">-->
+<!--    &lt;!&ndash; 论坛标题部分 &ndash;&gt;-->
+<!--    <div class="forum-header">-->
+<!--      <div class="header-content">-->
+<!--        <div class="title-section">-->
+<!--          <h1 class="forum-title">-->
+<!--            <i class="el-icon-notebook-2"></i> 兽医经验分享论坛-->
+<!--          </h1>-->
+<!--          <p class="forum-subtitle">分享经验，共同成长，让兽医工作更专业</p>-->
+<!--          <div class="statistics-section">-->
+<!--            <div class="stat-item">-->
+<!--              <div class="stat-number">{{ statistics.totalArticles || 0 }}</div>-->
+<!--              <div class="stat-label">文章总数</div>-->
+<!--            </div>-->
+<!--            <div class="stat-divider"></div>-->
+<!--            <div class="stat-item">-->
+<!--              <div class="stat-number">{{ statistics.totalAuthors || 0 }}</div>-->
+<!--              <div class="stat-label">作者总数</div>-->
+<!--            </div>-->
+<!--            <div class="stat-divider"></div>-->
+<!--            <div class="stat-item">-->
+<!--              <div class="stat-number">{{ statistics.totalViews || 0 }}</div>-->
+<!--              <div class="stat-label">总浏览量</div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+
+<!--    &lt;!&ndash; 核心分页切换：论坛 / 我的文章 &ndash;&gt;-->
+<!--    <div class="page-tabs">-->
+<!--      <div class="tabs-header">-->
+<!--        <el-tabs v-model="activeMainTab" @tab-click="handleMainTabChange">-->
+<!--          <el-tab-pane label="论坛文章" name="forum">-->
+<!--            <template slot="label">-->
+<!--              <span><i class="el-icon-house"></i> 论坛文章</span>-->
+<!--            </template>-->
+<!--          </el-tab-pane>-->
+<!--          <el-tab-pane label="我的文章" name="myArticle">-->
+<!--            <template slot="label">-->
+<!--              <span><i class="el-icon-document"></i> 我的文章</span>-->
+<!--              <el-badge v-if="userArticleCount" :value="userArticleCount" class="tab-badge" />-->
+<!--            </template>-->
+<!--          </el-tab-pane>-->
+<!--        </el-tabs>-->
+<!--        <div class="forum-actions">-->
 <!--          <el-button-->
-<!--            type="danger"-->
+<!--            type="primary"-->
 <!--            plain-->
-<!--            icon="el-icon-delete"-->
+<!--            icon="el-icon-plus"-->
 <!--            size="mini"-->
-<!--            :disabled="multiple"-->
-<!--            @click="handleDelete"-->
-<!--            v-hasPermi="['vet:article:remove']"-->
-<!--          >删除</el-button>-->
-<!--        </el-col>-->
-<!--      </el-row>-->
-
-<!--      <el-table v-loading="loading" :data="articleList" @selection-change="handleSelectionChange">-->
-<!--        <el-table-column type="selection" width="55" align="center" />-->
-<!--        <el-table-column label="文章标题" align="center" prop="title" />-->
-<!--        <el-table-column label="文章摘要" align="center" prop="summary" />-->
-<!--        <el-table-column label="封面图片" align="center" prop="coverImage" width="100">-->
-<!--          <template slot-scope="scope">-->
-<!--            <image-preview :src="scope.row.coverImage" :width="50" :height="50"/>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column label="分类名称" align="center" prop="categoryName" />-->
-<!--        <el-table-column label="标签" align="center" prop="tags" />-->
-<!--        <el-table-column label="发布时间" align="center" prop="publishTime" width="180">-->
-<!--          <template slot-scope="scope">-->
-<!--            <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d}') }}</span>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">-->
-<!--          <template slot-scope="scope">-->
+<!--            @click="handleAdd"-->
+<!--            v-hasPermi="['vet:article:add']"-->
+<!--          >发新帖</el-button>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+
+<!--    <div class="forum-main">-->
+<!--      <div class="forum-content">-->
+<!--        &lt;!&ndash; 论坛文章列表 &ndash;&gt;-->
+<!--        <div v-if="activeMainTab === 'forum'">-->
+<!--          &lt;!&ndash; 搜索栏 &ndash;&gt;-->
+<!--          <div class="search-container">-->
+<!--            <div class="search-header">-->
+<!--              <h3><i class="el-icon-search"></i> 搜索文章</h3>-->
+<!--            </div>-->
+<!--            <el-form :model="queryParams" ref="queryForm" :inline="true">-->
+<!--              <el-form-item label="标题" prop="title">-->
+<!--                <el-input-->
+<!--                  v-model="queryParams.title"-->
+<!--                  placeholder="搜索文章标题"-->
+<!--                  clearable-->
+<!--                  @keyup.enter.native="handleQuery"-->
+<!--                />-->
+<!--              </el-form-item>-->
+<!--              <el-form-item label="分类" prop="categoryName">-->
+<!--                <el-select-->
+<!--                  v-model="queryParams.categoryName"-->
+<!--                  placeholder="请选择文章类别"-->
+<!--                  clearable-->
+<!--                  style="width: 145px"-->
+<!--                >-->
+<!--                  <el-option-->
+<!--                    v-for="item in categoryOptions"-->
+<!--                    :key="item.value"-->
+<!--                    :label="item.label"-->
+<!--                    :value="item.label"-->
+<!--                  />-->
+<!--                </el-select>-->
+<!--              </el-form-item>-->
+<!--              <el-form-item label="标签" prop="tags">-->
+<!--                <el-select-->
+<!--                  v-model="queryParams.tags"-->
+<!--                  placeholder="请选择文章标签"-->
+<!--                  clearable-->
+<!--                  style="width: 145px"-->
+<!--                >-->
+<!--                  <el-option-->
+<!--                    v-for="tag in tagOptions"-->
+<!--                    :key="tag.value"-->
+<!--                    :label="tag.label"-->
+<!--                    :value="tag.value"-->
+<!--                  />-->
+<!--                </el-select>-->
+<!--              </el-form-item>-->
+<!--              <el-form-item>-->
+<!--                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>-->
+<!--                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
+<!--              </el-form-item>-->
+<!--            </el-form>-->
+<!--          </div>-->
+
+
+<!--          &lt;!&ndash; 文章列表 &ndash;&gt;-->
+<!--          <div class="articles-container">-->
+<!--            <div class="articles-header">-->
+<!--              <h3>-->
+<!--                <i class="el-icon-tickets"></i> 论坛文章-->
+<!--              </h3>-->
+<!--            </div>-->
+
+<!--            &lt;!&ndash; 加载状态 &ndash;&gt;-->
+<!--            <div v-if="loading" class="loading-container">-->
+<!--              <i class="el-icon-loading"></i>-->
+<!--              <span>加载中...</span>-->
+<!--            </div>-->
+
+<!--            &lt;!&ndash; 文章列表 &ndash;&gt;-->
+<!--            <div v-else-if="articleList.length > 0" class="articles-list">-->
+<!--              <div-->
+<!--                v-for="article in articleList"-->
+<!--                :key="article.id"-->
+<!--                class="article-card"-->
+<!--                :class="{ 'draft': article.status === '0' }"-->
+<!--              >-->
+<!--                <div class="article-content">-->
+<!--                  <div class="article-header">-->
+<!--                    <div class="article-title" @click="handleViewDetail(article)">-->
+<!--                      {{ article.title }}-->
+<!--                    </div>-->
+<!--                    <div class="article-meta">-->
+<!--                      <span class="author">-->
+<!--                        <i class="el-icon-user"></i>-->
+<!--                        {{ article.vetName }}-->
+<!--                      </span>-->
+<!--                      <span class="time">-->
+<!--                        <i class="el-icon-time"></i>-->
+<!--                        {{ parseTime(article.publishTime, '{y}-{m}-{d} {h}:{i}') }}-->
+<!--                      </span>-->
+<!--                    </div>-->
+<!--                  </div>-->
+
+<!--                  <div class="article-body">-->
+<!--                    <p class="article-summary">{{ article.summary || '暂无摘要' }}</p>-->
+<!--                    <div class="article-tags">-->
+<!--                      <el-tag-->
+<!--                        v-if="article.categoryName"-->
+<!--                        size="mini"-->
+<!--                        type="success"-->
+<!--                        class="category-tag"-->
+<!--                      >-->
+<!--                        {{ article.categoryName }}-->
+<!--                      </el-tag>-->
+<!--                      <el-tag-->
+<!--                        v-for="tag in article.tags ? article.tags.split(',').slice(0, 3) : []"-->
+<!--                        :key="tag"-->
+<!--                        size="mini"-->
+<!--                        type="info"-->
+<!--                        class="tag"-->
+<!--                      >-->
+<!--                        {{ tag.trim() }}-->
+<!--                      </el-tag>-->
+<!--                    </div>-->
+<!--                  </div>-->
+
+<!--                  <div class="article-footer">-->
+<!--                    <div class="article-stats">-->
+<!--                      <span class="stat-item">-->
+<!--                        <i class="el-icon-view"></i>-->
+<!--                        {{ article.viewCount || 0 }}-->
+<!--                      </span>-->
+<!--                      <span class="stat-item">-->
+<!--                        <i class="el-icon-star-off"></i>-->
+<!--                        {{ article.likeCount || 0 }}-->
+<!--                      </span>-->
+<!--                      <span class="stat-item">-->
+<!--                        <i class="el-icon-collection"></i>-->
+<!--                        {{ article.collectCount || 0 }}-->
+<!--                      </span>-->
+<!--                    </div>-->
+<!--                    <div class="article-actions">-->
+<!--                      <el-button-->
+<!--                        size="mini"-->
+<!--                        type="text"-->
+<!--                        @click="handleViewDetail(article)"-->
+<!--                        class="action-btn"-->
+<!--                      >-->
+<!--                        查看详情-->
+<!--                      </el-button>-->
+<!--&lt;!&ndash;                      <el-button&ndash;&gt;-->
+<!--&lt;!&ndash;                        v-if="article.userId === currentUserId"&ndash;&gt;-->
+<!--&lt;!&ndash;                        size="mini"&ndash;&gt;-->
+<!--&lt;!&ndash;                        type="text"&ndash;&gt;-->
+<!--&lt;!&ndash;                        @click="handleEdit(article)"&ndash;&gt;-->
+<!--&lt;!&ndash;                        class="action-btn edit-btn"&ndash;&gt;-->
+<!--&lt;!&ndash;                      >&ndash;&gt;-->
+<!--&lt;!&ndash;                        <i class="el-icon-edit"></i>&ndash;&gt;-->
+<!--&lt;!&ndash;                        编辑&ndash;&gt;-->
+<!--&lt;!&ndash;                      </el-button>&ndash;&gt;-->
+<!--                    </div>-->
+<!--                  </div>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </div>-->
+
+<!--            &lt;!&ndash; 空状态 &ndash;&gt;-->
+<!--            <div v-else class="empty-container">-->
+<!--              <i class="el-icon-document"></i>-->
+<!--              <p>暂无文章</p>-->
+<!--            </div>-->
+
+<!--            &lt;!&ndash; 分页 &ndash;&gt;-->
+<!--            <pagination-->
+<!--              v-show="total>0"-->
+<!--              :total="total"-->
+<!--              :page.sync="queryParams.pageNum"-->
+<!--              :limit.sync="queryParams.pageSize"-->
+<!--              @pagination="getList"-->
+<!--            />-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        &lt;!&ndash; 🔹 我的文章页面内容：子标签+对应列表 &ndash;&gt;-->
+<!--        <div v-else-if="activeMainTab === 'myArticle'">-->
+<!--          <div class="my-article-container">-->
+<!--            &lt;!&ndash; 我的文章子标签：我发布的/草稿/我的收藏 &ndash;&gt;-->
+<!--            <el-tabs v-model="activeSubTab" type="border-card" class="sub-tab" @tab-click="handleSubTabChange">-->
+<!--              <el-tab-pane label="我发布的" name="published"></el-tab-pane>-->
+<!--              <el-tab-pane label="草稿" name="draft"></el-tab-pane>-->
+<!--              <el-tab-pane label="我的收藏" name="collect"></el-tab-pane>-->
+<!--            </el-tabs>-->
+
+<!--            &lt;!&ndash; 我的文章列表容器 &ndash;&gt;-->
+<!--            <div class="articles-container my-article-list">-->
+<!--              &lt;!&ndash; 加载状态 &ndash;&gt;-->
+<!--              <div v-if="loading" class="loading-container">-->
+<!--                <i class="el-icon-loading"></i>-->
+<!--                <span>加载中...</span>-->
+<!--              </div>-->
+
+<!--              &lt;!&ndash; 文章列表 &ndash;&gt;-->
+<!--              <div v-else-if="articleList.length > 0" class="articles-list">-->
+<!--                <div-->
+<!--                  v-for="article in articleList"-->
+<!--                  :key="article.id"-->
+<!--                  class="article-card"-->
+<!--                  :class="{ 'draft': article.status === '0' }"-->
+<!--                >-->
+<!--                  <div class="article-content">-->
+<!--                    <div class="article-header">-->
+<!--                      <div class="article-title" @click="handleViewDetail(article)">-->
+<!--                        {{ article.title }}-->
+<!--                        <el-tag v-if="article.status === '0'" size="mini" type="info" class="draft-tag">-->
+<!--                          草稿-->
+<!--                        </el-tag>-->
+<!--                      </div>-->
+<!--                      <div class="article-meta" v-if="activeSubTab !== 'collect'">-->
+<!--                        <span class="time">-->
+<!--                          <i class="el-icon-time"></i>-->
+<!--                          {{ parseTime(article.publishTime || article.createTime, '{y}-{m}-{d} {h}:{i}') }}-->
+<!--                        </span>-->
+<!--                      </div>-->
+<!--                      &lt;!&ndash; 收藏的文章显示原作者 &ndash;&gt;-->
+<!--                      <div class="article-meta" v-else>-->
+<!--                        <span class="author">-->
+<!--                          <i class="el-icon-user"></i>-->
+<!--                          {{ article.vetName }}-->
+<!--                        </span>-->
+<!--                        <span class="time">-->
+<!--                          <i class="el-icon-time"></i>-->
+<!--                          {{ parseTime(article.publishTime, '{y}-{m}-{d} {h}:{i}') }}-->
+<!--                        </span>-->
+<!--                      </div>-->
+<!--                    </div>-->
+
+<!--                    <div class="article-body">-->
+<!--                      <p class="article-summary">{{ article.summary || '暂无摘要' }}</p>-->
+<!--                      <div class="article-tags">-->
+<!--                        <el-tag-->
+<!--                          v-if="article.categoryName"-->
+<!--                          size="mini"-->
+<!--                          type="success"-->
+<!--                          class="category-tag"-->
+<!--                        >-->
+<!--                          {{ article.categoryName }}-->
+<!--                        </el-tag>-->
+<!--                        <el-tag-->
+<!--                          v-for="tag in article.tags ? article.tags.split(',').slice(0, 3) : []"-->
+<!--                          :key="tag"-->
+<!--                          size="mini"-->
+<!--                          type="info"-->
+<!--                          class="tag"-->
+<!--                        >-->
+<!--                          {{ tag.trim() }}-->
+<!--                        </el-tag>-->
+<!--                      </div>-->
+<!--                    </div>-->
+
+<!--                    <div class="article-footer">-->
+<!--                      <div class="article-stats">-->
+<!--                        <span class="stat-item" v-if="activeSubTab !== 'draft'">-->
+<!--                          <i class="el-icon-view"></i>-->
+<!--                          {{ article.viewCount || 0 }}-->
+<!--                        </span>-->
+<!--                        <span class="stat-item" v-if="activeSubTab !== 'draft'">-->
+<!--                          <i class="el-icon-star-off"></i>-->
+<!--                          {{ article.likeCount || 0 }}-->
+<!--                        </span>-->
+<!--                        <span class="stat-item" v-if="activeSubTab === 'collect'">-->
+<!--                          <i class="el-icon-collection"></i>-->
+<!--                          {{ article.collectCount || 0 }}-->
+<!--                        </span>-->
+<!--                      </div>-->
+<!--                      <div class="article-actions">-->
+<!--                        &lt;!&ndash; 自己的文章显示编辑/删除，收藏的文章显示取消收藏 &ndash;&gt;-->
+<!--                        <template v-if="activeSubTab !== 'collect'">-->
+<!--                          <el-button-->
+<!--                            size="mini"-->
+<!--                            type="text"-->
+<!--                            @click="handleEdit(article)"-->
+<!--                            class="action-btn edit-btn"-->
+<!--                          >-->
+<!--                            <i class="el-icon-edit"></i>-->
+<!--                            编辑-->
+<!--                          </el-button>-->
+<!--                          <el-button-->
+<!--                            size="mini"-->
+<!--                            type="text"-->
+<!--                            @click="handleDel(article)"-->
+<!--                            class="action-btn del-btn"-->
+<!--                          >-->
+<!--                            <i class="el-icon-delete"></i>-->
+<!--                            删除-->
+<!--                          </el-button>-->
+<!--                        </template>-->
+<!--                        <template v-else>-->
+<!--                          <el-button-->
+<!--                            size="mini"-->
+<!--                            type="text"-->
+<!--                            @click="handleCollect(article)"-->
+<!--                            class="action-btn collected"-->
+<!--                          >-->
+<!--                            <i class="el-icon-collection"></i>-->
+<!--                            取消收藏-->
+<!--                          </el-button>-->
+<!--                        </template>-->
+<!--                        <el-button-->
+<!--                          size="mini"-->
+<!--                          type="text"-->
+<!--                          @click="handleViewDetail(article)"-->
+<!--                          class="action-btn"-->
+<!--                        >-->
+<!--                          查看详情-->
+<!--                        </el-button>-->
+<!--                      </div>-->
+<!--                    </div>-->
+<!--                  </div>-->
+<!--                </div>-->
+<!--              </div>-->
+
+<!--              &lt;!&ndash; 空状态：区分不同子标签显示不同提示 &ndash;&gt;-->
+<!--              <div v-else class="empty-container">-->
+<!--                <i v-if="activeSubTab === 'published'" class="el-icon-document"></i>-->
+<!--                <i v-if="activeSubTab === 'draft'" class="el-icon-edit-outline"></i>-->
+<!--                <i v-if="activeSubTab === 'collect'" class="el-icon-collection"></i>-->
+<!--                <p v-if="activeSubTab === 'published'">暂无已发布文章</p>-->
+<!--                <p v-if="activeSubTab === 'draft'">暂无草稿文章</p>-->
+<!--                <p v-if="activeSubTab === 'collect'">暂无收藏文章</p>-->
+<!--                <el-button type="primary" @click="handleAdd" size="small" v-if="activeSubTab !== 'collect'">-->
+<!--                  发布文章-->
+<!--                </el-button>-->
+<!--                <el-button type="primary" @click="activeMainTab = 'forum'" size="small" v-if="activeSubTab === 'collect'">-->
+<!--                  去论坛收藏-->
+<!--                </el-button>-->
+<!--              </div>-->
+
+<!--              &lt;!&ndash; 分页 &ndash;&gt;-->
+<!--              <div v-if="total > 0" class="pagination-container">-->
+<!--                <el-pagination-->
+<!--                  layout="prev, pager, next"-->
+<!--                  :page-size="queryParams.pageSize"-->
+<!--                  :current-page="queryParams.pageNum"-->
+<!--                  :total="total"-->
+<!--                  @current-change="handlePageChange"-->
+<!--                />-->
+<!--              </div>-->
+
+<!--              <pagination-->
+<!--                v-show="total>0"-->
+<!--                :total="total"-->
+<!--                :page.sync="queryParams.pageNum"-->
+<!--                :limit.sync="queryParams.pageSize"-->
+<!--                @pagination="getList"-->
+<!--              />-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+
+<!--    &lt;!&ndash; 发布/编辑文章弹窗 &ndash;&gt;-->
+<!--    <el-dialog-->
+<!--      :title="title"-->
+<!--      :visible.sync="open"-->
+<!--      width="800px"-->
+<!--      append-to-body-->
+<!--      class="article-dialog"-->
+<!--      :close-on-click-modal="false"-->
+<!--    >-->
+<!--      <el-form ref="form" :model="form" :rules="rules" label-width="100px">-->
+<!--        <el-form-item label="文章标题" prop="title">-->
+<!--          <el-input-->
+<!--            v-model="form.title"-->
+<!--            placeholder="请输入文章标题，建议50字以内"-->
+<!--            maxlength="50"-->
+<!--            show-word-limit-->
+<!--          />-->
+<!--        </el-form-item>-->
+<!--        <el-row :gutter="20">-->
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="文章分类" prop="categoryName">-->
+<!--              <el-select v-model="form.categoryName" placeholder="请选择分类" style="width: 100%">-->
+<!--                <el-option-->
+<!--                  v-for="item in categoryOptions"-->
+<!--                  :key="item.value"-->
+<!--                  :label="item.label"-->
+<!--                  :value="item.label"-->
+<!--                />-->
+<!--              </el-select>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="文章标签">-->
+<!--              <el-select-->
+<!--                v-model="form.tags"-->
+<!--                multiple-->
+<!--                placeholder="请选择标签（最多5个）"-->
+<!--                style="width: 100%"-->
+<!--                :multiple-limit="5"-->
+<!--              >-->
+<!--                <el-option-->
+<!--                  v-for="tag in tagOptions"-->
+<!--                  :key="tag.value"-->
+<!--                  :label="tag.label"-->
+<!--                  :value="tag.value"-->
+<!--                />-->
+<!--              </el-select>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
+<!--        <el-form-item label="文章摘要">-->
+<!--          <el-input-->
+<!--            v-model="form.summary"-->
+<!--            type="textarea"-->
+<!--            :rows="3"-->
+<!--            placeholder="请输入文章摘要（选填，200字以内）"-->
+<!--            maxlength="200"-->
+<!--            show-word-limit-->
+<!--          />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="文章内容" prop="content">-->
+<!--          <div class="editor-container">-->
+<!--            <editor v-model="form.content" :min-height="300" />-->
+<!--            <div class="editor-tips">-->
+<!--              <i class="el-icon-info"></i> 支持Markdown语法，建议内容详实、配图清晰-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="文章状态" class="status-radio">-->
+<!--          <el-radio-group v-model="form.status">-->
+<!--            <el-radio label="1" border>立即发布</el-radio>-->
+<!--            <el-radio label="0" border>保存草稿</el-radio>-->
+<!--          </el-radio-group>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="cancel">取 消</el-button>-->
+<!--        <el-button type="primary" @click="submitForm" :loading="submitting">-->
+<!--          {{ form.status === '1' ? '发 布' : '保存草稿' }}-->
+<!--        </el-button>-->
+<!--      </div>-->
+<!--    </el-dialog>-->
+
+<!--    &lt;!&ndash; 文章详情弹窗 &ndash;&gt;-->
+<!--    <el-dialog-->
+<!--      :title="detailData ? detailData.article.title : ''"-->
+<!--      :visible.sync="detailOpen"-->
+<!--      width="900px"-->
+<!--      append-to-body-->
+<!--      class="detail-dialog"-->
+<!--      @closed="handleDetailClosed"-->
+<!--    >-->
+<!--      <div v-if="detailData" class="detail-container">-->
+<!--        &lt;!&ndash; 文章头部 &ndash;&gt;-->
+<!--        <div class="detail-header">-->
+<!--          <div class="author-info">-->
+<!--            <el-avatar :size="40" :src="detailData.article.avatar" class="author-avatar">-->
+<!--              {{ detailData.article.vetName ? detailData.article.vetName.charAt(0) : 'V' }}-->
+<!--            </el-avatar>-->
+<!--            <div class="author-meta">-->
+<!--              <div class="author-name">{{ detailData.article.vetName }}</div>-->
+<!--              <div class="publish-time">-->
+<!--                <i class="el-icon-time"></i>-->
+<!--                {{ parseTime(detailData.article.publishTime, '{y}年{m}月{d}日 {h}:{i}') }}-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--          <div class="article-actions">-->
 <!--            <el-button-->
 <!--              size="mini"-->
-<!--              type="text"-->
-<!--              icon="el-icon-edit"-->
-<!--              style="color: #42B983"-->
-<!--              class="article-btn alter-btn"-->
-<!--              @click="handleUpdate(scope.row)"-->
-<!--              v-hasPermi="['vet:article:edit']"-->
-<!--            >修改</el-button>-->
+<!--              :type="detailData.article.liked ? 'danger' : ''"-->
+<!--              @click="handleLikeDetail(detailData.article)"-->
+<!--              :disabled="detailData.isOwner"-->
+<!--              class="action-btn"-->
+<!--            >-->
+<!--              <i class="el-icon-star-off"></i>-->
+<!--              {{ detailData.article.likeCount || 0 }}-->
+<!--            </el-button>-->
 <!--            <el-button-->
 <!--              size="mini"-->
-<!--              type="text"-->
-<!--              icon="el-icon-delete"-->
-<!--              style="color: #f28888"-->
-<!--              class="article-btn delete-btn"-->
-<!--              @click="handleDelete(scope.row)"-->
-<!--              v-hasPermi="['vet:article:remove']"-->
-<!--            >删除</el-button>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--      </el-table>-->
-
-<!--      <pagination-->
-<!--        v-show="total>0"-->
-<!--        :total="total"-->
-<!--        :page.sync="queryParams.pageNum"-->
-<!--        :limit.sync="queryParams.pageSize"-->
-<!--        @pagination="handleViewMyArticles"-->
-<!--      />-->
+<!--              :type="detailData.isCollected ? 'warning' : ''"-->
+<!--              @click="handleCollectDetail(detailData.article)"-->
+<!--              :disabled="detailData.isOwner"-->
+<!--              class="action-btn"-->
+<!--            >-->
+<!--              <i class="el-icon-collection"></i>-->
+<!--              {{ detailData.isCollected ? '已收藏' : '收藏' }}-->
+<!--            </el-button>-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        &lt;!&ndash; 文章信息 &ndash;&gt;-->
+<!--        <div class="article-info">-->
+<!--          <el-tag v-if="detailData.article.categoryName" type="success" size="small">-->
+<!--            {{ detailData.article.categoryName }}-->
+<!--          </el-tag>-->
+<!--          <el-tag-->
+<!--            v-for="tag in detailData.article.tags ? detailData.article.tags.split(',') : []"-->
+<!--            :key="tag"-->
+<!--            type="info"-->
+<!--            size="small"-->
+<!--            class="tag"-->
+<!--          >-->
+<!--            {{ tag.trim() }}-->
+<!--          </el-tag>-->
+<!--          <div class="view-count">-->
+<!--            <i class="el-icon-view"></i>-->
+<!--            浏览 {{ detailData.article.viewCount || 0 }} 次-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        &lt;!&ndash; 文章摘要 &ndash;&gt;-->
+<!--        <div v-if="detailData.article.summary" class="article-summary-box">-->
+<!--          <div class="summary-title">文章摘要</div>-->
+<!--          <div class="summary-content">{{ detailData.article.summary }}</div>-->
+<!--        </div>-->
+
+<!--        &lt;!&ndash; 文章内容 &ndash;&gt;-->
+<!--        <div class="article-content-box">-->
+<!--          <div class="content-title">文章内容</div>-->
+<!--          <div class="content" v-html="detailData.article.content"></div>-->
+<!--        </div>-->
+
+<!--        &lt;!&ndash; 相关文章 &ndash;&gt;-->
+<!--        <div v-if="detailData.relatedArticles && detailData.relatedArticles.length > 0" class="related-articles">-->
+<!--          <div class="section-title">相关推荐</div>-->
+<!--          <div class="related-list">-->
+<!--            <div-->
+<!--              v-for="item in detailData.relatedArticles"-->
+<!--              :key="item.id"-->
+<!--              class="related-item"-->
+<!--              @click="handleViewDetail(item)"-->
+<!--            >-->
+<!--              <div class="related-title">{{ item.title }}</div>-->
+<!--              <div class="related-meta">-->
+<!--                <span>{{ item.vetName }}</span>-->
+<!--                <span>{{ parseTime(item.publishTime, '{m}-{d}') }}</span>-->
+<!--                <span><i class="el-icon-view"></i> {{ item.viewCount }}</span>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="detailOpen = false">关 闭</el-button>-->
+<!--        <el-button-->
+<!--          v-if="detailData && detailData.isOwner"-->
+<!--          type="primary"-->
+<!--          @click="handleEdit(detailData.article)"-->
+<!--        >-->
+<!--          编辑文章-->
+<!--        </el-button>-->
+<!--      </div>-->
 <!--    </el-dialog>-->
-  </div>
-</template>
-
-<script>
-import { listArticle, getForumHome, getArticle, delArticle, addArticle,
-  updateArticle, getForumDetail, publishForumArticle, getMyForumArticles,
-  likeForumArticle, collectForumArticle, getForumHotTags, getArticlesByCategory,
-  getArticleOptions} from "@/api/vet/article"
-
-export default {
-  name: "Article",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 兽医经验文章表格数据
-      articleList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      flag: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        title: null,
-        content: null,
-        summary: null,
-        coverImage: null,
-        images: null,
-        vetId: null,
-        vetName: null,
-        vetAvatar: null,
-        vetTitle: null,
-        categoryId: null,
-        categoryName: null,
-
-        tagOptionsName: null,
-
-        tags: null,
-        isTop: null,
-        isFeatured: null,
-        status: null,
-        isSensitive: null,
-        sensitiveWords: null,
-        publishTime: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        title: [
-          { required: true, message: "文章标题不能为空", trigger: "blur" }
-        ],
-        content: [
-          { required: true, message: "文章内容不能为空", trigger: "blur" }
-        ],
-        vetId: [
-          { required: true, message: "作者不能为空", trigger: "blur" }
-        ],
-      },
-      // 文章统计
-      myStats: {},
-      // 分类列表
-      categories: [],
-      // 标签列表
-      tagOptions: [],
-
-    }
-  },
-  created() {
-    this.getList()
-
-    // this.loadMyStats()
-  },
-  methods: {
-    /** 加载我的文章统计 */
-    // loadMyStats() {
-    //
-    //   getStatsCard().then(res => {
-    //     this.myStats = res.data
-    //   })
-    // },
-
-    /* 分类点击事件 */
-    handleCategoryClick(category) {
-      this.queryParams.categoryName = category
-      this.handleQuery()
-    },
-
-    /* 查看我的所有文章 */
-    handleViewMyArticles() {
-      this.flag = true
-      this.queryParams.vetId = this.$store.state.user.userId;
-      getMyForumArticles(this.queryParams).then((response) => {
-        if (response.code === 200) {
-          this.articleList = response.data;
-        }
-      }).catch(() => {
-      });
-    },
-
-    /** 查询兽医经验文章列表 */
-    getList() {
-      this.loading = true
-      listArticle(this.queryParams).then(response => {
-        this.articleList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        title: null,
-        content: null,
-        summary: null,
-        coverImage: null,
-        images: null,
-        vetId: null,
-        vetName: null,
-        vetAvatar: null,
-        vetTitle: null,
-        categoryId: null,
-        categoryName: null,
-        tags: null,
-        isTop: null,
-        isFeatured: null,
-        status: null,
-        isSensitive: null,
-        sensitiveWords: null,
-        publishTime: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
-      }
-      this.resetForm("form")
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm")
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.open = true
-      this.title = "添加兽医经验文章"
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const id = row.id || this.ids
-      getArticle(id).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = "修改兽医经验文章"
-      })
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateArticle(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
-              this.open = false
-              this.getList()
-            })
-          } else {
-            addArticle(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
-          }
-        }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除兽医经验文章编号为"' + ids + '"的数据项？').then(function() {
-        return delArticle(ids)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess("删除成功")
-      }).catch(() => {})
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('vet/article/export', {
-        ...this.queryParams
-      }, `article_${new Date().getTime()}.xlsx`)
-    },
-  }
-}
-</script>
-
-<style scoped lang="scss">
-/* 论坛标题 */
-.forum-header {
-  margin-bottom: 30px;
-  text-align: center;
-
-  .forum-title {
-    font-size: 28px;
-    color: #333;
-    margin-bottom: 8px;
-    font-weight: bold;
-  }
-
-  .forum-subtitle {
-    font-size: 14px;
-    color: #666;
-  }
-}
-
-/* 搜索部分 */
-.forum-filters {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
-
-  ::v-deep .el-form-item {
-    margin-bottom: 0;
-    margin-right: 20px;
-  }
-
-  ::v-deep .filter-select {
-    width: 150px;
-  }
-}
-
-/* 论坛部分 */
-.forum-content{
-  display: flex
-}
-
-/* 左侧内容部分 */
-.forum-sidebar {
-  width: 280px;
-  flex-shrink: 0;
-
-  .sidebar-card {
-    background: white;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
-
-    .card-header {
-      padding: 16px 20px;
-      border-bottom: 1px solid #f0f0f0;
-      display: flex;
-      align-items: center;
-
-      .card-icon {
-        margin-right: 8px;
-        color: #409EFF;
-      }
-
-      .file-multiple {
-        margin-right: 8px;
-        color: #42B983;
-      }
-
-      .tag-card-icon {
-        margin-right: 8px;
-        color: #f6c90e;
-      }
-
-      .card-title {
-        font-weight: 500;
-        color: #333;
-      }
-    }
-
-    .card-body {
-      padding: 20px;
-    }
-
-    &.my-articles {
-      .stats-row {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 20px;
-
-        .stat-item {
-          text-align: center;
-
-          .stat-number {
-            font-size: 24px;
-            font-weight: bold;
-            color: #409EFF;
-            line-height: 1;
-            margin-bottom: 4px;
-          }
-
-          .stat-label {
-            font-size: 12px;
-            color: #666;
-          }
-        }
-      }
-
-      .view-all-btn {
-        width: 100%;
-        text-align: center;
-        padding: 8px 0;
-        color: #409EFF;
-
-        &:hover {
-          color: #66b1ff;
-        }
-      }
-    }
-
-    &.categories {
-      .category-list {
-        .category-item {
-          padding: 8px 12px;
-          margin-bottom: 8px;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: all 0.3s;
-          color: #666;
-
-          &:hover {
-            background: #f5f7fa;
-            color: #409EFF;
-          }
-
-          &.active {
-            background: #ecf5ff;
-            color: #409EFF;
-            font-weight: 500;
-          }
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-/* 右侧文章部分 */
-/* 操作按钮 */
-.forum-main {
-  flex: 1;
-  margin-left: 10px;
-}
-
-.forum-actions {
-  background: white;
-  padding: 16px 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
-
-  .action-buttons {
-    display: flex;
-    gap: 10px;
-  }
-}
-/* 操作按钮样式 */
-.article-btn {
-  padding: 6px 10px;
-  border-radius: 4px;
-  margin: 0 10px;
-  transition: all 0.3s ease;
-
-}
-
-.alter-btn:hover{
-  background-color: rgb(230, 255, 238);
-  transform: translateY(-1px);
-}
-
-.delete-btn:hover {
-  background-color: rgba(245, 108, 108, 0.1);
-  transform: translateY(-1px);
-}
-
-</style>
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import { listArticle, getArticle, addArticle, updateArticle,-->
+<!--  delArticle, getCategoryOptions, getTagOptions, likeArticle,-->
+<!--  collectArticle, getMyCollections, getStatistics } from "@/api/vet/article";-->
+<!--import { parseTime } from "@/utils/ruoyi"; // 确保时间解析工具引入-->
+
+<!--export default {-->
+<!--  name: "ForumArticle",-->
+<!--  data() {-->
+<!--    return {-->
+<!--      loading: false,-->
+<!--      articleList: [],-->
+<!--      total: 0,-->
+<!--      currentUserId: null,-->
+<!--      userArticleCount: 0,-->
+<!--      sortType: 'time',-->
+<!--      // 核心：主分页（论坛/我的文章）、子分页（我发布的/草稿/收藏）-->
+<!--      activeMainTab: 'forum',-->
+<!--      activeSubTab: 'published',-->
+<!--      queryParams: {-->
+<!--        pageNum: 1,-->
+<!--        pageSize: 8,-->
+<!--        title: '',-->
+<!--        categoryName: '',-->
+<!--        tags: '',-->
+<!--        status: '1',-->
+<!--        userId: '',-->
+<!--        sortField: 'publish_time',-->
+<!--        sortOrder: 'desc'-->
+<!--      },-->
+<!--      categoryOptions: [],-->
+<!--      tagOptions: [],-->
+<!--      statistics: {},-->
+<!--      open: false,-->
+<!--      title: '',-->
+<!--      submitting: false,-->
+<!--      form: {-->
+<!--        id: null,-->
+<!--        title: '',-->
+<!--        content: '',-->
+<!--        summary: '',-->
+<!--        categoryName: '',-->
+<!--        tags: [],-->
+<!--        status: '1'-->
+<!--      },-->
+<!--      rules: {-->
+<!--        title: [-->
+<!--          { required: true, message: '请输入文章标题', trigger: 'blur' },-->
+<!--          { min: 5, max: 50, message: '标题长度在 5 到 50 个字符', trigger: 'blur' }-->
+<!--        ],-->
+<!--        content: [-->
+<!--          { required: true, message: '请输入文章内容', trigger: 'blur' },-->
+<!--          { min: 10, message: '内容至少10个字符', trigger: 'blur' }-->
+<!--        ],-->
+<!--        categoryName: [-->
+<!--          { required: true, message: '请选择文章分类', trigger: 'change' }-->
+<!--        ]-->
+<!--      },-->
+<!--      detailOpen: false,-->
+<!--      detailData: null-->
+<!--    }-->
+<!--  },-->
+<!--  created() {-->
+<!--    this.currentUserId = this.$store.state.user.userId;-->
+<!--    this.getList();-->
+<!--    this.getCategoryOptions();-->
+<!--    this.getTagOptions();-->
+<!--    this.getStatistics();-->
+<!--    this.getUserArticleCount();-->
+<!--  },-->
+<!--  methods: {-->
+<!--    // 统一获取列表：根据主/子标签判断请求逻辑-->
+<!--    getList() {-->
+<!--      this.loading = true;-->
+<!--      // 我的文章-收藏：调用专属接口-->
+<!--      if (this.activeMainTab === 'myArticle' && this.activeSubTab === 'collect') {-->
+<!--        getMyCollections(this.queryParams).then(res => {-->
+<!--          this.articleList = res.rows || [];-->
+<!--          this.total = res.total || 0;-->
+<!--          this.loading = false;-->
+<!--        }).catch(() => {-->
+<!--          this.loading = false;-->
+<!--        });-->
+<!--      } else {-->
+<!--        // 论坛/我发布的/草稿：调用通用列表接口，追加筛选条件-->
+<!--        const params = { ...this.queryParams };-->
+<!--        // 我的文章下，强制筛选当前用户-->
+<!--        if (this.activeMainTab === 'myArticle') {-->
+<!--          params.userId = this.currentUserId;-->
+<!--          // 子标签-草稿：筛选状态0；已发布：筛选状态1-->
+<!--          params.status = this.activeSubTab === 'draft' ? '0' : '1';-->
+<!--        }-->
+<!--        listArticle(params).then(res => {-->
+<!--          this.articleList = res.rows || [];-->
+<!--          this.total = res.total || 0;-->
+<!--          this.loading = false;-->
+<!--        }).catch(() => {-->
+<!--          this.loading = false;-->
+<!--        });-->
+<!--      }-->
+<!--    },-->
+
+<!--    // 获取我的已发布文章数量（用于角标）-->
+<!--    getUserArticleCount() {-->
+<!--      const params = {-->
+<!--        userId: this.currentUserId,-->
+<!--        status: '1',-->
+<!--        pageSize: 1,-->
+<!--        pageNum: 1-->
+<!--      };-->
+<!--      listArticle(params).then(res => {-->
+<!--        this.userArticleCount = res.total || 0;-->
+<!--      });-->
+<!--    },-->
+
+<!--    getCategoryOptions() {-->
+<!--      getCategoryOptions().then(res => {-->
+<!--        this.categoryOptions = res.data || [];-->
+<!--      });-->
+<!--    },-->
+
+<!--    getTagOptions() {-->
+<!--      getTagOptions().then(res => {-->
+<!--        this.tagOptions = res.data || [];-->
+<!--      });-->
+<!--    },-->
+
+<!--    getStatistics() {-->
+<!--      getStatistics().then(res => {-->
+<!--        this.statistics = res.data || {};-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 论坛页面搜索-->
+<!--    handleQuery() {-->
+<!--      this.queryParams.pageNum = 1;-->
+<!--      this.getList();-->
+<!--    },-->
+
+<!--    // 重置论坛筛选条件-->
+<!--    resetQuery() {-->
+<!--      this.queryParams = {-->
+<!--        pageNum: 1,-->
+<!--        pageSize: 8,-->
+<!--        title: '',-->
+<!--        categoryName: '',-->
+<!--        tags: '',-->
+<!--        status: '1',-->
+<!--        userId: '',-->
+<!--        sortField: 'publish_time',-->
+<!--        sortOrder: 'desc'-->
+<!--      };-->
+<!--      this.sortType = 'time';-->
+<!--      this.getList();-->
+<!--    },-->
+
+<!--    // 论坛页面排序-->
+<!--    changeSort(type) {-->
+<!--      this.sortType = type;-->
+<!--      if (type === 'time') {-->
+<!--        this.queryParams.sortField = 'publish_time';-->
+<!--        this.queryParams.sortOrder = 'desc';-->
+<!--      } else if (type === 'view') {-->
+<!--        this.queryParams.sortField = 'view_count';-->
+<!--        this.queryParams.sortOrder = 'desc';-->
+<!--      }-->
+<!--      this.getList();-->
+<!--    },-->
+
+<!--    // 分页切换-->
+<!--    handlePageChange(page) {-->
+<!--      this.queryParams.pageNum = page;-->
+<!--      this.getList();-->
+<!--    },-->
+
+<!--    // 发布文章-->
+<!--    handleAdd() {-->
+<!--      this.open = true;-->
+<!--      this.title = '发布新文章';-->
+<!--      this.form = {-->
+<!--        id: null,-->
+<!--        title: '',-->
+<!--        content: '',-->
+<!--        summary: '',-->
+<!--        categoryName: '',-->
+<!--        tags: [],-->
+<!--        status: '1'-->
+<!--      };-->
+<!--    },-->
+
+<!--    // 编辑文章-->
+<!--    handleEdit(row) {-->
+<!--      getArticle(row.id).then(res => {-->
+<!--        const article = res.data.article;-->
+<!--        this.form = {-->
+<!--          id: article.id,-->
+<!--          title: article.title,-->
+<!--          content: article.content,-->
+<!--          summary: article.summary || '',-->
+<!--          categoryName: article.categoryName || '',-->
+<!--          tags: article.tags ? article.tags.split(',').map(tag => tag.trim()) : [],-->
+<!--          status: article.status || '1'-->
+<!--        };-->
+<!--        this.open = true;-->
+<!--        this.title = '编辑文章';-->
+<!--        this.detailOpen = false;-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 删除文章（新增）-->
+<!--    handleDel(row) {-->
+<!--      this.$confirm('确定要删除该文章吗？删除后不可恢复！', '警告', {-->
+<!--        confirmButtonText: '确定',-->
+<!--        cancelButtonText: '取消',-->
+<!--        type: 'warning'-->
+<!--      }).then(() => {-->
+<!--        delArticle(row.id).then(res => {-->
+<!--          this.$message.success('删除成功');-->
+<!--          this.getList();-->
+<!--          this.getUserArticleCount();-->
+<!--        }).catch(err => {-->
+<!--          this.$message.error(err.message || '删除失败');-->
+<!--        });-->
+<!--      }).catch(() => {-->
+<!--        this.$message.info('已取消删除');-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 侧边栏跳转到我的文章（新增）-->
+<!--    handleToMyArticle() {-->
+<!--      this.activeMainTab = 'myArticle';-->
+<!--      this.queryParams.pageNum = 1;-->
+<!--      this.getList();-->
+<!--    },-->
+
+<!--    // 主标签（论坛/我的文章）切换（新增）-->
+<!--    handleMainTabChange() {-->
+<!--      this.queryParams.pageNum = 1;-->
+<!--      // 切换到论坛：重置筛选条件-->
+<!--      if (this.activeMainTab === 'forum') {-->
+<!--        this.resetQuery();-->
+<!--      } else {-->
+<!--        // 切换到我的文章：重新请求列表-->
+<!--        this.getList();-->
+<!--      }-->
+<!--    },-->
+
+<!--    // 子标签（我发布的/草稿/收藏）切换（新增）-->
+<!--    handleSubTabChange() {-->
+<!--      this.queryParams.pageNum = 1;-->
+<!--      this.getList();-->
+<!--    },-->
+
+<!--    // 查看文章详情 - 核心修改：打开详情时更新列表中对应文章的浏览量-->
+<!--    handleViewDetail(row) {-->
+<!--      getArticle(row.id).then(res => {-->
+<!--        this.detailData = res.data;-->
+<!--        this.detailOpen = true;-->
+<!--        // 关键修改：找到列表中当前点击的文章，浏览量+1（和详情页保持一致）-->
+<!--        const targetArticle = this.articleList.find(item => item.id === row.id);-->
+<!--        if (targetArticle) {-->
+<!--          targetArticle.viewCount = (targetArticle.viewCount || 0) + 1;-->
+<!--        }-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 详情弹窗关闭-->
+<!--    handleDetailClosed() {-->
+<!--      this.detailData = null;-->
+<!--    },-->
+
+<!--    // 列表点赞-->
+<!--    handleLike(row) {-->
+<!--      if (row.userId === this.currentUserId) {-->
+<!--        this.$message.warning('不能给自己的文章点赞');-->
+<!--        return;-->
+<!--      }-->
+<!--      likeArticle(row.id).then(res => {-->
+<!--        this.$message.success(res.message || '点赞成功');-->
+<!--        row.likeCount = (row.likeCount || 0) + 1;-->
+<!--        row.liked = true;-->
+<!--      }).catch(err => {-->
+<!--        this.$message.error(err.message || '点赞失败');-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 详情页点赞-->
+<!--    handleLikeDetail(article) {-->
+<!--      likeArticle(article.id).then(res => {-->
+<!--        this.$message.success(res.message || '操作成功');-->
+<!--        this.detailData.article.likeCount = (this.detailData.article.likeCount || 0) +-->
+<!--          (res.message === '取消点赞成功' ? -1 : 1);-->
+<!--        this.detailData.article.liked = res.message !== '取消点赞成功';-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 列表收藏/取消收藏-->
+<!--    handleCollect(row) {-->
+<!--      if (row.userId === this.currentUserId) {-->
+<!--        this.$message.warning('不能收藏自己的文章');-->
+<!--        return;-->
+<!--      }-->
+<!--      collectArticle(row.id).then(res => {-->
+<!--        this.$message.success(res.message || res.data || '操作成功');-->
+<!--        if (res.message === '收藏成功') {-->
+<!--          row.collectCount = (row.collectCount || 0) + 1;-->
+<!--          row.collected = true;-->
+<!--        } else {-->
+<!--          row.collectCount = Math.max(0, (row.collectCount || 1) - 1);-->
+<!--          row.collected = false;-->
+<!--          // 收藏标签下取消收藏，刷新列表-->
+<!--          if (this.activeMainTab === 'myArticle' && this.activeSubTab === 'collect') {-->
+<!--            this.getList();-->
+<!--          }-->
+<!--        }-->
+<!--      }).catch(err => {-->
+<!--        this.$message.error(err.message || '操作失败');-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 详情页收藏/取消收藏-->
+<!--    handleCollectDetail(article) {-->
+<!--      collectArticle(article.id).then(res => {-->
+<!--        this.$message.success(res.message || res.data || '操作成功');-->
+<!--        this.detailData.isCollected = res.message === '收藏成功';-->
+<!--        this.detailData.article.collectCount = (this.detailData.article.collectCount || 0) +-->
+<!--          (res.message === '收藏成功' ? 1 : -1);-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 提交发布/编辑-->
+<!--    submitForm() {-->
+<!--      this.$refs.form.validate(valid => {-->
+<!--        if (valid) {-->
+<!--          this.submitting = true;-->
+<!--          const formData = {-->
+<!--            ...this.form,-->
+<!--            tags: this.form.tags.join(',')-->
+<!--          };-->
+<!--          const apiCall = formData.id ? updateArticle(formData) : addArticle(formData);-->
+<!--          apiCall.then(res => {-->
+<!--            this.$message.success(formData.id ? '修改成功' : (formData.status === '1' ? '发布成功' : '草稿保存成功'));-->
+<!--            this.open = false;-->
+<!--            // 提交后刷新当前列表（尤其是我的文章页）-->
+<!--            this.getList();-->
+<!--            this.getUserArticleCount();-->
+<!--          }).catch(err => {-->
+<!--            this.$message.error(err.message || '操作失败');-->
+<!--          }).finally(() => {-->
+<!--            this.submitting = false;-->
+<!--          });-->
+<!--        }-->
+<!--      });-->
+<!--    },-->
+
+<!--    // 取消发布/编辑-->
+<!--    cancel() {-->
+<!--      this.open = false;-->
+<!--      this.form = {-->
+<!--        id: null,-->
+<!--        title: '',-->
+<!--        content: '',-->
+<!--        summary: '',-->
+<!--        categoryName: '',-->
+<!--        tags: [],-->
+<!--        status: '1'-->
+<!--      };-->
+<!--    }-->
+<!--  },-->
+<!--  filters: {-->
+<!--    parseTime-->
+<!--  }-->
+<!--}-->
+<!--</script>-->
+
+<!--<style scoped>-->
+<!--.forum-container {-->
+<!--  min-height: calc(100vh - 84px);-->
+<!--  background: #f5f7fa;-->
+<!--  padding: 20px 0;-->
+<!--}-->
+
+<!--/* 头部样式：调整为居中布局，适配统计项在副标题下方 */-->
+<!--.forum-header {-->
+<!--  margin-bottom: 30px;-->
+<!--  text-align: center;-->
+<!--}-->
+
+<!--.header-content {-->
+<!--  max-width: 1200px;-->
+<!--  margin: 0 auto;-->
+<!--  padding: 0 20px;-->
+<!--  /* 🔴 移除原有flex左右布局，改为块级居中 */-->
+<!--}-->
+
+<!--.title-section {-->
+<!--  /* 让标题区内部元素居中 */-->
+<!--  display: flex;-->
+<!--  flex-direction: column;-->
+<!--  align-items: center;-->
+<!--  gap: 15px;-->
+<!--}-->
+
+<!--.title-section .forum-title {-->
+<!--  margin: 0;-->
+<!--  font-size: 28px;-->
+<!--  font-weight: 600;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 10px;-->
+<!--  color: #333;-->
+<!--}-->
+
+<!--.title-section .forum-subtitle {-->
+<!--  margin: 0;-->
+<!--  font-size: 14px;-->
+<!--  opacity: 0.9;-->
+<!--  color: #666;-->
+<!--}-->
+
+<!--/* 统计区域样式：微调间距和背景，适配居中布局 */-->
+<!--.statistics-section {-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  background: #ffffff;-->
+<!--  padding: 15px 25px;-->
+<!--  border-radius: 12px;-->
+<!--  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);-->
+<!--  margin-top: 10px;-->
+<!--}-->
+
+<!--.stat-item {-->
+<!--  text-align: center;-->
+<!--  padding: 0 25px; /* 加大左右内边距，更舒展 */-->
+<!--}-->
+
+<!--.stat-number {-->
+<!--  font-size: 24px;-->
+<!--  font-weight: bold;-->
+<!--  margin-bottom: 5px;-->
+<!--  color: #333;-->
+<!--}-->
+
+<!--.stat-label {-->
+<!--  font-size: 12px;-->
+<!--  opacity: 0.8;-->
+<!--  color: #666;-->
+<!--}-->
+
+<!--.stat-divider {-->
+<!--  width: 1px;-->
+<!--  height: 30px;-->
+<!--  background: #ebeef5; /* 调整分割线颜色为浅灰色，适配白色背景 */-->
+<!--}-->
+
+<!--/* 分页标签区域 - 修改为flex布局，让按钮在右侧 */-->
+<!--.page-tabs {-->
+<!--  max-width: 1200px;-->
+<!--  margin: 0 auto 20px;-->
+<!--  padding: 0 20px;-->
+<!--}-->
+
+<!--.tabs-header {-->
+<!--  display: flex;-->
+<!--  justify-content: space-between;-->
+<!--  align-items: center;-->
+<!--  border-bottom: 1px solid #e4e7ed;-->
+<!--  margin-bottom: 20px;-->
+<!--  position: relative;-->
+<!--  padding-bottom: 1px;-->
+<!--}-->
+
+<!--.tabs-header::after {-->
+<!--  content: '';-->
+<!--  position: absolute;-->
+<!--  bottom: -1px;-->
+<!--  left: 0;-->
+<!--  right: 0;-->
+<!--  height: 1px;-->
+<!--  background-color: #e4e7ed;-->
+<!--}-->
+
+<!--.tabs-header >>> .el-tabs {-->
+<!--  flex: 1;-->
+<!--}-->
+
+<!--.tabs-header >>> .el-tabs__nav-wrap::after {-->
+<!--  height: 0;-->
+<!--}-->
+
+<!--.tabs-header >>> .el-tabs__header {-->
+<!--  margin-bottom: 0;-->
+<!--}-->
+
+<!--.tabs-header >>> .el-tabs__item {-->
+<!--  font-size: 16px;-->
+<!--  padding: 0 24px;-->
+<!--  height: 40px;-->
+<!--  line-height: 40px;-->
+<!--}-->
+
+<!--.tabs-header >>> .el-tabs__item i {-->
+<!--  margin-right: 8px;-->
+<!--}-->
+
+<!--.tabs-header >>> .el-tabs__item.is-active {-->
+<!--  color: #409EFF;-->
+<!--  font-weight: 600;-->
+<!--}-->
+
+<!--.tabs-header >>> .el-tabs__active-bar {-->
+<!--  background-color: #409EFF;-->
+<!--  height: 3px;-->
+<!--  border-radius: 2px 2px 0 0;-->
+<!--}-->
+
+<!--.forum-actions {-->
+<!--  margin-left: 20px;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--}-->
+
+<!--.tab-badge {-->
+<!--  margin-left: 8px;-->
+<!--}-->
+
+<!--/* 主要布局 */-->
+<!--.forum-main {-->
+<!--  max-width: 1200px;-->
+<!--  margin: 0 auto;-->
+<!--  display: grid;-->
+<!--  grid-template-columns: 1fr;-->
+<!--  gap: 20px;-->
+<!--  padding: 0 20px;-->
+<!--}-->
+
+<!--/* 搜索区域 */-->
+<!--.search-container {-->
+<!--  background: white;-->
+<!--  border-radius: 12px;-->
+<!--  padding: 20px;-->
+<!--  margin-bottom: 20px;-->
+<!--  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);-->
+<!--}-->
+
+<!--.search-header {-->
+<!--  display: flex;-->
+<!--  justify-content: space-between;-->
+<!--  align-items: center;-->
+<!--  margin-bottom: 20px;-->
+<!--}-->
+
+<!--.search-header h3 {-->
+<!--  margin: 0;-->
+<!--  color: #303133;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 8px;-->
+<!--}-->
+
+<!--.search-form .search-row {-->
+<!--  display: flex;-->
+<!--  gap: 10px;-->
+<!--  margin-bottom: 15px;-->
+<!--}-->
+
+<!--.search-form .search-main {-->
+<!--  flex: 1;-->
+<!--}-->
+
+<!--.search-form .search-btn {-->
+<!--  padding: 11px 25px;-->
+<!--}-->
+
+<!--.search-form .search-filters {-->
+<!--  display: flex;-->
+<!--  gap: 15px;-->
+<!--  flex-wrap: wrap;-->
+<!--}-->
+
+<!--.filter-select {-->
+<!--  width: 180px;-->
+<!--}-->
+
+<!--/* 文章列表通用样式 */-->
+<!--.articles-container {-->
+<!--  background: white;-->
+<!--  border-radius: 12px;-->
+<!--  padding: 20px;-->
+<!--  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);-->
+<!--}-->
+
+<!--.articles-header {-->
+<!--  display: flex;-->
+<!--  justify-content: space-between;-->
+<!--  align-items: center;-->
+<!--  margin-bottom: 20px;-->
+<!--  padding-bottom: 15px;-->
+<!--  border-bottom: 1px solid #ebeef5;-->
+<!--}-->
+
+<!--.articles-header h3 {-->
+<!--  margin: 0;-->
+<!--  color: #303133;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 8px;-->
+<!--}-->
+
+<!--.total-count {-->
+<!--  font-size: 14px;-->
+<!--  color: #909399;-->
+<!--  font-weight: normal;-->
+<!--}-->
+
+<!--.sort-options {-->
+<!--  display: flex;-->
+<!--  gap: 5px;-->
+<!--}-->
+
+<!--/* 我的文章专属样式 */-->
+<!--.my-article-container {-->
+<!--  width: 100%;-->
+<!--}-->
+<!--.sub-tab {-->
+<!--  margin-bottom: 20px;-->
+<!--}-->
+<!--.sub-tab >>> .el-tabs__content {-->
+<!--  display: none;-->
+<!--}-->
+<!--.my-article-list {-->
+<!--  margin-top: 0;-->
+<!--}-->
+<!--.del-btn {-->
+<!--  color: #f56c6c;-->
+<!--}-->
+
+<!--/* 文章卡片 */-->
+<!--.articles-list {-->
+<!--  display: flex;-->
+<!--  flex-direction: column;-->
+<!--  gap: 16px;-->
+<!--}-->
+
+<!--.article-card {-->
+<!--  background: white;-->
+<!--  border: 1px solid #ebeef5;-->
+<!--  border-radius: 8px;-->
+<!--  transition: all 0.3s;-->
+<!--  overflow: hidden;-->
+<!--}-->
+
+<!--.article-card:hover {-->
+<!--  border-color: #409EFF;-->
+<!--  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);-->
+<!--  transform: translateY(-2px);-->
+<!--}-->
+
+<!--.article-card.draft {-->
+<!--  opacity: 0.8;-->
+<!--  border-left: 4px solid #909399;-->
+<!--}-->
+
+<!--.article-content {-->
+<!--  padding: 20px;-->
+<!--}-->
+
+<!--.article-header {-->
+<!--  margin-bottom: 15px;-->
+<!--}-->
+
+<!--.article-title {-->
+<!--  font-size: 18px;-->
+<!--  font-weight: 600;-->
+<!--  color: #303133;-->
+<!--  margin-bottom: 8px;-->
+<!--  cursor: pointer;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 10px;-->
+<!--}-->
+
+<!--.article-title:hover {-->
+<!--  color: #409EFF;-->
+<!--}-->
+
+<!--.draft-tag {-->
+<!--  font-size: 10px;-->
+<!--  padding: 2px 6px;-->
+<!--}-->
+
+<!--.article-meta {-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 15px;-->
+<!--  font-size: 12px;-->
+<!--  color: #909399;-->
+<!--}-->
+
+<!--.article-meta i {-->
+<!--  margin-right: 5px;-->
+<!--}-->
+
+<!--.article-body {-->
+<!--  margin-bottom: 15px;-->
+<!--}-->
+
+<!--.article-summary {-->
+<!--  color: #606266;-->
+<!--  line-height: 1.6;-->
+<!--  margin: 0 0 12px 0;-->
+<!--  display: -webkit-box;-->
+<!--  -webkit-line-clamp: 2;-->
+<!--  -webkit-box-orient: vertical;-->
+<!--  overflow: hidden;-->
+<!--}-->
+
+<!--.article-tags {-->
+<!--  display: flex;-->
+<!--  flex-wrap: wrap;-->
+<!--  gap: 8px;-->
+<!--}-->
+
+<!--.category-tag {-->
+<!--  font-weight: 500;-->
+<!--}-->
+
+<!--.article-footer {-->
+<!--  display: flex;-->
+<!--  justify-content: space-between;-->
+<!--  align-items: center;-->
+<!--  padding-top: 15px;-->
+<!--  border-top: 1px solid #f0f0f0;-->
+<!--}-->
+
+<!--.article-stats {-->
+<!--  display: flex;-->
+<!--  gap: 15px;-->
+<!--}-->
+
+<!--.stat-item {-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 5px;-->
+<!--  font-size: 12px;-->
+<!--  color: #909399;-->
+<!--}-->
+
+<!--.article-actions {-->
+<!--  display: flex;-->
+<!--  gap: 5px;-->
+<!--}-->
+
+<!--.action-btn {-->
+<!--  padding: 5px 10px;-->
+<!--}-->
+
+<!--.action-btn.liked {-->
+<!--  color: #f56c6c;-->
+<!--}-->
+
+<!--.action-btn.collected {-->
+<!--  color: #e6a23c;-->
+<!--}-->
+
+<!--.action-btn.edit-btn {-->
+<!--  color: #67C23A;-->
+<!--}-->
+
+<!--/* 加载状态 */-->
+<!--.loading-container {-->
+<!--  text-align: center;-->
+<!--  padding: 40px;-->
+<!--  color: #909399;-->
+<!--  display: flex;-->
+<!--  flex-direction: column;-->
+<!--  align-items: center;-->
+<!--  gap: 10px;-->
+<!--}-->
+
+<!--.loading-container i {-->
+<!--  font-size: 24px;-->
+<!--  animation: rotate 1s linear infinite;-->
+<!--}-->
+
+<!--@keyframes rotate {-->
+<!--  from { transform: rotate(0deg); }-->
+<!--  to { transform: rotate(360deg); }-->
+<!--}-->
+
+<!--/* 空状态 */-->
+<!--.empty-container {-->
+<!--  text-align: center;-->
+<!--  padding: 60px 20px;-->
+<!--  color: #909399;-->
+<!--}-->
+
+<!--.empty-container i {-->
+<!--  font-size: 48px;-->
+<!--  margin-bottom: 15px;-->
+<!--  opacity: 0.5;-->
+<!--}-->
+
+<!--.empty-container p {-->
+<!--  margin: 0 0 20px 0;-->
+<!--  font-size: 14px;-->
+<!--}-->
+
+<!--/* 分页（使用2.vue的样式） */-->
+<!--.pagination-container {-->
+<!--  margin-top: 30px;-->
+<!--  display: flex;-->
+<!--  justify-content: center;-->
+<!--  padding-top: 20px;-->
+<!--  border-top: 1px solid #ebeef5;-->
+<!--}-->
+
+<!--/* 弹窗样式 */-->
+<!--.article-dialog >>> .el-dialog__header {-->
+<!--  border-bottom: 1px solid #ebeef5;-->
+<!--  padding: 15px 20px;-->
+<!--}-->
+
+<!--.article-dialog >>> .el-dialog__body {-->
+<!--  padding: 20px;-->
+<!--}-->
+
+<!--.article-dialog >>> .el-dialog__footer {-->
+<!--  border-top: 1px solid #ebeef5;-->
+<!--  padding: 15px 20px;-->
+<!--}-->
+
+<!--.editor-container {-->
+<!--  position: relative;-->
+<!--}-->
+
+<!--.editor-tips {-->
+<!--  margin-top: 10px;-->
+<!--  padding: 8px 12px;-->
+<!--  background: #f0f9ff;-->
+<!--  border-radius: 4px;-->
+<!--  color: #409EFF;-->
+<!--  font-size: 12px;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 8px;-->
+<!--}-->
+
+<!--.status-radio >>> .el-radio-group {-->
+<!--  width: 100%;-->
+<!--}-->
+
+<!--.status-radio >>> .el-radio {-->
+<!--  flex: 1;-->
+<!--  margin: 0;-->
+<!--}-->
+
+<!--.status-radio >>> .el-radio__inner {-->
+<!--  display: none;-->
+<!--}-->
+
+<!--.status-radio >>> .el-radio__label {-->
+<!--  padding-left: 0;-->
+<!--}-->
+
+<!--.status-radio >>> .el-radio.is-bordered {-->
+<!--  padding: 12px 20px;-->
+<!--  text-align: center;-->
+<!--  border-radius: 4px;-->
+<!--}-->
+
+<!--/* 详情弹窗 */-->
+<!--.detail-dialog {-->
+<!--  max-height: 80vh;-->
+<!--}-->
+
+<!--.detail-dialog >>> .el-dialog__body {-->
+<!--  max-height: calc(80vh - 100px);-->
+<!--  overflow-y: auto;-->
+<!--}-->
+
+<!--.detail-container {-->
+<!--  padding: 20px;-->
+<!--}-->
+
+<!--.detail-header {-->
+<!--  display: flex;-->
+<!--  justify-content: space-between;-->
+<!--  align-items: center;-->
+<!--  margin-bottom: 20px;-->
+<!--  padding-bottom: 20px;-->
+<!--  border-bottom: 1px solid #ebeef5;-->
+<!--}-->
+
+<!--.author-info {-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 15px;-->
+<!--}-->
+
+<!--.author-avatar {-->
+<!--  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-->
+<!--  color: white;-->
+<!--  font-weight: bold;-->
+<!--}-->
+
+<!--.author-meta .author-name {-->
+<!--  font-weight: 600;-->
+<!--  color: #303133;-->
+<!--  margin-bottom: 5px;-->
+<!--}-->
+
+<!--.author-meta .publish-time {-->
+<!--  font-size: 12px;-->
+<!--  color: #909399;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 5px;-->
+<!--}-->
+
+<!--.article-actions {-->
+<!--  display: flex;-->
+<!--  gap: 10px;-->
+<!--}-->
+
+<!--.article-info {-->
+<!--  display: flex;-->
+<!--  flex-wrap: wrap;-->
+<!--  align-items: center;-->
+<!--  gap: 10px;-->
+<!--  margin-bottom: 20px;-->
+<!--}-->
+
+<!--.view-count {-->
+<!--  margin-left: auto;-->
+<!--  font-size: 12px;-->
+<!--  color: #909399;-->
+<!--  display: flex;-->
+<!--  align-items: center;-->
+<!--  gap: 5px;-->
+<!--}-->
+
+<!--.article-summary-box {-->
+<!--  background: #f8f9fa;-->
+<!--  border-radius: 8px;-->
+<!--  padding: 20px;-->
+<!--  margin-bottom: 25px;-->
+<!--  border-left: 4px solid #409EFF;-->
+<!--}-->
+
+<!--.summary-title {-->
+<!--  font-weight: 600;-->
+<!--  color: #303133;-->
+<!--  margin-bottom: 10px;-->
+<!--}-->
+
+<!--.summary-content {-->
+<!--  color: #606266;-->
+<!--  line-height: 1.6;-->
+<!--}-->
+
+<!--.article-content-box {-->
+<!--  margin-bottom: 30px;-->
+<!--}-->
+
+<!--.content-title {-->
+<!--  font-weight: 600;-->
+<!--  color: #303133;-->
+<!--  margin-bottom: 15px;-->
+<!--  font-size: 18px;-->
+<!--  padding-bottom: 10px;-->
+<!--  border-bottom: 1px solid #ebeef5;-->
+<!--}-->
+
+<!--.content {-->
+<!--  line-height: 1.8;-->
+<!--  color: #303133;-->
+<!--}-->
+
+<!--.content >>> img {-->
+<!--  max-width: 100%;-->
+<!--  height: auto;-->
+<!--  border-radius: 8px;-->
+<!--  margin: 15px 0;-->
+<!--}-->
+
+<!--.content >>> p {-->
+<!--  margin: 15px 0;-->
+<!--}-->
+
+<!--.content >>> h1,-->
+<!--.content >>> h2,-->
+<!--.content >>> h3 {-->
+<!--  margin: 20px 0 10px 0;-->
+<!--  color: #303133;-->
+<!--}-->
+
+<!--/* 相关文章 */-->
+<!--.related-articles {-->
+<!--  margin-top: 30px;-->
+<!--}-->
+
+<!--.section-title {-->
+<!--  font-weight: 600;-->
+<!--  color: #303133;-->
+<!--  margin-bottom: 15px;-->
+<!--  font-size: 16px;-->
+<!--  padding-bottom: 10px;-->
+<!--  border-bottom: 1px solid #ebeef5;-->
+<!--}-->
+
+<!--.related-list {-->
+<!--  display: grid;-->
+<!--  gap: 12px;-->
+<!--}-->
+
+<!--.related-item {-->
+<!--  padding: 15px;-->
+<!--  border: 1px solid #ebeef5;-->
+<!--  border-radius: 8px;-->
+<!--  cursor: pointer;-->
+<!--  transition: all 0.3s;-->
+<!--}-->
+
+<!--.related-item:hover {-->
+<!--  border-color: #409EFF;-->
+<!--  background: #f0f9ff;-->
+<!--  transform: translateX(5px);-->
+<!--}-->
+
+<!--.related-title {-->
+<!--  font-weight: 500;-->
+<!--  color: #303133;-->
+<!--  margin-bottom: 8px;-->
+<!--  display: -webkit-box;-->
+<!--  -webkit-line-clamp: 2;-->
+<!--  -webkit-box-orient: vertical;-->
+<!--  overflow: hidden;-->
+<!--}-->
+
+<!--.related-meta {-->
+<!--  display: flex;-->
+<!--  justify-content: space-between;-->
+<!--  font-size: 12px;-->
+<!--  color: #909399;-->
+<!--}-->
+
+<!--.related-meta i {-->
+<!--  margin-right: 3px;-->
+<!--}-->
+
+<!--/* 响应式设计：适配手机端，统计项自动换行 */-->
+<!--@media (max-width: 768px) {-->
+<!--  .forum-main {-->
+<!--    grid-template-columns: 1fr;-->
+<!--  }-->
+
+<!--  .statistics-section {-->
+<!--    width: 100%;-->
+<!--    flex-wrap: wrap;-->
+<!--    justify-content: center;-->
+<!--    gap: 15px;-->
+<!--  }-->
+
+<!--  .stat-divider {-->
+<!--    display: none; /* 手机端隐藏分割线，用间距分隔 */-->
+<!--  }-->
+
+<!--  .stat-item {-->
+<!--    padding: 0 15px;-->
+<!--  }-->
+
+<!--  .tabs-header {-->
+<!--    flex-direction: column;-->
+<!--    align-items: flex-start;-->
+<!--    gap: 10px;-->
+<!--  }-->
+
+<!--  .forum-actions {-->
+<!--    margin-left: 0;-->
+<!--    align-self: flex-end;-->
+<!--  }-->
+
+<!--  .search-form .search-filters {-->
+<!--    flex-direction: column;-->
+<!--  }-->
+
+<!--  .filter-select {-->
+<!--    width: 100%;-->
+<!--  }-->
+
+<!--  .article-footer {-->
+<!--    flex-direction: column;-->
+<!--    gap: 15px;-->
+<!--  }-->
+
+<!--  .article-actions {-->
+<!--    width: 100%;-->
+<!--    justify-content: center;-->
+<!--  }-->
+
+<!--  .sub-tab >>> .el-tabs__nav {-->
+<!--    display: flex;-->
+<!--    flex-wrap: wrap;-->
+<!--  }-->
+<!--}-->
+<!--</style>-->
diff --git a/chenhai-ui/src/views/vet/info/index.vue b/chenhai-ui/src/views/vet/info/index.vue
index 7791f3c..11c4092 100644
--- a/chenhai-ui/src/views/vet/info/index.vue
+++ b/chenhai-ui/src/views/vet/info/index.vue
@@ -446,6 +446,7 @@ export default {
         this.$message.error('获取详情失败')
       })
     },
+
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
diff --git a/chenhai-ui/src/views/vet/qualification/index.vue b/chenhai-ui/src/views/vet/qualification/index.vue
index f35ea29..773fd98 100644
--- a/chenhai-ui/src/views/vet/qualification/index.vue
+++ b/chenhai-ui/src/views/vet/qualification/index.vue
@@ -18,21 +18,36 @@
         />
       </el-form-item>
       <el-form-item label="资质类型" prop="qualificationType">
-        <el-input
+        <el-select
           v-model="queryParams.qualificationType"
-          placeholder="请输入资质类型"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="证书编号" prop="certificateNo">
-        <el-input
-          v-model="queryParams.certificateNo"
-          placeholder="请输入证书编号"
-          clearable
+          placeholder="请选择资质类型"
+          style="width: 100%;"
           @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option
+            v-for="dict in dict.type.qualification_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
+<!--      <el-form-item label="资质类型" prop="qualificationType">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.qualificationType"-->
+<!--          placeholder="请输入资质类型"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="证书编号" prop="certificateNo">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.certificateNo"-->
+<!--          placeholder="请输入证书编号"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />-->
+<!--      </el-form-item>-->
       <el-form-item label="审核状态" prop="auditStatus">
         <el-select v-model="queryParams.auditStatus" placeholder="审核状态" clearable style="width: 100px">
           <el-option
@@ -82,58 +97,81 @@
           v-hasPermi="['vet:qualification:remove']"
         >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['vet:qualification:export']"
-        >导出</el-button>
-      </el-col>
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          type="warning"-->
+      <!--          plain-->
+      <!--          icon="el-icon-download"-->
+      <!--          size="mini"-->
+      <!--          @click="handleExport"-->
+      <!--          v-hasPermi="['vet:qualification:export']"-->
+      <!--        >导出</el-button>-->
+      <!--      </el-col>-->
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="qualificationList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="资质ID" align="center" prop="qualificationId" v-if="false" />
-      <el-table-column label="真实姓名" align="center" prop="realName" />
-      <el-table-column label="身份证号" align="center" prop="idCard" />
-      <el-table-column label="资质类型" align="center" prop="qualificationType" width="120">
-        <template slot-scope="scope">
-          <span>{{ formatQualificationType(scope.row.qualificationType) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="证书编号" align="center" prop="certificateNo" />
-
-      <!-- 新增的证书字段 -->
-      <el-table-column label="证书名称" align="center" prop="certName" width="150">
-        <template slot-scope="scope">
-          <span v-if="scope.row.certName">{{ scope.row.certName }}</span>
-          <span v-else style="color: #909399">-</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="发证机构" align="center" prop="issueOrg" width="150">
+      <!--      <el-table-column label="资质ID" align="center" prop="qualificationId" v-if="false" />-->
+      <!--      <el-table-column label="真实姓名" align="center" prop="realName" />-->
+      <!--      <el-table-column label="身份证号" align="center" prop="idCard" />-->
+      <el-table-column label="真实姓名" align="center" prop="realName" width="150">
         <template slot-scope="scope">
-          <span v-if="scope.row.issueOrg">{{ scope.row.issueOrg }}</span>
+          <span v-if="scope.row.realName">{{ scope.row.realName }}</span>
           <span v-else style="color: #909399">-</span>
         </template>
       </el-table-column>
-      <el-table-column label="到期日期" align="center" prop="expireDate" width="180">
+      <el-table-column label="身份证号" align="center" prop="idCard" width="150">
         <template slot-scope="scope">
-          <span v-if="scope.row.expireDate">{{ parseTime(scope.row.expireDate, '{y}-{m}-{d}') }}</span>
+          <span v-if="scope.row.idCard">{{ scope.row.idCard }}</span>
           <span v-else style="color: #909399">-</span>
         </template>
       </el-table-column>
-      <el-table-column label="证书状态" align="center" prop="certStatus" width="100">
+      <el-table-column label="资质类型" align="center" prop="qualificationType" width="120">
         <template slot-scope="scope">
-          <el-tag :type="getCertStatusType(scope.row.certStatus)" size="small">
-            {{ getCertStatusLabel(scope.row.certStatus) }}
-          </el-tag>
+          <span>{{ formatQualificationType(scope.row.qualificationType) }}</span>
         </template>
       </el-table-column>
-
+      <!--      <el-table-column label="证书编号" align="center" prop="certificateNo" />-->
+      <!--      <el-table-column label="证书编号" align="center" prop="certificateNo" width="150">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <span v-if="scope.row.certificateNo">{{ scope.row.certificateNo }}</span>-->
+      <!--          <span v-else style="color: #909399">-</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      &lt;!&ndash; 新增的证书字段 &ndash;&gt;-->
+      <!--      <el-table-column label="证书名称" align="center" prop="certName" width="150">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <span v-if="scope.row.certName">{{ scope.row.certName }}</span>-->
+      <!--          <span v-else style="color: #909399">-</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="发证机构" align="center" prop="issueOrg" width="150">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <span v-if="scope.row.issueOrg">{{ scope.row.issueOrg }}</span>-->
+      <!--          <span v-else style="color: #909399">-</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="证书文件" prop="certificateFiles">-->
+      <!--        <template slot-scope="scope">-->
+      <!--&lt;!&ndash;          <span v-if="scope.row.certificateFiles">{{ scope.row.certificateFiles }}</span>&ndash;&gt;-->
+      <!--          <span v-if="scope.row.certificateFiles">{{ getImageUrl(scope.row.certificateFiles) }}</span>-->
+      <!--          <span v-else style="color: #909399">-</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="到期日期" align="center" prop="expireDate" width="180">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <span v-if="scope.row.expireDate">{{ parseTime(scope.row.expireDate, '{y}-{m}-{d}') }}</span>-->
+      <!--          <span v-else style="color: #909399">-</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="证书状态" align="center" prop="certStatus" width="100">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <el-tag :type="getCertStatusType(scope.row.certStatus)" size="small">-->
+      <!--            {{ getCertStatusLabel(scope.row.certStatus) }}-->
+      <!--          </el-tag>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
       <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
         <template slot-scope="scope">
           <span v-if="scope.row.applyTime">{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
@@ -163,41 +201,62 @@
             icon="el-icon-view"
             @click="handleView(scope.row)"
             v-hasPermi="['vet:qualification:query']"
-          >查看</el-button>
+          >查看证书详情</el-button>
 
           <!-- 修改按钮 -->
-          <el-button
-            v-if="!scope.row.auditStatus || scope.row.auditStatus === '0' || scope.row.auditStatus === '2'"
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            style="color: #42B983"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['vet:qualification:edit']"
-          >修改</el-button>
+          <!--          <el-button-->
+          <!--            v-if="!scope.row.auditStatus || scope.row.auditStatus === '0' || scope.row.auditStatus === '2'"-->
+          <!--            size="mini"-->
+          <!--            type="text"-->
+          <!--            icon="el-icon-edit"-->
+          <!--            style="color: #42B983"-->
+          <!--            @click="handleUpdate(scope.row)"-->
+          <!--            v-hasPermi="['vet:qualification:edit']"-->
+          <!--          >修改</el-button>-->
 
           <!-- 提交/重新提交按钮 -->
-          <el-button
-            v-if="!scope.row.auditStatus || scope.row.auditStatus === '2'"
-            size="mini"
-            type="text"
-            icon="el-icon-s-check"
-            style="color: #409EFF"
-            @click="handleSubmitAudit(scope.row)"
-            v-hasPermi="['vet:qualification:edit']"
-          >{{ !scope.row.auditStatus ? '提交审核' : '重新提交' }}</el-button>
+          <!--          <el-button-->
+          <!--            v-if="!scope.row.auditStatus || scope.row.auditStatus === '2'"-->
+          <!--            size="mini"-->
+          <!--            type="text"-->
+          <!--            icon="el-icon-s-check"-->
+          <!--            style="color: #409EFF"-->
+          <!--            @click="handleSubmitAudit(scope.row)"-->
+          <!--            v-hasPermi="['vet:qualification:edit']"-->
+          <!--          >{{ !scope.row.auditStatus ? '提交审核' : '重新提交' }}</el-button>-->
+
+          <!-- 下架按钮：已上架状态显示 -->
+          <!--          <el-button-->
+          <!--            v-if="scope.row.auditStatus === '1'"-->
+          <!--            size="mini"-->
+          <!--            type="text"-->
+          <!--            icon="el-icon-bottom"-->
+          <!--            style="color: #E6A23C"-->
+          <!--            @click="handleUnshelf(scope.row)"-->
+          <!--            v-hasPermi="['vet:qualification:unshelf']"-->
+          <!--          >下架</el-button>-->
 
+          <!-- 上架按钮：已下架状态显示 -->
+          <!--          <el-button-->
+          <!--            v-if="scope.row.auditStatus === '3'"-->
+          <!--            size="mini"-->
+          <!--            type="text"-->
+          <!--            icon="el-icon-top"-->
+          <!--            style="color: #67C23A"-->
+          <!--            @click="handleShelf(scope.row)"-->
+          <!--            v-hasPermi="['vet:qualification:shelf']"-->
+          <!--          >上架</el-button>-->
 
           <!-- 删除按钮 -->
-          <el-button
-            v-if="!scope.row.auditStatus || scope.row.auditStatus === '2'"
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            style="color: #f56c6c"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['vet:qualification:remove']"
-          >删除</el-button>
+          <!--          <el-button-->
+          <!--            v-if="!scope.row.auditStatus || scope.row.auditStatus === '2'"-->
+          <!--            size="mini"-->
+          <!--            type="text"-->
+          <!--            icon="el-icon-delete"-->
+          <!--            style="color: #f56c6c"-->
+          <!--            @click="handleDelete(scope.row)"-->
+          <!--            v-hasPermi="['vet:qualification:remove']"-->
+          <!--          >删除</el-button>-->
         </template>
       </el-table-column>
     </el-table>
@@ -210,26 +269,141 @@
       @pagination="getList"
     />
 
+    <!--  显示资质证书信息  -->
+    <el-dialog :title="title" :visible.sync="openDetail" width="800px" append-to-body>
+      <div v-if="detailData" style="padding: 20px;">
+        <div style="margin-top: 30px;">
+          <el-alert
+            v-if="!certificateList || certificateList.length === 0"
+            title="暂无资质证书"
+            type="info"
+            :closable="false"
+            style="margin-bottom: 20px;"
+          />
+
+          <el-table v-else :data="certificateList" border style="width: 100%">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column prop="certificateNo" label="证书编号" align="center" width="200">
+              <template slot-scope="scope">
+                <span>{{ scope.row.certificateNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="certName" label="证书名称" align="center" width="180">
+              <template slot-scope="scope">
+                <span>{{ scope.row.certName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="发证机构" align="center" prop="issueOrg" width="150">
+              <template slot-scope="scope">
+                <span v-if="scope.row.issueOrg">{{ scope.row.issueOrg }}</span>
+                <span v-else style="color: #909399">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="证书文件" prop="certificateFiles">
+              <template slot-scope="scope">
+                <span v-if="scope.row.certificateFiles">
+                  <template v-if="isImageFile(scope.row.certificateFiles)">
+                    <el-button
+                      type="text"
+                      icon="el-icon-view"
+                      @click="previewCertificate(scope.row.certificateFiles)"
+                      style="color: #409EFF;"
+                    >
+                    </el-button>
+                  </template>
+                  <template v-else-if="isPdfFile(scope.row.certificateFiles)">
+                    <el-button
+                      type="text"
+                      icon="el-icon-download"
+                      @click="downloadFile(scope.row.certificateFiles)"
+                      style="color: #287c07;"
+                    >
+                    </el-button>
+                  </template>
+                  <template v-else>
+                    {{ getImageUrl(scope.row.certificateFiles) }}
+                  </template>
+                </span>
+                <span v-else style="color: #909399">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="issueDate" label="发证日期" align="center" width="120">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.issueDate, '{y}-{m}-{d}') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="expireDate" label="到期日期" align="center" width="120">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.expireDate, '{y}-{m}-{d}') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="证书状态" align="center" prop="certStatus" width="100">
+              <template slot-scope="scope">
+                <el-tag :type="getCertStatusType(scope.row.certStatus)" size="small">
+                  {{ getCertStatusLabel(scope.row.certStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="300">
+              <template slot-scope="scope">
+              <!--  修改按钮  -->
+                <el-button
+                  v-if="!scope.row.auditStatus || scope.row.auditStatus === '0' || scope.row.auditStatus === '2'"
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  style="color: #42B983"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['vet:qualification:edit']"
+                >修改</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeDetail">关 闭</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="previewDialogVisible" width="60%" append-to-body>
+      <div style="text-align: center; padding: 20px;">
+        <img
+          :src="getImageUrl(previewFileUrl)"
+          style="max-width: 100%; max-height: 70vh; height: auto;"
+          preview-teleported
+          :preview-src-list="[getImageUrl(previewFileUrl)]"
+        />
+      </div>
+    </el-dialog>
+
+
     <!-- 添加或修改兽医资质对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="真实姓名" prop="realName">
-          <el-input v-model="form.realName" placeholder="请输入真实姓名" />
-        </el-form-item>
-        <el-form-item label="身份证号" prop="idCard">
-          <el-input v-model="form.idCard" placeholder="请输入身份证号" />
-        </el-form-item>
-        <el-form-item label="资质类型" prop="qualificationType">
-          <el-select v-model="form.qualificationType" placeholder="请选择资质类型" style="width: 100%">
-            <el-option label="兽医资格证" value="veterinarian" />
-            <el-option label="兽药师资格证" value="pharmacist" />
-          </el-select>
-        </el-form-item>
+        <!--        <el-form-item label="真实姓名" prop="realName">-->
+        <!--          <el-input v-model="form.realName" placeholder="请输入真实姓名" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="身份证号" prop="idCard">-->
+        <!--          <el-input v-model="form.idCard" placeholder="请输入身份证号" />-->
+        <!--        </el-form-item>-->
+<!--        <el-form-item label="资质类型" prop="qualificationType">-->
+<!--          <el-select-->
+<!--            v-model="form.qualificationType"-->
+<!--            placeholder="请选择资质类型"-->
+<!--            style="width: 100%;"-->
+<!--          >-->
+<!--            <el-option-->
+<!--              v-for="dict in dict.type.qualification_type"-->
+<!--              :key="dict.value"-->
+<!--              :label="dict.label"-->
+<!--              :value="dict.value"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
         <el-form-item label="证书编号" prop="certificateNo">
           <el-input v-model="form.certificateNo" placeholder="请输入证书编号" />
         </el-form-item>
-
-        <!-- 新增的证书字段 -->
         <el-form-item label="证书名称" prop="certName">
           <el-input v-model="form.certName" placeholder="请输入证书名称" />
         </el-form-item>
@@ -254,22 +428,26 @@
                           style="width: 100%">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="证书图片" prop="certImage">
-          <image-upload v-model="form.certImage"/>
+<!--        <el-form-item label="证书图片" prop="certImage">-->
+<!--          <image-upload v-model="form.certImage"/>-->
+<!--        </el-form-item>-->
+        <el-form-item label="证书文件" prop="certificateFiles">
+<!--&lt;!&ndash;          <el-input v-model="form.certificateFiles" type="textarea" placeholder="请输入内容" />&ndash;&gt;-->
+          <file-upload
+            v-model="form.certificateFiles"
+            :limit="1"
+            :file-type="['pdf','png','jpg','jpeg']"
+          />
         </el-form-item>
         <el-form-item label="提前提醒天数" prop="remindDays">
           <el-input v-model="form.remindDays" placeholder="请输入提前提醒天数" />
         </el-form-item>
-
-        <el-form-item label="证书文件" prop="certificateFiles">
-          <el-input v-model="form.certificateFiles" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button type="primary" @click="resubmitForm">重新提交审核</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -277,16 +455,19 @@
 </template>
 
 <script>
-import { listQualification, getQualification, delQualification, addQualification, updateQualification } from "@/api/vet/qualification"
-import { submitQualification } from "@/api/vet/qualification"
+import { listQualification, getQualificationCertificate, delQualification, getQualificationCertificates, updateAndSubmitQualification} from "@/api/vet/qualification"
 
 export default {
   name: "Qualification",
-  dicts: ['qualification_shenhe', 'expert_type'],
+  dicts: ['qualification_shenhe', 'expert_type', 'qualification_type'],
   data() {
     return {
+      baseUrl: process.env.VUE_APP_BASE_API,
+      // 待预览的证书文件路径
+      previewFileUrl: '',
       // 遮罩层
       loading: true,
+      detailLoading: true,
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -299,10 +480,16 @@ export default {
       total: 0,
       // 兽医资质表格数据
       qualificationList: [],
+      // 资质证书列表
+      certificateList: [],
+      // 详情数据
+      detailData: null,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
       open: false,
+      openDetail: false,
+      previewDialogVisible: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -321,18 +508,33 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        realName: [
-          { required: true, message: "真实姓名不能为空", trigger: "blur" }
+        // realName: [
+        //   { required: true, message: "真实姓名不能为空", trigger: "blur" }
+        // ],
+        // idCard: [
+        //   { required: true, message: "身份证号不能为空", trigger: "blur" }
+        // ],
+        // qualificationType: [
+        //   { required: true, message: "资质类型不能为空", trigger: "change" }
+        // ],
+        certificateNo: [
+          { required: true, message: "证书编号不能为空", trigger: "blur" }
         ],
-        idCard: [
-          { required: true, message: "身份证号不能为空", trigger: "blur" }
+        certName: [
+          { required: true, message: "证书名称不能为空", trigger: "blur" }
         ],
-        qualificationType: [
-          { required: true, message: "资质类型不能为空", trigger: "change" }
+        issueOrg: [
+          { required: true, message: "发证机构不能为空", trigger: "blur" }
+        ],
+        issueDate: [
+          { required: true, message: "发证日期不能为空", trigger: "change" }
+        ],
+        expireDate: [
+          { required: true, message: "到期日期不能为空", trigger: "change" }
+        ],
+        certificateFiles: [
+          { required: true, message: "证书文件不能为空", trigger: "blur" }
         ],
-        certificateNo: [
-          { required: true, message: "证书编号不能为空", trigger: "blur" }
-        ]
       }
     }
   },
@@ -373,109 +575,297 @@ export default {
     /** 获取审核状态标签类型 */
     getAuditStatusType(status) {
       const map = {
-        '0': 'primary',     // 待审核 - 蓝色
+        '0': 'info',     // 待审核 - 蓝色
         '1': 'success',  // 已上架 - 绿色
         '2': 'danger',   // 已拒绝 - 红色
-
+        '3': 'warning'   // 已下架 - 黄色
       }
       return map[status] || 'info'
     },
 
     /** 格式化资质类型显示 */
-    formatQualificationType(value) {
-      if (value === 'veterinarian') return '兽医资格证'
-      if (value === 'pharmacist') return '兽药师资格证'
-      return value
+    formatQualificationType(status) {
+      const map = {
+        '1': '执业兽医师',
+        '2': '执业助理兽医',
+        '3': '官方兽医',
+        '4': '乡村兽医'
+      }
+      return map[status] || 'info'
+    },
+
+    /** 获取完整的图片URL */
+    getImageUrl(filePath) {
+      return `${this.baseUrl}${filePath}`
+    },
+
+    isImageFile(filePath) {
+      if (!filePath) return false;
+      const imageExts = ['.png','.jpg','.jpeg'];
+      const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase();
+      return imageExts.includes(ext);
+    },
+
+    /** 判断是否为PDF文件 */
+    isPdfFile(filePath) {
+      if (!filePath) return false;
+      const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase();
+      return ext === '.pdf';
+    },
+
+    /** 预览图片 */
+    previewCertificate(filePath) {
+      this.previewFileUrl = filePath;
+      this.previewDialogVisible = true;
+    },
+
+    /** 下载文件 */
+    downloadFile(filePath) {
+      const fullUrl = this.getImageUrl(filePath);
+      const link = document.createElement('a');
+      link.href = fullUrl;
+
+      const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
+      link.download = fileName;
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      this.$modal.msgSuccess('开始下载文件');
     },
 
+    /** 下架操作 */
+    // handleUnshelf(row) {
+    //   this.$prompt('请输入下架原因', '下架确认', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     inputPlaceholder: '请输入下架原因（如：证书过期、违规操作等）',
+    //     inputValidator: (value) => {
+    //       if (!value || value.trim().length < 2) {
+    //         return '下架原因不能少于2个字'
+    //       }
+    //       if (value.trim().length > 200) {
+    //         return '下架原因不能超过200字'
+    //       }
+    //       return true
+    //     }
+    //   }).then(({ value }) => {
+    //     this.loading = true
+    //     unshelfQualification(row.qualificationId, value).then(response => {
+    //       this.loading = false
+    //       if (response.code === 200) {
+    //         this.$modal.msgSuccess('下架成功')
+    //         this.getList() // 刷新列表
+    //       } else {
+    //         this.$modal.msgError(response.msg || '下架失败')
+    //       }
+    //     }).catch(error => {
+    //       this.loading = false
+    //       this.$modal.msgError(error.msg || '下架失败')
+    //     })
+    //   }).catch(() => {
+    //     // 用户取消操作
+    //   })
+    // },
 
+    /** 上架操作 */
+    // handleShelf(row) {
+    //   this.$confirm('确认要上架此资质吗？', '上架确认', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   }).then(() => {
+    //     this.loading = true
+    //     shelfQualification(row.qualificationId).then(response => {
+    //       this.loading = false
+    //       if (response.code === 200) {
+    //         this.$modal.msgSuccess('上架成功')
+    //         this.getList() // 刷新列表
+    //       } else {
+    //         this.$modal.msgError(response.msg || '上架失败')
+    //       }
+    //     }).catch(error => {
+    //       this.loading = false
+    //       this.$modal.msgError(error.msg || '上架失败')
+    //     })
+    //   }).catch(() => {
+    //     // 用户取消操作
+    //   })
+    // },
 
     /** 提交审核操作 */
-    handleSubmitAudit(row) {
-      this.$modal.confirm('确认提交 "' + row.realName + '" 的资质进行审核？').then(() => {
-        // 准备提交数据
-        const submitData = {
-          qualificationId: row.qualificationId,
-          realName: row.realName,
-          idCard: row.idCard,
-          qualificationType: row.qualificationType,
-          certificateNo: row.certificateNo,
-          certName: row.certName,
-          issueOrg: row.issueOrg,
-          issueDate: row.issueDate,
-          expireDate: row.expireDate,
-          certImage: row.certImage,
-          certificateFiles: row.certificateFiles,
-          remark: row.remark,
-          // 提交审核时设置审核状态为待审核(0)
-          auditStatus: '0'
-        }
+    // handleSubmitAudit(row) {
+    //   this.$modal.confirm('确认提交 "' + row.realName + '" 的资质进行审核？').then(() => {
+    //     // 准备提交数据
+    //     const submitData = {
+    //       qualificationId: row.qualificationId,
+    //       realName: row.realName,
+    //       idCard: row.idCard,
+    //       qualificationType: row.qualificationType,
+    //       certificateNo: row.certificateNo,
+    //       certName: row.certName,
+    //       issueOrg: row.issueOrg,
+    //       issueDate: row.issueDate,
+    //       expireDate: row.expireDate,
+    //       certImage: row.certImage,
+    //       certificateFiles: row.certificateFiles,
+    //       remark: row.remark,
+    //       // 提交审核时设置审核状态为待审核(0)
+    //       auditStatus: '0'
+    //     }
+    //
+    //     return submitQualification(submitData)
+    //   }).then(response => {
+    //     if (response.code === 200) {
+    //       this.$modal.msgSuccess("提交审核成功")
+    //       this.getList()
+    //     } else {
+    //       this.$modal.msgError(response.msg || "提交审核失败")
+    //     }
+    //   }).catch(() => {
+    //   })
+    // },
 
-        return submitQualification(submitData)
-      }).then(response => {
-        if (response.code === 200) {
-          this.$modal.msgSuccess("提交审核成功")
-          this.getList()
-        } else {
-          this.$modal.msgError(response.msg || "提交审核失败")
+    /** 重新提交审核 */
+    resubmitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          let certId = this.form.certId || this.form.certificateId || this.form.id
+          if (certId && typeof certId === 'object') {
+            certId = certId.value || certId.id || certId.certificateId
+          }
+          certId = String(certId || '')
+          if (!certId || certId === 'null' || certId === 'undefined' || certId === 'NaN') {
+            this.$modal.msgError("证书ID无效：" + certId)
+            return
+          }
+
+          const submitData = {
+            certId: certId,
+            qualificationId: this.form.qualificationId,
+            realName: this.form.realName,
+            idCard: this.form.idCard,
+            qualificationType: this.form.qualificationType,
+            certificateNo: this.form.certificateNo,
+            certName: this.form.certName,
+            issueOrg: this.form.issueOrg,
+            issueDate: this.form.issueDate,
+            expireDate: this.form.expireDate,
+            certificateFiles: this.form.certificateFiles,
+            remark: this.form.remark,
+            auditStatus: '0',
+            auditOpinion: null,
+            applyTime: new Date().toISOString(),
+          }
+
+          updateAndSubmitQualification(submitData).then(response => {
+            if (response.code === 200) {
+              this.$modal.msgSuccess("重新提交审核成功")
+              this.open = false
+              this.getList()
+
+              if (this.openDetail && this.detailData && this.detailData.qualificationId) {
+                getQualificationCertificates(this.detailData.qualificationId).then(response => {
+                  if (response.code === 200) {
+                    this.certificateList = response.rows || [];
+                    const updatedCertificate = this.certificateList.find(cert =>
+                      cert.certificateId === certId || cert.certId === certId
+                    );
+                    if (updatedCertificate) {
+                      this.certificateList = this.certificateList.map(cert => {
+                        if (cert.certificateId === certId || cert.certId === certId) {
+                          return {
+                            ...cert,
+                            auditStatus: '0',
+                            applyTime: new Date().toISOString(),
+                            auditTime: null,
+                            auditOpinion: null
+                          }
+                        }
+                        return cert;
+                      });
+                    }
+                  }
+                })
+              }
+              this.reset()
+            } else {
+              this.$modal.msgError(response.msg || "重新提交审核失败")
+            }
+          })
         }
-      }).catch(() => {})
+      })
     },
 
     /** 查看详情 */
-    handleView(row) {
-      // 构建详情内容
-      let detailContent = `
-        <table style="width:100%; border-collapse: collapse;">
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">姓名：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.realName || '-'}</td>
-          </tr>
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">身份证：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.idCard || '-'}</td>
-          </tr>
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">证书编号：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.certificateNo || '-'}</td>
-          </tr>
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">证书名称：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.certName || '-'}</td>
-          </tr>
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">发证机构：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.issueOrg || '-'}</td>
-          </tr>
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">到期日期：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.expireDate ? this.parseTime(row.expireDate, '{y}-{m}-{d}') : '-'}</td>
-          </tr>
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">证书状态：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${this.getCertStatusLabel(row.certStatus)}</td>
-          </tr>
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">审核状态：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${this.getDictLabel('qualification_shenhe', row.auditStatus) || '-'}</td>
-          </tr>`
-
-      // 如果有审核意见，添加审核意见
-      if (row.auditOpinion) {
-        detailContent += `
-          <tr>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">审核意见：</td>
-            <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.auditOpinion}</td>
-          </tr>`
-      }
+    // handleView(row) {
+    //   // 构建详情内容
+    //   let detailContent = `
+    //     <table style="width:100%; border-collapse: collapse;">
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">姓名：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.realName || '-'}</td>
+    //       </tr>
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">身份证：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.idCard || '-'}</td>
+    //       </tr>
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">证书编号：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.certificateNo || '-'}</td>
+    //       </tr>
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">证书名称：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.certName || '-'}</td>
+    //       </tr>
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">发证机构：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.issueOrg || '-'}</td>
+    //       </tr>
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">到期日期：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.expireDate ? this.parseTime(row.expireDate, '{y}-{m}-{d}') : '-'}</td>
+    //       </tr>
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">证书状态：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${this.getCertStatusLabel(row.certStatus)}</td>
+    //       </tr>
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">审核状态：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${this.getDictLabel('qualification_shenhe', row.auditStatus) || '-'}</td>
+    //       </tr>`
+    //
+    //   // 如果有审核意见，添加审核意见
+    //   if (row.auditOpinion) {
+    //     detailContent += `
+    //       <tr>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee; color: #666;">审核意见：</td>
+    //         <td style="padding:8px 5px; border-bottom: 1px solid #eee;">${row.auditOpinion}</td>
+    //       </tr>`
+    //   }
+    //
+    //   detailContent += `</table>`
+    //
+    //   this.$alert(detailContent, '资质详情', {
+    //     dangerouslyUseHTMLString: true,
+    //     confirmButtonText: '关闭',
+    //     width: '550px',
+    //     customClass: 'qualification-detail-dialog'
+    //   })
+    // },
 
-      detailContent += `</table>`
-
-      this.$alert(detailContent, '资质详情', {
-        dangerouslyUseHTMLString: true,
-        confirmButtonText: '关闭',
-        width: '550px',
-        customClass: 'qualification-detail-dialog'
+    /** 资质证书详情 */
+    handleView(row) {
+      this.openDetail = true
+      this.detailData = row
+      this.title = "资质证书详情"
+      this.certificateList = []
+      this.detailLoading = true
+      getQualificationCertificates(row.qualificationId).then(response => {
+        this.detailLoading = false
+        if (response.code === 200) {
+          this.certificateList = response.rows || [];
+        }
       })
     },
 
@@ -485,6 +875,12 @@ export default {
       this.reset()
     },
 
+    // 关闭按钮
+    closeDetail(){
+      this.openDetail = false
+      this.reset()
+    },
+
     // 表单重置
     reset() {
       this.form = {
@@ -546,36 +942,53 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset()
-      const qualificationId = row.qualificationId || this.ids
-      getQualification(qualificationId).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = "修改兽医资质"
-      })
-    },
+      let certId = row.certId || row.certificateId || row.id
+      if (certId && typeof certId === 'object') {
+        certId = certId.value || certId.id || certId.certificateId
+      }
+      certId = String(certId || '')
 
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.qualificationId != null) {
-            updateQualification(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
-              this.open = false
-              this.getList()
-            })
-          } else {
-            this.form.auditStatus = null
-            addQualification(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
-          }
+      if (!certId || certId === 'null' || certId === 'undefined' || certId === 'NaN') {
+        this.$modal.msgError("证书ID无效：" + certId)
+        return
+      }
+
+      getQualificationCertificate(certId).then(response => {
+        if (response.code === 200 && response.data) {
+          this.form = response.data
+          this.open = true
+          this.title = "修改兽医资质证书信息"
+        } else {
+          this.$modal.msgError(response.msg || "获取证书信息失败")
         }
+      }).catch(error => {
+        console.error('获取证书信息失败:', error)
+        this.$modal.msgError("获取证书信息失败")
       })
     },
 
+    /** 提交按钮 */
+    // submitForm() {
+    //   this.$refs["form"].validate(valid => {
+    //     if (valid) {
+    //       if (this.form.qualificationId != null) {
+    //         updateQualification(this.form).then(response => {
+    //           this.$modal.msgSuccess("修改成功")
+    //           this.open = false
+    //           this.getList()
+    //         })
+    //       } else {
+    //         this.form.auditStatus = null
+    //         addQualification(this.form).then(response => {
+    //           this.$modal.msgSuccess("新增成功")
+    //           this.open = false
+    //           this.getList()
+    //         })
+    //       }
+    //     }
+    //   })
+    // },
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const qualificationIds = row.qualificationId || this.ids