feat: add an API to invalidate theme template cache (#5906)

#### What type of PR is this?
/kind feature
/area core
/area theme
/milestone 2.16.x

#### What this PR does / why we need it:
为主题管理增加在线清理缓存功能

#### Which issue(s) this PR fixes:
Fixes #5440

#### Does this PR introduce a user-facing change?
```release-note
为主题管理增加在线清理缓存功能
```

ui/console-src/modules/interface/themes/ThemeDetail.vue

@@ -32,6 +32,27 @@ const themesModal = inject<Ref<boolean>>("themesModal");
 const { isActivated, getFailedMessage, handleResetSettingConfig } =
   useThemeLifeCycle(selectedTheme);
 
+async function handleClearCache() {
+  Dialog.warning({
+    title: t("core.theme.operations.clear_templates_cache.title"),
+    description: t("core.theme.operations.clear_templates_cache.description"),
+    confirmText: t("core.common.buttons.confirm"),
+    cancelText: t("core.common.buttons.cancel"),
+    async onConfirm() {
+      if (!selectedTheme.value) {
+        console.error("No selected or activated theme");
+        return;
+      }
+
+      await apiClient.theme.invalidateCache({
+        name: selectedTheme.value?.metadata.name,
+      });
+
+      Toast.success(t("core.common.toast.operation_success"));
+    },
+  });
+}
+
 const handleReloadTheme = async () => {
   Dialog.warning({
     title: t("core.theme.operations.reload.title"),
@@ -109,6 +130,9 @@ const handleReloadTheme = async () => {
               <VDropdownItem type="danger" @click="handleReloadTheme">
                 {{ $t("core.theme.operations.reload.button") }}
               </VDropdownItem>
+              <VDropdownItem type="danger" @click="handleClearCache">
+                {{ $t("core.theme.operations.clear_templates_cache.button") }}
+              </VDropdownItem>
               <VDropdownItem type="danger" @click="handleResetSettingConfig">
                 {{ $t("core.common.buttons.reset") }}
               </VDropdownItem>