feat: add admin frontend template

Signed-off-by: Ryan Wang <i@ryanc.cc>

admin-frontend/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true

admin-frontend/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  "root": true,
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier"
+  ],
+  "env": {
+    "vue/setup-compiler-macros": true
+  }
+}

admin-frontend/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

admin-frontend/README.md

@@ -0,0 +1,3 @@
+# halo-plugin-frontend-template（WIP）
+
+> Front-end template for Halo 2.0 pluggable system

admin-frontend/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

admin-frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "halo-plugin-frontend-template",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "test:unit": "vitest --environment jsdom",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@halo-dev/admin-shared": "link:/Users/ryanwang/Workspace/github/ruibaby/halo-admin-next/packages/shared",
+    "@halo-dev/components": "link:/Users/ryanwang/Workspace/github/ruibaby/halo-admin-next/packages/components",
+    "vue": "^3.2.36"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@types/jsdom": "^16.2.14",
+    "@types/node": "^16.11.36",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/test-utils": "^2.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "jsdom": "^19.0.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.5.1",
+    "typescript": "~4.7.2",
+    "vite": "^2.9.9",
+    "vitest": "^0.13.0",
+    "vue-tsc": "^0.35.2"
+  }
+}

admin-frontend/src/components/HelloWorld.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import {defineComponent, ref} from "vue";
+
+export default defineComponent({
+  name: "HelloWorld",
+  setup() {
+    const msg = ref("Hello World");
+    return {
+      msg,
+    };
+  },
+});
+</script>
+<template>
+  <div>{{ msg }}</div>
+</template>

admin-frontend/src/index.ts

@@ -0,0 +1,36 @@
+import type { Plugin } from "@halo-dev/admin-shared/src/types";
+import DefaultView from "./views/DefaultView.vue";
+import { IconGrid } from "@halo-dev/components";
+import "./styles/index.css";
+
+const plugin: Plugin = {
+  name: "PluginTemplate",
+  components: [],
+  extensionPoints: {},
+  routes: [
+    {
+      path: "/hello-world",
+      name: "HelloWorld",
+      component: DefaultView,
+    },
+  ],
+  menus: [
+    {
+      name: "From PluginTemplate",
+      items: [
+        {
+          name: "HelloWorld",
+          path: "/hello-world",
+          icon: IconGrid,
+        },
+      ],
+    },
+  ],
+  activated() {
+    // TODO
+  },
+  deactivated() {
+    // TODO
+  },
+};
+export default plugin;

admin-frontend/src/styles/index.css

@@ -0,0 +1,3 @@
+.title {
+  font-size: 20px;
+}

admin-frontend/src/views/DefaultView.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import logo from "../assets/logo.svg";
+
+export default defineComponent({
+  name: "DefaultView",
+  setup() {
+    return {
+      logo,
+      logoCircle
+    };
+  },
+});
+</script>
+<template>
+  <div class="title">Hello World</div>
+  <img :src="logo" alt="logo" />
+</template>
+<style scoped>
+.title {
+  color: red;
+}
+</style>

admin-frontend/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["./env.d.ts", "./src/**/*", "./src/**/*.vue"],
+  "exclude": ["./src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

admin-frontend/tsconfig.config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

admin-frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

admin-frontend/tsconfig.vitest.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

admin-frontend/vite.config.ts

@@ -0,0 +1,34 @@
+import {fileURLToPath, URL} from "url";
+
+import {defineConfig} from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  build: {
+    outDir: fileURLToPath(new URL("../src/main/resources/admin", import.meta.url)),
+    emptyOutDir: true,
+    lib: {
+      entry: "src/index.ts",
+      name: "PluginTemplate",
+      formats: ["iife"],
+      fileName: () => "halo-plugin-template.js",
+    },
+    rollupOptions: {
+      external: ["vue", "@halo-dev/shared", "@halo-dev/components"],
+      output: {
+        globals: {
+          vue: "Vue",
+          "@halo-dev/components": "components",
+        },
+      },
+    },
+  },
+});