配置外部化到 .env

  代码：
  - 高德 Key/SecurityCode 收敛到 TongzhouTrafficMap、EvaluationTrafficMap 的
    props default，从 VUE_APP_AMAP_KEY / VUE_APP_AMAP_SECURITY_CODE 读取，
    env 缺失时回退到内置开发用 Key
  - 5 个 view（Home/StatusMonitoring/SpecialSituationMonitoring/
    DataAnalysis/TrunkCoordination）移除散落的 amapKey/securityJsCode
  - main.js Mock 引入改为条件 import，由 VUE_APP_USE_MOCK 控制
  - request.js timeout 改为读 VUE_APP_REQUEST_TIMEOUT，默认 15000

  新增 env 模板：
  - .env.development（USE_MOCK=true）
  - .env.production（USE_MOCK=false）

.env.development

@@ -0,0 +1,14 @@
+# ─────────────────────────────────────────────────
+# 开发环境配置（npm run serve 时自动加载）
+# 本地覆盖请用 .env.development.local（已在 .gitignore）
+# ─────────────────────────────────────────────────
+
+# 后端 API 基础地址（开发期用 mock 时可留空）
+VUE_APP_API_BASE=
+
+# 高德地图 Key（与 .env.production 共用即可）
+VUE_APP_AMAP_KEY=db2da7e3e248c3b2077d53fc809be63f
+VUE_APP_AMAP_SECURITY_CODE=a7413c674852c5eaf01d90813c5b7ef6
+
+# Mock 开关：开发期默认开启
+VUE_APP_USE_MOCK=true

.env.production

@@ -0,0 +1,19 @@
+# ─────────────────────────────────────────────────
+# 生产环境配置（npm run build 时自动加载）
+# ─────────────────────────────────────────────────
+
+# 后端 API 基础地址（必填）
+VUE_APP_API_BASE=http://your-backend-host/api
+
+# 高德地图 Web 端 Key 与安全密钥（必填，部署前去高德控制台申请并加白名单）
+VUE_APP_AMAP_KEY=db2da7e3e248c3b2077d53fc809be63f
+VUE_APP_AMAP_SECURITY_CODE=a7413c674852c5eaf01d90813c5b7ef6
+
+# Mock 开关：生产环境必须为 false，走真实后端
+VUE_APP_USE_MOCK=false
+
+# 可选调优：HTTP 请求超时（毫秒），不设默认 15000
+# VUE_APP_REQUEST_TIMEOUT=15000
+
+# WebSocket 推送地址（预留，未启用前可留空）
+# VUE_APP_WS_URL=wss://dtscreen.your-domain.com

src/components/TongzhouTrafficMap.vue

@@ -48,8 +48,8 @@ import { getIntersectionCategory } from '@/mock/api';
 export default {
   name: "TrafficMap",
   props: {
-    amapKey: { type: String, default: '您的Key' },
-    securityJsCode: { type: String, default: '您的安全密钥' },
+    amapKey: { type: String, default: () => process.env.VUE_APP_AMAP_KEY || 'db2da7e3e248c3b2077d53fc809be63f' },
+    securityJsCode: { type: String, default: () => process.env.VUE_APP_AMAP_SECURITY_CODE || 'a7413c674852c5eaf01d90813c5b7ef6' },
     mode: { type: String, default: '', validator: (value) => ['', '路口', '干线', '特勤'].includes(value) }
   },
   data() {

src/components/ui/EvaluationTrafficMap.vue

@@ -10,8 +10,8 @@ import AMapLoader from '@amap/amap-jsapi-loader';
 export default {
   name: "EvaluationTrafficMap",
   props: {
-    amapKey: { type: String, required: true },
-    securityJsCode: { type: String, required: true },
+    amapKey: { type: String, default: () => process.env.VUE_APP_AMAP_KEY || 'db2da7e3e248c3b2077d53fc809be63f' },
+    securityJsCode: { type: String, default: () => process.env.VUE_APP_AMAP_SECURITY_CODE || 'a7413c674852c5eaf01d90813c5b7ef6' },
     mode: { 
       type: String, 
       default: 'overview',

src/main.js

@@ -13,8 +13,10 @@ Vue.use(TimePicker);
 Vue.use(Select);
 Vue.use(Option);
 
-// Mock 拦截器（切真实后端时删除下面这行）
-import '@/mock/mockAdapter';
+// Mock 拦截器：由 VUE_APP_USE_MOCK 控制（默认开启；切真实后端时设为 false）
+if (process.env.VUE_APP_USE_MOCK !== 'false') {
+  require('@/mock/mockAdapter');
+}
 import MessageDialog from "./components/ui/MessageDialog/index.js";
 
 // 挂载为全局方法

src/utils/request.js

@@ -129,6 +129,6 @@ class RequestHttp {
 
 export const http = new RequestHttp({
   baseURL: process.env.VUE_APP_API_BASE || '',
-  timeout: 15000,
+  timeout: Number(process.env.VUE_APP_REQUEST_TIMEOUT) || 15000,
   cancelDuplicate: true,
 });

src/views/DataAnalysis.vue

@@ -11,10 +11,8 @@
 
         <!-- 地图 -->
         <template #map>
-            <EvaluationTrafficMap 
-                amapKey="db2da7e3e248c3b2077d53fc809be63f"
-                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
-                :mode="currentMapMode" 
+            <EvaluationTrafficMap
+                :mode="currentMapMode"
             />
         </template>
 

src/views/Home.vue

@@ -13,8 +13,6 @@
     <template #map>
       <TongzhouTrafficMap
         ref="trafficMapRef"
-        amapKey="db2da7e3e248c3b2077d53fc809be63f"
-        securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
       />
     </template>
 

src/views/SpecialSituationMonitoring.vue

@@ -15,8 +15,6 @@
             </div>
             <!-- 地图 -->
             <TongzhouTrafficMap v-else ref="trafficMapRef"
-                amapKey="db2da7e3e248c3b2077d53fc809be63f"
-                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
                 @map-crossing-click="handleMapCrossingClick"
                 @map-crossing-mouseover="handleMapCrossingMouseover"

src/views/StatusMonitoring.vue

@@ -15,8 +15,6 @@
             </div>
             <!-- 地图 -->
             <TongzhouTrafficMap v-else ref="trafficMapRef"
-                amapKey="db2da7e3e248c3b2077d53fc809be63f"
-                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
                 @map-crossing-click="handleMapCrossingClick"
                 @map-crossing-mouseover="handleMapCrossingMouseover"

src/views/TrunkCoordination.vue

@@ -15,8 +15,6 @@
             </div>
             <!-- 地图 -->
             <TongzhouTrafficMap v-else ref="trafficMapRef"
-                amapKey="db2da7e3e248c3b2077d53fc809be63f"
-                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
                 @map-crossing-click="handleMapCrossingClick"
                 @map-crossing-mouseover="handleMapCrossingMouseover"