style: template schema lazy load

src/components/seal-spin/index.vue

@@ -7,6 +7,7 @@
       return () => (
         <a-spin
           {...attrs}
+          style={{ minHeight: '100px' }}
           v-slots={{
             tip: slots.tip ? () => slots.tip?.() : null,
             icon: slots.icon ? () => slots.icon?.() : null,

src/components/seal-steps/index.vue

@@ -1,5 +1,6 @@
 <script lang="tsx">
   import _ from 'lodash';
+  import { useAppStore } from '@/store';
   import { PropType, defineComponent, toRefs } from 'vue';
   import { StatusColorBgMap } from '@/views/config';
 
@@ -21,6 +22,7 @@
     },
     setup(props) {
       const { steps } = toRefs(props);
+      const appStore = useAppStore();
 
       return () => (
         <a-space class="steps-box">
@@ -30,7 +32,15 @@
                 <span
                   class={['item', item.status]}
                   style={{
-                    backgroundColor: _.get(StatusColorBgMap, item.colorStatus)
+                    backgroundColor: appStore.isDark
+                      ? `rgba(var(${_.get(
+                          StatusColorBgMap,
+                          item.colorStatus
+                        )}),0.6)`
+                      : `rgba(var(${_.get(
+                          StatusColorBgMap,
+                          item.colorStatus
+                        )}),0.7)`
                   }}
                 ></span>
               </a-tooltip>
@@ -50,44 +60,9 @@
       display: flex;
       width: 14px;
       height: 14px;
+      color: var(--color-white);
       background-color: var(--color-fill-3);
       border-radius: var(--border-radius-mini);
-
-      &.Ready {
-        color: var(--color-white);
-        // background-color: rgba(var(--green-6), 0.7);
-
-        // &::after {
-        //   background-color: rgba(var(--green-6), 0.7);
-        // }
-      }
-
-      &.Error {
-        color: var(--color-white);
-        // background-color: rgba(var(--red-6), 0.7);
-
-        // &::after {
-        //   background-color: rgba(var(--red-6), 0.7);
-        // }
-      }
-
-      &.Running {
-        color: var(--color-white);
-        // background-color: rgb(251, 222, 55);
-
-        // &::after {
-        //   background-color: rgb(251, 222, 55);
-        // }
-      }
-
-      &.Pending {
-        color: var(--color-white);
-        // background-color: rgba(var(--gray-4), 0.9);
-
-        // &::after {
-        //   background-color: rgba(var(--gray-4), 0.9);
-        // }
-      }
     }
   }
 </style>

src/views/application-management/environments/components/service-summary.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="box">
+  <span class="box" :class="[{ isDark: appStore.isDark }]">
     <a-tooltip
       v-for="(item, index) in dataList"
       :key="index"
@@ -9,7 +9,9 @@
         class="item"
         :class="[item.status]"
         :style="{
-          backgroundColor: _.get(StatusColorBgMap, [item.status])
+          backgroundColor: appStore.isDark
+            ? `rgba(var(${_.get(StatusColorBgMap, [item.status])}),0.6)`
+            : `rgba(var(${_.get(StatusColorBgMap, [item.status])}),0.7)`
         }"
       >
         <span class="val">
@@ -22,6 +24,7 @@
 
 <script lang="ts" setup>
   import _ from 'lodash';
+  import { useAppStore } from '@/store';
   import { ref, PropType } from 'vue';
   import { StatusColorBgMap } from '@/views/config';
 
@@ -31,18 +34,23 @@
       default: () => []
     }
   });
+  const appStore = useAppStore();
 </script>
 
 <style lang="less" scoped>
   .box {
     display: flex;
     align-items: center;
     padding: 0;
-    color: var(--color-text-white);
+    color: rgba(255, 255, 255, 0.9);
     font-weight: 700;
     font-size: 0;
     border-radius: 10px 10px;
 
+    &.isDark {
+      color: rgba(255, 255, 255, 0.7);
+    }
+
     .item {
       display: flex;
       flex-basis: 40px;

src/views/application-management/environments/pages/list.vue

@@ -324,9 +324,11 @@
         label: _.capitalize(key),
         order: orderMap[key]
       };
-    }).sort((a, b) => {
-      return a.order - b.order;
-    });
+    })
+      .sort((a, b) => {
+        return a.order - b.order;
+      })
+      .filter((item) => item.status !== 'warning');
   };
   const handleCreate = () => {
     router.push({

src/views/config/index.ts

@@ -319,13 +319,16 @@ export const HintKeyMaps = {
 };
 
 export const StatusColorValueMap = {
-  error: '--red-6',
+  errorColor: '--red-6',
+  errorBg: '--red-4',
   warningColor: '--warning-6',
-  warningBg: '--warning-3',
-  success: '--green-6',
+  warningBg: '--warning-4',
+  successColor: '--green-6',
+  successBg: '--green-4',
   inactiveColor: '--gray-6',
   inactiveBg: '--gray-4',
-  transitioning: '--arcoblue-5'
+  transitioningColor: '--arcoblue-5',
+  transitioningBg: '--arcoblue-4'
 };
 
 export const StatusDarkColorValueMap = {
@@ -347,11 +350,11 @@ export const StatusLightColorValueMap = {
 };
 
 export const StatusColorBgMap = {
-  ready: `rgba(var(${StatusColorValueMap.success}),0.7)`,
-  error: `rgba(var(${StatusColorValueMap.error}),0.7)`,
-  transitioning: `rgba(var(${StatusColorValueMap.transitioning}),0.9)`,
-  warning: `rgba(var(${StatusColorValueMap.warningBg}))`,
-  inactive: `rgba(var(${StatusColorValueMap.inactiveBg}),1)`
+  ready: StatusColorValueMap.successColor,
+  error: StatusColorValueMap.errorColor,
+  transitioning: StatusColorValueMap.transitioningColor,
+  warning: StatusColorValueMap.warningColor,
+  inactive: StatusColorValueMap.inactiveColor
 };
 
 export const StatusDarkColorBgMap = {
@@ -371,23 +374,23 @@ export const StatusLightColorBgMap = {
 // color1: background color; color5: font color
 export const StatusColor = {
   error: {
-    text: `rgba(var(${StatusColorValueMap.error}), 0.8)`,
-    bg: `rgba(var(${StatusColorValueMap.error}), 0.1)`,
+    text: `rgba(var(${StatusColorValueMap.errorColor}), 0.8)`,
+    bg: `rgba(var(${StatusColorValueMap.errorBg}), 0.13)`,
     icon: 'icon-close-circle-fill'
   },
   warning: {
     text: `rgba(var(${StatusColorValueMap.warningColor}),0.9)`,
-    bg: `rgba(var(${StatusColorValueMap.warningBg}),0.3)`,
+    bg: `rgba(var(${StatusColorValueMap.warningBg}),0.15)`,
     icon: ''
   },
   transitioning: {
-    text: `rgba(var(${StatusColorValueMap.transitioning}),1)`,
-    bg: `rgba(var(${StatusColorValueMap.transitioning}),0.2)`,
+    text: `rgba(var(${StatusColorValueMap.transitioningColor}),1)`,
+    bg: `rgba(var(${StatusColorValueMap.transitioningBg}),0.15)`,
     icon: ''
   },
   success: {
-    text: `rgba(var(${StatusColorValueMap.success}), 0.9)`,
-    bg: `rgba(var(${StatusColorValueMap.success}), 0.1)`,
+    text: `rgba(var(${StatusColorValueMap.successColor}), 0.9)`,
+    bg: `rgba(var(${StatusColorValueMap.successBg}), 0.1)`,
     icon: 'icon-check-circle-fill'
   },
   inactive: {

src/views/operation-hub/connectors/components/status-label.vue

@@ -6,15 +6,17 @@
           <a-progress
             class="arco-icon-loading progress"
             size="mini"
-            status="warning"
-            :color="StatusColor.warning.text"
-            :width="14"
+            status="normal"
+            :color="StatusColor.transitioning.text"
+            :width="16"
             :stroke-width="3"
-            :percent="0.2"
+            :percent="0.6"
           />
-          <span class="text" :style="{ color: StatusColor.warning.text }">{{
-            statusInfo.status
-          }}</span>
+          <span
+            class="text"
+            :style="{ color: StatusColor.transitioning.text }"
+            >{{ statusInfo.text }}</span
+          >
         </span>
         <span v-else-if="statusInfo.error">
           <icon-font