feat: Host cloud sync supports state cloud

src/components/Cards/DetailCard/index.vue

@@ -5,7 +5,7 @@
         <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
           <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
           <span class="item-value el-form-item__content">
-            <template
+            <component
               :is="item.component"
               v-if="item.component"
               v-bind="{...item}"

src/views/assets/Cloud/Account/components/AssetPanel.vue

@@ -82,7 +82,7 @@ export default {
             [this.$tc('Platform'), 'platform'],
             [this.$tc('Node'), 'node'],
             [this.$tc('Protocol'), 'protocols'],
-            [this.$tc('Region'), 'region_id']
+            [this.$tc('Region'), 'region_name']
           ],
           data: []
         },
@@ -126,7 +126,7 @@ export default {
       this.ws.onmessage = (e) => {
         const data = JSON.parse(e.data)
         if (data.action === 'sync_region') {
-          this.addRegion(data.region_id)
+          this.addRegion(data.id, data.name)
         } else if (data.action === 'import') {
           data['@status'] = 'pending'
           this.$refs.importTable.addTableItem(data)
@@ -142,10 +142,10 @@ export default {
         }
       }
     },
-    addRegion(region) {
-      if (!this.alreadySync.includes(region)) {
-        this.alreadySync.push(region)
-        this.tip = `${this.$t('SyncRegion')}: ${this.alreadySync.at(-1)}`
+    addRegion(regionId, regionName) {
+      if (!this.alreadySync.includes(regionId)) {
+        this.alreadySync.push(regionId)
+        this.tip = `${this.$t('SyncRegion')}: ${regionName}`
       }
     },
     showResult() {

src/views/assets/Cloud/const.js

@@ -17,6 +17,8 @@ export const ucloud = 'ucloud'
 
 export const volcengine = 'volcengine'
 
+export const ctyun = 'ctyun'
+
 export const qingcloud_private = 'qingcloud_private'
 export const huaweicloud_private = 'huaweicloud_private'
 export const ctyun_private = 'ctyun_private'
@@ -46,7 +48,8 @@ export const publicHostProviders = [
   gcp,
   ucloud,
   volcengine,
-  smartx
+  smartx,
+  ctyun
 ]
 
 export const publicDBProviders = [aliyun]
@@ -141,6 +144,12 @@ export const ACCOUNT_PROVIDER_ATTRS_MAP = {
     attrs: ['access_key_id', 'access_key_secret'],
     image: require('@/assets/img/cloud/volcengine.svg')
   },
+  [ctyun]: {
+    name: ctyun,
+    title: i18n.t('CTYun'),
+    attrs: ['access_key_id', 'access_key_secret'],
+    image: require('@/assets/img/cloud/state.svg')
+  },
   [vmware]: {
     name: vmware,
     title: 'VMware',

src/views/settings/Applet/AppletHost/AppletHostList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-alert type="success">
-      <span v-sanitize="$t('AppletHostSelectHelpMessage')" />
+      <span v-html="$t('AppletHostSelectHelpMessage')" />
     </el-alert>
     <DrawerListTable
       ref="table"