chore: improve the front-end infrastructure (#14)

.github/workflows/workflow.yaml

@@ -23,12 +23,12 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - uses: pnpm/action-setup@v2.0.1
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 7
+          version: 8
           run_install: false
       - name: Get pnpm store directory
         id: pnpm-cache

build.gradle

@@ -1,6 +1,6 @@
 plugins {
     id 'java'
-    id "com.github.node-gradle.node" version "3.3.0"
+    id "com.github.node-gradle.node" version "5.0.0"
     id "io.freefair.lombok" version "8.0.1"
     id "run.halo.plugin.devtools" version "0.0.4"
 }
@@ -31,18 +31,11 @@ node {
     nodeProjectDir = file("${project.projectDir}/console")
 }
 
-task buildFrontend(type: NpxTask) {
-    command = 'pnpm'
+task buildFrontend(type: PnpmTask) {
     args = ['build']
 }
 
-task pnpmInstall(type: NpxTask) {
-    command = "pnpm"
-    args = ["install"]
-}
-
 build {
     // build frontend before build
     tasks.getByName('compileJava').dependsOn('buildFrontend')
-    tasks.getByName("buildFrontend").dependsOn("pnpmInstall")
 }

compose/README.md

@@ -1,57 +0,0 @@
-# Halo 前后端服务的 Docker Compose
-
-通过 Docker Compose 的方式启动 Halo 前后端服务快速查看插件效果。
-
-## 开发指引
-
-### 环境要求
-
-- OpenJDK 17
-- NodeJS 16+
-- pnpm 7+
-- Docker
-- Docker Compose
-
-### 编译插件
-
-下载前端依赖：
-
-```bash
-cd ./plugin-starter
-
-./gradlew.bat pnpmInstall
-
-# or macOS/Linux
-
-./gradlew pnpmInstall
-```
-
-构建：
-
-```bash
-./gradlew.bat build
-
-# or macOS/Linux
-
-./gradlew build
-```
-
-### 启动 Halo
-
-```bash
-cd plugin-starter/compose
-docker-compose up -d
-docker-compose ps
-```
-
-### 访问后台
-
-在浏览器中访问 <https://localhost:8090/console> 即可，登录用户名和密码为当前目录中 `application-dev.yaml` 配置中的 `super-admin-username`
-和 `super-admin-password`。
-
-然后在左侧菜单中选择 `插件`，即可查看所有插件的状态。
-
-### 开发
-
-修改前端代码或者后端代码，然后运行 `./gradlew.bat build` 或者 `./gradlew build`（macOS/Linux）即可构建插件，无需重启
-Halo。但修改配置文件后需要 build 插件以及重启 Halo。

compose/application.yaml

@@ -1,40 +0,0 @@
-server:
-  port: 8090
-spring:
-  profiles:
-    active: dev
-halo:
-  external-url: http://localhost:8090/
-  security:
-    initializer:
-      super-admin-username: admin
-      super-admin-password: P@88w0rd
-    oauth2:
-      jwt:
-        jwsAlgorithm: rs512
-        public-key-location: classpath:app.pub
-        private-key-location: classpath:app.key
-  plugin:
-    runtime-mode: development # development, deployment
-    classes-directories:
-      - "build/classes"
-      - "build/resources"
-    lib-directories:
-      - "libs"
-    fixedPluginPath:
-      - "/plugin"
-springdoc:
-  api-docs:
-    enabled: true
-  swagger-ui:
-    enabled: true
-  show-login-endpoint: false
-  show-actuator: false
-  use-management-port: false
-management:
-  endpoints:
-    web:
-      exposure:
-        include: health,info,metrics,startup,shutdown
-  server:
-    port: 8090

compose/docker-compose.yaml

@@ -1,14 +0,0 @@
-services:
-  halo-next:
-    image: halohub/halo-dev:main
-    ports:
-      - 8090:8090
-    environment:
-      - SPRING_CONFIG_ADDITIONAL_LOCATION=optional:file:/etc/config/
-    volumes:
-      - ./application.yaml:/etc/config/application.yaml
-      - ../:/plugin
-    networks:
-      - halo
-networks:
-  halo: {}

console/.eslintrc.cjs

@@ -4,7 +4,7 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 module.exports = {
   root: true,
   extends: [
-    "plugin:vue/vue3-essential",
+    "plugin:vue/vue3-recommended",
     "eslint:recommended",
     "@vue/eslint-config-typescript/recommended",
     "@vue/eslint-config-prettier",

console/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "vite build --watch --mode=development",
     "build": "vite build",
     "preview": "vite preview --port 4173",
     "test:unit": "vitest --environment jsdom",
@@ -11,33 +11,33 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@halo-dev/components": "^1.0.0",
-    "@halo-dev/console-shared": "^2.0.0",
+    "@halo-dev/components": "^1.5.0",
+    "@halo-dev/console-shared": "^2.6.0",
     "canvas-confetti": "^1.6.0",
-    "vue": "^3.2.41"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.18",
-    "@rushstack/eslint-patch": "^1.2.0",
+    "@iconify/json": "^2.2.76",
+    "@rushstack/eslint-patch": "^1.3.1",
     "@types/canvas-confetti": "^1.6.0",
-    "@types/jsdom": "^20.0.0",
-    "@types/node": "^16.18.0",
-    "@vitejs/plugin-vue": "^3.1.2",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.0",
+    "@types/jsdom": "^20.0.1",
+    "@types/node": "^16.18.35",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue-jsx": "^2.1.1",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.26.0",
-    "eslint-plugin-vue": "^9.6.0",
+    "eslint": "^8.42.0",
+    "eslint-plugin-vue": "^9.14.1",
     "jsdom": "^19.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "sass": "^1.58.0",
+    "prettier": "^2.8.8",
+    "sass": "^1.63.3",
     "typescript": "~4.7.4",
-    "unplugin-icons": "^0.15.2",
-    "vite": "^3.1.8",
-    "vitest": "^0.24.3",
-    "vue-tsc": "^1.0.9"
+    "unplugin-icons": "^0.15.3",
+    "vite": "^3.2.7",
+    "vitest": "^0.24.5",
+    "vue-tsc": "^1.6.5"
   }
 }

console/src/index.ts

@@ -10,23 +10,18 @@ export default definePlugin({
       parentName: "Root",
       route: {
         path: "/example",
-        children: [
-          {
-            path: "",
-            name: "Example",
-            component: HomeView,
-            meta: {
-              title: "示例页面",
-              searchable: true,
-              menu: {
-                name: "示例页面",
-                group: "示例分组",
-                icon: markRaw(IconPlug),
-                priority: 0,
-              },
-            },
+        name: "Example",
+        component: HomeView,
+        meta: {
+          title: "示例页面",
+          searchable: true,
+          menu: {
+            name: "示例页面",
+            group: "示例分组",
+            icon: markRaw(IconPlug),
+            priority: 0,
           },
-        ],
+        },
       },
     },
   ],

console/vite.config.ts

@@ -8,40 +8,54 @@ import Icons from "unplugin-icons/vite";
 const pluginEntryName = "PluginStarter";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [Vue(), VueJsx(), Icons({ compiler: "vue3" })],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
-  build: {
-    outDir: fileURLToPath(
-      new URL("../src/main/resources/console", import.meta.url)
-    ),
-    emptyOutDir: true,
-    lib: {
-      entry: "src/index.ts",
-      name: pluginEntryName,
-      formats: ["iife"],
-      fileName: () => "main.js",
-    },
-    rollupOptions: {
-      external: [
-        "vue",
-        "@halo-dev/console-shared",
-        "@halo-dev/components",
-        "vue-router",
-      ],
-      output: {
-        globals: {
-          vue: "Vue",
-          "vue-router": "VueRouter",
-          "@halo-dev/components": "HaloComponents",
-          "@halo-dev/console-shared": "HaloConsoleShared",
-        },
-        extend: true,
+export default ({ mode }: { mode: string }) => {
+  const isProduction = mode === "production";
+  const outDir = isProduction
+    ? "../src/main/resources/console"
+    : "../build/resources/main/console";
+
+  return defineConfig({
+    plugins: [Vue(), VueJsx(), Icons({ compiler: "vue3" })],
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
       },
     },
-  },
-});
+    define: {
+      "process.env": process.env,
+    },
+    build: {
+      outDir,
+      emptyOutDir: true,
+      lib: {
+        entry: "src/index.ts",
+        name: pluginEntryName,
+        formats: ["iife"],
+        fileName: () => "main.js",
+      },
+      rollupOptions: {
+        external: [
+          "vue",
+          "vue-router",
+          "@vueuse/core",
+          "@vueuse/components",
+          "@vueuse/router",
+          "@halo-dev/shared",
+          "@halo-dev/components",
+        ],
+        output: {
+          globals: {
+            vue: "Vue",
+            "vue-router": "VueRouter",
+            "@vueuse/core": "VueUse",
+            "@vueuse/components": "VueUse",
+            "@vueuse/router": "VueUse",
+            "@halo-dev/console-shared": "HaloConsoleShared",
+            "@halo-dev/components": "HaloComponents",
+          },
+          extend: true,
+        },
+      },
+    },
+  });
+};