aa

src/views/drive/index.vue

@@ -10,7 +10,10 @@
           <p class="drive-hero__desc">选择一个驾驶舱，快速进入对应业务看板。</p>
         </div>
         <div class="drive-hero__visual">
-          <el-image :src="banner" class="drive-hero__image" />
+          <el-image
+            :src="themeStore.theme === 'light' ? banner_white : banner"
+            class="drive-hero__image"
+          />
         </div>
       </section>
 
@@ -61,12 +64,14 @@
 <script setup lang="ts">
 import Header from "@components/home/header.vue";
 import Footer from "@components/home/Footer.vue";
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 
 import { getMCSsoToken } from "@/api/user";
 import { useUserStore } from "@/stores/useUserStore";
+import { useThemeStore } from "@/stores/useThemeStore";
 import { getAccessToken } from "@/utils/auth";
 import banner from "@/assets/images/drivebannere.png";
+import banner_white from "@/assets/images/drivebannere_white.png";
 
 import drivePc1 from "@/assets/images/dr1.png"; // 经营驾驶舱pc端背景图
 import drivePc2 from "@/assets/images/生产pc.png"; // 生产驾驶舱pc端背景图
@@ -81,6 +86,13 @@ import driveMobile4 from "@/assets/images/供应链驾驶舱.png"; // 供应链
 import driveMobile5 from "@/assets/images/市场驾驶舱.png"; // 市场驾驶舱移动端背景图
 import driveMobile6 from "@/assets/images/QHSE驾驶舱.png"; // QHSE驾驶舱移动端背景图
 
+import drivePc1_white from "@/assets/images/dr1_white.png"; // 经营驾驶舱pc端背景图
+import drivePc2_white from "@/assets/images/生产pc_white.png"; // 生产驾驶舱pc端背景图
+import drivePc3_white from "@/assets/images/财务pc_white.png"; // 财务驾驶舱pc端背景图
+import drivePc4_white from "@/assets/images/gong_white.png";
+import drivePc5_white from "@/assets/images/市场pc_white.png";
+import drivePc6_white from "@/assets/images/qhsepc_white.png";
+
 import all from "@/assets/images/driveall.png";
 import jingying from "@/assets/images/jingying.png";
 import shengc from "@/assets/images/shengc.png";
@@ -89,6 +101,7 @@ import gong from "@/assets/images/gong.png";
 import city from "@/assets/images/city.png";
 
 const userStore = useUserStore();
+const themeStore = useThemeStore();
 
 const tabs = [
   { label: "全部驾驶舱", value: "all", icon: all },
@@ -110,13 +123,134 @@ type DriveCard = {
   category: string; // 新增分类字段
 };
 
-const driveCards: DriveCard[] = [
+watch(
+  () => themeStore.theme,
+  () => {
+    if (themeStore.theme === "light") {
+      driveCards.value = [
+        {
+          title: "经营驾驶舱",
+          description: "查看经营分析、经营指标与执行情况。",
+          url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1",
+          bgColor: "#3876e0",
+          pcBg: drivePc1_white,
+          mobileBg: driveMobile1,
+          category: "management", // 对应经营管理
+        },
+        {
+          title: "生产驾驶舱",
+          description: "查看生产运营态势、核心指标与执行情况。",
+          url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/dbc9cf73-81ce-43f1-9923-45cdfa5d5d3a?preview=true&page_number=1",
+          bgColor: "#0f766e",
+          pcBg: drivePc2_white,
+          mobileBg: driveMobile2,
+          category: "production", // 对应生产运营
+        },
+        {
+          title: "财务驾驶舱",
+          description: "查看财务分析、预算执行与经营数据表现。",
+          url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1",
+          bgColor: "#ca8a04",
+          pcBg: drivePc3_white,
+          mobileBg: driveMobile3,
+          category: "finance", // 对应财务管理
+        },
+        {
+          title: "供应链驾驶舱",
+          description: "查看供应链分析、物料需求与执行。",
+          url: "#",
+          bgColor: "#7c3aed",
+          pcBg: drivePc4_white,
+          mobileBg: driveMobile4,
+          category: "supply", // 对应供应链管理
+        },
+        {
+          title: "市场驾驶舱",
+          description: "查看市场分析、销售数据与执行情况。",
+          url: "#",
+          bgColor: "#16a34a",
+          pcBg: drivePc5_white,
+          mobileBg: driveMobile5,
+          category: "marketing", // 对应市场营销
+        },
+        {
+          title: "QHSE驾驶舱",
+          description: "查看安全、健康、环境与质量数据。",
+          url: "#",
+          bgColor: "#dc2626",
+          pcBg: drivePc6_white,
+          mobileBg: driveMobile6,
+          category: "qhse", // 对应 QHSE
+        },
+      ];
+    } else {
+      driveCards.value = [
+        {
+          title: "经营驾驶舱",
+          description: "查看经营分析、经营指标与执行情况。",
+          url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1",
+          bgColor: "#3876e0",
+          pcBg: drivePc1,
+          mobileBg: driveMobile1,
+          category: "management", // 对应经营管理
+        },
+        {
+          title: "生产驾驶舱",
+          description: "查看生产运营态势、核心指标与执行情况。",
+          url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/dbc9cf73-81ce-43f1-9923-45cdfa5d5d3a?preview=true&page_number=1",
+          bgColor: "#0f766e",
+          pcBg: drivePc2,
+          mobileBg: driveMobile2,
+          category: "production", // 对应生产运营
+        },
+        {
+          title: "财务驾驶舱",
+          description: "查看财务分析、预算执行与经营数据表现。",
+          url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1",
+          bgColor: "#ca8a04",
+          pcBg: drivePc3,
+          mobileBg: driveMobile3,
+          category: "finance", // 对应财务管理
+        },
+        {
+          title: "供应链驾驶舱",
+          description: "查看供应链分析、物料需求与执行。",
+          url: "#",
+          bgColor: "#7c3aed",
+          pcBg: drivePc4,
+          mobileBg: driveMobile4,
+          category: "supply", // 对应供应链管理
+        },
+        {
+          title: "市场驾驶舱",
+          description: "查看市场分析、销售数据与执行情况。",
+          url: "#",
+          bgColor: "#16a34a",
+          pcBg: drivePc5,
+          mobileBg: driveMobile5,
+          category: "marketing", // 对应市场营销
+        },
+        {
+          title: "QHSE驾驶舱",
+          description: "查看安全、健康、环境与质量数据。",
+          url: "#",
+          bgColor: "#dc2626",
+          pcBg: drivePc6,
+          mobileBg: driveMobile6,
+          category: "qhse", // 对应 QHSE
+        },
+      ];
+    }
+  },
+);
+
+const driveCards = ref([
   {
     title: "经营驾驶舱",
     description: "查看经营分析、经营指标与执行情况。",
     url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1",
     bgColor: "#3876e0",
-    pcBg: drivePc1,
+    pcBg: themeStore.theme === "light" ? drivePc1_white : drivePc1,
     mobileBg: driveMobile1,
     category: "management", // 对应经营管理
   },
@@ -125,7 +259,7 @@ const driveCards: DriveCard[] = [
     description: "查看生产运营态势、核心指标与执行情况。",
     url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/dbc9cf73-81ce-43f1-9923-45cdfa5d5d3a?preview=true&page_number=1",
     bgColor: "#0f766e",
-    pcBg: drivePc2,
+    pcBg: themeStore.theme === "light" ? drivePc2_white : drivePc2,
     mobileBg: driveMobile2,
     category: "production", // 对应生产运营
   },
@@ -134,7 +268,7 @@ const driveCards: DriveCard[] = [
     description: "查看财务分析、预算执行与经营数据表现。",
     url: "https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1",
     bgColor: "#ca8a04",
-    pcBg: drivePc3,
+    pcBg: themeStore.theme === "light" ? drivePc3_white : drivePc3,
     mobileBg: driveMobile3,
     category: "finance", // 对应财务管理
   },
@@ -143,7 +277,7 @@ const driveCards: DriveCard[] = [
     description: "查看供应链分析、物料需求与执行。",
     url: "#",
     bgColor: "#7c3aed",
-    pcBg: drivePc4,
+    pcBg: themeStore.theme === "light" ? drivePc4_white : drivePc4,
     mobileBg: driveMobile4,
     category: "supply", // 对应供应链管理
   },
@@ -152,7 +286,7 @@ const driveCards: DriveCard[] = [
     description: "查看市场分析、销售数据与执行情况。",
     url: "#",
     bgColor: "#16a34a",
-    pcBg: drivePc5,
+    pcBg: themeStore.theme === "light" ? drivePc5_white : drivePc5,
     mobileBg: driveMobile5,
     category: "marketing", // 对应市场营销
   },
@@ -161,17 +295,17 @@ const driveCards: DriveCard[] = [
     description: "查看安全、健康、环境与质量数据。",
     url: "#",
     bgColor: "#dc2626",
-    pcBg: drivePc6,
+    pcBg: themeStore.theme === "light" ? drivePc6_white : drivePc6,
     mobileBg: driveMobile6,
     category: "qhse", // 对应 QHSE
   },
-];
+]);
 
 const filteredCards = computed(() => {
   if (activeTab.value === "all") {
-    return driveCards;
+    return driveCards.value;
   }
-  return driveCards.filter((card) => card.category === activeTab.value);
+  return driveCards.value.filter((card) => card.category === activeTab.value);
 });
 
 const openDrive = async (option: DriveCard) => {