Sfoglia il codice sorgente

feat(home): apply gradient header and stat cards for sales

- Enable TopBar gradient mode and whiten user info area
- Convert stat cards to gradient backgrounds with inline linear-gradient
- Unify quick-entry icon containers to bg-primary-light with tap feedback
- Change task-reminder button to secondary style (white bg, gray border)
- Add tap feedback to list items via scoped :active style
- Fix StatusTag py-0.5 Tailwind decimal class to inline style

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
xuyunhui 1 settimana fa
parent
commit
a4c5ecf5fc
2 ha cambiato i file con 82 aggiunte e 56 eliminazioni
  1. 1 1
      src/components/common/StatusTag.vue
  2. 81 55
      src/components/home/SalesHome.vue

+ 1 - 1
src/components/common/StatusTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: bgColor, color: textColor }">
+  <view class="inline-flex items-center px-2 rounded text-xs font-medium" :style="{ backgroundColor: bgColor, color: textColor, paddingTop: '2px', paddingBottom: '2px' }">
     {{ label }}
   </view>
 </template>

+ 81 - 55
src/components/home/SalesHome.vue

@@ -1,18 +1,18 @@
 
 <template>
   <view class="app-container">
-    <TopBar title="">
+    <TopBar title="" gradient>
       <template #left>
         <view class="flex items-center">
-          <view class="w-12 h-12 bg-primary-light rounded-2xl flex items-center justify-center mr-3">
-            <text class="uni-icons uniui-person-filled text-primary text-xl"></text>
+          <view class="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center mr-3">
+            <text class="uni-icons uniui-person-filled text-white text-xl"></text>
           </view>
           <view>
-            <text class="text-gray-500 text-xs block">下午好</text>
-            <text class="text-gray-800 text-lg font-bold">{{ userName }}</text>
+            <text class="text-white/80 text-xs block">下午好</text>
+            <text class="text-white text-lg font-bold">{{ userName }}</text>
           </view>
-          <button class="ml-4 w-10 h-10 bg-surface rounded-full flex items-center justify-center relative" @click="goToNotification">
-            <text class="uni-icons uniui-notification-filled text-gray-500 text-lg"></text>
+          <button class="ml-4 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center relative" @click="goToNotification">
+            <text class="uni-icons uniui-notification-filled text-white text-lg"></text>
           </button>
         </view>
       </template>
@@ -23,17 +23,22 @@
       <!-- 统计卡片 -->
       <uni-card title="数据概览" :is-shadow="false" :is-full="false">
         <view class="grid grid-cols-3 gap-3">
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToProjectList">
-            <text class="stat-number text-primary block">{{ projectStore.totalCount }}</text>
-            <text class="text-desc mt-1 block">本月项目</text>
+          <!-- 本月项目 -->
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);" @click="goToProjectList">
+            <text class="stat-number text-white block">{{ projectStore.totalCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">本月项目</text>
           </view>
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToTaskList">
-            <text class="stat-number text-warning block">{{ taskStore.pendingCount }}</text>
-            <text class="text-desc mt-1 block">待确认</text>
+
+          <!-- 待确认 -->
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #ec4899, #8b5cf6);" @click="goToTaskList">
+            <text class="stat-number text-white block">{{ taskStore.pendingCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">待确认</text>
           </view>
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToTaskList">
-            <text class="stat-number text-success block">{{ taskStore.todayCount }}</text>
-            <text class="text-desc mt-1 block">进行中</text>
+
+          <!-- 进行中 -->
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);" @click="goToTaskList">
+            <text class="stat-number text-white block">{{ taskStore.todayCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">进行中</text>
           </view>
         </view>
       </uni-card>
@@ -42,19 +47,19 @@
       <uni-card title="快捷功能" :is-shadow="false">
         <view class="grid grid-cols-3 gap-4">
           <view class="flex flex-col items-center" @click="goToProjectList">
-            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 transition-transform">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 tap-feedback">
               <text class="uni-icons uniui-folder-add-filled text-primary text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">项目库</text>
           </view>
           <view class="flex flex-col items-center opacity-50">
-            <view class="w-14 h-14 bg-surface rounded-2xl flex items-center justify-center mb-2">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 tap-feedback opacity-60">
               <text class="uni-icons uniui-personadd-filled text-gray-400 text-2xl"></text>
             </view>
             <text class="text-xs text-gray-400 font-medium">客户管理</text>
           </view>
           <view class="flex flex-col items-center opacity-50">
-            <view class="w-14 h-14 bg-surface rounded-2xl flex items-center justify-center mb-2">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 tap-feedback opacity-60">
               <text class="uni-icons uniui-file-text-filled text-gray-400 text-2xl"></text>
             </view>
             <text class="text-xs text-gray-400 font-medium">合同管理</text>
@@ -64,10 +69,10 @@
 
       <!-- 任务提醒入口 -->
       <button
-        class="w-full py-3 bg-primary-light text-primary rounded-xl text-sm font-medium flex items-center justify-center"
+        class="w-full py-3 bg-white border border-gray-200 text-gray-600 rounded-xl text-sm font-medium flex items-center justify-center tap-feedback"
         @click="goToTaskReminder"
       >
-        <text class="uni-icons uniui-notification-filled mr-2"></text>
+        <text class="uni-icons uniui-notification-filled mr-2 text-gray-500"></text>
         任务提醒 ({{ taskStore.pendingCount }})
       </button>
 
@@ -82,23 +87,28 @@
           <text class="text-desc">暂无任务</text>
         </view>
         <uni-list v-else :border="false">
-          <uni-list-item
+          <view
             v-for="task in taskStore.tasks.slice(0, 3)"
             :key="task.id"
-            :title="task.projectName"
-            :note="task.address || task.scheduleDate"
-            show-arrow
-            @click="goToTaskDetail(task.id)"
+            class="tap-feedback"
           >
-            <template #header>
-              <view class="icon-box mr-3">
-                <text class="uni-icons uniui-flag"></text>
-              </view>
-            </template>
-            <template #footer>
-              <StatusTag :status="task.status" />
-            </template>
-          </uni-list-item>
+            <uni-list-item
+              :title="task.projectName"
+              :note="task.address || task.scheduleDate"
+              show-arrow
+              clickable
+              @click="goToTaskDetail(task.id)"
+            >
+              <template #header>
+                <view class="icon-box mr-3">
+                  <text class="uni-icons uniui-flag"></text>
+                </view>
+              </template>
+              <template #footer>
+                <StatusTag :status="task.status" />
+              </template>
+            </uni-list-item>
+          </view>
         </uni-list>
       </uni-card>
 
@@ -110,18 +120,23 @@
         @click-extra="goToNoticeList"
       >
         <uni-list :border="false">
-          <uni-list-item
+          <view
             v-for="(notice, index) in notices"
             :key="index"
-            :title="notice.title"
-            :note="notice.date"
-            show-arrow
-            @click="goToNoticeDetail"
+            class="tap-feedback"
           >
-            <template #header>
-              <view class="w-2 h-2 rounded-full mt-1 mr-2 flex-shrink-0" :class="index === 0 ? 'bg-danger' : 'bg-gray-300'"></view>
-            </template>
-          </uni-list-item>
+            <uni-list-item
+              :title="notice.title"
+              :note="notice.date"
+              show-arrow
+              clickable
+              @click="goToNoticeDetail"
+            >
+              <template #header>
+                <view class="w-2 h-2 rounded-full mt-1 mr-2 flex-shrink-0" :class="index === 0 ? 'bg-danger' : 'bg-gray-300'"></view>
+              </template>
+            </uni-list-item>
+          </view>
         </uni-list>
       </uni-card>
 
@@ -133,20 +148,25 @@
         @click-extra="goToKnowledgeList"
       >
         <uni-list :border="false">
-          <uni-list-item
+          <view
             v-for="(item, index) in knowledgeList"
             :key="index"
-            :title="item.title"
-            :note="item.summary"
-            show-arrow
-            @click="goToKnowledgeDetail"
+            class="tap-feedback"
           >
-            <template #header>
-              <view class="w-10 h-10 bg-primary-light rounded-xl flex items-center justify-center mr-3 flex-shrink-0">
-                <text class="uni-icons uniui-chart text-primary text-lg"></text>
-              </view>
-            </template>
-          </uni-list-item>
+            <uni-list-item
+              :title="item.title"
+              :note="item.summary"
+              show-arrow
+              clickable
+              @click="goToKnowledgeDetail"
+            >
+              <template #header>
+                <view class="w-10 h-10 bg-primary-light rounded-xl flex items-center justify-center mr-3 flex-shrink-0">
+                  <text class="uni-icons uniui-chart text-primary text-lg"></text>
+                </view>
+              </template>
+            </uni-list-item>
+          </view>
         </uni-list>
       </uni-card>
     </view>
@@ -228,4 +248,10 @@ onMounted(() => {
   font-size: 24px;
   font-weight: 700;
 }
+.tap-feedback {
+  transition: transform 0.15s ease;
+}
+.tap-feedback:active {
+  transform: scale(0.95);
+}
 </style>