增加模块市场

src/router/index.js

@@ -1,7 +1,17 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import { convertMenusToRoutes } from "./dynamicRoutes";
 
-// 静态路由：登录页独立，404 页面独立，home 导航门户独立
+// 静态子路由：需要在 Main 框架内显示的页面
+const staticMainChildren = [
+  {
+    path: "/user/userProfile",
+    name: "userProfile",
+    component: () => import("@/views/user/userProfile.vue"),
+    meta: { requiresAuth: true, title: "用户中心" }
+  }
+];
+
+// 静态路由：登录页独立、home 导航门户独立、404 页面独立
 const staticRoutes = [
   {
     path: "/login",
@@ -9,19 +19,20 @@ const staticRoutes = [
     component: () => import("@/views/login/index.vue"),
     meta: { requiresAuth: false }
   },
-  {
-    path: "/",
-    name: "Main",
-    component: () => import("@/views/Main.vue"),
-    redirect: "/dashboard",
-    meta: { requiresAuth: true }
-  },
   {
     path: "/home",
     name: "Home",
     component: () => import("@/views/home/index.vue"),
     meta: { requiresAuth: true, title: "系统导航", isStandalone: true }
   },
+  {
+    path: "/",
+    name: "Main",
+    component: () => import("@/views/Main.vue"),
+    redirect: "/dashboard",
+    meta: { requiresAuth: true },
+    children: staticMainChildren
+  },
   {
     path: "/:pathMatch(.*)*",
     name: "NotFound",
@@ -93,14 +104,14 @@ function addDynamicRoutes(menus) {
     router.removeRoute('Main');
   }
 
-  // 重新添加主路由
+  // 重新添加主路由，合并静态子路由和动态路由
   router.addRoute({
     path: "/",
     name: "Main",
     component: () => import("@/views/Main.vue"),
     redirect: "/dashboard",
     meta: { requiresAuth: true },
-    children: dynamicRoutes // 嵌套路由直接加入 children
+    children: [...staticMainChildren, ...dynamicRoutes] // 合并静态和动态子路由
   });
 
   dynamicRoutesAdded = true;
@@ -159,17 +170,11 @@ router.beforeEach(async (to, from, next) => {
   
   if (!dynamicRoutesAdded) {
     await loadAndAddDynamicRoutes();
-    // 路由加载后重新导航，确保路由匹配正确
+    // 路由加载后重新导航,确保路由匹配正确
     next({ path: to.path, replace: true });
     return;
   }
   
-  // 如果匹配不到路由，跳转到首页导航门户
-  if (to.matched.length === 0) {
-    next({ path: "/home" });
-    return;
-  }
-  
   next();
 });
 

src/views/apps/cms/analytics/content/index.vue

@@ -5,11 +5,8 @@
         <el-card shadow="never" class="stat-card">
           <div class="label">{{ card.label }}</div>
           <div class="count">{{ card.count.toLocaleString() }}</div>
-          <div class="sub-info">
+          <div class="sub-info" v-if="card.yesterday !== undefined">
-            昨日
+            昨日 {{ card.yesterday || 0 }}
-            <span :class="card.trend >= 0 ? 'plus' : 'minus'">
-              {{ card.trend >= 0 ? "+" : "" }}{{ card.trend }}
-            </span>
           </div>
         </el-card>
       </el-col>
@@ -72,7 +69,7 @@ import { getContentStats } from "@/api/analytics";
 interface TopCard {
   label: string;
   count: number;
-  trend: number;
+  yesterday?: number;
 }
 
 interface HotArticle {
@@ -92,10 +89,10 @@ const barChart = shallowRef<echarts.ECharts | null>(null);
 const categoryChart = shallowRef<echarts.ECharts | null>(null);
 
 const topCards = ref<TopCard[]>([
-  { label: "总发布量", count: 0, trend: 0 },
+  { label: "总发布量", count: 0 },
-  { label: "本月新增", count: 0, trend: 0 },
+  { label: "本月新增", count: 0 },
-  { label: "总点赞量", count: 0, trend: 0 },
+  { label: "总点赞量", count: 0 },
-  { label: "总访问量", count: 0, trend: 0 },
+  { label: "总访问量", count: 0 },
 ]);
 
 const hotContent = ref<HotArticle[]>([]);
@@ -103,13 +100,13 @@ const hotContent = ref<HotArticle[]>([]);
 async function fetchContentStats() {
   const res = await getContentStats();
   if (res.code === 200 && res.data) {
-    const { overview, hot_articles } = res.data;
+    const { total_articles, month_articles, total_likes, total_views, hot_articles } = res.data;
 
     topCards.value = [
-      { label: "总发布量", count: overview.total_articles.value, trend: overview.total_articles.growth },
+      { label: "总发布量", count: total_articles || 0 },
-      { label: "本月新增", count: overview.month_new.value, trend: overview.month_new.growth },
+      { label: "本月新增", count: month_articles || 0 },
-      { label: "总点赞量", count: overview.total_likes.value, trend: overview.total_likes.growth },
+      { label: "总点赞量", count: total_likes || 0 },
-      { label: "总访问量", count: overview.total_views.value, trend: overview.total_views.growth },
+      { label: "总访问量", count: total_views || 0 },
     ];
 
     hotContent.value = hot_articles || [];

src/views/moduleshop/center/index.vue

@@ -0,0 +1,647 @@
+<template>
+  <div class="modules-container">
+    <div class="header-section">
+      <div class="header-top">
+      <div class="category-tabs">
+        <div
+          v-for="category in categories"
+          :key="category.id"
+          class="category-item"
+          :class="{ active: activeCategory === category.id }"
+          @click="handleCategoryChange(category.id)"
+        >
+          {{ category.name }}
+        </div>
+      </div>
+      </div>
+    </div>
+
+    <div v-loading="loading" class="modules-grid">
+      <div
+        v-for="module in moduleList"
+        :key="module.id"
+        class="module-card"
+        :class="{ disabled: module.status === 0 }"
+      >
+        <div class="module-preview">
+          <div class="preview-image">
+            <el-icon :class="module.icon" :size="40" />
+          </div>
+        </div>
+
+        <div class="module-content">
+          <h3 class="module-name">{{ module.name }}</h3>
+          <p class="module-desc">{{ module.description || '暂无描述' }}</p>
+          <div class="module-footer">
+            <div class="module-company">
+              <el-icon><OfficeBuilding /></el-icon>
+              <span>{{ module.code }}</span>
+            </div>
+            <div class="module-downloads">
+              <el-icon><Download /></el-icon>
+              <span>{{ module.sort }} 次</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="module-actions">
+          <el-dropdown trigger="click" @command="(cmd) => handleCommand(cmd, module)">
+            <el-button type="primary" link :icon="MoreFilled" circle />
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="edit" :icon="Edit">编辑</el-dropdown-item>
+                <el-dropdown-item command="delete" :icon="Delete" divided>删除</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-tag :type="module.status === 1 ? 'success' : 'info'" size="small">
+            {{ module.status === 1 ? '已启用' : '已禁用' }}
+          </el-tag>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="moduleList.length === 0 && !loading" class="empty-state">
+      <el-empty description="暂无模块数据" :image-size="120" />
+    </div>
+
+    <create-modules
+      v-model="createDialogVisible"
+      @success="handleRefresh"
+    />
+
+    <el-dialog
+      v-model="editDialogVisible"
+      title="编辑模块"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="handleEditClose"
+    >
+      <el-form
+        ref="editFormRef"
+        :model="editFormData"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="模块名称" prop="name">
+          <el-input
+            v-model="editFormData.name"
+            placeholder="请输入模块名称"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="模块代码" prop="code">
+          <el-input
+            v-model="editFormData.code"
+            placeholder="请输入模块代码"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="模块图标" prop="icon">
+          <el-input
+            v-model="editFormData.icon"
+            placeholder="请输入图标类名，如: fa-solid fa-home"
+            clearable
+          >
+            <template #prefix>
+              <el-icon v-if="editFormData.icon" :class="editFormData.icon" />
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="模块描述" prop="description">
+          <el-input
+            v-model="editFormData.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入模块描述"
+          />
+        </el-form-item>
+
+        <el-form-item label="模块类型" prop="type">
+          <el-select
+            v-model="editFormData.type"
+            placeholder="请选择模块类型"
+          >
+            <el-option label="前端模块" :value="1" />
+            <el-option label="后端模块" :value="2" />
+            <el-option label="全栈模块" :value="3" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="editFormData.sort"
+            :min="0"
+            :max="999"
+            controls-position="right"
+            placeholder="请输入排序"
+          />
+        </el-form-item>
+
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="editFormData.status">
+            <el-radio :value="1">启用</el-radio>
+            <el-radio :value="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="editLoading" @click="handleEditSubmit">
+          确定
+        </el-button>
+      </template>
+    </el-dialog>
+    
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete, Sort, Clock, MoreFilled, OfficeBuilding, Download } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules } from "element-plus";
+import CreateModules from "../components/createModules.vue";
+
+interface Module {
+  id: number;
+  name: string;
+  code: string;
+  icon: string;
+  description: string;
+  type: number;
+  sort: number;
+  status: number;
+  created_at: string;
+}
+
+const loading = ref(false);
+const moduleList = ref<Module[]>([]);
+const createDialogVisible = ref(false);
+const editDialogVisible = ref(false);
+const editLoading = ref(false);
+const activeCategory = ref(0);
+
+// 分类数据
+const categories = ref([
+  { id: 0, name: "全部" },
+  { id: 1, name: "内容管理" },
+  { id: 2, name: "用户管理" },
+  { id: 3, name: "数据分析" },
+  { id: 4, name: "系统工具" },
+  { id: 5, name: "营销推广" }
+]);
+
+const handleCategoryChange = (categoryId: number) => {
+  activeCategory.value = categoryId;
+  // TODO: 根据分类筛选模块
+  fetchModuleList(categoryId);
+};
+
+const editFormRef = ref<FormInstance>();
+
+const editFormData = reactive({
+  id: 0,
+  name: "",
+  code: "",
+  icon: "",
+  description: "",
+  type: 3,
+  sort: 0,
+  status: 1
+});
+
+const formRules: FormRules = {
+  name: [
+    { required: true, message: "请输入模块名称", trigger: "blur" }
+  ],
+  code: [
+    { required: true, message: "请输入模块代码", trigger: "blur" },
+    { pattern: /^[a-zA-Z][a-zA-Z0-9]*$/, message: "代码必须以字母开头，只能包含字母和数字", trigger: "blur" }
+  ],
+  type: [
+    { required: true, message: "请选择模块类型", trigger: "change" }
+  ],
+  status: [
+    { required: true, message: "请选择状态", trigger: "change" }
+  ]
+};
+
+const getTypeText = (type: number) => {
+  const map: Record<number, string> = {
+    1: "前端模块",
+    2: "后端模块",
+    3: "全栈模块"
+  };
+  return map[type] || "未知";
+};
+
+const getTypeTagType = (type: number) => {
+  const map: Record<number, any> = {
+    1: "",
+    2: "warning",
+    3: "success"
+  };
+  return map[type] || "info";
+};
+
+const formatDate = (date: string) => {
+  if (!date) return "-";
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hours = String(d.getHours()).padStart(2, "0");
+  const minutes = String(d.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
+const handleCreate = () => {
+  createDialogVisible.value = true;
+};
+
+const handleCommand = (command: string, row: Module) => {
+  if (command === "edit") {
+    handleEdit(row);
+  } else if (command === "delete") {
+    handleDelete(row);
+  }
+};
+
+const handleEdit = (row: Module) => {
+  Object.assign(editFormData, row);
+  editDialogVisible.value = true;
+};
+
+const handleEditClose = () => {
+  editFormRef.value?.resetFields();
+  editDialogVisible.value = false;
+};
+
+const handleEditSubmit = async () => {
+  if (!editFormRef.value) return;
+
+  await editFormRef.value.validate(async (valid) => {
+    if (valid) {
+      editLoading.value = true;
+      try {
+        // TODO: 调用编辑接口
+        // await updateModule(editFormData.id, editFormData);
+        
+        ElMessage.success("编辑成功");
+        editDialogVisible.value = false;
+        handleRefresh();
+      } catch (error) {
+        console.error("编辑失败:", error);
+        ElMessage.error("编辑失败");
+      } finally {
+        editLoading.value = false;
+      }
+    }
+  });
+};
+
+const handleStatusChange = async (row: Module) => {
+  try {
+    // TODO: 调用状态更新接口
+    // await updateModuleStatus(row.id, row.status);
+    
+    ElMessage.success(row.status === 1 ? "已启用" : "已禁用");
+  } catch (error) {
+    console.error("状态更新失败:", error);
+    ElMessage.error("状态更新失败");
+    row.status = row.status === 1 ? 0 : 1;
+  }
+};
+
+const handleDelete = (row: Module) => {
+  ElMessageBox.confirm(`确定要删除模块"${row.name}"吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(async () => {
+    try {
+      // TODO: 调用删除接口
+      // await deleteModule(row.id);
+      
+      ElMessage.success("删除成功");
+      handleRefresh();
+    } catch (error) {
+      console.error("删除失败:", error);
+      ElMessage.error("删除失败");
+    }
+  }).catch(() => {});
+};
+
+const handleRefresh = () => {
+  fetchModuleList();
+};
+
+const fetchModuleList = async (categoryId?: number) => {
+  loading.value = true;
+  try {
+    // TODO: 调用获取模块列表接口，传入 categoryId 进行筛选
+    // const res = await getModuleList({ categoryId });
+    // if (res.code === 200) {
+    //   moduleList.value = res.data || [];
+    // }
+    
+    // 模拟数据
+    const allModules = [
+      {
+        id: 1,
+        name: "CMS内容管理",
+        code: "cms",
+        icon: "fa-solid fa-newspaper",
+        description: "内容管理系统模块，支持文章发布、分类管理等功能",
+        type: 1,
+        sort: 128,
+        status: 1,
+        categoryId: 1,
+        created_at: "2026-01-29 10:00:00"
+      },
+      {
+        id: 2,
+        name: "用户管理",
+        code: "user",
+        icon: "fa-solid fa-user",
+        description: "用户管理系统模块，支持用户增删改查、角色权限管理",
+        type: 2,
+        sort: 256,
+        status: 1,
+        categoryId: 2,
+        created_at: "2026-01-29 10:00:00"
+      },
+      {
+        id: 3,
+        name: "数据分析",
+        code: "analytics",
+        icon: "fa-solid fa-chart-column",
+        description: "数据分析模块，提供丰富的数据统计和可视化图表",
+        type: 2,
+        sort: 89,
+        status: 1,
+        categoryId: 3,
+        created_at: "2026-01-29 10:00:00"
+      },
+      {
+        id: 4,
+        name: "系统设置",
+        code: "system",
+        icon: "fa-solid fa-gear",
+        description: "系统配置管理模块，包含站点设置、菜单管理等功能",
+        type: 3,
+        sort: 45,
+        status: 0,
+        categoryId: 4,
+        created_at: "2026-01-29 10:00:00"
+      },
+      {
+        id: 5,
+        name: "SEO优化",
+        code: "seo",
+        icon: "fa-solid fa-magnifying-glass",
+        description: "搜索引擎优化模块，提升网站排名和流量",
+        type: 1,
+        sort: 67,
+        status: 1,
+        categoryId: 5,
+        created_at: "2026-01-29 10:00:00"
+      },
+      {
+        id: 6,
+        name: "表单构建器",
+        code: "form-builder",
+        icon: "fa-solid fa-wpforms",
+        description: "可视化表单构建工具，快速创建各类表单",
+        type: 1,
+        sort: 156,
+        status: 1,
+        categoryId: 4,
+        created_at: "2026-01-29 10:00:00"
+      }
+    ];
+
+    // 根据分类筛选
+    if (categoryId && categoryId !== 0) {
+      moduleList.value = allModules.filter(m => m.categoryId === categoryId);
+    } else {
+      moduleList.value = allModules;
+    }
+  } catch (error) {
+    console.error("获取模块列表失败:", error);
+    ElMessage.error("获取模块列表失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchModuleList();
+});
+</script>
+
+<style scoped lang="scss">
+.modules-container {
+  padding: 0;
+  margin-top: 50px;
+  min-height: 100vh;
+
+  .header-section {
+    margin-bottom: 24px;
+
+    .header-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 30px;
+
+      .page-title {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+      }
+    }
+
+    .category-tabs {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+
+      .category-item {
+        padding: 8px 20px;
+        border-radius: 20px;
+        font-size: 14px;
+        color: var(--el-text-color-regular);
+        background: var(--el-fill-color-light);
+        cursor: pointer;
+        transition: all 0.3s;
+        border: 1px solid transparent;
+
+        &:hover {
+          background: var(--el-fill-color);
+          color: var(--el-text-color-primary);
+        }
+
+        &.active {
+          background: var(--el-color-primary);
+          color: #fff;
+          border-color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+
+  .modules-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
+
+    .module-card {
+      background: var(--el-bg-color);
+      border-radius: 12px;
+      border: 1px solid var(--el-border-color-lighter);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      transition: all 0.3s;
+      overflow: hidden;
+      position: relative;
+
+      &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+        transform: translateY(-4px);
+        border-color: var(--el-color-primary-light-7);
+      }
+
+      &.disabled {
+        opacity: 0.6;
+        filter: grayscale(100%);
+      }
+
+      .module-preview {
+        width: 100%;
+        height: 180px;
+        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: -50%;
+          right: -50%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 100%);
+          transform: rotate(45deg);
+        }
+
+        .preview-image {
+          width: 80px;
+          height: 80px;
+          border-radius: 16px;
+          background: #fff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+          .el-icon {
+            color: var(--el-color-primary);
+          }
+        }
+      }
+
+      .module-content {
+        padding: 20px;
+
+        .module-name {
+          margin: 0 0 12px 0;
+          font-size: 18px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+          line-height: 1.4;
+        }
+
+        .module-desc {
+          margin: 0 0 16px 0;
+          font-size: 14px;
+          color: var(--el-text-color-regular);
+          line-height: 1.6;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          min-height: 44px;
+        }
+
+        .module-footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 16px;
+          border-top: 1px solid var(--el-border-color-lighter);
+
+          .module-company,
+          .module-downloads {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 13px;
+            color: var(--el-text-color-placeholder);
+
+            .el-icon {
+              font-size: 16px;
+            }
+          }
+        }
+      }
+
+      .module-actions {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .el-button {
+          color: var(--el-text-color-regular);
+          background: rgba(255, 255, 255, 0.9);
+          backdrop-filter: blur(4px);
+
+          &:hover {
+            color: var(--el-color-primary);
+          }
+        }
+
+        .el-tag {
+          background: rgba(255, 255, 255, 0.9);
+          backdrop-filter: blur(4px);
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    padding: 80px 20px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .modules-container {
+    .modules-grid {
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+    }
+  }
+}
+</style>

src/views/moduleshop/components/createModules.vue

@@ -0,0 +1,312 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="创建模块"
+    width="600px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item label="模块名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          placeholder="请输入模块名称"
+          clearable
+        />
+      </el-form-item>
+
+      <el-form-item label="模块代码" prop="code">
+        <el-input
+          v-model="formData.code"
+          placeholder="请输入模块代码"
+          clearable
+        />
+      </el-form-item>
+
+      <el-form-item label="模块图标" prop="icon">
+        <el-input
+          v-model="formData.icon"
+          placeholder="请输入图标类名，如: fa-solid fa-home"
+          clearable
+        >
+          <template #prefix>
+            <el-icon v-if="formData.icon" :class="formData.icon" />
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="模块描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入模块描述"
+        />
+      </el-form-item>
+
+      <el-form-item label="模块类型" prop="type">
+        <el-select
+          v-model="formData.type"
+          placeholder="请选择模块类型"
+        >
+          <el-option label="前端模块" :value="1" />
+          <el-option label="后端模块" :value="2" />
+          <el-option label="全栈模块" :value="3" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="排序" prop="sort">
+        <el-input-number
+          v-model="formData.sort"
+          :min="0"
+          :max="999"
+          controls-position="right"
+          placeholder="请输入排序"
+        />
+      </el-form-item>
+
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio :value="1">启用</el-radio>
+          <el-radio :value="0">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="模块包" prop="packageFile">
+        <el-upload
+          ref="uploadRef"
+          class="upload-demo"
+          drag
+          :auto-upload="false"
+          :limit="1"
+          :on-change="handleFileChange"
+          :before-upload="beforeUpload"
+          :on-exceed="handleExceed"
+          accept=".zip"
+        >
+          <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
+          <div class="el-upload__text">
+            拖拽文件到此处或<em>点击上传</em>
+          </div>
+          <template #tip>
+            <div class="el-upload__tip">
+              只能上传 zip 格式的压缩包，且不超过 50MB
+            </div>
+          </template>
+        </el-upload>
+        <div v-if="formData.packageFile" class="file-info">
+          <el-icon><Document /></el-icon>
+          <span>{{ formData.packageFile.name }}</span>
+          <el-button
+            type="danger"
+            link
+            size="small"
+            @click="handleRemoveFile"
+          >
+            删除
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+        确定
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { UploadFilled, Document } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules, UploadFile, UploadUserOptions } from "element-plus";
+
+interface Props {
+  modelValue: boolean;
+}
+
+interface Emits {
+  (e: "update:modelValue", value: boolean): void;
+  (e: "success"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const dialogVisible = ref(false);
+const formRef = ref<FormInstance>();
+const uploadRef = ref();
+const submitLoading = ref(false);
+
+const formData = reactive({
+  name: "",
+  code: "",
+  icon: "",
+  description: "",
+  type: 3,
+  sort: 0,
+  status: 1,
+  packageFile: null as File | null
+});
+
+const formRules: FormRules = {
+  name: [
+    { required: true, message: "请输入模块名称", trigger: "blur" }
+  ],
+  code: [
+    { required: true, message: "请输入模块代码", trigger: "blur" },
+    { pattern: /^[a-zA-Z][a-zA-Z0-9]*$/, message: "代码必须以字母开头，只能包含字母和数字", trigger: "blur" }
+  ],
+  type: [
+    { required: true, message: "请选择模块类型", trigger: "change" }
+  ],
+  status: [
+    { required: true, message: "请选择状态", trigger: "change" }
+  ]
+};
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    dialogVisible.value = newVal;
+  },
+  { immediate: true }
+);
+
+watch(dialogVisible, (newVal) => {
+  emit("update:modelValue", newVal);
+});
+
+const handleFileChange = (file: UploadFile) => {
+  formData.packageFile = file.raw;
+};
+
+const beforeUpload = (file: File) => {
+  const isZip = file.type === "application/zip" || file.name.endsWith(".zip");
+  const isLt50M = file.size / 1024 / 1024 < 50 * 1024;
+
+  if (!isZip) {
+    ElMessage.error("只能上传 zip 格式的文件!");
+    return false;
+  }
+  if (!isLt50M) {
+    ElMessage.error("文件大小不能超过 50MB!");
+    return false;
+  }
+  return true;
+};
+
+const handleExceed = () => {
+  ElMessage.warning("最多只能上传 1 个文件");
+};
+
+const handleRemoveFile = () => {
+  formData.packageFile = null;
+  if (uploadRef.value) {
+    uploadRef.value.clearFiles();
+  }
+};
+
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      if (!formData.packageFile) {
+        ElMessage.warning("请上传模块包");
+        return;
+      }
+
+      submitLoading.value = true;
+      try {
+        // 创建 FormData 对象
+        const formDataObj = new FormData();
+        formDataObj.append("name", formData.name);
+        formDataObj.append("code", formData.code);
+        formDataObj.append("icon", formData.icon);
+        formDataObj.append("description", formData.description);
+        formDataObj.append("type", formData.type.toString());
+        formDataObj.append("sort", formData.sort.toString());
+        formDataObj.append("status", formData.status.toString());
+        formDataObj.append("package", formData.packageFile);
+
+        // TODO: 调用上传接口
+        // const res = await createModule(formDataObj);
+        
+        ElMessage.success("创建成功");
+        handleClose();
+        emit("success");
+      } catch (error) {
+        console.error("创建失败:", error);
+        ElMessage.error("创建失败");
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+};
+
+const handleClose = () => {
+  formRef.value?.resetFields();
+  formData.packageFile = null;
+  dialogVisible.value = false;
+};
+
+// 暴露重置方法
+defineExpose({
+  reset: handleClose
+});
+</script>
+
+<style scoped lang="scss">
+.upload-demo {
+  width: 100%;
+
+  :deep(.el-upload) {
+    width: 100%;
+  }
+
+  :deep(.el-upload-dragger) {
+    width: 100%;
+    height: 180px;
+  }
+}
+
+.file-info {
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .el-icon {
+    font-size: 20px;
+    color: var(--el-color-primary);
+  }
+
+  span {
+    flex: 1;
+    font-size: 14px;
+    color: var(--el-text-color-regular);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.el-upload__tip {
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+  margin-top: 8px;
+}
+</style>

src/views/moduleshop/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped>
+
+</style>

src/views/moduleshop/publish/index.vue

@@ -0,0 +1,512 @@
+<template>
+  <div class="publish-container">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>发布管理</span>
+          <el-button type="primary" :icon="Plus" @click="handlePublish">
+            新增发布
+          </el-button>
+        </div>
+      </template>
+
+      <el-table
+        :data="publishList"
+        v-loading="loading"
+        stripe
+        border
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="title" label="发布标题" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="version" label="版本号" width="120" />
+        <el-table-column prop="module_name" label="所属模块" width="150" />
+        <el-table-column prop="type" label="发布类型" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getTypeTagType(row.type)">
+              {{ getTypeText(row.type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="publish_time" label="发布时间" width="180">
+          <template #default="{ row }">
+            {{ formatDate(row.publish_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              :icon="View"
+              @click="handleView(row)"
+            >
+              查看
+            </el-button>
+            <el-button
+              type="danger"
+              link
+              size="small"
+              :icon="Delete"
+              @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div v-if="publishList.length === 0 && !loading" class="empty-state">
+        <el-empty description="暂无发布记录" />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="publishDialogVisible"
+      title="新增发布"
+      width="700px"
+      :close-on-click-modal="false"
+      @close="handlePublishClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="120px"
+      >
+        <el-form-item label="发布标题" prop="title">
+          <el-input
+            v-model="formData.title"
+            placeholder="请输入发布标题"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="版本号" prop="version">
+          <el-input
+            v-model="formData.version"
+            placeholder="请输入版本号，如: 1.0.0"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="所属模块" prop="module_id">
+          <el-select
+            v-model="formData.module_id"
+            placeholder="请选择所属模块"
+            clearable
+          >
+            <el-option
+              v-for="module in moduleOptions"
+              :key="module.id"
+              :label="module.name"
+              :value="module.id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="发布类型" prop="type">
+          <el-radio-group v-model="formData.type">
+            <el-radio :value="1">更新</el-radio>
+            <el-radio :value="2">新增</el-radio>
+            <el-radio :value="3">修复</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :value="1">发布</el-radio>
+            <el-radio :value="0">草稿</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="上传包" prop="packageFile">
+          <el-upload
+            ref="uploadRef"
+            class="upload-demo"
+            drag
+            :auto-upload="false"
+            :limit="1"
+            :on-change="handleFileChange"
+            :before-upload="beforeUpload"
+            accept=".zip"
+          >
+            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
+            <div class="el-upload__text">
+              拖拽文件到此处或<em>点击上传</em>
+            </div>
+            <template #tip>
+              <div class="el-upload__tip">
+                只能上传 zip 格式的压缩包，且不超过 100MB
+              </div>
+            </template>
+          </el-upload>
+          <div v-if="formData.packageFile" class="file-info">
+            <el-icon><Document /></el-icon>
+            <span>{{ formData.packageFile.name }}</span>
+            <el-button
+              type="danger"
+              link
+              size="small"
+              @click="handleRemoveFile"
+            >
+              删除
+            </el-button>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="发布说明" prop="description">
+          <el-input
+            v-model="formData.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入发布说明"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="publishDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+          确定
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, View, Delete, UploadFilled, Document } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules, UploadFile } from "element-plus";
+
+interface Publish {
+  id: number;
+  title: string;
+  version: string;
+  module_name: string;
+  type: number;
+  status: number;
+  publish_time: string;
+}
+
+interface ModuleOption {
+  id: number;
+  name: string;
+}
+
+const loading = ref(false);
+const publishList = ref<Publish[]>([]);
+const publishDialogVisible = ref(false);
+const submitLoading = ref(false);
+
+const formRef = ref<FormInstance>();
+const uploadRef = ref();
+
+const formData = reactive({
+  title: "",
+  version: "",
+  module_id: null as number | null,
+  type: 2,
+  status: 1,
+  description: "",
+  packageFile: null as File | null
+});
+
+const moduleOptions = ref<ModuleOption[]>([]);
+
+const formRules: FormRules = {
+  title: [
+    { required: true, message: "请输入发布标题", trigger: "blur" }
+  ],
+  version: [
+    { required: true, message: "请输入版本号", trigger: "blur" },
+    { pattern: /^\d+\.\d+\.\d+$/, message: "版本号格式不正确，如: 1.0.0", trigger: "blur" }
+  ],
+  module_id: [
+    { required: true, message: "请选择所属模块", trigger: "change" }
+  ],
+  type: [
+    { required: true, message: "请选择发布类型", trigger: "change" }
+  ],
+  status: [
+    { required: true, message: "请选择状态", trigger: "change" }
+  ]
+};
+
+const getTypeText = (type: number) => {
+  const map: Record<number, string> = {
+    1: "更新",
+    2: "新增",
+    3: "修复"
+  };
+  return map[type] || "未知";
+};
+
+const getTypeTagType = (type: number) => {
+  const map: Record<number, any> = {
+    1: "warning",
+    2: "success",
+    3: "danger"
+  };
+  return map[type] || "info";
+};
+
+const getStatusText = (status: number) => {
+  const map: Record<number, string> = {
+    0: "草稿",
+    1: "已发布",
+    2: "已撤回"
+  };
+  return map[status] || "未知";
+};
+
+const getStatusType = (status: number) => {
+  const map: Record<number, any> = {
+    0: "info",
+    1: "success",
+    2: "warning"
+  };
+  return map[status] || "info";
+};
+
+const formatDate = (date: string) => {
+  if (!date) return "-";
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hours = String(d.getHours()).padStart(2, "0");
+  const minutes = String(d.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
+const handlePublish = () => {
+  publishDialogVisible.value = true;
+  fetchModuleOptions();
+};
+
+const handleView = (row: Publish) => {
+  ElMessage.info("查看发布详情功能开发中");
+};
+
+const handleDelete = (row: Publish) => {
+  ElMessageBox.confirm(`确定要删除发布"${row.title}"吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(async () => {
+    try {
+      // TODO: 调用删除接口
+      // await deletePublish(row.id);
+      
+      ElMessage.success("删除成功");
+      handleRefresh();
+    } catch (error) {
+      console.error("删除失败:", error);
+      ElMessage.error("删除失败");
+    }
+  }).catch(() => {});
+};
+
+const handleFileChange = (file: UploadFile) => {
+  formData.packageFile = file.raw;
+};
+
+const beforeUpload = (file: File) => {
+  const isZip = file.type === "application/zip" || file.name.endsWith(".zip");
+  const isLt100M = file.size / 1024 / 1024 < 100 * 1024;
+
+  if (!isZip) {
+    ElMessage.error("只能上传 zip 格式的文件!");
+    return false;
+  }
+  if (!isLt100M) {
+    ElMessage.error("文件大小不能超过 100MB!");
+    return false;
+  }
+  return true;
+};
+
+const handleRemoveFile = () => {
+  formData.packageFile = null;
+  if (uploadRef.value) {
+    uploadRef.value.clearFiles();
+  }
+};
+
+const handlePublishClose = () => {
+  formRef.value?.resetFields();
+  formData.packageFile = null;
+  publishDialogVisible.value = false;
+};
+
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      if (!formData.packageFile) {
+        ElMessage.warning("请上传发布包");
+        return;
+      }
+
+      submitLoading.value = true;
+      try {
+        // TODO: 调用发布接口
+        const formDataObj = new FormData();
+        formDataObj.append("title", formData.title);
+        formDataObj.append("version", formData.version);
+        formDataObj.append("module_id", formData.module_id.toString());
+        formDataObj.append("type", formData.type.toString());
+        formDataObj.append("status", formData.status.toString());
+        formDataObj.append("description", formData.description);
+        formDataObj.append("package", formData.packageFile);
+        
+        ElMessage.success("发布成功");
+        handlePublishClose();
+        handleRefresh();
+      } catch (error) {
+        console.error("发布失败:", error);
+        ElMessage.error("发布失败");
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+};
+
+const handleRefresh = () => {
+  fetchPublishList();
+};
+
+const fetchPublishList = async () => {
+  loading.value = true;
+  try {
+    // TODO: 调用获取发布列表接口
+    // const res = await getPublishList();
+    // if (res.code === 200) {
+    //   publishList.value = res.data || [];
+    // }
+    
+    // 模拟数据
+    publishList.value = [
+      {
+        id: 1,
+        title: "CMS内容管理 v1.0.0",
+        version: "1.0.0",
+        module_name: "CMS内容管理",
+        type: 2,
+        status: 1,
+        publish_time: "2026-01-29 10:00:00"
+      },
+      {
+        id: 2,
+        title: "用户管理 v1.0.1",
+        version: "1.0.1",
+        module_name: "用户管理",
+        type: 1,
+        status: 1,
+        publish_time: "2026-01-28 10:00:00"
+      },
+      {
+        id: 3,
+        title: "数据分析 v1.0.0",
+        version: "1.0.0",
+        module_name: "数据分析",
+        type: 3,
+        status: 0,
+        publish_time: "2026-01-27 10:00:00"
+      }
+    ];
+  } catch (error) {
+    console.error("获取发布列表失败:", error);
+    ElMessage.error("获取发布列表失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const fetchModuleOptions = async () => {
+  try {
+    // TODO: 调用获取模块列表接口
+    moduleOptions.value = [
+      { id: 1, name: "CMS内容管理" },
+      { id: 2, name: "用户管理" },
+      { id: 3, name: "数据分析" },
+      { id: 4, name: "系统设置" }
+    ];
+  } catch (error) {
+    console.error("获取模块列表失败:", error);
+  }
+};
+
+onMounted(() => {
+  fetchPublishList();
+});
+</script>
+
+<style scoped lang="scss">
+.publish-container {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .upload-demo {
+    width: 100%;
+
+    :deep(.el-upload) {
+      width: 100%;
+    }
+
+    :deep(.el-upload-dragger) {
+      width: 100%;
+      height: 180px;
+    }
+  }
+
+  .file-info {
+    margin-top: 12px;
+    padding: 8px 12px;
+    background: var(--el-fill-color-light);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .el-icon {
+      font-size: 20px;
+      color: var(--el-color-primary);
+    }
+
+    span {
+      flex: 1;
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .el-upload__tip {
+    font-size: 12px;
+    color: var(--el-text-color-placeholder);
+    margin-top: 8px;
+  }
+
+  .empty-state {
+    padding: 40px 0;
+  }
+}
+</style>

src/views/user/userProfile.vue

@@ -1,58 +1,639 @@
 <template>
-  <div>
+  <div class="user-profile">
-    <h2>用户信息</h2>
+    <el-row :gutter="20">
-    <div v-if="userInfo">
+      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
-      <p>用户名: {{ userInfo.username }}</p>
+        <div class="profile-card">
-      <p>邮箱: {{ userInfo.email }}</p>
+          <div class="card-header">
-    </div>
+            <h3 class="card-title">个人资料</h3>
-    <div v-else>
+          </div>
-      <p>加载中...</p>
+          <div class="card-content">
-    </div>
+            <div class="avatar-section">
-    <button @click="fetchUserInfo">获取用户信息</button>
+              <el-avatar :size="100" :src="userInfo?.avatar || ''">
-    <button @click="handleUpdateUserInfo">更新用户信息</button>
+                {{ userInfo?.account?.charAt(0)?.toUpperCase() || 'U' }}
-    <button @click="handleDeleteUser">删除用户</button>
+              </el-avatar>
+              <el-button
+                type="primary"
+                link
+                size="small"
+                @click="handleAvatarChange"
+              >
+                更换头像
+              </el-button>
+            </div>
+            <div class="info-list">
+              <div class="info-item">
+                <span class="info-label">账号</span>
+                <span class="info-value">{{ userInfo?.account || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">邮箱</span>
+                <span class="info-value">{{ userInfo?.email || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">手机号</span>
+                <span class="info-value">{{ userInfo?.phone || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">状态</span>
+                <el-tag :type="userInfo?.status === 1 ? 'success' : 'danger'" size="small">
+                  {{ userInfo?.status === 1 ? '正常' : '禁用' }}
+                </el-tag>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="quick-actions">
+          <div class="card-header">
+            <h3 class="card-title">快捷操作</h3>
+          </div>
+          <div class="action-list">
+            <div class="action-item" @click="handleLogout">
+              <el-icon><SwitchButton /></el-icon>
+              <span>退出登录</span>
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+        <div class="detail-card">
+          <div class="card-header">
+            <h3 class="card-title">详细资料</h3>
+            <el-button
+              type="primary"
+              :icon="Edit"
+              size="small"
+              @click="handleEditProfile"
+            >
+              编辑
+            </el-button>
+          </div>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="姓名">
+              {{ userInfo?.name || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="性别">
+              {{ getSexText(userInfo?.sex) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="生日">
+              {{ userInfo?.birth || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="状态">
+              <el-tag :type="userInfo?.status === 1 ? 'success' : 'danger'" size="small">
+                {{ userInfo?.status === 1 ? '正常' : '禁用' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="注册时间" :span="2">
+              {{ formatDate(userInfo?.create_time) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="最后登录IP" :span="2">
+              {{ userInfo?.last_login_ip || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <div class="security-card">
+          <div class="card-header">
+            <h3 class="card-title">安全设置</h3>
+          </div>
+          <div class="security-list">
+            <div class="security-item">
+              <div class="security-info">
+                <el-icon class="security-icon"><Lock /></el-icon>
+                <div class="security-text">
+                  <div class="security-title">登录密码</div>
+                  <div class="security-desc">用于登录系统</div>
+                </div>
+              </div>
+              <el-button type="primary" link @click="handleChangePassword">
+                修改
+              </el-button>
+            </div>
+            <div class="security-item">
+              <div class="security-info">
+                <el-icon class="security-icon"><Iphone /></el-icon>
+                <div class="security-text">
+                  <div class="security-title">手机绑定</div>
+                  <div class="security-desc">已绑定: {{ userInfo?.phone || '未绑定' }}</div>
+                </div>
+              </div>
+              <el-button type="primary" link>
+                {{ userInfo?.phone ? '更换' : '绑定' }}
+              </el-button>
+            </div>
+            <div class="security-item">
+              <div class="security-info">
+                <el-icon class="security-icon"><Message /></el-icon>
+                <div class="security-text">
+                  <div class="security-title">邮箱绑定</div>
+                  <div class="security-desc">已绑定: {{ userInfo?.email || '未绑定' }}</div>
+                </div>
+              </div>
+              <el-button type="primary" link>
+                {{ userInfo?.email ? '更换' : '绑定' }}
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-dialog
+      v-model="editDialogVisible"
+      title="编辑资料"
+      width="500px"
+      @close="handleEditDialogClose"
+    >
+      <el-form
+        ref="editFormRef"
+        :model="editForm"
+        :rules="editFormRules"
+        label-width="80px"
+      >
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="editForm.name" placeholder="请输入姓名" />
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-radio-group v-model="editForm.sex">
+            <el-radio :value="0">保密</el-radio>
+            <el-radio :value="1">男</el-radio>
+            <el-radio :value="2">女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="生日">
+          <el-date-picker
+            v-model="editForm.birth"
+            type="date"
+            placeholder="选择日期"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="editForm.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="editForm.phone" placeholder="请输入手机号" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="editLoading" @click="handleSaveProfile">
+          保存
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="passwordDialogVisible"
+      title="修改密码"
+      width="450px"
+      @close="handlePasswordDialogClose"
+    >
+      <el-form
+        ref="passwordFormRef"
+        :model="passwordForm"
+        :rules="passwordFormRules"
+        label-width="100px"
+      >
+        <el-form-item label="旧密码" prop="oldPassword">
+          <el-input
+            v-model="passwordForm.oldPassword"
+            type="password"
+            placeholder="请输入旧密码"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input
+            v-model="passwordForm.newPassword"
+            type="password"
+            placeholder="请输入新密码"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="passwordForm.confirmPassword"
+            type="password"
+            placeholder="请再次输入新密码"
+            show-password
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="passwordDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="passwordLoading" @click="handleSavePassword">
+          确认修改
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
-import { getUserInfo, updateUserInfo as updateUserInfoApi, deleteUser as deleteUserApi } from "@/api/user";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import {
+  Edit,
+  Lock,
+  SwitchButton,
+  Iphone,
+  Message
+} from "@element-plus/icons-vue";
+import { getUserInfo, updateUserInfo } from "@/api/user";
+import { useAuthStore } from "@/stores/auth";
+
+const router = useRouter();
+const authStore = useAuthStore();
 
-const userId = "123"; // 假设用户ID为123
 const userInfo = ref(null);
+const editDialogVisible = ref(false);
+const passwordDialogVisible = ref(false);
+const editLoading = ref(false);
+const passwordLoading = ref(false);
+
+const editFormRef = ref(null);
+const passwordFormRef = ref(null);
+
+const editForm = ref({
+  email: "",
+  phone: "",
+  name: "",
+  sex: 0,
+  birth: ""
+});
+
+const passwordForm = ref({
+  oldPassword: "",
+  newPassword: "",
+  confirmPassword: ""
+});
+
+const validateConfirmPassword = (rule, value, callback) => {
+  if (value !== passwordForm.value.newPassword) {
+    callback(new Error("两次输入的密码不一致"));
+  } else {
+    callback();
+  }
+};
+
+const editFormRules = {
+  email: [
+    { required: true, message: "请输入邮箱", trigger: "blur" },
+    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" }
+  ],
+  phone: [
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
+  ]
+};
+
+const passwordFormRules = {
+  oldPassword: [
+    { required: true, message: "请输入旧密码", trigger: "blur" }
+  ],
+  newPassword: [
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度为 6 到 20 个字符", trigger: "blur" }
+  ],
+  confirmPassword: [
+    { required: true, message: "请再次输入新密码", trigger: "blur" },
+    { validator: validateConfirmPassword, trigger: "blur" }
+  ]
+};
+
+const formatDate = (date) => {
+  if (!date) return "-";
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hours = String(d.getHours()).padStart(2, "0");
+  const minutes = String(d.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
+const getSexText = (sex) => {
+  const map = {
+    0: "保密",
+    1: "男",
+    2: "女"
+  };
+  return map[sex] || "-";
+};
 
 const fetchUserInfo = async () => {
   try {
-    const info = await getUserInfo(userId);
+    const userId = authStore.user?.id;
-    userInfo.value = info;
+    if (!userId) {
+      ElMessage.error("用户ID不存在");
+      return;
+    }
+    const res = await getUserInfo(userId);
+    if (res.code === 200) {
+      userInfo.value = res.data;
+    }
   } catch (error) {
     console.error("获取用户信息失败", error);
+    ElMessage.error("获取用户信息失败");
   }
 };
 
-const handleUpdateUserInfo = async () => {
+const handleEditProfile = () => {
+  editForm.value = {
+    name: userInfo.value?.name || "",
+    sex: userInfo.value?.sex || 0,
+    birth: userInfo.value?.birth || "",
+    email: userInfo.value?.email || "",
+    phone: userInfo.value?.phone || ""
+  };
+  editDialogVisible.value = true;
+};
+
+const handleSaveProfile = async () => {
   try {
-    const updatedInfo = {
+    await editFormRef.value.validate();
-      username: "newUsername",
+    editLoading.value = true;
-      email: "newEmail@example.com",
+    const userId = authStore.user?.id;
+    const res = await updateUserInfo(userId, editForm.value);
+    if (res.code === 200) {
+      ElMessage.success("保存成功");
+      editDialogVisible.value = false;
+      await fetchUserInfo();
+    }
+  } catch (error) {
+    console.error("保存失败", error);
+    if (error !== false) {
+      ElMessage.error("保存失败");
+    }
+  } finally {
+    editLoading.value = false;
+  }
+};
+
+const handleEditDialogClose = () => {
+  editFormRef.value?.resetFields();
+};
+
+const handleChangePassword = () => {
+  passwordDialogVisible.value = true;
+};
+
+const handleSavePassword = async () => {
+  try {
+    await passwordFormRef.value.validate();
+    passwordLoading.value = true;
+    // TODO: 调用修改密码接口
+    ElMessage.success("密码修改成功");
+    passwordDialogVisible.value = false;
+  } catch (error) {
+    console.error("修改密码失败", error);
+    if (error !== false) {
+      ElMessage.error("修改密码失败");
+    }
+  } finally {
+    passwordLoading.value = false;
+  }
+};
+
+const handlePasswordDialogClose = () => {
+  passwordFormRef.value?.resetFields();
+};
+
+const handleAvatarChange = () => {
+  ElMessage.info("头像上传功能开发中");
+};
+
+const handleLogout = () => {
+  ElMessageBox.confirm("确定要退出登录吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(async () => {
+    try {
+      await authStore.logout(authStore.user?.id);
+    } catch (error) {
+      console.error("退出登录接口调用失败:", error);
+    }
+    
+    // 清除所有本地存储
+    localStorage.removeItem("active_tab");
+    localStorage.removeItem("menu_cache_user_0");
+    localStorage.removeItem("tabs_list");
+    localStorage.removeItem("token");
+    localStorage.removeItem("user");
+    localStorage.removeItem("tenant");
+    
+    sessionStorage.removeItem("active_tab");
+    sessionStorage.removeItem("menu_cache_user_0");
+    sessionStorage.removeItem("tabs_list");
+    sessionStorage.removeItem("token");
+    sessionStorage.removeItem("user");
+    sessionStorage.removeItem("tenant");
+    
+    // 清除所有 cookies,包括跨域和不同路径的 cookie
+    const clearCookie = (name) => {
+      document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+      document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=`;
+      document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${location.hostname}`;
+      if (location.hostname !== "localhost") {
+        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=${location.hostname}`;
+      }
     };
-    await updateUserInfoApi(userId, updatedInfo);
+    
-    fetchUserInfo(); // 重新获取更新后的用户信息
+    // 清除所有已知 cookie
-  } catch (error) {
+    clearCookie("PHPSESSID");
-    console.error("更新用户信息失败", error);
+    clearCookie("token");
-  }
+    clearCookie("user");
+    clearCookie("tenant");
+    
+    // 同时清除所有现有的 cookie
+    const cookies = document.cookie.split(";");
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      const eqPos = cookie.indexOf("=");
+      const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+      if (name) {
+        clearCookie(name);
+      }
+    }
+    
+    authStore.clearToken();
+    router.push("/login");
+    ElMessage.success("已退出登录");
+  }).catch(() => {});
 };
 
-const handleDeleteUser = async () => {
+onMounted(() => {
-  try {
+  fetchUserInfo();
-    await deleteUserApi(userId);
+});
-    userInfo.value = null; // 清空用户信息
-  } catch (error) {
-    console.error("删除用户失败", error);
-  }
-};
 </script>
 
-<style scoped>
+<style scoped lang="less">
-/* 样式代码 */
+.user-profile {
+  padding: 0;
+
+  .profile-card,
+  .quick-actions,
+  .detail-card,
+  .security-card {
+    background: var(--el-bg-color);
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 16px;
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+
+    .card-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .card-content {
+    .avatar-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 24px;
+
+      .el-avatar {
+        background: linear-gradient(135deg, #3973ff 0%, #4f84ff 100%);
+      }
+    }
+
+    .info-list {
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .info-label {
+          font-size: 14px;
+          color: var(--el-text-color-regular);
+        }
+
+        .info-value {
+          font-size: 14px;
+          color: var(--el-text-color-primary);
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .action-list {
+    .action-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 16px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      .el-icon {
+        font-size: 20px;
+        color: var(--el-color-primary);
+      }
+
+      span {
+        font-size: 14px;
+        color: var(--el-text-color-primary);
+      }
+
+      &:hover {
+        background: var(--el-fill-color-light);
+      }
+    }
+  }
+
+  .security-list {
+    .security-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border-radius: 8px;
+      margin-bottom: 12px;
+      border: 1px solid var(--el-border-color-lighter);
+      transition: all 0.3s;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        border-color: var(--el-color-primary-light-7);
+        background: var(--el-fill-color-lighter);
+      }
+
+      .security-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .security-icon {
+          width: 40px;
+          height: 40px;
+          border-radius: 8px;
+          background: linear-gradient(135deg, rgba(57, 115, 255, 0.1) 0%, rgba(79, 132, 255, 0.1) 100%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--el-color-primary);
+          font-size: 20px;
+        }
+
+        .security-text {
+          .security-title {
+            font-size: 15px;
+            font-weight: 500;
+            color: var(--el-text-color-primary);
+            margin-bottom: 4px;
+          }
+
+          .security-desc {
+            font-size: 13px;
+            color: var(--el-text-color-placeholder);
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .profile-card,
+  .quick-actions,
+  .detail-card,
+  .security-card {
+    padding: 16px;
+  }
+}
 </style>