refactor: move route layouts to @halo-dev/admin-shared

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

index.html

@@ -13,8 +13,8 @@
   <link href="/favicon.ico" rel="icon"/>
   <script src="./assets/vue/vue.global.js"></script>
   <script src="./assets/vue-router/vue-router.global.js"></script>
-  <script src="./assets/admin-shared/halo-admin-shared.iife.js"></script>
   <script src="./assets/components/halo-components.iife.js"></script>
+  <script src="./assets/admin-shared/halo-admin-shared.iife.js"></script>
   <style>
     body {
       height: 100%;

packages/shared/package.json

@@ -22,7 +22,8 @@
       "types": "./dist/index.d.ts",
       "require": "./dist/halo-admin-shared.cjs.js",
       "import": "./dist/halo-admin-shared.es.js"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "repository": {
     "type": "git",
@@ -34,6 +35,10 @@
   },
   "homepage": "https://github.com/halo-dev/halo-admin/tree/next/shared/components#readme",
   "license": "MIT",
+  "dependencies": {
+    "@halo-dev/components": "workspace:*",
+    "axios": "^0.27.2"
+  },
   "devDependencies": {
     "vite-plugin-dts": "^1.2.0"
   },

packages/shared/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/shared/src/index.ts

@@ -1,5 +1,8 @@
+import "./styles/tailwind.css";
+
 export * from "./types/plugin";
 export * from "./types/menus";
 export * from "./core/plugins";
 export * from "./states/pages";
 export * from "./types/extension";
+export * from "./layouts";

packages/shared/src/layouts/BasicLayout.vue

@@ -8,11 +8,13 @@ import {
   VRoutesMenu,
   VTag,
 } from "@halo-dev/components";
-import { menus, minimenus } from "@/router/menus.config";
+import type { MenuGroupType, MenuItemType } from "@/types/menus";
 import logo from "@/assets/logo.svg";
 import { RouterView, useRoute, useRouter } from "vue-router";
-import { ref } from "vue";
+import { inject, ref } from "vue";
 
+const menus = inject<MenuGroupType>("menus");
+const minimenus = inject<MenuItemType>("minimenus");
 const route = useRoute();
 const router = useRouter();
 

packages/shared/src/layouts/UserProfileLayout.vue

@@ -75,11 +75,11 @@ const handleTabChange = (id: string) => {
           <div class="flex">
             <Starport
               :duration="400"
-              :port="`user-profile-${user.metadata?.name}`"
+              :port="`user-profile-${user?.metadata?.name}`"
               class="h-24 w-24 sm:h-32 sm:w-32"
             >
               <img
-                :src="user.spec?.avatar"
+                :src="user?.spec?.avatar"
                 alt="Avatar"
                 class="h-full w-full rounded-full ring-4 ring-white drop-shadow-lg"
               />
@@ -90,7 +90,7 @@ const handleTabChange = (id: string) => {
           >
             <div class="mt-6 block min-w-0 flex-1">
               <h1 class="truncate text-xl font-bold text-gray-900">
-                <span class="mr-1">{{ user.spec?.displayName }}</span>
+                <span class="mr-1">{{ user?.spec?.displayName }}</span>
               </h1>
             </div>
             <div

packages/shared/src/styles/tailwind.css

@@ -0,0 +1 @@
+@tailwind utilities;

packages/shared/src/types/extension.ts

@@ -17,3 +17,37 @@ export interface Extension<T> {
   kind: string;
   metadata: Metadata;
 }
+
+export interface LoginHistory {
+  loginAt: string;
+  sourceIp: string;
+  userAgent: string;
+  successful: boolean;
+  reason?: string;
+}
+
+export interface User {
+  spec: UserSpec;
+  status?: UserStatus;
+  apiVersion: string;
+  kind: string;
+  metadata: Metadata;
+}
+
+export interface UserSpec {
+  displayName: string;
+  avatar?: string;
+  email: string;
+  phone?: string;
+  password?: string;
+  bio?: string;
+  registeredAt?: string;
+  twoFactorAuthEnabled?: boolean;
+  disabled?: boolean;
+  loginHistoryLimit?: number;
+}
+
+export interface UserStatus {
+  lastLoginAt?: string;
+  loginHistories?: LoginHistory[];
+}

packages/shared/src/utils/api-client.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const token =
+"eyJhbGciOiJSUzUxMiJ9.eyJpc3MiOiJIYWxvIE93bmVyIiwic3ViIjoiYWRtaW4iLCJleHAiOjE2NTYxMzk1MzcsImlhdCI6MTY1NjA1MzEzNywic2NvcGUiOlsiUk9MRV9zdXBlci1yb2xlIl19.QUAe5lD2chY5NG_bXwqPxk2y4gxUifz-_H-dN_ZcggdQ0Nm2m5R168VUt33jJ4gCUW5HQx7hqJY_V60jDQ0nAP3VjrfeDNG7BvoaqLyoThg40f1oD-AUoB648b_TZga0oKtwkCyLYi_qkgmvF6UZumMsI9rTVHxef6O5vAbSrFFc2pZ90xNH9PN7ILJDimv_2I1IRpBtASJG1cM0yWYUmHWO-yW2UwUKGxJTf3TN_OvJqHcMRqD7Y5Fe1BVhZfzY8UX6KygG21eKd26hLNIQz6xx-O85HTj8HM5CJUR7jSp3Oo7rtQwIbEDTdGeTqmFM96ufL4nVYdpDuONm0zSxYQ"
+const axiosInstance = axios.create({
+  headers: {
+    Authorization: `Bearer ${token}`,
+  },
+  baseURL: "http://localhost:8090",
+});
+
+export default axiosInstance;

packages/shared/tailwind.config.js

@@ -0,0 +1,24 @@
+const { themeable } = require("tailwindcss-themeable");
+
+module.exports = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("tailwindcss-safe-area"),
+    require("@tailwindcss/aspect-ratio"),
+    themeable({
+      defaultTheme: "default",
+      themes: [
+        {
+          name: "default",
+          palette: {
+            primary: "#4CCBA0",
+            secondary: "#0E1731",
+          },
+        },
+      ],
+    }),
+  ],
+};

packages/shared/vite.config.ts

@@ -30,11 +30,12 @@ export default defineConfig({
       fileName: (format) => `halo-admin-shared.${format}.js`,
     },
     rollupOptions: {
-      external: ["vue", "vue-router"],
+      external: ["vue", "vue-router", "@halo-dev/components"],
       output: {
         globals: {
           vue: "Vue",
           "vue-router": "VueRouter",
+          "@halo-dev/components": "HaloComponents",
         },
         exports: "named",
       },

pnpm-lock.yaml

@@ -127,7 +127,12 @@ importers:
 
   packages/shared:
     specifiers:
+      '@halo-dev/components': workspace:*
+      axios: ^0.27.2
       vite-plugin-dts: ^1.2.0
+    dependencies:
+      '@halo-dev/components': link:../components
+      axios: 0.27.2
     devDependencies:
       vite-plugin-dts: 1.2.0
 

src/main.ts

@@ -2,11 +2,15 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
-import type { Plugin } from "@halo-dev/admin-shared";
+import type {
+  MenuGroupType,
+  MenuItemType,
+  Plugin,
+} from "@halo-dev/admin-shared";
+import { menus, minimenus, registerMenu } from "./router/menus.config";
 // setup
 import "./setup/setupStyles";
 import { setupComponents } from "./setup/setupComponents";
-import { registerMenu } from "@/router/menus.config";
 
 // core modules
 import { coreModules } from "./modules";
@@ -134,6 +138,9 @@ async function initApp() {
   try {
     loadCoreModules();
     await loadPluginModules();
+
+    app.provide<MenuGroupType[]>("menus", menus);
+    app.provide<MenuItemType[]>("minimenus", minimenus);
   } catch (e) {
     console.error(e);
   } finally {

src/modules/contents/attachments/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout } from "@/layouts";
 import AttachmentList from "./AttachmentList.vue";
 import { IconFolder } from "@halo-dev/components";
 

src/modules/contents/comments/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout } from "@/layouts";
 import { IconMessage } from "@halo-dev/components";
 import CommentList from "./CommentList.vue";
 

src/modules/contents/pages/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout } from "@/layouts";
 import SheetList from "./PageList.vue";
 import { IconPages } from "@halo-dev/components";
 

src/modules/contents/posts/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, BlankLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout, BlankLayout } from "@/layouts";
 import { IconBookRead } from "@halo-dev/components";
 import PostList from "./PostList.vue";
 import PostEditor from "./PostEditor.vue";

src/modules/dashboard/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout } from "@/layouts";
 import Dashboard from "./Dashboard.vue";
 import { IconDashboard } from "@halo-dev/components";
 

src/modules/interface/menus/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout } from "@/layouts";
 import MenuList from "./MenuList.vue";
 import { IconListSettings } from "@halo-dev/components";
 

src/modules/interface/themes/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, BlankLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout, BlankLayout } from "@/layouts";
 import ThemeDetail from "./ThemeDetail.vue";
 import Visual from "./Visual.vue";
 import { IconPalette } from "@halo-dev/components";

src/modules/system/plugins/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout } from "@/layouts";
 import PluginList from "./PluginList.vue";
 import PluginDetail from "./PluginDetail.vue";
 import { IconPlug } from "@halo-dev/components";

src/modules/system/roles/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
-import { BasicLayout } from "@/layouts";
 import RoleList from "./RoleList.vue";
 import RoleDetail from "./RoleDetail.vue";
 

src/modules/system/settings/module.ts

@@ -1,5 +1,4 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import { definePlugin, SystemSettingsLayout } from "@halo-dev/admin-shared";
-import { SystemSettingsLayout } from "@/layouts";
 import GeneralSettings from "./GeneralSettings.vue";
 import NotificationSettings from "./NotificationSettings.vue";
 import { IconSettings } from "@halo-dev/components";

src/modules/system/users/module.ts

@@ -1,5 +1,9 @@
-import { definePlugin } from "@halo-dev/admin-shared";
+import {
-import { BasicLayout, BlankLayout, UserProfileLayout } from "@/layouts";
+  BasicLayout,
+  BlankLayout,
+  definePlugin,
+  UserProfileLayout,
+} from "@halo-dev/admin-shared";
 import UserList from "./UserList.vue";
 import UserDetail from "./UserDetail.vue";
 import ProfileModification from "./ProfileModification.vue";

src/router/routes.config.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from "vue-router";
 import NotFound from "@/views/exceptions/NotFound.vue";
-import { BasicLayout } from "@/layouts";
+import { BasicLayout } from "@halo-dev/admin-shared";
 
 export const routes: Array<RouteRecordRaw> = [
   {

src/setup/setupStyles.ts

@@ -1,2 +1,3 @@
 import "@halo-dev/components/dist/style.css";
 import "@/styles/tailwind.css";
+import "@halo-dev/admin-shared/dist/style.css";

src/utils/api-client.ts

@@ -1,8 +1,7 @@
 import axios from "axios";
 
 const token =
-  "eyJhbGciOiJSUzUxMiJ9.eyJpc3MiOiJIYWxvIE93bmVyIiwic3ViIjoiYWRtaW4iLCJleHAiOjE2NTYwNDM3NTYsImlhdCI6MTY1NTk1NzM1Niwic2NvcGUiOlsiUk9MRV9zdXBlci1yb2xlIl19.XHmq5q9-HWkWQsPdcuvldeiKOQxbKHEd9qP33ZWaLSFVgj5D-8QvfLjuLreMWUBLvZXvsqBuDHpib70gO6V2c4VtUbnAQnzr8oQx4E5ypMnWH4Gdbs8UlSpMGjTPzSk-QNFKB48nMo8wgTcq2oyhBsMEIArKFm7v2pa5dSX1LbWTRRpNfJpHPVwrAPzaNkOs_qasS8QzSTHU1C3wCf_A4lEILVhbrHq_mv9yeMQZL0enD-gpbGXEQzHE59zwxFC7kfgb_YhzYZfzuXAv2BIKn4TU14W9aW4HySymsqM0ItO5RT3GmJgurbX9USHhIKfGdTFEG1cfgZ0ZJNNOOLEndA";
+"eyJhbGciOiJSUzUxMiJ9.eyJpc3MiOiJIYWxvIE93bmVyIiwic3ViIjoiYWRtaW4iLCJleHAiOjE2NTYxMzk1MzcsImlhdCI6MTY1NjA1MzEzNywic2NvcGUiOlsiUk9MRV9zdXBlci1yb2xlIl19.QUAe5lD2chY5NG_bXwqPxk2y4gxUifz-_H-dN_ZcggdQ0Nm2m5R168VUt33jJ4gCUW5HQx7hqJY_V60jDQ0nAP3VjrfeDNG7BvoaqLyoThg40f1oD-AUoB648b_TZga0oKtwkCyLYi_qkgmvF6UZumMsI9rTVHxef6O5vAbSrFFc2pZ90xNH9PN7ILJDimv_2I1IRpBtASJG1cM0yWYUmHWO-yW2UwUKGxJTf3TN_OvJqHcMRqD7Y5Fe1BVhZfzY8UX6KygG21eKd26hLNIQz6xx-O85HTj8HM5CJUR7jSp3Oo7rtQwIbEDTdGeTqmFM96ufL4nVYdpDuONm0zSxYQ"
-
 const axiosInstance = axios.create({
   headers: {
     Authorization: `Bearer ${token}`,

src/views/exceptions/__tests__/NotFound.spec.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest";
+
+describe("NotFound", () => {
+  it("should render", () => {
+    expect(true).toBe(true);
+  });
+});