.gitignore

@@ -15,6 +15,8 @@ vendor
 pb_data
 build
 main
-/dist
+/ui/dist/*
+!/ui/dist/.gitkeep
+./dist
+./certimate
 /docker/data
-/certimate

ui/.gitignore

@@ -1,8 +1,3 @@
-node_modules
-dist
-dist-ssr
-!dist/.gitkeep
-
 # Logs
 logs
 *.log
@@ -11,6 +6,10 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+./ui/.env
+node_modules
+dist-ssr
+*.local
 
 # Editor directories and files
 .vscode/*
@@ -23,5 +22,4 @@ lerna-debug.log*
 *.sln
 *.sw?
 
-*.local
 .env

ui/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json", "./tsconfig.app.json"],
+    tsconfigRootDir: __dirname,
+  },
+};
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

ui/components.json

@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/components/ui/utils"
+    "utils": "@/lib/utils"
   }
 }

ui/src/App.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from "react";
 import { RouterProvider } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useCreation } from "ahooks";
 import { App, ConfigProvider, theme, type ThemeConfig } from "antd";
 import { type Locale } from "antd/es/locale";
 import AntdLocaleEnUs from "antd/locale/en_US";
@@ -10,36 +9,30 @@ import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 
 import { localeNames } from "./i18n";
-import { useBrowserTheme } from "./hooks";
+import { useTheme } from "./hooks";
 import { router } from "./router.tsx";
 
 const RootApp = () => {
   const { i18n } = useTranslation();
 
-  const { theme: browserTheme } = useBrowserTheme();
+  const { theme: browserTheme } = useTheme();
 
-  const antdLocalesMap: Record<string, Locale> = useCreation(
+  const antdLocalesMap: Record<string, Locale> = {
-    () => ({
+    [localeNames.ZH]: AntdLocaleZhCN,
-      [localeNames.ZH]: AntdLocaleZhCN,
+    [localeNames.EN]: AntdLocaleEnUs,
-      [localeNames.EN]: AntdLocaleEnUs,
+  };
-    }),
-    []
-  );
   const [antdLocale, setAntdLocale] = useState(antdLocalesMap[i18n.language]);
   const handleLanguageChanged = () => {
     setAntdLocale(antdLocalesMap[i18n.language]);
     dayjs.locale(i18n.language);
   };
   i18n.on("languageChanged", handleLanguageChanged);
-  useLayoutEffect(handleLanguageChanged, [antdLocalesMap, i18n]);
+  useLayoutEffect(handleLanguageChanged, [i18n]);
 
-  const antdThemesMap: Record<string, ThemeConfig> = useCreation(
+  const antdThemesMap: Record<string, ThemeConfig> = {
-    () => ({
+    ["light"]: { algorithm: theme.defaultAlgorithm },
-      ["light"]: { algorithm: theme.defaultAlgorithm },
+    ["dark"]: { algorithm: theme.darkAlgorithm },
-      ["dark"]: { algorithm: theme.darkAlgorithm },
+  };
-    }),
-    []
-  );
   const [antdTheme, setAntdTheme] = useState(antdThemesMap[browserTheme]);
   useEffect(() => {
     setAntdTheme(antdThemesMap[browserTheme]);
@@ -47,7 +40,7 @@ const RootApp = () => {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
     root.classList.add(browserTheme);
-  }, [antdThemesMap, browserTheme]);
+  }, [browserTheme]);
 
   return (
     <ConfigProvider

ui/src/components/access/AccessEditForm.tsx

@@ -46,7 +46,7 @@ import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig
 import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
 import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
 
-type AccessEditFormModelType = Partial<MaybeModelRecord<AccessModel>>;
+type AccessEditFormModelType = Partial<Omit<AccessModel, "id" | "created" | "updated" | "deleted">>;
 
 export type AccessEditFormProps = {
   className?: string;
@@ -79,9 +79,9 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   const formRule = createSchemaFieldRule(formSchema);
   const [form] = Form.useForm<z.infer<typeof formSchema>>();
 
-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
+  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? {});
   useEffect(() => {
-    setInitialValues(model as Partial<z.infer<typeof formSchema>>);
+    setInitialValues(model ?? {});
   }, [model]);
 
   const [configType, setConfigType] = useState(model?.configType);

ui/src/components/access/AccessEditModal.tsx

@@ -5,11 +5,10 @@ import { Modal, notification } from "antd";
 
 import { type AccessModel } from "@/domain/access";
 import { useAccessStore } from "@/stores/access";
-import { getErrMsg } from "@/utils/error";
 import AccessEditForm, { type AccessEditFormInstance } from "./AccessEditForm";
 
 export type AccessEditModalProps = {
-  data?: Partial<MaybeModelRecord<AccessModel>>;
+  data?: Partial<AccessModel>;
   loading?: boolean;
   mode: "add" | "edit" | "copy";
   open?: boolean;
@@ -73,7 +72,7 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
 
       setOpen(false);
     } catch (err) {
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
 
       throw err;
     } finally {

ui/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "antd/locale/zh_CN" {
+  import zhCN from "antd/locale/zh_CN";
+  export default zhCN;
+}

ui/src/domain/access.ts

@@ -1,3 +1,5 @@
+import { type BaseModel } from "pocketbase";
+
 /*
   注意：如果追加新的常量值，请保持以 ASCII 排序。
   NOTICE: If you add new constant, please keep ASCII order.

ui/src/domain/certificate.ts

@@ -1,6 +1,8 @@
-import { type WorkflowModel } from "./workflow";
+import { type BaseModel } from "pocketbase";
 
-export interface CertificateModel extends BaseModel {
+import { WorkflowModel } from "./workflow";
+
+export interface CertificateModel extends Omit<BaseModel, "created" | "updated"> {
   san: string;
   certificate: string;
   privateKey: string;

ui/src/domain/settings.ts

@@ -1,4 +1,6 @@
-export interface SettingsModel<T> extends BaseModel {
+import { type BaseModel } from "pocketbase";
+
+export interface SettingsModel<T> extends Omit<BaseModel, "created" | "updated"> {
   name: string;
   content: T;
 }

ui/src/domain/workflow.ts

@@ -1,5 +1,6 @@
 import { produce } from "immer";
 import { nanoid } from "nanoid";
+import { type BaseModel } from "pocketbase";
 
 import i18n from "@/i18n";
 import { deployTargets, KVType } from "./domain";
@@ -27,7 +28,7 @@ export type WorkflowOutput = {
   error: string;
 };
 
-export interface WorkflowModel extends BaseModel {
+export interface WorkflowModel extends Omit<BaseModel, "created" | "updated"> {
   name: string;
   description?: string;
   type: string;
@@ -151,8 +152,6 @@ export const initWorkflow = (): WorkflowModel => {
     crontab: "0 0 * * *",
     enabled: false,
     draft: rs,
-    created: new Date().toUTCString(),
-    updated: new Date().toUTCString(),
   };
 };
 

ui/src/global.css

@@ -24,6 +24,11 @@
     --input: 20 5.9% 90%;
     --ring: 24.6 95% 53.1%;
     --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
@@ -46,5 +51,10 @@
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
     --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }

ui/src/global.d.ts

@@ -1,13 +0,0 @@
-import { type BaseModel as PbBaseModel } from "pocketbase";
-
-declare global {
-  declare interface BaseModel extends PbBaseModel {
-    deleted?: string;
-  }
-
-  declare type MaybeModelRecord<T extends BaseModel = BaseModel> = T | Omit<T, "id" | "created" | "updated" | "deleted">;
-
-  declare type MaybeModelRecordWithId<T extends BaseModel = BaseModel> = T | Pick<T, "id">;
-}
-
-export {};

ui/src/hooks/index.ts

@@ -1,3 +1,3 @@
-import useBrowserTheme from "./useBrowserTheme";
+import useTheme from "./useTheme";
 
-export { useBrowserTheme };
+export { useTheme };

ui/src/pages/ConsoleLayout.tsx

@@ -16,7 +16,7 @@ import {
 } from "lucide-react";
 
 import Version from "@/components/Version";
-import { useBrowserTheme } from "@/hooks";
+import { useTheme } from "@/hooks";
 import { getPocketBase } from "@/repository/pocketbase";
 
 const ConsoleLayout = () => {
@@ -182,7 +182,7 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
 const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
   const { t } = useTranslation();
 
-  const { theme, setThemeMode } = useBrowserTheme();
+  const { theme, setThemeMode } = useTheme();
 
   const items: Required<MenuProps>["items"] = [
     ["light", t("common.theme.light")],

ui/src/pages/accesses/AccessList.tsx

@@ -9,7 +9,6 @@ import { ClientResponseError } from "pocketbase";
 import AccessEditModal from "@/components/access/AccessEditModal";
 import { accessProvidersMap, type AccessModel } from "@/domain/access";
 import { useAccessStore } from "@/stores/access";
-import { getErrMsg } from "@/utils/error";
 
 const AccessList = () => {
   const { t } = useTranslation();
@@ -120,7 +119,7 @@ const AccessList = () => {
       }
 
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     });
   }, []);
 
@@ -141,7 +140,7 @@ const AccessList = () => {
       }
 
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setLoading(false);
     }
@@ -161,7 +160,7 @@ const AccessList = () => {
           await deleteAccess(data);
         } catch (err) {
           console.error(err);
-          notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+          notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
         }
       },
     });

ui/src/pages/certificates/CertificateList.tsx

@@ -10,7 +10,6 @@ import { ClientResponseError } from "pocketbase";
 import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
 import { CertificateModel } from "@/domain/certificate";
 import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
-import { getErrMsg } from "@/utils/error";
 
 const CertificateList = () => {
   const navigate = useNavigate();
@@ -196,7 +195,7 @@ const CertificateList = () => {
       }
 
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setLoading(false);
     }

ui/src/pages/dashboard/Dashboard.tsx

@@ -14,7 +14,6 @@ import { ClientResponseError } from "pocketbase";
 
 import { type Statistics } from "@/domain/statistics";
 import { get as getStatistics } from "@/api/statistics";
-import { getErrMsg } from "@/utils/error";
 
 const Dashboard = () => {
   const navigate = useNavigate();
@@ -50,7 +49,7 @@ const Dashboard = () => {
       }
 
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setLoading(false);
     }

ui/src/pages/login/Login.tsx

@@ -6,7 +6,6 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import { getPocketBase } from "@/repository/pocketbase";
-import { getErrMsg } from "@/utils/error";
 
 const Login = () => {
   const navigage = useNavigate();
@@ -30,7 +29,7 @@ const Login = () => {
       await getPocketBase().admins.authWithPassword(fields.username, fields.password);
       navigage("/");
     } catch (err) {
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setFormPending(false);
     }

ui/src/pages/workflows/WorkflowList.tsx

@@ -25,7 +25,6 @@ import { ClientResponseError } from "pocketbase";
 
 import { WorkflowModel } from "@/domain/workflow";
 import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow";
-import { getErrMsg } from "@/utils/error";
 
 const WorkflowList = () => {
   const navigate = useNavigate();
@@ -228,7 +227,7 @@ const WorkflowList = () => {
       }
 
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setLoading(false);
     }
@@ -256,7 +255,7 @@ const WorkflowList = () => {
       }
     } catch (err) {
       console.error(err);
-      notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     }
   };
 
@@ -272,7 +271,7 @@ const WorkflowList = () => {
           }
         } catch (err) {
           console.error(err);
-          notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
+          notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
         }
       },
     });

ui/src/repository/access.ts

@@ -12,7 +12,7 @@ export const list = async () => {
   });
 };
 
-export const save = async (record: MaybeModelRecord<AccessModel>) => {
+export const save = async (record: AccessModel | Omit<AccessModel, "id" | "created" | "updated" | "deleted">) => {
   if (record.id) {
     return await getPocketBase().collection(COLLECTION_NAME).update<AccessModel>(record.id, record);
   }
@@ -20,7 +20,7 @@ export const save = async (record: MaybeModelRecord<AccessModel>) => {
   return await getPocketBase().collection(COLLECTION_NAME).create<AccessModel>(record);
 };
 
-export const remove = async (record: MaybeModelRecordWithId<AccessModel>) => {
+export const remove = async (record: AccessModel) => {
   record = { ...record, deleted: dayjs.utc().format("YYYY-MM-DD HH:mm:ss") };
   await getPocketBase().collection(COLLECTION_NAME).update<AccessModel>(record.id!, record);
 };

ui/src/repository/settings.ts

@@ -1,4 +1,4 @@
-import { type SettingsModel } from "@/domain/settings";
+import { SettingsModel } from "@/domain/settings";
 import { getPocketBase } from "./pocketbase";
 
 export const get = async <T>(name: string) => {
@@ -13,7 +13,7 @@ export const get = async <T>(name: string) => {
   }
 };
 
-export const save = async <T>(record: MaybeModelRecordWithId<SettingsModel<T>>) => {
+export const save = async <T>(record: SettingsModel<T>) => {
   if (record.id) {
     return await getPocketBase().collection("settings").update<SettingsModel<T>>(record.id, record);
   }

ui/src/repository/workflow.ts

@@ -39,7 +39,7 @@ export const save = async (record: Record<string, string | boolean | WorkflowNod
   return await getPocketBase().collection(COLLECTION_NAME).create<WorkflowModel>(record);
 };
 
-export const remove = async (record: MaybeModelRecordWithId<WorkflowModel>) => {
+export const remove = async (record: WorkflowModel) => {
   return await getPocketBase().collection(COLLECTION_NAME).delete(record.id);
 };
 

ui/src/stores/access/index.ts

@@ -6,9 +6,9 @@ import { list as listAccess, save as saveAccess, remove as removeAccess } from "
 
 export interface AccessState {
   accesses: AccessModel[];
-  createAccess: (access: MaybeModelRecord<AccessModel>) => void;
+  createAccess: (access: Omit<AccessModel, "id" | "created" | "udpated" | "deleted">) => void;
-  updateAccess: (access: MaybeModelRecordWithId<AccessModel>) => void;
+  updateAccess: (access: AccessModel) => void;
-  deleteAccess: (access: MaybeModelRecordWithId<AccessModel>) => void;
+  deleteAccess: (access: AccessModel) => void;
   fetchAccesses: () => Promise<void>;
 }
 

ui/src/stores/workflow/index.ts

@@ -36,14 +36,14 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
     id: "",
     name: "placeholder",
     type: WorkflowNodeType.Start,
-  } as WorkflowModel,
+  },
   initialized: false,
   init: async (id?: string) => {
-    let data = {
+    let data: WorkflowModel = {
       id: "",
       name: "placeholder",
       type: "auto",
-    } as WorkflowModel;
+    };
 
     if (!id) {
       data = initWorkflow();

ui/src/utils/error.ts

@@ -11,5 +11,5 @@ export const getErrMsg = (error: unknown): string => {
     return error;
   }
 
-  return String(error ?? "Unknown error");
+  return "Something went wrong";
 };

ui/tsconfig.app.json

@@ -4,18 +4,12 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
     "module": "ESNext",
     "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"]
-        "./src/*"
-      ]
     },
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -31,7 +25,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
+  "include": ["src", "src/declarations.d.ts"]
-    "src"
-  ]
 }

ui/tsconfig.json

@@ -11,9 +11,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"]
-        "./src/*"
-      ]
     }
   }
 }
+

ui/tsconfig.node.json

@@ -9,7 +9,5 @@
     "strict": true,
     "noEmit": true
   },
-  "include": [
+  "include": ["vite.config.ts"]
-    "vite.config.ts"
-  ]
 }

ui/vite.config.ts

@@ -12,7 +12,7 @@ const preserveFilesPlugin = (filesToPreserve: string[]): Plugin => {
       // 在构建开始时将要保留的文件或目录移动到临时位置
       filesToPreserve.forEach((file) => {
         const srcPath = path.resolve(__dirname, file);
-        const tempPath = path.resolve(__dirname, `node_modules`, `.tmp`, `build_${file}`);
+        const tempPath = path.resolve(__dirname, `temp_${file}`);
         if (fs.existsSync(srcPath)) {
           fs.moveSync(srcPath, tempPath, { overwrite: true });
         }
@@ -22,7 +22,7 @@ const preserveFilesPlugin = (filesToPreserve: string[]): Plugin => {
       // 在构建完成后将临时位置的文件或目录移回原来的位置
       filesToPreserve.forEach((file) => {
         const srcPath = path.resolve(__dirname, file);
-        const tempPath = path.resolve(__dirname, `node_modules`, `.tmp`, `build_${file}`);
+        const tempPath = path.resolve(__dirname, `temp_${file}`);
         if (fs.existsSync(tempPath)) {
           fs.moveSync(tempPath, srcPath, { overwrite: true });
         }