。

.cursor/rules/init.mdc

@@ -0,0 +1,6 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+请使用中文回答我的问题

.env.development

@@ -1 +1 @@
-VITE_BASE_URL = "192.168.100.1"
+VITE_BASE_URL = "https://169.254.92.7:5173"

package.json

@@ -11,14 +11,17 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
     "await-to-js": "^3.0.0",
     "axios": "^1.8.1",
     "cesium": "^1.127.0",
+    "crypto-js": "^4.2.0",
     "element-plus": "^2.9.5",
     "js-cookie": "^3.0.5",
     "less": "^4.2.2",
     "pinia": "^3.0.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
@@ -28,6 +31,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/tsconfig": "^0.7.0",
+    "esbuild": "^0.25.1",
     "npm-run-all2": "^7.0.2",
     "typescript": "~5.7.3",
     "vite": "^6.1.0",

src/api/task.ts

@@ -0,0 +1,14 @@
+import http from "@/http"
+import { to } from "await-to-js"
+/**航点数据 */
+export const queryPointRoutePreviewParam = (taskId: number) => to<any>(
+    http.get("/pro_api/foreign/task/queryPointRoutePreviewParam", {
+    params: { taskId }
+}))
+
+
+/**航面数据 */
+export const queryRegionalPlanningPreviewParam = (taskId: number) => to<any>(
+    http.get('/pro_api/foreign/task/queryRegionalPlanningPreviewParam', {
+    params: { taskId }
+}))

src/api/user.ts

@@ -1,10 +1,10 @@
-import request from "@/http";
+import http from "@/http";
 import to from "await-to-js"
 
 /**登录 */
-export const login = (data: any) => to(
+export const login = (data: any) => to<any>(
-    request.post("/login", {
+    http.post("/api/login", {
-        
+        username: data.username,
-    }
+        password: data.password
-    ))
+    }))
 

src/components/main/headerBar.vue

@@ -8,7 +8,7 @@
         <div class="header_main">
             <div class="tabs">
                 <div v-for="tab in props.tabs" @click="changeType(tab)" class="tab"
-                    :class="{ checked: tab.id == props.id }">
+                    :class="{ checked: tab.id == id }">
                     <span>{{ tab.label }}</span>
                 </div>
             </div>
@@ -18,13 +18,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+// import { ref } from "vue"
 
-const props = defineProps(['tabs', 'id'])
+const props = defineProps(['tabs'])
-const emit = defineEmits(["update:id"])
+const id = defineModel<number>('id')
-function changeType({ id, disabled }: { id: number, disabled: boolean }) {
+function changeType({ id:id_, disabled }: { id: number, disabled: boolean }) {
     if (disabled) return;
-    emit("update:id", id)
+    console.log("id_", id_)
+    id.value = id_
 }
 </script>
 
@@ -40,7 +41,6 @@ function changeType({ id, disabled }: { id: number, disabled: boolean }) {
         z-index: -1;
         display: flex;
         height: 57px;
-        background-color: antiquewhite;
         width: 100%;
 
         img {

src/components/zfControlPlatform/eventList/eventItem.vue

@@ -37,7 +37,6 @@
         width: 249px;
         object-fit: cover;
         display: block;
-        background-color: antiquewhite;
     }
 
     .content {

src/components/zfControlPlatform/eventList/index.vue

@@ -51,6 +51,7 @@ const options = ref([
         value: 4
     },
 ])
+
 </script>
 
 <style lang="less" scoped>

src/components/zfControlPlatform/index.vue

@@ -10,9 +10,7 @@
         </div>
         <div class="container_center">
             <div class="map_wrap">
-                <!-- 悬浮窗 -->
+                <mainMap></mainMap>
-                <img src="@/assets/img/image@1x.png" alt="">
-                <!-- <mainMap></mainMap> -->
             </div>
             <div class="event_list_wrap">
                 <eventList></eventList>
@@ -25,11 +23,30 @@
 </template>
 
 <script setup lang="ts">
+import { ref, provide, onMounted } from "vue"
 import taskList from "@/components/zfControlPlatform/taskList/index.vue"
 import positionView from "@/components/zfControlPlatform/positionView/index.vue"
 import eventList from "@/components/zfControlPlatform/eventList/index.vue"
 import taskController from "@/components/zfControlPlatform/taskController/index.vue"
 import mainMap from "@/components/zfControlPlatform/mainMap/index.vue"
+import { queryPointRoutePreviewParam, queryRegionalPlanningPreviewParam } from "@/api/task"
+
+
+//航点数据
+const pointRoutePreviewParam = ref<any[]>([])
+provide("pointRoutePreviewParam", pointRoutePreviewParam)
+
+//获取航点数据
+async function getPointRoutePreviewParam() {
+    const [error, res] = await queryPointRoutePreviewParam(1)
+    if (error) return console.log("获取航点数据失败==>>", error);
+    pointRoutePreviewParam.value = res.data.waypointList
+}
+onMounted(() => {
+    getPointRoutePreviewParam()
+})
+
+
 </script>
 
 <style lang="less" scoped>

src/components/zfControlPlatform/mainMap/index.vue

@@ -38,30 +38,46 @@
                 </div>
             </div>
         </div>
-        <div width="600px" height="500px" class="cesiumContainer" id="cesiumContainer"></div>
+        <div class="cesiumContainer" id="cesiumContainer" ref="cesiumContainerRef"></div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { inject, watch, ref as vueRef, nextTick } from "vue"
 import * as Cesium from "cesium"
-import { onMounted, ref } from "vue"
+import type { Viewer, Property } from "cesium"
+import { onMounted, onUnmounted, ref } from "vue"
+import type { Ref } from "vue"
 import "cesium/Build/Cesium/Widgets/widgets.css";
+import type { PointRoute } from "@/types/map"
 
-let viewer;
+let viewer: Viewer | null = null;
-let handler;
+const afterRender = new Set<() => void>()
-let polyline;
+const cesiumContainerRef = vueRef<HTMLElement | null>(null);
-let positions = [];
+const pointRoutePreviewParam = inject<Ref<PointRoute[]>>("pointRoutePreviewParam", ref([]))
-let isDrawing = ref(false);
 
 async function init() {
+    // 确保Cesium的基础URL和访问令牌设置正确
     (window as any).CESIUM_BASE_URL = "/assets/Cesium/"
     const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNWM3YTc2OS1iMjQwLTRiYTUtOGFhNC1lNmFhNDRlN2QyODIiLCJpZCI6MjgxNzc2LCJpYXQiOjE3NDEyNTI2Mjh9.6H_pbpxLPYMBGveKGq9pek2rYlrFvQeWcnHGzVkmb00'
     Cesium.Ion.defaultAccessToken = token
     
-    viewer = new Cesium.Viewer('cesiumContainer',
+    await nextTick();
-        {
+    
-            // terrain: Terrain.fromWorldTerrain(),
+    // 再次检查元素是否存在
-            // terrainProvider: undefined,
+    if (!cesiumContainerRef.value) {
+        console.error('cesiumContainer元素不存在');
+        return;
+    }
+
+    try {
+        // 检查是否已经有Cesium实例
+        if (viewer) {
+            return;
+        }
+        
+        // 使用ref直接引用DOM元素
+        viewer = new Cesium.Viewer(cesiumContainerRef.value, {
             selectionIndicator: false,    // 禁用选择指示器
             infoBox: false,              // 禁用信息框
             navigationHelpButton: false,  // 禁用帮助按钮
@@ -72,46 +88,120 @@ async function init() {
             animation: false,            // 禁用动画控件
             geocoder: false,             // 禁用地理编码器
             fullscreenButton: false      // 禁用全屏按钮
-        }
+        });
-    );
 
-    // 初始化事件处理器
+        // 设置相机视图
-    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+        viewer.camera.setView({
-    viewer.camera.setView({
+            destination: Cesium.Cartesian3.fromDegrees(106.64219088, 38.75395285, 2000),
-        destination: Cesium.Cartesian3.fromDegrees(113.35, 23.11, 10000),
+            orientation: {
-        orientation: {
+                heading: Cesium.Math.toRadians(0.0),
-            heading: Cesium.Math.toRadians(0.0),
+                pitch: Cesium.Math.toRadians(-15.0),
-            pitch: Cesium.Math.toRadians(-15.0),
+                roll: Cesium.Math.toRadians(0.0)
-            roll: Cesium.Math.toRadians(0.0)
+            }
+        });
+
+        viewer.scene.mode = Cesium.SceneMode.SCENE2D;  // 切换到2D
+        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000;
+        
+        console.log('Cesium初始化成功');
+    } catch (error) {
+        console.error('初始化Cesium Viewer时出错:', error);
+    }
+}
+
+/**画出预览航线 */
+function drawPointRoutePreview(pointRoute: PointRoute[]) {
+    if (!viewer) return
+    // 清除之前的实体
+    viewer.entities.removeAll();
+
+    // 创建新的折线
+    const polyline = viewer.entities.add({
+        polyline: {
+            positions: pointRoute.map(item => {
+                return Cesium.Cartesian3.fromDegrees(item.wayPointLongitude, item.wayPointLatitude, item.wayPointAltitude)
+            }),
+            width: 4,
+            material: new Cesium.PolylineDashMaterialProperty({
+                color: Cesium.Color.fromCssColorString("#3a76ff"),
+                dashLength: 20
+            }),
+            clampToGround: true
         }
     });
 
-    // viewer.fullscreenButton()
+    flyToPointRoute(viewer, pointRoute)
-    // setTimeout(() => {
-    //   viewer.camera.flyTo({
-    //     destination: Cartesian3.fromDegrees(113.35, 23.11, 10000),
-    //     orientation: {
-    //       heading: CesiumMath.toRadians(0.0),
-    //       pitch: CesiumMath.toRadians(-15.0),
-    //       roll: CesiumMath.toRadians(0.0)
-    //     }
-    //   });
-    // }, 5000)
-
-    //3d建筑
-    // const buildingTileset = await createOsmBuildingsAsync();
-    // viewer.scene.primitives.add(buildingTileset);
-
-    viewer.scene.mode = Cesium.SceneMode.SCENE2D;  // 切换到2D
-    // viewer.scene.mode = SceneMode.SCENE3D;  // 切换到3D
-    // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
-    // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000;
-    // viewer.zoomTo(300)
 }
 
-onMounted(() => {
+/**
-    init()
+ * 将地图视角飞行到航线点的范围内
+ * @param viewer Cesium Viewer实例
+ * @param pointRoute 航线点数组
+ */
+function flyToPointRoute(viewer: Viewer, pointRoute: PointRoute[]) {
+    // 将航线点转换为经纬度坐标数组
+    const positions = pointRoute.map(item => ({
+        longitude: item.wayPointLongitude,
+        latitude: item.wayPointLatitude
+    }));
+
+    // 根据经纬度坐标数组计算包含所有点的最小矩形范围
+    const rectangle = Cesium.Rectangle.fromCartographicArray(
+        positions.map(pos => Cesium.Cartographic.fromDegrees(pos.longitude, pos.latitude))
+    );
+
+    // 计算矩形的宽度和高度,并扩展矩形边界20%以留出视觉空间
+    const width = rectangle.east - rectangle.west;
+    const height = rectangle.north - rectangle.south;
+    const padding = {
+        x: width * 0.2,  // 水平方向扩展20%
+        y: height * 0.2  // 垂直方向扩展20%
+    };
+
+    // 创建扩展后的新矩形
+    const paddedRectangle = new Cesium.Rectangle(
+        rectangle.west - padding.x,   // 向西扩展
+        rectangle.south - padding.y,  // 向南扩展
+        rectangle.east + padding.x,   // 向东扩展
+        rectangle.north + padding.y   // 向北扩展
+    );
+
+    // 使用动画效果将相机飞行到能够完整显示扩展矩形的位置
+    viewer.camera.flyTo({
+        destination: paddedRectangle,  // 目标位置为扩展后的矩形
+        duration: 2                    // 飞行动画持续2秒
+    });
+}
+
+watch(() => pointRoutePreviewParam.value, () => {
+    if (pointRoutePreviewParam.value.length > 0) {
+        if (viewer) {
+            drawPointRoutePreview(pointRoutePreviewParam.value as PointRoute[])
+        } else {
+            afterRender.add(() => {
+                drawPointRoutePreview(pointRoutePreviewParam.value as PointRoute[])
+            })
+        }
+    }
 })
+onMounted(async () => {
+    // 使用nextTick确保DOM已经渲染
+    await nextTick();
+    
+    // 初始化Cesium
+    await init();
+    
+    // 执行渲染后的回调函数
+    afterRender.forEach(fn => fn());
+});
+
+// 组件卸载时清理Cesium
+onUnmounted(() => {
+    if (viewer) {
+        viewer.destroy();
+        viewer = null;
+    }
+});
 
 </script>
 

src/components/zfControlPlatform/positionView/index.vue

@@ -30,7 +30,6 @@ import titleView from "@/components/zfControlPlatform/titleView/index.vue"
     .content {
         flex: 1;
         height: 0;
-        background-color: antiquewhite;
         img{
             width: 100%;
             height: 100%;

src/components/zfControlPlatform/stepView/index.vue

@@ -1,49 +1,52 @@
 <template>
     <div class="step_view">
-        <div class="step">
+        <div class="step" v-for="item in props.taskProgress">
             <div class="content">
                 <div class="left">
-                    <div class="time">11:49</div>
+                    <div class="time">{{ item.time }}</div>
                     <div class="circle"></div>
-                    <div class="label">任务前检测</div>
+                    <div class="label">{{ item.label }}</div>
                 </div>
-                <div class="status_icon">
+                <div :class="['status_icon', { loading: item.status === 'loading' }]">
-                    <img src="@/assets/img/circle_check.svg" alt="">
+                    <img v-if="item.status === 'success'" src="@/assets/img/circle_check.svg" alt="">
-                </div>
+                    <img v-else src="@/assets/img/zf_task_loading_icon.svg" alt="">
-            </div>
-        </div>
-        <div class="step">
-            <div class="content">
-                <div class="left">
-                    <div class="time">11:49</div>
-                    <div class="circle"></div>
-                    <div class="label">任务前检测</div>
-                </div>
-                <div class="status_icon">
-                    <img src="@/assets/img/circle_check.svg" alt="">
-                </div>
-            </div>
-        </div>
-        <div class="step">
-            <div class="content">
-                <div class="left">
-                    <div class="time">11:49</div>
-                    <div class="circle"></div>
-                    <div class="label">任务前检测</div>
-                </div>
-                <div class="status_icon">
-                    <img src="@/assets/img/zf_task_loading_icon.svg" alt="">
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+
+type TaskProgress = {
+    time: string,
+    label: string,
+    status: string
+}
+type Props = {
+    taskProgress: TaskProgress[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    taskProgress: () => []
+})
+
+
 
 </script>
 
+
 <style lang="less" scoped>
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .step_view {
     // background-color: antiquewhite;
     width: 100%;
@@ -100,6 +103,25 @@
                     }
                 }
             }
+
+            .status_icon {
+                width: 20px;
+                height: 20px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &.loading {
+                    img {
+                        animation: loading 1s linear infinite;
+                    }
+                }
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
         }
     }
 }

src/components/zfControlPlatform/taskList/index.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-// import taskItem from './taskItem.vue';
+import taskItem from './taskItem.vue';
 import ongoingTask from './ongoingTask.vue';
 import titleView from "@/components/zfControlPlatform/titleView/index.vue"
 </script>

src/components/zfControlPlatform/taskList/ongoingTask.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="task_main">
-
         <div class="base_info">
             <div class="info_item">
                 <span class="label">任务名称：</span>
@@ -21,9 +20,8 @@
             </div>
         </div>
         <div class="step">
-            <stepView></stepView>
+            <stepView :taskProgress="taskProgress"></stepView>
         </div>
-
     </div>
 </template>
 
@@ -31,6 +29,29 @@
 import { ref } from "vue"
 import stepView from "@/components/zfControlPlatform/stepView/index.vue"
 const progress = ref(50)
+type TaskProgress = {
+    time: string
+    label: string
+    status: "success" | "loading"
+}
+const taskProgress = ref<TaskProgress[]>([
+    {
+        time: "11:49",
+        label: "任务前检测",
+        status: "success"
+    },
+    {
+        time: "11:49",
+        label: "任务前检测",
+        status: "success"
+    },
+    {
+        time: "11:49",
+        label: "任务前检测",
+        status: "loading"
+    }
+])
+
 </script>
 
 <style lang="less" scoped>

src/components/zfControlPlatform/titleView/index.vue

@@ -22,7 +22,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: antiquewhite;
     border-bottom: 1px #3c7bff solid;
     padding: 0 20px;
     background: linear-gradient(90deg, #0A5CC8 3%, #053B7B 95%);

src/http/index.ts

@@ -1,17 +1,37 @@
 import axios from "axios";
+import type { AxiosResponse, AxiosError } from "axios";
+import useUserInfoStore from "@/stores/user"
+import { ElMessage } from "element-plus"
+const userInfoStore = useUserInfoStore()
 
 const request = axios.create({
     baseURL: import.meta.env.VITE_BASE_URL
 })
 
 request.interceptors.request.use((config) => {
-    
+    config.headers.Authorization = userInfoStore.token
     return config
 })
 
-request.interceptors.response.use((res) => {
+request.interceptors.response.use(
-
+    (res: AxiosResponse) => {
-    return res
+        if (res.data.code === 200) {
-})
+            return res.data
+        } else {
+            ElMessage({
+                type: "error",
+                message: res.data.msg || "请求失败"
+            })
+            return Promise.reject(res?.data?.msg || "请求失败")
+        }
+    },
+    (err: AxiosError) => {
+        ElMessage({
+            type: "error",
+            message: (err.response?.data as any)?.msg || "请求失败"
+        })
+        return Promise.reject((err.response?.data as any)?.msg || "请求失败")
+    }
+)
 
 export default request

src/main.ts

@@ -2,6 +2,7 @@ import './assets/style/base.less'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import App from './App.vue'
 import router from './router'
@@ -10,7 +11,10 @@ import 'element-plus/dist/index.css'
 
 const app = createApp(App)
 
-app.use(createPinia())
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+app.use(pinia)
 app.use(router)
 app.use(ElementPlus)
 app.mount('#app')

src/router/index.ts

@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/index/index.vue'
+import useUserInfoStore from "@/stores/user"
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -22,5 +24,19 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach((to, from, next) => {
+  const userInfoStore = useUserInfoStore()
+  console.log("token==>>", userInfoStore.token)
+  if (to.path === "/login") {
+    if (userInfoStore.token) {
+      next({ path: "/" })
+    } else {
+      next()
+    }
+  }
+  if (!userInfoStore.token) return next({ path: "/login" })
+  next()
+})
+
 export default router
 

src/stores/user.ts

@@ -2,14 +2,22 @@ import { defineStore } from 'pinia'
 
 const useUserInfoStore = defineStore('userInfo', {
     state: () => ({
-        token: ""
+        token: "",
+        user_info: {
+            last_login_at: "",
+            last_login_ip: "",
+            login_count: 0,
+            username: ""
+        }
+
     }),
     getters: {
 
     },
     actions: {
 
-    }
+    },
+    persist: true
 })
 
 export default useUserInfoStore

src/types/map.ts

@@ -0,0 +1,5 @@
+export type PointRoute = {
+    wayPointLatitude: number,
+    wayPointLongitude: number,
+    wayPointAltitude: number
+}

src/utils/crypto.ts

@@ -0,0 +1,12 @@
+import CryptoJS from 'crypto-js'
+
+const SECRET_KEY = 'zx_web_secret_key_2024'
+
+export const encrypt = (text: string): string => {
+    return CryptoJS.AES.encrypt(text, SECRET_KEY).toString()
+}
+
+export const decrypt = (ciphertext: string): string => {
+    const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY)
+    return bytes.toString(CryptoJS.enc.Utf8)
+} 

src/views/index/tabs.ts

@@ -42,11 +42,11 @@ export default [
         label: "智能助手",
         disabled: true,
     },
-    {
+    // {
-        id: 7,
+    //     id: 7,
-        type: "IFRAME",
+    //     type: "IFRAME",
-        label: "测试",
+    //     label: "测试",
-        // disabled: true,
+    //     disabled: true,
-        src:"http://127.0.0.1:5500/iframe%E9%80%9A%E8%AE%AF.html"
+    //     src:"http://127.0.0.1:5500/iframe%E9%80%9A%E8%AE%AF.html"
-    },
+    // },
 ]

src/views/login/index.vue

@@ -7,17 +7,19 @@
             </div>
             <h2 class="title">交通运输综合执法检查系统</h2>
             <form class="form_wrap" @submit="submit">
-                <div class="form_item" :class="{ error: errors.userName }">
+                <div class="form_item" :class="{ error: errors.username }">
                     <div class="icon">
                         <img src="@/assets/img/login_user_icon.png" alt="">
                     </div>
-                    <input class="input" v-model="loginFormData.userName" type="text" placeholder="请输入账号" @input="clearError('userName')">
+                    <input class="input" v-model="loginFormData.username" type="text" placeholder="请输入账号"
+                        @input="clearError('username')">
                 </div>
                 <div class="form_item" :class="{ error: errors.password }">
                     <div class="icon">
                         <img src="@/assets/img/login_password_icon.png" alt="">
                     </div>
-                    <input class="input" v-model="loginFormData.password" type="password" placeholder="请输入密码" @input="clearError('password')">
+                    <input class="input" v-model="loginFormData.password" type="password" placeholder="请输入密码"
+                        @input="clearError('password')">
                 </div>
                 <div class="options">
                     <label class="save_password">
@@ -38,44 +40,53 @@
 
 <script setup lang="ts">
 import { ref } from "vue"
-import { login } from "@/api/user.ts"
+import { login } from "@/api/user"
 import { ElMessage } from "element-plus"
-import {useRouter} from "vue-router"
+import { useRouter } from "vue-router"
+import useUserInfoStore from "@/stores/user"
+import { encrypt, decrypt } from "@/utils/crypto"
+
 const router = useRouter()
-const savePasswordFlag = ref(!!(localStorage.getItem('user')))
+const savePasswordFlag = ref(!!(localStorage.getItem('username') && localStorage.getItem('_k')))
-const loginFormData = ref(JSON.parse(localStorage.getItem('user') || '{"userName":"","password":""}'))
+const loginFormData = ref({
+    username: localStorage.getItem('username') || '',
+    password: localStorage.getItem('_k') ? decrypt(localStorage.getItem('_k')!) : ''
+})
 // 添加错误状态
 const errors = ref({
-    userName: false,
+    username: false,
     password: false
 })
 
+const userInfoStore = useUserInfoStore()
 // 添加监听函数来清除错误
-function clearError(field: 'userName' | 'password') {
+function clearError(field: 'username' | 'password') {
     errors.value[field] = false
 }
 
 function changSavePassword() {
     if (savePasswordFlag.value) {
-        localStorage.setItem("user", JSON.stringify(loginFormData.value))
+        localStorage.setItem("username", loginFormData.value.username)
+        localStorage.setItem("_k", encrypt(loginFormData.value.password))
     } else {
-        localStorage.removeItem("user")
+        localStorage.removeItem("username")
+        localStorage.removeItem("_k")
     }
 }
 // 提交表单
 function submit(event: Event) {
     event.preventDefault()
+    console.log(loginFormData.value)
     changSavePassword()
     if (!validate()) return;
-    router.push("/")
+    toLogin()
 }
 
 /**表单校验 */
 function validate() {
-    errors.value.userName = !loginFormData.value.userName
+    errors.value.username = !loginFormData.value.username
     errors.value.password = !loginFormData.value.password
-
+    if (errors.value.username) {
-    if (errors.value.userName) {
         ElMessage({
             type: "error",
             message: "请输入用户名"
@@ -95,7 +106,16 @@ function validate() {
 
 
 async function toLogin() {
-    const [err, res] = await login({})
+    const [err, res] = await login({
+        username: loginFormData.value.username,
+        password: loginFormData.value.password
+    })
+    if (err) {
+        return
+    }
+    userInfoStore.token = res.data.access_token
+    userInfoStore.user_info = res.data.user_info
+    router.push("/")
 }
 
 </script>

vite.config.ts

@@ -25,5 +25,12 @@ export default defineConfig({
       key: fs.readFileSync(path.resolve(__dirname, 'cert/privkey.pem')),
       cert: fs.readFileSync(path.resolve(__dirname, 'cert/fullchain.pem')),
     },
+    proxy:{
+      '/api': {
+        changeOrigin: true,
+        target: 'http://192.168.10.176:6001',
+        rewrite: (path) => path.replace(/^\/api/, '/api')
+      }
+    }
   },
 })