Implement UI with Basic CRUD Functionality

ui/src/index.ts

@@ -1,5 +1,5 @@
 import { definePlugin } from "@halo-dev/console-shared";
-import HomeView from "./views/HomeView.vue";
+import HtmlInjectionList from "./views/HtmlInjectionList.vue";
 import { IconPlug } from "@halo-dev/components";
 import { markRaw } from "vue";
 
@@ -9,9 +9,9 @@ export default definePlugin({
     {
       parentName: "Root",
       route: {
-        path: "/codes",
-        name: "InjectionCode",
-        component: HomeView,
+        path: "/HtmlInjection",
+        name: "HtmlInjection",
+        component: HtmlInjectionList,
         meta: {
           title: "代码注入管理",
           searchable: true,

ui/src/types/index.ts

@@ -0,0 +1,46 @@
+export interface Metadata {
+  name: string;
+  labels?: {
+    [key: string]: string;
+  } | null;
+  annotations?: {
+    [key: string]: string;
+  } | null;
+  version?: number | null;
+  creationTimestamp?: string | null;
+  deletionTimestamp?: string | null;
+}
+
+export interface HtmlInjectionSpec {
+  name: string;
+  description: string;
+  fragment: string;
+  injectionPoint: 'HEADER' | 'FOOTER';
+  pageRules: Set<String>;
+  enabled: boolean;
+}
+
+/**
+ * 与自定义模型 HtmlInjection 对应
+ */
+export interface HtmlInjection {
+  spec: HtmlInjectionSpec;
+  apiVersion: "theme.halo.run/v1alpha1"; // apiVersion=自定义模型的 group/version
+  kind: "HtmlInjection"; // Code 自定义模型中 @GVK 注解中的 kind
+  metadata: Metadata;
+}
+
+/**
+ * HtmlInjection 自定义模型生成 list API 所对应的类型
+ */
+export interface HtmlInjectionList {
+  page: number;
+  size: number;
+  total: number;
+  items: Array<HtmlInjection>;
+  first: boolean;
+  last: boolean;
+  hasNext: boolean;
+  hasPrevious: boolean;
+  totalPages: number;
+}