From 2134f6573fd622fb2aaf8367b14bc26335e3f2e1 Mon Sep 17 00:00:00 2001
From: lewis_yan <lewis_yan@avc.co>
Date: Thu, 2 Apr 2026 18:31:42 +0800
Subject: [PATCH] refactor(dashboard): unify buyer and supplier dashboards with
 right sidebar

- Replace notification card with home image and quick navigation
- Add welcome header text to both dashboards
- Fix dashboard API URL to use /api prefix consistently
- Adjust task table to flex-grow and fill available height
- Reduce quick nav icon and padding sizes
- Update responsive breakpoints
---
 web/src/api/pisadmin/dashboard.ts             |   6 +-
 .../pisadmin/dashboard/BuyerDashboard.vue     | 215 +++++++++++++-----
 .../pisadmin/dashboard/SupplierDashboard.vue  | 179 +++++++++++++--
 3 files changed, 320 insertions(+), 80 deletions(-)

diff --git a/web/src/api/pisadmin/dashboard.ts b/web/src/api/pisadmin/dashboard.ts
index e849f0a..ee80014 100644
--- a/web/src/api/pisadmin/dashboard.ts
+++ b/web/src/api/pisadmin/dashboard.ts
@@ -1,8 +1,10 @@
-import request from '/@/utils/request';
+import { request } from '/@/utils/service';
+
+const apiPrefix = '/api/pisadmin/dashboard/';
 
 export function getDashboard() {
   return request({
-    url: '/pisadmin/dashboard/',
+    url: apiPrefix,
     method: 'get',
   });
 }
diff --git a/web/src/views/pisadmin/dashboard/BuyerDashboard.vue b/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
index 9d2fc21..e0bed46 100644
--- a/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
+++ b/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="buyer-dashboard">
+    <!-- 欢迎语 -->
+    <div class="welcome-header">
+      <span class="welcome-text">{{ $t('message.home.welcomeInfo') }}{{ userInfo.userInfos.name }}</span>
+      <span class="welcome-sub">{{ $t('message.home.welcomeInfo1') }}</span>
+    </div>
+
     <!-- KPI 指标卡片 -->
     <div class="kpi-section">
       <div class="kpi-card blue">
@@ -12,25 +18,17 @@
       <div class="kpi-card green">
         <div class="kpi-title">进行中询价单</div>
         <div class="kpi-value">{{ kpi.pending_inquiries }}</div>
-        <div class="kpi-trend" style="color: #2E5BFF;">正常流转中</div>
       </div>
       <div class="kpi-card orange">
         <div class="kpi-title">供应商报价及时率</div>
         <div class="kpi-value">92%</div>
         <div class="kpi-trend trend-flat"><i class="fa fa-minus"></i> 持平</div>
       </div>
-      <div class="kpi-card red">
-        <div class="kpi-title">我的待办任务</div>
-        <div class="kpi-value" style="color: #EF4444;">{{ tasks.length }}</div>
-        <div class="kpi-trend trend-down">
-          <i class="fa fa-exclamation-circle"></i> {{ urgentTasks }}项紧急
-        </div>
-      </div>
     </div>
 
     <!-- 主体内容区 -->
     <div class="main-container">
-      <!-- 左侧：待办任务 -->
+      <!-- 待办任务 -->
       <div class="card task-card">
         <div class="card-header">
           <div class="card-title">
@@ -71,33 +69,29 @@
         </div>
       </div>
 
-      <!-- 右侧：消息通知 -->
-      <div class="card notification-card">
-        <div class="card-header">
-          <div class="card-title" style="position: relative;">
-            <i class="fa fa-bell" style="color: #2E5BFF;"></i> 消息通知
-            <span v-if="unreadCount > 0" class="notif-badge">{{ unreadCount }}</span>
-          </div>
-          <a href="#" class="view-all">全部消息</a>
+      <!-- 右侧：图片 + 快捷入口 -->
+      <div class="right-sidebar">
+        <!-- 图片卡片 -->
+        <div class="card home-img-card">
+          <img :src="HomeBg" alt="home-bg" class="home-bg-img" />
         </div>
-        <ul class="notification-list">
-          <li v-for="msg in messages" :key="msg.id" class="notification-item">
-            <div :class="getNotifIconClass(msg.title)">
-              <i :class="getNotifIcon(msg.title)"></i>
+
+        <!-- 快捷入口 -->
+        <div class="card quick-nav-card">
+          <div class="card-header">
+            <div class="card-title">
+              <i class="fa fa-th-large" style="color: #2E5BFF;"></i> 快捷入口
             </div>
-            <div class="notif-content">
-              <div class="notif-header">
-                <span class="notif-title">{{ msg.title }}</span>
-                <span class="notif-time">{{ formatMsgTime(msg.created_at) }}</span>
+          </div>
+          <div class="quick-nav-grid">
+            <div v-for="(item, index) in quickNavList" :key="index" class="quick-nav-item" @click="handleNavClick(item.url)">
+              <div class="quick-nav-icon" :style="{ background: item.bgColor }">
+                <i :class="item.icon" :style="{ color: item.iconColor }"></i>
               </div>
-              <p class="notif-desc">{{ msg.content }}</p>
-              <a href="#" class="notif-link">查看详情 <i class="fa fa-arrow-right" style="font-size: 10px;"></i></a>
+              <span class="quick-nav-label">{{ item.label }}</span>
             </div>
-          </li>
-          <li v-if="messages.length === 0" class="empty-notif">
-            暂无消息通知
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -109,8 +103,7 @@
         </div>
         <div class="chart-legend">
           <span><span class="legend-dot" style="background: #2E5BFF;"></span>发布询价</span>
-          <span><span class="legend-dot" style="background: #10B981;"></span>收到报价</span>
-          <span><span class="legend-dot" style="background: #F59E0B;"></span>响应率</span>
+          <span><span class="legend-dot" style="background: #10B981;"></span>议价完成</span>
         </div>
       </div>
       <div class="chart-container">
@@ -124,13 +117,32 @@
 import { computed, ref, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useDashboardStore } from '/@/stores/modules/dashboard';
+import { useUserInfo } from '/@/stores/userInfo';
+import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
+import HomeBg from '/@/assets/home-bg.png';
 
 const store = useDashboardStore();
 const { buyer } = storeToRefs(store);
+const userInfo = useUserInfo();
+const router = useRouter();
 
 const chartRef = ref();
 
+// 快捷入口列表
+const quickNavList = [
+  { icon: 'fa fa-user-o', label: '角色管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/role' },
+  { icon: 'fa fa-sitemap', label: '部门管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/dept' },
+  { icon: 'iconfont icon-system', label: '系统配置', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/config' },
+  { icon: 'iconfont icon-dict', label: '字典管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/dictionary' },
+  { icon: 'iconfont icon-Area', label: '区域管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/areas' },
+  { icon: 'iconfont icon-xiaoxizhongxin', label: '消息中心', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/messageCenter' },
+];
+
+function handleNavClick(url: string) {
+  window.location.href = url;
+}
+
 const kpi = computed(() => buyer.value?.kpi || {
   total_inquiries: 0,
   pending_inquiries: 0,
@@ -206,7 +218,6 @@ function initChart() {
   const labels = [];
   const dataPublish = [2, 3, 2, 4, 3, 5, 4, 3, 5, 6, 4, 3, 4, 5, 7, 6, 5, 4, 3, 4, 5, 6, 5, 4, 3, 4, 5, 4, 3, 4];
   const dataReceive = [1, 2, 1, 3, 2, 4, 3, 2, 4, 5, 3, 2, 3, 4, 6, 5, 4, 3, 2, 3, 4, 5, 4, 3, 2, 3, 4, 3, 2, 3];
-  const dataRate = [50, 66, 50, 75, 66, 80, 75, 66, 80, 83, 75, 66, 75, 80, 85, 83, 80, 75, 66, 75, 80, 83, 80, 75, 66, 75, 80, 75, 66, 75];
 
   const today = new Date();
   for (let i = 29; i >= 0; i--) {
@@ -236,15 +247,6 @@ function initChart() {
         axisLine: { show: false },
         axisLabel: { color: '#9CA3AF', fontSize: 11 },
         splitLine: { lineStyle: { color: '#F3F4F6', type: 'dashed' } }
-      },
-      {
-        type: 'value',
-        name: '响应率(%)',
-        min: 0,
-        max: 100,
-        axisLine: { show: false },
-        axisLabel: { color: '#9CA3AF', fontSize: 11, formatter: '{value}%' },
-        splitLine: { show: false }
       }
     ],
     series: [
@@ -259,7 +261,7 @@ function initChart() {
         yAxisIndex: 0
       },
       {
-        name: '收到报价单',
+        name: '议价完成',
         type: 'line',
         data: dataReceive,
         smooth: true,
@@ -267,15 +269,6 @@ function initChart() {
         areaStyle: { color: 'rgba(16, 185, 129, 0.05)' },
         lineStyle: { width: 2 },
         yAxisIndex: 0
-      },
-      {
-        name: '响应率(%)',
-        type: 'line',
-        data: dataRate,
-        smooth: true,
-        itemStyle: { color: '#F59E0B' },
-        lineStyle: { width: 2, type: 'dashed' },
-        yAxisIndex: 1
       }
     ]
   });
@@ -293,6 +286,23 @@ watch(trend, () => {
 
 <style scoped lang="scss">
 .buyer-dashboard {
+  /* 欢迎语 */
+  .welcome-header {
+    margin-bottom: 24px;
+    font-size: 16px;
+    font-weight: 700;
+
+    .welcome-text {
+      color: #1F2937;
+    }
+
+    .welcome-sub {
+      font-size: 12px;
+      color: #9CA3AF;
+      margin-left: 8px;
+    }
+  }
+
   --primary-color: #2E5BFF;
   --text-main: #1F2937;
   --text-secondary: #6B7280;
@@ -313,7 +323,7 @@ watch(trend, () => {
 /* KPI 卡片区域 */
 .kpi-section {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-bottom: 24px;
 }
@@ -380,6 +390,12 @@ watch(trend, () => {
   grid-template-columns: 2fr 1fr;
   gap: 24px;
   margin-bottom: 24px;
+  align-items: stretch;
+}
+
+.task-card {
+  display: flex;
+  flex-direction: column;
 }
 
 /* 卡片通用样式 */
@@ -424,6 +440,9 @@ watch(trend, () => {
 /* 待办任务表格 */
 .task-table-container {
   overflow-x: auto;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 100px;
 }
 
 table {
@@ -623,11 +642,88 @@ tr:last-child td {
   height: 100%;
 }
 
+/* 右侧边栏 */
+.right-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: stretch;
+}
+
+.right-sidebar .card {
+  flex: 1;
+}
+
+/* 图片卡片 */
+.home-img-card {
+  padding: 0;
+  overflow: hidden;
+  height: 200px;
+}
+
+.home-bg-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 快捷入口 */
+.quick-nav-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.quick-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 8px;
+  background: var(--bg-body);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #E8EEFE;
+    transform: translateY(-2px);
+  }
+}
+
+.quick-nav-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.quick-nav-label {
+  font-size: 13px;
+  color: var(--text-main);
+  font-weight: 500;
+  text-align: center;
+}
+
 /* 响应式 */
 @media (max-width: 1200px) {
   .main-container {
     grid-template-columns: 1fr;
   }
+  .right-sidebar {
+    flex-direction: row;
+  }
+  .home-img-card {
+    flex: 1;
+    height: auto;
+  }
+  .quick-nav-card {
+    flex: 1;
+  }
   .kpi-section {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -637,5 +733,14 @@ tr:last-child td {
   .kpi-section {
     grid-template-columns: 1fr;
   }
+  .right-sidebar {
+    flex-direction: column;
+  }
+  .home-img-card {
+    height: 180px;
+  }
+  .quick-nav-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 </style>
diff --git a/web/src/views/pisadmin/dashboard/SupplierDashboard.vue b/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
index 0f8517f..72b7da9 100644
--- a/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
+++ b/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="supplier-dashboard">
+    <!-- 欢迎语 -->
+    <div class="welcome-header">
+      <span class="welcome-text">{{ $t('message.home.welcomeInfo') }}{{ userInfo.userInfos.name }}</span>
+      <span class="welcome-sub">{{ $t('message.home.welcomeInfo1') }}</span>
+    </div>
+
     <!-- KPI 指标卡片 -->
     <div class="kpi-section">
       <div class="kpi-card blue">
@@ -69,33 +75,29 @@
         </div>
       </div>
 
-      <!-- 右侧：消息通知 -->
-      <div class="card notification-card">
-        <div class="card-header">
-          <div class="card-title" style="position: relative;">
-            <i class="fa fa-bell" style="color: #2E5BFF;"></i> 消息通知
-            <span v-if="unreadCount > 0" class="notif-badge">{{ unreadCount }}</span>
-          </div>
-          <a href="#" class="view-all">全部消息</a>
+      <!-- 右侧：图片 + 快捷入口 -->
+      <div class="right-sidebar">
+        <!-- 图片卡片 -->
+        <div class="card home-img-card">
+          <img :src="HomeBg" alt="home-bg" class="home-bg-img" />
         </div>
-        <ul class="notification-list">
-          <li v-for="msg in messages" :key="msg.id" class="notification-item">
-            <div :class="getNotifIconClass(msg.title)">
-              <i :class="getNotifIcon(msg.title)"></i>
+
+        <!-- 快捷入口 -->
+        <div class="card quick-nav-card">
+          <div class="card-header">
+            <div class="card-title">
+              <i class="fa fa-th-large" style="color: #2E5BFF;"></i> 快捷入口
             </div>
-            <div class="notif-content">
-              <div class="notif-header">
-                <span class="notif-title">{{ msg.title }}</span>
-                <span class="notif-time">{{ formatMsgTime(msg.created_at) }}</span>
+          </div>
+          <div class="quick-nav-grid">
+            <div v-for="(item, index) in quickNavList" :key="index" class="quick-nav-item" @click="handleNavClick(item.url)">
+              <div class="quick-nav-icon" :style="{ background: item.bgColor }">
+                <i :class="item.icon" :style="{ color: item.iconColor }"></i>
               </div>
-              <p class="notif-desc">{{ msg.content }}</p>
-              <a href="#" class="notif-link">查看详情 <i class="fa fa-arrow-right" style="font-size: 10px;"></i></a>
+              <span class="quick-nav-label">{{ item.label }}</span>
             </div>
-          </li>
-          <li v-if="messages.length === 0" class="empty-notif">
-            暂无消息通知
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -121,13 +123,32 @@
 import { computed, ref, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useDashboardStore } from '/@/stores/modules/dashboard';
+import { useUserInfo } from '/@/stores/userInfo';
+import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
+import HomeBg from '/@/assets/home-bg.png';
 
 const store = useDashboardStore();
 const { supplier } = storeToRefs(store);
+const userInfo = useUserInfo();
+const router = useRouter();
 
 const chartRef = ref();
 
+// 快捷入口列表
+const quickNavList = [
+  { icon: 'fa fa-user-o', label: '角色管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/role' },
+  { icon: 'fa fa-sitemap', label: '部门管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/dept' },
+  { icon: 'iconfont icon-system', label: '系统配置', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/config' },
+  { icon: 'iconfont icon-dict', label: '字典管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/dictionary' },
+  { icon: 'iconfont icon-Area', label: '区域管理', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/areas' },
+  { icon: 'iconfont icon-xiaoxizhongxin', label: '消息中心', iconColor: '#6B7280', bgColor: '#F3F4F6', url: '#/messageCenter' },
+];
+
+function handleNavClick(url: string) {
+  window.location.href = url;
+}
+
 const kpi = computed(() => supplier.value?.kpi || {
   total_quotes: 0,
   pending_quotes: 0,
@@ -262,6 +283,23 @@ watch(trend, () => {
 
 <style scoped lang="scss">
 .supplier-dashboard {
+  /* 欢迎语 */
+  .welcome-header {
+    margin-bottom: 24px;
+    font-size: 16px;
+    font-weight: 700;
+
+    .welcome-text {
+      color: #1F2937;
+    }
+
+    .welcome-sub {
+      font-size: 12px;
+      color: #9CA3AF;
+      margin-left: 8px;
+    }
+  }
+
   --primary-color: #2E5BFF;
   --text-main: #1F2937;
   --text-secondary: #6B7280;
@@ -350,6 +388,12 @@ watch(trend, () => {
   grid-template-columns: 2fr 1fr;
   gap: 24px;
   margin-bottom: 24px;
+  align-items: stretch;
+}
+
+.task-card {
+  display: flex;
+  flex-direction: column;
 }
 
 /* 卡片通用样式 */
@@ -394,6 +438,9 @@ watch(trend, () => {
 /* 待办任务表格 */
 .task-table-container {
   overflow-x: auto;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 100px;
 }
 
 table {
@@ -552,6 +599,73 @@ tr:last-child td {
   margin-top: 0;
 }
 
+/* 右侧边栏 */
+.right-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: stretch;
+}
+
+.right-sidebar .card {
+  flex: 1;
+}
+
+/* 图片卡片 */
+.home-img-card {
+  padding: 0;
+  overflow: hidden;
+  height: 200px;
+}
+
+.home-bg-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 快捷入口 */
+.quick-nav-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.quick-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 8px;
+  background: var(--bg-body);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #E8EEFE;
+    transform: translateY(-2px);
+  }
+}
+
+.quick-nav-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.quick-nav-label {
+  font-size: 13px;
+  color: var(--text-main);
+  font-weight: 500;
+  text-align: center;
+}
+
 .chart-legend {
   font-size: 12px;
   color: var(--text-secondary);
@@ -586,6 +700,16 @@ tr:last-child td {
   .main-container {
     grid-template-columns: 1fr;
   }
+  .right-sidebar {
+    flex-direction: row;
+  }
+  .home-img-card {
+    flex: 1;
+    height: auto;
+  }
+  .quick-nav-card {
+    flex: 1;
+  }
   .kpi-section {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -595,5 +719,14 @@ tr:last-child td {
   .kpi-section {
     grid-template-columns: 1fr;
   }
+  .right-sidebar {
+    flex-direction: column;
+  }
+  .home-img-card {
+    height: 180px;
+  }
+  .quick-nav-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 </style>