feat: update theme requires field and supports show failed message (#826)

#### What type of PR is this?

/kind feature

#### What this PR does / why we need it:

修改主题的 `spec.require` 字段为 `spec.requires`，以及支持显示错误信息。适配：https://github.com/halo-dev/halo/pull/3150

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

Fixes https://github.com/halo-dev/halo/issues/3088

#### Screenshots:

<img width="1692" alt="image" src="https://user-images.githubusercontent.com/21301288/212800478-0fe53ae8-4e31-4810-89aa-4b06d1b700fb.png">
<img width="1056" alt="image" src="https://user-images.githubusercontent.com/21301288/212800550-7edd7c0a-564c-4df4-baee-b3ffe6b3352d.png">

#### Special notes for your reviewer:

测试方式：

1. Halo 切换到 https://github.com/halo-dev/halo/pull/3150 分支。
2. Console 需要 `pnpm install`。
3. 修改主题的 `spec.requires`，根据 https://github.com/halo-dev/halo/pull/3150 中的测试条件修改这个值。
4. 检查是否可以显示异常版本信息。

#### Does this PR introduce a user-facing change?

```release-note
Console 端支持显示主题的版本异常信息
```

package.json

@@ -41,7 +41,7 @@
     "@formkit/utils": "^1.0.0-beta.12",
     "@formkit/validation": "1.0.0-beta.12",
     "@formkit/vue": "^1.0.0-beta.12",
-    "@halo-dev/api-client": "0.0.66",
+    "@halo-dev/api-client": "0.0.70",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/console-shared": "workspace:*",
     "@halo-dev/richtext-editor": "^0.0.0-alpha.17",

pnpm-lock.yaml

@@ -13,7 +13,7 @@ importers:
       '@formkit/utils': ^1.0.0-beta.12
       '@formkit/validation': 1.0.0-beta.12
       '@formkit/vue': ^1.0.0-beta.12
-      '@halo-dev/api-client': 0.0.66
+      '@halo-dev/api-client': 0.0.70
       '@halo-dev/components': workspace:*
       '@halo-dev/console-shared': workspace:*
       '@halo-dev/richtext-editor': ^0.0.0-alpha.17
@@ -108,7 +108,7 @@ importers:
       '@formkit/utils': 1.0.0-beta.12-e579559
       '@formkit/validation': 1.0.0-beta.12
       '@formkit/vue': 1.0.0-beta.12-e579559_ior6jr3fpijijuwpr34w2i25va
-      '@halo-dev/api-client': 0.0.66
+      '@halo-dev/api-client': 0.0.70
       '@halo-dev/components': link:packages/components
       '@halo-dev/console-shared': link:packages/shared
       '@halo-dev/richtext-editor': 0.0.0-alpha.17_vue@3.2.45
@@ -2298,8 +2298,8 @@ packages:
       - windicss
     dev: false
 
-  /@halo-dev/api-client/0.0.66:
-    resolution: {integrity: sha512-TxiNVki2FGUXYCy/zmvHQJV5BfXIF6dT3JwtoT0Vo6IjlN47lxND1y8ZV4QB+msj4u/jIF3s9skxzvMoyqRbog==}
+  /@halo-dev/api-client/0.0.70:
+    resolution: {integrity: sha512-qAvxUFJPPKZwNfGVd2xC33kSUtlFAR0x0wZZyJKQE9hO0K+850+xCVm/XpOaodTGZq0zSuYvdckVngMOY2DILg==}
     dev: false
 
   /@halo-dev/richtext-editor/0.0.0-alpha.17_vue@3.2.45:

src/modules/interface/themes/ThemeDetail.vue

@@ -14,6 +14,7 @@ import {
   Dialog,
   VAvatar,
   Toast,
+  VStatusDot,
 } from "@halo-dev/components";
 import ThemeUploadModal from "./components/ThemeUploadModal.vue";
 
@@ -26,7 +27,7 @@ import { apiClient } from "@/utils/api-client";
 const selectedTheme = inject<Ref<Theme | undefined>>("selectedTheme", ref());
 const upgradeModal = ref(false);
 
-const { isActivated, handleResetSettingConfig } =
+const { isActivated, getFailedMessage, handleResetSettingConfig } =
   useThemeLifeCycle(selectedTheme);
 
 const handleReloadTheme = async () => {
@@ -83,6 +84,12 @@ const onUpgradeModalClose = () => {
                 <VTag>
                   {{ isActivated ? "当前启用" : "未启用" }}
                 </VTag>
+                <VStatusDot
+                  v-if="getFailedMessage()"
+                  v-tooltip="getFailedMessage()"
+                  state="warning"
+                  animate
+                />
               </p>
             </div>
           </div>
@@ -184,7 +191,7 @@ const onUpgradeModalClose = () => {
           >
             <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              {{ selectedTheme?.spec.require }}
+              {{ selectedTheme?.spec.requires }}
             </dd>
           </div>
           <div

src/modules/interface/themes/components/components/ThemeListItem.vue

@@ -37,8 +37,12 @@ const emit = defineEmits<{
 
 const { theme } = toRefs(props);
 
-const { isActivated, handleActiveTheme, handleResetSettingConfig } =
-  useThemeLifeCycle(theme);
+const {
+  isActivated,
+  getFailedMessage,
+  handleActiveTheme,
+  handleResetSettingConfig,
+} = useThemeLifeCycle(theme);
 
 const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
   Dialog.warning({
@@ -136,6 +140,11 @@ const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
       </VEntityField>
     </template>
     <template #end>
+      <VEntityField v-if="getFailedMessage()">
+        <template #description>
+          <VStatusDot v-tooltip="getFailedMessage()" state="warning" animate />
+        </template>
+      </VEntityField>
       <VEntityField v-if="theme.metadata.deletionTimestamp">
         <template #description>
           <VStatusDot v-tooltip="`删除中`" state="warning" animate />

src/modules/interface/themes/composables/use-theme.ts

@@ -9,6 +9,7 @@ import { storeToRefs } from "pinia";
 interface useThemeLifeCycleReturn {
   loading: Ref<boolean>;
   isActivated: ComputedRef<boolean>;
+  getFailedMessage: () => string | undefined;
   handleActiveTheme: () => void;
   handleResetSettingConfig: () => void;
 }
@@ -26,6 +27,18 @@ export function useThemeLifeCycle(
     return activatedTheme?.value?.metadata.name === theme.value?.metadata.name;
   });
 
+  const getFailedMessage = (): string | undefined => {
+    if (!(theme.value?.status?.phase === "FAILED")) {
+      return;
+    }
+
+    const condition = theme.value.status.conditions?.[0];
+
+    if (condition) {
+      return [condition.type, condition.message].join("：");
+    }
+  };
+
   const handleActiveTheme = async () => {
     Dialog.info({
       title: "是否确认启用当前主题",
@@ -86,6 +99,7 @@ export function useThemeLifeCycle(
   return {
     loading,
     isActivated,
+    getFailedMessage,
     handleActiveTheme,
     handleResetSettingConfig,
   };