From 698f27372dad7c9b57506b012420072941c3ef71 Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Wed, 8 Oct 2025 20:00:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 management/src/components/ArticlePublish.vue  | 183 ++-----
 management/src/router/index.ts                |   6 +-
 .../src/views/community/CommunityView.vue     | 499 ++++++++++++++++++
 management/src/views/news/NewsView.vue        | 246 ++++++---
 management/src/views/publish/QuillEditor.vue  |  22 +-
 .../src/views/resource/ResourceView.vue       | 498 +++++++++++++++++
 .../handler/article/deletearticlehandler.go   |  40 +-
 .../handler/article/listarticlehandler.go     |   2 +-
 .../handler/article/updatearticlehandler.go   |  36 +-
 .../logic/article/deletearticlelogic.go       |  27 +-
 .../logic/article/listarticlelogic.go         |   7 +-
 .../logic/article/updatearticlelogic.go       |  33 +-
 .../internal/model/articlemodel_gen.go        |  53 +-
 .../internal/article/internal/types/types.go  |   5 +-
 web/package-lock.json                         | 379 +++++++++++++
 web/package.json                              |   1 +
 web/src/App.vue                               |  84 +--
 web/src/assets/main.css                       |  35 --
 web/src/components/HelloWorld.vue             |  41 --
 web/src/components/TheWelcome.vue             |  95 ----
 web/src/components/WelcomeItem.vue            |  87 ---
 web/src/components/icons/IconCommunity.vue    |   7 -
 .../components/icons/IconDocumentation.vue    |   7 -
 web/src/components/icons/IconEcosystem.vue    |   7 -
 web/src/components/icons/IconSupport.vue      |   7 -
 web/src/components/icons/IconTooling.vue      |  19 -
 web/src/main.ts                               |   6 +-
 web/src/views/AboutView.vue                   |  14 +-
 web/src/views/HomeView.vue                    | 362 ++++++++++++-
 web/vite.config.ts                            |   8 +
 30 files changed, 2149 insertions(+), 667 deletions(-)
 create mode 100644 management/src/views/community/CommunityView.vue
 create mode 100644 management/src/views/resource/ResourceView.vue
 delete mode 100644 web/src/assets/main.css
 delete mode 100644 web/src/components/HelloWorld.vue
 delete mode 100644 web/src/components/TheWelcome.vue
 delete mode 100644 web/src/components/WelcomeItem.vue
 delete mode 100644 web/src/components/icons/IconCommunity.vue
 delete mode 100644 web/src/components/icons/IconDocumentation.vue
 delete mode 100644 web/src/components/icons/IconEcosystem.vue
 delete mode 100644 web/src/components/icons/IconSupport.vue
 delete mode 100644 web/src/components/icons/IconTooling.vue

diff --git a/management/src/components/ArticlePublish.vue b/management/src/components/ArticlePublish.vue
index 9f7fc550..274f0b9e 100644
--- a/management/src/components/ArticlePublish.vue
+++ b/management/src/components/ArticlePublish.vue
@@ -1,14 +1,11 @@
 <template>
   <div class="article-publish-page">
-    <!-- 页面标题：根据是否编辑动态显示 -->
     <div class="page-header">
-      <h1>{{ articleId ? '编辑文章' : '发表新文章' }}</h1>
-      <p class="page-desc">{{ articleId ? '修改文章内容，更新后即时生效' : '创作优质内容，分享你的观点' }}</p>
+      <h1>编辑文章</h1>
+      <p class="page-desc">修改文章内容，更新后即时生效</p>
     </div>
 
-    <!-- 发表/编辑表单容器 -->
     <div class="publish-form-container" v-loading="isLoading">
-      <!-- 1. 文章标题输入 -->
       <div class="form-group title-group">
         <label class="form-label">文章标题</label>
         <input
@@ -17,15 +14,13 @@
             class="title-input"
             placeholder="请输入文章标题（不少于5个字，不超过50字）"
             @input="checkTitleValid"
-            :disabled="isSubmitting || isSavingDraft"
+            :disabled="isSubmitting"
         >
-        <!-- 标题校验提示 -->
         <p class="valid-hint" :class="{ error: !titleIsValid && articleTitle.length > 0 }">
           {{ titleHintText }}
         </p>
       </div>
 
-      <!-- 2. 专题选择 -->
       <div class="form-group topic-group">
         <label class="form-label">发表到专题</label>
         <p class="form-desc">选择文章所属的专题分类</p>
@@ -33,10 +28,9 @@
         <el-radio-group
             v-model="selectedTopic"
             class="topic-radio-group"
-            :disabled="isSubmitting || isSavingDraft"
+            :disabled="isSubmitting"
         >
           <el-radio label="news" class="topic-radio">
-            <!-- <el-icon><News /></el-icon> -->
             <span>新闻</span>
           </el-radio>
           <el-radio label="cases" class="topic-radio">
@@ -58,26 +52,23 @@
         </el-radio-group>
       </div>
 
-      <!-- 3. 封面图上传 -->
       <div class="form-group cover-group">
         <label class="form-label">文章封面</label>
         <p class="form-desc">建议上传16:9比例图片，支持JPG/PNG/WEBP格式，大小不超过5MB</p>
 
         <div class="cover-uploader">
-          <!-- 已上传封面预览（编辑时加载已有封面） -->
           <div v-if="coverUrl" class="cover-preview">
             <img :src="coverUrl" alt="文章封面" class="cover-img">
             <button
                 class="remove-cover-btn"
                 @click="removeCover"
                 title="删除封面"
-                :disabled="isSubmitting || isSavingDraft"
+                :disabled="isSubmitting"
             >
               <el-icon><Close /></el-icon>
             </button>
           </div>
 
-          <!-- 未上传时的上传区域 -->
           <el-upload
               v-else
               class="cover-upload-area"
@@ -87,7 +78,7 @@
               :on-success="handleCoverSuccess"
               :before-upload="beforeCoverUpload"
               :on-error="handleCoverError"
-              :disabled="isSubmitting || isSavingDraft"
+              :disabled="isSubmitting"
           >
             <div class="upload-placeholder">
               <el-icon class="upload-icon"><Upload /></el-icon>
@@ -98,17 +89,14 @@
         </div>
       </div>
 
-      <!-- 4. 文章内容富文本编辑（编辑时加载已有内容） -->
       <div class="form-group content-group">
         <label class="form-label">文章内容</label>
         <p class="form-desc">请使用编辑器创作文章，支持文字、图片、代码块等格式</p>
 
-        <!-- 富文本编辑器容器 -->
         <div class="editor-wrapper">
           <div ref="editor" class="quill-editor"></div>
         </div>
 
-        <!-- 编辑器提示（字数统计/状态） -->
         <p class="editor-hint">
           <span v-if="wordCount !== null">字数：{{ wordCount }}</span>
           <span class="content-required" :class="{ active: !contentIsValid }">
@@ -117,20 +105,7 @@
         </p>
       </div>
 
-      <!-- 5. 底部操作按钮 -->
       <div class="form-actions">
-        <el-button
-            type="default"
-            size="large"
-            class="draft-btn"
-            @click="saveDraft"
-            :loading="isSavingDraft"
-            :disabled="isSubmitting"
-        >
-          <el-icon v-if="isSavingDraft"><Loading /></el-icon>
-          <span>保存草稿</span>
-        </el-button>
-
         <el-button
             type="primary"
             size="large"
@@ -140,7 +115,7 @@
             :loading="isSubmitting"
         >
           <el-icon v-if="isSubmitting"><Loading /></el-icon>
-          <span>{{ articleId ? '更新文章' : '发布文章' }}</span>
+          <span>更新文章</span>
         </el-button>
       </div>
     </div>
@@ -161,7 +136,7 @@ import type { UploadProps, LoadingInstance } from 'element-plus';
 // 路由相关：获取编辑的文章ID（从路由参数如 /article/edit/123 中获取）
 const route = useRoute();
 const router = useRouter();
-const articleId = ref<number | null>(null); // 文章ID：null=新增，有值=编辑
+const articleId = ref<number | null>(null); // 文章ID：必须有值，在 onMounted 中检查
 
 // 表单核心字段
 const articleTitle = ref(''); // 标题
@@ -171,9 +146,8 @@ const editor = ref<HTMLDivElement | null>(null); // 富文本容器
 let quillInstance: Quill | null = null; // 富文本实例
 
 // 加载/提交状态
-const isLoading = ref(false); // 整体加载（如加载详情）
-const isSubmitting = ref(false); // 提交中（发布/更新）
-const isSavingDraft = ref(false); // 保存草稿中
+const isLoading = ref(true); // 初始为 true，因为必须加载数据
+const isSubmitting = ref(false); // 提交中（更新）
 let loadingInstance: LoadingInstance | null = null; // 加载遮罩实例
 
 // -------------------------- 表单校验 --------------------------
@@ -223,7 +197,7 @@ const wordCount = computed(() => {
 
 // 表单整体有效性（提交按钮是否可点击）
 const isFormValid = computed(() => {
-  return titleIsValid.value && contentIsValid.value && !isSubmitting.value && !isSavingDraft.value;
+  return titleIsValid.value && contentIsValid.value && !isSubmitting.value;
 });
 
 // -------------------------- 封面上传逻辑 --------------------------
@@ -359,9 +333,8 @@ async function uploadEditorImage(file: File, insertIndex: number) {
 
 
 // -------------------------- 编辑核心：加载文章详情 --------------------------
-// 根据文章ID获取详情（编辑时调用）
+// 根据文章ID获取详情
 const fetchArticleDetail = async (id: number) => {
-  isLoading.value = true;
   loadingInstance = ElLoading.service({
     lock: true,
     text: '正在加载文章数据...',
@@ -398,40 +371,9 @@ const fetchArticleDetail = async (id: number) => {
   }
 };
 
-// -------------------------- 草稿保存逻辑 --------------------------
-const saveDraft = async () => {
-  if (!titleIsValid.value && articleTitle.value.trim().length > 0) {
-    ElMessage.warning('标题格式不正确，请调整后再保存');
-    return;
-  }
-
-  isSavingDraft.value = true;
-  try {
-    await new Promise(resolve => setTimeout(resolve, 800));
-
-    const draftData = {
-      id: articleId.value,
-      title: articleTitle.value.trim() || '未命名草稿',
-      topic: selectedTopic.value,
-      coverUrl: coverUrl.value,
-      contentHtml: quillInstance?.root.innerHTML || '',
-      updatedAt: new Date().toISOString()
-    };
-
-    localStorage.setItem('articleDraft', JSON.stringify(draftData));
-    ElMessage.success('草稿保存成功');
-    console.log('【草稿保存】当前草稿数据：', draftData);
-
-  } catch (err) {
-    ElMessage.error(`草稿保存失败：${err instanceof Error ? err.message : '未知错误'}`);
-  } finally {
-    isSavingDraft.value = false;
-  }
-};
-
-// -------------------------- 提交逻辑（区分新增/编辑） --------------------------
+// -------------------------- 提交逻辑（仅更新） --------------------------
 const submitArticle = async () => {
-  if (!isFormValid.value) return;
+  if (!isFormValid.value || !articleId.value) return;
 
   const submitData = {
     id: articleId.value,
@@ -442,38 +384,28 @@ const submitArticle = async () => {
     excerpt: quillInstance?.getText().trim().slice(0, 150) || ''
   };
 
-  console.log('【文章提交】修改后的完整数据：', submitData);
+  console.log("修改文章信息:",submitData);
+
+  console.log('【文章更新】提交的完整数据：', submitData);
   isSubmitting.value = true;
   try {
-    let response: Response;
-    const apiBase = 'http://localhost:8080/api/articles';
+    const response = await fetch(`http://localhost:8080/api/articles/${articleId.value}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(submitData),
+    });
 
-    if (articleId.value) {
-      response = await fetch(`${apiBase}/${articleId.value}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(submitData),
-      });
-    } else {
-      response = await fetch(apiBase, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(submitData),
-      });
-    }
-
-    if (!response.ok) throw new Error(`提交失败，HTTP状态码：${response.status}`);
+    if (!response.ok) throw new Error(`更新失败，HTTP状态码：${response.status}`);
     const result = await response.json();
 
-    const successMsg = articleId.value ? '文章更新成功' : '文章发布成功';
-    ElMessage.success(`${successMsg}！即将跳转到文章列表`);
-    console.log('【提交成功】后端返回结果：', result);
+    ElMessage.success('文章更新成功！即将跳转到文章列表');
+    console.log('【更新成功】后端返回结果：', result);
 
     setTimeout(() => router.push('/articles'), 1500);
 
   } catch (err) {
     const errMsg = err instanceof Error ? err.message : '网络错误';
-    ElMessage.error(`${articleId.value ? '更新' : '发布'}文章失败：${errMsg}`);
+    ElMessage.error(`更新文章失败：${errMsg}`);
   } finally {
     isSubmitting.value = false;
   }
@@ -485,26 +417,17 @@ onMounted(() => {
 
   const idFromRoute = route.params.id;
   if (idFromRoute && typeof idFromRoute === 'string') {
-    articleId.value = parseInt(idFromRoute, 10);
-    if (!isNaN(articleId.value)) {
-      fetchArticleDetail(articleId.value);
+    const parsedId = parseInt(idFromRoute, 10);
+    if (!isNaN(parsedId)) {
+      articleId.value = parsedId;
+      fetchArticleDetail(parsedId);
     } else {
-      ElMessage.error('无效的文章ID');
+      ElMessage.error('无效的文章ID，请检查链接');
       router.push('/articles');
     }
   } else {
-    const savedDraft = localStorage.getItem('articleDraft');
-    if (savedDraft) {
-      const draft = JSON.parse(savedDraft);
-      articleTitle.value = draft.title || '';
-      selectedTopic.value = draft.topic || 'news';
-      coverUrl.value = draft.coverUrl || '';
-      if (quillInstance && draft.contentHtml) {
-        quillInstance.root.innerHTML = draft.contentHtml;
-        setTimeout(checkContentValid, 100);
-      }
-      checkTitleValid();
-    }
+    ElMessage.error('未找到文章ID，无法进行编辑');
+    router.push('/articles');
   }
 });
 
@@ -906,51 +829,26 @@ $transition: all 0.3s ease;
   gap: 16px;
   margin-top: 40px;
 
-  .draft-btn, .publish-btn {
+  .publish-btn {
     padding: 12px 24px;
     border-radius: $radius;
     font-size: 16px;
     font-weight: 500;
     transition: $transition;
+    background-color: $primary-color;
+    border-color: $primary-color;
 
     &:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      background-color: #0E4BD8;
+      border-color: #0E4BD8;
     }
 
     &:disabled {
       transform: none;
       box-shadow: none;
       cursor: not-allowed;
-    }
-  }
-
-  .draft-btn {
-    color: $text-secondary;
-    border-color: $border-color;
-
-    &:hover {
-      color: $text-primary;
-      border-color: #D1D5DB;
-    }
-
-    &:disabled {
-      background-color: #F9FAFB;
-      border-color: $border-color;
-      color: $text-placeholder;
-    }
-  }
-
-  .publish-btn {
-    background-color: $primary-color;
-    border-color: $primary-color;
-
-    &:hover {
-      background-color: #0E4BD8;
-      border-color: #0E4BD8;
-    }
-
-    &:disabled {
       background-color: #A3C5FF;
       border-color: #A3C5FF;
       color: #FFFFFF;
@@ -1008,10 +906,7 @@ $transition: all 0.3s ease;
   }
 
   .form-actions {
-    flex-direction: column;
-    gap: 12px;
-
-    .draft-btn, .publish-btn {
+    .publish-btn {
       width: 100%;
     }
   }
diff --git a/management/src/router/index.ts b/management/src/router/index.ts
index e4efc1ea..25c6bf22 100644
--- a/management/src/router/index.ts
+++ b/management/src/router/index.ts
@@ -7,6 +7,8 @@ const HomeView = () => import('../views/HomeView.vue')
 const AboutView = () => import('../views/AboutView.vue')
 const NewsView = () => import('../views/news/NewsView.vue')
 const PublishView = () => import('../views/publish/PublishView.vue')
+const CommunityView = () => import('../views/community/CommunityView.vue')
+const ResourceView = () => import('../views/resource/ResourceView.vue')
 
 // 定义路由规则（现在 RouteRecordRaw 导入正确）
 const routes: RouteRecordRaw[] = [
@@ -31,7 +33,7 @@ const routes: RouteRecordRaw[] = [
     {
         path: '/resource',
         name: 'Resource',
-        component: HomeView,
+        component: ResourceView,
         meta: {
             title: '资源案例',
             requiresAuth: false
@@ -40,7 +42,7 @@ const routes: RouteRecordRaw[] = [
     {
         path: '/community',
         name: 'Community',
-        component: HomeView,
+        component: CommunityView,
         meta: {
             title: '社区服务',
             requiresAuth: false
diff --git a/management/src/views/community/CommunityView.vue b/management/src/views/community/CommunityView.vue
new file mode 100644
index 00000000..fa396a38
--- /dev/null
+++ b/management/src/views/community/CommunityView.vue
@@ -0,0 +1,499 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <div class="p-6 bg-white rounded-lg shadow-md min-h-screen pb-24" v-loading="loading">
+
+      <div class="flex justify-between items-center mb-6">
+        <span class="text-2xl font-bold text-gray-700">社区管理列表</span>
+      </div>
+
+      <el-table :data="tableData" style="width: 100%" row-key="id" max-height="82vh">
+        <el-table-column prop="id" label="ID" width="80" sortable fixed></el-table-column>
+        <el-table-column label="封面" width="180">
+          <template #default="scope">
+            <el-image style="width: 120px; height: 70px; border-radius: 6px;" :src="scope.row.cover" :preview-src-list="[scope.row.cover]" fit="cover" :preview-teleported="true" hide-on-click-modal>
+              <template #error>
+                <div class="flex items-center justify-center w-full h-full bg-gray-100 text-gray-500">加载失败</div>
+              </template>
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
+          <template #default="scope">
+            <span class="font-semibold">{{ scope.row.title }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="文章内容" min-width="300">
+          <template #default="scope">
+            <div class="content-preview" :title="stripHtml(scope.row.content)">
+              {{ stripHtml(scope.row.content).length > 100 ? `${stripHtml(scope.row.content).slice(0, 100)}...` : stripHtml(scope.row.content) }}
+            </div>
+            <el-button size="mini" type="text" class="mt-1 text-blue-600" @click="handleViewContent(scope.row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="topic" label="主题" width="120"></el-table-column>
+        <el-table-column prop="excerpt" label="摘要" min-width="250" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="create_at" label="创建时间" width="180" sortable></el-table-column>
+        <el-table-column prop="update_at" label="更新时间" width="180" sortable></el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <div class="action-buttons">
+              <el-button size="small" type="primary" :icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button size="small" type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-dialog v-model="contentDialogVisible" title="文章内容详情" :width="`800px`" :before-close="handleCloseDialog">
+        <h3 class="text-xl font-bold text-gray-800 mb-4">标题： {{ currentArticle.title }}</h3>
+        <div class="content-full text-gray-700 leading-relaxed whitespace-pre-wrap" v-html="currentArticle.content || '当前文章暂无内容'">
+        </div>
+      </el-dialog>
+    </div>
+
+    <div class="fixed bottom-0 right-0 w-full p-4 bg-white shadow-[0_-2px_5px_rgba(0,0,0,0.05)] flex justify-end z-10 border-t border-gray-200">
+      <el-pagination class="custom-pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total" v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
+    </div>
+
+    <el-drawer v-model="drawerVisible" title="编辑文章" direction="rtl" size="60%" :before-close="handleDrawerClose" destroy-on-close>
+      <div class="publish-form-container">
+        <div class="form-group title-group">
+          <label class="form-label">文章标题</label>
+          <el-input v-model="form.title" placeholder="请输入文章标题" clearable :disabled="isSubmitting" />
+        </div>
+
+        <div class="form-group cover-group">
+          <label class="form-label">文章封面</label>
+          <el-upload action="http://localhost:8080/api/upload/cover" name="image" :show-file-list="false" :on-success="handleCoverSuccess" :before-upload="beforeCoverUpload" :on-error="handleCoverError" :disabled="isSubmitting">
+            <img v-if="form.cover" :src="form.cover" class="cover-preview" alt="封面"/>
+            <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+        </div>
+
+        <div class="form-group excerpt-group">
+          <label class="form-label">文章摘要</label>
+          <el-input
+              v-model="form.excerpt"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入文章摘要（可选，若不填则自动从正文截取）"
+              clearable
+              :disabled="isSubmitting"
+          />
+        </div>
+
+        <div class="form-group content-group">
+          <label class="form-label">文章内容</label>
+          <div ref="editorRef" class="quill-editor"></div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="handleDrawerClose">取消</el-button>
+          <el-button type="primary" @click="submitArticle" :loading="isSubmitting">
+            更新文章
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+
+  </el-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, nextTick } from 'vue';
+import { ElMessage, ElMessageBox, ElDialog, ElConfigProvider, ElDrawer, ElInput, ElUpload } from 'element-plus';
+import { Edit, Delete, Plus } from '@element-plus/icons-vue';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+import type { UploadProps } from 'element-plus';
+
+// --- 类型定义 ---
+interface Article {
+  id: number;
+  title: string;
+  content: string;
+  cover: string;
+  create_at: string;
+  update_at: string;
+  is_delete: number;
+  topic: string;
+  excerpt: string;
+}
+
+interface ListArticleReq {
+  page: number;
+  size: number;
+  topic: string;
+}
+
+// --- API 基地址 ---
+const API_BASE_URL = 'http://localhost:8080/api';
+
+// =================================================================
+//                      列表页相关状态与逻辑
+// =================================================================
+const loading = ref(true);
+const tableData = ref<Article[]>([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const contentDialogVisible = ref(false);
+const currentArticle = ref<Article>({ id: 0, title: '', content: '', cover: '', create_at: '', update_at: '', is_delete: 0, topic: '', excerpt: '' });
+
+// --- HTML清理函数 ---
+const stripHtml = (html: string) => {
+  if (!html) return '';
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = html;
+  return tempDiv.textContent || tempDiv.innerText || '';
+};
+
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"社区服务" };
+    const response = await fetch(`${API_BASE_URL}/articles/getarticle`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(reqData)
+    });
+    if (!response.ok) throw new Error(`请求失败！状态码：${response.status}`);
+    const data = await response.json();
+    tableData.value = data.Article_list || [];
+    total.value = data.total || 0;
+  } catch (error) {
+    console.error('[ERROR] 获取文章列表失败：', error);
+    ElMessage.error('获取文章列表失败，请检查接口或网络！');
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(fetchData);
+
+const handleViewContent = (row: Article) => {
+  currentArticle.value = { ...row };
+  contentDialogVisible.value = true;
+};
+
+const handleCloseDialog = () => {
+  contentDialogVisible.value = false;
+};
+
+// --- 🔥 新增：删除功能 ---
+const handleDelete = (row: Article) => {
+  ElMessageBox.confirm(`确定要删除文章《${row.title}》吗？此操作无法撤销！`, '警告', {
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(async () => {
+        try {
+          const response = await fetch(`${API_BASE_URL}/articles/${row.id}`, {
+            method: 'DELETE',
+          });
+          if (!response.ok) {
+            // 如果后端返回错误信息，尝试解析并显示
+            const errData = await response.json().catch(() => null);
+            throw new Error(errData?.message || '删除失败');
+          }
+          ElMessage.success('删除成功！');
+          // 刷新列表数据
+          fetchData();
+        } catch (error) {
+          console.error('[ERROR] 删除文章失败：', error);
+          ElMessage.error(`删除文章失败: ${(error as Error).message}`);
+        }
+      })
+      .catch(() => {
+        ElMessage.info('已取消删除');
+      });
+};
+
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+  fetchData();
+};
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  fetchData();
+};
+
+// =================================================================
+//                      抽屉编辑相关状态与逻辑
+// =================================================================
+const drawerVisible = ref(false);
+const isSubmitting = ref(false);
+
+const defaultFormState = () => ({
+  id: null as number | null,
+  title: '',
+  topic: 'news',
+  cover: '',
+  content: '',
+  excerpt: '',
+});
+const form = ref(defaultFormState());
+
+// --- 富文本编辑器 ---
+const editorRef = ref<HTMLDivElement | null>(null);
+let quillInstance: Quill | null = null;
+
+const initQuillEditor = () => {
+  if (editorRef.value && !quillInstance) {
+    quillInstance = new Quill(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: [['bold', 'italic', 'underline'], ['link', 'image']],
+          handlers: {
+            image: handleEditorImageUpload,
+          }
+        }
+      },
+      placeholder: '请开始创作你的文章...'
+    });
+
+    quillInstance.on('text-change', (delta, _, source) => {
+      if (source === 'user') {
+        const pastedBase64 = getPastedBase64Image(delta);
+        if (pastedBase64) {
+          const selection = quillInstance?.getSelection();
+          if (!selection) return;
+
+          const imageIndex = selection.index;
+          quillInstance?.deleteText(imageIndex, 1);
+          const blob = base64ToBlob(pastedBase64);
+
+          if (blob) {
+            const file = new File([blob], `pasted-image-${Date.now()}.png`, { type: blob.type });
+            uploadEditorImage(file, imageIndex);
+          }
+        }
+      }
+    });
+  }
+};
+
+watch(drawerVisible, (visible) => {
+  if (visible) {
+    nextTick(() => {
+      initQuillEditor();
+      if (quillInstance) {
+        quillInstance.root.innerHTML = form.value.content;
+      }
+    });
+  } else {
+    quillInstance = null;
+  }
+});
+
+// --- 编辑器图片上传相关函数 ---
+function handleEditorImageUpload() {
+  const fileInput = document.createElement('input');
+  fileInput.type = 'file';
+  fileInput.accept = 'image/*';
+
+  fileInput.onchange = () => {
+    const file = fileInput.files?.[0];
+    if (!file) return;
+
+    const selection = quillInstance?.getSelection();
+    const insertIndex = selection ? selection.index : quillInstance?.getLength() || 0;
+    uploadEditorImage(file, insertIndex);
+    fileInput.value = '';
+  };
+
+  fileInput.click();
+}
+
+async function uploadEditorImage(file: File, insertIndex: number) {
+  if (!quillInstance) return;
+
+  quillInstance.insertText(insertIndex, '[图片上传中...]', { color: '#999', italic: true });
+
+  try {
+    const formData = new FormData();
+    formData.append('image', file);
+
+    const response = await fetch(`${API_BASE_URL}/upload/image`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) throw new Error(`HTTP状态码：${response.status}`);
+    const result = await response.json();
+    const imageUrl = result.data?.url;
+
+    if (!imageUrl) throw new Error('未从响应中获取到图片地址');
+
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertEmbed(insertIndex, 'image', imageUrl);
+    quillInstance.setSelection(insertIndex + 1);
+
+  } catch (err) {
+    const errMsg = err instanceof Error ? err.message : '未知错误';
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertText(insertIndex, `[图片上传失败：${errMsg}]`, { color: '#f56c6c', italic: true });
+    ElMessage.error(`编辑器图片上传失败：${errMsg}`);
+  }
+}
+
+function getPastedBase64Image(delta: any): string | null {
+  if (!delta?.ops) return null;
+  for (const op of delta.ops) {
+    if (
+        op.insert &&
+        typeof op.insert === 'object' &&
+        op.insert.image &&
+        op.insert.image.startsWith('data:image')
+    ) {
+      return op.insert.image;
+    }
+  }
+  return null;
+}
+
+function base64ToBlob(base64: string): Blob | null {
+  try {
+    const [prefix, data] = base64.split(',');
+    if (!prefix || !data) throw new Error('base64格式错误');
+
+    const mimeMatch = prefix.match(/data:(.*?);/);
+    if (!mimeMatch) throw new Error('无法解析图片类型');
+    const mime = mimeMatch[1];
+
+    const binaryData = atob(data);
+    const bytes = new Uint8Array(binaryData.length);
+    for (let i = 0; i < binaryData.length; i++) {
+      bytes[i] = binaryData.charCodeAt(i);
+    }
+
+    return new Blob([bytes], { type: mime });
+  } catch (error) {
+    console.error('base64转Blob失败：', error);
+    ElMessage.error('解析粘贴的图片失败！');
+    return null;
+  }
+}
+
+// --- 操作处理 ---
+const handleEdit = (row: Article) => {
+  form.value = {
+    id: row.id,
+    title: row.title,
+    topic: row.topic,
+    cover: row.cover,
+    excerpt: row.excerpt,
+    content: row.content,
+  };
+  drawerVisible.value = true;
+};
+
+const handleDrawerClose = () => {
+  drawerVisible.value = false;
+};
+
+const submitArticle = async () => {
+  if (!form.value.title) {
+    ElMessage.warning('请输入文章标题');
+    return;
+  }
+  if (!form.value.id) {
+    ElMessage.error('文章ID丢失，无法更新！');
+    return;
+  }
+
+  isSubmitting.value = true;
+  const contentHTML = quillInstance?.root.innerHTML || '';
+  const excerpt = form.value.excerpt.trim() || quillInstance?.getText().trim().slice(0, 150) || '';
+
+  const submitData = {
+    title: form.value.title,
+    cover: form.value.cover,
+    excerpt: excerpt,
+    content: contentHTML,
+    topic: form.value.topic,
+  };
+  console.log("修改文章信息：",JSON.stringify(submitData));
+
+  try {
+    const url = `${API_BASE_URL}/articles/${Number(form.value.id)}`;
+    const method = 'PUT';
+
+    const response = await fetch(url, {
+      method: method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(submitData),
+    });
+
+    if (!response.ok) throw new Error('提交失败');
+
+    ElMessage.success('文章更新成功！');
+    drawerVisible.value = false;
+    fetchData();
+
+  } catch (error) {
+    const err = error as Error;
+    ElMessage.error(`更新失败: ${err.message}`);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+// --- 封面上传处理 ---
+const handleCoverSuccess: UploadProps['onSuccess'] = (response) => {
+  const ossUrl = response.data?.url;
+  if (ossUrl) {
+    form.value.cover = ossUrl;
+    ElMessage.success('封面上传成功');
+  } else {
+    ElMessage.error('封面上传失败');
+  }
+};
+
+const beforeCoverUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const isLt5M = rawFile.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB!');
+  }
+  return isLt5M;
+};
+
+const handleCoverError = () => {
+  ElMessage.error('封面上传失败');
+};
+
+</script>
+
+<style scoped>
+/* 表格样式 */
+.el-table .el-table__cell { vertical-align: middle; }
+.el-table__header-wrapper th { background-color: #fafafa !important; font-weight: 600; color: #333; }
+.action-buttons .el-button { margin-right: 8px; }
+.content-preview { color: #666; line-height: 1.5; word-break: break-all; }
+.content-full { min-height: 300px; padding: 20px; background-color: #f9fafb; border-radius: 8px; }
+.el-dialog__title { font-size: 18px !important; font-weight: 600 !important; }
+
+/* 分页器样式 */
+.custom-pagination { justify-content: flex-end !important; }
+.custom-pagination .el-pagination__total,
+.custom-pagination .el-pagination__sizes,
+.custom-pagination .el-pagination__jump { margin-right: 16px !important; }
+.custom-pagination .el-pagination__jump .el-input { width: 60px !important; }
+
+/* 抽屉内表单样式 */
+.publish-form-container { padding: 0 20px; }
+.form-group { margin-bottom: 24px; }
+.form-label { display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; }
+.quill-editor { height: 350px; border-radius: 4px; border: 1px solid #dcdfe6; }
+.cover-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; }
+.cover-uploader .el-upload:hover { border-color: #409EFF; }
+.cover-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
+.cover-preview { width: 178px; height: 178px; display: block; object-fit: cover; }
+</style>
diff --git a/management/src/views/news/NewsView.vue b/management/src/views/news/NewsView.vue
index e124e735..abe90ae8 100644
--- a/management/src/views/news/NewsView.vue
+++ b/management/src/views/news/NewsView.vue
@@ -1,16 +1,12 @@
 <template>
   <el-config-provider :locale="zhCn">
-    <!-- 主容器 -->
     <div class="p-6 bg-white rounded-lg shadow-md min-h-screen pb-24" v-loading="loading">
 
-      <!-- 头部区域 -->
       <div class="flex justify-between items-center mb-6">
         <span class="text-2xl font-bold text-gray-700">文章管理列表</span>
-        <el-button type="primary" :icon="Plus" @click="handleCreate">新建文章</el-button>
       </div>
 
-      <!-- 文章表格 -->
-      <el-table :data="tableData" style="width: 100%" row-key="id">
+      <el-table :data="tableData" style="width: 100%" row-key="id" max-height="82vh">
         <el-table-column prop="id" label="ID" width="80" sortable fixed></el-table-column>
         <el-table-column label="封面" width="180">
           <template #default="scope">
@@ -26,10 +22,10 @@
             <span class="font-semibold">{{ scope.row.title }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="文章内容" min-width="300">
+        <el-table-column label="文章内容" min-width="250">
           <template #default="scope">
-            <div class="content-preview" :title="scope.row.content">
-              {{ scope.row.content.length > 100 ? `${scope.row.content.slice(0, 100)}...` : scope.row.content }}
+            <div class="content-preview" :title="stripHtml(scope.row.content)">
+              {{ stripHtml(scope.row.content).length > 100 ? `${stripHtml(scope.row.content).slice(0, 100)}...` : stripHtml(scope.row.content) }}
             </div>
             <el-button size="mini" type="text" class="mt-1 text-blue-600" @click="handleViewContent(scope.row)">查看详情</el-button>
           </template>
@@ -48,44 +44,24 @@
         </el-table-column>
       </el-table>
 
-      <!-- Content 详情弹窗 -->
       <el-dialog v-model="contentDialogVisible" title="文章内容详情" :width="`800px`" :before-close="handleCloseDialog">
-        <el-card class="p-4">
-          <h3 class="text-xl font-bold text-gray-800 mb-4">{{ currentArticle.title }}</h3>
-          <div class="content-full text-gray-700 leading-relaxed whitespace-pre-wrap">
-            {{ currentArticle.content || "当前文章暂无内容" }}
-          </div>
-        </el-card>
+        <h3 class="text-xl font-bold text-gray-800 mb-4">标题： {{ currentArticle.title }}</h3>
+        <div class="content-full text-gray-700 leading-relaxed whitespace-pre-wrap" v-html="currentArticle.content || '当前文章暂无内容'">
+        </div>
       </el-dialog>
     </div>
 
-    <!-- 分页器容器 -->
     <div class="fixed bottom-0 right-0 w-full p-4 bg-white shadow-[0_-2px_5px_rgba(0,0,0,0.05)] flex justify-end z-10 border-t border-gray-200">
       <el-pagination class="custom-pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total" v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
     </div>
 
-    <!-- ==================================================== -->
-    <!--          🔥 文章编辑/新建抽屉 (已修改) 🔥          -->
-    <!-- ==================================================== -->
-    <el-drawer v-model="drawerVisible" :title="isEditMode ? '编辑文章' : '发表新文章'" direction="rtl" size="60%" :before-close="handleDrawerClose" destroy-on-close>
+    <el-drawer v-model="drawerVisible" title="编辑文章" direction="rtl" size="60%" :before-close="handleDrawerClose" destroy-on-close>
       <div class="publish-form-container">
-        <!-- 1. 文章标题输入 -->
         <div class="form-group title-group">
           <label class="form-label">文章标题</label>
           <el-input v-model="form.title" placeholder="请输入文章标题" clearable :disabled="isSubmitting" />
         </div>
 
-        <!-- 2. 专题选择 (仅在新建时显示) -->
-        <div v-if="!isEditMode" class="form-group topic-group">
-          <label class="form-label">发表到专题</label>
-          <el-radio-group v-model="form.topic" :disabled="isSubmitting">
-            <el-radio label="news">新闻</el-radio>
-            <el-radio label="cases">案例资源</el-radio>
-            <el-radio label="community">社区服务</el-radio>
-          </el-radio-group>
-        </div>
-
-        <!-- 3. 封面图上传 -->
         <div class="form-group cover-group">
           <label class="form-label">文章封面</label>
           <el-upload action="http://localhost:8080/api/upload/cover" name="image" :show-file-list="false" :on-success="handleCoverSuccess" :before-upload="beforeCoverUpload" :on-error="handleCoverError" :disabled="isSubmitting">
@@ -94,7 +70,6 @@
           </el-upload>
         </div>
 
-        <!-- 4. 文章摘要编辑 -->
         <div class="form-group excerpt-group">
           <label class="form-label">文章摘要</label>
           <el-input
@@ -107,7 +82,6 @@
           />
         </div>
 
-        <!-- 5. 文章内容富文本编辑 -->
         <div class="form-group content-group">
           <label class="form-label">文章内容</label>
           <div ref="editorRef" class="quill-editor"></div>
@@ -118,7 +92,7 @@
         <div style="flex: auto">
           <el-button @click="handleDrawerClose">取消</el-button>
           <el-button type="primary" @click="submitArticle" :loading="isSubmitting">
-            {{ isEditMode ? '更新文章' : '发布文章' }}
+            更新文章
           </el-button>
         </div>
       </template>
@@ -129,7 +103,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, watch, nextTick } from 'vue';
-import { ElMessage, ElMessageBox, ElDialog, ElConfigProvider, ElDrawer, ElInput, ElRadioGroup, ElRadio, ElUpload } from 'element-plus';
+import { ElMessage, ElMessageBox, ElDialog, ElConfigProvider, ElDrawer, ElInput, ElUpload } from 'element-plus';
 import { Edit, Delete, Plus } from '@element-plus/icons-vue';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
 import Quill from 'quill';
@@ -152,6 +126,7 @@ interface Article {
 interface ListArticleReq {
   page: number;
   size: number;
+  topic: string;
 }
 
 // --- API 基地址 ---
@@ -168,10 +143,18 @@ const total = ref(0);
 const contentDialogVisible = ref(false);
 const currentArticle = ref<Article>({ id: 0, title: '', content: '', cover: '', create_at: '', update_at: '', is_delete: 0, topic: '', excerpt: '' });
 
+// --- HTML清理函数 ---
+const stripHtml = (html: string) => {
+  if (!html) return '';
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = html;
+  return tempDiv.textContent || tempDiv.innerText || '';
+};
+
 const fetchData = async () => {
   loading.value = true;
   try {
-    const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value };
+    const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"新闻" };
     const response = await fetch(`${API_BASE_URL}/articles/getarticle`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -200,20 +183,34 @@ const handleCloseDialog = () => {
   contentDialogVisible.value = false;
 };
 
+// --- 🔥 新增：删除功能 ---
 const handleDelete = (row: Article) => {
-  ElMessageBox.confirm(`确定要删除文章《${row.title}》吗？此操作无法撤销！`, '警告', { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' })
+  ElMessageBox.confirm(`确定要删除文章《${row.title}》吗？此操作无法撤销！`, '警告', {
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
       .then(async () => {
         try {
-          const response = await fetch(`${API_BASE_URL}/articles/${row.id}`, { method: 'DELETE' });
-          if (!response.ok) throw new Error('删除失败');
+          const response = await fetch(`${API_BASE_URL}/articles/${row.id}`, {
+            method: 'DELETE',
+          });
+          if (!response.ok) {
+            // 如果后端返回错误信息，尝试解析并显示
+            const errData = await response.json().catch(() => null);
+            throw new Error(errData?.message || '删除失败');
+          }
           ElMessage.success('删除成功！');
+          // 刷新列表数据
           fetchData();
         } catch (error) {
           console.error('[ERROR] 删除文章失败：', error);
-          ElMessage.error('删除文章失败，请重试！');
+          ElMessage.error(`删除文章失败: ${(error as Error).message}`);
         }
       })
-      .catch(() => ElMessage.info('已取消删除'));
+      .catch(() => {
+        ElMessage.info('已取消删除');
+      });
 };
 
 const handleSizeChange = (val: number) => {
@@ -228,10 +225,9 @@ const handleCurrentChange = (val: number) => {
 };
 
 // =================================================================
-//                      抽屉编辑/新建相关状态与逻辑
+//                      抽屉编辑相关状态与逻辑
 // =================================================================
 const drawerVisible = ref(false);
-const isEditMode = ref(false);
 const isSubmitting = ref(false);
 
 const defaultFormState = () => ({
@@ -252,9 +248,35 @@ const initQuillEditor = () => {
   if (editorRef.value && !quillInstance) {
     quillInstance = new Quill(editorRef.value, {
       theme: 'snow',
-      modules: { toolbar: [['bold', 'italic', 'underline'], ['link', 'image']] },
+      modules: {
+        toolbar: {
+          container: [['bold', 'italic', 'underline'], ['link', 'image']],
+          handlers: {
+            image: handleEditorImageUpload,
+          }
+        }
+      },
       placeholder: '请开始创作你的文章...'
     });
+
+    quillInstance.on('text-change', (delta, _, source) => {
+      if (source === 'user') {
+        const pastedBase64 = getPastedBase64Image(delta);
+        if (pastedBase64) {
+          const selection = quillInstance?.getSelection();
+          if (!selection) return;
+
+          const imageIndex = selection.index;
+          quillInstance?.deleteText(imageIndex, 1);
+          const blob = base64ToBlob(pastedBase64);
+
+          if (blob) {
+            const file = new File([blob], `pasted-image-${Date.now()}.png`, { type: blob.type });
+            uploadEditorImage(file, imageIndex);
+          }
+        }
+      }
+    });
   }
 };
 
@@ -262,39 +284,106 @@ watch(drawerVisible, (visible) => {
   if (visible) {
     nextTick(() => {
       initQuillEditor();
-      if (isEditMode.value) {
-        if (quillInstance) {
-          quillInstance.root.innerHTML = form.value.content;
-        }
-      } else {
-        if (quillInstance) {
-          quillInstance.setContents([]);
-        }
+      if (quillInstance) {
+        quillInstance.root.innerHTML = form.value.content;
       }
     });
   } else {
-    // 🔥 关键修复：当抽屉关闭时，将实例重置为 null。
-    // `destroy-on-close` 属性会处理 DOM 的销毁。
     quillInstance = null;
   }
 });
 
-// --- 操作处理 ---
-const resetForm = () => {
-  form.value = defaultFormState();
-  if (quillInstance) {
-    quillInstance.setContents([]);
+// --- 编辑器图片上传相关函数 ---
+function handleEditorImageUpload() {
+  const fileInput = document.createElement('input');
+  fileInput.type = 'file';
+  fileInput.accept = 'image/*';
+
+  fileInput.onchange = () => {
+    const file = fileInput.files?.[0];
+    if (!file) return;
+
+    const selection = quillInstance?.getSelection();
+    const insertIndex = selection ? selection.index : quillInstance?.getLength() || 0;
+    uploadEditorImage(file, insertIndex);
+    fileInput.value = '';
+  };
+
+  fileInput.click();
+}
+
+async function uploadEditorImage(file: File, insertIndex: number) {
+  if (!quillInstance) return;
+
+  quillInstance.insertText(insertIndex, '[图片上传中...]', { color: '#999', italic: true });
+
+  try {
+    const formData = new FormData();
+    formData.append('image', file);
+
+    const response = await fetch(`${API_BASE_URL}/upload/image`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) throw new Error(`HTTP状态码：${response.status}`);
+    const result = await response.json();
+    const imageUrl = result.data?.url;
+
+    if (!imageUrl) throw new Error('未从响应中获取到图片地址');
+
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertEmbed(insertIndex, 'image', imageUrl);
+    quillInstance.setSelection(insertIndex + 1);
+
+  } catch (err) {
+    const errMsg = err instanceof Error ? err.message : '未知错误';
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertText(insertIndex, `[图片上传失败：${errMsg}]`, { color: '#f56c6c', italic: true });
+    ElMessage.error(`编辑器图片上传失败：${errMsg}`);
   }
-};
+}
 
-const handleCreate = () => {
-  isEditMode.value = false;
-  resetForm();
-  drawerVisible.value = true;
-};
+function getPastedBase64Image(delta: any): string | null {
+  if (!delta?.ops) return null;
+  for (const op of delta.ops) {
+    if (
+        op.insert &&
+        typeof op.insert === 'object' &&
+        op.insert.image &&
+        op.insert.image.startsWith('data:image')
+    ) {
+      return op.insert.image;
+    }
+  }
+  return null;
+}
 
+function base64ToBlob(base64: string): Blob | null {
+  try {
+    const [prefix, data] = base64.split(',');
+    if (!prefix || !data) throw new Error('base64格式错误');
+
+    const mimeMatch = prefix.match(/data:(.*?);/);
+    if (!mimeMatch) throw new Error('无法解析图片类型');
+    const mime = mimeMatch[1];
+
+    const binaryData = atob(data);
+    const bytes = new Uint8Array(binaryData.length);
+    for (let i = 0; i < binaryData.length; i++) {
+      bytes[i] = binaryData.charCodeAt(i);
+    }
+
+    return new Blob([bytes], { type: mime });
+  } catch (error) {
+    console.error('base64转Blob失败：', error);
+    ElMessage.error('解析粘贴的图片失败！');
+    return null;
+  }
+}
+
+// --- 操作处理 ---
 const handleEdit = (row: Article) => {
-  isEditMode.value = true;
   form.value = {
     id: row.id,
     title: row.title,
@@ -315,20 +404,27 @@ const submitArticle = async () => {
     ElMessage.warning('请输入文章标题');
     return;
   }
+  if (!form.value.id) {
+    ElMessage.error('文章ID丢失，无法更新！');
+    return;
+  }
 
   isSubmitting.value = true;
   const contentHTML = quillInstance?.root.innerHTML || '';
   const excerpt = form.value.excerpt.trim() || quillInstance?.getText().trim().slice(0, 150) || '';
 
   const submitData = {
-    ...form.value,
-    content: contentHTML,
+    title: form.value.title,
+    cover: form.value.cover,
     excerpt: excerpt,
+    content: contentHTML,
+    topic: form.value.topic,
   };
+  console.log("修改文章信息：",JSON.stringify(submitData));
 
   try {
-    const url = isEditMode.value ? `${API_BASE_URL}/articles/${form.value.id}` : `${API_BASE_URL}/articles`;
-    const method = isEditMode.value ? 'PUT' : 'POST';
+    const url = `${API_BASE_URL}/articles/${Number(form.value.id)}`;
+    const method = 'PUT';
 
     const response = await fetch(url, {
       method: method,
@@ -338,12 +434,13 @@ const submitArticle = async () => {
 
     if (!response.ok) throw new Error('提交失败');
 
-    ElMessage.success(isEditMode.value ? '文章更新成功！' : '文章发布成功！');
+    ElMessage.success('文章更新成功！');
     drawerVisible.value = false;
-    fetchData(); // 刷新列表
+    fetchData();
 
   } catch (error) {
-    ElMessage.error('提交文章失败！');
+    const err = error as Error;
+    ElMessage.error(`更新失败: ${err.message}`);
   } finally {
     isSubmitting.value = false;
   }
@@ -400,4 +497,3 @@ const handleCoverError = () => {
 .cover-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
 .cover-preview { width: 178px; height: 178px; display: block; object-fit: cover; }
 </style>
-
diff --git a/management/src/views/publish/QuillEditor.vue b/management/src/views/publish/QuillEditor.vue
index 881a9441..3e45c4a6 100644
--- a/management/src/views/publish/QuillEditor.vue
+++ b/management/src/views/publish/QuillEditor.vue
@@ -166,6 +166,13 @@ const articleId = ref<number | null>(null); // 文章ID：null=新增，有值=
 // 表单核心字段
 const articleTitle = ref(''); // 标题
 const selectedTopic = ref('news'); // 专题（默认新闻）
+const topicMap: { [key: string]: string } = {
+  news: '新闻',
+  cases: '案例资源',
+  community: '社区服务',
+  awards: '学生获奖',
+  papers: '论文发表'
+};
 const coverUrl = ref(''); // 封面图URL
 const editor = ref<HTMLDivElement | null>(null); // 富文本容器
 let quillInstance: Quill | null = null; // 富文本实例
@@ -516,13 +523,13 @@ const submitArticle = async () => {
 
   // 1. 组装提交数据
   const submitData = {
-    id: articleId.value, // 编辑时携带ID，新增时为null
+    //id: articleId.value, // 编辑时携带ID，新增时为null
     title: articleTitle.value.trim(),
-    topic: selectedTopic.value,
+    topic:  topicMap[selectedTopic.value],
     cover: coverUrl.value, // 后端通常用cover字段接收封面
     content: quillInstance?.root.innerHTML || '', // 富文本HTML内容
-    contentText: quillInstance?.getText().trim() || '', // 纯文本内容（用于搜索/摘要）
-    excerpt: quillInstance?.getText().trim().slice(0, 150) || '' // 自动生成摘要（前150字）
+    //contentText: quillInstance?.getText().trim() || '', // 纯文本内容（用于搜索/摘要）
+    //excerpt: quillInstance?.getText().trim().slice(0, 150) || '' // 自动生成摘要（前150字）
   };
 
   // 2. 打印修改后的信息到控制台（核心需求）
@@ -536,8 +543,8 @@ const submitArticle = async () => {
     // 3. 区分新增/编辑：调用不同接口
     if (articleId.value) {
       // 编辑：调用PUT更新接口（后端需支持）
-      response = await fetch(`${apiBase}/${articleId.value}`, {
-        method: 'PUT',
+      response = await fetch(`${apiBase}`, {
+        method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(submitData),
         credentials: 'include'
@@ -561,8 +568,7 @@ const submitArticle = async () => {
     ElMessage.success(`${successMsg}！即将跳转到文章列表`);
     console.log('【提交成功】后端返回结果：', result);
 
-    // 跳转到文章列表页（根据你的路由调整）
-    setTimeout(() => router.push('/article/list'), 1500);
+
 
   } catch (err) {
     const errMsg = err instanceof Error ? err.message : '网络错误';
diff --git a/management/src/views/resource/ResourceView.vue b/management/src/views/resource/ResourceView.vue
new file mode 100644
index 00000000..8f6151b1
--- /dev/null
+++ b/management/src/views/resource/ResourceView.vue
@@ -0,0 +1,498 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <div class="p-6 bg-white rounded-lg shadow-md min-h-screen pb-24" v-loading="loading">
+
+      <div class="flex justify-between items-center mb-6">
+        <span class="text-2xl font-bold text-gray-700">资源案例管理列表</span>
+      </div>
+
+      <el-table :data="tableData" style="width: 100%" row-key="id" max-height="82vh">
+        <el-table-column prop="id" label="ID" width="80" sortable fixed></el-table-column>
+        <el-table-column label="封面" width="180">
+          <template #default="scope">
+            <el-image style="width: 120px; height: 70px; border-radius: 6px;" :src="scope.row.cover" :preview-src-list="[scope.row.cover]" fit="cover" :preview-teleported="true" hide-on-click-modal>
+              <template #error>
+                <div class="flex items-center justify-center w-full h-full bg-gray-100 text-gray-500">加载失败</div>
+              </template>
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
+          <template #default="scope">
+            <span class="font-semibold">{{ scope.row.title }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="文章内容" min-width="300">
+          <template #default="scope">
+            <div class="content-preview" :title="stripHtml(scope.row.content)">
+              {{ stripHtml(scope.row.content).length > 100 ? `${stripHtml(scope.row.content).slice(0, 100)}...` : stripHtml(scope.row.content) }}
+            </div>
+            <el-button size="mini" type="text" class="mt-1 text-blue-600" @click="handleViewContent(scope.row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="topic" label="主题" width="120"></el-table-column>
+        <el-table-column prop="excerpt" label="摘要" min-width="250" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="create_at" label="创建时间" width="180" sortable></el-table-column>
+        <el-table-column prop="update_at" label="更新时间" width="180" sortable></el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <div class="action-buttons">
+              <el-button size="small" type="primary" :icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button size="small" type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-dialog v-model="contentDialogVisible" title="文章内容详情" :width="`800px`" :before-close="handleCloseDialog">
+        <h3 class="text-xl font-bold text-gray-800 mb-4">标题： {{ currentArticle.title }}</h3>
+        <div class="content-full text-gray-700 leading-relaxed whitespace-pre-wrap" v-html="currentArticle.content || '当前文章暂无内容'">
+        </div>
+      </el-dialog>
+    </div>
+
+    <div class="fixed bottom-0 right-0 w-full p-4 bg-white shadow-[0_-2px_5px_rgba(0,0,0,0.05)] flex justify-end z-10 border-t border-gray-200">
+      <el-pagination class="custom-pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total" v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
+    </div>
+
+    <el-drawer v-model="drawerVisible" title="编辑文章" direction="rtl" size="60%" :before-close="handleDrawerClose" destroy-on-close>
+      <div class="publish-form-container">
+        <div class="form-group title-group">
+          <label class="form-label">文章标题</label>
+          <el-input v-model="form.title" placeholder="请输入文章标题" clearable :disabled="isSubmitting" />
+        </div>
+
+        <div class="form-group cover-group">
+          <label class="form-label">文章封面</label>
+          <el-upload action="http://localhost:8080/api/upload/cover" name="image" :show-file-list="false" :on-success="handleCoverSuccess" :before-upload="beforeCoverUpload" :on-error="handleCoverError" :disabled="isSubmitting">
+            <img v-if="form.cover" :src="form.cover" class="cover-preview" alt="封面"/>
+            <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+        </div>
+
+        <div class="form-group excerpt-group">
+          <label class="form-label">文章摘要</label>
+          <el-input
+              v-model="form.excerpt"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入文章摘要（可选，若不填则自动从正文截取）"
+              clearable
+              :disabled="isSubmitting"
+          />
+        </div>
+
+        <div class="form-group content-group">
+          <label class="form-label">文章内容</label>
+          <div ref="editorRef" class="quill-editor"></div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="handleDrawerClose">取消</el-button>
+          <el-button type="primary" @click="submitArticle" :loading="isSubmitting">
+            更新文章
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+
+  </el-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, nextTick } from 'vue';
+import { ElMessage, ElMessageBox, ElDialog, ElConfigProvider, ElDrawer, ElInput, ElUpload } from 'element-plus';
+import { Edit, Delete, Plus } from '@element-plus/icons-vue';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+import type { UploadProps } from 'element-plus';
+
+// --- 类型定义 ---
+interface Article {
+  id: number;
+  title: string;
+  content: string;
+  cover: string;
+  create_at: string;
+  update_at: string;
+  is_delete: number;
+  topic: string;
+  excerpt: string;
+}
+
+interface ListArticleReq {
+  page: number;
+  size: number;
+  topic: string;
+}
+
+// --- API 基地址 ---
+const API_BASE_URL = 'http://localhost:8080/api';
+
+// =================================================================
+//                      列表页相关状态与逻辑
+// =================================================================
+const loading = ref(true);
+const tableData = ref<Article[]>([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const contentDialogVisible = ref(false);
+const currentArticle = ref<Article>({ id: 0, title: '', content: '', cover: '', create_at: '', update_at: '', is_delete: 0, topic: '', excerpt: '' });
+
+// --- HTML清理函数 ---
+const stripHtml = (html: string) => {
+  if (!html) return '';
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = html;
+  return tempDiv.textContent || tempDiv.innerText || '';
+};
+
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"资源案例" };
+    const response = await fetch(`${API_BASE_URL}/articles/getarticle`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(reqData)
+    });
+    if (!response.ok) throw new Error(`请求失败！状态码：${response.status}`);
+    const data = await response.json();
+    tableData.value = data.Article_list || [];
+    total.value = data.total || 0;
+  } catch (error) {
+    console.error('[ERROR] 获取文章列表失败：', error);
+    ElMessage.error('获取文章列表失败，请检查接口或网络！');
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(fetchData);
+
+const handleViewContent = (row: Article) => {
+  currentArticle.value = { ...row };
+  contentDialogVisible.value = true;
+};
+
+const handleCloseDialog = () => {
+  contentDialogVisible.value = false;
+};
+
+// --- 🔥 新增：删除功能 ---
+const handleDelete = (row: Article) => {
+  ElMessageBox.confirm(`确定要删除文章《${row.title}》吗？此操作无法撤销！`, '警告', {
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(async () => {
+        try {
+          const response = await fetch(`${API_BASE_URL}/articles/${row.id}`, {
+            method: 'DELETE',
+          });
+          if (!response.ok) {
+            // 如果后端返回错误信息，尝试解析并显示
+            const errData = await response.json().catch(() => null);
+            throw new Error(errData?.message || '删除失败');
+          }
+          ElMessage.success('删除成功！');
+          // 刷新列表数据
+          fetchData();
+        } catch (error) {
+          console.error('[ERROR] 删除文章失败：', error);
+          ElMessage.error(`删除文章失败: ${(error as Error).message}`);
+        }
+      })
+      .catch(() => {
+        ElMessage.info('已取消删除');
+      });
+};
+
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+  fetchData();
+};
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  fetchData();
+};
+
+// =================================================================
+//                      抽屉编辑相关状态与逻辑
+// =================================================================
+const drawerVisible = ref(false);
+const isSubmitting = ref(false);
+
+const defaultFormState = () => ({
+  id: null as number | null,
+  title: '',
+  topic: 'news',
+  cover: '',
+  content: '',
+  excerpt: '',
+});
+const form = ref(defaultFormState());
+
+// --- 富文本编辑器 ---
+const editorRef = ref<HTMLDivElement | null>(null);
+let quillInstance: Quill | null = null;
+
+const initQuillEditor = () => {
+  if (editorRef.value && !quillInstance) {
+    quillInstance = new Quill(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: [['bold', 'italic', 'underline'], ['link', 'image']],
+          handlers: {
+            image: handleEditorImageUpload,
+          }
+        }
+      },
+      placeholder: '请开始创作你的文章...'
+    });
+
+    quillInstance.on('text-change', (delta, _, source) => {
+      if (source === 'user') {
+        const pastedBase64 = getPastedBase64Image(delta);
+        if (pastedBase64) {
+          const selection = quillInstance?.getSelection();
+          if (!selection) return;
+
+          const imageIndex = selection.index;
+          quillInstance?.deleteText(imageIndex, 1);
+          const blob = base64ToBlob(pastedBase64);
+
+          if (blob) {
+            const file = new File([blob], `pasted-image-${Date.now()}.png`, { type: blob.type });
+            uploadEditorImage(file, imageIndex);
+          }
+        }
+      }
+    });
+  }
+};
+
+watch(drawerVisible, (visible) => {
+  if (visible) {
+    nextTick(() => {
+      initQuillEditor();
+      if (quillInstance) {
+        quillInstance.root.innerHTML = form.value.content;
+      }
+    });
+  } else {
+    quillInstance = null;
+  }
+});
+
+// --- 编辑器图片上传相关函数 ---
+function handleEditorImageUpload() {
+  const fileInput = document.createElement('input');
+  fileInput.type = 'file';
+  fileInput.accept = 'image/*';
+
+  fileInput.onchange = () => {
+    const file = fileInput.files?.[0];
+    if (!file) return;
+
+    const selection = quillInstance?.getSelection();
+    const insertIndex = selection ? selection.index : quillInstance?.getLength() || 0;
+    uploadEditorImage(file, insertIndex);
+    fileInput.value = '';
+  };
+
+  fileInput.click();
+}
+
+async function uploadEditorImage(file: File, insertIndex: number) {
+  if (!quillInstance) return;
+
+  quillInstance.insertText(insertIndex, '[图片上传中...]', { color: '#999', italic: true });
+
+  try {
+    const formData = new FormData();
+    formData.append('image', file);
+
+    const response = await fetch(`${API_BASE_URL}/upload/image`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) throw new Error(`HTTP状态码：${response.status}`);
+    const result = await response.json();
+    const imageUrl = result.data?.url;
+
+    if (!imageUrl) throw new Error('未从响应中获取到图片地址');
+
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertEmbed(insertIndex, 'image', imageUrl);
+    quillInstance.setSelection(insertIndex + 1);
+
+  } catch (err) {
+    const errMsg = err instanceof Error ? err.message : '未知错误';
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertText(insertIndex, `[图片上传失败：${errMsg}]`, { color: '#f56c6c', italic: true });
+    ElMessage.error(`编辑器图片上传失败：${errMsg}`);
+  }
+}
+
+function getPastedBase64Image(delta: any): string | null {
+  if (!delta?.ops) return null;
+  for (const op of delta.ops) {
+    if (
+        op.insert &&
+        typeof op.insert === 'object' &&
+        op.insert.image &&
+        op.insert.image.startsWith('data:image')
+    ) {
+      return op.insert.image;
+    }
+  }
+  return null;
+}
+
+function base64ToBlob(base64: string): Blob | null {
+  try {
+    const [prefix, data] = base64.split(',');
+    if (!prefix || !data) throw new Error('base64格式错误');
+
+    const mimeMatch = prefix.match(/data:(.*?);/);
+    if (!mimeMatch) throw new Error('无法解析图片类型');
+    const mime = mimeMatch[1];
+
+    const binaryData = atob(data);
+    const bytes = new Uint8Array(binaryData.length);
+    for (let i = 0; i < binaryData.length; i++) {
+      bytes[i] = binaryData.charCodeAt(i);
+    }
+
+    return new Blob([bytes], { type: mime });
+  } catch (error) {
+    console.error('base64转Blob失败：', error);
+    ElMessage.error('解析粘贴的图片失败！');
+    return null;
+  }
+}
+
+// --- 操作处理 ---
+const handleEdit = (row: Article) => {
+  form.value = {
+    id: row.id,
+    title: row.title,
+    topic: row.topic,
+    cover: row.cover,
+    excerpt: row.excerpt,
+    content: row.content,
+  };
+  drawerVisible.value = true;
+};
+
+const handleDrawerClose = () => {
+  drawerVisible.value = false;
+};
+
+const submitArticle = async () => {
+  if (!form.value.title) {
+    ElMessage.warning('请输入文章标题');
+    return;
+  }
+  if (!form.value.id) {
+    ElMessage.error('文章ID丢失，无法更新！');
+    return;
+  }
+
+  isSubmitting.value = true;
+  const contentHTML = quillInstance?.root.innerHTML || '';
+  const excerpt = form.value.excerpt.trim() || quillInstance?.getText().trim().slice(0, 150) || '';
+
+  const submitData = {
+    title: form.value.title,
+    cover: form.value.cover,
+    excerpt: excerpt,
+    content: contentHTML,
+    topic: form.value.topic,
+  };
+  console.log("修改文章信息：",JSON.stringify(submitData));
+
+  try {
+    const url = `${API_BASE_URL}/articles/${Number(form.value.id)}`;
+    const method = 'PUT';
+
+    const response = await fetch(url, {
+      method: method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(submitData),
+    });
+
+    if (!response.ok) throw new Error('提交失败');
+
+    ElMessage.success('文章更新成功！');
+    drawerVisible.value = false;
+    fetchData();
+
+  } catch (error) {
+    const err = error as Error;
+    ElMessage.error(`更新失败: ${err.message}`);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+// --- 封面上传处理 ---
+const handleCoverSuccess: UploadProps['onSuccess'] = (response) => {
+  const ossUrl = response.data?.url;
+  if (ossUrl) {
+    form.value.cover = ossUrl;
+    ElMessage.success('封面上传成功');
+  } else {
+    ElMessage.error('封面上传失败');
+  }
+};
+
+const beforeCoverUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const isLt5M = rawFile.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB!');
+  }
+  return isLt5M;
+};
+
+const handleCoverError = () => {
+  ElMessage.error('封面上传失败');
+};
+
+</script>
+
+<style scoped>
+/* 表格样式 */
+.el-table .el-table__cell { vertical-align: middle; }
+.el-table__header-wrapper th { background-color: #fafafa !important; font-weight: 600; color: #333; }
+.action-buttons .el-button { margin-right: 8px; }
+.content-preview { color: #666; line-height: 1.5; word-break: break-all; }
+.content-full { min-height: 300px; padding: 20px; background-color: #f9fafb; border-radius: 8px; }
+.el-dialog__title { font-size: 18px !important; font-weight: 600 !important; }
+
+/* 分页器样式 */
+.custom-pagination { justify-content: flex-end !important; }
+.custom-pagination .el-pagination__total,
+.custom-pagination .el-pagination__sizes,
+.custom-pagination .el-pagination__jump { margin-right: 16px !important; }
+.custom-pagination .el-pagination__jump .el-input { width: 60px !important; }
+
+/* 抽屉内表单样式 */
+.publish-form-container { padding: 0 20px; }
+.form-group { margin-bottom: 24px; }
+.form-label { display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; }
+.quill-editor { height: 350px; border-radius: 4px; border: 1px solid #dcdfe6; }
+.cover-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; }
+.cover-uploader .el-upload:hover { border-color: #409EFF; }
+.cover-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
+.cover-preview { width: 178px; height: 178px; display: block; object-fit: cover; }
+</style>
diff --git a/server/internal/article/handler/article/deletearticlehandler.go b/server/internal/article/handler/article/deletearticlehandler.go
index a2f01a82..12228411 100644
--- a/server/internal/article/handler/article/deletearticlehandler.go
+++ b/server/internal/article/handler/article/deletearticlehandler.go
@@ -4,23 +4,57 @@
 package article
 
 import (
+	"fmt"
 	"net/http"
+	"strconv"
+	"strings"
 
 	"github.com/JACKYMYPERSON/hldrCenter/config"
 	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/logic/article"
+	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/model"
 	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/types"
+	"github.com/zeromicro/go-zero/core/stores/sqlx"
 	"github.com/zeromicro/go-zero/rest/httpx"
 )
 
 func DeleteArticleHandler(cfg *config.Config) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		var req types.DeleteArticleReq
-		if err := httpx.Parse(r, &req); err != nil {
-			httpx.ErrorCtx(r.Context(), w, err)
+
+		// 1. 从URL路径提取id（核心步骤）
+		pathParts := strings.Split(r.URL.Path, "/")
+		// 完整路径是 "/api/articles/12"，split后应为 ["", "api", "articles", "12"]
+		if len(pathParts) < 4 {
+			httpx.ErrorCtx(r.Context(), w, fmt.Errorf("无效的 URL 路径"))
 			return
 		}
+		idStr := pathParts[3]
+		id, err := strconv.ParseInt(idStr, 10, 64)
+		if err != nil || id <= 0 { // 增加id有效性校验
+			httpx.ErrorCtx(r.Context(), w, fmt.Errorf("无效的文章ID：%s", idStr))
+			return
+		}
+		req.Id = id // 只赋值一次，确保Id正确
 
-		l := article.NewDeleteArticleLogic(r.Context(), cfg)
+		// 验证：打印id，确认此时是正确的（如12）
+		fmt.Println("Handler中获取的文章ID：", req.Id)
+
+		mysqlCfg := cfg.MySQL
+		dsn := fmt.Sprintf(
+			"%s:%s@tcp(%s:%d)/%s?charset=%s&parseTime=true&loc=Local",
+			mysqlCfg.Username,
+			mysqlCfg.Password,
+			mysqlCfg.Host,
+			mysqlCfg.Port,
+			mysqlCfg.Database,
+			mysqlCfg.Charset,
+		)
+		fmt.Println("接收到articlePost请求")
+
+		conn := sqlx.NewSqlConn("mysql", dsn)
+		articleModel := model.NewArticleModel(conn)
+
+		l := article.NewDeleteArticleLogic(r.Context(), cfg, articleModel)
 		resp, err := l.DeleteArticle(&req)
 		if err != nil {
 			httpx.ErrorCtx(r.Context(), w, err)
diff --git a/server/internal/article/handler/article/listarticlehandler.go b/server/internal/article/handler/article/listarticlehandler.go
index efc5362d..2ec3570e 100644
--- a/server/internal/article/handler/article/listarticlehandler.go
+++ b/server/internal/article/handler/article/listarticlehandler.go
@@ -33,7 +33,7 @@ func ListArticleHandler(cfg *config.Config) http.HandlerFunc {
 			mysqlCfg.Database,
 			mysqlCfg.Charset,
 		)
-		fmt.Println("接收到articlePost请求")
+		fmt.Println("接收到获取文章列表请求：", req)
 
 		conn := sqlx.NewSqlConn("mysql", dsn)
 		articleModel := model.NewArticleModel(conn)
diff --git a/server/internal/article/handler/article/updatearticlehandler.go b/server/internal/article/handler/article/updatearticlehandler.go
index 05e636c0..1ab35e0d 100644
--- a/server/internal/article/handler/article/updatearticlehandler.go
+++ b/server/internal/article/handler/article/updatearticlehandler.go
@@ -4,23 +4,57 @@
 package article
 
 import (
+	"fmt"
 	"net/http"
+	"strconv"
+	"strings"
 
 	"github.com/JACKYMYPERSON/hldrCenter/config"
 	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/logic/article"
+	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/model"
 	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/types"
+	"github.com/zeromicro/go-zero/core/stores/sqlx"
 	"github.com/zeromicro/go-zero/rest/httpx"
 )
 
 func UpdateArticleHandler(cfg *config.Config) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		var req types.UpdateArticleReq
+
+		pathParts := strings.Split(r.URL.Path, "/")
+		// 确保路径格式正确（至少包含 4 个部分：["", "api", "articles", "12"]）
+		if len(pathParts) < 4 {
+			httpx.ErrorCtx(r.Context(), w, fmt.Errorf("无效的 URL 路径"))
+			return
+		}
+		idStr := pathParts[3] // 取路径中最后一个部分（如 "12"）
+		id, err := strconv.ParseInt(idStr, 10, 64)
+		fmt.Println("访问路径：", id)
+		req.Id = id
+
 		if err := httpx.Parse(r, &req); err != nil {
 			httpx.ErrorCtx(r.Context(), w, err)
 			return
 		}
 
-		l := article.NewUpdateArticleLogic(r.Context(), cfg)
+		// 新增：打印绑定后的req.Id，确认是否为12
+		fmt.Println("Handler中获取的文章ID：", req.Id)
+
+		mysqlCfg := cfg.MySQL
+		dsn := fmt.Sprintf(
+			"%s:%s@tcp(%s:%d)/%s?charset=%s&parseTime=true&loc=Local",
+			mysqlCfg.Username,
+			mysqlCfg.Password,
+			mysqlCfg.Host,
+			mysqlCfg.Port,
+			mysqlCfg.Database,
+			mysqlCfg.Charset,
+		)
+
+		conn := sqlx.NewSqlConn("mysql", dsn)
+		articleModel := model.NewArticleModel(conn)
+
+		l := article.NewUpdateArticleLogic(r.Context(), cfg, articleModel)
 		resp, err := l.UpdateArticle(&req)
 		if err != nil {
 			httpx.ErrorCtx(r.Context(), w, err)
diff --git a/server/internal/article/internal/logic/article/deletearticlelogic.go b/server/internal/article/internal/logic/article/deletearticlelogic.go
index 08ee3342..d75010fb 100644
--- a/server/internal/article/internal/logic/article/deletearticlelogic.go
+++ b/server/internal/article/internal/logic/article/deletearticlelogic.go
@@ -5,8 +5,10 @@ package article
 
 import (
 	"context"
+	"errors"
 
 	"github.com/JACKYMYPERSON/hldrCenter/config"
+	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/model"
 	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/types"
 
 	"github.com/zeromicro/go-zero/core/logx"
@@ -14,20 +16,35 @@ import (
 
 type DeleteArticleLogic struct {
 	logx.Logger
-	ctx context.Context
-	cfg *config.Config
+	ctx   context.Context
+	cfg   *config.Config
+	model model.ArticleModel
 }
 
-func NewDeleteArticleLogic(ctx context.Context, cfg *config.Config) *DeleteArticleLogic {
+func NewDeleteArticleLogic(ctx context.Context, cfg *config.Config, model model.ArticleModel) *DeleteArticleLogic {
 	return &DeleteArticleLogic{
 		Logger: logx.WithContext(ctx),
 		ctx:    ctx,
 		cfg:    cfg,
+		model:  model,
 	}
 }
 
 func (l *DeleteArticleLogic) DeleteArticle(req *types.DeleteArticleReq) (resp *types.DeleteArticleResp, err error) {
-	// todo: add your logic here and delete this line
+	// 1. 校验参数：确保文章ID有效（大于0）
+	if req.Id <= 0 {
+		return nil, errors.New("无效的文章ID")
+	}
 
-	return
+	// 2. 调用Model层执行逻辑删除（更新is_delete=1）
+	err = l.model.Delete(l.ctx, req.Id)
+	if err != nil {
+		// 可根据实际错误类型返回更具体的信息
+		return nil, errors.New("删除文章失败：" + err.Error())
+	}
+
+	// 3. 返回成功响应
+	return &types.DeleteArticleResp{
+		Success: true,
+	}, nil
 }
diff --git a/server/internal/article/internal/logic/article/listarticlelogic.go b/server/internal/article/internal/logic/article/listarticlelogic.go
index 92ff9510..c1e9bcb9 100644
--- a/server/internal/article/internal/logic/article/listarticlelogic.go
+++ b/server/internal/article/internal/logic/article/listarticlelogic.go
@@ -93,11 +93,6 @@ func (l *ListArticleLogic) ListArticle(req *types.ListArticleReq) (resp *types.L
 		Page:      page,         // 当前页码（处理后的有效值）
 		Size:      size,         // 每页条数（处理后的有效值）
 	}
-	for i, item := range resp.List {
-		fmt.Printf("[DEBUG] 响应第 %d 条文章的 Content：%q\n", i+1, item.Content)
-	}
-
-	l.Infof("文章列表查询成功：topic=%s, page=%d, size=%d, 总条数=%d, 总页数=%d",
-		topic, page, size, total, totalPage)
+	
 	return resp, nil
 }
diff --git a/server/internal/article/internal/logic/article/updatearticlelogic.go b/server/internal/article/internal/logic/article/updatearticlelogic.go
index 63fca8d9..4e6e6f07 100644
--- a/server/internal/article/internal/logic/article/updatearticlelogic.go
+++ b/server/internal/article/internal/logic/article/updatearticlelogic.go
@@ -5,29 +5,52 @@ package article
 
 import (
 	"context"
+	"fmt"
 
 	"github.com/JACKYMYPERSON/hldrCenter/config"
+	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/model"
 	"github.com/JACKYMYPERSON/hldrCenter/internal/article/internal/types"
+	"github.com/go-playground/validator/v10"
 
 	"github.com/zeromicro/go-zero/core/logx"
 )
 
 type UpdateArticleLogic struct {
 	logx.Logger
-	ctx context.Context
-	cfg *config.Config
+	ctx   context.Context
+	cfg   *config.Config
+	model model.ArticleModel
 }
 
-func NewUpdateArticleLogic(ctx context.Context, cfg *config.Config) *UpdateArticleLogic {
+func NewUpdateArticleLogic(ctx context.Context, cfg *config.Config, model model.ArticleModel) *UpdateArticleLogic {
 	return &UpdateArticleLogic{
 		Logger: logx.WithContext(ctx),
 		ctx:    ctx,
 		cfg:    cfg,
+		model:  model,
 	}
 }
 
 func (l *UpdateArticleLogic) UpdateArticle(req *types.UpdateArticleReq) (resp *types.UpdateArticleResp, err error) {
-	// todo: add your logic here and delete this line
+	validate := validator.New()
+	if err := validate.Struct(req); err != nil {
+		// 新增：打印校验失败原因
+		fmt.Println("参数校验失败：", err)
+		return nil, err
+	}
+	tmp := &model.ArticleUpdate{
+		Id:      req.Id,
+		Title:   req.Title,
+		Excerpt: req.Excerpt,
+		Cover:   req.Cover,
+		Content: req.Content,
+	}
 
-	return
+	fmt.Println("更改的文章信息：", tmp)
+	err = l.model.Update(l.ctx, tmp)
+	if err != nil {
+		return nil, fmt.Errorf("更新文章失败: %v", err)
+	}
+
+	return &types.UpdateArticleResp{Success: true}, nil
 }
diff --git a/server/internal/article/internal/model/articlemodel_gen.go b/server/internal/article/internal/model/articlemodel_gen.go
index 0209128a..9fddfc89 100644
--- a/server/internal/article/internal/model/articlemodel_gen.go
+++ b/server/internal/article/internal/model/articlemodel_gen.go
@@ -34,16 +34,28 @@ var (
 		"`is_delete`", // 9. 对应 is_delete
 	},
 	",",
-)
+	)
+	articleChangeFields = func() string {
+		// 获取ArticleUpdate的字段列表（假设RawFieldNames返回带`的字段名，如`title`）
+		fields := stringx.Remove(builder.RawFieldNames(&ArticleUpdate{}), "`id`")
+		// 拼接成 "`title`=?, `content`=?, ..." 格式
+		withPlaceholders := make([]string, len(fields))
+		for i, field := range fields {
+			withPlaceholders[i] = field + "=?"
+		}
+		// 用逗号连接所有字段
+		return strings.Join(withPlaceholders, ", ")
+	}()
 )
 
 type (
 	articleModel interface {
 		Insert(ctx context.Context, data *Article) (sql.Result, error)
 		FindOne(ctx context.Context, id int64) (*Article, error)
-		Update(ctx context.Context, data *Article) error
+		Update(ctx context.Context, data *ArticleUpdate) error
 		Delete(ctx context.Context, id int64) error
 		List(ctx context.Context, page, size int, topic string) ([]*Article, int64, error)
+
 	}
 
 	DefaultArticleModel struct {
@@ -75,6 +87,15 @@ type (
 	IsDelete int64     `db:"is_delete"` // 与第9个字段对应
 	}
 
+
+	ArticleUpdate struct {
+		Id       int64     `db:"id"`
+		Title    string    `db:"title"`
+		Content  string    `db:"content"`
+		Cover    string    `db:"cover"`
+		Excerpt  string    `db:"excerpt"`
+	}
+
 )
 
 func newArticleModel(conn sqlx.SqlConn) *DefaultArticleModel {
@@ -85,7 +106,9 @@ func newArticleModel(conn sqlx.SqlConn) *DefaultArticleModel {
 }
 
 func (m *DefaultArticleModel) Delete(ctx context.Context, id int64) error {
-	query := fmt.Sprintf("delete from %s where `id` = ?", m.table)
+	// 逻辑删除：更新is_delete字段为1（1表示已删除）
+	query := fmt.Sprintf("update %s set `is_delete` = 1 where `id` = ?", m.table)
+	// 执行更新操作，参数为文章ID（where条件）
 	_, err := m.conn.ExecCtx(ctx, query, id)
 	return err
 }
@@ -110,10 +133,20 @@ func (m *DefaultArticleModel) Insert(ctx context.Context, data *Article) (sql.Re
 	return ret, err
 }
 
-func (m *DefaultArticleModel) Update(ctx context.Context, data *Article) error {
-	query := fmt.Sprintf("update %s set %s where `id` = ?", m.table, articleRowsWithPlaceHolder)
-	fmt.Println("Insert SQL 字段列表：", articleRowsExpectAutoSet)
-	_, err := m.conn.ExecCtx(ctx, query, data.Title, data.Content, data.Cover, data.IsDelete, data.Topic, data.Excerpt, data.Id)
+func (m *DefaultArticleModel) Update(ctx context.Context, data *ArticleUpdate) error {
+	query := fmt.Sprintf("update %s set %s where `id` = ?", m.table, articleChangeFields)
+	fmt.Println("Update SQL:", query) // 打印SQL便于调试
+
+	// 参数顺序：与articleChangeFields中的字段顺序一致，最后跟where条件的id
+	_, err := m.conn.ExecCtx(
+		ctx,
+		query,
+		data.Title,   // 对应`title`=?
+		data.Content, // 对应`content`=?
+		data.Cover,   // 对应`cover`=?
+		data.Excerpt, // 对应`excerpt`=?
+		data.Id,      // 对应where `id`=?
+	)
 	return err
 }
 
@@ -172,9 +205,6 @@ func (m *DefaultArticleModel) List(ctx context.Context, page, size int, topic st
 	articleList := make([]*Article, 0, len(tempList))
 	for _, item := range tempList {
 
-		fmt.Printf("[DEBUG] 扫描到的文章ID：%d，Content值：%q\n", item.Id, item.Content)
-		// 打印 SQL 实际查询的字段，确认 content 存在
-		fmt.Printf("[DEBUG] SQL 查询字段：%s\n", articleListFields)
 		articleList = append(articleList, &Article{
 			Id:       item.Id,       // 主键
 			Title:    item.Title,    // 标题
@@ -187,9 +217,6 @@ func (m *DefaultArticleModel) List(ctx context.Context, page, size int, topic st
 			IsDelete: item.IsDelete, // 软删除状态
 		})
 	}
-	for i, item := range articleList {
-		fmt.Printf("[DEBUG] 响应第 %d 条文章的 Content：%q\n", i+1, item.Content)
-	}
 
 
 	// 5. 返回结果（Article 切片+总条数+无错误）
diff --git a/server/internal/article/internal/types/types.go b/server/internal/article/internal/types/types.go
index c425c9c5..19a065b2 100644
--- a/server/internal/article/internal/types/types.go
+++ b/server/internal/article/internal/types/types.go
@@ -36,7 +36,7 @@ type DeleteArticleResp struct {
 }
 
 type DetailArticleReq struct {
-	Id int64 `path:"id"` // 从路径参数取 ID，如 /api/articles/:id
+	Id int64 `uri:"id"  binding:"required,min=1"` // 从路径参数取 ID，如 /api/articles/:id
 }
 
 type DetailArticleResp struct {
@@ -59,11 +59,10 @@ type ListArticleResp struct {
 }
 
 type UpdateArticleReq struct {
-	Id      int64  `path:"id"` // 要更新的文章 ID
+	Id      int64  `uri:"id"  binding:"required,min=1"` // 要更新的文章 ID
 	Title   string `json:"title,optional"`
 	Content string `json:"content,optional"`
 	Cover   string `json:"cover,optional"`
-	Topic   string `json:"topic,optional"`
 	Excerpt string `json:"excerpt,optional"`
 }
 
diff --git a/web/package-lock.json b/web/package-lock.json
index 2aa8ac3c..96d2715f 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "hldrweb",
       "version": "0.0.0",
       "dependencies": {
+        "element-plus": "^2.11.4",
         "pinia": "^3.0.3",
         "vue": "^3.5.22",
         "vue-router": "^4.5.1"
@@ -485,6 +486,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.10",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
@@ -1064,6 +1081,28 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmmirror.com/@humanfs/core/-/core-0.19.1.tgz",
@@ -1209,6 +1248,16 @@
       "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.29",
       "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
@@ -1537,6 +1586,19 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.18.8",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.18.8.tgz",
@@ -1546,6 +1608,11 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.45.0",
       "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.45.0.tgz",
@@ -2149,6 +2216,89 @@
         }
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz",
@@ -2222,6 +2372,11 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2440,6 +2595,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
@@ -2509,6 +2669,31 @@
       "integrity": "sha512-A6A6Fd3+gMdaed9wX83CvHYJb4UuapPD5X5SLq72VZJzxHSY0/LUweGXRWmQlh2ln7KV7iw7jnwXK7dlPoOnHQ==",
       "dev": true
     },
+    "node_modules/element-plus": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.11.4.tgz",
+      "integrity": "sha512-sLq+Ypd0cIVilv8wGGMEGvzRVBBsRpJjnAS5PsI/1JU1COZXqzH3N1UYMUc/HCdvdjf6dfrBy80Sj7KcACsT7w==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.17.20",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.13",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -2579,6 +2764,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3400,6 +3590,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3423,6 +3633,11 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmmirror.com/memorystream/-/memorystream-0.3.1.tgz",
@@ -3524,6 +3739,11 @@
       "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
       "dev": true
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/npm-normalize-package-bin": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/npm-normalize-package-bin/-/npm-normalize-package-bin-4.0.0.tgz",
@@ -5165,6 +5385,17 @@
         "@babel/helper-validator-identifier": "^7.27.1"
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
+    },
+    "@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "requires": {}
+    },
     "@esbuild/aix-ppc64": {
       "version": "0.25.10",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
@@ -5469,6 +5700,28 @@
         "levn": "^0.4.1"
       }
     },
+    "@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "requires": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "requires": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
+    },
     "@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmmirror.com/@humanfs/core/-/core-0.19.1.tgz",
@@ -5576,6 +5829,11 @@
       "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@rolldown/pluginutils": {
       "version": "1.0.0-beta.29",
       "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
@@ -5766,6 +6024,19 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="
+    },
+    "@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/node": {
       "version": "22.18.8",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.18.8.tgz",
@@ -5775,6 +6046,11 @@
         "undici-types": "~6.21.0"
       }
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "8.45.0",
       "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.45.0.tgz",
@@ -6201,6 +6477,46 @@
       "dev": true,
       "requires": {}
     },
+    "@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+    },
+    "@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.10",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+          "requires": {}
+        }
+      }
+    },
     "acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz",
@@ -6253,6 +6569,11 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6395,6 +6716,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
+    },
     "debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
@@ -6438,6 +6764,28 @@
       "integrity": "sha512-A6A6Fd3+gMdaed9wX83CvHYJb4UuapPD5X5SLq72VZJzxHSY0/LUweGXRWmQlh2ln7KV7iw7jnwXK7dlPoOnHQ==",
       "dev": true
     },
+    "element-plus": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.11.4.tgz",
+      "integrity": "sha512-sLq+Ypd0cIVilv8wGGMEGvzRVBBsRpJjnAS5PsI/1JU1COZXqzH3N1UYMUc/HCdvdjf6dfrBy80Sj7KcACsT7w==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.17.20",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.13",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      }
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -6489,6 +6837,11 @@
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true
     },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -7044,6 +7397,22 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "requires": {}
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7067,6 +7436,11 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmmirror.com/memorystream/-/memorystream-0.3.1.tgz",
@@ -7138,6 +7512,11 @@
       "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
       "dev": true
     },
+    "normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "npm-normalize-package-bin": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/npm-normalize-package-bin/-/npm-normalize-package-bin-4.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 00d6d5e8..94b38536 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,6 +16,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "element-plus": "^2.11.4",
     "pinia": "^3.0.3",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
diff --git a/web/src/App.vue b/web/src/App.vue
index 7905b051..c86c1c98 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,85 +1,11 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <HomeView></HomeView>
 </template>
 
+<script setup lang="ts">
+import HomeView from '@/views/HomeView.vue'
+</script>
+
 <style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
 </style>
diff --git a/web/src/assets/main.css b/web/src/assets/main.css
deleted file mode 100644
index 36fb845b..00000000
--- a/web/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/web/src/components/HelloWorld.vue b/web/src/components/HelloWorld.vue
deleted file mode 100644
index d174cf8e..00000000
--- a/web/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/web/src/components/TheWelcome.vue b/web/src/components/TheWelcome.vue
deleted file mode 100644
index 8b731d91..00000000
--- a/web/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-
-const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
-      >Vue - Official</a
-    >. If you need to test your components and web pages, check out
-    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
-    and
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
-    /
-    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
-
-    <br />
-
-    More instructions are available in
-    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
-    >.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
-    (our official Discord server), or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also follow the official
-    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
-    Bluesky account or the
-    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    X account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
diff --git a/web/src/components/WelcomeItem.vue b/web/src/components/WelcomeItem.vue
deleted file mode 100644
index 6d7086ae..00000000
--- a/web/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
diff --git a/web/src/components/icons/IconCommunity.vue b/web/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b055..00000000
--- a/web/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconDocumentation.vue b/web/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791cf..00000000
--- a/web/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconEcosystem.vue b/web/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f078..00000000
--- a/web/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconSupport.vue b/web/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834d..00000000
--- a/web/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconTooling.vue b/web/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d7..00000000
--- a/web/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/web/src/main.ts b/web/src/main.ts
index 5dcad83c..2211c679 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,4 +1,4 @@
-import './assets/main.css'
+
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -6,9 +6,13 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(ElementPlus)
 
 app.mount('#app')
diff --git a/web/src/views/AboutView.vue b/web/src/views/AboutView.vue
index 756ad2a1..9bc6cdeb 100644
--- a/web/src/views/AboutView.vue
+++ b/web/src/views/AboutView.vue
@@ -1,15 +1,11 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div>
+
   </div>
 </template>
 
 <style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
+
 </style>
+<script setup lang="ts">
+</script>
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index d5c0217e..40f60cb7 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,9 +1,357 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+<template>
+  <div class="header-with-carousel">
+    <header class="top-navigation">
+      <div class="nav-left">
+        <div class="nav-title">湖北健康生活与康居环境设计研究中心</div>
+        <div class="nav-subtitle">湖北省高校人文社会科学重点研究基地</div>
+      </div>
+      <el-menu
+        class="nav-right"
+        mode="horizontal"
+        background-color="#b50009"
+        text-color="#fff"
+        active-text-color="#ffd700"
+        :default-active="activeIndex"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">首页</el-menu-item>
+        <el-menu-item index="2">基地概况</el-menu-item>
+        <el-menu-item index="3">科学研究</el-menu-item>
+        <el-menu-item index="4">学术交流</el-menu-item>
+        <el-menu-item index="5">社会服务</el-menu-item>
+        <el-menu-item index="6">案例资源</el-menu-item>
+      </el-menu>
+    </header>
+
+    <el-carousel
+      class="carousel-container"
+      height="400px"
+      indicator-position="bottom"
+      autoplay
+      interval="5000"
+      arrow="always"
+    >
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img
+            src="https://picsum.photos/1920/400?random=1"
+            alt="健康生活研究"
+            class="carousel-img"
+          >
+          <div class="carousel-caption">
+            <h3>健康生活环境设计研究成果展</h3>
+            <p>探索健康设计新路径，引领人居环境创新</p>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img
+            src="https://picsum.photos/1920/400?random=2"
+            alt="学术研讨会"
+            class="carousel-img"
+          >
+          <div class="carousel-caption">
+            <h3>2025健康设计国际学术研讨会</h3>
+            <p>汇聚全球专家智慧，共话健康人居未来</p>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <el-carousel-item>
+        <div class="carousel-item">
+          <img
+            src="https://picsum.photos/1920/400?random=3"
+            alt="社区服务案例"
+            class="carousel-img"
+          >
+          <div class="carousel-caption">
+            <h3>社区健康服务创新实践</h3>
+            <p>以设计赋能社区，提升居民生活品质</p>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+
+  <div class="news-section">
+    <div class="section-header">
+      <h2>新闻动态 <span class="en-title">News</span></h2>
+      <el-link class="more-btn">More</el-link>
+    </div>
+
+    <div class="news-cards">
+      <el-card
+        class="news-card"
+        v-for="(news, index) in newsList"
+        :key="index"
+        shadow="hover"
+        :body-style="{ padding: '0px' }"
+      >
+        <img :src="news.imageUrl" alt="新闻图片" class="card-img">
+        <div class="card-content">
+          <h3 class="card-title">{{ news.title }}</h3>
+          <p class="card-desc">{{ news.desc }}</p>
+          <el-button type="text" class="detail-btn">
+            <el-icon><ArrowRight /></el-icon> 详情
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+// **修复点1：将所有用到的 Element Plus 组件一次性导入**
+import {
+  ElMenu,
+  ElMenuItem,
+  ElCarousel,
+  ElCarouselItem,
+  ElLink,
+  ElCard,
+  ElButton,
+  ElIcon
+} from 'element-plus';
+// **修复点2：从 @element-plus/icons-vue 导入图标**
+import { ArrowRight } from '@element-plus/icons-vue';
+
+
+// 导航菜单激活项
+const activeIndex = ref('1');
+const handleSelect = (index: string) => {
+  activeIndex.value = index;
+  // 可添加导航跳转逻辑
+};
+
+// 模拟新闻数据（实际项目可替换为接口请求）
+const newsList = ref([
+  {
+    imageUrl: 'https://picsum.photos/300/200?random=10', // 随机图片占位
+    title: '健康设计与知识创新国际学术研讨会',
+    desc: '探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。'
+  },
+  {
+    imageUrl: 'https://picsum.photos/300/200?random=11',
+    title: '第二届中国研究生“美丽中国”创新设计大赛',
+    desc: '探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。'
+  },
+  {
+    imageUrl: 'https://picsum.photos/300/200?random=12',
+    title: '国家一流专业中期建设成果展',
+    desc: '探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。'
+  }
+]);
 </script>
 
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>
+<style scoped>
+.header-with-carousel {
+  width: 100%;
+}
+
+/* 顶部导航样式 */
+.top-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 50px; /* 增加左右边距 */
+  color: #fff;
+  background-color: #b50009;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.nav-left {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.4;
+}
+
+.nav-title {
+  font-size: 18px; /* 稍大一些 */
+  font-weight: bold;
+}
+
+.nav-subtitle {
+  font-size: 12px; /* 稍小一些，形成对比 */
+  opacity: 0.9;
+}
+
+.nav-right {
+  display: flex;
+  align-items: center;
+}
+
+.el-menu--horizontal {
+  border-bottom: none;
+}
+
+.el-menu-item {
+  padding: 0 20px !important; /* 增加菜单项间距 */
+  font-size: 16px;
+}
+
+/* 轮播图样式 */
+.carousel-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 保持图片比例并填充容器 */
+}
+
+.carousel-caption {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.7); /* 加深阴影 */
+  width: 80%;
+}
+
+.carousel-caption h3 {
+  font-size: 32px; /* 加大标题字号 */
+  margin-bottom: 15px;
+  font-weight: 500;
+}
+
+.carousel-caption p {
+  font-size: 18px;
+}
+
+/* --- 新闻动态部分 --- */
+.news-section {
+  max-width: 1200px; /* 内容居中，限制最大宽度 */
+  margin: 50px auto; /* 增加上下外边距 */
+  padding: 0 20px;
+}
+
+/* 标题栏 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 30px; /* 增加标题和内容间距 */
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 10px;
+}
+
+.section-header h2 {
+  font-size: 26px; /* 加大标题字号 */
+  margin: 0;
+  font-weight: 400;
+}
+
+.en-title {
+  font-size: 16px;
+  color: #999;
+  margin-left: 10px;
+  text-transform: uppercase; /* 英文大写 */
+}
+
+.more-btn {
+  color: #999;
+  font-size: 14px;
+}
+.more-btn:hover {
+  color: #b50009;
+}
+
+/* 新闻卡片列表 */
+.news-cards {
+  display: grid; /* 使用 Grid 布局，更灵活 */
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px; /* 卡片之间的间距 */
+}
+
+.news-card {
+  border: 1px solid #e0e0e0; /* 添加一个细微的边框 */
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.news-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.card-img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  display: block;
+}
+
+.card-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1; /* 让内容区域填满卡片剩余空间 */
+}
+
+.card-title {
+  font-size: 18px;
+  margin: 0 0 10px 0;
+  font-weight: 500;
+  color: #333;
+}
+
+.card-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.7;
+  flex-grow: 1; /* 让描述文本占满，将按钮推到底部 */
+  margin-bottom: 15px;
+}
+
+.detail-btn {
+  color: #b50009 !important; /* 按钮文字为红色主色调 */
+  display: flex;
+  align-items: center;
+  gap: 5px; /* 图标与文字间距 */
+  padding: 0 !important; /* 去除按钮默认 padding */
+  align-self: flex-start; /* 让按钮在左侧 */
+}
+
+
+/* --- 响应式调整 --- */
+@media (max-width: 992px) {
+  .news-cards {
+    grid-template-columns: repeat(2, 1fr); /* 平板：一行两个 */
+  }
+}
+
+@media (max-width: 768px) {
+  .top-navigation {
+    flex-direction: column;
+    padding: 15px;
+  }
+  .nav-left {
+    margin-bottom: 15px;
+    text-align: center;
+  }
+  .carousel-caption h3 {
+    font-size: 20px;
+  }
+  .carousel-caption p {
+    font-size: 14px;
+  }
+  .news-cards {
+    grid-template-columns: 1fr; /* 手机：一行一个 */
+  }
+}
+</style>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 4217010a..dc2e3eff 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -15,4 +15,12 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    // 设置服务启动端口号
+    port: 8000,
+    // 设置服务启动时是否自动打开浏览器
+    open: true,
+    // 允许IP访问
+    host: '0.0.0.0',
+  }
 })