✨ feat: 首页增加销售看板

klp-ui/src/views/index.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="dashboard-root">
-     <!-- 第一行：头像+欢迎语 -->
+    <!-- 第一行：头像+欢迎语 -->
     <div class="user-greeting-row">
       <img :src="avatar" class="user-avatar" alt="头像" />
       <div class="greeting-text">
@@ -12,7 +12,20 @@
     </div>
 
     <!-- 全部应用 -->
-    <AllApplications />
+    <el-row>
+      <AllApplications />
+    </el-row>
+
+    <el-row>
+      <el-col :span="12">
+        办公管理数据
+      </el-col>
+
+      <el-col :span="12">
+        <OrderDashboard />
+      </el-col>
+    </el-row>
+
     <!-- 数据概览区 -->
     <!-- <div class="data-overview">
       <div v-for="(card, index) in dataCards" :key="index" 
@@ -46,10 +59,12 @@
 <script>
 import * as echarts from 'echarts';
 import AllApplications from '@/views/components/AllApplications.vue';
+import OrderDashboard from '@/views/components/OrderDashboard.vue';
 
 export default {
   components: {
-    AllApplications
+    AllApplications,
+    OrderDashboard
   },
   data() {
     return {
@@ -346,50 +361,71 @@ export default {
   background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
   padding: 32px;
 }
+
 .data-overview {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   margin-bottom: 32px;
 }
+
 .data-card {
   padding: 24px;
   border-radius: 16px;
   backdrop-filter: blur(4px);
-  background: rgba(255,255,255,0.8);
-  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
-  border: 1px solid rgba(255,255,255,0.2);
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   transition: transform 0.2s;
 }
+
 .data-card:hover {
   transform: scale(1.02);
 }
+
 .data-card-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 16px;
 }
+
 .data-card-title {
   color: #6b7280;
   font-size: 14px;
   margin-bottom: 4px;
 }
+
 .data-card-value {
   font-size: 24px;
   font-weight: 600;
 }
+
 .data-card-icon {
   font-size: 24px;
 }
-.icon-blue { color: #3b82f6; }
-.icon-green { color: #22c55e; }
-.icon-yellow { color: #eab308; }
-.icon-purple { color: #a855f7; }
+
+.icon-blue {
+  color: #3b82f6;
+}
+
+.icon-green {
+  color: #22c55e;
+}
+
+.icon-yellow {
+  color: #eab308;
+}
+
+.icon-purple {
+  color: #a855f7;
+}
+
 .data-card-chart {
   height: 48px;
   width: 100%;
 }
+
 .chart-inner {
   width: 100%;
   height: 100%;
@@ -401,20 +437,23 @@ export default {
   gap: 24px;
   margin-bottom: 32px;
 }
+
 .business-module {
   display: flex;
   align-items: center;
   padding: 16px;
   border-radius: 12px;
   background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.2s;
   cursor: pointer;
 }
+
 .business-module:hover {
-  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
 }
+
 .business-module-icon {
   width: 40px;
   height: 40px;
@@ -425,17 +464,40 @@ export default {
   flex-shrink: 0;
   margin-right: 12px;
 }
+
 .business-module-icon i {
   font-size: 20px;
   color: #fff;
 }
-.bg-blue { background: #3b82f6; }
-.bg-green { background: #22c55e; }
-.bg-yellow { background: #eab308; }
-.bg-purple { background: #a855f7; }
-.bg-red { background: #ef4444; }
-.bg-indigo { background: #6366f1; }
-.bg-teal { background: #14b8a6; }
+
+.bg-blue {
+  background: #3b82f6;
+}
+
+.bg-green {
+  background: #22c55e;
+}
+
+.bg-yellow {
+  background: #eab308;
+}
+
+.bg-purple {
+  background: #a855f7;
+}
+
+.bg-red {
+  background: #ef4444;
+}
+
+.bg-indigo {
+  background: #6366f1;
+}
+
+.bg-teal {
+  background: #14b8a6;
+}
+
 .business-module-title {
   font-size: 16px;
   font-weight: 500;
@@ -447,30 +509,37 @@ export default {
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
 }
-.monitor-resource, .monitor-records {
+
+.monitor-resource,
+.monitor-records {
   padding: 24px;
   border-radius: 16px;
   background: #fff;
-  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
+  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
 }
+
 .monitor-title {
   font-size: 18px;
   font-weight: 500;
   margin-bottom: 24px;
 }
+
 .monitor-resource-charts {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
 }
+
 .monitor-resource-chart {
   height: 160px;
 }
+
 .monitor-records-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
+
 .monitor-record-item {
   display: flex;
   align-items: center;
@@ -478,9 +547,11 @@ export default {
   border-radius: 12px;
   transition: background 0.2s;
 }
+
 .monitor-record-item:hover {
   background: #f9fafb;
 }
+
 .monitor-record-icon {
   width: 32px;
   height: 32px;
@@ -490,24 +561,29 @@ export default {
   justify-content: center;
   margin-right: 16px;
 }
+
 .monitor-record-icon-inner {
   font-size: 14px;
   color: #fff;
 }
+
 .monitor-record-action {
   font-size: 14px;
   font-weight: 500;
 }
+
 .monitor-record-time {
   font-size: 12px;
   color: #6b7280;
 }
+
 .user-greeting-row {
   display: flex;
   align-items: center;
   gap: 24px;
   margin-bottom: 24px;
 }
+
 .user-avatar {
   width: 80px;
   height: 80px;
@@ -516,16 +592,19 @@ export default {
   border: 2px solid #e0e0e0;
   background: #fff;
 }
+
 .greeting-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+
 .greeting-title {
   font-size: 28px;
   font-weight: 600;
   color: #333;
 }
+
 .greeting-desc {
   font-size: 16px;
   color: #888;
@@ -539,4 +618,3 @@ export default {
   display: none;
 }
 </style>
-