feat: 前端基础框架

2026-06-02 03:55:55 +00:00 · 2024-10-13 22:34:35 +08:00
parent 9703fc0366
commit 0dd74c825b
15 changed files with 193 additions and 16 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,10 +9,12 @@
      "version": "0.0.0",
      "dependencies": {
        "@mdi/font": "7.4.47",
+        "axios": "^1.7.7",
        "core-js": "^3.37.1",
        "roboto-fontface": "*",
        "vue": "^3.4.31",
-        "vuetify": "^3.6.11"
+        "vuetify": "^3.6.11",
+        "vuex": "^4.0.2"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^5.0.5",
@@ -958,7 +960,6 @@
      "version": "6.6.4",
      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@vue/reactivity": {
@@ -1260,6 +1261,12 @@
        "node": ">=16.14.0"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
    "node_modules/available-typed-arrays": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1276,6 +1283,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1468,6 +1486,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1642,6 +1672,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -2489,6 +2528,26 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2499,6 +2558,20 @@
        "is-callable": "^1.1.3"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3345,6 +3418,27 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3740,6 +3834,12 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4750,6 +4850,18 @@
        }
      }
    },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
    "node_modules/webpack-virtual-modules": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -9,10 +9,12 @@
  },
  "dependencies": {
    "@mdi/font": "7.4.47",
+    "axios": "^1.7.7",
    "core-js": "^3.37.1",
    "roboto-fontface": "*",
    "vue": "^3.4.31",
-    "vuetify": "^3.6.11"
+    "vuetify": "^3.6.11",
+    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
--- a/web/public/favicon.ico
+++ b/web/public/favicon.ico
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,11 +1,26 @@
 <template>
  <v-app>
-    <v-main>
-      <router-view />
-    </v-main>
+
+    <v-layout>
+      <v-navigation-drawer :width="160" app permanent expand-on-hover>
+        <v-list density="compact" nav>
+          <v-list-item to="/" title="仪表盘" value="dashboard" prepend-icon="mdi-view-dashboard-outline">
+          </v-list-item>
+          <v-list-item to="/settings" title="配置" value="settings" prepend-icon="mdi-cog-outline">
+          </v-list-item>
+          <v-list-item to="/logs" title="日志" value="logs" prepend-icon="mdi-file-outline">
+          </v-list-item>
+          <v-list-item to="/plugins" title="插件" value="plugins" prepend-icon="mdi-puzzle-outline">
+          </v-list-item>
+        </v-list>
+      </v-navigation-drawer>
+
+      <v-main>
+        <router-view />
+      </v-main>
+    </v-layout>
  </v-app>
 </template>

 <script setup>
-  //
 </script>
--- a/web/src/assets/langbot-logo-block.png
+++ b/web/src/assets/langbot-logo-block.png
--- a/web/src/assets/logo.png
+++ b/web/src/assets/logo.png
--- a/web/src/assets/logo.svg
+++ b/web/src/assets/logo.svg
@@ -1,6 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
-<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
-<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
-<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
-</svg>
--- a/web/src/pages/DashBoard.vue
+++ b/web/src/pages/DashBoard.vue
@@ -0,0 +1,11 @@
+<template>
+    <h1>Dashboard</h1>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>
--- a/web/src/pages/index.vue
+++ b/web/src/pages/index.vue
@@ -1,6 +1,9 @@
 <template>
+    <h1>Logs</h1>
 </template>

 <script setup>
-  //
 </script>
+
+<style scoped>
+</style>
--- a/web/src/pages/Plugins.vue
+++ b/web/src/pages/Plugins.vue
@@ -0,0 +1,9 @@
+<template>
+    <h1>Plugins</h1>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -0,0 +1,9 @@
+<template>
+  <h1>Settings</h1>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>
--- a/web/src/plugins/index.js
+++ b/web/src/plugins/index.js
@@ -7,9 +7,12 @@
 // Plugins
 import vuetify from './vuetify'
 import router from '@/router'
+import store from '@/store'
+

 export function registerPlugins (app) {
  app
    .use(vuetify)
    .use(router)
+    .use(store)
 }
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -7,7 +7,17 @@

 // Composables
 import { createRouter, createWebHistory } from 'vue-router/auto'
-import { routes } from 'vue-router/auto-routes'
+import DashBoard from '../pages/DashBoard.vue'
+import Settings from '../pages/Settings.vue'
+import Logs from '../pages/Logs.vue'
+import Plugins from '../pages/Plugins.vue'
+
+const routes = [
+  { path: '/', component: DashBoard },
+  { path: '/settings', component: Settings },
+  { path: '/logs', component: Logs },
+  { path: '/plugins', component: Plugins },
+]

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -0,0 +1,9 @@
+import { createStore } from 'vuex'
+import router from '@/router'
+import axios from 'axios'
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+})
--- a/web/vite.config.mjs
+++ b/web/vite.config.mjs
@@ -49,6 +49,6 @@ export default defineConfig({
    ],
  },
  server: {
-    port: 3000,
+    port: 3002,
  },
 })