feat: terminal ui add tag info

daemon/src/routers/Instance_router.ts

@@ -54,9 +54,9 @@ routerApp.on("instance/select", (ctx, data) => {
   const queryWrapper = InstanceSubsystem.getQueryMapWrapper();
   const allTags: string[] = [];
 
-  let tagText = "";
+  let searchTags: string[] = [];
   if (targetTag instanceof Array && targetTag.length > 0) {
-    tagText = targetTag.sort((a, b) => (a > b ? 1 : -1)).join(",");
+    searchTags = targetTag.map((v) => String(v).trim());
   }
 
   let result = queryWrapper.select<Instance>((v) => {
@@ -65,7 +65,10 @@ routerApp.on("instance/select", (ctx, data) => {
     if (!v.config.nickname.toLowerCase().includes(condition.instanceName.toLowerCase()))
       return false;
     if (condition.status && v.instanceStatus !== Number(condition.status)) return false;
-    if (tagText && !v.config.tag.join(",").includes(tagText)) return false;
+
+    const curInstanceTagText = v.config.tag.join(",");
+    if (searchTags.length > 0 && searchTags.some((v) => !curInstanceTagText.includes(v)))
+      return false;
     return true;
   });
   result = result.sort((a, b) => (a.config.nickname > b.config.nickname ? 1 : -1));

frontend/src/widgets/InstanceList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { LayoutCard } from "@/types/index";
-import { ref, onMounted, computed, h, unref } from "vue";
+import { ref, onMounted, computed, h } from "vue";
 import { t } from "@/lang/i18n";
 import {
   SearchOutlined,

frontend/src/widgets/instance/BaseInfo.vue

@@ -60,6 +60,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <!-- eslint-disable vue/html-indent -->
   <CardPanel class="containerWrapper" style="height: 100%">
     <template #title>
       {{ card.title }}
@@ -113,6 +114,7 @@ onMounted(async () => {
           {{ t("TXT_CODE_530f5951") }}
         </a>
       </a-typography-paragraph>
+
       <a-typography-paragraph
         v-if="
           instanceInfo?.config.processType === 'docker' &&

frontend/src/widgets/instance/Terminal.vue

@@ -34,6 +34,7 @@ import { reportErrorMsg } from "@/tools/validator";
 import TerminalCore from "@/components/TerminalCore.vue";
 import Reinstall from "./dialogs/Reinstall.vue";
 import { useAppStateStore } from "@/stores/useAppStateStore";
+import { INSTANCE_TYPE_TRANSLATION } from "@/hooks/useInstance";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -55,7 +56,10 @@ const reinstallDialog = ref<InstanceType<typeof Reinstall>>();
 const instanceId = getMetaOrRouteValue("instanceId");
 const daemonId = getMetaOrRouteValue("daemonId");
 const viewType = getMetaOrRouteValue("viewType", false);
-const innerTerminalType = viewType === "inner";
+const innerTerminalType = computed(() => props.card.width === 12 && viewType === "inner");
+const instanceTypeText = computed(
+  () => INSTANCE_TYPE_TRANSLATION[instanceInfo.value?.config.type ?? -1]
+);
 
 const updateCmd = computed(() => (instanceInfo.value?.config.updateCommand ? true : false));
 const instanceStatusText = computed(() => INSTANCE_STATUS[instanceInfo.value?.status ?? -1]);
@@ -214,19 +218,23 @@ onMounted(async () => {
               <span class="ml-6"> {{ getInstanceName }} </span>
             </a-typography-title>
             <a-typography-paragraph v-if="!isPhone" class="mb-0 ml-4">
-              <span v-if="isRunning" class="color-success">
-                <CheckCircleOutlined />
-                {{ instanceStatusText }}
-              </span>
-              <span v-else-if="isBuys">
-                <LoadingOutlined />
-                {{ instanceStatusText }}
-              </span>
-              <span v-else class="color-info">
-                <InfoCircleOutlined />
-                {{ instanceStatusText }}
+              <span class="ml-6">
+                <a-tag v-if="isRunning" color="green">
+                  <CheckCircleOutlined />
+                  {{ instanceStatusText }}
+                </a-tag>
+                <a-tag v-else-if="isBuys" color="red">
+                  <LoadingOutlined />
+                  {{ instanceStatusText }}
+                </a-tag>
+                <a-tag v-else>
+                  <InfoCircleOutlined />
+                  {{ instanceStatusText }}
+                </a-tag>
               </span>
 
+              <a-tag color="purple"> {{ instanceTypeText }} </a-tag>
+
               <span
                 v-if="instanceInfo?.watcher && instanceInfo?.watcher > 1 && !isPhone"
                 class="ml-16"
@@ -304,6 +312,21 @@ onMounted(async () => {
     <template #title>
       <CloudServerOutlined />
       <span class="ml-8"> {{ getInstanceName }} </span>
+      <span class="ml-8">
+        <a-tag v-if="isRunning" color="green">
+          <CheckCircleOutlined />
+          {{ instanceStatusText }}
+        </a-tag>
+        <a-tag v-else-if="isBuys" color="red">
+          <LoadingOutlined />
+          {{ instanceStatusText }}
+        </a-tag>
+        <a-tag v-else>
+          <InfoCircleOutlined />
+          {{ instanceStatusText }}
+        </a-tag>
+        <a-tag color="purple"> {{ instanceTypeText }} </a-tag>
+      </span>
     </template>
     <template #operator>
       <span