From ec89dc43e64d32ba628831aa88e5d287f4e0c23e Mon Sep 17 00:00:00 2001
From: puzvv <1@>
Date: Tue, 30 Dec 2025 21:06:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E7=95=8C=E9=9D=A2=E7=9A=84=E6=AF=8D=E7=89=88?=
 =?UTF-8?q?=E9=A1=B5=EF=BC=8C=E7=BB=9F=E4=B8=80=E4=BA=86=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E7=95=8C=E9=9D=A2=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.vue      |  10 +-
 src/layouts/UserLayout.vue      | 166 ++++++++++
 src/pages/order/ContentPage.vue |  24 +-
 src/pages/user/AddressPage.vue  |   6 +-
 src/pages/user/ProductPage.vue  | 520 +++++++++++++++++---------------
 src/pages/user/ProfilePage.vue  |   6 +-
 src/stores/ThemeStore.ts        |  41 +++
 7 files changed, 511 insertions(+), 262 deletions(-)
 create mode 100644 src/layouts/UserLayout.vue
 create mode 100644 src/stores/ThemeStore.ts

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 649ee8f..f412447 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -98,12 +98,7 @@ const goToProductManage = () => {
               @click.prevent="$router.push('/shoppingcart/content')"
               >购物车</a
             >
-            <a
-              href="#"
-              class="text-gray-600 hover:text-blue-600 transition-colors"
-              @click.prevent="$router.push('/order/content')"
-              >我的订单</a
-            >
+            <!-- 移除我的订单链接 -->
             <!-- 管理员导航项 -->
             <a
               v-if="isAdmin"
@@ -136,6 +131,9 @@ const goToProductManage = () => {
                     <el-dropdown-item @click="goToAddress"
                       >我的地址</el-dropdown-item
                     >
+                    <el-dropdown-item @click="$router.push('/order/content')"
+                      >我的订单</el-dropdown-item
+                    >
                     <el-dropdown-item v-if="isAdmin" @click="goToAdmin"
                       >管理界面</el-dropdown-item
                     >
diff --git a/src/layouts/UserLayout.vue b/src/layouts/UserLayout.vue
new file mode 100644
index 0000000..7ed6cf5
--- /dev/null
+++ b/src/layouts/UserLayout.vue
@@ -0,0 +1,166 @@
+<template>
+  <div
+    class="user-layout flex h-screen bg-gradient-to-br from-blue-50 to-indigo-100"
+  >
+    <!-- 侧边栏 -->
+    <aside
+      class="w-64 bg-white shadow-lg flex flex-col border-r border-gray-200"
+    >
+      <div class="p-5 border-b border-gray-100">
+        <div class="flex items-center">
+          <i class="fa-solid fa-user-circle text-3xl text-indigo-600 mr-3"></i>
+          <h1 class="text-xl font-bold text-gray-800">用户中心</h1>
+        </div>
+      </div>
+
+      <nav class="flex-1 p-3">
+        <ul class="space-y-1">
+          <li>
+            <router-link
+              to="/"
+              class="flex items-center p-3 rounded-lg hover:bg-indigo-50 text-gray-600 hover:text-indigo-700 transition-colors"
+            >
+              <i class="fa-solid fa-home mr-3 text-indigo-500"></i>
+              <span>返回首页</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link
+              to="/user/profile"
+              class="flex items-center p-3 rounded-lg hover:bg-indigo-50 text-gray-600 hover:text-indigo-700 transition-colors"
+              active-class="bg-indigo-100 text-indigo-700 border-r-2 border-indigo-500"
+            >
+              <i class="fa-solid fa-user mr-3 text-indigo-500"></i>
+              <span>个人资料</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link
+              to="/user/address"
+              class="flex items-center p-3 rounded-lg hover:bg-indigo-50 text-gray-600 hover:text-indigo-700 transition-colors"
+              active-class="bg-indigo-100 text-indigo-700 border-r-2 border-indigo-500"
+            >
+              <i class="fa-solid fa-address-book mr-3 text-indigo-500"></i>
+              <span>地址管理</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link
+              to="/user/product"
+              class="flex items-center p-3 rounded-lg hover:bg-indigo-50 text-gray-600 hover:text-indigo-700 transition-colors"
+              active-class="bg-indigo-100 text-indigo-700 border-r-2 border-indigo-500"
+            >
+              <i class="fa-solid fa-box mr-3 text-indigo-500"></i>
+              <span>商品管理</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link
+              to="/order/content"
+              class="flex items-center p-3 rounded-lg hover:bg-indigo-50 text-gray-600 hover:text-indigo-700 transition-colors"
+              active-class="bg-indigo-100 text-indigo-700 border-r-2 border-indigo-500"
+            >
+              <i class="fa-solid fa-file-invoice mr-3 text-indigo-500"></i>
+              <span>我的订单</span>
+            </router-link>
+          </li>
+        </ul>
+      </nav>
+
+      <div class="p-4 border-t border-gray-100">
+        <div class="flex items-center">
+          <div class="mr-3">
+            <div
+              class="w-12 h-12 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold"
+            >
+              {{ userInitial }}
+            </div>
+          </div>
+          <div>
+            <p class="text-sm font-medium text-gray-800">{{ userNickname }}</p>
+            <p class="text-xs text-gray-500">
+              {{ isAdmin ? "管理员" : "普通用户" }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <!-- 主内容区域 -->
+    <main class="flex-1 overflow-auto">
+      <header
+        class="bg-white shadow-sm p-5 flex justify-between items-center border-b border-gray-100"
+      >
+        <h2 class="text-xl font-semibold text-gray-800">
+          {{ getCurrentPageTitle }}
+        </h2>
+        <div class="flex items-center space-x-4">
+          <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
+            <i class="fa-solid fa-bell text-lg"></i>
+          </button>
+          <button
+            @click="handleLogout"
+            class="px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 transition-all shadow-sm"
+          >
+            退出登录
+          </button>
+        </div>
+      </header>
+
+      <div class="p-6">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/UserStore";
+import { ElMessage } from "element-plus";
+
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+
+// 计算属性：获取用户昵称
+const userNickname = computed(() => {
+  return userStore.userInfo?.nickname || userStore.userInfo?.username || "用户";
+});
+
+// 计算属性：获取用户昵称首字母
+const userInitial = computed(() => {
+  const name =
+    userStore.userInfo?.nickname || userStore.userInfo?.username || "U";
+  return name.charAt(0).toUpperCase();
+});
+
+// 计算属性：判断是否为管理员
+const isAdmin = computed(() => {
+  return userStore.userInfo?.isAdmin === 1;
+});
+
+// 计算属性：获取当前页面标题
+const getCurrentPageTitle = computed(() => {
+  const path = route.path;
+  if (path.includes("/user/profile")) return "个人资料";
+  if (path.includes("/user/address")) return "地址管理";
+  if (path.includes("/user/product")) return "商品管理";
+  if (path.includes("/order/content")) return "我的订单";
+  return "用户中心";
+});
+
+// 用户退出登录
+const handleLogout = () => {
+  userStore.clearUserInfo();
+  ElMessage.success("退出登录成功");
+  router.push("/user/login");
+};
+</script>
+
+<style scoped>
+.user-layout {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+</style>
diff --git a/src/pages/order/ContentPage.vue b/src/pages/order/ContentPage.vue
index 5242f5c..40049e4 100644
--- a/src/pages/order/ContentPage.vue
+++ b/src/pages/order/ContentPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <MainLayout>
+  <UserLayout>
     <div class="order-page">
       <el-card class="order-card">
         <template #header>
@@ -17,7 +17,11 @@
           <div class="order-list">
             <el-table :data="orderList" style="width: 100%" row-key="id">
               <el-table-column prop="orderNo" label="订单号" min-width="200" />
-              <el-table-column prop="createTime" label="下单时间" min-width="180">
+              <el-table-column
+                prop="createTime"
+                label="下单时间"
+                min-width="180"
+              >
                 <template #default="scope">
                   {{ formatDate(scope.row.createTime) }}
                 </template>
@@ -27,12 +31,20 @@
                 label="商品数量"
                 min-width="100"
               />
-              <el-table-column prop="totalAmount" label="订单总额" min-width="120">
+              <el-table-column
+                prop="totalAmount"
+                label="订单总额"
+                min-width="120"
+              >
                 <template #default="scope">
                   ¥{{ scope.row.totalAmount.toFixed(2) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="statusText" label="订单状态" min-width="100" />
+              <el-table-column
+                prop="statusText"
+                label="订单状态"
+                min-width="100"
+              />
               <el-table-column label="操作" min-width="120">
                 <template #default="scope">
                   <el-button
@@ -150,10 +162,10 @@
         </span>
       </template>
     </el-dialog>
-  </MainLayout>
+  </UserLayout>
 </template>
 <script setup lang="ts">
-import MainLayout from "@/layouts/MainLayout.vue";
+import UserLayout from "@/layouts/UserLayout.vue";
 import { ref, onMounted } from "vue";
 import { useUserStore } from "@/stores/UserStore";
 import { ElMessage } from "element-plus";
diff --git a/src/pages/user/AddressPage.vue b/src/pages/user/AddressPage.vue
index 60ff1ef..b93b983 100644
--- a/src/pages/user/AddressPage.vue
+++ b/src/pages/user/AddressPage.vue
@@ -24,7 +24,7 @@ import {
   setDefaultAddress,
 } from "@/apis/user";
 import type { UserAddress, UserAddressForm } from "@/types/address";
-import MainLayout from "@/layouts/MainLayout.vue";
+import UserLayout from "@/layouts/UserLayout.vue";
 
 const userStore = useUserStore();
 const addressList = ref<UserAddress[]>([]);
@@ -204,7 +204,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <MainLayout>
+  <UserLayout>
     <div class="address-page">
       <div class="container mx-auto px-4 py-8">
         <el-card class="address-card">
@@ -335,7 +335,7 @@ onMounted(() => {
         </template>
       </el-dialog>
     </div>
-  </MainLayout>
+  </UserLayout>
 </template>
 
 <style scoped>
diff --git a/src/pages/user/ProductPage.vue b/src/pages/user/ProductPage.vue
index 34cd0c3..75ec4a1 100644
--- a/src/pages/user/ProductPage.vue
+++ b/src/pages/user/ProductPage.vue
@@ -1,237 +1,250 @@
 <template>
-  <div class="product-manage-page">
-    <!-- 搜索和操作按钮 -->
-    <div class="mb-6 flex justify-between items-center">
-      <div class="flex items-center">
-        <el-input
-          v-model="searchKeyword"
-          placeholder="搜索商品名称或分类"
-          style="width: 300px; margin-right: 16px"
-          @keyup.enter="handleSearch"
-        >
-          <template #prefix>
-            <i class="fa fa-search"></i>
-          </template>
-        </el-input>
-        <el-button type="primary" @click="handleSearch">搜索</el-button>
-      </div>
-      <el-button type="success" @click="showAddProductDialog = true">
-        <i class="fa fa-plus mr-1"></i> 添加商品
-      </el-button>
-    </div>
-
-    <!-- 商品列表 -->
-    <div class="product-list mb-6">
-      <el-row :gutter="20" style="row-gap: 24px">
-        <template v-if="loading">
-          <el-col v-for="n in pageSize" :key="n" :span="8">
-            <el-card class="product-card">
-              <el-skeleton :rows="3" animated />
-            </el-card>
-          </el-col>
-        </template>
-        <template v-else-if="paginatedProducts.length > 0">
-          <el-col
-            v-for="product in paginatedProducts"
-            :key="product.id"
-            :span="8"
-          >
-            <!-- 商品卡片 -->
-            <el-card class="product-card h-full" shadow="hover">
-              <div class="product-image mb-3 relative">
-                <el-image
-                  :src="product.mainImage || '/placeholder.jpg'"
-                  class="w-full h-48 object-cover rounded"
-                  fit="cover"
-                  lazy
-                >
-                  <template #error>
-                    <div class="image-slot">
-                      <i
-                        class="el-icon-picture-outline text-4xl text-gray-300"
-                      ></i>
-                    </div>
-                  </template>
-                </el-image>
-                <!-- 商品状态标签 -->
-                <div class="status-tag absolute top-2 right-2">
-                  <el-tag :type="product.status === 1 ? 'success' : 'danger'">
-                    {{ product.status === 1 ? "上架" : "下架" }}
-                  </el-tag>
-                </div>
-              </div>
-              <div class="product-info">
-                <h3
-                  class="product-title text-sm font-medium mb-2 line-clamp-2 h-12"
-                  :title="product.name"
-                >
-                  {{ product.name }}
-                </h3>
-                <div class="product-price text-red-600 font-bold mb-2">
-                  ¥{{ product.price }}
-                </div>
-                <div class="product-sales text-gray-500 text-xs mb-3">
-                  销量: {{ product.sales }} | 库存: {{ product.stock || 0 }}
-                </div>
-
-                <!-- 操作按钮 -->
-                <div class="product-actions flex flex-wrap gap-2">
-                  <el-button size="small" @click="editProduct(product)"
-                    >编辑</el-button
-                  >
-                  <el-button
-                    size="small"
-                    :type="product.status === 1 ? 'warning' : 'success'"
-                    @click="toggleProductStatus(product)"
-                  >
-                    {{ product.status === 1 ? "下架" : "上架" }}
-                  </el-button>
-                  <el-button
-                    size="small"
-                    type="danger"
-                    @click="deleteProduct(product)"
-                  >
-                    删除
-                  </el-button>
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-        </template>
-        <template v-else>
-          <el-col :span="24">
-            <el-empty description="暂无商品数据" />
-          </el-col>
-        </template>
-      </el-row>
-    </div>
-
-    <!-- 分页 -->
-    <div class="mt-6 flex justify-center">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="[6, 12, 24, 36]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="filteredProducts.length"
-      />
-    </div>
-
-    <!-- 添加/编辑商品对话框 -->
-    <el-dialog
-      :title="isEditing ? '编辑商品' : '添加商品'"
-      v-model="showAddProductDialog"
-      width="600px"
-      @close="resetProductForm"
-    >
-      <el-form
-        :model="productForm"
-        :rules="productFormRules"
-        ref="productFormRef"
-        label-width="100px"
-      >
-        <el-form-item label="商品名称" prop="name">
-          <el-input v-model="productForm.name" />
-        </el-form-item>
-        <el-form-item label="分类" prop="categoryId">
-          <el-cascader
-            v-model="selectedCategoryPath"
-            :options="categoriesTree"
-            :props="{ value: 'id', label: 'name', children: 'children' }"
-            placeholder="请选择分类"
-            style="width: 100%; margin-bottom: 10px"
-            clearable
-            @change="onCategoryChange"
-          />
-          <el-button @click="showCategoryDialog = true" type="primary" plain>
-            <i class="fa fa-plus mr-1"></i> 创建新分类
-          </el-button>
-        </el-form-item>
-        <el-form-item label="副标题" prop="subtitle">
-          <el-input v-model="productForm.subtitle" />
-        </el-form-item>
-        <el-form-item label="主图" prop="mainImage">
-          <el-upload
-            class="avatar-uploader"
-            :auto-upload="false"
-            :show-file-list="false"
-            :on-change="handleImageChange"
-            :before-upload="beforeImageUpload"
-            accept="image/*"
-          >
-            <template v-if="productForm.mainImage">
-              <img :src="productForm.mainImage" class="avatar" alt="主图预览" />
-            </template>
-            <template v-else>
-              <el-button type="primary" plain>选择图片</el-button>
-            </template>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="价格" prop="price">
-          <el-input-number
-            v-model="productForm.price"
-            :precision="2"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item label="库存" prop="stock">
-          <el-input-number v-model="productForm.stock" :min="0" />
-        </el-form-item>
-        <el-form-item label="描述" prop="description">
+  <UserLayout>
+    <div class="product-manage-page">
+      <!-- 搜索和操作按钮 -->
+      <div class="mb-6 flex justify-between items-center">
+        <div class="flex items-center">
           <el-input
-            v-model="productForm.description"
-            type="textarea"
-            :rows="3"
-            placeholder="商品描述"
-          />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="productForm.sort" :min="0" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="cancelProductForm">取消</el-button>
-          <el-button type="primary" @click="submitProductForm">确定</el-button>
+            v-model="searchKeyword"
+            placeholder="搜索商品名称或分类"
+            style="width: 300px; margin-right: 16px"
+            @keyup.enter="handleSearch"
+          >
+            <template #prefix>
+              <i class="fa fa-search"></i>
+            </template>
+          </el-input>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
         </div>
-      </template>
-    </el-dialog>
+        <el-button type="success" @click="showAddProductDialog = true">
+          <i class="fa fa-plus mr-1"></i> 添加商品
+        </el-button>
+      </div>
 
-    <!-- 创建分类对话框 -->
-    <el-dialog title="创建新分类" v-model="showCategoryDialog" width="400px">
-      <el-form
-        :model="categoryForm"
-        :rules="categoryFormRules"
-        ref="categoryFormRef"
-        label-width="100px"
+      <!-- 商品列表 -->
+      <div class="product-list mb-6">
+        <el-row :gutter="20" style="row-gap: 24px">
+          <template v-if="loading">
+            <el-col v-for="n in pageSize" :key="n" :span="8">
+              <el-card class="product-card">
+                <el-skeleton :rows="3" animated />
+              </el-card>
+            </el-col>
+          </template>
+          <template v-else-if="paginatedProducts.length > 0">
+            <el-col
+              v-for="product in paginatedProducts"
+              :key="product.id"
+              :span="8"
+            >
+              <!-- 商品卡片 -->
+              <el-card class="product-card h-full" shadow="hover">
+                <div class="product-image mb-3 relative">
+                  <el-image
+                    :src="product.mainImage || '/placeholder.jpg'"
+                    class="w-full h-48 object-cover rounded"
+                    fit="cover"
+                    lazy
+                  >
+                    <template #error>
+                      <div class="image-slot">
+                        <i
+                          class="el-icon-picture-outline text-4xl text-gray-300"
+                        ></i>
+                      </div>
+                    </template>
+                  </el-image>
+                  <!-- 商品状态标签 -->
+                  <div class="status-tag absolute top-2 right-2">
+                    <el-tag :type="product.status === 1 ? 'success' : 'danger'">
+                      {{ product.status === 1 ? "上架" : "下架" }}
+                    </el-tag>
+                  </div>
+                </div>
+                <div class="product-info">
+                  <h3
+                    class="product-title text-sm font-medium mb-2 line-clamp-2 h-12"
+                    :title="product.name"
+                  >
+                    {{ product.name }}
+                  </h3>
+                  <div class="product-price text-red-600 font-bold mb-2">
+                    ¥{{ product.price }}
+                  </div>
+                  <div class="product-sales text-gray-500 text-xs mb-3">
+                    销量: {{ product.sales }} | 库存: {{ product.stock || 0 }}
+                  </div>
+
+                  <!-- 操作按钮 -->
+                  <div class="product-actions flex flex-wrap gap-2">
+                    <el-button size="small" @click="editProduct(product)"
+                      >编辑</el-button
+                    >
+                    <el-button
+                      size="small"
+                      :type="product.status === 1 ? 'warning' : 'success'"
+                      @click="toggleProductStatus(product)"
+                    >
+                      {{ product.status === 1 ? "下架" : "上架" }}
+                    </el-button>
+                    <el-button
+                      size="small"
+                      type="danger"
+                      @click="deleteProduct(product)"
+                    >
+                      删除
+                    </el-button>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </template>
+          <template v-else>
+            <el-col :span="24">
+              <el-empty description="暂无商品数据" />
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+
+      <!-- 分页 -->
+      <div class="mt-6 flex justify-center">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[6, 12, 24, 36]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="filteredProducts.length"
+        />
+      </div>
+
+      <!-- 添加/编辑商品对话框 -->
+      <el-dialog
+        :title="isEditing ? '编辑商品' : '添加商品'"
+        v-model="showAddProductDialog"
+        width="600px"
+        @close="resetProductForm"
       >
-        <el-form-item label="分类名称" prop="name">
-          <el-input v-model="categoryForm.name" placeholder="请输入分类名称" />
-        </el-form-item>
-        <el-form-item label="父分类">
-          <el-cascader
-            v-model="categoryForm.parentId"
-            :options="categoriesTree"
-            :props="{ value: 'id', label: 'name', children: 'children' }"
-            placeholder="选择父分类（不选则为一级分类）"
-            :clearable="true"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="排序">
-          <el-input-number v-model="categoryForm.sort" :min="0" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="showCategoryDialog = false">取消</el-button>
-          <el-button type="primary" @click="submitCategoryForm">创建</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
+        <el-form
+          :model="productForm"
+          :rules="productFormRules"
+          ref="productFormRef"
+          label-width="100px"
+        >
+          <el-form-item label="商品名称" prop="name">
+            <el-input v-model="productForm.name" />
+          </el-form-item>
+          <el-form-item label="分类" prop="categoryId">
+            <el-cascader
+              v-model="selectedCategoryPath"
+              :options="categoriesTree"
+              :props="{ value: 'id', label: 'name', children: 'children' }"
+              placeholder="请选择分类"
+              style="width: 100%; margin-bottom: 10px"
+              clearable
+              @change="onCategoryChange"
+            />
+            <el-button @click="showCategoryDialog = true" type="primary" plain>
+              <i class="fa fa-plus mr-1"></i> 创建新分类
+            </el-button>
+          </el-form-item>
+          <el-form-item label="副标题" prop="subtitle">
+            <el-input v-model="productForm.subtitle" />
+          </el-form-item>
+          <el-form-item label="主图" prop="mainImage">
+            <el-upload
+              class="avatar-uploader"
+              :auto-upload="false"
+              :show-file-list="false"
+              :on-change="handleImageChange"
+              :before-upload="beforeImageUpload"
+              accept="image/*"
+            >
+              <template v-if="productForm.mainImage">
+                <img
+                  :src="productForm.mainImage"
+                  class="avatar"
+                  alt="主图预览"
+                />
+              </template>
+              <template v-else>
+                <el-button type="primary" plain>选择图片</el-button>
+              </template>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="价格" prop="price">
+            <el-input-number
+              v-model="productForm.price"
+              :precision="2"
+              :min="0"
+            />
+          </el-form-item>
+          <el-form-item label="库存" prop="stock">
+            <el-input-number v-model="productForm.stock" :min="0" />
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="productForm.description"
+              type="textarea"
+              :rows="3"
+              placeholder="商品描述"
+            />
+          </el-form-item>
+          <el-form-item label="排序" prop="sort">
+            <el-input-number v-model="productForm.sort" :min="0" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="cancelProductForm">取消</el-button>
+            <el-button type="primary" @click="submitProductForm"
+              >确定</el-button
+            >
+          </div>
+        </template>
+      </el-dialog>
+
+      <!-- 创建分类对话框 -->
+      <el-dialog title="创建新分类" v-model="showCategoryDialog" width="400px">
+        <el-form
+          :model="categoryForm"
+          :rules="categoryFormRules"
+          ref="categoryFormRef"
+          label-width="100px"
+        >
+          <el-form-item label="分类名称" prop="name">
+            <el-input
+              v-model="categoryForm.name"
+              placeholder="请输入分类名称"
+            />
+          </el-form-item>
+          <el-form-item label="父分类">
+            <el-cascader
+              v-model="categoryForm.parentId"
+              :options="categoriesTree"
+              :props="{ value: 'id', label: 'name', children: 'children' }"
+              placeholder="选择父分类（不选则为一级分类）"
+              :clearable="true"
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item label="排序">
+            <el-input-number v-model="categoryForm.sort" :min="0" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="showCategoryDialog = false">取消</el-button>
+            <el-button type="primary" @click="submitCategoryForm"
+              >创建</el-button
+            >
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </UserLayout>
 </template>
 
 <script lang="ts" setup>
@@ -257,6 +270,7 @@ import {
   addProductCategory,
   uploadFile,
   getProductSubCategories,
+  getProductDetail,
 } from "@/apis/product";
 import {
   ProductListItem,
@@ -266,6 +280,7 @@ import {
 } from "@/types/product";
 import { useRouter } from "vue-router";
 import { useUserStore } from "@/stores/UserStore";
+import UserLayout from "@/layouts/UserLayout.vue";
 
 // 获取用户存储和路由
 const userStore = useUserStore();
@@ -473,26 +488,43 @@ const findCategoryPath = (
 };
 
 // 编辑商品
-const editProduct = (product: ProductListItem) => {
+const editProduct = async (product: ProductListItem) => {
   isEditing.value = true;
+
+  // 首先尝试从列表数据获取，如果categoryId为空则获取详细信息
+  let fullProduct = product;
+  if (!product.categoryId) {
+    try {
+      // 获取商品详细信息以获取完整的分类ID
+      const detailResponse = await getProductDetail(product.id);
+      if (detailResponse.code === 200) {
+        fullProduct = detailResponse.data as ProductListItem;
+      }
+    } catch (error) {
+      console.error("获取商品详情失败:", error);
+      ElMessage.error("获取商品详情失败");
+    }
+  }
+
   // 复制商品数据，处理可能的undefined值
   productForm.value = {
-    id: product.id,
-    categoryId: product.categoryId || 0, // 确保是number类型
-    name: product.name,
-    mainImage: product.mainImage,
-    price: product.price,
-    stock: product.stock || 0,
-    subtitle: product.subtitle || "",
-    description: product.description || "",
-    sort: product.sort || 0,
+    id: fullProduct.id,
+    categoryId: fullProduct.categoryId || 0, // 确保是number类型
+    name: fullProduct.name,
+    mainImage: fullProduct.mainImage,
+    price: fullProduct.price,
+    stock: fullProduct.stock || 0,
+    subtitle: fullProduct.subtitle || "",
+    description: fullProduct.description || "",
+    sort: fullProduct.sort || 0,
   };
 
-  // 设置选中的分类路径
-  if (product.categoryId) {
-    selectedCategory.value = product.categoryId;
-    const path = findCategoryPath(categoriesTree.value, product.categoryId);
-    selectedCategoryPath.value = path || [product.categoryId];
+  // 设置选中的分类路径 - 仿照分类管理页面的方式
+  if (fullProduct.categoryId) {
+    selectedCategory.value = fullProduct.categoryId;
+    // 根据商品的分类ID找到对应的分类路径
+    const path = findCategoryPath(categoriesTree.value, fullProduct.categoryId);
+    selectedCategoryPath.value = path || [fullProduct.categoryId];
   } else {
     selectedCategory.value = null;
     selectedCategoryPath.value = [];
diff --git a/src/pages/user/ProfilePage.vue b/src/pages/user/ProfilePage.vue
index 623f0d1..ec5c5a6 100644
--- a/src/pages/user/ProfilePage.vue
+++ b/src/pages/user/ProfilePage.vue
@@ -29,7 +29,7 @@ import {
 import { getUserProfile, updateUserProfile } from "@/apis/user";
 import { useUserStore } from "@/stores/UserStore";
 import type { UserInfo } from "@/types/user";
-import MainLayout from "@/layouts/MainLayout.vue";
+import UserLayout from "@/layouts/UserLayout.vue";
 
 // 用户信息
 const userInfo = ref<UserInfo | null>(null);
@@ -247,7 +247,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <MainLayout>
+  <UserLayout>
     <div class="profile-page">
       <div class="container mx-auto px-4 py-8">
         <el-card class="profile-card">
@@ -435,7 +435,7 @@ onMounted(() => {
         </span>
       </template>
     </el-dialog>
-  </MainLayout>
+  </UserLayout>
 </template>
 
 <style scoped>
diff --git a/src/stores/ThemeStore.ts b/src/stores/ThemeStore.ts
new file mode 100644
index 0000000..6b92d23
--- /dev/null
+++ b/src/stores/ThemeStore.ts
@@ -0,0 +1,41 @@
+import { defineStore } from "pinia";
+
+export const useThemeStore = defineStore("theme", {
+  state: () => ({
+    theme: "light" as "light" | "dark",
+  }),
+  actions: {
+    initTheme() {
+      // 从本地存储获取主题设置
+      const savedTheme = localStorage.getItem("theme") as
+        | "light"
+        | "dark"
+        | null;
+      if (savedTheme) {
+        this.theme = savedTheme;
+        this.applyTheme(savedTheme);
+      } else {
+        // 检测系统主题偏好
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        this.theme = prefersDark ? "dark" : "light";
+        this.applyTheme(this.theme);
+      }
+    },
+    toggleTheme() {
+      this.theme = this.theme === "light" ? "dark" : "light";
+      this.applyTheme(this.theme);
+      localStorage.setItem("theme", this.theme);
+    },
+    applyTheme(theme: "light" | "dark") {
+      // 移除所有主题类
+      document.documentElement.classList.remove("light", "dark");
+      // 添加当前主题类
+      document.documentElement.classList.add(theme);
+
+      // 同时设置 data-theme 属性，用于 CSS 选择器
+      document.documentElement.setAttribute("data-theme", theme);
+    },
+  },
+});