From 4ff8efbbce023add9ea4d90eb00e8cde076bdc52 Mon Sep 17 00:00:00 2001
From: CaiHaosen <“caihaosen@mail.bnu.edu.cn>
Date: Fri, 12 Jul 2024 12:59:58 +0800
Subject: [PATCH] Implement UI with Basic CRUD Functionality

---
 ui/src/index.ts                    |   8 +-
 ui/src/types/index.ts              |  46 +++++
 ui/src/views/HomeView.vue          | 169 ------------------
 ui/src/views/HtmlInjectionAdd.vue  | 269 +++++++++++++++++++++++++++++
 ui/src/views/HtmlInjectionList.vue | 257 +++++++++++++++++++++++++++
 5 files changed, 576 insertions(+), 173 deletions(-)
 create mode 100644 ui/src/types/index.ts
 delete mode 100644 ui/src/views/HomeView.vue
 create mode 100644 ui/src/views/HtmlInjectionAdd.vue
 create mode 100644 ui/src/views/HtmlInjectionList.vue

diff --git a/ui/src/index.ts b/ui/src/index.ts
index b0057650..8dc0f15a 100644
--- a/ui/src/index.ts
+++ b/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,
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
new file mode 100644
index 00000000..947ce46a
--- /dev/null
+++ b/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;
+}
diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
deleted file mode 100644
index 9b9cb0af..00000000
--- a/ui/src/views/HomeView.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<script setup lang="ts">
-import confetti from "canvas-confetti";
-import { onMounted } from "vue";
-import RiShareCircleLine from "~icons/ri/share-circle-line";
-import RiCodeBoxLine from "~icons/ri/code-box-line";
-import RiBookReadLine from "~icons/ri/book-read-line";
-import RiComputerLine from "~icons/ri/computer-line";
-import RiArrowRightSLine from "~icons/ri/arrow-right-s-line";
-
-onMounted(() => {
-  confetti({
-    particleCount: 100,
-    spread: 70,
-    origin: { y: 0.6, x: 0.58 },
-  });
-});
-</script>
-
-<template>
-  <section id="plugin-starter">
-    <div class="wrapper">
-      <span class="title"> 你已经成功运行起了插件！ </span>
-      <span class="message">你可以点击下方文档继续下一步</span>
-      <div class="docs">
-        <a
-          href="https://docs.halo.run/developer-guide/plugin/publish"
-          class="docs__box"
-          target="_blank"
-        >
-          <h2 class="docs__box-title"><RiShareCircleLine />发布一个插件</h2>
-          <span class="docs__box-message">
-            了解如何与我们的社区分享您的扩展。
-          </span>
-          <span class="docs__box-arrow">
-            <RiArrowRightSLine />
-          </span>
-        </a>
-        <a
-          href="https://docs.halo.run/developer-guide/plugin/structure"
-          class="docs__box"
-          target="_blank"
-        >
-          <h2 class="docs__box-title"><RiComputerLine />基础概览</h2>
-          <span class="docs__box-message">
-            了解插件的项目结构、生命周期、资源配置等。
-          </span>
-          <span class="docs__box-arrow">
-            <RiArrowRightSLine />
-          </span>
-        </a>
-        <a
-          href="https://docs.halo.run/developer-guide/plugin/examples/todolist"
-          class="docs__box group"
-          target="_blank"
-        >
-          <h2 class="docs__box-title"><RiBookReadLine />示例插件</h2>
-          <span class="docs__box-message">帮助你从 0 到 1 完成一个插件。</span>
-          <span class="docs__box-arrow">
-            <RiArrowRightSLine />
-          </span>
-        </a>
-        <a
-          href="https://docs.halo.run/developer-guide/plugin/api-reference/extension"
-          class="docs__box"
-          target="_blank"
-        >
-          <h2 class="docs__box-title"><RiCodeBoxLine />API 参考</h2>
-          <span class="docs__box-message">插件中的 API 列表。</span>
-          <span class="docs__box-arrow">
-            <RiArrowRightSLine />
-          </span>
-        </a>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-#plugin-starter {
-  height: 100vh;
-  background-color: #f8fafc;
-}
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  gap: 1.5rem;
-
-  .title {
-    font-weight: 700;
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-
-  .message {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: #4b5563;
-  }
-
-  .docs {
-    display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    gap: 1rem;
-    max-width: 48rem;
-
-    .docs__box {
-      background-color: #fff;
-      border-radius: 0.375rem;
-      padding: 0.75rem;
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 300ms;
-      cursor: pointer;
-      filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
-        drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
-
-      &:hover {
-        box-shadow: 0 0 0 0px #fff, 0 0 0 1px rgb(59 130 246 / 0.5), 0 0 #0000;
-      }
-
-      .docs__box-title {
-        display: flex;
-        flex-direction: row;
-        font-size: 1.125rem;
-        line-height: 1.75rem;
-        font-weight: 700;
-        margin-bottom: 2rem;
-        gap: 0.5rem;
-        align-items: center;
-      }
-
-      .docs__box-message {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        color: #4b5563;
-      }
-
-      .docs__box-arrow {
-        pointer-events: none;
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        color: #d1d5db;
-      }
-
-      &:hover {
-        .docs__box-arrow {
-          color: #9ca3af;
-          transform: translate(00.375rem, 0) rotate(0) skewX(0) skewY(0)
-            scaleX(1) scaleY(1);
-        }
-      }
-    }
-  }
-
-  @media (min-width: 640px) {
-    .docs {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-}
-</style>
diff --git a/ui/src/views/HtmlInjectionAdd.vue b/ui/src/views/HtmlInjectionAdd.vue
new file mode 100644
index 00000000..a3c6397c
--- /dev/null
+++ b/ui/src/views/HtmlInjectionAdd.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import {
+  VCard,
+  VButton,
+  VModal,
+  VSpace,
+  VTabbar
+} from '@halo-dev/components';
+import axios from "axios";
+import type { HtmlInjection } from "@/types";
+import { cloneDeep } from 'lodash-es';
+import { useI18n } from "vue-i18n";
+
+
+const { t } = useI18n();
+
+// 接收 props
+const props = defineProps<{
+  /**
+   * 控制模态窗口的显示状态
+   * @type {boolean}
+   * @default false
+   */
+  visible: boolean;
+
+  /**
+   * 当前编辑的 HTML 注入对象，如果为空就是新增注入的逻辑
+   * @type {HtmlInjection | null}
+   */
+  htmlInjection: HtmlInjection | null;
+}>();
+
+
+// 定义 emit 事件
+const emit = defineEmits(['update:visible', 'close', 'submit']);
+
+// 创建 Axios 实例
+const http = axios.create({
+  baseURL: "/",
+  timeout: 1000,
+});
+
+// 初始化表单数据
+const initialFormData = {
+  name: '',
+  description: '',
+  fragment: '',
+  injectionPoint: 'HEADER',
+  pageRules: '',
+  isEnabled: false,
+};
+
+const formData = ref(cloneDeep(initialFormData));
+
+// 重置表单数据
+const resetFormData = () => {
+  formData.value = cloneDeep(initialFormData);
+};
+
+// 更新表单数据
+const updateFormData = (currentHtmlInjection: HtmlInjection | null) => {
+  if (currentHtmlInjection) {
+    formData.value = {
+      name: currentHtmlInjection.spec.name,
+      description: currentHtmlInjection.spec.description,
+      fragment: currentHtmlInjection.spec.fragment,
+      injectionPoint: currentHtmlInjection.spec.injectionPoint,
+      pageRules: Array.from(currentHtmlInjection.spec.pageRules).join(', '),
+      isEnabled: currentHtmlInjection.spec.enabled,
+    };
+  } else {
+    resetFormData();
+  }
+};
+
+// 监听 props.htmlInjection 的变化并相应更新 formData
+watch(
+  () => props.htmlInjection,
+  updateFormData,
+  { immediate: true }
+);
+
+// 监听 props.visible 的变化以在关闭模态窗口时重置表单
+watch(
+  () => props.visible,
+  (visible) => {
+    if (!visible) {
+      resetFormData();
+    }
+  }
+);
+
+// 关闭模态窗口
+const closeModal = () => {
+  emit('update:visible', false);
+  emit('close');
+};
+
+// 提交表单
+const submitForm = () => {
+  const requestData = {
+    apiVersion: 'theme.halo.run/v1alpha1',
+    kind: 'HtmlInjection',
+    metadata: {
+      generateName: 'htmlinjection-', // 使用现有注入的名称
+    },
+    spec: {
+      name: formData.value.name,
+      description: formData.value.description,
+      fragment: formData.value.fragment,
+      injectionPoint: formData.value.injectionPoint,
+      pageRules: Array.from(formData.value.pageRules.split(',').map((page) => page.trim())), // 转换为数组
+      enabled: formData.value.isEnabled,
+    },
+  };
+
+  //console.log('Request Data:', requestData);
+
+  const url = props.htmlInjection
+    ? `/apis/theme.halo.run/v1alpha1/htmlinjections/${props.htmlInjection.metadata.name}`
+    : '/apis/theme.halo.run/v1alpha1/htmlinjections';
+  const method = props.htmlInjection ? 'put' : 'post';
+  const data = method === 'put' ? { ...props.htmlInjection, spec: requestData.spec } : requestData;
+  http({
+    method,
+    url,
+    data: data
+  })
+    .then(() => {
+      emit('submit', formData.value);
+      closeModal();
+    })
+    .catch((error) => {
+      console.error('Error creating or updating html injection:', error);
+    });
+};
+
+// 选项卡数据
+const tabs = ref([
+  { id: "form", label: t("基本信息")},
+  { id: "content", label: t("代码内容") }
+]);
+
+// 当前激活的选项卡
+const activeTab = ref("form");
+
+</script>
+
+<template>
+  <VModal
+    :visible="visible"
+    :title="t('新增注入')"
+    :width="700"
+    @update:visible="closeModal"
+  >
+    <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+      <VCard :body-class="['!p-0', '!overflow-visible']" class="mb-4">
+        <template #header>
+          <VTabbar
+            v-model:active-id="activeTab"
+            :items="tabs.map((item) => ({ id: item.id, label: item.label }))"
+            class="w-full !rounded-none"
+            type="outline"
+          ></VTabbar>
+        </template>
+      </VCard>
+    </div>
+
+    <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0" v-show="activeTab === 'form'">
+      <FormKit
+        type="form"
+        id="html-injection-form"
+        name="html-injection-form"
+        @submit="submitForm"
+        :config="{ validationVisibility: 'submit' }"
+        :actions="false"
+      >
+        <VCard :body-class="['!p-0', '!overflow-visible']" class="mb-4">
+          <div class="p-4">
+            <FormKit
+              id="name"
+              name="name"
+              :label="t('名称')"
+              type="text"
+              v-model="formData.name"
+              validation="required|length:0,100"
+              :placeholder="t('请输入名称')"
+            />
+          </div>
+        </VCard>
+
+        <VCard :body-class="['!p-0', '!overflow-visible']" class="mb-4">
+          <div class="p-4">
+            <FormKit
+              id="description"
+              name="description"
+              :label="t('代码描述')"
+              type="textarea"
+              v-model="formData.description"
+              validation="length:0,500"
+              :placeholder="t('请输入代码描述')"
+            />
+          </div>
+        </VCard>
+
+        <VCard :body-class="['!p-0', '!overflow-visible']" class="mb-4">
+          <div class="p-4">
+            <FormKit
+              id="injectionPoint"
+              name="injectionPoint"
+              :label="t('注入点')"
+              type="select"
+              v-model="formData.injectionPoint"
+              :options="[
+                { value: 'HEADER', label: 'Header' },
+                { value: 'FOOTER', label: 'Footer' }
+              ]"
+            />
+          </div>
+        </VCard>
+
+        <VCard :body-class="['!p-0', '!overflow-visible']" class="mb-4">
+          <div class="p-4">
+            <FormKit
+              id="pageRules"
+              name="pageRules"
+              :label="t('匹配规则')"
+              type="text"
+              v-model="formData.pageRules"
+              :placeholder="t('请输入要注入的路径')"
+            />
+          </div>
+        </VCard>
+
+        <VCard :body-class="['!p-0', '!overflow-visible']" class="mb-4">
+          <div class="p-4">
+            <FormKit
+              id="isEnabled"
+              name="isEnabled"
+              :label="t('启用')"
+              type="checkbox"
+              v-model="formData.isEnabled"
+            />
+          </div>
+        </VCard>
+      </FormKit>
+    </div>
+
+    <VCard :body-class="['!p-0', '!overflow-visible']" class="mb-4" v-show="activeTab === 'content'">
+      <VCodemirror v-model="formData.fragment" height="500px" language="html" />
+    </VCard>
+
+    <template #footer>
+      <VSpace>
+        <VButton type="secondary" @click="submitForm">
+          {{ t('core.common.buttons.submit') }}
+        </VButton>
+        <VButton @click="closeModal">
+          {{ t('core.common.buttons.cancel_and_shortcut') }}
+        </VButton>
+      </VSpace>
+    </template>
+  </VModal>
+</template>
+
+<style>
+@import "@halo-dev/components/dist/style.css";
+</style>
diff --git a/ui/src/views/HtmlInjectionList.vue b/ui/src/views/HtmlInjectionList.vue
new file mode 100644
index 00000000..b9fd4c7e
--- /dev/null
+++ b/ui/src/views/HtmlInjectionList.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import {
+  VCard,
+  VPageHeader,
+  VButton,
+  IconAddCircle,
+  VEntity,
+  VEntityField,
+  VSwitch,
+  VDropdownItem,
+  Dialog,
+} from '@halo-dev/components';
+import Fuse from "fuse.js";
+import axios from "axios";
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import HtmlInjectionAdd from "./HtmlInjectionAdd.vue";
+import { useI18n } from "vue-i18n";
+import type { HtmlInjection, HtmlInjectionList } from "@/types";
+
+// 初始化 Day.js 插件
+dayjs.extend(timezone);
+dayjs.extend(utc);
+
+// 使用 i18n
+const { t } = useI18n();
+
+// 变量定义
+const fuse = ref<Fuse<HtmlInjection> | null>(null);
+const htmlInjections = ref<HtmlInjectionList>({
+  page: 1,
+  size: 20,
+  total: 0,
+  items: [],
+  first: true,
+  last: false,
+  hasNext: false,
+  hasPrevious: false,
+  totalPages: 0,
+});
+const currentHtmlInjection = ref<HtmlInjection | null>(null);
+const keyword = ref("");
+const isModalVisible = ref(false);
+const activeTab = ref("All");
+
+// Axios 实例
+const http = axios.create({
+  baseURL: "/",
+  timeout: 1000,
+});
+
+
+// 函数定义
+// 获取代码注入列表
+const fetchHtmlInjections = async () => {
+  const response = await http.get<HtmlInjectionList>("/apis/theme.halo.run/v1alpha1/htmlinjections");
+  htmlInjections.value = response.data;
+  fuse.value = new Fuse(response.data.items, {
+    keys: ['spec.name', 'spec.description'],
+    threshold: 0.3,
+  });
+  //console.log('fetch data:', response.data);
+
+};
+
+// 打开模态窗口
+const openModal = () => {
+  currentHtmlInjection.value = null;  // 创建新注入时清空 currentHtmlInjection
+  isModalVisible.value = true;
+};
+
+// 关闭模态窗口
+const closeModal = () => {
+  isModalVisible.value = false;
+};
+
+// 表单提交
+const handleFormSubmit = () => {
+  fetchHtmlInjections();
+  closeModal();
+};
+
+// 跳转到注入详情页面
+const detailHtmlInjection = (htmlInjection: HtmlInjection) => {
+  console.log('TODO-跳转到详情页面');
+};
+
+// 编辑代码注入
+const editHtmlInjection = (htmlInjection: HtmlInjection) => {
+  currentHtmlInjection.value = htmlInjection;
+  isModalVisible.value = true;
+};
+
+// 删除代码注入
+const deleteHtmlInjection = (htmlInjection: HtmlInjection) => {
+  Dialog.warning({
+    title: t("删除代码注入"),
+    description: t("确认要删除该代码注入吗？"),
+    confirmText: t("确认"),
+    cancelText: t("取消"),
+    onConfirm: () => {
+      http
+        .delete(`/apis/theme.halo.run/v1alpha1/htmlinjections/${htmlInjection.metadata.name}`)
+        .then(() => {
+          setTimeout(() => {
+            fetchHtmlInjections(); // 延迟重新获取数据，因为发现如果不延迟页面并没有立即反映删除的结果，必须手动刷新页面才能看到变化
+          }, 500); // 等待数据库完成更新再获取数据
+        })
+        .catch((error) => {
+          console.error('Error deleting htmlInjection:', error);
+        });
+    },
+  });
+};
+
+// 切换代码注入启用状态
+const handleToggle = (htmlInjection: HtmlInjection) => {
+  http
+    .put<HtmlInjection>(
+      `/apis/theme.halo.run/v1alpha1/htmlinjections/${htmlInjection.metadata.name}`,
+      htmlInjection
+    )
+    .then(() => {
+      fetchHtmlInjections();
+    });
+};
+
+// 格式化日期时间
+const formatDatetime = (date: string | Date | undefined | null, tz?: string): string => {
+  return date ? dayjs(date).tz(tz).format("YYYY-MM-DD HH:mm") : "";
+};
+
+// 计算属性定义
+// 过滤后的代码注入列表
+const filteredHtmlInjections = computed(() => {
+  let results = htmlInjections.value.items;
+  if (keyword.value && fuse.value) {
+    results = fuse.value.search(keyword.value).map(result => result.item);
+  }
+  if (activeTab.value === "Enabled") {
+    return results.filter(htmlInjection => htmlInjection.spec.enabled);
+  }
+  if (activeTab.value === "Disabled") {
+    return results.filter(htmlInjection => !htmlInjection.spec.enabled);
+  }
+  return results;
+});
+
+// 计算过滤后的代码注入总数
+const filteredTotal = computed(() => {
+  return filteredHtmlInjections.value.length;
+});
+
+// 在组件挂载时获取代码注入列表
+onMounted(fetchHtmlInjections);
+
+</script>
+
+<template>
+  <div class="html-injection-list">
+    <!-- 页面标题 -->
+    <VPageHeader :title="t('代码注入管理')">
+      <template #actions>
+        <VButton type="secondary" @click="openModal">
+          <template #icon>
+            <IconAddCircle class="h-full w-full" />
+          </template>
+          {{ t('新增注入') }}
+        </VButton>
+      </template>
+    </VPageHeader>
+
+    <div class="m-0 md:m-4">
+      <VCard :body-class="['!p-0']">
+        <!-- 头部包含搜索和标签 -->
+        <template>
+          <header class="header">
+            <div class="block w-full bg-gray-50 px-4 py-3">
+              <div class="relative flex flex-col items-start sm:flex-row sm:items-center">
+                <div class="flex w-full flex-1 sm:w-auto">
+                  <SearchInput v-model="keyword" placeholder="t('请输入关键字')" />
+                </div>
+                <div>
+                  <VButton :class="{ active: activeTab === 'All' }" @click="activeTab = 'All'">{{ t('全部') }}</VButton>
+                  <VButton :class="{ active: activeTab === 'Enabled' }" @click="activeTab = 'Enabled'">{{ t('启用') }}</VButton>
+                  <VButton :class="{ active: activeTab === 'Disabled' }" @click="activeTab = 'Disabled'">{{ t('禁用') }}</VButton>
+                </div>
+              </div>
+            </div>
+          </header>
+        </template>
+
+        <!-- 代码注入列表 -->
+        <ul class="box-border h-full w-full divide-y divide-gray-100">
+          <li v-for="(htmlInjection, index) in filteredHtmlInjections" :key="index">
+            <VEntity>
+              <template #start>
+                <VEntityField
+                  :title="htmlInjection.spec.name"
+                  :description="htmlInjection.spec.description"
+                ></VEntityField>
+              </template>
+              <template #end>
+                <VEntityField>
+                  <template #description>
+                    <span class="truncate text-xs tabular-nums text-gray-500">
+                      {{ formatDatetime(htmlInjection.metadata.creationTimestamp) }}
+                    </span>
+                  </template>
+                </VEntityField>
+                <VSwitch
+                  v-model="htmlInjection.spec.enabled"
+                  @click="() => handleToggle(htmlInjection)"
+                />
+              </template>
+              <template #dropdownItems>
+                <VDropdownItem type="danger" @click="deleteHtmlInjection(htmlInjection)">
+                  <!-- @ts-ignore -->
+                  {{ t("core.common.buttons.delete") }}
+                </VDropdownItem>
+                <VDropdownItem @click="editHtmlInjection(htmlInjection)">
+                  {{ t("修改") }}
+                </VDropdownItem>
+                <VDropdownItem @click="detailHtmlInjection(htmlInjection)">
+                  {{ t("详情") }}
+                </VDropdownItem>
+              </template>
+            </VEntity>
+          </li>
+        </ul>
+
+        <!-- 页脚显示总数 -->
+        <template #footer>
+          <div class="flex h-8 items-center">
+            <span class="text-sm text-gray-500">
+              {{ t("core.components.pagination.total_label", { total: filteredTotal }) }}
+            </span>
+          </div>
+        </template>
+      </VCard>
+    </div>
+
+    <!-- 添加/编辑代码注入的模态窗口 -->
+    <HtmlInjectionAdd
+      :visible="isModalVisible"
+      :htmlInjection="currentHtmlInjection"
+      @close="closeModal"
+      @submit="handleFormSubmit"
+    />
+  </div>
+</template>
+
+<style>
+@import "@halo-dev/components/dist/style.css";
+</style>