From 01d6bf66d52b0a8384fbc3d14473621182a530f2 Mon Sep 17 00:00:00 2001 From: wzp Date: Fri, 7 Jun 2024 20:44:30 +0800 Subject: [PATCH] feat: 1 --- .github/workflows/build.yml | 2 +- package.json | 5 +- pnpm-lock.yaml | 68 ++++++++++++++++++++++++ public/vite.svg | 1 - src/App.vue | 43 ++++++++------- src/assets/vue.svg | 1 - src/components/ContextMenuRegion.vue | 20 +++++++ src/components/Header.vue | 11 ++++ src/components/HelloWorld.vue | 38 ------------- src/components/Menu.vue | 39 ++++++++++++++ src/main.ts | 11 ++-- src/public-style-config.css | 15 ++++++ src/router/index.ts | 39 ++++++++++++++ src/store/UserStore.ts | 11 ++++ src/style.css | 79 ---------------------------- src/views/FileShare.vue | 11 ++++ src/views/OfflineDownload.vue | 11 ++++ src/views/ShareManager.vue | 11 ++++ src/views/UserManager.vue | 11 ++++ src/views/VideoTranscoding.vue | 11 ++++ 20 files changed, 296 insertions(+), 142 deletions(-) delete mode 100644 public/vite.svg delete mode 100644 src/assets/vue.svg create mode 100644 src/components/ContextMenuRegion.vue create mode 100644 src/components/Header.vue delete mode 100644 src/components/HelloWorld.vue create mode 100644 src/components/Menu.vue create mode 100644 src/public-style-config.css create mode 100644 src/router/index.ts create mode 100644 src/store/UserStore.ts delete mode 100644 src/style.css create mode 100644 src/views/FileShare.vue create mode 100644 src/views/OfflineDownload.vue create mode 100644 src/views/ShareManager.vue create mode 100644 src/views/UserManager.vue create mode 100644 src/views/VideoTranscoding.vue diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 5f34870..f0cce6d 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -6,7 +6,7 @@ on: branches: [ "v2" ] jobs: build: - runs-on: node:16-bullseye + runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 name: 克隆项目 diff --git a/package.json b/package.json index 4b70435..c250f59 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,10 @@ "preview": "vite preview" }, "dependencies": { - "vue": "^3.4.21" + "@element-plus/icons-vue": "^2.3.1", + "pinia": "^2.1.7", + "vue": "^3.4.21", + "vue-router": "4" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 453429b..6fdf07d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,18 @@ importers: .: dependencies: + '@element-plus/icons-vue': + specifier: ^2.3.1 + version: 2.3.1(vue@3.4.27(typescript@5.4.5)) + pinia: + specifier: ^2.1.7 + version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)) vue: specifier: ^3.4.21 version: 3.4.27(typescript@5.4.5) + vue-router: + specifier: '4' + version: 4.3.2(vue@3.4.27(typescript@5.4.5)) devDependencies: '@vitejs/plugin-vue': specifier: ^5.0.4 @@ -44,6 +53,11 @@ packages: resolution: {integrity: sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==} engines: {node: '>=6.9.0'} + '@element-plus/icons-vue@2.3.1': + resolution: {integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==} + peerDependencies: + vue: ^3.2.0 + '@esbuild/aix-ppc64@0.20.2': resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==} engines: {node: '>=12'} @@ -305,6 +319,9 @@ packages: '@vue/compiler-ssr@3.4.27': resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==} + '@vue/devtools-api@6.6.3': + resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==} + '@vue/language-core@2.0.19': resolution: {integrity: sha512-A9EGOnvb51jOvnCYoRLnMP+CcoPlbZVxI9gZXE/y2GksRWM6j/PrLEIC++pnosWTN08tFpJgxhSS//E9v/Sg+Q==} peerDependencies: @@ -387,6 +404,18 @@ packages: picocolors@1.0.1: resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} + pinia@2.1.7: + resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==} + peerDependencies: + '@vue/composition-api': ^1.4.0 + typescript: '>=4.4.4' + vue: ^2.6.14 || ^3.3.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + typescript: + optional: true + postcss@8.4.38: resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} @@ -442,6 +471,22 @@ packages: terser: optional: true + vue-demi@0.14.8: + resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==} + engines: {node: '>=12'} + hasBin: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + + vue-router@4.3.2: + resolution: {integrity: sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==} + peerDependencies: + vue: ^3.2.0 + vue-template-compiler@2.7.16: resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==} @@ -475,6 +520,10 @@ snapshots: '@babel/helper-validator-identifier': 7.24.6 to-fast-properties: 2.0.0 + '@element-plus/icons-vue@2.3.1(vue@3.4.27(typescript@5.4.5))': + dependencies: + vue: 3.4.27(typescript@5.4.5) + '@esbuild/aix-ppc64@0.20.2': optional: true @@ -644,6 +693,8 @@ snapshots: '@vue/compiler-dom': 3.4.27 '@vue/shared': 3.4.27 + '@vue/devtools-api@6.6.3': {} + '@vue/language-core@2.0.19(typescript@5.4.5)': dependencies: '@volar/language-core': 2.2.5 @@ -742,6 +793,14 @@ snapshots: picocolors@1.0.1: {} + pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)): + dependencies: + '@vue/devtools-api': 6.6.3 + vue: 3.4.27(typescript@5.4.5) + vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5)) + optionalDependencies: + typescript: 5.4.5 + postcss@8.4.38: dependencies: nanoid: 3.3.7 @@ -786,6 +845,15 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + vue-demi@0.14.8(vue@3.4.27(typescript@5.4.5)): + dependencies: + vue: 3.4.27(typescript@5.4.5) + + vue-router@4.3.2(vue@3.4.27(typescript@5.4.5)): + dependencies: + '@vue/devtools-api': 6.6.3 + vue: 3.4.27(typescript@5.4.5) + vue-template-compiler@2.7.16: dependencies: de-indent: 1.0.2 diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index bb666a8..d39e201 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,30 +1,37 @@ diff --git a/src/assets/vue.svg b/src/assets/vue.svg deleted file mode 100644 index 770e9d3..0000000 --- a/src/assets/vue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/ContextMenuRegion.vue b/src/components/ContextMenuRegion.vue new file mode 100644 index 0000000..d8bd1e0 --- /dev/null +++ b/src/components/ContextMenuRegion.vue @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..96c0baf --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 7b25f3f..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - - - diff --git a/src/components/Menu.vue b/src/components/Menu.vue new file mode 100644 index 0000000..809c3e4 --- /dev/null +++ b/src/components/Menu.vue @@ -0,0 +1,39 @@ + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 2425c0f..47cb545 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,10 @@ import { createApp } from 'vue' -import './style.css' import App from './App.vue' - -createApp(App).mount('#app') +import router from "./router"; +import "./public-style-config.css"; +import {createPinia} from "pinia"; +const pinia = createPinia(); +const app = createApp(App); +app.use(pinia); +app.use(router); +app.mount('#app') diff --git a/src/public-style-config.css b/src/public-style-config.css new file mode 100644 index 0000000..215a627 --- /dev/null +++ b/src/public-style-config.css @@ -0,0 +1,15 @@ +:root { + --header-height: 5vh; + --aside-width: 10vw; + --container-width: calc(100vh - var(--header-height)); + --main-width: calc(100vw - var(--aside-width)); +} +@media screen and (max-height: 800px) { + :root { + --header-height: 4vh; + } +} +body { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..0963f61 --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,39 @@ +import {createRouter, createWebHashHistory, RouteMeta, RouteRecordRaw} from "vue-router"; +import {useUserStore} from "../store/UserStore.ts"; +import {Component} from "vue"; +import {HomeFilled} from "@element-plus/icons-vue"; +declare module 'vue-router' { + interface RouteMeta { + authorizedRequired?: boolean; + adminRequired?: boolean; + menu: { + name: string; + icon?: Component; + } + } +} +const routes: RouteRecordRaw[] = [ + {name: "Home", component: () => import("../views/FileShare.vue"), path: "/", meta: {menu: {name: "文件分享站", icon: HomeFilled}}}, + {name: "OfflineDownload", component: () => import("../views/OfflineDownload.vue"), path: "/offline", meta: {authorizedRequired: true, menu: {name: "离线下载"}}}, + {name: "Transcoding", component: () => import("../views/VideoTranscoding.vue"), path: "/transcoding", meta: {authorizedRequired: true, menu: {name: "视频转码"}}}, + {name: "User", component: () => import("../views/UserManager.vue"), path: "/user", meta: {authorizedRequired: true, adminRequired: true, menu: {name: "用户管理"}}}, + {name: "Share", component: () => import("../views/ShareManager.vue"), path: "/share", meta: {authorizedRequired: true, adminRequired: true, menu: {name: "分享管理"}}} +]; +const router = createRouter({history: createWebHashHistory(), routes}); +export const isRouterAccessible = (meta?: RouteMeta) => { + if (meta && meta.authorizedRequired){ + const {token, isAdmin} = useUserStore(); + if (token){ + if (meta.adminRequired){ + return isAdmin; + } + return !!token; + } + return false; + } + return true; +} +router.beforeEach((to) => { + return isRouterAccessible(to.meta) +}) +export default router; \ No newline at end of file diff --git a/src/store/UserStore.ts b/src/store/UserStore.ts new file mode 100644 index 0000000..43b33d5 --- /dev/null +++ b/src/store/UserStore.ts @@ -0,0 +1,11 @@ +import {defineStore} from "pinia"; + +export const useUserStore = defineStore('user', { + state() { + return { + token: "", + username: "", + isAdmin: false + } + }, +}) \ No newline at end of file diff --git a/src/style.css b/src/style.css deleted file mode 100644 index bb131d6..0000000 --- a/src/style.css +++ /dev/null @@ -1,79 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/views/FileShare.vue b/src/views/FileShare.vue new file mode 100644 index 0000000..96c0baf --- /dev/null +++ b/src/views/FileShare.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/views/OfflineDownload.vue b/src/views/OfflineDownload.vue new file mode 100644 index 0000000..96c0baf --- /dev/null +++ b/src/views/OfflineDownload.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/views/ShareManager.vue b/src/views/ShareManager.vue new file mode 100644 index 0000000..96c0baf --- /dev/null +++ b/src/views/ShareManager.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/views/UserManager.vue b/src/views/UserManager.vue new file mode 100644 index 0000000..96c0baf --- /dev/null +++ b/src/views/UserManager.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/views/VideoTranscoding.vue b/src/views/VideoTranscoding.vue new file mode 100644 index 0000000..96c0baf --- /dev/null +++ b/src/views/VideoTranscoding.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file