11 months ago · d5f07a6f1a
--- a/.env
+++ b/.env
@@ -0,0 +1,3 @@
 
				+NODE_ENV=production
			
 
				+VITE_APP_API_BASE_URL=https://lepao-api.xxoo365.top
			
 
				+VITE_RSA_PUBLIC_KEY=-----BEGIN PUBLIC KEY-----\\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzgYFc5Q0ejm8xjFlJ7LI\\nAd2Fx/SjS49d9zl2dyZ73C0fKSqnsZIAFdDJVeezmJzOXNXWhaVGhqp3GBQeop0J\\nR1zFwmK5zoQxISL79YQwJlhJ7ZzYa/LMpkFd4CTT8S50Las7QiqKjDMAB1KdJZNr\\n4NGr3TYUx1UiO9TMoXWyAtVQASvkyEIQHopxOehwFn4daTO//1yMtr6vhrQ8zrQ3\\nqPm5abfcIQ3puX5IwS+zDfJB9FoksJZktV4r6+36SQ7Xjv01AB2o+m2z6j73nZ45\\n/yLLy6fGLneMjSiLG08MQaBR5uu3HM4g2Jgjp8yMtFH5NG9g+5utaL3swrFB8qwU\\ntQIDAQAB\\n-----END PUBLIC KEY-----
			
--- a/.env.preview
+++ b/.env.preview
@@ -0,0 +1,3 @@
 
				+NODE_ENV=production
			
 
				+VITE_APP_API_BASE_URL=/api
			
 
				+VITE_RSA_PUBLIC_KEY=-----BEGIN PUBLIC KEY-----\\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzgYFc5Q0ejm8xjFlJ7LI\\nAd2Fx/SjS49d9zl2dyZ73C0fKSqnsZIAFdDJVeezmJzOXNXWhaVGhqp3GBQeop0J\\nR1zFwmK5zoQxISL79YQwJlhJ7ZzYa/LMpkFd4CTT8S50Las7QiqKjDMAB1KdJZNr\\n4NGr3TYUx1UiO9TMoXWyAtVQASvkyEIQHopxOehwFn4daTO//1yMtr6vhrQ8zrQ3\\nqPm5abfcIQ3puX5IwS+zDfJB9FoksJZktV4r6+36SQ7Xjv01AB2o+m2z6j73nZ45\\n/yLLy6fGLneMjSiLG08MQaBR5uu3HM4g2Jgjp8yMtFH5NG9g+5utaL3swrFB8qwU\\ntQIDAQAB\\n-----END PUBLIC KEY-----
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,26 @@
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+node_modules
			
 
				+dist
			
 
				+dist-ssr
			
 
				+*.local
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.vscode/*
			
 
				+!.vscode/extensions.json
			
 
				+.idea
			
 
				+.DS_Store
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
 
				+
			
 
				+.env.development
			
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
 
				+{
			
 
				+  "recommendations": ["Vue.volar"]
			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,19 @@
 
				+# GitNexus-frontend
			
 
				+
			
 
				+安装依赖：
			
 
				+
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+开发：
			
 
				+
			
 
				+```
			
 
				+npm run dev
			
 
				+```
			
 
				+
			
 
				+编译打包：
			
 
				+
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
 
				+<!doctype html>
			
 
				+<html lang="zh-CN">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <meta name="viewport" content="width=1280">
			
 
				+    <title>RunForge - 让跑步的意义由技术重新定义</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script type="module" src="/src/main.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/package.json
+++ b/package.json
@@ -0,0 +1,45 @@
 
				+{
			
 
				+  "name": "gitnexus",
			
 
				+  "private": true,
			
 
				+  "version": "1.0.0",
			
 
				+  "type": "module",
			
 
				+  "author": "thc <2580797295@qq.com>",
			
 
				+  "description": "GitNexus 一款Git可视化分析管理工具",
			
 
				+  "homepage": "https://www.gitnexus.cn",
			
 
				+  "repository": {
			
 
				+    "type": "git",
			
 
				+    "url": "https://git.stackoverflow.vip/gitnexus_team/GitNexus-frontend"
			
 
				+  },
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "vite build",
			
 
				+    "preview": "vite preview"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "@amap/amap-jsapi-loader": "^1.0.1",
			
 
				+    "@highlightjs/vue-plugin": "^2.1.0",
			
 
				+    "@kjgl77/datav-vue3": "^1.7.4",
			
 
				+    "axios": "^1.8.3",
			
 
				+    "blueimp-md5": "^2.19.0",
			
 
				+    "crypto-js": "^4.2.0",
			
 
				+    "echarts": "^5.6.0",
			
 
				+    "highlight.js": "^11.11.1",
			
 
				+    "html2pdf.js": "^0.10.3",
			
 
				+    "jsencrypt": "^3.3.2",
			
 
				+    "markdown-it": "^14.1.0",
			
 
				+    "mitt": "^3.0.1",
			
 
				+    "pinia": "^3.0.1",
			
 
				+    "store": "^2.0.12",
			
 
				+    "three": "^0.175.0",
			
 
				+    "vue": "^3.5.13",
			
 
				+    "vue-echarts": "^7.0.3",
			
 
				+    "vue-router": "^4.5.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@arco-design/web-vue": "^2.57.0",
			
 
				+    "@arco-plugins/vite-vue": "^1.4.5",
			
 
				+    "@vitejs/plugin-vue": "^5.2.1",
			
 
				+    "less": "^4.2.2",
			
 
				+    "vite": "^6.2.0"
			
 
				+  }
			
 
				+}
			
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747188290992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9213" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M550.4 1024c-8.7 0-17.2-2.3-24.8-6.5-24.7-13.7-33.6-44.9-19.9-69.6l106.6-191.8-145.1-130-103.5 117.3c-9.3 15.2-25.9 24.5-43.7 24.6H89.6c-28.3 0-51.2-22.9-51.2-51.2 0-28.3 22.9-51.2 51.2-51.2h201.6l132.3-209-1.2-0.7 110-194.9-102.6-30.6-126.8 95.9c-17.7 11.8-41.5 7-53.3-10.7-11.8-17.7-7-41.5 10.7-53.3l136.5-102.4c6.3-4.2 13.7-6.4 21.3-6.3l163.5 20.1h0.3c7 0 13.8 1.9 19.7 5.5l122.2 69.5c2.9 1.8 5.4 3.9 7.7 6.4 3.3 3.3 6 7.1 7.9 11.4l67.1 168.7h140.8c21.2 0 38.4 17.2 38.4 38.4S968.5 512 947.3 512H781.1c-15.4 0-29.3-9.2-35.3-23.3L681 362.1 576.1 547.8l133.5 153.9c20.2 15.4 25.9 43.3 13.5 65.5l-128 230.4c-9 16.2-26.1 26.4-44.7 26.4z m204.8-819.2c-56.6 0-102.4-45.8-102.4-102.4S698.6 0 755.2 0s102.4 45.8 102.4 102.4-45.8 102.4-102.4 102.4z" fill="#FFBA57" p-id="9214"></path><path d="M423.5 456.6l-132.3 209 72.5 77.7 186.1-210.9-126.3-75.8z" fill="#2D4C5C" p-id="9215"></path><path d="M723.7 248.7l-122.1-69.5c-5.9-3.6-12.8-5.5-19.7-5.5h-0.3L422.4 455.9 576 548.1l160.9-285.4c-3.1-5.7-7.6-10.5-13.2-14z" fill="#00ACC1" p-id="9216"></path><path d="M576 548.2l-153.6-92.3 25.9-45.9-38.7 68.8c-24.7 41.3-12.4 94.7 27.9 120.9l174.7 156.5 97.4-54.3L576 548v0.2z" fill="#546E7A" p-id="9217"></path></svg>
			
--- a/public/mark/begin.png
+++ b/public/mark/begin.png
--- a/public/mark/daka.png
+++ b/public/mark/daka.png
--- a/public/mark/end.png
+++ b/public/mark/end.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,5 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <router-view></router-view>
			
 
				+  </div>
			
 
				+</template>
			
--- a/src/api/ai.js
+++ b/src/api/ai.js
@@ -0,0 +1,103 @@
 
				+import request from '@/utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+    ScanRepo: '/AI/ScanRepo',
			
 
				+    GetScanTaskList: '/AI/GetScanTaskList',
			
 
				+    GetScanTaskDetail: '/AI/GetScanTaskDetail',
			
 
				+    GetCommitSummary: '/AI/GetCommitSummary',
			
 
				+    SummaryCommit: '/AI/SummaryCommit',
			
 
				+    SummaryFile: '/AI/SummaryFile',
			
 
				+    GetFileSummary: '/AI/GetFileSummary',
			
 
				+    GetAIChatMessages: '/AI/GetAIChatMessages',
			
 
				+    GetAIChatMessage: '/AI/GetAIChatMessage',
			
 
				+    DeleteAIChatMessages: '/AI/DeleteAIChatMessages',
			
 
				+    AIChat: '/AI/Chat'
			
 
				+}
			
 
				+
			
 
				+export function ScanRepo(parameter) {
			
 
				+    return request({
			
 
				+        url: api.ScanRepo,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function GetScanTaskList(parameter) {
			
 
				+    return request({
			
 
				+        url: api.GetScanTaskList,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function GetScanTaskDetail(parameter) {
			
 
				+    return request({
			
 
				+        url: api.GetScanTaskDetail,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function GetCommitSummary(parameter) {
			
 
				+    return request({
			
 
				+        url: api.GetCommitSummary,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function SummaryCommit(parameter) {
			
 
				+    return request({
			
 
				+        url: api.SummaryCommit,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function SummaryFile(parameter) {
			
 
				+    return request({
			
 
				+        url: api.SummaryFile,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function GetFileSummary(parameter) {
			
 
				+    return request({
			
 
				+        url: api.GetFileSummary,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function GetAIChatMessages(parameter) {
			
 
				+    return request({
			
 
				+        url: api.GetAIChatMessages,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function GetAIChatMessage(parameter) {
			
 
				+    return request({
			
 
				+        url: api.GetAIChatMessage,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function DeleteAIChatMessages(parameter) {
			
 
				+    return request({
			
 
				+        url: api.DeleteAIChatMessages,
			
 
				+        method: 'get',
			
 
				+        params: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function AIChat(parameter) {
			
 
				+    return request({
			
 
				+        url: api.AIChat,
			
 
				+        method: 'post',
			
 
				+        data: parameter
			
 
				+    })
			
 
				+}
			
--- a/src/api/goods.js
+++ b/src/api/goods.js
@@ -0,0 +1,31 @@
 
				+import request from '../utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+  Goods: '/Goods',
			
 
				+  GoodsList: '/Goods/List',
			
 
				+  GetCount: '/Goods/GetCount'
			
 
				+}
			
 
				+
			
 
				+export function getGoods (parameter) {
			
 
				+  return request({
			
 
				+    url: api.Goods,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getGoodsList (parameter) {
			
 
				+  return request({
			
 
				+    url: api.GoodsList,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getCount (parameter) {
			
 
				+  return request({
			
 
				+    url: api.GetCount,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
--- a/src/api/lepao.js
+++ b/src/api/lepao.js
@@ -0,0 +1,65 @@
 
				+import request from '../utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+  Account: '/Lepao/Account',
			
 
				+  Records: '/Lepao/Records',
			
 
				+  ChangeAutoRun: '/Lepao/ChangeAutoRun',
			
 
				+  SingleRun: '/Lepao/SingleRun',
			
 
				+  GetRecordDetail: '/Lepao/GetRecordDetail'
			
 
				+}
			
 
				+
			
 
				+export function addAccount (parameter) {
			
 
				+  return request({
			
 
				+    url: api.Account,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function accountList (parameter) {
			
 
				+  return request({
			
 
				+    url: api.Account,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function deleteAccount (parameter) {
			
 
				+  return request({
			
 
				+    url: api.Account,
			
 
				+    method: 'delete',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function lepaoRecords (parameter) {
			
 
				+  return request({
			
 
				+    url: api.Records,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function changeAutoRun (parameter) {
			
 
				+  return request({
			
 
				+    url: api.ChangeAutoRun,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function singleRun (parameter) {
			
 
				+  return request({
			
 
				+    url: api.SingleRun,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function GetRecordDetail (parameter) {
			
 
				+  return request({
			
 
				+    url: api.GetRecordDetail,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -0,0 +1,65 @@
 
				+import request from '@/utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+  register: '/User/Register',
			
 
				+  Login: '/User/Login',
			
 
				+  ImgCaptcha: '/Captcha/ImageCaptcha',
			
 
				+  GetPermissions: '/User/GetPermissions',
			
 
				+  sendEmail: '/Captcha/SendEmail',
			
 
				+  GetLoginUrl: '/UniLogin/GetLoginUrl',
			
 
				+  UniLogin: '/UniLogin/Login'
			
 
				+}
			
 
				+
			
 
				+export function register(parameter) {
			
 
				+  return request({
			
 
				+    url: api.register,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function login (parameter) {
			
 
				+  return request({
			
 
				+    url: api.Login,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function sendEmail(parameter) {
			
 
				+  return request({
			
 
				+    url: api.sendEmail,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getImageCaptcha () {
			
 
				+  return request({
			
 
				+    url: api.ImgCaptcha,
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function GetPermissions() {
			
 
				+  return request({
			
 
				+    url: api.GetPermissions,
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getLoginUrl(parameter) {
			
 
				+  return request({
			
 
				+    url: api.GetLoginUrl,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function uniLogin(parameter) {
			
 
				+  return request({
			
 
				+    url: api.UniLogin,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -0,0 +1,31 @@
 
				+import request from '../utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+  Create: '/Order/CreateOrder',
			
 
				+  Detail: '/Order/Detail',
			
 
				+  GetMyOrder: '/Order/GetMyOrders'
			
 
				+}
			
 
				+
			
 
				+export function createOrder(parameter) {
			
 
				+  return request({
			
 
				+    url: api.Create,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function orderDeatil(parameter) {
			
 
				+  return request({
			
 
				+    url: api.Detail,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getMyOrder(parameter) {
			
 
				+  return request({
			
 
				+    url: api.GetMyOrder,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
--- a/src/api/pathData.js
+++ b/src/api/pathData.js
@@ -0,0 +1,31 @@
 
				+import request from '../utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+  GetPathDetail: '/Lepao/GetPathDetail',
			
 
				+  GetPathList: '/Lepao/GetPathList',
			
 
				+  ChangePathState: '/Lepao/ChangePathState'
			
 
				+}
			
 
				+
			
 
				+export function GetPathList(parameter) {
			
 
				+  return request({
			
 
				+    url: api.GetPathList,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function GetPathDetail(parameter) {
			
 
				+  return request({
			
 
				+    url: api.GetPathDetail,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function ChangePathState(parameter) {
			
 
				+  return request({
			
 
				+    url: api.ChangePathState,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
--- a/src/api/upload.js
+++ b/src/api/upload.js
@@ -0,0 +1,24 @@
 
				+import request from '@/utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+    uploadImg: '/UploadPicture',
			
 
				+    uploadAvatar: '/uploadAvatar'
			
 
				+}
			
 
				+
			
 
				+export function uploadImg(parameter) {
			
 
				+    return request({
			
 
				+        url: api.uploadImg,
			
 
				+        headers: { 'Content-Type': 'multipart/form-data' },
			
 
				+        method: 'post',
			
 
				+        data: parameter
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+export function uploadAvatar(parameter) {
			
 
				+    return request({
			
 
				+        url: api.uploadAvatar,
			
 
				+        headers: { 'Content-Type': 'multipart/form-data' },
			
 
				+        method: 'post',
			
 
				+        data: parameter
			
 
				+    })
			
 
				+}
			
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -0,0 +1,49 @@
 
				+import request from '../utils/request'
			
 
				+
			
 
				+const api = {
			
 
				+  ChangeUsername: '/User/ChangeUsername',
			
 
				+  ChangePassword: '/User/ChangePassword',
			
 
				+  UserInfo: '/User/Info',
			
 
				+  BindEmail: '/User/BindEmail',
			
 
				+  GetRepos: '/User/GetRepos'
			
 
				+}
			
 
				+
			
 
				+export function ChangeUsername(parameter) {
			
 
				+  return request({
			
 
				+    url: api.ChangeUsername,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function BindEmail(parameter) {
			
 
				+  return request({
			
 
				+    url: api.BindEmail,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function ChangePassword(parameter) {
			
 
				+  return request({
			
 
				+    url: api.ChangePassword,
			
 
				+    method: 'post',
			
 
				+    data: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function GetUserInfo(parameter) {
			
 
				+  return request({
			
 
				+    url: api.UserInfo,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function GetRepos(parameter) {
			
 
				+  return request({
			
 
				+    url: api.GetRepos,
			
 
				+    method: 'get',
			
 
				+    params: parameter
			
 
				+  })
			
 
				+}
			
--- a/src/assets/VIP.svg
+++ b/src/assets/VIP.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747383322546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4664" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M510.955102 831.738776c-23.510204 0-45.453061-9.926531-61.64898-27.167347L138.971429 468.114286c-28.734694-31.346939-29.779592-79.412245-1.567347-111.804082l117.55102-135.314286c15.673469-18.285714 38.661224-28.734694 63.216327-28.734694H705.306122c24.032653 0 47.020408 10.44898 62.693878 28.734694l118.073469 135.314286c28.212245 32.391837 27.689796 80.457143-1.567347 111.804082L572.081633 804.571429c-15.673469 17.240816-38.138776 27.167347-61.126531 27.167347z" fill="#F2CB51" p-id="4665"></path><path d="M506.77551 642.612245c-5.22449 0-10.971429-2.089796-15.15102-6.269388l-203.755102-208.979592c-7.836735-8.359184-7.836735-21.420408 0.522449-29.779592 8.359184-7.836735 21.420408-7.836735 29.779592 0.522449l189.12653 193.828572 199.053061-194.351021c8.359184-7.836735 21.420408-7.836735 29.779592 0.522449 7.836735 8.359184 7.836735 21.420408-0.522449 29.779592l-214.204081 208.979592c-4.179592 3.657143-9.404082 5.746939-14.628572 5.746939z" fill="#FFF7E1" p-id="4666"></path></svg>
			
--- a/src/assets/ai.svg
+++ b/src/assets/ai.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743221393320" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16541" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="64"><path d="M640 0l384 1024H0L384 0h256zM512 205.376L329.792 704H576v192H259.648l-46.656 128h597.952L512 205.376z" fill="#3366FF" p-id="16542"></path><path d="M928 384h192v640h-192z" fill="#3366FF" p-id="16543"></path><path d="M1024 128m-128 0a128 128 0 1 0 256 0 128 128 0 1 0-256 0Z" fill="#F5222D" p-id="16544"></path></svg>
			
--- a/src/assets/ai2.svg
+++ b/src/assets/ai2.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743250828824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16701" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M661.3 349.4h65.1v322.2h-65.1zM499.8 349.3h-68.9L305.5 671.6h69l26.6-73.2h128.7l28.3 73.2h70.7l-129-322.3z m-78.7 194.8l43.5-119.5L509 544.1h-87.9zM70.7 763.2L73 635l72.3 1.3-1.5 86.2 365.7 217.9 220.7-123.6 35.4 63.1L508.4 1024z" fill="#1296db" p-id="16702"></path><path d="M809.4 770.6l71.5-42v-429L667.8 170.2l37.6-61.9 247.9 150.5V770L846 833zM74.3 544.5V249.4L520.7 0l105.5 65.6-38.2 61.5L518.7 84 146.6 291.9v252.6z" fill="#1296db" p-id="16703"></path></svg>
			
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -0,0 +1,4 @@
 
				+html,body,#app{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -0,0 +1,122 @@
 
				+html,
			
 
				+body,
			
 
				+#app {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    overflow: hidden;
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+
			
 
				+.el-header {
			
 
				+    background-color: #000000;
			
 
				+    color: #333;
			
 
				+    text-align: center;
			
 
				+    line-height: 60px;
			
 
				+}
			
 
				+
			
 
				+.el-aside {
			
 
				+    background-color: #000000;
			
 
				+    color: #333;
			
 
				+    text-align: center;
			
 
				+    line-height: 200px;
			
 
				+}
			
 
				+
			
 
				+.bg {
			
 
				+    background: url("../img/index_bg.png");
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    background-size: cover;
			
 
				+    background-repeat: no-repeat;
			
 
				+    color: #fffcfc;
			
 
				+}
			
 
				+
			
 
				+.header-box {
			
 
				+    width: 100%;
			
 
				+    height: 70px;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 10px;
			
 
				+}
			
 
				+
			
 
				+.header-box h2 {
			
 
				+    margin-top: 3px;
			
 
				+    letter-spacing: 5px;
			
 
				+}
			
 
				+
			
 
				+/* 整体布局 */
			
 
				+.main {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    display: grid;
			
 
				+    grid-template-columns: 1fr 2fr 1fr; /* 修改列布局，设置三列 */
			
 
				+    grid-template-rows: 0.3fr 2fr; /* 修改行布局 */
			
 
				+    /* gap: 10px; */
			
 
				+}
			
 
				+
			
 
				+/* 第一模块 */
			
 
				+.main div:nth-child(1) {
			
 
				+    grid-column: 1 / 4; /* 跨三列 */
			
 
				+    grid-row: 1 / 2;
			
 
				+}
			
 
				+
			
 
				+/* 第二模块 */
			
 
				+.main div:nth-child(2) {
			
 
				+    grid-row: 2 / 3;
			
 
				+    grid-column: 1 / 2; /* 位于第一列 */
			
 
				+}
			
 
				+
			
 
				+/* 第三模块 */
			
 
				+.main div:nth-child(3) {
			
 
				+    grid-column: 3 / 4; /* 位于第三列 */
			
 
				+    grid-row: 2 / 3;
			
 
				+}
			
 
				+
			
 
				+/* 第四模块 */
			
 
				+.main div:nth-child(4) {
			
 
				+    grid-column: 2 / 3; /* 位于第二列，即中间 */
			
 
				+    grid-row: 2 / 3;
			
 
				+    /* display: flex; */
			
 
				+    justify-content: center; /* 水平居中 */
			
 
				+    align-items: center; /* 垂直居中 */
			
 
				+}
			
 
				+
			
 
				+/* 第一模块样式 */
			
 
				+.modulefirst {
			
 
				+    height: 100%;
			
 
				+    font-size: 25px;
			
 
				+}
			
 
				+
			
 
				+/* 边框样式 */
			
 
				+.bgstyle {
			
 
				+    height: 100%;
			
 
				+    background-color: #0D2049;
			
 
				+    border-top: 2px solid #0B3E6B;
			
 
				+}
			
 
				+
			
 
				+/* 第三个模块  */
			
 
				+.modulethird {
			
 
				+    display: flex;
			
 
				+}
			
 
				+
			
 
				+.modulethird-left {
			
 
				+    flex: 0 1 60%;
			
 
				+}
			
 
				+
			
 
				+.modulethird-right {
			
 
				+    flex: 0 1 40%;
			
 
				+}
			
 
				+
			
 
				+/* 第四个模块 */
			
 
				+.modulefourth {
			
 
				+    /* display: flex; */
			
 
				+    width: 100%;
			
 
				+}
			
 
				+/* 每个小板块标题 */
			
 
				+.title {
			
 
				+  font-size: 20px;
			
 
				+  font-weight: bold;
			
 
				+  margin-bottom: 10px;
			
 
				+}
			
 
				+/*  */
			
--- a/src/assets/font/AlibabaSans-MediumItalic.woff2
+++ b/src/assets/font/AlibabaSans-MediumItalic.woff2
--- a/src/assets/font/AlimamaShuHeiTi-Bold.woff2
+++ b/src/assets/font/AlimamaShuHeiTi-Bold.woff2
--- a/src/assets/font/iconfont.css
+++ b/src/assets/font/iconfont.css
@@ -0,0 +1,32 @@
 
				+@font-face {
			
 
				+    font-family: "iconfont"; /* Project id 4320411 */
			
 
				+    src: url('iconfont.woff2?t=1699374041097') format('woff2'),
			
 
				+         url('iconfont.woff?t=1699374041097') format('woff'),
			
 
				+         url('iconfont.ttf?t=1699374041097') format('truetype');
			
 
				+  }
			
 
				+  
			
 
				+  .iconfont {
			
 
				+    font-family: "iconfont" !important;
			
 
				+    font-size: 16px;
			
 
				+    font-style: normal;
			
 
				+    -webkit-font-smoothing: antialiased;
			
 
				+    -moz-osx-font-smoothing: grayscale;
			
 
				+  }
			
 
				+  
			
 
				+  .icon-tubiao:before {
			
 
				+    content: "\e670";
			
 
				+  }
			
 
				+  
			
 
				+  .icon-tubiaotongji:before {
			
 
				+    content: "\e66a";
			
 
				+  }
			
 
				+  
			
 
				+  .icon-a-tubiao2:before {
			
 
				+    content: "\eb41";
			
 
				+  }
			
 
				+  
			
 
				+  .icon-a-tubiao3:before {
			
 
				+    content: "\eb42";
			
 
				+  }
			
 
				+  
			
 
				+  
			
--- a/src/assets/img/ai.png
+++ b/src/assets/img/ai.png
--- a/src/assets/img/avatar/assistant.png
+++ b/src/assets/img/avatar/assistant.png
--- a/src/assets/img/bg.png
+++ b/src/assets/img/bg.png
--- a/src/assets/img/bg1.png
+++ b/src/assets/img/bg1.png
--- a/src/assets/img/gitDataPanel/code.svg
+++ b/src/assets/img/gitDataPanel/code.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741154062294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17559" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#1296DB" p-id="17560"></path><path d="M402.002 384a20.48 20.48 0 0 1-7.496 27.955l-154.132 112.64a20.48 20.48 0 1 1-20.48-35.43l154.132-112.64A20.48 20.48 0 0 1 402.002 384z" fill="#FFFFFF" p-id="17561"></path><path d="M406.815 634.88a20.48 20.48 0 0 0-7.475-27.955l-153.6-112.64a20.48 20.48 0 0 0-20.48 35.43l153.6 112.64a20.378 20.378 0 0 0 27.955-7.475z" fill="#FFFFFF" p-id="17562"></path><path d="M622.182 379.085a20.726 20.726 0 0 0 7.68 28.467l157.799 114.79a21.053 21.053 0 0 0 28.672-7.68 20.726 20.726 0 0 0-7.68-28.467l-157.799-114.79a21.053 21.053 0 0 0-28.672 7.68z" fill="#FFFFFF" p-id="17563"></path><path d="M617.267 634.675a20.726 20.726 0 0 1 7.68-28.467l157.287-114.79a20.88 20.88 0 1 1 20.89 36.147l-157.287 114.79a20.91 20.91 0 0 1-28.57-7.68z" fill="#FFFFFF" p-id="17564"></path><path d="M551.731 363.622a20.552 20.552 0 0 1 14.541 25.088l-68.946 257.127a20.48 20.48 0 1 1-39.557-10.547l68.874-257.127a20.593 20.593 0 0 1 25.088-14.54z" fill="#FFFFFF" p-id="17565"></path></svg>
			
--- a/src/assets/img/gitDataPanel/commit.svg
+++ b/src/assets/img/gitDataPanel/commit.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741153899968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8822" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#57C686" p-id="8823"></path><path d="M582.22592 245.76v140.43136c0 19.39456 15.70816 35.10272 35.10272 35.10272H757.76V737.28c0 19.39456-15.72864 35.10272-35.10272 35.10272H301.34272A35.10272 35.10272 0 0 1 266.24 737.28V280.86272c0-19.37408 15.72864-35.10272 35.10272-35.10272H582.2464z m35.10272 0L757.76 386.19136h-122.88a17.55136 17.55136 0 0 1-17.55136-17.55136v-122.88z m-147.80416 375.33696L419.84 571.45344a17.55136 17.55136 0 0 0-24.80128 24.82176l62.0544 62.0544a17.55136 17.55136 0 0 0 24.82176 0l136.54016-136.51968a17.55136 17.55136 0 0 0-24.82176-24.84224l-124.1088 124.12928z" fill="#FFFFFF" p-id="8824"></path></svg>
			
--- a/src/assets/img/gitDataPanel/group.svg
+++ b/src/assets/img/gitDataPanel/group.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741153966074" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9831" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M511.867961 1023.998953A512.007562 512.007562 0 0 1 312.623357 40.491199a511.995928 511.995928 0 0 1 398.489208 943.279586A508.64552 508.64552 0 0 1 511.867961 1023.998953zM324.745321 581.465834a80.979838 80.979838 0 0 0-80.886771 80.875138 40.495736 40.495736 0 0 0 40.449202 40.449202h300.443227a40.484102 40.484102 0 0 0 40.437569-40.449202 80.968205 80.968205 0 0 0-80.875138-80.875138z m255.68968-10.62126a80.456337 80.456337 0 0 1 68.020272 79.863035 41.717239 41.717239 0 0 1-0.372267 5.537481h103.315895a28.501739 28.501739 0 0 0 28.466838-28.466839 57.003478 57.003478 0 0 0-56.933677-57.003478zM645.651633 387.816877a73.208752 73.208752 0 1 0 73.220385 73.208752v-73.208752z m-211.122267-66.310167a104.002263 104.002263 0 1 0 104.002263 104.002263V321.460176z" fill="#0084FF" p-id="9832"></path></svg>
			
--- a/src/assets/img/gitDataPanel/time.svg
+++ b/src/assets/img/gitDataPanel/time.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741154758137" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19781" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M511.926857 0.804571A511.707429 511.707429 0 0 0 0.731429 512 511.707429 511.707429 0 0 0 512 1023.049143 511.707429 511.707429 0 0 0 1023.049143 512 511.707429 511.707429 0 0 0 511.926857 0.804571z" fill="#09B590" p-id="19782"></path><path d="M709.851429 637.220571L533.211429 535.04v-278.674286a42.642286 42.642286 0 0 0-85.211429 0v298.203429c0 15.798857 19.602286 29.037714 32.402286 36.352 3.510857 5.339429 13.238857 10.166857 19.163428 13.531428L675.254857 710.948571c20.406857 11.702857 42.422857 4.754286 54.198857-15.579428 11.702857-20.333714 0.804571-46.372571-19.602285-58.148572z" fill="#FFFFFF" p-id="19783"></path></svg>
			
--- a/src/assets/img/homePage/ai.webp
+++ b/src/assets/img/homePage/ai.webp
--- a/src/assets/img/homePage/dataScreen.webp
+++ b/src/assets/img/homePage/dataScreen.webp
--- a/src/assets/img/homePage/icons/ai.svg
+++ b/src/assets/img/homePage/icons/ai.svg
--- a/src/assets/img/homePage/icons/quality.svg
+++ b/src/assets/img/homePage/icons/quality.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745378763867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13193" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 62c-200.323 0-362.903 162.58-362.903 362.903 0 104.516 45 200.323 116.129 265.645V962L512 876.355 758.774 962V690.548c71.13-66.774 116.13-161.129 116.13-265.645C874.903 224.581 712.322 62 512 62z m188.71 682.258V880.71L512 815.387 323.29 880.71V744.258h15.968c50.807 27.58 110.323 43.548 172.742 43.548s120.484-15.967 172.742-43.548h15.968z m-31.936-58.064c-46.451 27.58-98.71 43.548-156.774 43.548s-110.323-15.968-156.774-43.548c-88.549-53.71-148.065-149.517-148.065-261.29 0-168.388 136.452-304.84 304.839-304.84s304.839 136.452 304.839 304.84c0 111.773-59.516 207.58-148.065 261.29z" fill="#1890FF" p-id="13194"></path><path d="M512 642.645c120.484 0 217.742-97.258 217.742-217.742S632.484 207.161 512 207.161 294.258 304.42 294.258 424.903 391.516 642.645 512 642.645z m0-58.064c-88.548 0-159.677-71.13-159.677-159.678S423.452 265.226 512 265.226s159.677 71.129 159.677 159.677S600.548 584.581 512 584.581z" fill="#1890FF" p-id="13195"></path><path d="M352.323 424.903a159.677 159.677 0 1 0 319.354 0 159.677 159.677 0 1 0-319.354 0z" fill="#D3EAFF" p-id="13196"></path><path d="M599.097 404.58l-58.065-11.612L512 337.806l-29.032 55.162-58.065 11.613 40.645 45L458.29 512 512 485.871 565.71 512l-7.258-62.42z" fill="#FFC13D" p-id="13197"></path></svg>
			
--- a/src/assets/img/homePage/icons/visualization.svg
+++ b/src/assets/img/homePage/icons/visualization.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745378736005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11949" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M391.12704 587.776m-273.24416 0a273.24416 273.24416 0 1 0 546.48832 0 273.24416 273.24416 0 1 0-546.48832 0Z" fill="#346BAA" p-id="11950"></path><path d="M486.35904 141.55776h383.1808v383.1808h-383.1808z" fill="#64B064" p-id="11951"></path><path d="M422.66624 882.44224l241.70496-418.69312 241.74592 418.69312z" fill="#43A3D4" p-id="11952"></path></svg>
			
--- a/src/assets/img/homePage/scan.webp
+++ b/src/assets/img/homePage/scan.webp
--- a/src/assets/img/index_bg.png
+++ b/src/assets/img/index_bg.png
--- a/src/assets/repo.svg
+++ b/src/assets/repo.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739203237720" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7478" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M554.666667 896v106.666667l-128-85.333334-128 85.333334V896h-21.333334A149.333333 149.333333 0 0 1 128 746.666667V213.333333a128 128 0 0 1 128-128h597.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v725.333333a42.666667 42.666667 0 0 1-42.666667 42.666667h-298.666666z m-256-85.333333v-85.333334h256v85.333334h256v-128H277.333333a64 64 0 0 0 0 128H298.666667zM298.666667 213.333333v85.333334h85.333333V213.333333H298.666667z m0 128v85.333334h85.333333V341.333333H298.666667z m0 128v85.333334h85.333333v-85.333334H298.666667z" p-id="7479" fill="#707070"></path></svg>
			
--- a/src/assets/userinfo-background.jpg
+++ b/src/assets/userinfo-background.jpg
--- a/src/assets/video/background.webm
+++ b/src/assets/video/background.webm
--- a/src/components/AIChat/index.vue
+++ b/src/components/AIChat/index.vue
@@ -0,0 +1,352 @@
 
				+<template>
			
 
				+    <a-drawer :visible="props.visible" class="drawer" width="570px" @cancel="closeAI" placement="left" :footer="false">
			
 
				+        <template #title>
			
 
				+            <div class="aiTitle">
			
 
				+                <img alt="AI" src="@/assets/ai.svg" height="25">
			
 
				+                <span>AI助手</span>
			
 
				+                <a-button size="small" class="button" @click="deleteMessages">清空记录</a-button>
			
 
				+            </div>
			
 
				+        </template>
			
 
				+        <div class="container">
			
 
				+            <div class="messages" ref="messagesContainer">
			
 
				+                <a-spin :loading="messagesLoading">
			
 
				+                    <div v-for="(item, index) in messages">
			
 
				+                        <div class="time"
			
 
				+                            v-if="!messages[index - 1] || (messages[index].time - messages[index - 1].time) > 300000">{{
			
 
				+                                stramptoTime(item.time) }}</div>
			
 
				+                        <div :class="['message', item.type === 'user' ? 'right' : 'left']">
			
 
				+                            <a-avatar class="avatar">
			
 
				+                                <img alt="avatar" src="@/assets/img/avatar/assistant.png" v-if="item.type !== 'user'" />
			
 
				+                                <img alt="avatar" :src="user.avatar" v-else-if="item.type === 'user'" />
			
 
				+                            </a-avatar>
			
 
				+                            <a-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block', zIndex: 99 }">
			
 
				+                                <div :class="['content', item.type === 'user' ? 'user' : 'ai']"
			
 
				+                                    v-html="renderMarkdown(item.content)">
			
 
				+                                </div>
			
 
				+                                <template #content>
			
 
				+                                    <a-doption>
			
 
				+                                        <icon-play-arrow /> 打开仓库
			
 
				+                                    </a-doption>
			
 
				+                                </template>
			
 
				+                            </a-dropdown>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </a-spin>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="inputBox">
			
 
				+                <a-textarea placeholder="您的专属AI助手~" :max-length="300" :auto-size="{
			
 
				+                    minRows: 1,
			
 
				+                    maxRows: 6
			
 
				+                }" allow-clear v-model="input" />
			
 
				+                <a-button type="primary" :loading="send" @click="sendMessage">发送</a-button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </a-drawer>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
			
 
				+import { Message, Modal } from '@arco-design/web-vue'
			
 
				+import { eventBus } from '@/utils/eventBus'
			
 
				+import { AIChat, GetAIChatMessages, GetAIChatMessage, DeleteAIChatMessages } from '@/api/ai'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import MarkdownIt from 'markdown-it'
			
 
				+
			
 
				+const md = new MarkdownIt()
			
 
				+
			
 
				+const renderMarkdown = (text) => {
			
 
				+    return md.render(text || '')
			
 
				+}
			
 
				+
			
 
				+const props = defineProps({
			
 
				+    visible: {
			
 
				+        type: Boolean,
			
 
				+        default: false
			
 
				+    }
			
 
				+})
			
 
				+
			
 
				+const user = ref('')
			
 
				+const input = ref('')
			
 
				+const messagesLoading = ref(false)
			
 
				+const send = ref(false)
			
 
				+const messages = ref([])
			
 
				+const msgid = ref('')
			
 
				+const newIndex = ref()
			
 
				+
			
 
				+const messagesContainer = ref(null)
			
 
				+
			
 
				+const scrollToBottom = () => {
			
 
				+    if (messagesContainer.value) {
			
 
				+        // 等 DOM 渲染完成再滚动
			
 
				+        nextTick(() => {
			
 
				+            messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
			
 
				+        })
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const getAIChatMessages = async () => {
			
 
				+    try {
			
 
				+        messagesLoading.value = true
			
 
				+        const res = await GetAIChatMessages()
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Message.error(`获取历史对话消息失败！${res?.msg || ''}`)
			
 
				+        messages.value = res.data
			
 
				+        messages.value.push({
			
 
				+            type: 'system', time: new Date().getTime(), content: '你好！我是你的专属AI智能助手“小吉”，你可以问我任何问题哦~~\n试着问问：\n- 我拥有哪些Git仓库？\n- 仓库GitNexus最近一次提交的信息是什么？\n- 请对比electron仓库的最后两次提交。'
			
 
				+        })
			
 
				+    } catch (error) {
			
 
				+        Message.error(`获取历史对话消息失败！`)
			
 
				+    } finally {
			
 
				+        scrollToBottom()
			
 
				+        messagesLoading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const getAIChatMessage = async () => {
			
 
				+    try {
			
 
				+        const res = await GetAIChatMessage({ id: msgid.value })
			
 
				+        if (!res || res.code !== 0) {
			
 
				+            send.value = false
			
 
				+            return messages.value[newIndex.value].content = '获取对话消息失败，请稍后再试'
			
 
				+        }
			
 
				+
			
 
				+        if (!res.data)
			
 
				+            return
			
 
				+
			
 
				+        stopPolling()
			
 
				+        messages.value[newIndex.value].content = ''
			
 
				+        for (let i = 0; i < res.data.length; i++) {
			
 
				+            await new Promise(resolve => setTimeout(resolve, 30))
			
 
				+            messages.value[newIndex.value].content += res.data[i]
			
 
				+            scrollToBottom()
			
 
				+        }
			
 
				+        send.value = false
			
 
				+    } catch (error) {
			
 
				+        Message.error(`获取对话消息失败！`)
			
 
				+    } finally {
			
 
				+        scrollToBottom()
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+let timer = null
			
 
				+
			
 
				+// 轮询
			
 
				+const startPolling = () => {
			
 
				+    if (!timer) {
			
 
				+        timer = setInterval(async () => {
			
 
				+            await getAIChatMessage()
			
 
				+        }, 1000)
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// 停止轮询
			
 
				+const stopPolling = () => {
			
 
				+    if (timer) {
			
 
				+        clearInterval(timer)
			
 
				+        timer = null
			
 
				+    }
			
 
				+    send.value = false
			
 
				+}
			
 
				+
			
 
				+const sendMessage = async () => {
			
 
				+    if (input.value === '') return
			
 
				+    send.value = true
			
 
				+    let content = input.value
			
 
				+    input.value = ''
			
 
				+    try {
			
 
				+        messages.value.push({ type: 'user', time: new Date().getTime(), content })
			
 
				+        newIndex.value = messages.value.push({ type: 'ai', time: new Date().getTime(), content: '小吉正在思考哦~请稍候...' }) - 1
			
 
				+        scrollToBottom()
			
 
				+        const res = await AIChat({ message: content })
			
 
				+        if (!res || res.code !== 0) {
			
 
				+            send.value = false
			
 
				+            return messages.value[newIndex.value].content = '获取对话消息失败，请稍后再试'
			
 
				+        }
			
 
				+
			
 
				+        msgid.value = res.id
			
 
				+        startPolling()
			
 
				+    } catch (error) {
			
 
				+        console.log(error)
			
 
				+        Message.error('获取对话消息失败！请稍后再试')
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const closeAI = () => {
			
 
				+    eventBus.emit('closeAI')
			
 
				+}
			
 
				+
			
 
				+const getuser = async () => {
			
 
				+    const userStore = useUserStore()
			
 
				+    let userInfo = await userStore.getInfo()
			
 
				+    user.value = userInfo
			
 
				+}
			
 
				+
			
 
				+onMounted(async () => {
			
 
				+    getuser()
			
 
				+    await getAIChatMessages()
			
 
				+})
			
 
				+
			
 
				+// 组件销毁时停止轮询
			
 
				+onUnmounted(() => {
			
 
				+    stopPolling()
			
 
				+})
			
 
				+
			
 
				+watch(
			
 
				+    () => props.visible,
			
 
				+    (val) => {
			
 
				+        if (val) {
			
 
				+            nextTick(() => {
			
 
				+                scrollToBottom()
			
 
				+            })
			
 
				+        }
			
 
				+    }
			
 
				+)
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+const deleteMessages = () => {
			
 
				+    Modal.confirm({
			
 
				+        title: '清空消息记录',
			
 
				+        content: '您即将清空所有消息记录，是否继续？',
			
 
				+        onOk: async () => {
			
 
				+            const res = await DeleteAIChatMessages()
			
 
				+            if (!res || res.code !== 0)
			
 
				+                return Message.error('清空消息记录失败！')
			
 
				+            getAIChatMessages()
			
 
				+            Message.success('清空消息记录成功!')
			
 
				+        },
			
 
				+        onCancel: () => {
			
 
				+
			
 
				+        }
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.container {
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    height: calc(100% + 20px);
			
 
				+    gap: 10px;
			
 
				+    margin-top: -20px;
			
 
				+
			
 
				+    /* 对于 Webkit 浏览器（Chrome、Safari） */
			
 
				+    .messages::-webkit-scrollbar {
			
 
				+        width: 8px;
			
 
				+    }
			
 
				+
			
 
				+    .messages::-webkit-scrollbar-track {
			
 
				+        background: transparent;
			
 
				+    }
			
 
				+
			
 
				+    .messages::-webkit-scrollbar-thumb {
			
 
				+        background-color: rgba(0, 0, 0, 0.2);
			
 
				+        /* 滚动条滑块背景 */
			
 
				+        border-radius: 10px;
			
 
				+        /* 滚动条滑块圆角 */
			
 
				+    }
			
 
				+
			
 
				+    .messages::-webkit-scrollbar-thumb:hover {
			
 
				+        background-color: rgba(0, 0, 0, 0.3);
			
 
				+        /* 滚动条滑块悬停时的背景 */
			
 
				+    }
			
 
				+
			
 
				+    .messages {
			
 
				+        flex: 1;
			
 
				+        overflow-y: auto;
			
 
				+        padding: 10px;
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+
			
 
				+        .time {
			
 
				+            color: #888;
			
 
				+            font-size: 0.9em;
			
 
				+            text-align: center;
			
 
				+            margin: 10px 0 0;
			
 
				+        }
			
 
				+
			
 
				+        .message {
			
 
				+            display: flex;
			
 
				+            margin-top: 10px;
			
 
				+
			
 
				+            &.right {
			
 
				+                flex-direction: row-reverse;
			
 
				+                justify-content: end;
			
 
				+            }
			
 
				+
			
 
				+            .avatar {
			
 
				+                user-select: none;
			
 
				+                width: 36px;
			
 
				+                height: 36px;
			
 
				+                background-color: #fff;
			
 
				+            }
			
 
				+
			
 
				+
			
 
				+            /* 对于 Webkit 浏览器（Chrome、Safari） */
			
 
				+            .content::-webkit-scrollbar {
			
 
				+                height: 6px;
			
 
				+            }
			
 
				+
			
 
				+            .content::-webkit-scrollbar-track {
			
 
				+                background: transparent;
			
 
				+            }
			
 
				+
			
 
				+            .content::-webkit-scrollbar-thumb {
			
 
				+                background-color: rgba(0, 0, 0, 0.2);
			
 
				+                /* 滚动条滑块背景 */
			
 
				+                border-radius: 10px;
			
 
				+                /* 滚动条滑块圆角 */
			
 
				+            }
			
 
				+
			
 
				+            .content::-webkit-scrollbar-thumb:hover {
			
 
				+                background-color: rgba(0, 0, 0, 0.3);
			
 
				+                /* 滚动条滑块悬停时的背景 */
			
 
				+            }
			
 
				+
			
 
				+            .content {
			
 
				+                max-width: 70%;
			
 
				+                padding: 0 14px;
			
 
				+                border-radius: 10px;
			
 
				+                margin: 0 10px;
			
 
				+                font-size: 14px;
			
 
				+                line-height: 1.5;
			
 
				+                word-break: break-word;
			
 
				+                overflow-x: auto;
			
 
				+
			
 
				+                &.user {
			
 
				+                    background-color: #4e88ff;
			
 
				+                    color: white;
			
 
				+                }
			
 
				+
			
 
				+                &.ai {
			
 
				+                    background-color: #eee;
			
 
				+                    color: #333;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .inputBox {
			
 
				+        display: flex;
			
 
				+        gap: 10px;
			
 
				+        min-height: 15px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.aiTitle {
			
 
				+    display: flex;
			
 
				+    font-size: 1.1em;
			
 
				+    gap: 10px;
			
 
				+    width: 100%;
			
 
				+
			
 
				+    .button {
			
 
				+        position: absolute;
			
 
				+        left: 75%;
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -0,0 +1,39 @@
 
				+<template>
			
 
				+ 
			
 
				+    <a-breadcrumb class="container-breadcrumb">
			
 
				+      <a-breadcrumb-item>
			
 
				+        <icon-apps />
			
 
				+      </a-breadcrumb-item>
			
 
				+      <a-breadcrumb-item v-for="item in items" :key="item">
			
 
				+        <span class="item">{{ item }}</span>
			
 
				+      </a-breadcrumb-item>
			
 
				+    </a-breadcrumb>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+defineProps({
			
 
				+  items: {
			
 
				+    type: [],
			
 
				+    default() {
			
 
				+      return [];
			
 
				+    },
			
 
				+  },
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container-breadcrumb {
			
 
				+  margin: 16px 0;
			
 
				+  :deep(.arco-breadcrumb-item) {
			
 
				+    color: rgb(var(--gray-6));
			
 
				+    &:last-child {
			
 
				+      color: rgb(var(--gray-8));
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.item {
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/CanvasBackend/index.vue
+++ b/src/components/CanvasBackend/index.vue
@@ -0,0 +1,233 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <canvas ref="webgl" class="webgl"></canvas>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import * as THREE from 'three'
			
 
				+
			
 
				+export default {
			
 
				+  name: "WebGLComponent",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      mouseX: 0,  // 鼠标的X坐标，用于追踪鼠标移动
			
 
				+      mouseY: 0   // 鼠标的Y坐标
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.initWebGL();  // 组件加载完成后，初始化WebGL
			
 
				+  },
			
 
				+  methods: {
			
 
				+    // 初始化WebGL的方法
			
 
				+    initWebGL() {
			
 
				+      const canvas = this.$refs.webgl;  // 获取canvas元素
			
 
				+      canvas.width = window.innerWidth;  // 设置canvas的宽度为窗口宽度
			
 
				+      canvas.height = window.innerHeight;  // 设置canvas的高度为窗口高度
			
 
				+
			
 
				+      const gl = canvas.getContext("webgl");  // 获取WebGL上下文
			
 
				+
			
 
				+      // 顶点着色器源代码
			
 
				+      const vertexShaderSource = `
			
 
				+        attribute vec4 position;  // 顶点位置
			
 
				+        attribute float scale;  // 顶点大小
			
 
				+        uniform mat4 modelViewMatrix;  // 视图矩阵
			
 
				+        uniform mat4 projectionMatrix;  // 投影矩阵
			
 
				+        void main() {
			
 
				+          vec4 mvPosition = modelViewMatrix * position;  // 计算模型视图变换后的顶点位置
			
 
				+          gl_PointSize = scale * 1.0 * (200.0 / - mvPosition.z);  // 根据深度调整点的大小
			
 
				+          gl_Position = projectionMatrix * mvPosition;  // 最终的顶点位置
			
 
				+        }
			
 
				+      `;
			
 
				+
			
 
				+      // 片段着色器源代码
			
 
				+      const fragShaderSource = `
			
 
				+        void main() {
			
 
				+          if (length(gl_PointCoord - vec2(0.5, 0.5)) > 0.49) discard;  // 如果超出圆形范围，则丢弃
			
 
				+          gl_FragColor = vec4(0.5, 0.7, 1.0, 1.0);  // 设置点的颜色
			
 
				+        }
			
 
				+      `;
			
 
				+
			
 
				+      // 初始化着色器程序
			
 
				+      const program = this.initShader(gl, vertexShaderSource, fragShaderSource);
			
 
				+
			
 
				+      // 获取着色器中属性和uniform的位置
			
 
				+      const aposLocation = gl.getAttribLocation(program, 'position');
			
 
				+      const scale = gl.getAttribLocation(program, 'scale');
			
 
				+      const modelViewMatrixLoc = gl.getUniformLocation(program, 'modelViewMatrix');
			
 
				+      const projectionMatrixLoc = gl.getUniformLocation(program, 'projectionMatrix');
			
 
				+
			
 
				+      // 粒子系统的参数
			
 
				+      const SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
			
 
				+      const numParticles = AMOUNTX * AMOUNTY;
			
 
				+
			
 
				+      // 存储粒子的位置和大小
			
 
				+      const positions = new Float32Array(numParticles * 3);
			
 
				+      const scales = new Float32Array(numParticles);
			
 
				+
			
 
				+      let i = 0, j = 0;
			
 
				+      // 初始化粒子的位置和大小
			
 
				+      for (let ix = 0; ix < AMOUNTX; ix++) {
			
 
				+        for (let iy = 0; iy < AMOUNTY; iy++) {
			
 
				+          positions[i] = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2); // x
			
 
				+          positions[i + 1] = 0; // y
			
 
				+          positions[i + 2] = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2); // z
			
 
				+          scales[j] = 1;  // 默认大小
			
 
				+          i += 3;
			
 
				+          j++;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      // 创建颜色缓冲区
			
 
				+      const colorBuffer = gl.createBuffer();
			
 
				+      gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
			
 
				+      gl.bufferData(gl.ARRAY_BUFFER, scales, gl.STATIC_DRAW);
			
 
				+      gl.vertexAttribPointer(scale, 1, gl.FLOAT, false, 0, 0);
			
 
				+      gl.enableVertexAttribArray(scale);
			
 
				+
			
 
				+      // 创建位置缓冲区
			
 
				+      const buffer = gl.createBuffer();
			
 
				+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
			
 
				+      gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
			
 
				+      gl.vertexAttribPointer(aposLocation, 3, gl.FLOAT, false, 0, 0);
			
 
				+      gl.enableVertexAttribArray(aposLocation);
			
 
				+
			
 
				+      // 开启深度测试
			
 
				+      gl.enable(gl.DEPTH_TEST);
			
 
				+
			
 
				+      // 初始化相机
			
 
				+      const width = window.innerWidth;
			
 
				+      const height = window.innerHeight;
			
 
				+      const camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
			
 
				+      camera.position.set(944, 206, -262);  // 设置相机位置
			
 
				+      camera.lookAt(new THREE.Vector3(0, 0, 0));  // 设置相机朝向
			
 
				+      camera.updateProjectionMatrix();  // 更新相机的投影矩阵
			
 
				+      camera.updateMatrixWorld(true);  // 更新相机的世界矩阵
			
 
				+
			
 
				+      // 将相机的投影矩阵传递给WebGL
			
 
				+      const mat4 = new THREE.Matrix4();
			
 
				+      mat4.copy(camera.projectionMatrix);
			
 
				+      const mxArr = new Float32Array(mat4.elements);
			
 
				+      gl.uniformMatrix4fv(projectionMatrixLoc, false, mxArr);
			
 
				+
			
 
				+      // 将相机的反向矩阵传递给WebGL
			
 
				+      const mat4y = new THREE.Matrix4();
			
 
				+      mat4y.copy(camera.matrixWorldInverse);
			
 
				+      const myArr = new Float32Array(mat4y.elements);
			
 
				+      gl.uniformMatrix4fv(modelViewMatrixLoc, false, myArr);
			
 
				+
			
 
				+      let count = 0;
			
 
				+
			
 
				+      // 动画绘制函数
			
 
				+      const draw = () => {
			
 
				+        // 根据鼠标位置更新相机的位置
			
 
				+        camera.position.x += (this.mouseX - camera.position.x) * 0.01;
			
 
				+        camera.updateMatrixWorld(true);  // 更新相机世界矩阵
			
 
				+        mat4y.copy(camera.matrixWorldInverse);  // 获取更新后的相机反向矩阵
			
 
				+        const myArr = new Float32Array(mat4y.elements);
			
 
				+        gl.uniformMatrix4fv(modelViewMatrixLoc, false, myArr);  // 传递新的矩阵给WebGL
			
 
				+
			
 
				+        // 更新粒子的位置和大小
			
 
				+        let i = 0, j = 0;
			
 
				+        for (let ix = 0; ix < AMOUNTX; ix++) {
			
 
				+          for (let iy = 0; iy < AMOUNTY; iy++) {
			
 
				+            positions[i + 1] = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
			
 
				+            scales[j] = (Math.sin((ix + count) * 0.3) + 1.3) * 8 + (Math.sin((iy + count) * 0.5) + 1.3) * 8;
			
 
				+            i += 3;
			
 
				+            j++;
			
 
				+          }
			
 
				+        }
			
 
				+        count += 0.1;
			
 
				+
			
 
				+        // 更新缓冲区的数据
			
 
				+        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
			
 
				+        gl.bufferData(gl.ARRAY_BUFFER, scales, gl.STATIC_DRAW);
			
 
				+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
			
 
				+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
			
 
				+
			
 
				+        requestAnimationFrame(draw);  // 请求下一帧绘制
			
 
				+        gl.drawArrays(gl.POINTS, 0, 2500);  // 绘制粒子
			
 
				+      };
			
 
				+
			
 
				+      draw();  // 启动绘制
			
 
				+
			
 
				+      // 监听鼠标和触摸事件
			
 
				+      document.addEventListener('mousemove', this.onDocumentMouseMove, false);
			
 
				+      document.addEventListener('touchstart', this.onDocumentTouchStart, false);
			
 
				+      document.addEventListener('touchmove', this.onDocumentTouchMove, false);
			
 
				+
			
 
				+      // 监听窗口大小变化，更新画布和相机的投影矩阵
			
 
				+      window.onresize = () => {
			
 
				+        canvas.width = window.innerWidth;
			
 
				+        canvas.height = window.innerHeight;
			
 
				+        gl.viewport(0, 0, window.innerWidth, window.innerHeight);
			
 
				+        camera.aspect = window.innerWidth / window.innerHeight;
			
 
				+        camera.updateProjectionMatrix();
			
 
				+        mat4.copy(camera.projectionMatrix);
			
 
				+        const mxArr = new Float32Array(mat4.elements);
			
 
				+        gl.uniformMatrix4fv(projectionMatrixLoc, false, mxArr);
			
 
				+      };
			
 
				+    },
			
 
				+
			
 
				+    // 初始化着色器的方法
			
 
				+    initShader(gl, vertexShaderSource, fragmentShaderSource) {
			
 
				+      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
			
 
				+      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
			
 
				+      gl.shaderSource(vertexShader, vertexShaderSource);
			
 
				+      gl.shaderSource(fragmentShader, fragmentShaderSource);
			
 
				+      gl.compileShader(vertexShader);
			
 
				+      gl.compileShader(fragmentShader);
			
 
				+      const program = gl.createProgram();
			
 
				+      gl.attachShader(program, vertexShader);
			
 
				+      gl.attachShader(program, fragmentShader);
			
 
				+      gl.linkProgram(program);
			
 
				+      gl.useProgram(program);
			
 
				+      return program;
			
 
				+    },
			
 
				+
			
 
				+    // 鼠标移动事件处理
			
 
				+    onDocumentMouseMove(event) {
			
 
				+      this.mouseX = event.clientX - window.innerWidth / 2;
			
 
				+      this.mouseY = event.clientY - window.innerHeight / 2;
			
 
				+      
			
 
				+    },
			
 
				+
			
 
				+    // 触摸开始事件处理
			
 
				+    onDocumentTouchStart(event) {
			
 
				+      if (event.touches.length === 1) {
			
 
				+        event.preventDefault();
			
 
				+        this.mouseX = event.touches[0].pageX - window.innerWidth / 2;
			
 
				+        this.mouseY = event.touches[0].pageY - window.innerHeight / 2;
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 触摸移动事件处理
			
 
				+    onDocumentTouchMove(event) {
			
 
				+      if (event.touches.length === 1) {
			
 
				+        event.preventDefault();
			
 
				+        this.mouseX = event.touches[0].pageX - window.innerWidth / 2;
			
 
				+        this.mouseY = event.touches[0].pageY - window.innerHeight / 2;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+body {
			
 
				+  padding: 0;
			
 
				+  margin: 0;
			
 
				+  background-color: transparent;
			
 
				+  font-family: "微软雅黑";
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.webgl {
			
 
				+  position: absolute;
			
 
				+  bottom: 0;
			
 
				+  left: 0;
			
 
				+  /* height: 100%; */
			
 
				+  background-color: transparent;
			
 
				+  width: 100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/ChangeBranch/index.vue
+++ b/src/components/ChangeBranch/index.vue
@@ -0,0 +1,97 @@
 
				+<template>
			
 
				+    <a-drawer :visible="props.visible" class="drawer" width="520px" v-if="status" @cancel="closeChangeBranch"
			
 
				+    placement="left" :footer="false">
			
 
				+    <template #title><icon-swap /> 切换分支</template>
			
 
				+    <a-list hoverable>
			
 
				+        <a-list-item v-for="(item, index) in props.status.branches" :key="index">
			
 
				+            <div class="branch-list">
			
 
				+                <div class="icon">
			
 
				+                    <icon-branch :size="25" />
			
 
				+                </div>
			
 
				+                <div class="info">
			
 
				+                    <span class="title">
			
 
				+                        {{ item.name }}
			
 
				+                    </span>
			
 
				+                    <span class="label">
			
 
				+                        <a-tag size="small">{{ item.commit }}</a-tag>
			
 
				+                        {{ item.label }}
			
 
				+                    </span>
			
 
				+                </div>
			
 
				+                <div class="button">
			
 
				+                    <a-button type="primary" size="small" v-if="item.name !== status.status.current"
			
 
				+                        @click="ChangeBranch(item.name)">切换</a-button>
			
 
				+                    <a-button type="text" size="small" v-else>当前</a-button>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </a-list-item>
			
 
				+    </a-list>
			
 
				+</a-drawer>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { Notification, Message } from '@arco-design/web-vue'
			
 
				+import { useRepoStore } from '@/store'
			
 
				+import { eventBus } from '@/utils/eventBus'
			
 
				+
			
 
				+const repoStore = useRepoStore()
			
 
				+const props = defineProps({
			
 
				+    id: {
			
 
				+        type: Number
			
 
				+    },
			
 
				+    visible: {
			
 
				+        type: Boolean,
			
 
				+        default: false
			
 
				+    },
			
 
				+    status: {
			
 
				+        type: Object
			
 
				+    }
			
 
				+})
			
 
				+
			
 
				+const emit = defineEmits(['changeBegin', 'changeFail', 'close'])
			
 
				+
			
 
				+const ChangeBranch = async (branch) => {
			
 
				+    try {
			
 
				+        emit('changeBegin')
			
 
				+        emit('close')
			
 
				+        await repoStore.ChangeBranch(props.id, branch )
			
 
				+        Message.success(`已切换至分支 ${branch}`)
			
 
				+        eventBus.emit('changeOK')
			
 
				+    } catch (error) {
			
 
				+        console.error(error)
			
 
				+        Notification.error({
			
 
				+            title: '切换仓库分支失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+        emit('changeFail')
			
 
				+    } 
			
 
				+}
			
 
				+
			
 
				+const closeChangeBranch = () => {
			
 
				+    emit('close')
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.branch-list {
			
 
				+    display: flex;
			
 
				+    min-height: 60px;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .info {
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        margin-left: 15px;
			
 
				+        margin-right: 15px;
			
 
				+
			
 
				+
			
 
				+        .title {
			
 
				+            font-size: 1.3em;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .button {
			
 
				+        margin-left: auto;
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Chart/index.vue
+++ b/src/components/Chart/index.vue
@@ -0,0 +1,40 @@
 
				+<template>
			
 
				+  <VCharts
			
 
				+    v-if="renderChart"
			
 
				+    :option="options"
			
 
				+    :autoresize="autoResize"
			
 
				+    :style="{ width, height }"
			
 
				+  />
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+  import { ref, nextTick } from 'vue'
			
 
				+  import VCharts from 'vue-echarts'
			
 
				+
			
 
				+  defineProps({
			
 
				+    options: {
			
 
				+      type: Object,
			
 
				+      default() {
			
 
				+        return {};
			
 
				+      },
			
 
				+    },
			
 
				+    autoResize: {
			
 
				+      type: Boolean,
			
 
				+      default: true,
			
 
				+    },
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: '100%',
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: '100%',
			
 
				+    },
			
 
				+  })
			
 
				+  const renderChart = ref(false)
			
 
				+  nextTick(() => {
			
 
				+    renderChart.value = true
			
 
				+  })
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less"></style>
			
--- a/src/components/CodeBlock/index.vue
+++ b/src/components/CodeBlock/index.vue
@@ -0,0 +1,113 @@
 
				+<template>
			
 
				+    <div class="code-container">
			
 
				+        <div class="copy" v-if="!copied" @click="copyCode">复制</div>
			
 
				+        <div class="copy" v-else><icon-check-circle /> 复制成功！</div>
			
 
				+        <div class="line">
			
 
				+            <span class="line-number" v-for="num in line">{{ num + props.startLine - 1 }}</span>
			
 
				+        </div>
			
 
				+        <highlightjs :code="code" class="code" />
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, computed, onMounted } from 'vue'
			
 
				+import hljsVuePlugin from '@highlightjs/vue-plugin'
			
 
				+// import { useThemeStore } from '@/store'
			
 
				+import 'highlight.js/lib/common'
			
 
				+import 'highlight.js/styles/atom-one-light.css'
			
 
				+
			
 
				+// const themeStore = useThemeStore()
			
 
				+const props = defineProps({
			
 
				+    code: {
			
 
				+        type: String,
			
 
				+        required: true
			
 
				+    },
			
 
				+    startLine: {
			
 
				+        type: Number,
			
 
				+        default: 1
			
 
				+    }
			
 
				+})
			
 
				+const copied = ref(false)
			
 
				+
			
 
				+const highlightjs = hljsVuePlugin.component
			
 
				+const line = computed(() => {
			
 
				+    const lines = props.code.split('\n')
			
 
				+    if (lines[lines.length - 1] == '')
			
 
				+        return lines.length - 1
			
 
				+    return lines.length
			
 
				+})
			
 
				+
			
 
				+function copyCode() {
			
 
				+  navigator.clipboard.writeText(props.code).then(() => {
			
 
				+    copied.value = true
			
 
				+    setTimeout(() => {
			
 
				+      copied.value = false
			
 
				+    }, 2000)
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// function loadThemeCSS(theme) {
			
 
				+//     import(`highlight.js/styles/${theme}.css`) 
			
 
				+// }
			
 
				+
			
 
				+// onMounted(() => {
			
 
				+//   loadThemeCSS(themeStore.getTheme())
			
 
				+// })
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.code-container {
			
 
				+    position: relative;
			
 
				+    display: flex;
			
 
				+    padding: 0;
			
 
				+    white-space: pre;
			
 
				+    overflow-x: auto;
			
 
				+
			
 
				+    .copy {
			
 
				+        position: absolute;
			
 
				+        right: 6px;
			
 
				+        top: 19px;
			
 
				+        background: #eee;
			
 
				+        padding: 4px 10px;
			
 
				+        font-size: 12px;
			
 
				+        border-radius: 4px;
			
 
				+        cursor: pointer;
			
 
				+        display: none;
			
 
				+        user-select: none;
			
 
				+    }
			
 
				+
			
 
				+    .code {
			
 
				+        line-height: 1.5em;
			
 
				+        margin-bottom: 10px;
			
 
				+        width: 100%;
			
 
				+        overflow-x: auto;
			
 
				+    }
			
 
				+
			
 
				+    .line {
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        line-height: 1.5em;
			
 
				+        background-color: #f0f0f0;
			
 
				+        margin-bottom: 10px;
			
 
				+        margin-top: 15px;
			
 
				+        padding-top: 15px;
			
 
				+
			
 
				+        .line-number {
			
 
				+            user-select: none;
			
 
				+            display: inline-block;
			
 
				+            min-width: 35px;
			
 
				+            color: #888;
			
 
				+            text-align: center;
			
 
				+            font-family: 'Fira Code', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.code-container:hover {
			
 
				+    .copy {
			
 
				+        display: block;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@@ -0,0 +1,25 @@
 
				+<template>
			
 
				+    <div class="footer">
			
 
				+        <span>© {{ new Date().getFullYear() }} CTBU_RunForge</span>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+.footer {
			
 
				+    cursor: pointer;
			
 
				+    position: absolute;
			
 
				+    bottom: 15px;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    color: #777;
			
 
				+    font-size: 12px;
			
 
				+    display: flex;
			
 
				+    min-width: 300px;
			
 
				+    justify-content: center;
			
 
				+    gap: 10px;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+    color: #777;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -0,0 +1,107 @@
 
				+<template>
			
 
				+    <div class="root">
			
 
				+        <a-menu mode="horizontal" class="menu" :selected-keys="['99']">
			
 
				+            <a-menu-item key="0"
			
 
				+                :style="{ cursor: 'pointer', padding: 0, marginRight: '650px', background: 'transparent', color: props.color }"
			
 
				+                disabled>
			
 
				+                <div class="logo" @click="$router.push('/')">
			
 
				+                    <img alt="RunForge" src="/logo.svg" height="40">
			
 
				+                    <span class="title">RunForge</span>
			
 
				+                </div>
			
 
				+            </a-menu-item>
			
 
				+
			
 
				+            <a-menu-item key="4" :style="{ background: 'transparent', color: props.color }" v-if="!user"
			
 
				+                @click="$router.push('/login')">
			
 
				+                用户登录
			
 
				+            </a-menu-item>
			
 
				+            <a-sub-menu key="5" :style="{ background: 'transparent', color: props.color }" v-else>
			
 
				+                <template #expand-icon-down></template>
			
 
				+                <template #title>
			
 
				+                    <div class="userinfo">
			
 
				+                        <a-avatar :size="30"><img alt="avatar" :src="user.avatar" /></a-avatar>
			
 
				+                        <span>{{ user.username }}</span>
			
 
				+                    </div>
			
 
				+                </template>
			
 
				+                <a-menu-item key="5_0" @click="$router.push('/user')"><icon-user /> 个人中心</a-menu-item>
			
 
				+                <a-menu-item key="5_1" @click="logout"><icon-export /> 退出登录</a-menu-item>
			
 
				+            </a-sub-menu>
			
 
				+        </a-menu>
			
 
				+    </div>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { ref } from 'vue'
			
 
				+import { Message, Modal } from '@arco-design/web-vue'
			
 
				+
			
 
				+const props = defineProps({
			
 
				+    color: {
			
 
				+        type: String,
			
 
				+        default: 'black'
			
 
				+    }
			
 
				+})
			
 
				+
			
 
				+const user = ref('')
			
 
				+const getuser = async () => {
			
 
				+    const userStore = useUserStore()
			
 
				+    let userInfo = await userStore.getInfo()
			
 
				+    if (userInfo?.avatar && userInfo?.username && userInfo?.uuid && userInfo?.session)
			
 
				+        user.value = userInfo
			
 
				+}
			
 
				+
			
 
				+const logout = () => {
			
 
				+    Modal.confirm({
			
 
				+        title: '退出登录',
			
 
				+        content: '您即将退出登录，是否继续？',
			
 
				+        onOk: () => {
			
 
				+            const userStore = useUserStore()
			
 
				+            userStore.logout()
			
 
				+            Message.success('退出成功!')
			
 
				+            setTimeout(() => { window.location.reload() }, 1000)
			
 
				+        },
			
 
				+        onCancel: () => {
			
 
				+
			
 
				+        }
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+getuser()
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.root {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width: 80%;
			
 
				+    min-width: 1280px;
			
 
				+    z-index: 100;
			
 
				+    user-select: none;
			
 
				+}
			
 
				+
			
 
				+.menu {
			
 
				+    width: 100%;
			
 
				+    background: transparent;
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+    display: flex;
			
 
				+}
			
 
				+
			
 
				+.logo span {
			
 
				+    font-size: 1.5em;
			
 
				+    margin: 5px 8px;
			
 
				+}
			
 
				+
			
 
				+.userinfo {
			
 
				+    margin-top: -15px;
			
 
				+    transform: translateY(23px);
			
 
				+}
			
 
				+
			
 
				+.userinfo span {
			
 
				+    margin-left: 7px;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Map/MapContainer.vue
+++ b/src/components/Map/MapContainer.vue
@@ -0,0 +1,122 @@
 
				+<template>
			
 
				+  <div id="container"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { onMounted, onUnmounted } from "vue"
			
 
				+import AMapLoader from "@amap/amap-jsapi-loader"
			
 
				+
			
 
				+let props = defineProps({
			
 
				+  pathData: {
			
 
				+    type: Array,
			
 
				+    default: () => ([])
			
 
				+  },
			
 
				+  point_list: {
			
 
				+    type: Array,
			
 
				+    default: () => ([])
			
 
				+  },
			
 
				+  threeD: {
			
 
				+    type: Boolean,
			
 
				+    default: false
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+let map = null
			
 
				+
			
 
				+onMounted(() => {
			
 
				+  AMapLoader.load({
			
 
				+    key: "d1f123693def8a412c976184daa4b60e",
			
 
				+    version: "2.0",
			
 
				+  })
			
 
				+    .then((AMap) => {
			
 
				+      map = new AMap.Map("container", {
			
 
				+        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
			
 
				+        viewMode: props.threeD ? '3D' : '2D', //地图模式
			
 
				+        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
			
 
				+        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
			
 
				+        zoom: 17.5, //初始化地图层级
			
 
				+        rotation: -15, //初始地图顺时针旋转的角度
			
 
				+        zooms: [3, 20], //地图显示的缩放级别范围
			
 
				+        center: props.pathData?.length > 0 ? props.pathData[0] : [106.5799475868821, 29.504864472181577],
			
 
				+      })
			
 
				+
			
 
				+      // 添加折线
			
 
				+      if (props.pathData?.length > 0) {
			
 
				+        let polyline = new AMap.Polyline({
			
 
				+          path: props.pathData,
			
 
				+          strokeWeight: 2, //线条宽度
			
 
				+          strokeColor: "red", //线条颜色
			
 
				+          lineJoin: "round", //折线拐点连接处样式
			
 
				+        })
			
 
				+        map.add(polyline)
			
 
				+
			
 
				+        const beginMarker = new AMap.Marker({
			
 
				+          position: props.pathData[0],
			
 
				+          offset: new AMap.Pixel(-24, -48),
			
 
				+          icon: "/mark/begin.png",
			
 
				+          title: "起始点"
			
 
				+        })
			
 
				+        const endMarker = new AMap.Marker({
			
 
				+          position: props.pathData[props.pathData.length - 1],
			
 
				+          offset: new AMap.Pixel(-24, -48),
			
 
				+          icon: "/mark/end.png",
			
 
				+          title: "终点"
			
 
				+        })
			
 
				+        map.add([beginMarker, endMarker])
			
 
				+      }
			
 
				+
			
 
				+      // 添加打卡点
			
 
				+      console.log(props.point_list)
			
 
				+      if (props.point_list?.length > 0) {
			
 
				+        props.point_list.forEach((point, index) => {
			
 
				+          console.log(point)
			
 
				+          const marker = new AMap.Marker({
			
 
				+            position: [point.longtitude, point.latitude],
			
 
				+            offset: new AMap.Pixel(-24, -48),
			
 
				+            icon: "/mark/daka.png",
			
 
				+            title: `打卡点${index + 1}`
			
 
				+          })
			
 
				+          console.log('添加点')
			
 
				+          map.add(marker)
			
 
				+        })
			
 
				+      }
			
 
				+
			
 
				+      AMap.plugin(['AMap.ControlBar', "AMap.ToolBar", "AMap.Scale"], function () {
			
 
				+        let controlBar = new AMap.ControlBar({ //控制地图旋转插件
			
 
				+          position: {
			
 
				+            right: '10px',
			
 
				+            top: '10px'
			
 
				+          }
			
 
				+        })
			
 
				+        map.addControl(controlBar)
			
 
				+        let toolbar = new AMap.ToolBar()
			
 
				+        map.addControl(toolbar)
			
 
				+        let scale = new AMap.Scale()
			
 
				+        map.addControl(scale)
			
 
				+      })
			
 
				+
			
 
				+
			
 
				+    })
			
 
				+    .catch((e) => {
			
 
				+      console.log(e)
			
 
				+    })
			
 
				+
			
 
				+})
			
 
				+
			
 
				+onUnmounted(() => {
			
 
				+  map?.destroy()
			
 
				+})
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+#container {
			
 
				+  width: 100%;
			
 
				+  height: 550px
			
 
				+}
			
 
				+
			
 
				+@media only screen and (max-width: 768px) {
			
 
				+  #container {
			
 
				+    height: 450px
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Menu/index.vue
+++ b/src/components/Menu/index.vue
@@ -0,0 +1,74 @@
 
				+<template>
			
 
				+    <div class="menu">
			
 
				+        <a-menu :style="{ width: '200px', height: '100%' }" v-model:selected-keys="selectedKey" auto-open-selected>
			
 
				+            <template v-for="menu in menuData" :key="menu.key">
			
 
				+                <a-sub-menu v-if="menu.children" :key="menu.key">
			
 
				+                    <template #icon>
			
 
				+                        <component :is="menu.icon"></component>
			
 
				+                    </template>
			
 
				+                    <template #title>{{ menu.label }}</template>
			
 
				+                    <a-menu-item v-for="child in menu.children" :key="child.key" :disabled="child.disabled"
			
 
				+                        @click="$router.push(child.key)">
			
 
				+                        {{ child.label }}
			
 
				+                    </a-menu-item>
			
 
				+                </a-sub-menu>
			
 
				+
			
 
				+                <a-menu-item v-else :key="menu.key" :disabled="menu.disabled" @click="$router.push(menu.key)">
			
 
				+                    <template #icon>
			
 
				+                        <component :is="menu.icon"></component>
			
 
				+                    </template>
			
 
				+                    {{ menu.label }}
			
 
				+                </a-menu-item>
			
 
				+            </template>
			
 
				+        </a-menu>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { computed } from 'vue'
			
 
				+import { routes } from '@/router'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { useRouteListener } from '@/utils/route-listener'
			
 
				+
			
 
				+const userStore = useUserStore()
			
 
				+const user = userStore.getInfo()
			
 
				+
			
 
				+const { selectedKey } = useRouteListener()
			
 
				+
			
 
				+// 判断用户是否有权限访问该路由
			
 
				+const hasPermission = (route) => {
			
 
				+    if (!route.meta || !route.meta.permission || !user.roles) return true
			
 
				+    return route.meta.permission.some((perm) => user.roles.includes(perm))
			
 
				+}
			
 
				+
			
 
				+// 递归构建菜单数据
			
 
				+const generateMenu = (routes, parentPath = '') => {
			
 
				+    return routes
			
 
				+        .filter((route) => hasPermission(route) && !(route.meta && route.meta.hideInMenu))
			
 
				+        .map((route) => {
			
 
				+            const fullPath = parentPath + route.path; // 确保子路由路径完整
			
 
				+            const menu = {
			
 
				+                key: fullPath,
			
 
				+                label: route.meta?.title || route.name,
			
 
				+                icon: route.meta?.icon || '',
			
 
				+                disabled: route.meta?.disabled || false
			
 
				+            }
			
 
				+
			
 
				+            if (route.children && route.children.length > 0) {
			
 
				+                menu.children = generateMenu(route.children, fullPath + '/')
			
 
				+            }
			
 
				+
			
 
				+            return menu
			
 
				+        })
			
 
				+}
			
 
				+
			
 
				+
			
 
				+const useMenuData = () => {
			
 
				+    const menuData = computed(() => {
			
 
				+        return generateMenu(routes)
			
 
				+    })
			
 
				+    return { menuData }
			
 
				+}
			
 
				+
			
 
				+const { menuData } = useMenuData()
			
 
				+</script>
			
--- a/src/components/Navbar/index.vue
+++ b/src/components/Navbar/index.vue
@@ -0,0 +1,140 @@
 
				+<template>
			
 
				+  <div class="navbar">
			
 
				+    <div class="left-side">
			
 
				+      <a-space style="cursor: pointer;" @click="$router.push('/')">
			
 
				+        <img alt="RunForge" src="/logo.svg" height="35">
			
 
				+        <a-typography-title :style="{ margin: 0, fontSize: '18px' }" :heading="5">
			
 
				+          RunForge
			
 
				+        </a-typography-title>
			
 
				+      </a-space>
			
 
				+    </div>
			
 
				+
			
 
				+    <ul class="right-side">
			
 
				+      <li>
			
 
				+        <a-tooltip content="首页">
			
 
				+          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="$router.push('/')">
			
 
				+            <template #icon>
			
 
				+              <icon-home />
			
 
				+            </template>
			
 
				+          </a-button>
			
 
				+        </a-tooltip>
			
 
				+      </li>
			
 
				+
			
 
				+
			
 
				+      <li>
			
 
				+        <a-dropdown trigger="hover">
			
 
				+          <a-avatar :size="32" :style="{ marginRight: '8px', cursor: 'pointer' }">
			
 
				+            <img alt="avatar" :src="avatar" />
			
 
				+          </a-avatar>
			
 
				+          <template #content>
			
 
				+            <a-doption>
			
 
				+              <a-space @click="$router.push('/user')">
			
 
				+                <icon-user />
			
 
				+                <span>
			
 
				+                  个人中心
			
 
				+                </span>
			
 
				+              </a-space>
			
 
				+            </a-doption>
			
 
				+            <a-doption>
			
 
				+              <a-space @click="handleLogout">
			
 
				+                <icon-export />
			
 
				+                <span>
			
 
				+                  退出登录
			
 
				+                </span>
			
 
				+              </a-space>
			
 
				+            </a-doption>
			
 
				+          </template>
			
 
				+        </a-dropdown>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { computed, ref } from 'vue'
			
 
				+import { Message, Modal } from '@arco-design/web-vue'
			
 
				+import { useUserStore } from '@/store'
			
 
				+
			
 
				+const userStore = useUserStore();
			
 
				+
			
 
				+const avatar = computed(() => {
			
 
				+  return userStore.avatar;
			
 
				+});
			
 
				+
			
 
				+const refBtn = ref()
			
 
				+const triggerBtn = ref()
			
 
				+
			
 
				+const handleLogout = () => {
			
 
				+  Modal.confirm({
			
 
				+    title: '退出登录',
			
 
				+    content: '您即将退出登录，是否继续？',
			
 
				+    onOk: () => {
			
 
				+      const userStore = useUserStore()
			
 
				+      userStore.logout()
			
 
				+      Message.success('退出成功!')
			
 
				+      setTimeout(() => { window.location.reload() }, 1000)
			
 
				+    },
			
 
				+    onCancel: () => {
			
 
				+
			
 
				+    }
			
 
				+  });
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.navbar {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  height: 100%;
			
 
				+  background-color: var(--color-bg-2);
			
 
				+  border-bottom: 1px solid var(--color-border);
			
 
				+  user-select: none;
			
 
				+}
			
 
				+
			
 
				+.left-side {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  padding-left: 20px;
			
 
				+}
			
 
				+
			
 
				+.center-side {
			
 
				+  flex: 1;
			
 
				+}
			
 
				+
			
 
				+.right-side {
			
 
				+  display: flex;
			
 
				+  padding-right: 30px;
			
 
				+  list-style: none;
			
 
				+
			
 
				+  :deep(.locale-select) {
			
 
				+    border-radius: 20px;
			
 
				+  }
			
 
				+
			
 
				+  li {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    padding: 0 10px;
			
 
				+  }
			
 
				+
			
 
				+  a {
			
 
				+    color: var(--color-text-1);
			
 
				+    text-decoration: none;
			
 
				+  }
			
 
				+
			
 
				+  .nav-btn {
			
 
				+    border-color: rgb(var(--gray-2));
			
 
				+    color: rgb(var(--gray-8));
			
 
				+    font-size: 16px;
			
 
				+  }
			
 
				+
			
 
				+  .trigger-btn,
			
 
				+  .ref-btn {
			
 
				+    position: absolute;
			
 
				+    bottom: 14px;
			
 
				+  }
			
 
				+
			
 
				+  .trigger-btn {
			
 
				+    margin-left: 14px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -0,0 +1,43 @@
 
				+import { use } from 'echarts/core'
			
 
				+import { CanvasRenderer } from 'echarts/renderers'
			
 
				+import { BarChart, LineChart, PieChart, RadarChart, HeatmapChart, GraphChart } from 'echarts/charts'
			
 
				+import {
			
 
				+  GridComponent,
			
 
				+  TooltipComponent,
			
 
				+  LegendComponent,
			
 
				+  DataZoomComponent,
			
 
				+  GraphicComponent,
			
 
				+  TitleComponent,
			
 
				+  CalendarComponent,
			
 
				+  VisualMapComponent,
			
 
				+  ToolboxComponent
			
 
				+} from 'echarts/components'
			
 
				+import Chart from './Chart/index.vue'
			
 
				+
			
 
				+import Breadcrumb from './Breadcrumb/index.vue'
			
 
				+
			
 
				+use([
			
 
				+  CanvasRenderer,
			
 
				+  BarChart,
			
 
				+  LineChart,
			
 
				+  PieChart,
			
 
				+  RadarChart,
			
 
				+  HeatmapChart,
			
 
				+  GraphChart,
			
 
				+  GridComponent,
			
 
				+  TooltipComponent,
			
 
				+  LegendComponent,
			
 
				+  DataZoomComponent,
			
 
				+  GraphicComponent,
			
 
				+  CalendarComponent,
			
 
				+  VisualMapComponent ,
			
 
				+  TitleComponent,
			
 
				+  ToolboxComponent
			
 
				+])
			
 
				+
			
 
				+export default {
			
 
				+  install(Vue) {
			
 
				+    Vue.component('Chart', Chart)
			
 
				+    Vue.component('Breadcrumb', Breadcrumb)
			
 
				+  },
			
 
				+}
			
--- a/src/hooks/chart-option.js
+++ b/src/hooks/chart-option.js
@@ -0,0 +1,10 @@
 
				+import { computed } from 'vue'
			
 
				+
			
 
				+export default function useChartOption(sourceOption) {
			
 
				+  const chartOption = computed(() => {
			
 
				+    return sourceOption()
			
 
				+  })
			
 
				+  return {
			
 
				+    chartOption
			
 
				+  }
			
 
				+}
			
--- a/src/layout/default-layout.vue
+++ b/src/layout/default-layout.vue
@@ -0,0 +1,181 @@
 
				+<template>
			
 
				+  <a-layout class="layout">
			
 
				+    <a-layout-header class="layout-navbar">
			
 
				+      <Navbar />
			
 
				+    </a-layout-header>
			
 
				+    <a-layout>
			
 
				+       <a-layout-sider class="layout-sider">
			
 
				+        <Menu class="menu-wrapper" />
			
 
				+      </a-layout-sider>
			
 
				+      <a-layout-content class="layout-content">
			
 
				+        <PageLayout style="margin-bottom: 30px;"/>
			
 
				+        <Footer />
			
 
				+      </a-layout-content>
			
 
				+    </a-layout>
			
 
				+
			
 
				+    <!-- <a-avatar class="aiButton" @click="chat = !chat">
			
 
				+      <img alt="avatar" src="@/assets/img/ai.png" />
			
 
				+    </a-avatar>
			
 
				+
			
 
				+    <AIChat :visible="chat"/> -->
			
 
				+  </a-layout>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { onMounted, onBeforeUnmount, ref,onUnmounted } from 'vue'
			
 
				+import { eventBus } from '@/utils/eventBus'
			
 
				+
			
 
				+import PageLayout from './page-layout.vue'
			
 
				+import Menu from '@/components/Menu/index.vue'
			
 
				+import Navbar from '@/components/Navbar/index.vue'
			
 
				+import Footer from '@/components/Footer/index.vue'
			
 
				+import AIChat from '@/components/AIChat/index.vue'
			
 
				+
			
 
				+const chat = ref(false)
			
 
				+
			
 
				+// 按钮拖动
			
 
				+let isDragging = false
			
 
				+let offsetX = 0
			
 
				+let offsetY = 0
			
 
				+let button = null
			
 
				+
			
 
				+function handleMouseDown(e) {
			
 
				+  isDragging = true
			
 
				+  const rect = button.getBoundingClientRect()
			
 
				+  offsetX = e.clientX - rect.left
			
 
				+  offsetY = e.clientY - rect.top
			
 
				+
			
 
				+  document.addEventListener('mousemove', handleMouseMove)
			
 
				+  document.addEventListener('mouseup', handleMouseUp)
			
 
				+}
			
 
				+
			
 
				+function handleMouseMove(e) {
			
 
				+  if (!isDragging) return
			
 
				+  const x = e.clientX - offsetX
			
 
				+  const y = e.clientY - offsetY
			
 
				+
			
 
				+  button.style.left = x + 'px'
			
 
				+  button.style.top = y + 'px'
			
 
				+  button.style.right = 'auto'
			
 
				+  button.style.bottom = 'auto'
			
 
				+}
			
 
				+
			
 
				+function handleMouseUp() {
			
 
				+  isDragging = false
			
 
				+  document.removeEventListener('mousemove', handleMouseMove)
			
 
				+  document.removeEventListener('mouseup', handleMouseUp)
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+  button = document.querySelector('.aiButton')
			
 
				+  if (button) {
			
 
				+    button.addEventListener('mousedown', handleMouseDown)
			
 
				+  }
			
 
				+  eventBus.on('closeAI',  ()=>{chat.value = false})
			
 
				+})
			
 
				+
			
 
				+onBeforeUnmount(() => {
			
 
				+  if (button) {
			
 
				+    button.removeEventListener('mousedown', handleMouseDown)
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+onUnmounted(() => {
			
 
				+    eventBus.off('closeAI', ()=>{chat.value = false})
			
 
				+})
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+@nav-size-height: 60px;
			
 
				+
			
 
				+.layout {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+.layout-navbar {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  z-index: 100;
			
 
				+  width: 100%;
			
 
				+  height: @nav-size-height;
			
 
				+}
			
 
				+
			
 
				+.layout-sider {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  z-index: 99;
			
 
				+  height: 100%;
			
 
				+  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
			
 
				+
			
 
				+  &::after {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    right: -1px;
			
 
				+    display: block;
			
 
				+    width: 1px;
			
 
				+    height: 100%;
			
 
				+    background-color: var(--color-border);
			
 
				+    content: '';
			
 
				+  }
			
 
				+
			
 
				+  > :deep(.arco-layout-sider-children) {
			
 
				+    overflow-y: hidden;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.menu-wrapper {
			
 
				+  user-select: none; 
			
 
				+  margin-top: 60px;
			
 
				+  overflow: auto;
			
 
				+  overflow-x: hidden;
			
 
				+
			
 
				+  :deep(.arco-menu) {
			
 
				+    ::-webkit-scrollbar {
			
 
				+      width: 12px;
			
 
				+      height: 4px;
			
 
				+    }
			
 
				+
			
 
				+    ::-webkit-scrollbar-thumb {
			
 
				+      border: 4px solid transparent;
			
 
				+      background-clip: padding-box;
			
 
				+      border-radius: 7px;
			
 
				+      background-color: var(--color-text-4);
			
 
				+    }
			
 
				+
			
 
				+    ::-webkit-scrollbar-thumb:hover {
			
 
				+      background-color: var(--color-text-3);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.layout-content {
			
 
				+  position: absolute;
			
 
				+  top: @nav-size-height;
			
 
				+  left: 200px;
			
 
				+  width: calc(100% - 200px);
			
 
				+  min-height: calc(100% - @nav-size-height);
			
 
				+  overflow-y: auto;
			
 
				+  background-color: var(--color-fill-2);
			
 
				+  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
			
 
				+}
			
 
				+
			
 
				+.aiButton {
			
 
				+  position: fixed;
			
 
				+  bottom: 100px;
			
 
				+  right: 60px;
			
 
				+  z-index: 200;
			
 
				+  width: 55px;
			
 
				+  height: 55px;
			
 
				+  background-color: #fff;
			
 
				+  cursor: pointer;
			
 
				+  transition: transform 0.3s ease;
			
 
				+
			
 
				+  &:hover {
			
 
				+    transform: scale(1.15);
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/layout/page-layout.vue
+++ b/src/layout/page-layout.vue
@@ -0,0 +1,10 @@
 
				+<template>
			
 
				+  <div class="root">
			
 
				+    <router-view />
			
 
				+  </div>
			
 
				+  
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,13 @@
 
				+import { createApp } from 'vue'
			
 
				+import './style.css'
			
 
				+
			
 
				+import ArcoVueIcon from '@arco-design/web-vue/es/icon'
			
 
				+
			
 
				+import App from './App.vue'
			
 
				+import { router } from './router/'
			
 
				+import { createPinia } from 'pinia'
			
 
				+import globalComponents from '@/components'
			
 
				+import DataVVue3 from '@kjgl77/datav-vue3'
			
 
				+
			
 
				+const app = createApp(App)
			
 
				+app.use(ArcoVueIcon).use(router).use(createPinia()).use(globalComponents).use(DataVVue3).mount('#app')
			
--- a/src/pages/Login/Login.vue
+++ b/src/pages/Login/Login.vue
@@ -0,0 +1,38 @@
 
				+<template>
			
 
				+    <div class="root">
			
 
				+        <Header />
			
 
				+        <Container />
			
 
				+        <CanvasBackend />
			
 
				+        <Footer />
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import CanvasBackend from '@/components/CanvasBackend/index.vue'
			
 
				+import Header from '@/components/Header/index.vue'
			
 
				+import Container from './components/container.vue'
			
 
				+import Footer from '@/components/Footer/index.vue'
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.root {
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+.center {
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    width: 800px;
			
 
				+    height: 300px;
			
 
				+    z-index: 2;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    pointer-events: auto; /* center 可以接收鼠标事件 */
			
 
				+}
			
 
				+
			
 
				+.button {
			
 
				+    position: absolute;
			
 
				+    z-index: 101;
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/src/pages/Login/components/container.vue
+++ b/src/pages/Login/components/container.vue
@@ -0,0 +1,79 @@
 
				+<template>
			
 
				+    <div class='center'>
			
 
				+        <login v-if="current === 'login'" @changeMode="changeMode" />
			
 
				+        <register v-else-if="current === 'register'" @changeMode="changeMode" />
			
 
				+        <uni-login v-else-if="current === 'uniLogin'" @changeMode="changeMode"></uni-login>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import login from './login.vue'
			
 
				+import register from './register.vue'
			
 
				+import uniLogin from '../uniLogin/uniLogin.vue'
			
 
				+import { ref, onMounted } from 'vue'
			
 
				+import { useRoute } from 'vue-router'
			
 
				+
			
 
				+const route = useRoute()
			
 
				+
			
 
				+let current = ref('uniLogin')
			
 
				+
			
 
				+const changeMode = (mode) => {
			
 
				+    document.querySelector('.center').className = `center ${mode}`
			
 
				+    current.value = mode
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+    if(route.query.mode) {
			
 
				+        changeMode(route.query.mode)
			
 
				+    }
			
 
				+})
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.center {
			
 
				+    background-image: linear-gradient(to bottom,
			
 
				+            rgba(235, 242, 255, 0.7),
			
 
				+            rgba(210, 230, 255, 0.5),
			
 
				+            rgba(200, 225, 255, 0.3),
			
 
				+            rgba(245, 255, 255, 0.1));
			
 
				+
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    /* background-color: rgba(190, 218, 255, 0.2); */
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    border-radius: 10px;
			
 
				+    padding: 110px 10px;
			
 
				+}
			
 
				+
			
 
				+@keyframes registAnimation {
			
 
				+    0% {
			
 
				+        padding: 140px 10px;
			
 
				+    }
			
 
				+
			
 
				+    100% {
			
 
				+        padding: 180px 10px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@keyframes loginAnimation {
			
 
				+    0% {
			
 
				+        padding: 180px 10px;
			
 
				+    }
			
 
				+
			
 
				+    100% {
			
 
				+        padding: 140px 10px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.register {
			
 
				+    animation: registAnimation 0.3s ease-in-out forwards;
			
 
				+}
			
 
				+
			
 
				+.login {
			
 
				+    animation: loginAnimation 0.5s ease-in-out forwards;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/Login/components/login.vue
+++ b/src/pages/Login/components/login.vue
@@ -0,0 +1,167 @@
 
				+<template>
			
 
				+    <div class="root">
			
 
				+        <div class="logo">
			
 
				+            <img alt="RunForge" src="/logo.svg" height="40">
			
 
				+            <span class="title">RunForge | 用户登录</span>
			
 
				+        </div>
			
 
				+
			
 
				+        <a-form size="large" :model="form" :rules="[]" class="form" @submit="handleSubmit">
			
 
				+            <a-form-item field="username" hide-label>
			
 
				+                <a-input placeholder="请输入用户名" allow-clear v-model="form.username">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-user />
			
 
				+                    </template>
			
 
				+                </a-input>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <a-form-item field="password" hide-label>
			
 
				+                <a-input-password placeholder="请输入密码" allow-clear v-model="form.password">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-lock />
			
 
				+                    </template>
			
 
				+                </a-input-password>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <a-form-item field="captcha" hide-label>
			
 
				+                <a-input placeholder="请输入验证码" allow-clear v-model="form.captcha">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-check-circle />
			
 
				+                    </template>
			
 
				+                    <template #append>
			
 
				+                        <img alt="!点我重试" :src="ImageCaptcha" class="captcha" @click="getCaptcha()">
			
 
				+                    </template>
			
 
				+                </a-input>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <div class="forgetpass">
			
 
				+                <a-button type="text" @click="emit('changeMode', 'uniLogin')">快捷登录</a-button>
			
 
				+                <a-button type="text" @click="emit('changeMode', 'register')">注册账号</a-button>
			
 
				+            </div>
			
 
				+
			
 
				+            <a-button :style="{ marginTop: '15px' }" class="formitem" type="primary" html-type="submit"
			
 
				+                :loading="loading">登录</a-button>
			
 
				+        </a-form>
			
 
				+    </div>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { getImageCaptcha } from '@/api/login'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { ref, reactive } from 'vue'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { timeFix } from '@/utils/util'
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+
			
 
				+const route = useRoute()
			
 
				+const router = useRouter()
			
 
				+const emit = defineEmits(['changeMode'])
			
 
				+
			
 
				+const from = route.query.from
			
 
				+
			
 
				+const userStore = useUserStore()
			
 
				+
			
 
				+let CaptchaId = ref('')
			
 
				+let ImageCaptcha = ref('')
			
 
				+let loading = ref(false)
			
 
				+let form = reactive({
			
 
				+    username: '',
			
 
				+    password: '',
			
 
				+    captcha: ''
			
 
				+})
			
 
				+
			
 
				+const getCaptcha = async () => {
			
 
				+    try {
			
 
				+        const res = await getImageCaptcha()
			
 
				+        if (!res || res.code != 0)
			
 
				+            return requestFailed('获取图片验证码失败！' + res?.msg || '')
			
 
				+        ImageCaptcha.value = res.data.img
			
 
				+        CaptchaId.value = res.data.id
			
 
				+    } catch (error) {
			
 
				+        requestFailed('获取图片验证码失败！')
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+getCaptcha()
			
 
				+
			
 
				+const handleSubmit = async ({ values, errors }) => {
			
 
				+    if (!values.username || !values.password || !values.captcha)
			
 
				+        return requestFailed('请填写所有信息')
			
 
				+
			
 
				+    loading.value = true
			
 
				+    let data = { ...values, id: CaptchaId.value }
			
 
				+    data.password = btoa(data.password)
			
 
				+
			
 
				+    userStore.login(data)
			
 
				+        .then((res) => { loginSuccess(res) })
			
 
				+        .catch((err) => {
			
 
				+            getCaptcha()
			
 
				+            requestFailed(err.message)
			
 
				+        })
			
 
				+        .finally(() => {
			
 
				+            form.captcha = ''
			
 
				+            loading.value = false
			
 
				+        })
			
 
				+}
			
 
				+
			
 
				+const loginSuccess = (res) => {
			
 
				+    Notification.success({
			
 
				+        title: `${timeFix()}，${res.username}`,
			
 
				+        content: '欢迎回来！',
			
 
				+        duration: 2000
			
 
				+    })
			
 
				+    // setTimeout(() => { router.push(from || '/')}, 2000)
			
 
				+    router.push(from || '/')
			
 
				+}
			
 
				+
			
 
				+const requestFailed = (msg) => {
			
 
				+    Notification.error({
			
 
				+        title: '错误',
			
 
				+        content: msg || '请求出现错误，请稍后再试',
			
 
				+    })
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.root {
			
 
				+    display: flex;
			
 
				+    gap: 40px;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+}
			
 
				+
			
 
				+.form {
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+.formitem {
			
 
				+    width: 350px;
			
 
				+    min-height: 35px
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+    display: flex
			
 
				+}
			
 
				+
			
 
				+.logo .title {
			
 
				+    color: #3370FF;
			
 
				+    font-size: 1.8em;
			
 
				+    font-weight: bold;
			
 
				+    margin-left: 15px;
			
 
				+    font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
			
 
				+}
			
 
				+
			
 
				+.forgetpass {
			
 
				+    width: 100%;
			
 
				+    margin-top: -10px;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+}
			
 
				+
			
 
				+.captcha {
			
 
				+    max-height: 35px;
			
 
				+    margin-right: -10px;
			
 
				+
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/Login/components/register.vue
+++ b/src/pages/Login/components/register.vue
@@ -0,0 +1,236 @@
 
				+<template>
			
 
				+    <div class="root">
			
 
				+        <div class="logo">
			
 
				+            <img alt="RunForge" src="/logo.svg" height="40">
			
 
				+            <span class="title">RunForge | 用户注册</span>
			
 
				+        </div>
			
 
				+
			
 
				+        <a-form size="large" ref="formRef" :model="form" :rules="[]" class="form" @submit="handleSubmit">
			
 
				+            <a-form-item field="username" hide-label
			
 
				+                :rules="[{ required: true, message: '用户名不能为空' }, { minLength: 4, maxLength: 12, message: '用户名长度需在4~12位间' }]"
			
 
				+                :validate-trigger="['change']">
			
 
				+                <a-input placeholder="请输入用户名" allow-clear v-model="form.username">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-user />
			
 
				+                    </template>
			
 
				+                </a-input>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <a-form-item field="password" hide-label
			
 
				+                :rules="[{ required: true, message: '密码不能为空' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
			
 
				+                :validate-trigger="['change']">
			
 
				+                <a-input-password placeholder="请输入密码" allow-clear v-model="form.password">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-lock />
			
 
				+                    </template>
			
 
				+                </a-input-password>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <a-form-item field="password2" hide-label
			
 
				+                :rules="[{ required: true, message: '请再次输入密码' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
			
 
				+                :validate-trigger="['change']">
			
 
				+                <a-input-password placeholder="请再次输入密码" allow-clear v-model="form.password2">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-lock />
			
 
				+                    </template>
			
 
				+                </a-input-password>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <a-form-item field="email" hide-label :rules="[{ type: 'email', required: true, message: '请填写正确的邮箱地址' }]"
			
 
				+                :validate-trigger="['change']">
			
 
				+                <a-input placeholder="请输入邮箱" allow-clear v-model="form.email">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-email />
			
 
				+                    </template>
			
 
				+                </a-input>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+
			
 
				+            <a-form-item field="captcha" hide-label :rules="[{ length: 4, required: true, message: '请正确填写图片验证码' }]">
			
 
				+                <a-input placeholder="请输入图片验证码" allow-clear v-model="form.captcha">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-check-circle />
			
 
				+                    </template>
			
 
				+                    <template #append>
			
 
				+                        <img alt="!点我重试" :src="ImageCaptcha" class="captcha" @click="getCaptcha()">
			
 
				+                    </template>
			
 
				+                </a-input>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <a-form-item field="code" hide-label :rules="[{ length: 6, required: true, message: '请正确填写邮箱验证码' }]">
			
 
				+                <a-input placeholder="请输入邮箱验证码" allow-clear v-model="form.code">
			
 
				+                    <template #prefix>
			
 
				+                        <icon-code-square />
			
 
				+                    </template>
			
 
				+                    <template #append>
			
 
				+                        <a-button type="text" style="width: 80px" @click="SendEmail" :disabled="state.smsSendBtn">
			
 
				+                            <span v-if="!state.smsSendBtn">获取验证码</span>
			
 
				+                            <span v-else>{{ state.time }} s</span>
			
 
				+                        </a-button>
			
 
				+                    </template>
			
 
				+                </a-input>
			
 
				+            </a-form-item>
			
 
				+
			
 
				+            <a-button type="text" class="forgetpass" @click="emit('changeMode', 'login')">已有账号，去登录</a-button>
			
 
				+
			
 
				+            <a-button :style="{ marginTop: '15px' }" class="formitem" type="primary" html-type="submit"
			
 
				+                :loading="state.okButton">立即注册</a-button>
			
 
				+        </a-form>
			
 
				+    </div>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { getImageCaptcha, sendEmail, register } from '@/api/login'
			
 
				+import { Notification, Message } from '@arco-design/web-vue';
			
 
				+import { ref, reactive, defineEmits } from 'vue'
			
 
				+
			
 
				+const emit = defineEmits(['changeMode'])
			
 
				+
			
 
				+const formRef = ref(null)
			
 
				+let CaptchaId = ref('')
			
 
				+let ImageCaptcha = ref('')
			
 
				+let form = reactive({
			
 
				+    username: '',
			
 
				+    password: '',
			
 
				+    password2: '',
			
 
				+    email: '',
			
 
				+    code: '',
			
 
				+    captcha: ''
			
 
				+})
			
 
				+let state = reactive({
			
 
				+    smsSendBtn: false,
			
 
				+    time: 60,
			
 
				+    okButton: false
			
 
				+})
			
 
				+
			
 
				+const SendEmail = async () => {
			
 
				+    try {
			
 
				+        const v = await formRef.value.validateField(['email', 'captcha'])
			
 
				+        if (v) return
			
 
				+
			
 
				+        let email = form.email
			
 
				+        let text = form.captcha
			
 
				+
			
 
				+        state.smsSendBtn = true
			
 
				+        const interval = window.setInterval(() => {
			
 
				+            if (state.time-- <= 0) {
			
 
				+                state.time = 60
			
 
				+                state.smsSendBtn = false
			
 
				+                window.clearInterval(interval)
			
 
				+            }
			
 
				+        }, 1000)
			
 
				+
			
 
				+        Message.loading('验证码发送中..')
			
 
				+
			
 
				+        const res = await sendEmail({ email, text, id: CaptchaId.value, type: 'register' })
			
 
				+
			
 
				+        if (!res || res.code != 0) {
			
 
				+            state.time = 60
			
 
				+            state.smsSendBtn = false
			
 
				+            window.clearInterval(interval)
			
 
				+            getImageCaptcha()
			
 
				+            form.captcha = ''
			
 
				+
			
 
				+            if (res.code === -10501) {
			
 
				+                return Notification.error({
			
 
				+                    title: '验证码输入错误',
			
 
				+                    content: res?.msg || '请求出现错误，请稍后再试'
			
 
				+                })
			
 
				+            }
			
 
				+
			
 
				+            return Notification.error({
			
 
				+                title: '获取验证码失败',
			
 
				+                content: res?.msg || '请求出现错误，请稍后再试'
			
 
				+            })
			
 
				+        }
			
 
				+    } catch (error) {
			
 
				+        Message.error('验证码发送失败')
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const getCaptcha = async () => {
			
 
				+    try {
			
 
				+        const res = await getImageCaptcha()
			
 
				+        if (!res || res.code != 0)
			
 
				+            return requestFailed('获取图片验证码失败！' + res?.msg || '')
			
 
				+        ImageCaptcha.value = res.data.img
			
 
				+        CaptchaId.value = res.data.id
			
 
				+    } catch (error) {
			
 
				+        requestFailed('获取图片验证码失败！')
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+getCaptcha()
			
 
				+
			
 
				+const handleSubmit = async ({ values, errors }) => {
			
 
				+    try {
			
 
				+        state.okButton = true
			
 
				+        const v = await formRef.value.validate()
			
 
				+        if (v) return
			
 
				+        let data = { ...values }
			
 
				+        if (data.password !== data.password2) return Message.error('请确保两次输入的密码一致！')
			
 
				+
			
 
				+        data.password = btoa(data.password)
			
 
				+        const res = await register(data)
			
 
				+        if(!res || res.code !== 0)
			
 
				+            return requestFailed(res?.msg)
			
 
				+        Message.success('注册成功！请登录')
			
 
				+        emit('changeMode', 'login')
			
 
				+    } catch (error) {
			
 
				+        requestFailed(error.message)
			
 
				+    } finally {
			
 
				+        state.okButton = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const requestFailed = (msg) => {
			
 
				+    Notification.error({
			
 
				+        title: '错误',
			
 
				+        content: msg || '请求出现错误，请稍后再试',
			
 
				+    })
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.root {
			
 
				+    display: flex;
			
 
				+    gap: 40px;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    margin: 20px
			
 
				+}
			
 
				+
			
 
				+.form {
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+.formitem {
			
 
				+    width: 350px;
			
 
				+    min-height: 35px
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+    display: flex
			
 
				+}
			
 
				+
			
 
				+.logo .title {
			
 
				+    color: #3370FF;
			
 
				+    font-size: 1.8em;
			
 
				+    font-weight: bold;
			
 
				+    margin-left: 15px;
			
 
				+    font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
			
 
				+}
			
 
				+
			
 
				+.forgetpass {
			
 
				+    width: 130px;
			
 
				+    margin-top: -10px;
			
 
				+}
			
 
				+
			
 
				+.captcha {
			
 
				+    max-height: 35px;
			
 
				+    margin-right: -10px;
			
 
				+
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/Login/uniLogin/uniLogin.vue
+++ b/src/pages/Login/uniLogin/uniLogin.vue
@@ -0,0 +1,183 @@
 
				+<template>
			
 
				+    <div class="root">
			
 
				+        <div class="logo">
			
 
				+            <img alt="RunForge" src="/logo.svg" height="40">
			
 
				+            <span class="title">RunForge | 快捷登录</span>
			
 
				+        </div>
			
 
				+
			
 
				+        <a-form size="large" :model="form" :rules="[]" class="form" @submit="handleSubmit">
			
 
				+            <div class="uniLoginButton">
			
 
				+                <div class="button">
			
 
				+                    <a-tooltip content="QQ登录" mini>
			
 
				+                        <a-avatar :size="64" :style="{ backgroundColor: '#3370ff' }"
			
 
				+                            @click="GetLoginUrl('qq')"><icon-qq /></a-avatar>
			
 
				+                    </a-tooltip>
			
 
				+                </div>
			
 
				+                <div class="button">
			
 
				+                    <a-tooltip content="微信登录" mini>
			
 
				+                        <a-avatar :size="64" :style="{ backgroundColor: '#3370ff' }"
			
 
				+                            @click="GetLoginUrl('wx')"><icon-wechat /></a-avatar>
			
 
				+                    </a-tooltip>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="tip">未注册的账号登录后将自动注册<br>不同登录方式的账号资产和权限互不共享</div>
			
 
				+            <a-button type="text" class="forgetpass" @click="emit('changeMode', 'login')">账号密码登录</a-button>
			
 
				+        </a-form>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="loading" v-if="loading">
			
 
				+        <div class="loadingTip">
			
 
				+            <icon-loading :size="32" />
			
 
				+            <div class="text">努力加载中</div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { getLoginUrl } from '@/api/login'
			
 
				+import { timeFix } from '@/utils/util'
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+import { ref, onMounted } from 'vue'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+
			
 
				+const userStore = useUserStore()
			
 
				+
			
 
				+const loading = ref(false)
			
 
				+const route = useRoute()
			
 
				+const router = useRouter()
			
 
				+const emit = defineEmits(['changeMode', 'changeLoading'])
			
 
				+
			
 
				+const from = route.query.from
			
 
				+
			
 
				+const GetLoginUrl = async (type) => {
			
 
				+    try {
			
 
				+        changeLoading(true)
			
 
				+        const res = await getLoginUrl({ type })
			
 
				+        if (!res || res.code != 0)
			
 
				+            return requestFailed('获取登录链接失败！' + res?.msg || '')
			
 
				+        window.location.href = res.data
			
 
				+    } catch (error) {
			
 
				+        requestFailed('获取登录链接失败！')
			
 
				+    } finally {
			
 
				+        changeLoading(false)
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const UniLogin = async (type, code) => {
			
 
				+    try {
			
 
				+        changeLoading(true)
			
 
				+        userStore.uniLogin(type, code)
			
 
				+            .then((res) => { loginSuccess(res) })
			
 
				+            .catch((err) => {
			
 
				+                requestFailed(err.message)
			
 
				+            })
			
 
				+            .finally(() => {
			
 
				+                changeLoading(false)
			
 
				+            })
			
 
				+    } catch (error) {
			
 
				+        requestFailed('登录失败！请稍后再试')
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const changeLoading = (value) => {
			
 
				+    loading.value = value
			
 
				+}
			
 
				+
			
 
				+const loginSuccess = (res) => {
			
 
				+    Notification.success({
			
 
				+        title: `${timeFix()}，${res.username}`,
			
 
				+        content: '欢迎回来！',
			
 
				+        duration: 2000
			
 
				+    })
			
 
				+    router.push(from || '/')
			
 
				+}
			
 
				+
			
 
				+const requestFailed = (msg) => {
			
 
				+    Notification.error({
			
 
				+        title: '错误',
			
 
				+        content: msg || '请求出现错误，请稍后再试',
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+    if (route.query.type && route.query.code) {
			
 
				+        UniLogin(route.query.type, route.query.code)
			
 
				+    }
			
 
				+})
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.loading {
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    height: 100%;
			
 
				+    width: 100%;
			
 
				+    background-color: rgba(0, 0, 0, 0.2);
			
 
				+    z-index: 9999;
			
 
				+    border-radius: 10px;
			
 
				+
			
 
				+    .loadingTip {
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        left: 50%;
			
 
				+        transform: translate(-50%, -50%);
			
 
				+        color: #3370FF;
			
 
				+
			
 
				+        .text {
			
 
				+            font-family: 'Alimama ShuHeiTi';
			
 
				+            font-size: 1.2em;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.root {
			
 
				+    display: flex;
			
 
				+    gap: 40px;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+}
			
 
				+
			
 
				+.form {
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+    display: flex;
			
 
				+
			
 
				+    .title {
			
 
				+        color: #3370FF;
			
 
				+        font-size: 1.8em;
			
 
				+        font-weight: bold;
			
 
				+        margin-left: 15px;
			
 
				+        font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.tip {
			
 
				+    color: #777;
			
 
				+    font-size: 0.9em;
			
 
				+    text-align: left;
			
 
				+    margin-bottom: 20px;
			
 
				+    margin-left: -8px;
			
 
				+}
			
 
				+
			
 
				+.uniLoginButton {
			
 
				+    display: flex;
			
 
				+    gap: 40px;
			
 
				+    justify-content: center;
			
 
				+    height: 100px;
			
 
				+
			
 
				+    .button {
			
 
				+        cursor: pointer;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.forgetpass {
			
 
				+    width: 70px;
			
 
				+    margin-top: -10px;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/Main/Main.vue
+++ b/src/pages/Main/Main.vue
@@ -0,0 +1,127 @@
 
				+<template>
			
 
				+    <div id="section1" class="section root">
			
 
				+        <div class="videocontainer">
			
 
				+            <video class="fullscreenvideo" playsinline="" autoplay="" muted="" loop=""
			
 
				+                src="https://www.gitnexus.cn/assets/background-CL3lUlc-.webm" type="video/mp4" />
			
 
				+            <div class="overlay" />
			
 
				+        </div>
			
 
				+        <Header color="white" />
			
 
				+        <Center />
			
 
				+
			
 
				+        <a-button shape="circle" class="floating-button" size="large" @click="scrollToSection('section2')">
			
 
				+            <IconDown />
			
 
				+        </a-button>
			
 
				+    </div>
			
 
				+
			
 
				+    <div id="section2" class="section">
			
 
				+        <Section2 />
			
 
				+    </div>
			
 
				+    <div class="footer">
			
 
				+        <span>© {{ new Date().getFullYear() }} CTBU_RunForge</span>
			
 
				+    </div>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import Header from '@/components/Header/index.vue'
			
 
				+import Center from './components/center.vue'
			
 
				+import Section2 from './components/section2.vue'
			
 
				+
			
 
				+const scrollToSection = (sectionId) => {
			
 
				+    const section = document.getElementById(sectionId);
			
 
				+    if (section) {
			
 
				+        section.scrollIntoView({ behavior: 'smooth' });
			
 
				+    }
			
 
				+};
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.section {
			
 
				+    padding: 0;
			
 
				+    margin: 0;
			
 
				+    width: 100%;
			
 
				+    min-height: 100vh;
			
 
				+    scroll-snap-align: start;
			
 
				+    position: relative;
			
 
				+}
			
 
				+
			
 
				+.root {
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+.fullscreenvideo {
			
 
				+    position: absolute;
			
 
				+    min-width: 100%;
			
 
				+    min-height: 100%;
			
 
				+    width: auto;
			
 
				+    height: auto;
			
 
				+    z-index: -100;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+}
			
 
				+
			
 
				+.videocontainer {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    overflow: hidden;
			
 
				+    z-index: -100;
			
 
				+}
			
 
				+
			
 
				+.overlay {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    background-color: rgba(0, 0, 0, 0.4);
			
 
				+    z-index: -99;
			
 
				+}
			
 
				+
			
 
				+.center {
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    width: 800px;
			
 
				+    height: 300px;
			
 
				+    z-index: 2;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    pointer-events: auto;
			
 
				+    /* center 可以接收鼠标事件 */
			
 
				+}
			
 
				+
			
 
				+.button {
			
 
				+    position: absolute;
			
 
				+    z-index: 101;
			
 
				+}
			
 
				+
			
 
				+.floating-button {
			
 
				+    background-color: rgba(255, 255, 255, 0.5);
			
 
				+    position: absolute;
			
 
				+    bottom: 50px;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    border-radius: 50%;
			
 
				+    border: none;
			
 
				+    padding: 10px;
			
 
				+    transition: background-color 0.3s;
			
 
				+}
			
 
				+
			
 
				+.footer {
			
 
				+    cursor: pointer;
			
 
				+    position: relative;
			
 
				+    bottom: 15px;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    color: #777;
			
 
				+    font-size: 12px;
			
 
				+    display: flex;
			
 
				+    min-width: 300px;
			
 
				+    justify-content: center;
			
 
				+    gap: 10px;
			
 
				+
			
 
				+
			
 
				+    a {
			
 
				+        color: #777;
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/Main/components/center.vue
+++ b/src/pages/Main/components/center.vue
@@ -0,0 +1,106 @@
 
				+<template>
			
 
				+    <div class="center">
			
 
				+        <h1>RunForge</h1>
			
 
				+        <h2>—— 让跑步的意义由技术重新定义</h2>
			
 
				+        <div class="animated-button" @click="$router.push('/lepao')">
			
 
				+            <span>立即体验</span>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+.center {
			
 
				+    margin-top: -200px;
			
 
				+}
			
 
				+
			
 
				+.center h1,
			
 
				+.center h2 {
			
 
				+    background: linear-gradient(270deg,
			
 
				+        #a8cfff,
			
 
				+        #d0e7ff,
			
 
				+        #ffffff,
			
 
				+        #a8cfff);
			
 
				+    background-size: 500% 500%;
			
 
				+    animation: gradientMove 6s ease infinite;
			
 
				+    -webkit-background-clip: text;
			
 
				+    background-clip: text;
			
 
				+    -webkit-text-fill-color: transparent;
			
 
				+}
			
 
				+
			
 
				+/* h1 特别设置字号和字体 */
			
 
				+.center h1 {
			
 
				+    font-size: 10em;
			
 
				+    line-height: 1.3em;
			
 
				+    font-family: AlibabaSans, -apple-system, BlinkMacSystemFont;
			
 
				+}
			
 
				+
			
 
				+/* h2 特别设置字号和字体 */
			
 
				+.center h2 {
			
 
				+    font-size: 2.5em;
			
 
				+    margin-top: -50px;
			
 
				+    font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
			
 
				+}
			
 
				+
			
 
				+/* 动态渐变动画 */
			
 
				+@keyframes gradientMove {
			
 
				+    0% {
			
 
				+        background-position: 0% 50%;
			
 
				+    }
			
 
				+
			
 
				+    50% {
			
 
				+        background-position: 100% 50%;
			
 
				+    }
			
 
				+
			
 
				+    100% {
			
 
				+        background-position: 0% 50%;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.animated-button {
			
 
				+    user-select: none;
			
 
				+    cursor: pointer;
			
 
				+    position: absolute;
			
 
				+    left: 50%;
			
 
				+    margin-top: -50px;
			
 
				+    transform: translateX(-50%);
			
 
				+    background-color: rgba(22, 93, 255, 0.8);
			
 
				+    color: #fff;
			
 
				+    border: none;
			
 
				+    border-radius: 5px;
			
 
				+    padding: 10px 30px;
			
 
				+    overflow: hidden;
			
 
				+    font-size: 20px;
			
 
				+    position: relative;
			
 
				+    transition: color 0.4s;
			
 
				+    margin-top: 160px;
			
 
				+    width: 100px;
			
 
				+    font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
			
 
				+}
			
 
				+
			
 
				+.animated-button::before {
			
 
				+    content: "";
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    background: rgba(255, 255, 255, 0.8);
			
 
				+    color: rgba(22, 93, 255, 0.8);
			
 
				+    transform: translateX(-100%);
			
 
				+    transition: transform 0.4s;
			
 
				+}
			
 
				+
			
 
				+.animated-button:hover::before {
			
 
				+    transform: translateX(0);
			
 
				+}
			
 
				+
			
 
				+.animated-button:hover {
			
 
				+    color: rgb(22, 93, 255);
			
 
				+}
			
 
				+
			
 
				+.animated-button span {
			
 
				+    position: relative;
			
 
				+    transition: color 0.1s;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/Main/components/section2.vue
+++ b/src/pages/Main/components/section2.vue
@@ -0,0 +1,145 @@
 
				+<template>
			
 
				+    <div id="section2" class="features-section">
			
 
				+        <CanvasBackend />
			
 
				+        <div v-for="(card, index) in cards" :key="index" :ref="el => cardRefs[index] = el" class="card"
			
 
				+            :class="[{ 'in-view': inView[index] }, { 'reverse': card.reverse }]">
			
 
				+            <div class="content">
			
 
				+                <div class="title">
			
 
				+                    <img :src="card.icon" />
			
 
				+                    {{ card.title }}
			
 
				+                </div>
			
 
				+                <div class="dec">{{ card.dec }}</div>
			
 
				+            </div>
			
 
				+            <div class="img">
			
 
				+                <img :src="card.img" />
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, onMounted, onUnmounted } from 'vue'
			
 
				+import CanvasBackend from '@/components/CanvasBackend/index.vue'
			
 
				+
			
 
				+const cards = [
			
 
				+    {
			
 
				+        title: '全自动乐跑体验',
			
 
				+        icon: new URL('@/assets/img/homePage/icons/visualization.svg', import.meta.url).href,
			
 
				+        dec: '自动记录跑步数据，无需手动操作，轻松完成校园任务',
			
 
				+        img: new URL('https://cloud.vite.net.cn/view.php/6cf4d3d8f5d9e6b41c525541c8949329.png').href,
			
 
				+        reverse: false
			
 
				+    },
			
 
				+    {
			
 
				+        title: '智能成绩上传系统',
			
 
				+        icon: new URL('@/assets/img/homePage/icons/ai.svg', import.meta.url).href,
			
 
				+        dec: '支持夜间上传与异常修复，忘跑也能及时补救，成绩无忧',
			
 
				+        img: new URL('https://cloud.vite.net.cn/view.php/6cf4d3d8f5d9e6b41c525541c8949329.png').href,
			
 
				+        reverse: true
			
 
				+    },
			
 
				+    {
			
 
				+        title: '自由跑区与贴心服务',
			
 
				+        icon: new URL('@/assets/img/homePage/icons/quality.svg', import.meta.url).href,
			
 
				+        dec: '支持自定义跑步区域，注册即送免费乐跑，体验便捷又人性化',
			
 
				+        img: new URL('https://cloud.vite.net.cn/view.php/6cf4d3d8f5d9e6b41c525541c8949329.png').href,
			
 
				+        reverse: false
			
 
				+    }
			
 
				+]
			
 
				+
			
 
				+
			
 
				+const cardRefs = ref([])
			
 
				+const inView = ref(cards.map(() => false)) // 初始化每个卡片的状态
			
 
				+
			
 
				+let observers = []
			
 
				+
			
 
				+onMounted(() => {
			
 
				+    cardRefs.value.forEach((el, index) => {
			
 
				+        const observer = new IntersectionObserver(
			
 
				+            ([entry]) => {
			
 
				+                if (entry.isIntersecting) {
			
 
				+                    inView.value[index] = true
			
 
				+                    observer.disconnect()
			
 
				+                }
			
 
				+            },
			
 
				+            { threshold: 0.4 }
			
 
				+        )
			
 
				+        if (el) observer.observe(el)
			
 
				+        observers.push(observer)
			
 
				+    })
			
 
				+})
			
 
				+
			
 
				+onUnmounted(() => {
			
 
				+    observers.forEach(observer => observer.disconnect())
			
 
				+})
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.features-section {
			
 
				+    position: relative;
			
 
				+    background-image: linear-gradient(to bottom, #ebf2ff, hsla(0, 0%, 100%, 0));
			
 
				+    padding: 80px 20px;
			
 
				+    display: flex;
			
 
				+    gap: 50px;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+
			
 
				+    .reverse {
			
 
				+        flex-direction: row-reverse;
			
 
				+        background: linear-gradient(346deg, #ebf2ff, #d6e0ff) !important;
			
 
				+    }
			
 
				+
			
 
				+    .card {
			
 
				+        width: 1200px;
			
 
				+        display: flex;
			
 
				+        gap: 50px;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+        background: linear-gradient(135deg, #ebf2ff, #d6e0ff);
			
 
				+        border-radius: 10px;
			
 
				+        height: 400px;
			
 
				+        opacity: 0;
			
 
				+        transform: translateY(100px);
			
 
				+        transition: all 0.8s ease-out;
			
 
				+
			
 
				+        &.in-view {
			
 
				+            opacity: 1;
			
 
				+            transform: translateY(0);
			
 
				+        }
			
 
				+
			
 
				+        .content {
			
 
				+            width: 500px;
			
 
				+
			
 
				+            .title {
			
 
				+                font-weight: bold;
			
 
				+                font-size: 2.5em;
			
 
				+                font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
			
 
				+                display: flex;
			
 
				+                align-items: center;
			
 
				+                gap: 10px;
			
 
				+            }
			
 
				+
			
 
				+            .dec {
			
 
				+                margin-top: 15px;
			
 
				+                font-size: 1.4em;
			
 
				+                line-height: 35px;
			
 
				+                color: rgb(102, 102, 102);
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        img {
			
 
				+            max-width: 500px;
			
 
				+            user-select: none;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    // 动画定义
			
 
				+    @keyframes slideFadeIn {
			
 
				+        to {
			
 
				+            opacity: 1;
			
 
				+            transform: translateY(0);
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/User/info/components/latest-activity.vue
+++ b/src/pages/User/info/components/latest-activity.vue
@@ -0,0 +1,88 @@
 
				+<template>
			
 
				+  <a-card class="general-card" :title="$t('userInfo.title.latestActivity')">
			
 
				+    <template #extra>
			
 
				+      <a-link>{{ $t('userInfo.viewAll') }}</a-link>
			
 
				+    </template>
			
 
				+    <a-list :bordered="false">
			
 
				+      <a-list-item
			
 
				+        v-for="activity in activityList"
			
 
				+        :key="activity.id"
			
 
				+        action-layout="horizontal"
			
 
				+      >
			
 
				+        <a-skeleton
			
 
				+          v-if="loading"
			
 
				+          :loading="loading"
			
 
				+          :animation="true"
			
 
				+          class="skeleton-item"
			
 
				+        >
			
 
				+          <a-row :gutter="6">
			
 
				+            <a-col :span="2">
			
 
				+              <a-skeleton-shape shape="circle" />
			
 
				+            </a-col>
			
 
				+            <a-col :span="22">
			
 
				+              <a-skeleton-line :widths="['40%', '100%']" :rows="2" />
			
 
				+            </a-col>
			
 
				+          </a-row>
			
 
				+        </a-skeleton>
			
 
				+        <a-list-item-meta
			
 
				+          v-else
			
 
				+          :title="activity.title"
			
 
				+          :description="activity.description"
			
 
				+        >
			
 
				+          <template #avatar>
			
 
				+            <a-avatar>
			
 
				+              <img :src="activity.avatar" />
			
 
				+            </a-avatar>
			
 
				+          </template>
			
 
				+        </a-list-item-meta>
			
 
				+      </a-list-item>
			
 
				+    </a-list>
			
 
				+  </a-card>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+  import { ref } from 'vue';
			
 
				+  import { queryLatestActivity } from '@/api/user-center';
			
 
				+  import useLoading from '@/hooks/loading';
			
 
				+
			
 
				+  const { loading, setLoading } = useLoading(true);
			
 
				+  const activityList = ref([])
			
 
				+  const fetchData = async () => {
			
 
				+    try {
			
 
				+      const { data } = await queryLatestActivity();
			
 
				+      activityList.value = data;
			
 
				+    } catch (err) {
			
 
				+      // you can report use errorHandler or other
			
 
				+    } finally {
			
 
				+      setLoading(false);
			
 
				+    }
			
 
				+  };
			
 
				+  fetchData();
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+  .latest-activity {
			
 
				+    &-header {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: space-between;
			
 
				+    }
			
 
				+  }
			
 
				+  .general-card :deep(.arco-list-item) {
			
 
				+    padding-left: 0;
			
 
				+    border-bottom: none;
			
 
				+    .arco-list-item-meta-content {
			
 
				+      flex: 1;
			
 
				+      padding-bottom: 27px;
			
 
				+      border-bottom: 1px solid var(--color-neutral-3);
			
 
				+    }
			
 
				+    .arco-list-item-meta-avatar {
			
 
				+      padding-bottom: 27px;
			
 
				+    }
			
 
				+    .skeleton-item {
			
 
				+      margin-top: 10px;
			
 
				+      padding-bottom: 20px;
			
 
				+      border-bottom: 1px solid var(--color-neutral-3);
			
 
				+    }
			
 
				+  }
			
 
				+</style>
			
--- a/src/pages/User/info/components/my-project.vue
+++ b/src/pages/User/info/components/my-project.vue
@@ -0,0 +1,112 @@
 
				+<template>
			
 
				+  <a-card class="general-card" title="我的仓库">
			
 
				+    <template #extra>
			
 
				+      <a-link @click="$router.push('/repos/list')">查看更多</a-link>
			
 
				+    </template>
			
 
				+    <a-row :gutter="16">
			
 
				+      <a-col v-for="(item, index) in repos" :key="index" :xs="12" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
			
 
				+        <a-card class="card" hoverable  @click="$router.push(`/repos/detail/${item.id}`)">
			
 
				+          <a-skeleton v-if="loading" :loading="loading" :animation="true">
			
 
				+            <a-skeleton-line :rows="3" />
			
 
				+          </a-skeleton>
			
 
				+          <div v-else>
			
 
				+            <a-avatar shape="square" :size="45" class="logo">
			
 
				+              <img alt="" src="@/assets/repo.svg" v-if="!item.logo" />
			
 
				+              <img alt="" :src="item.logo" v-else />
			
 
				+            </a-avatar>
			
 
				+            <div class="right">
			
 
				+              <div class="name">{{ item.name }}</div>
			
 
				+              <div class="info">
			
 
				+                <div>
			
 
				+                  创建时间：{{ stramptoTime(item.create_time) }}
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  更新时间：{{ stramptoTime(item.update_time) }}
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </a-card>
			
 
				+      </a-col>
			
 
				+    </a-row>
			
 
				+  </a-card>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { ref } from 'vue'
			
 
				+import { GetRepos } from '@/api/user'
			
 
				+
			
 
				+const loading = ref(false)
			
 
				+const repos = ref([])
			
 
				+
			
 
				+const GetRepo = async () => {
			
 
				+  try {
			
 
				+    loading.value = true
			
 
				+    const res = await GetRepos()
			
 
				+    if (!res || res.code !== 0)
			
 
				+      return Notification.error({
			
 
				+        title: '获取仓库列表失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+    repos.value = res.data
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '获取仓库列表失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+  } finally {
			
 
				+    loading.value = false
			
 
				+  }
			
 
				+}
			
 
				+GetRepo()
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.general-card {
			
 
				+  border-radius: 5px;
			
 
				+}
			
 
				+
			
 
				+:deep(.arco-card-body) {
			
 
				+  min-height: 128px;
			
 
				+  padding-bottom: 0;
			
 
				+}
			
 
				+
			
 
				+.card {
			
 
				+  margin-bottom: 15px;
			
 
				+  height: 130px;
			
 
				+  display: flex;
			
 
				+  border-radius: 3px;
			
 
				+  cursor: pointer;
			
 
				+
			
 
				+  .logo {
			
 
				+    user-select: none;
			
 
				+    background-color: rgba(0, 0, 0, 0);
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    transform: translateY(-50%);
			
 
				+  }
			
 
				+
			
 
				+  .right {
			
 
				+    margin-left: 60px;
			
 
				+    margin-top: 10px;
			
 
				+
			
 
				+    .name {
			
 
				+      font-size: 1.2em;
			
 
				+      font-weight: 550;
			
 
				+    }
			
 
				+
			
 
				+    .info {
			
 
				+      color: #666;
			
 
				+      margin-top: 10px;
			
 
				+      font-size: 0.9em;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/User/info/components/user-info-header.vue
+++ b/src/pages/User/info/components/user-info-header.vue
@@ -0,0 +1,72 @@
 
				+<template>
			
 
				+  <div class="header">
			
 
				+    <a-space :size="12" direction="vertical" align="center" class="center">
			
 
				+      <a-avatar :size="80" :imgUrl="user.avatar">
			
 
				+        <img :src="user.avatar" />
			
 
				+      </a-avatar>
			
 
				+      <a-typography-title :heading="5" style="margin: 0">
			
 
				+        {{ user.username }}
			
 
				+      </a-typography-title>
			
 
				+      <div class="user-msg">
			
 
				+        <a-space :size="18">
			
 
				+          <div>
			
 
				+            <icon-email />
			
 
				+            <a-typography-text>{{ user.email }}</a-typography-text>
			
 
				+          </div>
			
 
				+        </a-space>
			
 
				+      </div>
			
 
				+    </a-space>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { ref } from 'vue'
			
 
				+
			
 
				+const user = ref('')
			
 
				+const getuser = async () => {
			
 
				+    const userStore = useUserStore()
			
 
				+    let userInfo = await userStore.getInfo()
			
 
				+    user.value = userInfo
			
 
				+}
			
 
				+
			
 
				+getuser()
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+  .header {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+
			
 
				+    height: 204px;
			
 
				+    color: var(--gray-10);
			
 
				+    background: url('@/assets/userinfo-background.jpg')
			
 
				+      no-repeat;
			
 
				+    background-size: cover;
			
 
				+    background-position: center;
			
 
				+    border-radius: 4px;
			
 
				+
			
 
				+    .user-msg {
			
 
				+      .arco-icon {
			
 
				+        color: rgb(var(--gray-10));
			
 
				+      }
			
 
				+      .arco-typography {
			
 
				+        margin-left: 6px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .header::after {
			
 
				+    content: '';
			
 
				+    height: 204px;
			
 
				+    width: 100%;
			
 
				+    background-color: rgba(255,255,255,0.5);
			
 
				+  }
			
 
				+
			
 
				+  .center {
			
 
				+    position: absolute;
			
 
				+  }
			
 
				+
			
 
				+  
			
 
				+</style>
			
--- a/src/pages/User/info/index.vue
+++ b/src/pages/User/info/index.vue
@@ -0,0 +1,70 @@
 
				+<template>
			
 
				+  
			
 
				+  <div class="container">
			
 
				+    <Breadcrumb :items="['个人中心', '用户信息']" />
			
 
				+    <UserInfoHeader />
			
 
				+    <div class="content">
			
 
				+        <a-grid :cols="24" :col-gap="16" :row-gap="16">
			
 
				+          <a-grid-item :span="24">
			
 
				+            <MyProject />
			
 
				+          </a-grid-item>
			
 
				+          <a-grid-item :span="24">
			
 
				+            <!-- <LatestActivity /> -->
			
 
				+          </a-grid-item>
			
 
				+        </a-grid>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import UserInfoHeader from './components/user-info-header.vue'
			
 
				+import MyProject from './components/my-project.vue'
			
 
				+// import LatestActivity from './components/latest-activity.vue';
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container {
			
 
				+  padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.content {
			
 
				+  display: flex;
			
 
				+  margin-top: 12px;
			
 
				+
			
 
				+  &-left {
			
 
				+    flex: 1;
			
 
				+    margin-right: 16px;
			
 
				+    overflow: hidden;
			
 
				+    // background-color: var(--color-bg-2);
			
 
				+
			
 
				+    :deep(.arco-tabs-nav-tab) {
			
 
				+      margin-left: 16px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  &-right {
			
 
				+    width: 332px;
			
 
				+  }
			
 
				+
			
 
				+  .tab-pane-wrapper {
			
 
				+    padding: 0 16px 16px 16px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.mobile {
			
 
				+  .content {
			
 
				+    display: block;
			
 
				+
			
 
				+    &-left {
			
 
				+      margin-right: 0;
			
 
				+      margin-bottom: 16px;
			
 
				+    }
			
 
				+
			
 
				+    &-right {
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/User/setting/components/basic-information.vue
+++ b/src/pages/User/setting/components/basic-information.vue
@@ -0,0 +1,223 @@
 
				+<template>
			
 
				+  <div class="form">
			
 
				+    <div class="username">
			
 
				+      <a-form size="large" ref="usernameFormRef" :model="usernameForm" class="form" @submit="changeName">
			
 
				+        <a-form-item field="username" label="用户名"
			
 
				+          :rules="[{ required: true, message: '用户名不能为空' }, { minLength: 4, maxLength: 12, message: '用户名长度需在4~12位间' }]"
			
 
				+          :validate-trigger="['change']">
			
 
				+          <a-input placeholder="请输入用户名" allow-clear v-model="usernameForm.username">
			
 
				+            <template #prefix>
			
 
				+              <icon-user />
			
 
				+            </template>
			
 
				+          </a-input>
			
 
				+        </a-form-item>
			
 
				+        <a-button class="button" type="primary" html-type="submit" :loading="state.usernameButton"
			
 
				+          :disabled="user?.username === usernameForm.username">更新用户名</a-button>
			
 
				+      </a-form>
			
 
				+    </div>
			
 
				+    <a-divider />
			
 
				+
			
 
				+    <div class="email">
			
 
				+      <a-form size="large" ref="emailFormRef" :model="emailForm" class="form" @submit="changeEmail">
			
 
				+        <a-form-item field="email" label="邮箱" :rules="[{ type: 'email', required: true, message: '请填写正确的邮箱地址' }]"
			
 
				+          :validate-trigger="['change']">
			
 
				+          <a-input placeholder="请输入邮箱" allow-clear v-model="emailForm.email">
			
 
				+            <template #prefix>
			
 
				+              <icon-email />
			
 
				+            </template>
			
 
				+          </a-input>
			
 
				+        </a-form-item>
			
 
				+
			
 
				+        <a-form-item field="captcha" label="图片验证码" :rules="[{ length: 4, required: true, message: '请正确填写图片验证码' }]">
			
 
				+          <a-input placeholder="请输入图片验证码" allow-clear v-model="emailForm.captcha">
			
 
				+            <template #prefix>
			
 
				+              <icon-check-circle />
			
 
				+            </template>
			
 
				+            <template #append>
			
 
				+              <img alt="!点我重试" height="34" :src="ImageCaptcha" class="captcha" @click="getCaptcha()">
			
 
				+            </template>
			
 
				+          </a-input>
			
 
				+        </a-form-item>
			
 
				+
			
 
				+        <a-form-item field="code" label="邮箱验证码" :rules="[{ length: 6, required: true, message: '请正确填写邮箱验证码' }]">
			
 
				+          <a-input placeholder="请输入邮箱验证码" allow-clear v-model="emailForm.code">
			
 
				+            <template #prefix>
			
 
				+              <icon-code-square />
			
 
				+            </template>
			
 
				+            <template #append>
			
 
				+              <a-button type="text" style="width: 80px" @click="SendEmail" :disabled="state.smsSendBtn || user?.email === emailForm.email">
			
 
				+                <span v-if="!state.smsSendBtn">获取验证码</span>
			
 
				+                <span v-else>{{ state.time }} s</span>
			
 
				+              </a-button>
			
 
				+            </template>
			
 
				+          </a-input>
			
 
				+        </a-form-item>
			
 
				+        <a-button class="button" type="primary" html-type="submit" :loading="state.emailButton"
			
 
				+        :disabled="user?.email === emailForm.email">更新邮箱</a-button>
			
 
				+      </a-form>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, reactive, onBeforeMount } from 'vue'
			
 
				+import { ChangeUsername, BindEmail } from '@/api/user'
			
 
				+import { getImageCaptcha, sendEmail } from '@/api/login'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { Notification, Message } from '@arco-design/web-vue'
			
 
				+
			
 
				+const userStore = useUserStore()
			
 
				+let user = ref(null)
			
 
				+
			
 
				+let usernameFormRef = ref(null)
			
 
				+let emailFormRef = ref(null)
			
 
				+
			
 
				+let state = reactive({
			
 
				+  usernameButton: false,
			
 
				+  emailButton: false,
			
 
				+  smsSendBtn: false,
			
 
				+  time: 60
			
 
				+})
			
 
				+
			
 
				+let usernameForm = reactive({
			
 
				+  username: ''
			
 
				+})
			
 
				+
			
 
				+let emailForm = reactive({
			
 
				+  email: '',
			
 
				+  captcha: '',
			
 
				+  code: ''
			
 
				+})
			
 
				+
			
 
				+const getUser = async () => {
			
 
				+  const userInfo = await userStore.getInfo()
			
 
				+  user.value = userInfo
			
 
				+  usernameForm.username = userInfo.username
			
 
				+  emailForm.email = userInfo.email
			
 
				+}
			
 
				+
			
 
				+onBeforeMount(getUser)
			
 
				+
			
 
				+
			
 
				+let CaptchaId = ref('')
			
 
				+let ImageCaptcha = ref('')
			
 
				+
			
 
				+const getCaptcha = async () => {
			
 
				+    try {
			
 
				+        const res = await getImageCaptcha()
			
 
				+        if (!res || res.code != 0)
			
 
				+            return Message.error('获取图片验证码失败！' + res?.msg || '')
			
 
				+        ImageCaptcha.value = res.data.img
			
 
				+        CaptchaId.value = res.data.id
			
 
				+    } catch (error) {
			
 
				+      Message.error('获取图片验证码失败！')
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+getCaptcha()
			
 
				+
			
 
				+const changeName = async () => {
			
 
				+  try {
			
 
				+    state.usernameButton = true
			
 
				+    const v = await usernameFormRef.value.validate()
			
 
				+    if (v || user.value.username === usernameForm.username) return
			
 
				+
			
 
				+    const res = await ChangeUsername({ username: usernameForm.username })
			
 
				+    if (!res || res.code !== 0) throw new Error(res?.msg || '更新失败！请稍后再试')
			
 
				+
			
 
				+    user.value = await userStore.getInfoFromServer()
			
 
				+    Message.success('更新用户名成功！')
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '更新用户名失败！',
			
 
				+      content: error.message || ''
			
 
				+    })
			
 
				+  } finally {
			
 
				+    state.usernameButton = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const SendEmail = async () => {
			
 
				+    try {
			
 
				+        const v = await emailFormRef.value.validateField(['email', 'captcha'])
			
 
				+        if (v) return
			
 
				+
			
 
				+        let email = emailForm.email
			
 
				+        let text = emailForm.captcha
			
 
				+
			
 
				+        state.smsSendBtn = true
			
 
				+        const interval = window.setInterval(() => {
			
 
				+            if (state.time-- <= 0) {
			
 
				+                state.time = 60
			
 
				+                state.smsSendBtn = false
			
 
				+                window.clearInterval(interval)
			
 
				+            }
			
 
				+        }, 1000)
			
 
				+
			
 
				+        Message.loading('验证码发送中..')
			
 
				+
			
 
				+        const res = await sendEmail({ email, text, id: CaptchaId.value, type: 'bind' })
			
 
				+
			
 
				+        if (!res || res.code != 0) {
			
 
				+            state.time = 60
			
 
				+            state.smsSendBtn = false
			
 
				+            window.clearInterval(interval)
			
 
				+            getImageCaptcha()
			
 
				+            emailForm.captcha = ''
			
 
				+
			
 
				+            if (res.code === -10501) {
			
 
				+                return Notification.error({
			
 
				+                    title: '验证码输入错误',
			
 
				+                    content: res?.msg || '请求出现错误，请稍后再试'
			
 
				+                })
			
 
				+            }
			
 
				+
			
 
				+            return Notification.error({
			
 
				+                title: '获取验证码失败',
			
 
				+                content: res?.msg || '请求出现错误，请稍后再试'
			
 
				+            })
			
 
				+        }
			
 
				+    } catch (error) {
			
 
				+        Message.error('验证码发送失败')
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const changeEmail = async () => {
			
 
				+  try {
			
 
				+    state.emailButton = true
			
 
				+    const v = await emailFormRef.value.validate()
			
 
				+    if (v || user.value.email === emailForm.email) return
			
 
				+
			
 
				+    const res = await BindEmail({ email: emailForm.email, code:  emailForm.code})
			
 
				+    if (!res || res.code !== 0) throw new Error(res?.msg || '更新失败！请稍后再试')
			
 
				+
			
 
				+    user.value = await userStore.getInfoFromServer()
			
 
				+    Message.success('更新邮箱成功！')
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '更新邮箱失败！',
			
 
				+      content: error.message || ''
			
 
				+    })
			
 
				+    getCaptcha()
			
 
				+    emailForm.captcha = ''
			
 
				+  } finally {
			
 
				+    state.emailButton = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.form {
			
 
				+  width: 540px;
			
 
				+  margin: 0 auto;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+
			
 
				+.button {
			
 
				+  width: 150px;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/User/setting/components/security-settings.vue
+++ b/src/pages/User/setting/components/security-settings.vue
@@ -0,0 +1,103 @@
 
				+<template>
			
 
				+  <div class="form">
			
 
				+    <a-form size="large" ref="formRef" :model="form" class="form" @submit="changePassword">
			
 
				+      <a-form-item field="oldpassword" label="输入旧密码"
			
 
				+        :rules="[ { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
			
 
				+        :validate-trigger="['change']">
			
 
				+        <a-input-password placeholder="请输入旧密码(未设置请留空)" allow-clear v-model="form.oldpassword">
			
 
				+          <template #prefix>
			
 
				+            <icon-lock />
			
 
				+          </template>
			
 
				+        </a-input-password>
			
 
				+      </a-form-item>
			
 
				+
			
 
				+      <a-form-item field="password" label="新密码"
			
 
				+        :rules="[{ required: true, message: '密码不能为空' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
			
 
				+        :validate-trigger="['change']">
			
 
				+        <a-input-password placeholder="请设置新密码" allow-clear v-model="form.password">
			
 
				+          <template #prefix>
			
 
				+            <icon-lock />
			
 
				+          </template>
			
 
				+        </a-input-password>
			
 
				+      </a-form-item>
			
 
				+
			
 
				+      <a-form-item field="password2" label="重复新密码"
			
 
				+        :rules="[{ required: true, message: '请再次输入密码' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
			
 
				+        :validate-trigger="['change']">
			
 
				+        <a-input-password placeholder="请再次输入密码" allow-clear v-model="form.password2">
			
 
				+          <template #prefix>
			
 
				+            <icon-lock />
			
 
				+          </template>
			
 
				+        </a-input-password>
			
 
				+      </a-form-item>
			
 
				+      
			
 
				+      <a-button class="button" type="primary" html-type="submit" :loading="state.button">更改密码</a-button>
			
 
				+    </a-form>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, reactive } from 'vue'
			
 
				+import { ChangePassword } from '@/api/user'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { Notification, Message } from '@arco-design/web-vue'
			
 
				+import { useRouter } from 'vue-router'
			
 
				+
			
 
				+const userStore = useUserStore()
			
 
				+const router = useRouter()
			
 
				+
			
 
				+let formRef = ref(null)
			
 
				+
			
 
				+let state = reactive({
			
 
				+  button: false,
			
 
				+})
			
 
				+
			
 
				+let form = reactive({
			
 
				+  oldpassword: '',
			
 
				+  password: '',
			
 
				+  password2: ''
			
 
				+})
			
 
				+
			
 
				+const changePassword = async () => {
			
 
				+  try {
			
 
				+    state.button = true
			
 
				+    const v = await formRef.value.validate()
			
 
				+    if (v) return
			
 
				+    if(form.password !== form.password2)
			
 
				+      return Message.error('请确保两次输入的密码一致！')
			
 
				+
			
 
				+      let { oldpassword, password } = form
			
 
				+      oldpassword = btoa(oldpassword)
			
 
				+      password = btoa(password)
			
 
				+
			
 
				+    const res = await ChangePassword({oldpassword, password })
			
 
				+    if (!res || res.code !== 0) throw new Error(res?.msg || '更新密码失败！请稍后再试')
			
 
				+
			
 
				+    Message.success('更新密码成功！请重新登录')
			
 
				+    userStore.logout()
			
 
				+    router.push('/login')
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '更新密码失败！',
			
 
				+      content: error.message || ''
			
 
				+    })
			
 
				+  } finally {
			
 
				+    state.button = false
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.form {
			
 
				+  width: 560px;
			
 
				+  margin: 0 auto;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+
			
 
				+.button {
			
 
				+  width: 150px;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/User/setting/components/user-panel.vue
+++ b/src/pages/User/setting/components/user-panel.vue
@@ -0,0 +1,153 @@
 
				+<template>
			
 
				+  <a-card :bordered="false">
			
 
				+    <a-space :size="54">
			
 
				+      <a-upload :custom-request="customRequest" :file-list="fileList" :show-upload-button="true" :show-file-list="false"
			
 
				+        :on-before-upload="beforeUpload" @change="uploadChange" accept="image/png, image/jpeg, image/jpg">
			
 
				+        <template #upload-button>
			
 
				+          <a-avatar :size="100" class="info-avatar" v-if="fileList.length" :imageUrl="fileList[0].url">
			
 
				+            <template #trigger-icon>
			
 
				+              <icon-camera />
			
 
				+            </template>
			
 
				+          </a-avatar>
			
 
				+        </template>
			
 
				+      </a-upload>
			
 
				+      <a-descriptions :data="renderData" :column="2" align="right" layout="inline-horizontal" :label-style="{
			
 
				+        width: '140px',
			
 
				+        fontWeight: 'normal',
			
 
				+        color: 'rgb(var(--gray-8))',
			
 
				+      }" :value-style="{
			
 
				+        width: '250px',
			
 
				+        paddingLeft: '8px',
			
 
				+        textAlign: 'left',
			
 
				+      }">
			
 
				+        <template #label="{ label }">{{ label }} :</template>
			
 
				+        <template #value="{ value, data }">
			
 
				+          <span>{{ value }}</span>
			
 
				+          <a-tag v-if="data.label === '邮箱' && value !== '未设置'" color="green" size="small" style="margin-left: 5px">
			
 
				+            已验证
			
 
				+          </a-tag>
			
 
				+        </template>
			
 
				+      </a-descriptions>
			
 
				+    </a-space>
			
 
				+  </a-card>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { uploadAvatar } from '@/api/upload'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { ref, computed, onBeforeMount } from 'vue'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { Message } from '@arco-design/web-vue'
			
 
				+
			
 
				+const user = ref(null)
			
 
				+const fileList = ref([])
			
 
				+
			
 
				+const userStore = useUserStore()
			
 
				+
			
 
				+const getUser = async () => {
			
 
				+  const userInfo = await userStore.getInfoFromServer()
			
 
				+  if (userInfo?.avatar) {
			
 
				+    user.value = userInfo
			
 
				+    fileList.value = [{ uid: '-1', name: 'avatar', url: userInfo.avatar }]
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+onBeforeMount(getUser)
			
 
				+
			
 
				+const renderData = computed(() => {
			
 
				+  if (!user.value) return []
			
 
				+  return [
			
 
				+    { label: '用户名', value: user.value.username },
			
 
				+    { label: '邮箱', value: user.value.email },
			
 
				+    { label: '注册时间', value: stramptoTime(user.value.registTime) }
			
 
				+  ]
			
 
				+})
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+  if (time < 10)
			
 
				+    return '未知时间'
			
 
				+  return new Date(+time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+const uploadChange = (fileItemList) => {
			
 
				+  if (fileItemList.length > 0) {
			
 
				+    fileList.value = [{ uid: '-1', name: 'avatar', url: fileItemList[0].url }]
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const beforeUpload = (file) => {
			
 
				+  return new Promise((resolve, reject) => {
			
 
				+    const isJpgOrPng =
			
 
				+      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
			
 
				+    if (!isJpgOrPng) {
			
 
				+      Notification.error({
			
 
				+        title: '图片上传失败！',
			
 
				+        content: '请上传jpg/png格式的图片文件!'
			
 
				+      })
			
 
				+      return reject('图片格式错误')
			
 
				+    }
			
 
				+
			
 
				+    const isLt3M = file.size / 1024 / 1024 < 3
			
 
				+    if (!isLt3M) {
			
 
				+      Notification.error({
			
 
				+        title: '图片上传失败！',
			
 
				+        content: '图片大小不得超过3MB!',
			
 
				+      })
			
 
				+      return reject('图片大小超过限制')
			
 
				+    }
			
 
				+
			
 
				+    resolve(file)
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+const customRequest = async ({ onSuccess, onError, fileItem }) => {
			
 
				+  try {
			
 
				+    const formData = new FormData()
			
 
				+    formData.append('upload', fileItem.file)
			
 
				+    formData.append('uuid', user.value?.uuid)
			
 
				+    formData.append('session', user.value?.session)
			
 
				+
			
 
				+    const res = await uploadAvatar(formData)
			
 
				+    if (!res || res.code !== 0) {
			
 
				+      onError(new Error('上传失败'), res)
			
 
				+      return Notification.error({
			
 
				+        title: '头像上传失败',
			
 
				+        content: res?.msg || '请求出现错误，请稍后再试'
			
 
				+      })
			
 
				+    }
			
 
				+
			
 
				+    fileList.value = [{ uid: '-1', name: 'avatar', url: res.data.picturePath }]
			
 
				+
			
 
				+    await userStore.getInfoFromServer()
			
 
				+    Message.success('上传头像成功！')
			
 
				+    onSuccess(res.data)
			
 
				+    // setTimeout(() => { router.go(0) }, 2000)
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '头像上传失败',
			
 
				+      content: '请求出现错误，请稍后再试',
			
 
				+    })
			
 
				+    onError()
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.arco-card {
			
 
				+  padding: 14px 0 4px 4px;
			
 
				+  border-radius: 4px;
			
 
				+}
			
 
				+
			
 
				+:deep(.arco-avatar-trigger-icon-button) {
			
 
				+  width: 32px;
			
 
				+  height: 32px;
			
 
				+  line-height: 32px;
			
 
				+  background-color: #e8f3ff;
			
 
				+
			
 
				+  .arco-icon-camera {
			
 
				+    margin-top: 8px;
			
 
				+    color: rgb(var(--arcoblue-6));
			
 
				+    font-size: 14px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/User/setting/index.vue
+++ b/src/pages/User/setting/index.vue
@@ -0,0 +1,47 @@
 
				+<template>
			
 
				+  <div class="container">
			
 
				+    <Breadcrumb :items="['个人中心', '用户设置']" />
			
 
				+    <a-row style="margin-bottom: 16px">
			
 
				+      <a-col :span="24">
			
 
				+        <UserPanel :user="user" />
			
 
				+      </a-col>
			
 
				+    </a-row>
			
 
				+    <a-row class="wrapper">
			
 
				+      <a-col :span="24">
			
 
				+        <a-tabs default-active-key="1" type="rounded">
			
 
				+          <a-tab-pane key="1" title="基础信息">
			
 
				+            <BasicInformation />
			
 
				+          </a-tab-pane>
			
 
				+          <a-tab-pane key="2" title="安全设置">
			
 
				+            <SecuritySettings />
			
 
				+          </a-tab-pane>
			
 
				+        </a-tabs>
			
 
				+      </a-col>
			
 
				+    </a-row>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import UserPanel from './components/user-panel.vue'
			
 
				+import BasicInformation from './components/basic-information.vue'
			
 
				+import SecuritySettings from './components/security-settings.vue'
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container {
			
 
				+  padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.wrapper {
			
 
				+  padding: 20px 0 0 20px;
			
 
				+  min-height: 580px;
			
 
				+  background-color: var(--color-bg-2);
			
 
				+  border-radius: 4px;
			
 
				+}
			
 
				+
			
 
				+:deep(.section-title) {
			
 
				+  margin-top: 0;
			
 
				+  margin-bottom: 16px;
			
 
				+  font-size: 14px;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/lepao/accountList/components/userCard.vue
+++ b/src/pages/lepao/accountList/components/userCard.vue
@@ -0,0 +1,50 @@
 
				+<template>
			
 
				+  <a-card class="card">
			
 
				+    <a-space size="large">
			
 
				+      <a-statistic title="剩余乐跑次数" :value="userCount?.lepao_count" show-group-separator />
			
 
				+      <a-button type="primary" size="large" @click="$router.push('/store/goodsList')" style="margin-left: 20px;"><icon-gift /> 去购买</a-button>
			
 
				+    </a-space>
			
 
				+  </a-card>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref } from 'vue'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { getCount } from '@/api/goods'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+
			
 
				+const userCount = ref({})
			
 
				+const loading = ref(false)
			
 
				+
			
 
				+const user = ref('')
			
 
				+const getuser = async () => {
			
 
				+  const userStore = useUserStore()
			
 
				+  let userInfo = await userStore.getInfo()
			
 
				+  user.value = userInfo
			
 
				+}
			
 
				+
			
 
				+const GetCount = async () => {
			
 
				+  try {
			
 
				+    loading.value = true
			
 
				+    const res = await getCount()
			
 
				+    if (!res || res.code !== 0)
			
 
				+      return Notification.error({
			
 
				+        title: '获取用户数据失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+    userCount.value = res.data
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '获取用户数据失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+  } finally {
			
 
				+    loading.value = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+GetCount()
			
 
				+getuser()
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less"></style>
			
--- a/src/pages/lepao/accountList/index.vue
+++ b/src/pages/lepao/accountList/index.vue
@@ -0,0 +1,477 @@
 
				+<template>
			
 
				+  <div class="container">
			
 
				+    <Breadcrumb :items="['校园乐跑', '账号管理']" />
			
 
				+
			
 
				+    <userCard />
			
 
				+
			
 
				+    <a-card title="账号列表" style="margin-top: 15px;">
			
 
				+      <a-button type="primary" size="large" @click="editAccount">
			
 
				+        <template #icon>
			
 
				+          <icon-plus />
			
 
				+        </template>
			
 
				+        添加账号
			
 
				+      </a-button>
			
 
				+
			
 
				+      <a-button size="large" @click="download" style="margin-left: 10px;">
			
 
				+        <template #icon>
			
 
				+          <IconInfoCircle />
			
 
				+        </template>
			
 
				+        操作说明
			
 
				+      </a-button>
			
 
				+
			
 
				+      <a-table :data="data" stripe hoverable column-resizable class="table" :loading="loading" :scroll="{
			
 
				+        x: 1600
			
 
				+      }" :pagination="{ showPageSize: true, showJumper: true, defaultPageSize: 15 }">
			
 
				+
			
 
				+        <template #name-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }">
			
 
				+          <div class="custom-filter">
			
 
				+            <a-space direction="vertical">
			
 
				+              <a-input :model-value="filterValue[0]" @input="(value) => setFilterValue([value])" />
			
 
				+              <div class="custom-filter-footer">
			
 
				+                <a-button @click="handleFilterReset">重置</a-button>
			
 
				+                <a-button @click="handleFilterConfirm">确定</a-button>
			
 
				+              </div>
			
 
				+            </a-space>
			
 
				+          </div>
			
 
				+        </template>
			
 
				+
			
 
				+        <template #columns>
			
 
				+          <a-table-column title="学号" :width="120" data-index="student_num" ellipsis tooltip :filterable="{
			
 
				+            filter: (value, record) => (record.student_num ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }"></a-table-column>
			
 
				+          <a-table-column title="用户名" :width="130" :filterable="{
			
 
				+            filter: (value, record) => (record.name ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ record.name }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="性别" :width="80" ellipsis tooltip :filterable="{
			
 
				+            filters: [
			
 
				+              { text: '男', value: 1 },
			
 
				+              { text: '女', value: 2 }
			
 
				+            ],
			
 
				+            filter: (value, record) => record.sex == value
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              <icon-man v-if="record.sex === 1" />
			
 
				+              <icon-woman v-else />
			
 
				+              {{ record.sex === 1 ? '男' : '女' }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="学院" :width="220" data-index="academy_name" ellipsis tooltip :filterable="{
			
 
				+            filter: (value, record) => (record.academy_name ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }"></a-table-column>
			
 
				+          <a-table-column title="跑区" :width="130" :filterable="{
			
 
				+            filter: (value, record) => (record.name ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              <div class="vipcontent">
			
 
				+                <span>{{ record.area || '随机分配' }} </span>
			
 
				+                <!-- <img src="@/assets/vip.svg" alt="vip" height="20" v-if="record.area"> -->
			
 
				+              </div>
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="通知邮箱" :width="180" data-index="email" ellipsis tooltip :filterable="{
			
 
				+            filter: (value, record) => (record.email ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }"></a-table-column>
			
 
				+          <a-table-column title="帐号状态" :width="100" ellipsis tooltip :filterable="{
			
 
				+            filters: [
			
 
				+              { text: '正常', value: 1 },
			
 
				+              { text: '需登录', value: 0 },
			
 
				+              { text: '状态异常', value: 2 },
			
 
				+            ],
			
 
				+            filter: (value, record) => record.state == value
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              <div v-if="record.state === 0" class="state">
			
 
				+                <div class="circle zero"></div>需登录
			
 
				+              </div>
			
 
				+              <div v-else-if="record.state === 1" class="state">
			
 
				+                <div class="circle one"></div>正常
			
 
				+              </div>
			
 
				+              <div v-else class="state">
			
 
				+                <div class="circle else"></div>状态异常
			
 
				+              </div>
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="自动乐跑" :width="100" ellipsis tooltip :filterable="{
			
 
				+            filters: [
			
 
				+              { text: '开启', value: 1 },
			
 
				+              { text: '关闭', value: 0 }
			
 
				+            ],
			
 
				+            filter: (value, record) => record.auto_run == value
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              <a-tag color="green" v-if="record.auto_run">开启</a-tag>
			
 
				+              <a-tag color="red" v-else>关闭</a-tag>
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="自动乐跑时段" :width="100" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ autoTimeLabel(record.auto_time) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="累计次数" data-index="total_num" :width="110" ellipsis tooltip :sortable="{
			
 
				+            sortDirections: ['ascend', 'descend']
			
 
				+          }"></a-table-column>
			
 
				+          <a-table-column title="剩余次数" :width="110" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ record.term_num - record.total_num > 0 ? (record.term_num - record.total_num) : '已完成' }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="添加时间" :width="170" ellipsis tooltip :sortable="{
			
 
				+            sortDirections: ['ascend', 'descend']
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ stramptoTime(record.create_time) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="更新时间" :width="170" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ stramptoTime(record.update_time || record.create_time) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+
			
 
				+          <a-table-column title="" fixed="right" :width="100">
			
 
				+            <template #cell="{ record }">
			
 
				+              <a-dropdown :popup-max-height="false" trigger="hover">
			
 
				+                <a-button>操作 <icon-down /></a-button>
			
 
				+                <template #content>
			
 
				+                  <a-doption @click="editAccount(record)"><icon-edit /> 编辑账号</a-doption>
			
 
				+                  <a-doption @click="SingleRun(record)"><icon-play-circle /> 开始单次乐跑</a-doption>
			
 
				+                  <a-doption @click="ChangeAutoRun(record)"><icon-translate /> {{ record.auto_run ? '关闭' :
			
 
				+                    '开启' }}自动乐跑</a-doption>
			
 
				+                  <a-doption @click="DeleteAccount(record)"><icon-delete /> 删除账号</a-doption>
			
 
				+                </template>
			
 
				+              </a-dropdown>
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+        </template>
			
 
				+      </a-table>
			
 
				+    </a-card>
			
 
				+  </div>
			
 
				+
			
 
				+  <!-- 账号编辑对话框 -->
			
 
				+  <a-modal v-model:visible="visible" title="编辑账号" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
			
 
				+    :ok-loading="ok_loading" esc-to-close closable>
			
 
				+    <a-form :model="form">
			
 
				+      <a-form-item field="student_num" label="学号">
			
 
				+        <a-input v-model="form.student_num" placeholder="账号所有者学号，填写错误将无法登录" />
			
 
				+      </a-form-item>
			
 
				+      <a-form-item field="email" label="通知邮箱">
			
 
				+        <a-input v-model="form.email" placeholder="用于接收乐跑失败、登录失效的通知" />
			
 
				+      </a-form-item>
			
 
				+      <a-form-item field="area" label="乐跑跑区">
			
 
				+        <a-select v-model="form.area" placeholder="请选择乐跑跑区" default-value="">
			
 
				+          <a-option value="">随机分配</a-option>
			
 
				+          <a-option v-for="(item, index) in area" :key="index" :value="item">
			
 
				+            <span class="vipcontent">
			
 
				+              <span>{{ item }} </span>
			
 
				+              <!-- <img src="@/assets/vip.svg" alt="vip" height="20"> -->
			
 
				+            </span>
			
 
				+          </a-option>
			
 
				+        </a-select>
			
 
				+      </a-form-item>
			
 
				+      <a-form-item field="area" label="自动乐跑时段">
			
 
				+        <a-select v-model="form.auto_time" placeholder="请选择每天自动乐跑的时段" :options="auto_time" />
			
 
				+      </a-form-item>
			
 
				+      <!-- <a-form-item field="distance" label="距离区间">
			
 
				+        <a-select v-model="form.distance" placeholder="请选择距离区间">
			
 
				+          <a-option :value="0">默认(2~4Km)</a-option>
			
 
				+          <a-option v-for="(item, index) in distance" :key="index" :value="item.value">
			
 
				+            <div class="vipcontent">
			
 
				+              <div>{{ item.label }} </div>
			
 
				+              <img src="@/assets/vip.svg" alt="vip" height="20">
			
 
				+            </div>
			
 
				+          </a-option>
			
 
				+        </a-select>
			
 
				+      </a-form-item> -->
			
 
				+    </a-form>
			
 
				+  </a-modal>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, reactive, h } from 'vue'
			
 
				+import { useUserStore } from '@/store/modules/user'
			
 
				+import { accountList, deleteAccount, addAccount, changeAutoRun, singleRun } from '@/api/lepao'
			
 
				+import { getCount } from '@/api/goods'
			
 
				+import { Modal, Notification, Message } from '@arco-design/web-vue'
			
 
				+import { IconSearch } from '@arco-design/web-vue/es/icon'
			
 
				+import userCard from './components/userCard.vue'
			
 
				+
			
 
				+const area = ["兰花湖校区跑区", "主校区北跑区", "主校区南跑区", "江北校区跑区"]
			
 
				+const distance = [
			
 
				+  { label: '女生(1.6~2Km)', value: [1.60, 2.00] },
			
 
				+  { label: '男生(2.0~2.4Km)', value: [2.00, 2.40] }
			
 
				+]
			
 
				+const auto_time = Array.from({ length: 17 }, (_, i) => {
			
 
				+  const hour = i + 7
			
 
				+  return {
			
 
				+    label: `${hour} ~ ${hour + 1}时`,
			
 
				+    value: hour
			
 
				+  }
			
 
				+})
			
 
				+const autoTimeLabel = (val) => {
			
 
				+  const match = auto_time.find(item => item.value === val)
			
 
				+  return match ? match.label : '-'
			
 
				+}
			
 
				+
			
 
				+const data = ref([])
			
 
				+const loading = ref(false)
			
 
				+
			
 
				+const email = ref('')
			
 
				+const userCount = ref({})
			
 
				+const getuser = async () => {
			
 
				+  const userStore = useUserStore()
			
 
				+  let userInfo = await userStore.getInfo()
			
 
				+  email.value = userInfo.email
			
 
				+}
			
 
				+
			
 
				+const GetCount = async () => {
			
 
				+  try {
			
 
				+    loading.value = true
			
 
				+    const res = await getCount()
			
 
				+    if (!res || res.code !== 0)
			
 
				+      return Notification.error({
			
 
				+        title: '获取用户数据失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+    userCount.value = res.data
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '获取用户数据失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+  } finally {
			
 
				+    loading.value = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const visible = ref(false)
			
 
				+const ok_loading = ref(false)
			
 
				+const form = reactive({
			
 
				+  id: null,
			
 
				+  student_num: '',
			
 
				+  email: '',
			
 
				+  distance: [2.00, 4.00],
			
 
				+  area: '',
			
 
				+  auto_time: 8,
			
 
				+})
			
 
				+
			
 
				+const download = () => {
			
 
				+  const a = document.createElement('a');
			
 
				+  a.href = 'https://cloud.vite.net.cn/down.php/945623b0bfe7c3acc521abe11f5b3afc.pdf';
			
 
				+  a.download = 'RunForge操作说明.pdf'
			
 
				+  document.body.appendChild(a);
			
 
				+  a.click();
			
 
				+  document.body.removeChild(a);
			
 
				+}
			
 
				+
			
 
				+const editAccount = (item) => {
			
 
				+  if (item) {
			
 
				+    form.id = item.id
			
 
				+    form.student_num = item.student_num
			
 
				+    form.email = item.email
			
 
				+    form.distance[0] = item.min_distance
			
 
				+    form.distance[1] = item.max_distance
			
 
				+    form.area = item.area
			
 
				+    form.auto_time = item.auto_time
			
 
				+  } else {
			
 
				+    form.id = null
			
 
				+    form.student_num = ''
			
 
				+    form.email = email.value
			
 
				+  }
			
 
				+  visible.value = true
			
 
				+}
			
 
				+
			
 
				+const handleBeforeOk = async (done) => {
			
 
				+  try {
			
 
				+    ok_loading.value = true
			
 
				+    const { student_num, email } = form
			
 
				+    if (!student_num || !email) {
			
 
				+      Message.error('请填写完整的账号信息')
			
 
				+      return false
			
 
				+    }
			
 
				+
			
 
				+    let data = {
			
 
				+      ...form,
			
 
				+      min_distance: form.distance[0],
			
 
				+      max_distance: form.distance[1]
			
 
				+    }
			
 
				+
			
 
				+    const res = await addAccount(data)
			
 
				+    if (!res || res.code !== 0) {
			
 
				+      Notification.error({
			
 
				+        title: '保存乐跑账号失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+      return false
			
 
				+    }
			
 
				+
			
 
				+    Message.success('保存成功！')
			
 
				+    done()
			
 
				+    getAccounts()
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '保存乐跑账号失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+    return false
			
 
				+  } finally {
			
 
				+    ok_loading.value = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const handleCancel = () => {
			
 
				+  visible.value = false;
			
 
				+}
			
 
				+
			
 
				+const getAccounts = async () => {
			
 
				+  try {
			
 
				+    loading.value = true
			
 
				+    const res = await accountList()
			
 
				+    if (!res || res.code !== 0)
			
 
				+      return Notification.error({
			
 
				+        title: '获取账号列表失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+    data.value = res.data
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '获取账号列表失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+  } finally {
			
 
				+    loading.value = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const SingleRun = async (item) => {
			
 
				+  Modal.confirm({
			
 
				+    title: '开始乐跑',
			
 
				+    content: () => h('div', [
			
 
				+      h('p', `您是否要为${item.name}乐跑？若乐跑成功将扣减乐跑次数`)
			
 
				+    ]),
			
 
				+    onOk: async () => {
			
 
				+      const res = await singleRun({ student_num: item.student_num })
			
 
				+      if (!res || res.code !== 0)
			
 
				+        return Notification.error({
			
 
				+          title: '提交乐跑任务失败',
			
 
				+          content: res?.msg || '请稍后再试'
			
 
				+        })
			
 
				+      Message.success('提交乐跑任务成功！')
			
 
				+    }
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+const DeleteAccount = async (item) => {
			
 
				+  Modal.confirm({
			
 
				+    title: '删除账号',
			
 
				+    content: () => h('div', [
			
 
				+      h('p', '您是否要删除该账号？该操作不可逆')
			
 
				+    ]),
			
 
				+    onOk: async () => {
			
 
				+      const res = await deleteAccount({ id: item.id })
			
 
				+      if (!res || res.code !== 0)
			
 
				+        return Notification.error({
			
 
				+          title: '删除失败',
			
 
				+          content: res?.msg || '请稍后再试'
			
 
				+        })
			
 
				+      Message.success('删除成功！')
			
 
				+      getAccounts()
			
 
				+    }
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+const ChangeAutoRun = async (record) => {
			
 
				+  const oldValue = record.auto_run;
			
 
				+  record.auto_run = oldValue === 1 ? 0 : 1;
			
 
				+  try {
			
 
				+    const res = await changeAutoRun({ id: record.id });
			
 
				+    if (!res || res.code !== 0) {
			
 
				+      record.auto_run = oldValue;
			
 
				+      Message.error('切换自动乐跑状态失败！');
			
 
				+    } else {
			
 
				+      Message.success(`自动乐跑状态已${record.auto_run === 1 ? '开启' : '关闭'}`)
			
 
				+      getAccounts()
			
 
				+    }
			
 
				+  } catch (error) {
			
 
				+    record.auto_run = oldValue;
			
 
				+    Message.error('切换自动乐跑状态失败！');
			
 
				+  }
			
 
				+};
			
 
				+
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+getAccounts()
			
 
				+getuser()
			
 
				+GetCount()
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container {
			
 
				+  padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.table {
			
 
				+  margin-top: 15px;
			
 
				+
			
 
				+  .state {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .circle {
			
 
				+      border-radius: 50%;
			
 
				+      height: 8px;
			
 
				+      min-height: 8px;
			
 
				+      width: 8px;
			
 
				+      min-width: 8px;
			
 
				+      margin-right: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .zero {
			
 
				+      background-color: rgb(var(--orange-6));
			
 
				+    }
			
 
				+
			
 
				+    .one {
			
 
				+      background-color: rgb(var(--green-6));
			
 
				+    }
			
 
				+
			
 
				+    .else {
			
 
				+      background-color: rgb(var(--red-6));
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.custom-filter {
			
 
				+  padding: 20px;
			
 
				+  background: var(--color-bg-5);
			
 
				+  border: 1px solid var(--color-neutral-3);
			
 
				+  border-radius: var(--border-radius-medium);
			
 
				+  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
			
 
				+}
			
 
				+
			
 
				+.custom-filter-footer {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+
			
 
				+.vipcontent {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/lepao/lepaoRecords/index.vue
+++ b/src/pages/lepao/lepaoRecords/index.vue
@@ -0,0 +1,278 @@
 
				+<template>
			
 
				+
			
 
				+  <div class="container">
			
 
				+    <Breadcrumb :items="['校园乐跑', '乐跑记录']" />
			
 
				+    <a-card title="乐跑记录">
			
 
				+      <a-row>
			
 
				+        <a-col :flex="'1000px'">
			
 
				+          <a-form :model="queryData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
			
 
				+            label-align="left">
			
 
				+            <a-row :gutter="16">
			
 
				+              <a-col :span="12">
			
 
				+                <a-form-item field="name" label="账号名称">
			
 
				+                  <a-input v-model="queryData.name" placeholder="请输入账号名称" />
			
 
				+                </a-form-item>
			
 
				+              </a-col>
			
 
				+              <a-col :span="12">
			
 
				+                <a-form-item field="lepao_account" label="学号">
			
 
				+                  <a-input-number v-model="queryData.lepao_account" placeholder="请输入学号" :step="1" :precision="0" />
			
 
				+                </a-form-item>
			
 
				+              </a-col>
			
 
				+              <a-col :span="12">
			
 
				+                <a-form-item field="email" label="通知邮箱">
			
 
				+                  <a-input v-model="queryData.email" placeholder="请输入通知邮箱" />
			
 
				+                </a-form-item>
			
 
				+              </a-col>
			
 
				+            </a-row>
			
 
				+          </a-form>
			
 
				+        </a-col>
			
 
				+        <a-divider style="height: 84px" direction="vertical" />
			
 
				+        <a-col :flex="1" >
			
 
				+          <a-space direction="vertical" :size="18">
			
 
				+            <a-button type="primary" @click="search">
			
 
				+              <template #icon>
			
 
				+                <icon-search />
			
 
				+              </template>
			
 
				+              搜索
			
 
				+            </a-button>
			
 
				+            <a-button @click="reset">
			
 
				+              <template #icon>
			
 
				+                <icon-refresh />
			
 
				+              </template>
			
 
				+              重置
			
 
				+            </a-button>
			
 
				+          </a-space>
			
 
				+        </a-col>
			
 
				+      </a-row>
			
 
				+
			
 
				+      <a-table :data="data" stripe hoverable column-resizable class="table" :loading="loading" :pagination="{
			
 
				+        showPageSize: true,
			
 
				+        showJumper: true,
			
 
				+        showTotal: true,
			
 
				+        pageSize: pagination.pagesize,
			
 
				+        current: pagination.current,
			
 
				+        total: pagination.total
			
 
				+      }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
			
 
				+
			
 
				+        <template #name-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }">
			
 
				+          <div class="custom-filter">
			
 
				+            <a-space direction="vertical">
			
 
				+              <a-input :model-value="filterValue[0]" @input="(value) => setFilterValue([value])" />
			
 
				+              <div class="custom-filter-footer">
			
 
				+                <a-button @click="handleFilterReset">重置</a-button>
			
 
				+                <a-button @click="handleFilterConfirm">确定</a-button>
			
 
				+              </div>
			
 
				+            </a-space>
			
 
				+          </div>
			
 
				+        </template>
			
 
				+
			
 
				+        <template #columns>
			
 
				+          <a-table-column title="学号" :width="120" data-index="lepao_account" ellipsis tooltip :filterable="{
			
 
				+            filter: (value, record) => (record.lepao_account ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }"></a-table-column>
			
 
				+          <a-table-column title="账号名称" :filterable="{
			
 
				+            filter: (value, record) => (record.name ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ record.name }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="状态" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              <div v-if="record.result.record_failed_reason === ''" class="state">
			
 
				+                <div class="circle one"></div>正常
			
 
				+              </div>
			
 
				+              <div v-else class="state">
			
 
				+                <div class="circle else"></div>{{ record.result.record_failed_reason }}
			
 
				+              </div>
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="跑区" :filterable="{
			
 
				+            filter: (value, record) => (record.result.pass_tit ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ record.result.pass_tit }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="乐跑距离" :width="120" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ record.result.distance }} Km
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="跑步时长" :width="120" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ formatSecondsToMinSec(record.result.time) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="平均配速" :width="120" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ calculatePace(record.result.time, record.result.distance) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="乐跑时间" :width="170" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ stramptoTime(record.time) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="操作" :width="170" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              <a-button @click="$router.push(`/lepao/recordDetail/${record.id}`)">查看详情</a-button>
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+        </template>
			
 
				+      </a-table>
			
 
				+    </a-card>
			
 
				+  </div>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, reactive, h } from 'vue'
			
 
				+import { lepaoRecords } from '@/api/lepao'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { IconSearch } from '@arco-design/web-vue/es/icon'
			
 
				+
			
 
				+const data = ref([])
			
 
				+const loading = ref(false)
			
 
				+
			
 
				+const queryData = reactive({
			
 
				+  name: '',
			
 
				+  lepao_account: '',
			
 
				+  email: ''
			
 
				+})
			
 
				+
			
 
				+const pagination = reactive({
			
 
				+  total: 0,
			
 
				+  current: 1,
			
 
				+  pagesize: 20
			
 
				+})
			
 
				+
			
 
				+const search = () => {
			
 
				+  pagination.current = 1
			
 
				+  getRecords()
			
 
				+}
			
 
				+
			
 
				+const reset = () => {
			
 
				+  pagination.current = 1
			
 
				+  queryData.name = ''
			
 
				+  queryData.lepao_account = ''
			
 
				+  queryData.email = ''
			
 
				+  queryData.area = ''
			
 
				+  getRecords()
			
 
				+}
			
 
				+
			
 
				+const getRecords = async () => {
			
 
				+  try {
			
 
				+    loading.value = true
			
 
				+    const reqData = {
			
 
				+      ...queryData,
			
 
				+      pagesize: pagination.pagesize,
			
 
				+      current: pagination.current
			
 
				+    }
			
 
				+    const res = await lepaoRecords(reqData)
			
 
				+    if (!res || res.code !== 0)
			
 
				+      return Notification.error({
			
 
				+        title: '获取乐跑记录失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+    data.value = res.data
			
 
				+    pagination.total = res.pagination.total
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '获取乐跑记录失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+  } finally {
			
 
				+    loading.value = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 分页 - 页码变化
			
 
				+const handlePageChange = (page) => {
			
 
				+  pagination.current = page
			
 
				+  getPathList()
			
 
				+}
			
 
				+
			
 
				+// 分页 - 每页条数变化
			
 
				+const handlePageSizeChange = (size) => {
			
 
				+  pagination.pagesize = size
			
 
				+  pagination.current = 1 // 页大小变化后回到第一页
			
 
				+  getPathList()
			
 
				+}
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+function calculatePace(seconds, kilometers) {
			
 
				+  const paceInSeconds = seconds / kilometers;
			
 
				+  const minutes = Math.floor(paceInSeconds / 60);
			
 
				+  const remainingSeconds = Math.round(paceInSeconds % 60);
			
 
				+
			
 
				+  return `${minutes}'${remainingSeconds.toString().padStart(2, '0')}''`;
			
 
				+}
			
 
				+
			
 
				+function formatSecondsToMinSec(totalSeconds) {
			
 
				+  const minutes = Math.floor(totalSeconds / 60);
			
 
				+  const seconds = totalSeconds % 60;
			
 
				+
			
 
				+  return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
			
 
				+}
			
 
				+
			
 
				+getRecords()
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container {
			
 
				+  padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.table {
			
 
				+  margin-top: 15px;
			
 
				+
			
 
				+  .state {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .circle {
			
 
				+      border-radius: 50%;
			
 
				+      height: 8px;
			
 
				+      min-height: 8px;
			
 
				+      width: 8px;
			
 
				+      min-width: 8px;
			
 
				+      margin-right: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .zero {
			
 
				+      background-color: rgb(var(--orange-6));
			
 
				+    }
			
 
				+
			
 
				+    .one {
			
 
				+      background-color: rgb(var(--green-6));
			
 
				+    }
			
 
				+
			
 
				+    .else {
			
 
				+      background-color: rgb(var(--red-6));
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.custom-filter {
			
 
				+  padding: 20px;
			
 
				+  background: var(--color-bg-5);
			
 
				+  border: 1px solid var(--color-neutral-3);
			
 
				+  border-radius: var(--border-radius-medium);
			
 
				+  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
			
 
				+}
			
 
				+
			
 
				+.custom-filter-footer {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/lepao/lepaoRecords/recordDetail.vue
+++ b/src/pages/lepao/lepaoRecords/recordDetail.vue
@@ -0,0 +1,89 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <Breadcrumb :items="['乐跑记录', '记录详情']" />
			
 
				+        <a-card title="记录详情">
			
 
				+            <a-descriptions :data="info" :column="2" />
			
 
				+            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD style="margin-top: 10px;"/>
			
 
				+        </a-card>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, onMounted } from 'vue'
			
 
				+import { GetRecordDetail } from '@/api/lepao'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { useRoute } from 'vue-router'
			
 
				+import MapContainer from '@/components/Map/MapContainer.vue'
			
 
				+
			
 
				+const route = useRoute()
			
 
				+
			
 
				+const loading = ref(false)
			
 
				+const showMap = ref(false)
			
 
				+const data = ref({})
			
 
				+const info = ref([])
			
 
				+
			
 
				+const getRecordDetail = async (id) => {
			
 
				+    try {
			
 
				+        loading.value = true
			
 
				+        showMap.value = false
			
 
				+        const res = await GetRecordDetail({ id })
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Notification.error({
			
 
				+                title: '获取路径数据失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+
			
 
				+        data.value = res.data
			
 
				+        showMap.value = true
			
 
				+
			
 
				+        info.value = [
			
 
				+            { label: '账号名称', value: res.data.name },
			
 
				+            { label: '乐跑账号', value: res.data.lepao_account },
			
 
				+            { label: '跑区名称', value: res.data.result.pass_tit },
			
 
				+            { label: '记录时间', value: stramptoTime(res.data.time) },
			
 
				+            { label: '开始时间', value: stramptoTime(res.data.result.start_time * 1000) },
			
 
				+            { label: '打卡点数量', value: res.data.result.point_list.length },
			
 
				+            { label: '跑步距离', value: res.data.result.distance + ' Km' },
			
 
				+            { label: '跑步时长', value: formatSecondsToMinSec(res.data.result.time ) },
			
 
				+            { label: '平均配速', value: calculatePace(res.data.result.time, res.data.result.distance) }
			
 
				+        ]
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '获取路径数据失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+    } finally {
			
 
				+        loading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+    getRecordDetail(route.params.id)
			
 
				+})
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+function calculatePace(seconds, kilometers) {
			
 
				+  const paceInSeconds = seconds / kilometers;
			
 
				+  const minutes = Math.floor(paceInSeconds / 60);
			
 
				+  const remainingSeconds = Math.round(paceInSeconds % 60);
			
 
				+
			
 
				+  return `${minutes}'${remainingSeconds.toString().padStart(2, '0')}''`;
			
 
				+}
			
 
				+
			
 
				+function formatSecondsToMinSec(totalSeconds) {
			
 
				+    const minutes = Math.floor(totalSeconds / 60);
			
 
				+    const seconds = totalSeconds % 60;
			
 
				+
			
 
				+    return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container {
			
 
				+    padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/path/pathDetail.vue
+++ b/src/pages/path/pathDetail.vue
@@ -0,0 +1,132 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <Breadcrumb :items="['路径数据', '路径详情']" />
			
 
				+        <a-card title="路径详情">
			
 
				+            <a-descriptions :data="info" :column="2" />
			
 
				+            <div class="buttonGroup">
			
 
				+                <a-button type="primary" status="danger" size="large" :loading="buttonLoading"
			
 
				+                    @click="changePathState(2)" :disabled="data.state === 2">{{ data.state === 2 ? '已拒绝' :
			
 
				+                    '拒绝'}}</a-button>
			
 
				+                <a-button type="primary" status="success" size="large" :loading="buttonLoading"
			
 
				+                    @click="changePathState(1)" :disabled="data.state === 1">{{ data.state === 1 ? '已通过' :
			
 
				+                    '通过'}}</a-button>
			
 
				+            </div>
			
 
				+            <MapContainer v-if="showMap" :point_list="data.point_list" :pathData="data.data" />
			
 
				+        </a-card>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, watch, onMounted } from 'vue'
			
 
				+import { GetPathDetail, ChangePathState } from '@/api/pathData'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+import MapContainer from '@/components/Map/MapContainer.vue'
			
 
				+
			
 
				+const route = useRoute()
			
 
				+const router = useRouter()
			
 
				+
			
 
				+const loading = ref(false)
			
 
				+const buttonLoading = ref(false)
			
 
				+const showMap = ref(false)
			
 
				+const data = ref({})
			
 
				+const nextId = ref()
			
 
				+const info = ref([])
			
 
				+
			
 
				+function getState(state) {
			
 
				+    switch (state) {
			
 
				+        case 0:
			
 
				+            return '待审核'
			
 
				+        case 1:
			
 
				+            return '审核通过'
			
 
				+        case 2:
			
 
				+            return '审核失败'
			
 
				+    }
			
 
				+    return '未知'
			
 
				+}
			
 
				+
			
 
				+const changePathState = async (state) => {
			
 
				+    try {
			
 
				+        buttonLoading.value = true
			
 
				+        const res = await ChangePathState({ id: data.value.id, state })
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Notification.error({
			
 
				+                title: '改变路径状态失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+        Notification.success({
			
 
				+            title: '改变成功！',
			
 
				+            content: res.msg
			
 
				+        })
			
 
				+        router.push(`/path/detail/${res.data || Number(data.value.id) + 1}`)
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '改变路径状态失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+    } finally {
			
 
				+        buttonLoading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const getPathDetail = async (id) => {
			
 
				+    try {
			
 
				+        loading.value = true
			
 
				+        showMap.value = false
			
 
				+        const res = await GetPathDetail({ id })
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Notification.error({
			
 
				+                title: '获取路径数据失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+
			
 
				+        data.value = res.data
			
 
				+        showMap.value = true
			
 
				+
			
 
				+        info.value = [
			
 
				+            { label: '路径ID', value: res.data.id },
			
 
				+            { label: '跑区名称', value: res.data.run_zone_name },
			
 
				+            { label: '跑步距离', value: res.data.distance + ' Km' },
			
 
				+            { label: '跑步时长', value: formatSecondsToMinSec(res.data.time) },
			
 
				+            { label: '平均配速', value: res.data.speed },
			
 
				+            { label: '审核状态', value: getState(res.data.state) }
			
 
				+        ]
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '获取路径数据失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+    } finally {
			
 
				+        loading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+    getPathDetail(route.params.id)
			
 
				+})
			
 
				+
			
 
				+watch(() => route.params.id, (newId) => {
			
 
				+    getPathDetail(newId)
			
 
				+})
			
 
				+
			
 
				+function formatSecondsToMinSec(totalSeconds) {
			
 
				+    const minutes = Math.floor(totalSeconds / 60);
			
 
				+    const seconds = totalSeconds % 60;
			
 
				+
			
 
				+    return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container {
			
 
				+    padding: 0 20px 20px 20px;
			
 
				+
			
 
				+    .buttonGroup {
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        gap: 20px;
			
 
				+        margin: 15px;
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/path/pathList.vue
+++ b/src/pages/path/pathList.vue
@@ -0,0 +1,209 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <Breadcrumb :items="['路径数据', '路径列表']" />
			
 
				+
			
 
				+        <a-card title="路径列表">
			
 
				+            <a-row>
			
 
				+                <a-col :flex="1">
			
 
				+                    <a-form :model="queryData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
			
 
				+                        label-align="left">
			
 
				+                        <a-row :gutter="16">
			
 
				+                            <a-col :span="8">
			
 
				+                                <a-form-item field="area" label="跑区">
			
 
				+                                    <a-select v-model="queryData.area" placeholder="请选择乐跑跑区" default-value="">
			
 
				+                                        <a-option value="">所有</a-option>
			
 
				+                                        <a-option v-for="(item, index) in areas" :key="index" :value="item">
			
 
				+                                            {{ item }}
			
 
				+                                        </a-option>
			
 
				+                                    </a-select>
			
 
				+                                </a-form-item>
			
 
				+                            </a-col>
			
 
				+                            <a-col :span="8">
			
 
				+                                <a-form-item field="min_distance" label="最短距离">
			
 
				+                                    <a-input-number v-model="queryData.min_distance" placeholder="请输入最短距离" :step="0.01"
			
 
				+                                        :precision="2" />
			
 
				+                                </a-form-item>
			
 
				+                            </a-col>
			
 
				+                            <a-col :span="8">
			
 
				+                                <a-form-item field="max_distance" label="最长距离">
			
 
				+                                    <a-input-number v-model="queryData.max_distance" placeholder="请输入最长距离" :step="0.01"
			
 
				+                                        :precision="2" />
			
 
				+                                </a-form-item>
			
 
				+                            </a-col>
			
 
				+                            <a-col :span="8">
			
 
				+                                <a-form-item field="area" label="状态">
			
 
				+                                    <a-select v-model="queryData.state" :options="state" placeholder="请选择路径状态"
			
 
				+                                        :default-value="-1" />
			
 
				+                                </a-form-item>
			
 
				+                            </a-col>
			
 
				+                        </a-row>
			
 
				+                    </a-form>
			
 
				+                </a-col>
			
 
				+                <a-divider style="height: 84px" direction="vertical" />
			
 
				+                <a-col :flex="'86px'" style="text-align: right">
			
 
				+                    <a-space direction="vertical" :size="18">
			
 
				+                        <a-button type="primary" @click="search">
			
 
				+                            <template #icon>
			
 
				+                                <icon-search />
			
 
				+                            </template>
			
 
				+                            搜索
			
 
				+                        </a-button>
			
 
				+                        <a-button @click="reset">
			
 
				+                            <template #icon>
			
 
				+                                <icon-refresh />
			
 
				+                            </template>
			
 
				+                            重置
			
 
				+                        </a-button>
			
 
				+                    </a-space>
			
 
				+                </a-col>
			
 
				+            </a-row>
			
 
				+
			
 
				+            <a-table :data="data" stripe hoverable column-resizable class="table" :loading="loading" :columns="columns"
			
 
				+                :pagination="{
			
 
				+                    showPageSize: true,
			
 
				+                    showJumper: true,
			
 
				+                    showTotal: true,
			
 
				+                    pageSize: pagination.pagesize,
			
 
				+                    current: pagination.current,
			
 
				+                    total: pagination.total
			
 
				+                }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
			
 
				+                <template #time="{ record }">
			
 
				+                    {{ formatSecondsToMinSec(record.time) }}
			
 
				+                </template>
			
 
				+                <template #state="{ record }">
			
 
				+                    <a-tag color="blue" v-if="!record.state">待审核</a-tag>
			
 
				+                    <a-tag color="green" v-else-if="record.state === 1">审核通过</a-tag>
			
 
				+                    <a-tag color="red" v-else-if="record.state === 2">审核失败</a-tag>
			
 
				+                </template>
			
 
				+                <template #optional="{ record }">
			
 
				+                    <a-button @click="$router.push(`/path/detail/${record.id}`)">查看详情</a-button>
			
 
				+                </template>
			
 
				+            </a-table>
			
 
				+        </a-card>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, reactive, onMounted } from 'vue'
			
 
				+import { GetPathList } from '@/api/pathData'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+
			
 
				+const queryData = reactive({
			
 
				+    area: '',
			
 
				+    min_distance: 1.60,
			
 
				+    max_distance: 10.00,
			
 
				+    state: -1
			
 
				+})
			
 
				+
			
 
				+const pagination = reactive({
			
 
				+    total: 0,
			
 
				+    current: 1, // 默认从第1页开始
			
 
				+    pagesize: 20
			
 
				+})
			
 
				+
			
 
				+const loading = ref(false)
			
 
				+const data = ref([])
			
 
				+
			
 
				+const state = [
			
 
				+    { label: '全部', value: -1 }, { label: '待审核', value: 0 }, { label: '审核通过', value: 1 }, { label: '审核失败', value: 2 }
			
 
				+]
			
 
				+const areas = ["兰花湖校区跑区", "主校区北跑区", "主校区南跑区", "江北校区跑区"]
			
 
				+
			
 
				+const columns = [{
			
 
				+    title: 'ID',
			
 
				+    dataIndex: 'id',
			
 
				+}, {
			
 
				+    title: '跑区',
			
 
				+    dataIndex: 'run_zone_name',
			
 
				+}, {
			
 
				+    title: '跑步距离(Km)',
			
 
				+    dataIndex: 'distance',
			
 
				+}, {
			
 
				+    title: '用时',
			
 
				+    slotName: 'time'
			
 
				+}, {
			
 
				+    title: '配速',
			
 
				+    dataIndex: 'speed',
			
 
				+}, {
			
 
				+    title: '状态',
			
 
				+    slotName: 'state'
			
 
				+}, {
			
 
				+    title: '操作',
			
 
				+    slotName: 'optional'
			
 
				+}]
			
 
				+
			
 
				+const search = () => {
			
 
				+    pagination.current = 1
			
 
				+    getPathList()
			
 
				+}
			
 
				+
			
 
				+const reset = () => {
			
 
				+    pagination.current = 1
			
 
				+    queryData.area = ''
			
 
				+    queryData.state = -1
			
 
				+    queryData.min_distance = 1.60
			
 
				+    queryData.max_distance = 10.00
			
 
				+    getPathList()
			
 
				+}
			
 
				+
			
 
				+const getPathList = async () => {
			
 
				+    try {
			
 
				+        loading.value = true
			
 
				+        const reqData = {
			
 
				+            ...queryData,
			
 
				+            pagesize: pagination.pagesize,
			
 
				+            current: pagination.current
			
 
				+        }
			
 
				+        const res = await GetPathList(reqData)
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Notification.error({
			
 
				+                title: '获取路径数据失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+
			
 
				+        data.value = res.data
			
 
				+        pagination.total = res.pagination.total
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '获取路径数据失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+    } finally {
			
 
				+        loading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// 分页 - 页码变化
			
 
				+const handlePageChange = (page) => {
			
 
				+    pagination.current = page
			
 
				+    getPathList()
			
 
				+}
			
 
				+
			
 
				+// 分页 - 每页条数变化
			
 
				+const handlePageSizeChange = (size) => {
			
 
				+    pagination.pagesize = size
			
 
				+    pagination.current = 1 // 页大小变化后回到第一页
			
 
				+    getPathList()
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+    getPathList()
			
 
				+})
			
 
				+
			
 
				+function formatSecondsToMinSec(totalSeconds) {
			
 
				+    const minutes = Math.floor(totalSeconds / 60);
			
 
				+    const seconds = totalSeconds % 60;
			
 
				+
			
 
				+    return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.container {
			
 
				+    padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.table {
			
 
				+    margin-top: 15px;
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/store/goodsDetail/index.vue
+++ b/src/pages/store/goodsDetail/index.vue
@@ -0,0 +1,166 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <Breadcrumb :items="['Forge商城', '商品详情', data?.name]" />
			
 
				+        <a-card class="goodsdetail">
			
 
				+            <div class="title">
			
 
				+                {{ data?.name }} <a-tag v-if="data?.limit > 0" color="orange" size="large">限购{{ data?.limit }}件</a-tag>
			
 
				+            </div>
			
 
				+            <div class="price">
			
 
				+                ￥ {{ data?.price }}
			
 
				+            </div>
			
 
				+            <div class="num">
			
 
				+                剩余库存：{{ data?.num > 99 ? '充足' : data?.num }}
			
 
				+            </div>
			
 
				+
			
 
				+            <a-button class="buy-button" type="primary" size="large" @click="buy">立即购买</a-button>
			
 
				+
			
 
				+            <a-divider orientation="center" style="margin-top: 30px;"><span
			
 
				+                    style="font-size: 1.2em;">商品详情</span></a-divider>
			
 
				+            <a-skeleton animation :loading="loading">
			
 
				+                <a-space direction="vertical" :style="{ width: '100%' }" size="large">
			
 
				+                    <a-skeleton-shape />
			
 
				+                    <a-skeleton-line :rows="5" />
			
 
				+                </a-space>
			
 
				+            </a-skeleton>
			
 
				+            <div class="content">
			
 
				+                <div v-html="content"></div>
			
 
				+            </div>
			
 
				+        </a-card>
			
 
				+    </div>
			
 
				+
			
 
				+    <!--下单对话框 -->
			
 
				+    <a-modal v-model:visible="visible" title="确认订单" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
			
 
				+        :ok-loading="ok_loading" esc-to-close closable>
			
 
				+        <a-form :model="form">
			
 
				+            <a-form-item field="name" label="商品名称">
			
 
				+                <b>{{ form.name }}</b>
			
 
				+            </a-form-item>
			
 
				+            <a-form-item field="price" label="支付价格">
			
 
				+                <b>￥ {{ form.price }}</b>
			
 
				+            </a-form-item>
			
 
				+            <a-form-item field="pay_type" label="支付方式">
			
 
				+                <a-select v-model="form.pay_type" placeholder="请选择支付方式">
			
 
				+                    <a-option value="alipay"><icon-alipay-circle /> 支付宝</a-option>
			
 
				+                    <!-- <a-option value="qqpay"><icon-qq /> QQ支付</a-option> -->
			
 
				+                    <a-option value="wxpay"><icon-wechatpay /> 微信支付</a-option>
			
 
				+                </a-select>
			
 
				+            </a-form-item>
			
 
				+        </a-form>
			
 
				+    </a-modal>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, reactive } from 'vue'
			
 
				+import { getGoods } from '@/api/goods'
			
 
				+import { createOrder } from '@/api/order'
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+import { Notification, Message } from '@arco-design/web-vue'
			
 
				+
			
 
				+const route = useRoute()
			
 
				+const router = useRouter()
			
 
				+const { id } = route.params
			
 
				+
			
 
				+const loading = ref(true)
			
 
				+const data = ref({})
			
 
				+const content = ref('')
			
 
				+
			
 
				+const visible = ref(false)
			
 
				+const form = reactive({
			
 
				+    name: "",
			
 
				+    price: 0,
			
 
				+    pay_type: ''
			
 
				+})
			
 
				+
			
 
				+const handleBeforeOk = async (done) => {
			
 
				+    try {
			
 
				+        if (!form.pay_type) {
			
 
				+            Message.error('请选择支付方式！')
			
 
				+            return false
			
 
				+        }
			
 
				+
			
 
				+        const res = await createOrder({ goods_id: id, pay_type: form.pay_type })
			
 
				+        if (!res || res.code !== 0) {
			
 
				+            Notification.error({
			
 
				+                title: '创建订单失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+            return false
			
 
				+        }
			
 
				+
			
 
				+        router.push(`/store/orderDetail/${res.id}`)
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '创建订单失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+        return false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const handleCancel = () => {
			
 
				+    visible.value = false;
			
 
				+}
			
 
				+
			
 
				+const getGoodsDetail = async () => {
			
 
				+    try {
			
 
				+        loading.value = true
			
 
				+        const res = await getGoods({ id })
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Notification.error({
			
 
				+                title: '获取商品列表失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+        data.value = res.data
			
 
				+        content.value = decodeURI(atob(res.data.content || ''))
			
 
				+        form.name = data.value.name
			
 
				+        form.price = data.value.price
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '获取商品列表失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+    } finally {
			
 
				+        loading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const buy = () => {
			
 
				+    visible.value = true
			
 
				+}
			
 
				+
			
 
				+getGoodsDetail()
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.container {
			
 
				+    padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.goodsdetail {
			
 
				+    border-radius: 5px;
			
 
				+
			
 
				+    .title {
			
 
				+        font-size: 1.8em;
			
 
				+    }
			
 
				+
			
 
				+    .price {
			
 
				+        font-size: 2em;
			
 
				+        color: rgb(22, 93, 255);
			
 
				+    }
			
 
				+
			
 
				+    .num {
			
 
				+        font-size: 1.1em;
			
 
				+    }
			
 
				+
			
 
				+    .buy-button {
			
 
				+        position: relative;
			
 
				+        left: 50%;
			
 
				+        translate: (-50%);
			
 
				+        margin-top: 20px;
			
 
				+    }
			
 
				+
			
 
				+    .content {
			
 
				+        padding: 0 20px;
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/store/goodsList/index.vue
+++ b/src/pages/store/goodsList/index.vue
@@ -0,0 +1,115 @@
 
				+<template>
			
 
				+    <div class="container">
			
 
				+        <Breadcrumb :items="['Forge商城', '商品列表']" />
			
 
				+        <a-card>
			
 
				+            <a-space size="large">
			
 
				+                <a-statistic title="剩余乐跑次数" :value="userCount?.lepao_count" show-group-separator />
			
 
				+            </a-space>
			
 
				+        </a-card>
			
 
				+        <a-card title="商品列表" style="margin-top: 20px;">
			
 
				+            <a-list hoverable :loading="loading">
			
 
				+                <a-list-item v-for="(item, index) in data" :key="index">
			
 
				+                    <div class="list">
			
 
				+                        <div class="icon">
			
 
				+                            <icon-gift :size="25" />
			
 
				+                        </div>
			
 
				+                        <div class="info">
			
 
				+                            <span class="title">
			
 
				+                                {{ item.name }}
			
 
				+                            </span>
			
 
				+                            <span class="label">
			
 
				+                                <a-tag size="small">库存：{{ item.num > 99 ? '充足' : item.num }}</a-tag>
			
 
				+                                ￥ {{ item.price }}
			
 
				+                            </span>
			
 
				+                        </div>
			
 
				+                        <div class="button">
			
 
				+                            <a-button type="primary" size="small"
			
 
				+                                @click="$router.push(`/store/goodsDetail/${item.id}`)">查看详情</a-button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </a-list-item>
			
 
				+            </a-list>
			
 
				+        </a-card>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref } from 'vue'
			
 
				+import { getGoodsList, getCount } from '@/api/goods'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+
			
 
				+const data = ref([])
			
 
				+const userCount = ref({})
			
 
				+const loading = ref(false)
			
 
				+
			
 
				+const getGoods = async () => {
			
 
				+    try {
			
 
				+        loading.value = true
			
 
				+        const res = await getGoodsList()
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Notification.error({
			
 
				+                title: '获取商品列表失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+        data.value = res.data
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '获取商品列表失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+    } finally {
			
 
				+        loading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const GetCount = async () => {
			
 
				+    try {
			
 
				+        loading.value = true
			
 
				+        const res = await getCount()
			
 
				+        if (!res || res.code !== 0)
			
 
				+            return Notification.error({
			
 
				+                title: '获取用户数据失败！',
			
 
				+                content: res?.msg || '请稍后再试'
			
 
				+            })
			
 
				+        userCount.value = res.data
			
 
				+    } catch (error) {
			
 
				+        Notification.error({
			
 
				+            title: '获取用户数据失败！',
			
 
				+            content: error.message || '请稍后再试'
			
 
				+        })
			
 
				+    } finally {
			
 
				+        loading.value = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+getGoods()
			
 
				+GetCount()
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.container {
			
 
				+    padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.list {
			
 
				+    display: flex;
			
 
				+    min-height: 60px;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .info {
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        margin-left: 15px;
			
 
				+        margin-right: 15px;
			
 
				+
			
 
				+
			
 
				+        .title {
			
 
				+            font-size: 1.3em;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .button {
			
 
				+        margin-left: auto;
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/store/orders/orderDetail/index.vue
+++ b/src/pages/store/orders/orderDetail/index.vue
@@ -0,0 +1,247 @@
 
				+<template>
			
 
				+  <div class="container">
			
 
				+    <Breadcrumb :items="['Forge商城', '订单详情']" />
			
 
				+    <a-space direction="vertical" :size="16" fill>
			
 
				+      <a-card class="general-card" title="订单状态">
			
 
				+        <div class="step">
			
 
				+          <a-steps :current="current" :status="status">
			
 
				+            <a-step :description="oneDes">{{ oneText }}</a-step>
			
 
				+            <a-step :description="twoDes">{{ twoText }}</a-step>
			
 
				+            <a-step :description="threeDes">{{ threeText }}</a-step>
			
 
				+          </a-steps>
			
 
				+        </div>
			
 
				+        <a-button type="primary" size="large" class="paybutton" @click="pay"
			
 
				+          v-if="data?.state === 0 && payData != {}">立即支付</a-button>
			
 
				+
			
 
				+      </a-card>
			
 
				+      <a-card class="general-card">
			
 
				+        <a-descriptions style="margin-top: 20px" :data="orderData" size="large" title="订单详情" :column="1"/>
			
 
				+      </a-card>
			
 
				+      <a-card class="general-card" title="商品详情">
			
 
				+        <div v-html="content"></div>
			
 
				+      </a-card>
			
 
				+
			
 
				+    </a-space>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, onUnmounted, onMounted, h } from 'vue'
			
 
				+import { orderDeatil } from '@/api/order'
			
 
				+import { useRoute } from 'vue-router'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { Message } from '@arco-design/web-vue'
			
 
				+import { IconQq,IconWechatpay, IconAlipayCircle } from '@arco-design/web-vue/es/icon'
			
 
				+const route = useRoute()
			
 
				+const { id } = route.params
			
 
				+
			
 
				+const loading = ref(true)
			
 
				+const data = ref({})
			
 
				+const payData = ref({})
			
 
				+
			
 
				+const current = ref(1)
			
 
				+const status = ref('process')
			
 
				+const oneText = ref('待支付')
			
 
				+const twoText = ref('待处理')
			
 
				+const threeText = ref('已完成')
			
 
				+const oneDes = ref('')
			
 
				+const twoDes = ref('')
			
 
				+const threeDes = ref('')
			
 
				+
			
 
				+const orderData = ref([])
			
 
				+const content = ref('')
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+function getPayType(type) {
			
 
				+  switch(type) {
			
 
				+    case 'alipay':
			
 
				+      return [h(IconAlipayCircle), ' 支付宝']
			
 
				+    case 'qqpay':
			
 
				+      return [h(IconQq), ' QQ支付']
			
 
				+    case 'wxpay':
			
 
				+      return [h(IconWechatpay), ' 微信支付']
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const getOrderDeatil = async () => {
			
 
				+  try {
			
 
				+    const res = await orderDeatil({ orderId: id })
			
 
				+    if (!res || res.code !== 0)
			
 
				+      return Notification.error({
			
 
				+        title: '获取订单详情失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+    data.value = res.data
			
 
				+    content.value = decodeURI(atob(res.data.content || ''))
			
 
				+
			
 
				+    let detail = []
			
 
				+    if(res.data.name)
			
 
				+      detail.push({label: '商品名称', value: res.data.name})
			
 
				+    if(res.data.price)
			
 
				+      detail.push({label: '支付价格', value: res.data.price})
			
 
				+    if(res.data.pay_type)
			
 
				+      detail.push({label: '支付方式', value: getPayType(res.data.pay_type)})
			
 
				+    if(res.data.orderId)
			
 
				+      detail.push({label: '平台订单号', value: res.data.orderId})
			
 
				+    if(res.data.pay_id)
			
 
				+      detail.push({label: '支付平台订单号', value: res.data.pay_id})
			
 
				+    if(res.data.create_time)
			
 
				+      detail.push({label: '下单时间', value: stramptoTime(res.data.create_time)})
			
 
				+    if(res.data.pay_time)
			
 
				+      detail.push({label: '支付时间', value: stramptoTime(res.data.pay_time)})
			
 
				+
			
 
				+    orderData.value = detail
			
 
				+
			
 
				+    if (res.payData)
			
 
				+      payData.value = res.payData
			
 
				+    else
			
 
				+      payData.value = {}
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '获取订单详情失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+let timer = null
			
 
				+
			
 
				+// 轮询
			
 
				+const startPolling = () => {
			
 
				+  if (!timer) {
			
 
				+    timer = setInterval(async () => {
			
 
				+      await getOrderDeatil()
			
 
				+      getOrderState()
			
 
				+    }, 1000)
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 停止轮询
			
 
				+const stopPolling = () => {
			
 
				+  if (timer) {
			
 
				+    clearInterval(timer)
			
 
				+    timer = null
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+onMounted(async () => {
			
 
				+  loading.value = true
			
 
				+  await getOrderDeatil()
			
 
				+  loading.value = false
			
 
				+  startPolling()
			
 
				+})
			
 
				+
			
 
				+// 组件销毁时停止轮询
			
 
				+onUnmounted(() => {
			
 
				+  stopPolling()
			
 
				+})
			
 
				+
			
 
				+function getOrderState() {
			
 
				+  if (data.value) {
			
 
				+    
			
 
				+    switch (data.value.state) {
			
 
				+      case 0:
			
 
				+        current.value = 1
			
 
				+        getPaymentStatus(data.value.create_time)
			
 
				+        break
			
 
				+
			
 
				+      case 1:
			
 
				+        current.value = 2
			
 
				+        twoDes.value = '支付完成，等待系统处理'
			
 
				+        oneDes.value = ''
			
 
				+        break
			
 
				+
			
 
				+      case 2:
			
 
				+        current.value = 3
			
 
				+        threeDes.value = '订单处理完毕'
			
 
				+        status.value = 'finish'
			
 
				+        oneDes.value = ''
			
 
				+        twoDes.value = ''
			
 
				+        stopPolling()
			
 
				+        break
			
 
				+
			
 
				+      case 3:
			
 
				+        current.value = 1
			
 
				+        status.value = 'error'
			
 
				+        oneText.value = '支付超时'
			
 
				+        oneDes.value = '订单已关闭'
			
 
				+        stopPolling()
			
 
				+        break
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+function getPaymentStatus(timestamp) {
			
 
				+  const now = Date.now();
			
 
				+  const diffMs = now - timestamp; // 毫秒差值
			
 
				+  const diffSeconds = Math.floor(diffMs / 1000); // 秒差值
			
 
				+
			
 
				+  const timeout = 300; 
			
 
				+
			
 
				+  if (diffSeconds > timeout) {
			
 
				+    oneDes.value = "支付超时";
			
 
				+  } else {
			
 
				+    const remaining = timeout - diffSeconds;
			
 
				+    const minutes = Math.floor(remaining / 60);
			
 
				+    const seconds = remaining % 60;
			
 
				+    oneDes.value = `请在${minutes}分${seconds.toString().padStart(2, '0')}秒内完成支付`;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const pay = () => {
			
 
				+  Message.success('正在跳转支付页面...请在新页面内完成支付')
			
 
				+  if (payData.value != {}) {
			
 
				+    openPaymentWindow(payData.value.payUrl, payData.value.payData)
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+function openPaymentWindow(payUrl, payData) {
			
 
				+  const form = document.createElement('form');
			
 
				+  form.method = 'POST';
			
 
				+  form.action = payUrl;
			
 
				+  // form.target = '_blank'
			
 
				+  form.style.display = 'none';
			
 
				+
			
 
				+  // 遍历 payData，将每一项添加为隐藏的 input
			
 
				+  for (const key in payData) {
			
 
				+    if (payData.hasOwnProperty(key)) {
			
 
				+      const input = document.createElement('input');
			
 
				+      input.type = 'hidden';
			
 
				+      input.name = key;
			
 
				+      input.value = payData[key];
			
 
				+      form.appendChild(input);
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  document.body.appendChild(form);
			
 
				+  form.submit();
			
 
				+  document.body.removeChild(form);
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.container {
			
 
				+  padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.general-card {
			
 
				+  border-radius: 5px;
			
 
				+
			
 
				+  .step {
			
 
				+    width: 900px;
			
 
				+    margin: 30px auto;
			
 
				+  }
			
 
				+
			
 
				+  .paybutton {
			
 
				+    position: relative;
			
 
				+    left: 50%;
			
 
				+    translate: (-50%);
			
 
				+    margin-top: 10px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/store/orders/orderList/index.vue
+++ b/src/pages/store/orders/orderList/index.vue
@@ -0,0 +1,201 @@
 
				+<template>
			
 
				+
			
 
				+  <div class="container">
			
 
				+    <Breadcrumb :items="['Forge商城', '我的订单']" />
			
 
				+    <a-card title="我的订单">
			
 
				+      <a-table :data="data" stripe hoverable column-resizable class="table" :loading="loading"
			
 
				+        :pagination="{ showPageSize: true, showJumper: true, defaultPageSize: 15 }">
			
 
				+
			
 
				+        <template #name-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }">
			
 
				+          <div class="custom-filter">
			
 
				+            <a-space direction="vertical">
			
 
				+              <a-input :model-value="filterValue[0]" @input="(value) => setFilterValue([value])" />
			
 
				+              <div class="custom-filter-footer">
			
 
				+                <a-button @click="handleFilterReset">重置</a-button>
			
 
				+                <a-button @click="handleFilterConfirm">确定</a-button>
			
 
				+              </div>
			
 
				+            </a-space>
			
 
				+          </div>
			
 
				+        </template>
			
 
				+
			
 
				+        <template #columns>
			
 
				+          <a-table-column title="订单号" :width="180" data-index="orderId" ellipsis tooltip :filterable="{
			
 
				+            filter: (value, record) => (record.orderId ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }"></a-table-column>
			
 
				+          <a-table-column title="商品名称" :filterable="{
			
 
				+            filter: (value, record) => (record.name ?? '').includes(value),
			
 
				+            slotName: 'name-filter',
			
 
				+            icon: () => h(IconSearch)
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ record.name }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="订单金额" ellipsis tooltip :sortable="{
			
 
				+            sortDirections: ['ascend', 'descend']
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              ￥ {{ record.price }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="支付方式" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              <span>
			
 
				+                <icon-wechatpay v-if="record.pay_type === 'wxpay'"/>
			
 
				+                <icon-alipay-circle v-else-if="record.pay_type === 'alipay'"/>
			
 
				+                <icon-qq v-else/>
			
 
				+              </span>
			
 
				+              {{ getPayType(record.pay_type) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="订单状态" ellipsis tooltip>
			
 
				+            <template #cell="{ record }">
			
 
				+              <div v-if="record.state === 0" class="state">
			
 
				+                <div class="circle zero"></div>待支付
			
 
				+              </div>
			
 
				+              <div v-else-if="record.state === 1" class="state">
			
 
				+                <div class="circle one"></div>待处理
			
 
				+              </div>
			
 
				+              <div v-else-if="record.state === 2" class="state">
			
 
				+                <div class="circle one"></div>已完成
			
 
				+              </div>
			
 
				+              <div v-else class="state">
			
 
				+                <div class="circle else"></div>已关闭
			
 
				+              </div>
			
 
				+              <!-- {{ getOrderState(record.state) }} -->
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="创建时间" ellipsis tooltip :sortable="{
			
 
				+            sortDirections: ['ascend', 'descend']
			
 
				+          }">
			
 
				+            <template #cell="{ record }">
			
 
				+              {{ stramptoTime(record.create_time) }}
			
 
				+            </template>
			
 
				+          </a-table-column>
			
 
				+          <a-table-column title="" fixed="right" :width="100">
			
 
				+            <template #cell="{ record }">
			
 
				+              <a-button @click="$router.push(`/store/orderDetail/${record.orderId}`)">详情</a-button>
			
 
				+            </template>
			
 
				+
			
 
				+          </a-table-column>
			
 
				+        </template>
			
 
				+      </a-table>
			
 
				+    </a-card>
			
 
				+  </div>
			
 
				+
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref, h } from 'vue'
			
 
				+import { getMyOrder } from '@/api/order'
			
 
				+import { Notification } from '@arco-design/web-vue'
			
 
				+import { IconSearch } from '@arco-design/web-vue/es/icon'
			
 
				+
			
 
				+const data = ref([])
			
 
				+const loading = ref(false)
			
 
				+
			
 
				+const GetMyOrder = async () => {
			
 
				+  try {
			
 
				+    loading.value = true
			
 
				+    const res = await getMyOrder()
			
 
				+    if (!res || res.code !== 0)
			
 
				+      return Notification.error({
			
 
				+        title: '获取订单列表失败！',
			
 
				+        content: res?.msg || '请稍后再试'
			
 
				+      })
			
 
				+    data.value = res.data
			
 
				+  } catch (error) {
			
 
				+    Notification.error({
			
 
				+      title: '获取订单列表失败！',
			
 
				+      content: error.message || '请稍后再试'
			
 
				+    })
			
 
				+  } finally {
			
 
				+    loading.value = false
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const stramptoTime = (time) => {
			
 
				+  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
			
 
				+}
			
 
				+
			
 
				+function getPayType(type) {
			
 
				+  switch (type) {
			
 
				+    case 'alipay':
			
 
				+      return '支付宝'
			
 
				+    case 'qqpay':
			
 
				+      return 'QQ支付'
			
 
				+    case 'wxpay':
			
 
				+      return '微信支付'
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+function getOrderState(state) {
			
 
				+  switch (state) {
			
 
				+    case 0:
			
 
				+      return '待支付'
			
 
				+
			
 
				+    case 1:
			
 
				+      return '待处理'
			
 
				+
			
 
				+    case 2:
			
 
				+      return '已完成'
			
 
				+
			
 
				+    case 3:
			
 
				+      return '状态异常'
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+GetMyOrder()
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="less">
			
 
				+.container {
			
 
				+  padding: 0 20px 20px 20px;
			
 
				+}
			
 
				+
			
 
				+.table {
			
 
				+  margin-top: 15px;
			
 
				+
			
 
				+  .state {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+
			
 
				+    .circle {
			
 
				+      border-radius: 50%;
			
 
				+      height: 8px;
			
 
				+      min-height: 8px;
			
 
				+      width: 8px;
			
 
				+      min-width: 8px;
			
 
				+      margin-right: 5px;
			
 
				+    }
			
 
				+
			
 
				+    .zero {
			
 
				+      background-color: rgb(var(--orange-6));
			
 
				+    }
			
 
				+
			
 
				+    .one {
			
 
				+      background-color: rgb(var(--green-6));
			
 
				+    }
			
 
				+
			
 
				+    .else {
			
 
				+      background-color: rgb(var(--red-6));
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.custom-filter {
			
 
				+  padding: 20px;
			
 
				+  background: var(--color-bg-5);
			
 
				+  border: 1px solid var(--color-neutral-3);
			
 
				+  border-radius: var(--border-radius-medium);
			
 
				+  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
			
 
				+}
			
 
				+
			
 
				+.custom-filter-footer {
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+</style>
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,186 @@
 
				+import * as VueRouter from 'vue-router'
			
 
				+import { useUserStore } from '@/store'
			
 
				+const DEFAULT_LAYOUT = () => import('@/layout/default-layout.vue')
			
 
				+import { Message } from '@arco-design/web-vue'
			
 
				+
			
 
				+const routes = [
			
 
				+    {
			
 
				+        path: "/",
			
 
				+        name: "main",
			
 
				+        component: () => import('../pages/Main/Main.vue'),
			
 
				+        meta: {
			
 
				+            hideInMenu: true
			
 
				+        }
			
 
				+    },
			
 
				+    {
			
 
				+        path: "/login",
			
 
				+        name: "login",
			
 
				+        component: () => import('../pages/login/login.vue'),
			
 
				+        meta: {
			
 
				+            title: '用户登录',
			
 
				+            hideInMenu: true
			
 
				+        }
			
 
				+    },
			
 
				+    {
			
 
				+        path: "/store",
			
 
				+        name: 'store',
			
 
				+        redirect: '/store/goodsList',
			
 
				+        component: DEFAULT_LAYOUT,
			
 
				+        meta: {
			
 
				+            title: 'Forge商城',
			
 
				+            icon: 'icon-gift'
			
 
				+        },
			
 
				+        children: [
			
 
				+            {
			
 
				+                path: 'goodsList',
			
 
				+                name: 'store.goodsList',
			
 
				+                component: () => import('../pages/store/goodsList/index.vue'),
			
 
				+                meta: {
			
 
				+                    title: '商品列表'
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                path: 'goodsDetail/:id',
			
 
				+                name: 'store.goodsDetail',
			
 
				+                component: () => import('../pages/store/goodsDetail/index.vue'),
			
 
				+                meta: {
			
 
				+                    title: '商品详情',
			
 
				+                    hideInMenu: true
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                path: 'orderDetail/:id',
			
 
				+                name: 'store.orderDetail',
			
 
				+                component: () => import('../pages/store/orders/orderDetail/index.vue'),
			
 
				+                meta: {
			
 
				+                    title: '订单详情',
			
 
				+                    hideInMenu: true
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                path: 'myOrder',
			
 
				+                name: 'store.myOrder',
			
 
				+                component: () => import('../pages/store/orders/orderList/index.vue'),
			
 
				+                meta: {
			
 
				+                    title: '我的订单'
			
 
				+                }
			
 
				+            },
			
 
				+        ]
			
 
				+    },
			
 
				+    {
			
 
				+        path: "/lepao",
			
 
				+        name: 'lepao',
			
 
				+        redirect: '/lepao/accountList',
			
 
				+        component: DEFAULT_LAYOUT,
			
 
				+        meta: {
			
 
				+            title: '校园乐跑',
			
 
				+            icon: 'icon-bug'
			
 
				+        },
			
 
				+        children: [
			
 
				+            {
			
 
				+                path: 'accountList',
			
 
				+                name: 'lepao.accountList',
			
 
				+                component: () => import('../pages/lepao/accountList/index.vue'),
			
 
				+                meta: {
			
 
				+                    title: '账号管理'
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                path: 'lepaoRecords',
			
 
				+                name: 'lepao.lepaoRecords',
			
 
				+                component: () => import('../pages/lepao/lepaoRecords/index.vue'),
			
 
				+                meta: {
			
 
				+                    title: '乐跑记录'
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                path: 'recordDetail/:id',
			
 
				+                name: 'lepao.recordDetail',
			
 
				+                component: () => import('../pages/lepao/lepaoRecords/recordDetail.vue'),
			
 
				+                meta: {
			
 
				+                    title: '路线详情',
			
 
				+                    hideInMenu: true
			
 
				+                }
			
 
				+            }
			
 
				+        ]
			
 
				+    },
			
 
				+    {
			
 
				+        path: "/user",
			
 
				+        name: "user",
			
 
				+        redirect: '/user/setting',
			
 
				+        component: DEFAULT_LAYOUT,
			
 
				+        meta: {
			
 
				+            title: '个人中心',
			
 
				+            icon: 'icon-user'
			
 
				+        },
			
 
				+        children: [
			
 
				+            {
			
 
				+                path: 'setting',
			
 
				+                name: 'user.setings',
			
 
				+                component: () => import('../pages/user/setting/index.vue'),
			
 
				+                meta: {
			
 
				+                    title: '用户设置'
			
 
				+                },
			
 
				+            }
			
 
				+        ]
			
 
				+    },
			
 
				+    {
			
 
				+        path: "/path",
			
 
				+        name: "path",
			
 
				+        redirect: '/path/list',
			
 
				+        component: DEFAULT_LAYOUT,
			
 
				+        meta: {
			
 
				+            title: '路径数据',
			
 
				+            icon: 'icon-location',
			
 
				+            permission: ['admin', 'path']
			
 
				+        },
			
 
				+        children: [
			
 
				+            {
			
 
				+                path: 'list',
			
 
				+                name: 'path.list',
			
 
				+                component: () => import('../pages/path/pathList.vue'),
			
 
				+                meta: {
			
 
				+                    title: '路径列表'
			
 
				+                }
			
 
				+            },
			
 
				+            {
			
 
				+                path: 'detail/:id',
			
 
				+                name: 'path.detail',
			
 
				+                component: () => import('../pages/path/pathDetail.vue'),
			
 
				+                meta: {
			
 
				+                    title: '路径详情',
			
 
				+                    hideInMenu: true
			
 
				+                }
			
 
				+            }
			
 
				+        ]
			
 
				+    },
			
 
				+]
			
 
				+
			
 
				+const router = VueRouter.createRouter({
			
 
				+    history: VueRouter.createWebHashHistory(),
			
 
				+    routes: routes
			
 
				+})
			
 
				+
			
 
				+const allow = ['/', '/login']
			
 
				+
			
 
				+router.beforeEach(async (to, from, next) => {
			
 
				+    if (!allow.includes(to.path)) {
			
 
				+        const userStore = useUserStore()
			
 
				+        let user = await userStore.getInfo()
			
 
				+
			
 
				+        if (!user || !user.uuid || !user.session) {
			
 
				+            // Message.error('请先登录')
			
 
				+            return router.push(`/login?from=${to.path}`)
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    if (!to.meta.title) {
			
 
				+        document.title = 'RunForge - 让跑步的意义由技术重新定义'
			
 
				+    } else {
			
 
				+        document.title = to.meta.title + ' - RunForge'
			
 
				+    }
			
 
				+
			
 
				+    next()
			
 
				+})
			
 
				+
			
 
				+export { routes, router };
			
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,5 @@
 
				+import { createPinia } from 'pinia'
			
 
				+import { useUserStore } from './modules/user'
			
 
				+const pinia = createPinia()
			
 
				+
			
 
				+export { pinia, useUserStore }
			
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -0,0 +1,95 @@
 
				+import { defineStore } from 'pinia'
			
 
				+import storage from 'store'
			
 
				+import expirePlugin from 'store/plugins/expire'
			
 
				+import { login, uniLogin } from '@/api/login'
			
 
				+import { ChangeUsername, GetUserInfo } from '@/api/user'
			
 
				+
			
 
				+storage.addPlugin(expirePlugin)
			
 
				+
			
 
				+export const useUserStore = defineStore('user', {
			
 
				+  state: () => ({
			
 
				+    session: '',
			
 
				+    uuid: '',
			
 
				+    username: '',
			
 
				+    avatar: '',
			
 
				+    email: '',
			
 
				+    roles: []
			
 
				+  }),
			
 
				+
			
 
				+  actions: { 
			
 
				+    // 登录  
			
 
				+    async login(userInfo) {
			
 
				+      try {
			
 
				+        const res = await login(userInfo)
			
 
				+        if (!res || res.code !== 0) throw new Error(res?.msg || '登录失败！请稍后再试')
			
 
				+        storage.set('user', res.data, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
			
 
				+        this.setUser(res.data)
			
 
				+        return res.data
			
 
				+      } catch (error) {
			
 
				+        throw error
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    async uniLogin(type, code) {
			
 
				+      try {
			
 
				+        const res = await uniLogin({type, code})
			
 
				+        if (!res || res.code !== 0) throw new Error(res?.msg || '登录失败！请稍后再试')
			
 
				+        storage.set('user', res.data, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
			
 
				+        this.setUser(res.data)
			
 
				+        return res.data
			
 
				+      } catch (error) {
			
 
				+        throw error
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 更新用户名
			
 
				+    async changeName(username) {
			
 
				+      try {
			
 
				+        const res = await ChangeUsername({ username })
			
 
				+        if (!res || res.code !== 0) throw new Error(res?.msg || '更新失败！请稍后再试')
			
 
				+        this.username = username
			
 
				+        storage.set('user', this.$state, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
			
 
				+      } catch (error) {
			
 
				+        throw error
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 获取用户信息
			
 
				+    async getInfo() {
			
 
				+      const user = storage.get('user')
			
 
				+      if (user) {
			
 
				+        this.setUser(user)
			
 
				+        return user
			
 
				+      }
			
 
				+      return this.$state
			
 
				+    },
			
 
				+
			
 
				+    async getInfoFromServer() {
			
 
				+      try {
			
 
				+        const res = await GetUserInfo()
			
 
				+        if (!res || res.code !== 0) throw new Error(res?.msg || '获取用户信息失败！请稍后再试')
			
 
				+        storage.set('user', res.data, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
			
 
				+        this.setUser(res.data)
			
 
				+        return res.data
			
 
				+      } catch (error) {
			
 
				+        throw error
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 登出
			
 
				+    logout() {
			
 
				+      this.setUser({})
			
 
				+      storage.remove('user')
			
 
				+    },
			
 
				+
			
 
				+    // 设置用户信息
			
 
				+    setUser(user = {}) {
			
 
				+      this.session = user.session || ''
			
 
				+      this.uuid = user.uuid || ''
			
 
				+      this.avatar = user.avatar || ''
			
 
				+      this.username = user.username || ''
			
 
				+      this.email = user.email || ''
			
 
				+      this.roles = user.roles || []
			
 
				+    }
			
 
				+  }
			
 
				+})
			
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,48 @@
 
				+:root {
			
 
				+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
			
 
				+  line-height: 1.5;
			
 
				+  font-weight: 400;
			
 
				+  font-synthesis: none;
			
 
				+  text-rendering: optimizeLegibility;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+@font-face {
			
 
				+  font-family: 'Alimama ShuHeiTi';
			
 
				+  src: url('@/assets/font/AlimamaShuHeiTi-Bold.woff2') format('woff2')
			
 
				+}
			
 
				+
			
 
				+@font-face {
			
 
				+  font-family: 'AlibabaSans';
			
 
				+  src: url('@/assets/font/AlibabaSans-MediumItalic.woff2')
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  font-weight: 500;
			
 
				+  color: #646cff;
			
 
				+  text-decoration: inherit;
			
 
				+}
			
 
				+
			
 
				+a:hover {
			
 
				+  color: #535bf2;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+  display: flex;
			
 
				+  place-items: center;
			
 
				+  min-width: 1280px;
			
 
				+  min-height: 100%;
			
 
				+}
			
 
				+
			
 
				+h1 {
			
 
				+  font-size: 3.2em;
			
 
				+  line-height: 1.1;
			
 
				+}
			
 
				+
			
 
				+#app {
			
 
				+  width: 100%;
			
 
				+  padding: 0;
			
 
				+  margin: 0;
			
 
				+}
			
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -0,0 +1,35 @@
 
				+const VueAxios = {
			
 
				+  vm: {},
			
 
				+  // eslint-disable-next-line no-unused-vars
			
 
				+  install (Vue, instance) {
			
 
				+    if (this.installed) {
			
 
				+      return
			
 
				+    }
			
 
				+    this.installed = true
			
 
				+
			
 
				+    if (!instance) {
			
 
				+      // eslint-disable-next-line no-console
			
 
				+      console.error('You have to install axios')
			
 
				+      return
			
 
				+    }
			
 
				+
			
 
				+    Vue.axios = instance
			
 
				+
			
 
				+    Object.defineProperties(Vue.prototype, {
			
 
				+      axios: {
			
 
				+        get: function get () {
			
 
				+          return instance
			
 
				+        }
			
 
				+      },
			
 
				+      $http: {
			
 
				+        get: function get () {
			
 
				+          return instance
			
 
				+        }
			
 
				+      }
			
 
				+    })
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  VueAxios
			
 
				+}
			
--- a/src/utils/encrypt.js
+++ b/src/utils/encrypt.js
@@ -0,0 +1,29 @@
 
				+import CryptoJS from 'crypto-js'
			
 
				+import JSEncrypt from 'jsencrypt'
			
 
				+
			
 
				+const publicKey = import.meta.env.VITE_RSA_PUBLIC_KEY.replace(/\\n/g, '\n')
			
 
				+
			
 
				+// 生成随机 AES 密钥
			
 
				+export function generateAesKey(length = 16) {
			
 
				+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
			
 
				+  let key = ''
			
 
				+  for (let i = 0; i < length; i++) {
			
 
				+    key += chars.charAt(Math.floor(Math.random() * chars.length))
			
 
				+  }
			
 
				+  return key
			
 
				+}
			
 
				+
			
 
				+// AES 加密
			
 
				+export function aesEncrypt(data, key) {
			
 
				+  return CryptoJS.AES.encrypt(JSON.stringify(data), CryptoJS.enc.Utf8.parse(key), {
			
 
				+    mode: CryptoJS.mode.ECB,
			
 
				+    padding: CryptoJS.pad.Pkcs7
			
 
				+  }).toString()
			
 
				+}
			
 
				+
			
 
				+// RSA 加密 AES 密钥
			
 
				+export function rsaEncryptKey(aesKey) {
			
 
				+  const encryptor = new JSEncrypt()
			
 
				+  encryptor.setPublicKey(publicKey)
			
 
				+  return encryptor.encrypt(aesKey)
			
 
				+}
			
--- a/src/utils/eventBus.js
+++ b/src/utils/eventBus.js
@@ -0,0 +1,2 @@
 
				+import mitt from 'mitt'
			
 
				+export const eventBus = mitt()
			
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -0,0 +1,84 @@
 
				+import axios from 'axios'
			
 
				+import { useUserStore } from '@/store'
			
 
				+import storage from 'store'
			
 
				+import { Notification } from '@arco-design/web-vue';
			
 
				+import { VueAxios } from './axios'
			
 
				+import { generateAesKey, aesEncrypt, rsaEncryptKey } from './encrypt'
			
 
				+
			
 
				+// 创建 axios 实例
			
 
				+const request = axios.create({
			
 
				+  // API 请求的默认前缀
			
 
				+  baseURL: import.meta.env.VITE_APP_API_BASE_URL,
			
 
				+  timeout: 30000 // 请求超时时间
			
 
				+})
			
 
				+
			
 
				+// 异常拦截处理器
			
 
				+const errorHandler = (error) => {
			
 
				+  const userStore = useUserStore()
			
 
				+  const user = storage.get('user')
			
 
				+  console.log(error)
			
 
				+
			
 
				+  if (error.response) {
			
 
				+    if (error.response.status === 401) {
			
 
				+      Notification.error({
			
 
				+        title: '登录失效',
			
 
				+        content: '请重新登录'
			
 
				+      })
			
 
				+      if (user) {
			
 
				+        userStore.logout()  // 调用 Pinia store 中的 logout 方法
			
 
				+        setTimeout(() => {
			
 
				+          window.location.reload()
			
 
				+        }, 1500)
			
 
				+      }
			
 
				+    }
			
 
				+  } else {
			
 
				+    console.error('无法连接到服务器，请检查网络')
			
 
				+
			
 
				+    
			
 
				+    Notification.error({
			
 
				+      title: '服务器维护中',
			
 
				+      content: '服务器停机维护中，请耐心等待'
			
 
				+    })
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+request.interceptors.request.use(config => {
			
 
				+  const userStore = useUserStore()  // 使用 Pinia store
			
 
				+
			
 
				+  const user = userStore.$state
			
 
				+  if (user && config.headers['Content-Type'] !== 'multipart/form-data') {
			
 
				+    if (config.method === 'get') {
			
 
				+      config.params = {
			
 
				+        ...config.params,
			
 
				+        uuid: user.uuid,
			
 
				+        session: user.session
			
 
				+      }
			
 
				+    } else {
			
 
				+      config.data = {
			
 
				+        ...config.data,
			
 
				+        uuid: user.uuid,
			
 
				+        session: user.session
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  return config
			
 
				+}, errorHandler)
			
 
				+
			
 
				+// response interceptor
			
 
				+request.interceptors.response.use((response) => {
			
 
				+  return response.data
			
 
				+}, errorHandler)
			
 
				+
			
 
				+const installer = {
			
 
				+  vm: {},
			
 
				+  install(Vue) {
			
 
				+    Vue.use(VueAxios, request)
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export default request
			
 
				+
			
 
				+export {
			
 
				+  installer as VueAxios,
			
 
				+  request as axios
			
 
				+}
			
--- a/src/utils/route-listener.js
+++ b/src/utils/route-listener.js
@@ -0,0 +1,25 @@
 
				+import { ref, watch } from 'vue'
			
 
				+import { useRoute } from 'vue-router'
			
 
				+
			
 
				+/**
			
 
				+ * 路由监听器
			
 
				+ * @returns {object} selectedKey - 当前选中的菜单项及其父级
			
 
				+ */
			
 
				+export function useRouteListener() {
			
 
				+    const route = useRoute()
			
 
				+    
			
 
				+    // 计算当前路径及其所有父级路径
			
 
				+    const getRouteHierarchy = (path) => {
			
 
				+        const segments = path.split('/').filter(Boolean)
			
 
				+        return segments.map((_, index) => '/' + segments.slice(0, index + 1).join('/'))
			
 
				+    }
			
 
				+    
			
 
				+    const selectedKey = ref(getRouteHierarchy(route.path))
			
 
				+
			
 
				+    // 监听路径变化并更新选中项
			
 
				+    watch(() => route.path, (newPath) => {
			
 
				+        selectedKey.value = getRouteHierarchy(newPath)
			
 
				+    })
			
 
				+
			
 
				+    return { selectedKey }
			
 
				+}
			
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -0,0 +1,6 @@
 
				+export function timeFix () {
			
 
				+    const time = new Date()
			
 
				+    const hour = time.getHours()
			
 
				+    return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
			
 
				+  }
			
 
				+  
			
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,18 @@
 
				+import { defineConfig } from 'vite'
			
 
				+import vue from '@vitejs/plugin-vue'
			
 
				+import path from 'path'
			
 
				+import { vitePluginForArco } from '@arco-plugins/vite-vue'
			
 
				+
			
 
				+export default defineConfig({
			
 
				+  plugins: [
			
 
				+    vue(),
			
 
				+    vitePluginForArco({
			
 
				+      style: 'css'
			
 
				+    })
			
 
				+  ],
			
 
				+  resolve: {
			
 
				+    alias: {
			
 
				+      '@': path.resolve(__dirname, 'src')
			
 
				+    }
			
 
				+  }
			
 
				+})