feat：修复全局警告报错

src/styles/common.scss

@@ -1,11 +1,11 @@
 :root {
   --el-color-warning: #{$warning-color};
-  --el-color-warning-light-3: #{mix(#fff, $warning-color, 30%)};
-  --el-color-warning-light-5: #{mix(#fff, $warning-color, 50%)};
-  --el-color-warning-light-7: #{mix(#fff, $warning-color, 70%)};
-  --el-color-warning-light-8: #{mix(#fff, $warning-color, 80%)};
-  --el-color-warning-light-9: #{mix(#fff, $warning-color, 90%)};
-  --el-color-warning-dark-2: #{mix(#000, $warning-color, 20%)};
+  --el-color-warning-light-3: #{color.mix(#fff, $warning-color, 30%)};
+  --el-color-warning-light-5: #{color.mix(#fff, $warning-color, 50%)};
+  --el-color-warning-light-7: #{color.mix(#fff, $warning-color, 70%)};
+  --el-color-warning-light-8: #{color.mix(#fff, $warning-color, 80%)};
+  --el-color-warning-light-9: #{color.mix(#fff, $warning-color, 90%)};
+  --el-color-warning-dark-2: #{color.mix(#000, $warning-color, 20%)};
 }
 
 html,

src/views/planting/index.vue

@@ -4,13 +4,8 @@
       <!-- 顶部：Tab + 操作 -->
       <div class="page-header">
         <div class="page-tabs">
-          <div
-            v-for="tab in tabs"
-            :key="tab.value"
-            class="page-tabs__item"
-            :class="{ 'is-active': activeTab === tab.value }"
-            @click="activeTab = tab.value"
-          >
+          <div v-for="tab in tabs" :key="tab.value" class="page-tabs__item"
+            :class="{ 'is-active': activeTab === tab.value }" @click="activeTab = tab.value">
             {{ tab.label }}
           </div>
         </div>
@@ -24,31 +19,11 @@
         <div class="filter-row">
           <span class="filter-label">区域:</span>
           <div class="filter-content region-selects">
-            <el-select
-              v-model="filters.province"
-              placeholder="选择省份"
-              clearable
-              class="region-select"
-            >
-              <el-option
-                v-for="item in provinceOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="filters.province" placeholder="选择省份" clearable class="region-select">
+              <el-option v-for="item in provinceOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
-            <el-select
-              v-model="filters.city"
-              placeholder="选择城市"
-              clearable
-              class="region-select"
-            >
-              <el-option
-                v-for="item in cityOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="filters.city" placeholder="选择城市" clearable class="region-select">
+              <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </div>
         </div>
@@ -56,14 +31,8 @@
         <div class="filter-row">
           <span class="filter-label">品类:</span>
           <div class="filter-content tag-list">
-            <button
-              v-for="(item, idx) in categoryOptions"
-              :key="`category-${idx}`"
-              type="button"
-              class="filter-tag"
-              :class="{ 'is-active': filters.categoryIndex === idx }"
-              @click="filters.categoryIndex = idx"
-            >
+            <button v-for="(item, idx) in categoryOptions" :key="`category-${idx}`" type="button" class="filter-tag"
+              :class="{ 'is-active': filters.categoryIndex === idx }" @click="filters.categoryIndex = idx">
               {{ item }}
             </button>
           </div>
@@ -72,14 +41,8 @@
         <div class="filter-row">
           <span class="filter-label">品种:</span>
           <div class="filter-content tag-list">
-            <button
-              v-for="(item, idx) in varietyOptions"
-              :key="`variety-${idx}`"
-              type="button"
-              class="filter-tag"
-              :class="{ 'is-active': filters.varietyIndex === idx }"
-              @click="filters.varietyIndex = idx"
-            >
+            <button v-for="(item, idx) in varietyOptions" :key="`variety-${idx}`" type="button" class="filter-tag"
+              :class="{ 'is-active': filters.varietyIndex === idx }" @click="filters.varietyIndex = idx">
               {{ item }}
             </button>
           </div>
@@ -88,13 +51,8 @@
 
       <!-- 方案表格 -->
       <div class="table-wrap">
-        <el-table
-          :data="tableData"
-          border
-          class="scheme-table"
-          :header-cell-style="headerCellStyle"
-          :cell-style="{ verticalAlign: 'top' }"
-        >
+        <el-table :data="tableData" border class="scheme-table" :header-cell-style="headerCellStyle"
+          :cell-style="{ verticalAlign: 'top' }">
           <el-table-column prop="name" label="农事名称" min-width="110" fixed>
             <template #default="{ row }">
               <span class="cell-name">{{ row.name }}</span>
@@ -104,12 +62,7 @@
           <el-table-column label="农事类型" min-width="200">
             <template #default="{ row }">
               <div class="link-group">
-                <a
-                  v-for="(item, idx) in row.types"
-                  :key="idx"
-                  class="cell-link"
-                  href="javascript:;"
-                >{{ item }}</a>
+                <a v-for="(item, idx) in row.types" :key="idx" class="cell-link" href="javascript:;">{{ item }}</a>
               </div>
             </template>
           </el-table-column>
@@ -124,11 +77,7 @@
             <template #default="{ row }">
               <div class="prescription">
                 <div class="prescription__title">{{ row.prescription.category }}</div>
-                <div
-                  v-for="(line, idx) in row.prescription.lines"
-                  :key="idx"
-                  class="prescription__line"
-                >
+                <div v-for="(line, idx) in row.prescription.lines" :key="idx" class="prescription__line">
                   {{ line }}
                 </div>
               </div>
@@ -144,12 +93,8 @@
             <el-table-column label="执行设备" min-width="120">
               <template #default="{ row }">
                 <div class="link-group link-group--col">
-                  <a
-                    v-for="(item, idx) in row.execute.devices"
-                    :key="idx"
-                    class="cell-link"
-                    href="javascript:;"
-                  >{{ item }}</a>
+                  <a v-for="(item, idx) in row.execute.devices" :key="idx" class="cell-link" href="javascript:;">{{ item
+                    }}</a>
                 </div>
               </template>
             </el-table-column>
@@ -307,63 +252,63 @@ const onCopyScheme = () => {
 
 <style lang="scss" scoped>
 $primary: $warning-color;
-$primary-light: mix(#fff, $warning-color, 90%);
+$primary-light: color.mix(#fff, $warning-color, 90%);
 $link: #409eff;
 $text: #303133;
-$text-secondary: #606266;
+$text-secondary: rgba(0, 0, 0, 0.6);
 $border: #E7E7E7;
 
 .planting-page {
   box-sizing: border-box;
   min-height: 100%;
   padding: 25px;
+
   .page-card {
     background: #fff;
     padding: 10px;
+
     .page-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid $border;
-    }
-  }
-}
 
-.page-tabs {
-  display: flex;
-  gap: 32px;
-
-  &__item {
-    position: relative;
-    padding: 16px 0 14px;
-    font-size: 15px;
-    color: $text-secondary;
-    cursor: pointer;
-    transition: color 0.2s;
-    user-select: none;
-
-    &:hover {
-      color: $primary;
-    }
-
-    &.is-active {
-      color: $primary;
-      font-weight: 500;
-
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 3px;
-        background: $primary;
-        border-radius: 2px 2px 0 0;
+      .page-tabs {
+        display: flex;
+        gap: 20px;
+
+        &__item {
+          position: relative;
+          padding: 5px 8px;
+          color: $text-secondary;
+          cursor: pointer;
+
+          &:hover {
+            color: $primary;
+          }
+
+          &.is-active {
+            color: $primary;
+
+            &::after {
+              content: "";
+              position: absolute;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              height: 2px;
+              background: $primary;
+              border-radius: 2px 2px 0 0;
+            }
+          }
+        }
       }
     }
   }
 }
 
+
+
 .btn-add {
   height: 32px;
   padding: 0 16px;

vite.config.js

@@ -4,9 +4,12 @@ import { resolve } from "path";
 import envConfig from "./env.config.js";
 import scssVariables from "./src/styles/variables.scss.js";
 
-const scssAdditionalData = Object.keys(scssVariables)
-  .map((k) => `$${k.replace("_", "-")}: ${scssVariables[k]};`)
-  .join("\n");
+const scssAdditionalData = [
+  '@use "sass:color" as color;',
+  ...Object.keys(scssVariables).map(
+    (k) => `$${k.replace("_", "-")}: ${scssVariables[k]};`
+  ),
+].join("\n");
 
 export default defineConfig(({ mode }) => {
   const currentEnv = envConfig[mode] || envConfig.development;
@@ -23,6 +26,7 @@ export default defineConfig(({ mode }) => {
       preprocessorOptions: {
         scss: {
           additionalData: scssAdditionalData,
+          silenceDeprecations: ["legacy-js-api"],
         },
       },
     },