feat: 添加商品管理页面和角色权限控制

src/pages/index/index.vue

@@ -10,9 +10,9 @@
       </view>
     </view>
 
-    <!-- 功能菜单 - 管理员/销售 -->
-    <view class="menu-grid" v-if="!isCustomer">
-      <view class="menu-item" @click="goTo('/pages/product/list')">
+    <!-- 功能菜单 - 管理员 -->
+    <view class="menu-grid" v-if="isAdmin">
+      <view class="menu-item" @click="goTo('/pages/product/manage')">
         <text class="menu-icon">📦</text>
         <text class="menu-text">商品管理</text>
       </view>
@@ -30,8 +30,41 @@
       </view>
     </view>
 
+    <!-- 功能菜单 - 销售人员 -->
+    <view class="menu-grid" v-else-if="isSales">
+      <view class="menu-item" @click="goTo('/pages/product/list')">
+        <text class="menu-icon">📦</text>
+        <text class="menu-text">商品浏览</text>
+      </view>
+      <view class="menu-item" @click="goTo('/pages/order/create')">
+        <text class="menu-icon">📝</text>
+        <text class="menu-text">创建订单</text>
+      </view>
+      <view class="menu-item" @click="goTo('/pages/order/list')">
+        <text class="menu-icon">📋</text>
+        <text class="menu-text">订单列表</text>
+      </view>
+    </view>
+
     <!-- 功能菜单 - 顾客 -->
-    <view class="menu-grid" v-else>
+    <view class="menu-grid" v-else-if="isCustomer">
+      <view class="menu-item" @click="goTo('/pages/product/list')">
+        <text class="menu-icon">📦</text>
+        <text class="menu-text">商品浏览</text>
+      </view>
+      <view class="menu-item" @click="goTo('/pages/order/list')">
+        <text class="menu-icon">📋</text>
+        <text class="menu-text">我的订单</text>
+      </view>
+    </view>
+
+    <!-- 功能菜单 - 游客 -->
+    <view class="menu-grid" v-else-if="isGuest">
+      <view class="menu-item" @click="goTo('/pages/login/index')">
+        <text class="menu-icon">🔑</text>
+        <text class="menu-text">请先登录</text>
+      </view>
+    </view>
       <view class="menu-item" @click="goTo('/pages/product/list')">
         <text class="menu-icon">📦</text>
         <text class="menu-text">商品浏览</text>
@@ -62,7 +95,7 @@
     </view>
 
     <!-- 顾客提示 -->
-    <view class="section" v-else>
+    <view class="section" v-if="isCustomer">
       <view class="section-title">温馨提示</view>
       <view class="tips">
         <text class="tip-text">• 您可以浏览商品</text>
@@ -71,8 +104,17 @@
       </view>
     </view>
 
+    <!-- 游客提示 -->
+    <view class="section" v-if="isGuest">
+      <view class="section-title">欢迎使用</view>
+      <view class="tips">
+        <text class="tip-text">• 请登录后使用完整功能</text>
+        <text class="tip-text">• 登录后可浏览商品和查看订单</text>
+      </view>
+    </view>
+
     <!-- 退出登录 -->
-    <button class="logout-btn" @click="logout">退出登录</button>
+    <button class="logout-btn" @click="logout" v-if="!isGuest">退出登录</button>
   </view>
 </template>
 
@@ -80,14 +122,17 @@
 import authApi from '@/api/auth'
 import orderApi from '@/api/order'
 import productApi from '@/api/product'
-import { getRole, isCustomer as checkIsCustomer } from '@/utils/auth'
+import { getRole, isAdmin, isSales, isCustomer as checkIsCustomer, isGuest as checkIsGuest, canManageProduct, canCreateOrder, canViewStats } from '@/utils/auth'
 
 export default {
   data() {
     return {
       userInfo: {},
-      role: 'admin',
+      role: 'guest',
+      isAdmin: false,
+      isSales: false,
       isCustomer: false,
+      isGuest: false,
       stats: {
         orderCount: 0,
         actualAmount: 0,
@@ -97,14 +142,20 @@ export default {
   },
   computed: {
     roleText() {
-      return this.isCustomer ? '顾客' : '销售员'
+      if (this.isAdmin) return '管理员'
+      if (this.isSales) return '销售员'
+      if (this.isCustomer) return '顾客'
+      return '游客'
     }
   },
   onLoad() {
     this.role = getRole()
+    this.isAdmin = isAdmin()
+    this.isSales = isSales()
     this.isCustomer = checkIsCustomer()
+    this.isGuest = checkIsGuest()
     this.loadUserInfo()
-    if (!this.isCustomer) {
+    if (canViewStats()) {
       this.loadStats()
     }
   },