feat: 完善模版

2025-06-26 21:51:57 +08:00
parent 6a18951b07
commit 7fe25251a8
18 changed files with 233 additions and 77 deletions
--- a/package.json
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+	"devDependencies": {
+		"@vue/tsconfig": "^0.7.0"
+	}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -0,0 +1,30 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@vue/tsconfig':
+        specifier: ^0.7.0
+        version: 0.7.0
+
+packages:
+
+  '@vue/tsconfig@0.7.0':
+    resolution: {integrity: sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==}
+    peerDependencies:
+      typescript: 5.x
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue:
+        optional: true
+
+snapshots:
+
+  '@vue/tsconfig@0.7.0': {}
--- a/web/README.md
+++ b/web/README.md
@@ -3,3 +3,11 @@
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

 Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+
+[Node.js](https://nodejs.org/en/) version:20.19+, 22.12+
+
+```bash
+pnpm i
+
+pnpm dev
+```
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -1,6 +1,14 @@
 import antfu from '@antfu/eslint-config'

-export default antfu({
-  formatters: true,
-  vue: true,
-})
+export default antfu(
+  {
+    formatters: true,
+    vue: true,
+    ignores: ['node_modules', 'dist'],
+    rules: {
+      'vue/html-self-closing': 'off',
+      'antfu/top-level-function': 'off',
+    },
+  },
+
+)
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,8 @@
    "@tailwindcss/vite": "^4.1.10",
    "@vueuse/core": "^13.4.0",
    "tailwindcss": "^4.1.10",
-    "vue": "^3.5.17"
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^4.16.1",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
      vue:
        specifier: ^3.5.17
        version: 3.5.17(typescript@5.8.3)
+      vue-router:
+        specifier: ^4.5.1
+        version: 4.5.1(vue@3.5.17(typescript@5.8.3))
    devDependencies:
      '@antfu/eslint-config':
        specifier: ^4.16.1
@@ -768,6 +771,9 @@ packages:
  '@vue/compiler-vue2@2.7.16':
    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}

+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
  '@vue/language-core@2.2.10':
    resolution: {integrity: sha512-+yNoYx6XIKuAO8Mqh1vGytu8jkFEOH5C8iOv3i8Z/65A7x9iAOXA97Q+PqZ3nlm2lxf5rOJuIGI/wDtx/riNYw==}
    peerDependencies:
@@ -1978,6 +1984,11 @@ packages:
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0

+  vue-router@4.5.1:
+    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
+    peerDependencies:
+      vue: ^3.2.0
+
  vue-tsc@2.2.10:
    resolution: {integrity: sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ==}
    hasBin: true
@@ -2655,6 +2666,8 @@ snapshots:
      de-indent: 1.0.2
      he: 1.2.0

+  '@vue/devtools-api@6.6.4': {}
+
  '@vue/language-core@2.2.10(typescript@5.8.3)':
    dependencies:
      '@volar/language-core': 2.4.15
@@ -4036,6 +4049,11 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  vue-router@4.5.1(vue@3.5.17(typescript@5.8.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.17(typescript@5.8.3)
+
  vue-tsc@2.2.10(typescript@5.8.3):
    dependencies:
      '@volar/typescript': 2.4.15
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,30 +1,8 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
 </script>

 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <div>Vite + Vue + TS</div>
 </template>

-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<style scoped></style>
--- a/web/src/components/HelloWorld.vue
+++ b/web/src/components/HelloWorld.vue
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
--- a/web/src/layouts/BasicLayout.vue
+++ b/web/src/layouts/BasicLayout.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>444</div>
+</template>
+
+<style scoped></style>
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -0,0 +1,79 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import BasicLayout from '@/layouts/BasicLayout.vue'
+import { resetDescription, setTitle } from '@/utils'
+import community from '@/views/CommunityView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      component: BasicLayout,
+      children: [
+        {
+          path: '',
+          name: 'community',
+          component: community,
+          meta: {
+            title: '社区',
+          },
+        },
+      ],
+    },
+  ],
+})
+
+// // 权限检查函数，检查并决定是否允许访问
+// const checkPermission: NavigationGuard = (to, from, next) => {
+//   if (to.query.accessToken) return next(); // 如果有accessToken参数，则直接放行
+
+//   const userStore = useUserStore();
+//   const token =
+//     useUserStore().accessToken ||
+//     localStorage.getItem("accessToken") ||
+//     undefined;
+
+//   if (token) {
+//     // 如果token无效，重定向到登录页，并提示信息
+//     userStore.getUserInfo("router_get").then((hasPermission) => {
+//       if (hasPermission) {
+//         next(); // 如果有权限，继续导航
+//       } else {
+//         if (!to.meta.auth) {
+//           next();
+//         } else {
+//           // 如果token无效，重定向到登录页，并提示信息
+//           context.message?.info(
+//             "登录信息已过期，请重新登录",
+//             GotoLoginMessageOption
+//           );
+//         }
+//       }
+//     });
+//   } else {
+//     if (!to.meta.auth) {
+//       next();
+//     } else {
+//       // 如果没有token，重定向到登录页，并提示信息
+//       context.message?.info("请先登录", GotoLoginMessageOption);
+//     }
+//   }
+// };
+
+// // 添加导航守卫
+// eslint-disable-next-line unused-imports/no-unused-vars
+router.beforeEach((to, from, next) => {
+  setTitle(to.meta.title as string)
+  resetDescription()
+
+  // context.loadingBar?.start();
+  // 在每个路由导航前执行权限检查
+  // checkPermission(to, from, next);
+})
+
+// router.afterEach(() => {
+//   context.loadingBar?.finish();
+// });
+
+export default router
--- a/web/src/services/index.ts
+++ b/web/src/services/index.ts
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './title'
--- a/web/src/utils/title.ts
+++ b/web/src/utils/title.ts
@@ -0,0 +1,25 @@
+import { useTitle } from '@vueuse/core'
+
+const DEFAULT_TITLE = 'Vue3 AdminVite + Vue + TS'
+
+const DEFAULT_DESCRIPTION = document
+  .querySelector('meta[name=\'description\']')
+  ?.getAttribute('content')
+
+export function setTitle(title?: string) {
+  useTitle().value = (title ? `${title} | ` : '') + DEFAULT_TITLE
+}
+
+export function resetDescription() {
+  document
+    .querySelector('meta[name=\'description\']')
+    ?.setAttribute('content', DEFAULT_DESCRIPTION!)
+}
+
+export function setDescription(description?: string) {
+  if (!description)
+    return
+  document
+    .querySelector('meta[name=\'description\']')
+    ?.setAttribute('content', `${description} | ${DEFAULT_TITLE}`)
+}
--- a/web/src/utils/url.ts
+++ b/web/src/utils/url.ts
@@ -0,0 +1,15 @@
+/** 直接当前页面跳转到指定url */
+export const jump = (url: string) => {
+  window.location.href = url
+}
+
+/** 在新标签页中跳转到指定url */
+export const jumpBlank = (url: string) => {
+  window.open(url, '_blank')
+}
+
+/** 将对象转换为url查询字符串 */
+export const queryFormat = (query: Record<string, any>) => {
+  const params = new URLSearchParams(query)
+  return params.toString() ? `?${params}` : ''
+}
--- a/web/src/views/CommunityView.vue
+++ b/web/src/views/CommunityView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+  </div>
+</template>
+
+<style scoped></style>
--- a/web/tsconfig.app.json
+++ b/web/tsconfig.app.json
@@ -3,6 +3,9 @@
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

+    "paths": {
+      "@/*": ["./src/*"]
+    },
    /* Linting */
    "strict": true,
    "noFallthroughCasesInSwitch": true,
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,7 +1,14 @@
 {
-  "files": [],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite-svg-loader"]
+  },
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "files": []
 }
--- a/web/tsconfig.node.json
+++ b/web/tsconfig.node.json
@@ -3,22 +3,22 @@
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
+    "moduleDetection": "force",
    "module": "ESNext",
-    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,

    /* Linting */
    "strict": true,
+    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]