From 28e15727beb977fac5dbd7844a9c3afdda249304 Mon Sep 17 00:00:00 2001
From: Xiaoyu <3306310490@qq.com>
Date: Tue, 18 Feb 2025 15:55:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=90=84=E7=A7=8D=E5=BA=9F?=
 =?UTF-8?q?=E5=BC=83=E7=9A=84=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 10 +++---
 src/layout/AdminLayout.vue       | 58 ++++++++++++++++++------------
 src/views/dashboard/index.vue    | 62 ++++++++++++++++++++------------
 src/views/report/about/index.vue | 37 +++++++++++++------
 src/views/system/data/index.vue  | 18 ++++++++--
 5 files changed, 125 insertions(+), 60 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b5b4128..fae0eec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,20 +7,22 @@ import { RouterView } from "vue-router";
 </template>
 
 <style lang="scss">
-@import "./styles/variables.scss";
+@use "./styles/variables" as v;
 
 html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
-  background-color: $bg-color;
-  color: $text-primary;
+  background-color: v.$bg-color;
+  color: v.$text-primary;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 #app {
-  height: 100vh;
+  height: 100%;
 }
 </style>
diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index 0ba0c26..6caccb7 100644
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@@ -4,6 +4,7 @@ import { useRouter, useRoute } from "vue-router";
 import { ElMessageBox } from 'element-plus';
 import { useUserStore } from '../stores/user';
 import { useSystemLogStore } from '../stores/systemLog';
+import { markRaw } from 'vue';
 import {
   Menu as IconMenu,
   Location,
@@ -23,6 +24,19 @@ const activeMenu = ref(route.path); // 初始化为当前路由路径
 const userStore = useUserStore();
 const systemLogStore = useSystemLogStore();
 
+// 使用 markRaw 包装所有图标组件
+const icons = {
+  IconMenu: markRaw(IconMenu),
+  Location: markRaw(Location),
+  Setting: markRaw(Setting),
+  User: markRaw(User),
+  DataAnalysis: markRaw(DataAnalysis),
+  DataBoard: markRaw(DataBoard),
+  Tools: markRaw(Tools),
+  Document: markRaw(Document),
+  DataLine: markRaw(DataLine)
+};
+
 // 监听路由变化
 watch(
   () => route.path,
@@ -77,18 +91,18 @@ const handleLogout = () => {
         @select="handleSelect"
       >
         <el-menu-item index="/dashboard">
-          <el-icon><DataBoard /></el-icon>
+          <el-icon><component :is="icons.DataBoard" /></el-icon>
           <template #title>控制台</template>
         </el-menu-item>
 
         <el-menu-item index="/screen">
-          <el-icon><DataLine /></el-icon>
+          <el-icon><component :is="icons.DataLine" /></el-icon>
           <template #title>数据大屏</template>
         </el-menu-item>
 
         <el-sub-menu index="system">
           <template #title>
-            <el-icon><Setting /></el-icon>
+            <el-icon><component :is="icons.Setting" /></el-icon>
             <span>系统管理</span>
           </template>
           <el-menu-item index="/system/users">用户管理</el-menu-item>
@@ -101,7 +115,7 @@ const handleLogout = () => {
 
         <el-sub-menu index="monitor">
           <template #title>
-            <el-icon><DataAnalysis /></el-icon>
+            <el-icon><component :is="icons.DataAnalysis" /></el-icon>
             <span>监测管理</span>
           </template>
           <el-menu-item index="/monitor/species">物种监测</el-menu-item>
@@ -110,7 +124,7 @@ const handleLogout = () => {
 
         <el-sub-menu index="patrol">
           <template #title>
-            <el-icon><Location /></el-icon>
+            <el-icon><component :is="icons.Location" /></el-icon>
             <span>巡护管理</span>
           </template>
           <el-menu-item index="/patrol/tasks">巡护任务</el-menu-item>
@@ -119,7 +133,7 @@ const handleLogout = () => {
 
         <el-sub-menu index="report">
           <template #title>
-            <el-icon><Document /></el-icon>
+            <el-icon><component :is="icons.Document" /></el-icon>
             <span>报告管理</span>
           </template>
           <el-menu-item index="/report/daily">日常报告</el-menu-item>
@@ -132,14 +146,14 @@ const handleLogout = () => {
     <el-container>
       <el-header>
         <div class="header-left">
-          <el-button type="text" @click="isCollapse = !isCollapse">
-            <el-icon><IconMenu /></el-icon>
+          <el-button link @click="isCollapse = !isCollapse">
+            <el-icon><component :is="icons.IconMenu" /></el-icon>
           </el-button>
         </div>
         <div class="header-right">
           <el-dropdown>
             <span class="user-info">
-              <el-icon><User /></el-icon>
+              <el-icon><component :is="icons.User" /></el-icon>
               管理员
             </span>
             <template #dropdown>
@@ -161,15 +175,15 @@ const handleLogout = () => {
 </template>
 
 <style lang="scss" scoped>
-@import "../styles/variables.scss";
+@use "../styles/variables" as v;
 
 .layout-container {
   height: 100vh;
 }
 
 .el-aside {
-  background-color: $sidebar-bg;
-  border-right: 1px solid $border-color;
+  background-color: v.$sidebar-bg;
+  border-right: 1px solid v.$border-color;
   transition: width 0.3s;
 
   .logo-container {
@@ -178,7 +192,7 @@ const handleLogout = () => {
     align-items: center;
     justify-content: center;
     padding: 0 20px;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid v.$border-color;
     overflow: hidden;
 
     .logo-img {
@@ -192,7 +206,7 @@ const handleLogout = () => {
       margin: 0;
       font-size: 18px;
       font-weight: 500;
-      color: $primary-color;
+      color: v.$primary-color;
       white-space: nowrap;
       letter-spacing: 2px;
     }
@@ -204,15 +218,15 @@ const handleLogout = () => {
     &.el-menu-vertical {
       .el-menu-item,
       .el-sub-menu__title {
-        color: $text-regular;
+        color: v.$text-regular;
 
         &:hover {
-          color: $primary-color;
+          color: v.$primary-color;
           background-color: #ecf5ff;
         }
 
         &.is-active {
-          color: $primary-color;
+          color: v.$primary-color;
           background-color: #ecf5ff;
         }
       }
@@ -221,8 +235,8 @@ const handleLogout = () => {
 }
 
 .el-header {
-  background-color: $header-bg;
-  box-shadow: $box-shadow;
+  background-color: v.$header-bg;
+  box-shadow: v.$box-shadow;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -236,7 +250,7 @@ const handleLogout = () => {
 
     .el-icon {
       font-size: 20px;
-      color: $text-regular;
+      color: v.$text-regular;
     }
   }
 }
@@ -246,7 +260,7 @@ const handleLogout = () => {
     display: flex;
     align-items: center;
     cursor: pointer;
-    color: $text-regular;
+    color: v.$text-regular;
 
     .el-icon {
       margin-right: 8px;
@@ -256,7 +270,7 @@ const handleLogout = () => {
 }
 
 .el-main {
-  background-color: $bg-color;
+  background-color: v.$bg-color;
   padding: 20px;
 }
 </style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 2f387d5..0cd4a48 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,7 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
-import { Timer, Bell, Document, Monitor, DataBoard, Location, Connection } from "@element-plus/icons-vue";
+import { markRaw } from 'vue'
+import {
+  Monitor,
+  DataAnalysis,
+  Location,
+  Document,
+  Timer,
+  Bell
+} from "@element-plus/icons-vue";
+
+// 使用 markRaw 包装图标组件
+const icons = {
+  Monitor: markRaw(Monitor),
+  DataAnalysis: markRaw(DataAnalysis),
+  Location: markRaw(Location),
+  Document: markRaw(Document),
+  Timer: markRaw(Timer),
+  Bell: markRaw(Bell)
+};
 
 // 统计数据
 const statistics = ref({
@@ -285,21 +303,21 @@ const initDistributionChart = () => {
 // 最新动态
 const activities = ref([
   {
-    icon: Timer,
+    title: "系统更新",
+    desc: "系统版本更新到 v2.0",
+    time: "刚刚",
     type: "primary",
-    title: "巡护任务完成",
-    desc: "张三完成了A区湿地的巡护任务",
-    time: "10分钟前",
+    icon: icons.Timer
   },
   {
-    icon: Bell,
+    icon: icons.Bell,
     type: "warning",
     title: "环境预警",
     desc: "B区水质监测点位出现异常数据",
     time: "30分钟前",
   },
   {
-    icon: Document,
+    icon: icons.Document,
     type: "success",
     title: "日报生成",
     desc: "系统自动生成了昨日监测报告",
@@ -310,7 +328,7 @@ const activities = ref([
 const statsCards = ref([
   {
     title: '物种监测',
-    icon: Monitor,
+    icon: icons.Monitor,
     value: '128',
     unit: '种',
     change: { value: '+12', label: '今日新增' },
@@ -320,7 +338,7 @@ const statsCards = ref([
   },
   {
     title: '环境监测',
-    icon: DataBoard,
+    icon: icons.DataAnalysis,
     value: '22',
     unit: '点',
     change: { value: '2', label: '异常' },
@@ -330,7 +348,7 @@ const statsCards = ref([
   },
   {
     title: '巡护任务',
-    icon: Location,
+    icon: icons.Location,
     value: '8',
     unit: '个',
     change: { value: '66%', label: '完成率' },
@@ -340,7 +358,7 @@ const statsCards = ref([
   },
   {
     title: '设备状态',
-    icon: Connection,
+    icon: icons.Connection,
     value: '32',
     unit: '台',
     change: { value: '88.9%', label: '在线率' },
@@ -442,7 +460,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-@import "../../styles/variables.scss";
+@use "../../styles/variables" as v;
 
 .dashboard-container {
   padding-bottom: 24px;
@@ -454,7 +472,7 @@ onMounted(() => {
       margin: 0;
       font-size: 24px;
       font-weight: 500;
-      color: $text-primary;
+      color: v.$text-primary;
     }
   }
 
@@ -560,7 +578,7 @@ onMounted(() => {
 
     :deep(.el-timeline-item__node) {
       background-color: transparent;
-      border: 2px solid $primary-color;
+      border: 2px solid v.$primary-color;
     }
 
     :deep(.el-timeline-item__tail) {
@@ -580,7 +598,7 @@ onMounted(() => {
     span {
       font-size: 16px;
       font-weight: 500;
-      color: $text-primary;
+      color: v.$text-primary;
       position: relative;
       padding-left: 12px;
 
@@ -592,7 +610,7 @@ onMounted(() => {
         transform: translateY(-50%);
         width: 4px;
         height: 16px;
-        background: $primary-color;
+        background: v.$primary-color;
         border-radius: 2px;
       }
     }
@@ -630,17 +648,17 @@ onMounted(() => {
 
         &.primary {
           background: rgba(64, 158, 255, 0.1);
-          color: $primary-color;
+          color: v.$primary-color;
         }
 
         &.warning {
           background: rgba(230, 162, 60, 0.1);
-          color: $warning-color;
+          color: v.$warning-color;
         }
 
         &.success {
           background: rgba(103, 194, 58, 0.1);
-          color: $success-color;
+          color: v.$success-color;
         }
 
         .el-icon {
@@ -654,19 +672,19 @@ onMounted(() => {
         .activity-title {
           font-size: 14px;
           font-weight: 500;
-          color: $text-primary;
+          color: v.$text-primary;
           margin-bottom: 4px;
         }
 
         .activity-desc {
           font-size: 13px;
-          color: $text-secondary;
+          color: v.$text-secondary;
         }
       }
 
       .activity-time {
         font-size: 12px;
-        color: $text-secondary;
+        color: v.$text-secondary;
         margin-left: 16px;
       }
     }
diff --git a/src/views/report/about/index.vue b/src/views/report/about/index.vue
index 336eec6..22c9167 100644
--- a/src/views/report/about/index.vue
+++ b/src/views/report/about/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { markRaw } from 'vue';
 import {
   Monitor,
   DataAnalysis,
@@ -15,6 +16,22 @@ import {
   Share,
 } from "@element-plus/icons-vue";
 
+// 使用 markRaw 包装图标组件
+const icons = {
+  Monitor: markRaw(Monitor),
+  DataAnalysis: markRaw(DataAnalysis),
+  Location: markRaw(Location),
+  Document: markRaw(Document),
+  Aim: markRaw(Aim),
+  TrendCharts: markRaw(TrendCharts),
+  Connection: markRaw(Connection),
+  Platform: markRaw(Platform),
+  Cpu: markRaw(Cpu),
+  Link: markRaw(Link),
+  Cellphone: markRaw(Cellphone),
+  Share: markRaw(Share)
+};
+
 const projectInfo = ref({
   title: "智慧湿地管理系统",
   version: "v2.0.0",
@@ -25,7 +42,7 @@ const projectInfo = ref({
   stats: [
     {
       title: "物种监测",
-      icon: Monitor,
+      icon: icons.Monitor,
       value: "128",
       unit: "种",
       change: "+12%",
@@ -34,7 +51,7 @@ const projectInfo = ref({
     },
     {
       title: "环境监测",
-      icon: DataAnalysis,
+      icon: icons.DataAnalysis,
       value: "24/7",
       unit: "",
       change: "99.9%",
@@ -43,7 +60,7 @@ const projectInfo = ref({
     },
     {
       title: "巡护覆盖",
-      icon: Location,
+      icon: icons.Location,
       value: "100%",
       unit: "",
       change: "+15%",
@@ -53,7 +70,7 @@ const projectInfo = ref({
     },
     {
       title: "设备在线",
-      icon: Connection,
+      icon: icons.Connection,
       value: "99.9%",
       unit: "",
       change: "stable",
@@ -67,7 +84,7 @@ const projectInfo = ref({
   architecture: {
     frontend: {
       title: "Web前端",
-      icon: Platform,
+      icon: icons.Platform,
       items: [
         { name: "Vue 3", desc: "核心框架" },
         { name: "Element Plus", desc: "组件库" },
@@ -78,7 +95,7 @@ const projectInfo = ref({
     },
     backend: {
       title: "后端服务",
-      icon: Cpu,
+      icon: icons.Cpu,
       items: [
         { name: "Node.js", desc: "运行环境" },
         { name: "MySQL", desc: "数据库" },
@@ -87,7 +104,7 @@ const projectInfo = ref({
     },
     miniapp: {
       title: "小程序端",
-      icon: Cellphone,
+      icon: icons.Cellphone,
       items: [
         { name: "微信小程序", desc: "原生开发" },
         { name: "Vant Weapp", desc: "UI组件库" },
@@ -101,13 +118,13 @@ const projectInfo = ref({
   scenarios: [
     {
       title: "Web管理端",
-      icon: Monitor,
+      icon: icons.Monitor,
       desc: "提供完整的湿地生态系统管理功能",
       features: ["数据看板", "环境监测", "物种管理", "系统配置"],
     },
     {
       title: "小程序端",
-      icon: Cellphone,
+      icon: icons.Cellphone,
       desc: "面向公众的湿地生态互动平台",
       features: [
         "实时生态数据监测",
@@ -119,7 +136,7 @@ const projectInfo = ref({
     },
     {
       title: "数据服务",
-      icon: DataAnalysis,
+      icon: icons.DataAnalysis,
       desc: "提供数据存储和分析能力",
       features: ["数据采集", "实时监测", "数据分析", "预警提醒"],
     },
diff --git a/src/views/system/data/index.vue b/src/views/system/data/index.vue
index 24324a1..da093f8 100644
--- a/src/views/system/data/index.vue
+++ b/src/views/system/data/index.vue
@@ -2,6 +2,8 @@
 import { ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import type { UploadProps } from "element-plus";
+import { markRaw } from 'vue';
+import { Upload, Download, Refresh } from "@element-plus/icons-vue";
 
 // 备份记录
 interface BackupRecord {
@@ -129,6 +131,12 @@ const handleDelete = (record: BackupRecord) => {
 const handleExport = () => {
   ElMessage.success("正在导出数据，请稍候...");
 };
+
+const icons = {
+  Upload: markRaw(Upload),
+  Download: markRaw(Download),
+  Refresh: markRaw(Refresh)
+};
 </script>
 
 <template>
@@ -140,9 +148,15 @@ const handleExport = () => {
           <span>数据导入导出</span>
           <div class="header-btns">
             <el-upload v-bind="uploadConfig" class="upload-btn">
-              <el-button type="primary">导入数据</el-button>
+              <el-button type="primary">
+                <el-icon><component :is="icons.Upload" /></el-icon>
+                导入数据
+              </el-button>
             </el-upload>
-            <el-button type="success" @click="handleExport">导出数据</el-button>
+            <el-button type="success" @click="handleExport">
+              <el-icon><component :is="icons.Download" /></el-icon>
+              导出数据
+            </el-button>
           </div>
         </div>
       </template>