chore: update ui template (#53)

Signed-off-by: Ryan Wang <i@ryanc.cc>
2026-01-13 06:05:59 +08:00 · 2025-06-20 17:00:00 +08:00
parent e31b994a7f
commit c81ec5a2ae
12 changed files with 1674 additions and 1513 deletions
--- a/ui/.editorconfig
+++ b/ui/.editorconfig
@@ -1,12 +1,9 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
 charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = true
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100
--- a/ui/.eslintrc.cjs
+++ b/ui/.eslintrc.cjs
@@ -1,18 +0,0 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
-
-module.exports = {
-  root: true,
-  extends: [
-    "plugin:vue/vue3-recommended",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript/recommended",
-    "@vue/eslint-config-prettier",
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-  },
-  env: {
-    "vue/setup-compiler-macros": true,
-  },
-};
--- a/ui/.prettierrc.json
+++ b/ui/.prettierrc.json
@@ -2,5 +2,6 @@
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
-  "printWidth": 100
+  "printWidth": 100,
+  "tabWidth": 2
 }
--- a/ui/eslint.config.ts
+++ b/ui/eslint.config.ts
@@ -0,0 +1,30 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginVitest from '@vitest/eslint-plugin'
+import pluginOxlint from 'eslint-plugin-oxlint'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*'],
+  },
+  ...pluginOxlint.configs['flat/recommended'],
+  skipFormatting,
+)
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,10 +4,12 @@
    "build": "run-p type-check \"build-only {@}\" --",
    "build-only": "vite build",
    "dev": "vite build --watch --mode=development",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+    "lint:eslint": "eslint . --fix",
+    "lint": "run-s lint:*",
    "prettier": "prettier --write src/",
    "test:unit": "vitest --passWithNoTests",
-    "type-check": "vue-tsc --build --force"
+    "type-check": "vue-tsc --build"
  },
  "dependencies": {
    "@halo-dev/api-client": "^2.21.0",
@@ -15,32 +17,34 @@
    "@halo-dev/console-shared": "^2.21.0",
    "axios": "^1.7.2",
    "canvas-confetti": "^1.9.3",
-    "vue": "^3.4.31"
+    "vue": "^3.5.17"
  },
  "devDependencies": {
    "@halo-dev/ui-plugin-bundler-kit": "^2.21.1",
-    "@iconify/json": "^2.2.224",
-    "@rushstack/eslint-patch": "^1.10.3",
-    "@tsconfig/node20": "^20.1.4",
-    "@types/canvas-confetti": "^1.6.4",
+    "@iconify/json": "^2.2.350",
+    "@tsconfig/node20": "^20.1.6",
+    "@types/canvas-confetti": "^1.9.0",
    "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.14.9",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@types/node": "^20.19.1",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/eslint-plugin": "^1.2.7",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.1",
    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "jsdom": "^24.1.0",
-    "npm-run-all2": "^6.2.0",
-    "prettier": "^3.3.2",
-    "sass": "^1.77.6",
-    "typescript": "~5.5.3",
-    "unplugin-icons": "^0.19.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.29.0",
+    "eslint-plugin-oxlint": "^0.16.12",
+    "eslint-plugin-vue": "~10.0.1",
+    "jsdom": "^26.1.0",
+    "npm-run-all2": "^7.0.2",
+    "oxlint": "^0.16.12",
+    "prettier": "3.5.3",
+    "sass": "^1.89.2",
+    "typescript": "~5.8.3",
+    "unplugin-icons": "^22.1.0",
    "vite": "^5.3.2",
-    "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.24"
+    "vitest": "^3.2.4",
+    "vue-tsc": "^2.2.10"
  },
-  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
+  "packageManager": "pnpm@9.15.9"
 }
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
--- a/ui/src/index.ts
+++ b/ui/src/index.ts
@@ -1,23 +1,23 @@
-import { definePlugin } from "@halo-dev/console-shared";
-import HomeView from "./views/HomeView.vue";
-import { IconPlug } from "@halo-dev/components";
-import { markRaw } from "vue";
+import { definePlugin } from '@halo-dev/console-shared'
+import HomeView from './views/HomeView.vue'
+import { IconPlug } from '@halo-dev/components'
+import { markRaw } from 'vue'

 export default definePlugin({
  components: {},
  routes: [
    {
-      parentName: "Root",
+      parentName: 'Root',
      route: {
-        path: "/example",
-        name: "Example",
+        path: '/example',
+        name: 'Example',
        component: HomeView,
        meta: {
-          title: "示例页面",
+          title: '示例页面',
          searchable: true,
          menu: {
-            name: "示例页面",
-            group: "示例分组",
+            name: '示例页面',
+            group: '示例分组',
            icon: markRaw(IconPlug),
            priority: 0,
          },
@@ -26,4 +26,4 @@ export default definePlugin({
    },
  ],
  extensionPoints: {},
-});
+})
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import confetti from "canvas-confetti";
-import { onMounted } from "vue";
-import RiShareCircleLine from "~icons/ri/share-circle-line";
-import RiCodeBoxLine from "~icons/ri/code-box-line";
-import RiBookReadLine from "~icons/ri/book-read-line";
-import RiComputerLine from "~icons/ri/computer-line";
-import RiArrowRightSLine from "~icons/ri/arrow-right-s-line";
+import confetti from 'canvas-confetti'
+import { onMounted } from 'vue'
+import RiShareCircleLine from '~icons/ri/share-circle-line'
+import RiCodeBoxLine from '~icons/ri/code-box-line'
+import RiBookReadLine from '~icons/ri/book-read-line'
+import RiComputerLine from '~icons/ri/computer-line'
+import RiArrowRightSLine from '~icons/ri/arrow-right-s-line'

 onMounted(() => {
  confetti({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6, x: 0.58 },
-  });
-});
+  })
+})
 </script>

 <template>
@@ -28,9 +28,7 @@ onMounted(() => {
          target="_blank"
        >
          <h2 class="docs__box-title"><RiShareCircleLine />发布一个插件</h2>
-          <span class="docs__box-message">
-            了解如何与我们的社区分享您的扩展。
-          </span>
+          <span class="docs__box-message"> 了解如何与我们的社区分享您的扩展。 </span>
          <span class="docs__box-arrow">
            <RiArrowRightSLine />
          </span>
@@ -41,9 +39,7 @@ onMounted(() => {
          target="_blank"
        >
          <h2 class="docs__box-title"><RiComputerLine />基础概览</h2>
-          <span class="docs__box-message">
-            了解插件的项目结构、生命周期、资源配置等。
-          </span>
+          <span class="docs__box-message"> 了解插件的项目结构、生命周期、资源配置等。 </span>
          <span class="docs__box-arrow">
            <RiArrowRightSLine />
          </span>
@@ -115,8 +111,7 @@ onMounted(() => {
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 300ms;
      cursor: pointer;
-      filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
-        drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+      filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));

      &:hover {
        box-shadow:
@@ -156,8 +151,7 @@ onMounted(() => {
      &:hover {
        .docs__box-arrow {
          color: #9ca3af;
-          transform: translate(00.375rem, 0) rotate(0) skewX(0) skewY(0)
-            scaleX(1) scaleY(1);
+          transform: translate(00.375rem, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
        }
      }
    }
--- a/ui/tsconfig.app.json
+++ b/ui/tsconfig.app.json
@@ -1,14 +1,12 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["./env.d.ts", "./src/**/*", "./src/**/*.vue"],
-  "exclude": ["./src/**/__tests__/*"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
-    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "baseUrl": ".",
+
    "paths": {
      "@/*": ["./src/*"]
-    },
-    "types": ["unplugin-icons/types/vue"]
+    }
  }
 }
--- a/ui/tsconfig.node.json
+++ b/ui/tsconfig.node.json
@@ -2,7 +2,6 @@
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": ["vite.config.*", "vitest.config.*"],
  "compilerOptions": {
-    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

--- a/ui/tsconfig.vitest.json
+++ b/ui/tsconfig.vitest.json
@@ -1,8 +1,8 @@
 {
  "extends": "./tsconfig.app.json",
+  "include": ["src/**/__tests__/*", "env.d.ts"],
  "exclude": [],
  "compilerOptions": {
-    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",

    "lib": [],
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -1,17 +1,25 @@
-import { fileURLToPath, URL } from "url";
+import { fileURLToPath, URL } from 'url'

-import { viteConfig } from "@halo-dev/ui-plugin-bundler-kit";
-import Icons from "unplugin-icons/vite";
+import { viteConfig } from '@halo-dev/ui-plugin-bundler-kit'
+import Icons from 'unplugin-icons/vite'
+import { configDefaults } from 'vitest/config'

 // For more info,
 // please see https://github.com/halo-dev/halo/tree/main/ui/packages/ui-plugin-bundler-kit
 export default viteConfig({
  vite: {
-    plugins: [Icons({ compiler: "vue3" })],
+    plugins: [Icons({ compiler: 'vue3' })],
    resolve: {
      alias: {
-        "@": fileURLToPath(new URL("./src", import.meta.url)),
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
+
+    // If you don't use Vitest, you can remove the following configuration
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
  },
-});
+})