From fe35a48123bb95fd2a81ae597df3299645d52aa1 Mon Sep 17 00:00:00 2001
From: Agent <agent@openclaw.ai>
Date: Thu, 26 Mar 2026 12:53:23 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5UI=EF=BC=8C?=
 =?UTF-8?q?=E7=BE=8E=E5=8C=96=E7=95=8C=E9=9D=A2=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue | 488 +++++++++++++++++++++++++++-----------
 1 file changed, 345 insertions(+), 143 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 67b51f1..314b69a 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,111 +1,142 @@
 <template>
   <view class="page">
-    <!-- 用户信息 -->
-    <view class="user-info">
-      <view class="avatar">
+    <!-- 顶部欢迎区域 -->
+    <view class="header">
+      <view class="welcome-section">
+        <text class="welcome-text">欢迎回来</text>
         <text class="username">{{ userInfo.username || '用户' }}</text>
       </view>
-      <view class="role-tag" :class="isCustomer ? 'customer' : 'admin'">
-        {{ roleText }}
-      </view>
-    </view>
-
-    <!-- 功能菜单 - 管理员 -->
-    <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>
-      <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="goToTab('/pages/order/list')">
-        <text class="menu-icon">📋</text>
-        <text class="menu-text">订单列表</text>
-      </view>
-      <view class="menu-item" @click="goStock()">
-        <text class="menu-icon">🏭</text>
-        <text class="menu-text">库存管理</text>
-      </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="goToTab('/pages/order/list')">
-        <text class="menu-icon">📋</text>
-        <text class="menu-text">订单列表</text>
-      </view>
-    </view>
-
-    <!-- 功能菜单 - 顾客 -->
-    <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="goToTab('/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 class="role-badge" :class="roleClass">
+        <text class="role-icon">👤</text>
+        <text class="role-text">{{ roleText }}</text>
       </view>
     </view>
 
     <!-- 快捷操作 - 管理员/销售 -->
-    <view class="section" v-if="!isCustomer">
-      <view class="section-title">今日概览</view>
+    <view class="stats-card" v-if="!isCustomer && !isGuest">
+      <view class="card-header">
+        <text class="card-title">📊 今日概览</text>
+      </view>
       <view class="stats-grid">
         <view class="stat-item">
-          <text class="stat-value">{{ stats.orderCount || 0 }}</text>
-          <text class="stat-label">今日订单</text>
+          <view class="stat-icon order-icon">📋</view>
+          <view class="stat-info">
+            <text class="stat-value">{{ stats.orderCount || 0 }}</text>
+            <text class="stat-label">今日订单</text>
+          </view>
         </view>
         <view class="stat-item">
-          <text class="stat-value">¥{{ stats.actualAmount || 0 }}</text>
-          <text class="stat-label">今日销售额</text>
+          <view class="stat-icon money-icon">💰</view>
+          <view class="stat-info">
+            <text class="stat-value">¥{{ stats.actualAmount || 0 }}</text>
+            <text class="stat-label">今日销售额</text>
+          </view>
         </view>
         <view class="stat-item">
-          <text class="stat-value">{{ stats.stockAlerts || 0 }}</text>
-          <text class="stat-label">库存预警</text>
+          <view class="stat-icon alert-icon">⚠️</view>
+          <view class="stat-info">
+            <text class="stat-value">{{ stats.stockAlerts || 0 }}</text>
+            <text class="stat-label">库存预警</text>
+          </view>
         </view>
       </view>
     </view>
 
-    <!-- 顾客提示 -->
-    <view class="section" v-if="isCustomer">
-      <view class="section-title">温馨提示</view>
-      <view class="tips">
-        <text class="tip-text">• 您可以浏览商品</text>
-        <text class="tip-text">• 您可以查看半年内的订单</text>
-        <text class="tip-text">• 如需下单，请联系销售人员</text>
+    <!-- 功能菜单 -->
+    <view class="menu-section">
+      <text class="section-title">功能菜单</text>
+      <view class="menu-grid">
+        <!-- 管理员菜单 -->
+        <template v-if="isAdmin">
+          <view class="menu-card" @click="goTo('/pages/product/manage')">
+            <view class="menu-card-icon blue">📦</view>
+            <text class="menu-card-title">商品管理</text>
+            <text class="menu-card-desc">管理商品库存</text>
+          </view>
+          <view class="menu-card" @click="goTo('/pages/order/create')">
+            <view class="menu-card-icon green">📝</view>
+            <text class="menu-card-title">创建订单</text>
+            <text class="menu-card-desc">新增销售订单</text>
+          </view>
+          <view class="menu-card" @click="goToTab('/pages/order/list')">
+            <view class="menu-card-icon orange">📋</view>
+            <text class="menu-card-title">订单列表</text>
+            <text class="menu-card-desc">查看所有订单</text>
+          </view>
+          <view class="menu-card" @click="goStock()">
+            <view class="menu-card-icon red">🏭</view>
+            <text class="menu-card-title">库存管理</text>
+            <text class="menu-card-desc">库存预警监控</text>
+          </view>
+        </template>
+        <!-- 销售菜单 -->
+        <template v-else-if="isSales">
+          <view class="menu-card" @click="goTo('/pages/product/list')">
+            <view class="menu-card-icon blue">📦</view>
+            <text class="menu-card-title">商品浏览</text>
+            <text class="menu-card-desc">查看商品列表</text>
+          </view>
+          <view class="menu-card" @click="goTo('/pages/order/create')">
+            <view class="menu-card-icon green">📝</view>
+            <text class="menu-card-title">创建订单</text>
+            <text class="menu-card-desc">新增销售订单</text>
+          </view>
+          <view class="menu-card" @click="goToTab('/pages/order/list')">
+            <view class="menu-card-icon orange">📋</view>
+            <text class="menu-card-title">订单列表</text>
+            <text class="menu-card-desc">查看所有订单</text>
+          </view>
+        </template>
+        <!-- 顾客菜单 -->
+        <template v-else-if="isCustomer">
+          <view class="menu-card" @click="goTo('/pages/product/list')">
+            <view class="menu-card-icon blue">📦</view>
+            <text class="menu-card-title">商品浏览</text>
+            <text class="menu-card-desc">查看商品列表</text>
+          </view>
+          <view class="menu-card" @click="goToTab('/pages/order/list')">
+            <view class="menu-card-icon orange">📋</view>
+            <text class="menu-card-title">我的订单</text>
+            <text class="menu-card-desc">查看订单记录</text>
+          </view>
+        </template>
+        <!-- 游客菜单 -->
+        <template v-else-if="isGuest">
+          <view class="guest-card" @click="goTo('/pages/login/index')">
+            <text class="guest-icon">🔑</text>
+            <text class="guest-text">点击登录</text>
+            <text class="guest-desc">登录后使用完整功能</text>
+          </view>
+        </template>
       </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 class="tips-section" v-if="isCustomer">
+      <view class="tip-card">
+        <text class="tip-title">💡 温馨提示</text>
+        <view class="tip-list">
+          <text class="tip-item">• 您可以浏览商品</text>
+          <text class="tip-item">• 您可以查看半年内的订单</text>
+          <text class="tip-item">• 如需下单，请联系销售人员</text>
+        </view>
+      </view>
+    </view>
+
+    <view class="tips-section" v-if="isGuest">
+      <view class="tip-card">
+        <text class="tip-title">🎉 欢迎使用</text>
+        <view class="tip-list">
+          <text class="tip-item">• 请登录后使用完整功能</text>
+          <text class="tip-item">• 登录后可浏览商品和查看订单</text>
+        </view>
       </view>
     </view>
 
     <!-- 退出登录 -->
-    <button class="logout-btn" @click="logout" v-if="!isGuest">退出登录</button>
+    <view class="logout-section" v-if="!isGuest">
+      <button class="logout-btn" @click="logout">🚪 退出登录</button>
+    </view>
   </view>
 </template>
 
@@ -137,6 +168,11 @@ export default {
       if (this.isSales) return '销售员'
       if (this.isCustomer) return '顾客'
       return '游客'
+    },
+    roleClass() {
+      if (this.isAdmin) return 'admin'
+      if (this.isCustomer) return 'customer'
+      return ''
     }
   },
   onLoad() {
@@ -207,94 +243,122 @@ export default {
 </script>
 
 <style>
+/* 全局样式 */
 .page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 30rpx;
 }
 
-.user-info {
+/* 顶部欢迎区域 */
+.header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  margin-bottom: 40rpx;
+  padding: 40rpx 20rpx;
+  margin-bottom: 30rpx;
 }
 
-.avatar {
-  width: 120rpx;
-  height: 120rpx;
-  background: #3cc51f;
-  border-radius: 60rpx;
+.welcome-section {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+}
+
+.welcome-text {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 8rpx;
 }
 
 .username {
+  font-size: 48rpx;
+  font-weight: bold;
   color: #fff;
-  font-size: 32rpx;
 }
 
-.role-tag {
-  margin-left: 20rpx;
-  padding: 8rpx 16rpx;
-  border-radius: 8rpx;
-  font-size: 24rpx;
-}
-
-.role-tag.admin {
-  background: #e6f7ff;
-  color: #1890ff;
-}
-
-.role-tag.customer {
-  background: #fff7e6;
-  color: #fa8c16;
-}
-
-.menu-grid {
+.role-badge {
   display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 40rpx;
-}
-
-.menu-item {
-  width: 25%;
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  margin-bottom: 30rpx;
+  padding: 12rpx 24rpx;
+  border-radius: 30rpx;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
 }
 
-.menu-icon {
-  font-size: 60rpx;
+.role-badge.admin {
+  background: rgba(255, 215, 0, 0.3);
 }
 
-.menu-text {
-  margin-top: 10rpx;
+.role-badge.customer {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.role-icon {
+  font-size: 28rpx;
+  margin-right: 8rpx;
+}
+
+.role-text {
   font-size: 24rpx;
-  color: #666;
+  color: #fff;
 }
 
-.section {
+/* 统计卡片 */
+.stats-card {
   background: #fff;
-  border-radius: 16rpx;
+  border-radius: 24rpx;
   padding: 30rpx;
   margin-bottom: 30rpx;
+  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
 }
 
-.section-title {
-  font-size: 28rpx;
-  font-weight: bold;
+.card-header {
   margin-bottom: 20rpx;
 }
 
+.card-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+}
+
 .stats-grid {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .stat-item {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  flex: 1;
+}
+
+.stat-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  margin-right: 16rpx;
+}
+
+.order-icon {
+  background: #e6f7ff;
+}
+
+.money-icon {
+  background: #fff7e6;
+}
+
+.alert-icon {
+  background: #fff1f0;
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
 }
 
 .stat-value {
@@ -304,26 +368,164 @@ export default {
 }
 
 .stat-label {
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: #999;
-  margin-top: 10rpx;
+  margin-top: 4rpx;
 }
 
-.tips {
+/* 功能菜单区域 */
+.menu-section {
+  margin-bottom: 30rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 20rpx;
+  display: block;
+}
+
+.menu-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.menu-card {
+  width: 48%;
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
 }
 
-.tip-text {
-  font-size: 26rpx;
-  color: #666;
-  line-height: 40rpx;
+.menu-card:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
+.menu-card-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  margin-bottom: 16rpx;
+}
+
+.menu-card-icon.blue {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.menu-card-icon.green {
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+}
+
+.menu-card-icon.orange {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.menu-card-icon.red {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+}
+
+.menu-card-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.menu-card-desc {
+  font-size: 22rpx;
+  color: #999;
+}
+
+/* 游客登录卡片 */
+.guest-card {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 24rpx;
+  padding: 60rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2rpx dashed rgba(255, 255, 255, 0.5);
+}
+
+.guest-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.guest-text {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 10rpx;
+}
+
+.guest-desc {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* 提示区域 */
+.tips-section {
+  margin-bottom: 30rpx;
+}
+
+.tip-card {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 24rpx;
+  padding: 30rpx;
+}
+
+.tip-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #fff;
+  display: block;
+  margin-bottom: 16rpx;
+}
+
+.tip-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.tip-item {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 36rpx;
+}
+
+/* 退出登录 */
+.logout-section {
+  padding: 0 20rpx;
 }
 
 .logout-btn {
-  background: #fff;
-  color: #ff4d4f;
-  border: none;
-  margin-top: 40rpx;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border: 2rpx solid rgba(255, 255, 255, 0.3);
+  border-radius: 50rpx;
+  padding: 24rpx;
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: bold;
+}
+
+.logout-btn:active {
+  background: rgba(255, 255, 255, 0.3);
 }
 </style>