修改代码样式

.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.zip

public/data/points.json

@@ -1,16 +1,16 @@
 {
-  "startPoint": "114.26344,27.800982",
-  "endPoint": "114.284668,27.794961",
+  "startPoint": "114.312888,27.796612",
+  "endPoint": "114.336525,27.767989",
   "viaPoints": [
     {
       "time": "1694352000000",
-      "points": "114.272329,27.797299"
+      "points": "114.334239,27.779261"
     }
   ],
   "avoidPoints": [
     {
       "time": "1694352003000",
-      "points": "114.27882,27.792857"
+      "points": ""
     }
   ],
   "avoidAreas": [

src/assets/scss/index.scss

@@ -80,3 +80,20 @@ html {
 .flex-warp {
   flex-wrap: wrap;
 }
+.el-form-item {
+  display: flex!important;
+  justify-content: space-between;
+  margin-bottom: 12px!important;
+}
+.el-form-item__label {
+  letter-spacing: -1px;
+  min-width: 130px!important;
+  padding: 0!important;
+  white-space: nowrap;      /* 强制不换行 */
+  flex-shrink: 0;
+  font-size: 16px!important;
+}
+.el-input__inner {
+  height: 24px;
+  line-height: 24px;
+}

src/router/index.js

@@ -6,11 +6,11 @@ import residentAnalysis from '@/views/residentAnalysis/index.vue'
 Vue.use(VueRouter)
 
 const routes = [
-  // {
-  //   path: '/',
-  //   name: 'home',
-  //   component: HomeView,
-  // },
+  {
+    path: '/home',
+    name: 'home',
+    component: HomeView,
+  },
   {
     path: '/',
     name: 'residentAnalysis',

src/views/home/home.vue

@@ -2,11 +2,21 @@
   <div>
     <div class="home-header">
       <div class="home-header-left">
-        <img @click="drawStartPoint" src="@/assets/image/start.png" />
-        <img @click="drawEndPoint" src="@/assets/image/end.png" />
-        <img @click="drawViaPoint" src="@/assets/image/add.png" />
-        <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
-        <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
+        <el-tooltip content="起点绘制">
+          <img @click="drawStartPoint" src="@/assets/image/start.png" />
+        </el-tooltip>
+        <el-tooltip content="终点绘制">
+          <img @click="drawEndPoint" src="@/assets/image/end.png" />
+        </el-tooltip>
+        <el-tooltip content="途径点绘制">
+          <img @click="drawViaPoint" src="@/assets/image/add.png" />
+        </el-tooltip>
+        <el-tooltip content="避让点绘制">
+          <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
+        </el-tooltip>
+        <el-tooltip content="避让区域绘制">
+          <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
+        </el-tooltip>
         <div @click="clear" class="sure">清除</div>
         <div @click="calculateShortestPath" class="sure">确定</div>
         <div @click="hadBuffer" class="sure">路线隐蔽规划</div>
@@ -36,14 +46,8 @@
       <div class="main-container">
         <div class="control-panel">
           <div class="title">参数</div>
-          <el-form
-            @submit.native.prevent="calculateShortestPath"
-            label-width="120px"
-            label-position="left"
-            size="mini"
-            :model="form"
-          >
-            <el-form-item label="起点">
+          <el-form @submit.native.prevent="calculateShortestPath" label-position="left" size="mini" :model="form">
+            <el-form-item label="起点：">
               <el-input
                 v-model="form.startPoint"
                 @blur="pointsChange('startPoint')"
@@ -51,7 +55,7 @@
                 clearable
               ></el-input>
             </el-form-item>
-            <el-form-item label="终点">
+            <el-form-item label="终点：">
               <el-input
                 v-model="form.endPoint"
                 @blur="pointsChange('endPoint')"
@@ -59,7 +63,7 @@
                 clearable
               ></el-input>
             </el-form-item>
-            <el-form-item label="途经点">
+            <el-form-item label="途经点：">
               <div v-for="(item, index) in form.viaPoints" :key="index">
                 <el-input
                   v-model="item.points"
@@ -70,7 +74,7 @@
                 ></el-input>
               </div>
             </el-form-item>
-            <el-form-item label="避让点">
+            <el-form-item label="避让点：">
               <div v-for="(item, index) in form.avoidPoints" :key="index">
                 <el-input
                   v-model="item.points"
@@ -81,7 +85,7 @@
                 ></el-input>
               </div>
             </el-form-item>
-            <el-form-item label="避让区域">
+            <el-form-item label="避让区域：">
               <div v-for="(item, index) in form.avoidAreas" :key="index">
                 <el-input
                   v-model="item.points"
@@ -98,11 +102,11 @@
         </div>
         <div class="control-panel">
           <div class="title">隐蔽添加</div>
-          <el-form label-width="120px" label-position="left" size="mini">
-            <el-form-item label="缓冲半径（m）">
+          <el-form label-position="left" size="mini">
+            <el-form-item label="缓冲半径(m)：">
               <el-input v-model="hideform.radius"></el-input>
             </el-form-item>
-            <el-form-item label="面积冗余（%）">
+            <el-form-item label="面积冗余(%)：">
               <el-input v-model="hideform.redundancy" placeholder=""></el-input>
             </el-form-item>
           </el-form>
@@ -115,14 +119,14 @@
               <span>参与路线规划</span>
             </div>
           </div>
-          <el-form @submit.native.prevent="calculateShortestPath" label-width="120px" label-position="left" size="mini">
-            <el-form-item label="宽度">
+          <el-form @submit.native.prevent="calculateShortestPath" label-position="left" size="mini">
+            <el-form-item label="宽度(m)：">
               <el-input v-model="inputform.width"></el-input>
             </el-form-item>
-            <el-form-item label="载重（吨）">
+            <el-form-item label="载重(吨)：">
               <el-input v-model="inputform.load" placeholder=""></el-input>
             </el-form-item>
-            <el-form-item label="最小转弯半径">
+            <el-form-item label="最小转弯半径(m)：">
               <el-input v-model="inputform.minTurnRadius" placeholder=""></el-input>
             </el-form-item>
           </el-form>
@@ -426,6 +430,7 @@ export default {
     }
   },
   async mounted() {
+    ;[...document.querySelectorAll('*')].forEach((n) => console.log(window.getComputedStyle(n).fontFamily))
     this.viewer = null
     await this.getMapOption()
     this.$nextTick(async () => {
@@ -466,6 +471,9 @@ export default {
               pitch: -35,
             },
           },
+          defaultLabelStyle: {
+            font: '16px "DengXian",sans-serif',
+          },
           // basemaps: [
           //   {
           //     id: "image-tdss",
@@ -1264,8 +1272,14 @@ export default {
           graphic?.remove()
           this.viaPoints = this.viaPoints.filter((viaPoint) => viaPoint.style.time !== row.time)
         } else {
-          const graphic = this.viaPoints.find((viaPoint) => viaPoint.style.time === row.time)
-          this.updatePointPosition(graphic, row.points)
+          if (this.viaPoints.length > 0) {
+            const graphic = this.viaPoints.find((viaPoint) => viaPoint.style.time === row.time)
+            this.updatePointPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPointToMap('viaPoints', row, time)
+          }
         }
       } else if (type === 'avoidPoints') {
         if (!row.points) {
@@ -1279,8 +1293,14 @@ export default {
           graphic?.remove()
           this.avoidPoints = this.avoidPoints.filter((avoidPoint) => avoidPoint.style.time !== row.time)
         } else {
-          const graphic = this.avoidPoints.find((avoidPoint) => avoidPoint.style.time === row.time)
-          this.updatePointPosition(graphic, row.points)
+          if (this.avoidPoints.length > 0) {
+            const graphic = this.avoidPoints.find((avoidPoint) => avoidPoint.style.time === row.time)
+            this.updatePointPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPointToMap('avoidPoints', row, time)
+          }
         }
       } else if (type === 'avoidAreas') {
         if (!row.points) {
@@ -1294,8 +1314,14 @@ export default {
           graphic?.remove()
           this.avoidAreas = this.avoidAreas.filter((avoidArea) => avoidArea.style.time !== row.time)
         } else {
-          const graphic = this.avoidAreas.find((avoidArea) => avoidArea.style.time === row.time)
-          this.updatePolygonPosition(graphic, row.points)
+          if (this.avoidAreas.length > 0) {
+            const graphic = this.avoidAreas.find((avoidArea) => avoidArea.style.time === row.time)
+            this.updatePolygonPosition(graphic, row.points)
+          } else {
+            const time = new Date().getTime()
+            row.time = time
+            this.addPolygonToMap('avoidAreas', row, time)
+          }
         }
       }
     },

src/views/residentAnalysis/index.vue

@@ -2,26 +2,30 @@
   <div id="page">
     <div class="header">
       <div class="images flex a-c" v-for="item in imagesList" :key="item.id">
-        <img :src="item.src" @click="drawRectangle" />
-        <el-button class="form-btn" type="primary" size="mini" @click="analyzeAverageSlope">确定</el-button>
-        <el-button class="form-btn right" type="primary" size="mini" :disabled="showExport" @click="clickExport">
-          导出
-        </el-button>
+        <el-tooltip effect="dark" content="绘制矩形区域">
+          <img :src="item.src" @click="drawRectangle" />
+        </el-tooltip>
+        <div class="sure" @click="analyzeAverageSlope">确定</div>
+        <div class="right flex a-c">
+          <div class="sure" :style="!showExport ? {cursor: 'pointer'} : {cursor: 'not-allowed'}" @click="clickExport">
+            导出
+          </div>
+          <div class="sure" @click="handleExportJosn">json编辑</div>
+        </div>
       </div>
     </div>
 
     <div class="content flex j-s a-c">
       <div class="left">
-        <el-form label-width="140px" label-position="left" size="small">
+        <el-form label-position="left" size="mini">
           <!-- 范围 -->
           <div class="control-panel">
             <div class="title">范围</div>
             <el-form-item label="左上角：">
-              <el-input v-model="form.leftTop" @blur="updateArea" placeholder="请输入经纬度，以 ',' 隔开'"></el-input>
+              <el-input v-model="form.leftTop" @blur="updateArea" placeholder="经纬度，以 ',' 隔开'"></el-input>
             </el-form-item>
             <el-form-item label="右下角：">
-              <el-input v-model="form.rightBottom" @blur="updateArea" placeholder="请输入经纬度，以 ',' 隔开'">
-              </el-input>
+              <el-input v-model="form.rightBottom" @blur="updateArea" placeholder="经纬度，以 ',' 隔开'"> </el-input>
             </el-form-item>
             <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none" />
             <div class="importJson flex j-c a-c" @click="triggerFileUpload">导入json文件</div>
@@ -46,17 +50,17 @@
 
           <!-- 条件 -->
           <div class="control-panel">
-            <div class="title">条件</div>
-            <el-form-item label="长：">
+            <div class="title">网格条件</div>
+            <el-form-item label="列(个)：">
               <el-input v-model="form.xLength"></el-input>
             </el-form-item>
-            <el-form-item label="宽：">
+            <el-form-item label="行(个)：">
               <el-input v-model="form.yLength"></el-input>
             </el-form-item>
-            <el-form-item label="最大坡度：">
+            <el-form-item label="最大坡度(°)：">
               <el-input v-model="form.maxSlope"></el-input>
             </el-form-item>
-            <el-form-item label="居民地最小距离：">
+            <el-form-item label="居民地距离(米)：">
               <el-input v-model="form.minPeopleDis"></el-input>
             </el-form-item>
           </div>
@@ -64,7 +68,14 @@
       </div>
 
       <!-- 地图 -->
-      <div class="center" id="cesiumContainer" v-loading="mapLoading" :element-loading-text="mapLoadText"></div>
+      <div
+        class="center"
+        id="cesiumContainer"
+        v-loading="mapLoading"
+        :element-loading-text="mapLoadText"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      ></div>
 
       <div class="right flex column" v-loading="showLoading" element-loading-text="数据加载中">
         <!-- 路点 -->
@@ -145,8 +156,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('roadPointList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -188,8 +199,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('roadLineList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -233,8 +244,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('waterPointList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -276,8 +287,8 @@
                   </vxe-column>
                   <vxe-column title="操作" width="100">
                     <template v-slot="{row}">
-                      <el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
-                      <el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
+                      <el-button type="text" size="mini" v-if="!row.editing" @click="handleEdit(row)">编辑</el-button>
+                      <el-button type="text" size="mini" v-else @click="handleSave(row)">保存</el-button>
                       <el-button type="text" size="mini" @click="handleDelete('waterLineList', row)">删除</el-button>
                     </template>
                   </vxe-column>
@@ -289,7 +300,21 @@
 
         <div slot="footer" class="dialog-footer">
           <el-button size="mini" @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" size="mini" @click="exportJSON">导出</el-button>
+          <el-button type="primary" size="mini" @click="exportJSON">保存</el-button>
+        </div>
+      </el-dialog>
+
+      <!-- 右侧json编辑 -->
+      <el-dialog :visible.sync="dialogJsonVisible" title="json编辑" width="600px">
+        <div v-loading="jsonLoading">
+          <div style="margin-bottom: 10px">
+            <el-button type="primary" size="mini" @click="handleJson">选择</el-button>
+          </div>
+          <el-input type="textarea" resize="none" :rows="18" v-model="jsonInfo.json" size="mini"></el-input>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="closeJson">取消</el-button>
+          <el-button type="primary" size="mini" @click="confirmJson">保存</el-button>
         </div>
       </el-dialog>
     </div>
@@ -300,7 +325,6 @@
 import {getStorage} from '@/utils/localStorage'
 import plantJson from '/public/config/plant.json'
 import soilJson from '/public/config/soil.json'
-import FileSaver from 'file-saver'
 import axios from 'axios'
 import iniParser from 'ini-parser'
 
@@ -361,6 +385,13 @@ export default {
 
       tableHeight: 280,
       showExport: true,
+
+      dialogJsonVisible: false,
+      jsonInfo: {
+        json: '',
+        path: '',
+      },
+      jsonLoading: false,
     }
   },
   created() {
@@ -478,7 +509,7 @@ export default {
       window.viewer.addLayer(window.shortestPathLayer)
       // 添加地图点击事件监听，用于结束绘制
       window.viewer.on(mars3d.EventType.dblClick, (event) => {
-        // 如果正在绘制，点击地图可以结束绘制（除了绘制点）
+        // 如果正在绘制，点击地图可以结束绘制(除了绘制点)
         window.graphicLayer.stopDraw()
         this.form.leftTop = ''
         this.form.rightBottom = ''
@@ -613,7 +644,7 @@ export default {
       })
     },
 
-    // 算矩形到 geoJSONLayer 的最小距离（米），判断是否在其内部
+    // 算矩形到 geoJSONLayer 的最小距离(米)，判断是否在其内部
     calcMinDistance(rectPositions, geoJSONLayer) {
       if (!geoJSONLayer || !rectPositions?.length) return Infinity
 
@@ -652,27 +683,21 @@ export default {
         })
       })
 
-      console.log('矩形 → polygonP 边界最短距离（米）', inside, minDist)
+      console.log('矩形 → polygonP 边界最短距离(米)', inside, minDist)
 
       // 5. 面内直接返回 -1
       return inside ? -1 : minDist
     },
 
-    // 判断矩形与 mars3d GeoJSON 图层是否相交（不转 GeoJSON）
+    // 判断矩形与 mars3d GeoJSON 图层是否相交(不转 GeoJSON)
     getIntersectId(position, layer) {
-      console.log('position===>', position, layer)
       if (!position || !layer || !layer.graphics) return null
 
       const rectCoords = position.concat([position[0]]) // 闭合
 
-      console.log('rectCoords===>', rectCoords)
-
       const rectPoly = turf.polygon([rectCoords])
-      console.log('rectPoly===>', rectPoly)
       const [minX, minY, maxX, maxY] = turf.bbox(rectPoly) // 矩形 bbox
 
-      console.log('minX, minY, maxX, maxY===>', minX, minY, maxX, maxY)
-
       let fc = this._polyCache.get(layer)
 
       if (!fc) {
@@ -788,7 +813,7 @@ export default {
           },
           label: {
             text: '分析区域',
-            font: '16px sans-serif',
+            font: '16px 等线',
             color: '#ffffff',
             outline: true,
             outlineColor: '#000000',
@@ -823,7 +848,7 @@ export default {
       // 更新多边形位置
       this.polygon.positions = cartesianPositions
 
-      // 触发更新（根据mars3d的具体API可能需要调用其他方法）
+      // 触发更新(根据mars3d的具体API可能需要调用其他方法)
       if (this.polygon.update) {
         this.polygon.update()
       }
@@ -965,7 +990,7 @@ export default {
     drawLabelAndRec() {
       this.analyzing = false
 
-      /* 1. 计算总分（保持原逻辑） */
+      /* 1. 计算总分(保持原逻辑) */
       const list = this.calcTotalScore(this.validBlocks)
       const len = list.length
       if (!len) {
@@ -1028,7 +1053,7 @@ export default {
           style: {
             text: String(b.totalScore),
             font_size: 24,
-            font_family: '楷体',
+            font_family: '等线',
             color: '#000000',
             outline: false,
             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
@@ -1231,6 +1256,8 @@ export default {
 
     // 点击导出按钮
     clickExport() {
+      if (this.showExport) return
+
       this.rectangles.forEach((rectGraphic) => {
         this.selectRectangle(rectGraphic)
       })
@@ -1257,7 +1284,6 @@ export default {
                 }
               )
               .then((res) => {
-                this.$message.success(res)
                 this.$message.success('导出成功!')
               })
               .catch((error) => {
@@ -1269,6 +1295,78 @@ export default {
       }
     },
 
+    // json编辑
+    handleExportJosn() {
+      this.dialogJsonVisible = true
+    },
+
+    decodeEscapedJson(str) {
+      // 去掉字符串首尾的空白字符
+      str = str.trim()
+      // 直接解析 JSON 字符串
+      try {
+        return JSON.parse(str)
+      } catch (e) {
+        console.error('Error parsing JSON:', e)
+        return null
+      }
+    },
+
+    handleJson() {
+      this.jsonLoading = true
+      fetch('./config.ini')
+        .then((response) => response.text())
+        .then((text) => {
+          const parsedData = iniParser.parse(text)
+          axios
+            .post(`http://${parsedData.http.address}:${parsedData.http.port}/api/json/select`, {
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              timeout: 10 * 60 * 1000,
+            })
+            .then((response) => {
+              this.jsonInfo = {
+                path: response.data.path,
+                json: JSON.stringify(this.decodeEscapedJson(response.data.json), null, 2),
+              }
+              this.jsonLoading = false
+            })
+            .catch((error) => {
+              this.jsonLoading = false
+            })
+        })
+    },
+
+    confirmJson() {
+      fetch('./config.ini')
+        .then((response) => response.text())
+        .then((text) => {
+          const parsedData = iniParser.parse(text)
+          axios
+            .post(
+              `http://${parsedData.http.address}:${parsedData.http.port}/api/json/save?path=${this.jsonInfo.path}`,
+              JSON.stringify(JSON.parse(this.jsonInfo.json)),
+              {
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+              }
+            )
+            .then((response) => {
+              this.$message.success('保存成功')
+              this.closeJson()
+            })
+            .catch((error) => {})
+        })
+    },
+
+    closeJson() {
+      this.jsonInfo.path = ''
+      this.jsonInfo.json = ''
+      this.dialogJsonVisible = false
+    },
+
     // 新增
     handleAdd(type) {
       let tabIndex = this.tabList.findIndex((item) => item.id === this.activeName)
@@ -1334,31 +1432,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .el-button--primary {
-  background-color: #176363;
+.sure {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  background: #176363;
   border-radius: 4px;
-  &:hover {
-    background-color: #176363;
-  }
-  &:active {
-    background-color: #176363;
-  }
-}
-
-::v-deep .el-form-item--mini.el-form-item,
-.el-form-item--small.el-form-item {
-  margin-bottom: 8px;
-}
-
-::v-deep .el-button--primary.is-disabled,
-.el-button--primary.is-disabled:active,
-.el-button--primary.is-disabled:focus,
-.el-button--primary.is-disabled:hover {
-  background-color: #176363;
+  min-width: 14px;
+  padding: 0 10px;
+  height: 24px;
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  margin-right: 10px;
+  cursor: pointer;
 }
 
 #page {
-  width: 100%;
+  width: 340px;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
@@ -1373,11 +1466,11 @@ export default {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
-    cursor: pointer;
     margin-left: 32px;
-  }
-  .form-btn {
-    margin-left: 30px;
+    img {
+      margin-right: 30px;
+      cursor: pointer;
+    }
   }
   .btn {
     position: absolute;
@@ -1401,14 +1494,14 @@ export default {
     background-color: #d4e5db;
     .control-panel {
       width: 340px;
-      padding: 5px 20px;
+      padding: 20px 26px;
       box-sizing: border-box;
       background-size: cover;
       background: #d4e5db;
       .title {
-        font-size: 16px;
-        margin-bottom: 5px;
         color: #1c1c1c;
+        font-size: 16px;
+        margin-bottom: 10px;
       }
     }
 
@@ -1420,7 +1513,8 @@ export default {
       height: 24px;
       font-size: 14px;
       text-align: center;
-      padding: 3px 0;
+      margin-left: 20px;
+      cursor: pointer;
     }
   }
 
@@ -1445,10 +1539,9 @@ export default {
 }
 .table-title {
   font-size: 16px;
-  font-family: 'Pingfang';
-  font-weight: bold;
+  color: #1c1c1c;
   letter-spacing: 0.1em;
-  margin-bottom: 10px;
+  margin: 20px 0 10px 0;
   span {
     margin-right: 10px;
   }

vue.config.js

@@ -21,25 +21,25 @@ module.exports = defineConfig({
     })
 
     /* 2. 追加 ES5 规则（只转 src，不转 node_modules） */
-    config.module.rules.push({
-      test: /\.js$/,
-      include: path.resolve(__dirname, 'src'),
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            [
-              '@babel/preset-env',
-              {
-                targets: {ie: '11'}, // 强制 ES5
-                corejs: 3,
-                useBuiltIns: 'entry',
-              },
-            ],
-          ],
-        },
-      },
-    })
+    //   config.module.rules.push({
+    //     test: /\.js$/,
+    //     include: path.resolve(__dirname, 'src'),
+    //     use: {
+    //       loader: 'babel-loader',
+    //       options: {
+    //         presets: [
+    //           [
+    //             '@babel/preset-env',
+    //             {
+    //               targets: {ie: '11'}, // 强制 ES5
+    //               corejs: 3,
+    //               useBuiltIns: 'entry',
+    //             },
+    //           ],
+    //         ],
+    //       },
+    //     },
+    //   })
   },
 
   css: {