From aaf949113ed9dfeca82fdb758c619f45bf419d70 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Wed, 19 Jul 2023 11:32:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pure/ms-card/index.vue     | 49 ++++++++++---------
 .../components/pure/ms-description/index.vue  | 21 ++++++--
 .../src/components/pure/ms-drawer/index.vue   |  3 ++
 frontend/src/components/pure/navbar/index.vue |  8 ++-
 4 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/pure/ms-card/index.vue b/frontend/src/components/pure/ms-card/index.vue
index 6ee8f48545..00081018fe 100644
--- a/frontend/src/components/pure/ms-card/index.vue
+++ b/frontend/src/components/pure/ms-card/index.vue
@@ -1,29 +1,31 @@
 <template>
-  <div class="relative h-full">
-    <div class="card-header">
-      <div class="back-btn" @click="back"><icon-arrow-left /></div>
-      <div class="text-[var(--color-text-000)]">{{ props.title }}</div>
-    </div>
-    <a-divider class="my-[16px]" />
-    <a-scrollbar class="mt-[16px]" style="overflow-y: auto; height: calc(100vh - 256px)">
-      <slot></slot>
-    </a-scrollbar>
-    <div
-      v-if="!hideFooter"
-      class="relative z-10 m-[0_-24px_-24px] flex justify-end gap-[16px] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
-    >
-      <div class="ml-0 mr-auto">
-        <slot name="footerLeft"></slot>
+  <a-spin style="display: block" :loading="props.loading">
+    <div class="relative h-full">
+      <div class="card-header">
+        <div class="back-btn" @click="back"><icon-arrow-left /></div>
+        <div class="text-[var(--color-text-000)]">{{ props.title }}</div>
+      </div>
+      <a-divider class="my-[16px]" />
+      <a-scrollbar class="mt-[16px]" style="overflow-y: auto; height: calc(100vh - 256px)">
+        <slot></slot>
+      </a-scrollbar>
+      <div
+        v-if="!hideFooter"
+        class="relative z-10 m-[0_-24px_-24px] flex justify-end gap-[16px] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
+      >
+        <div class="ml-0 mr-auto">
+          <slot name="footerLeft"></slot>
+        </div>
+        <slot name="footerRight">
+          <a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
+          <a-button v-if="!props.hideContinue" type="secondary" @click="emit('saveAndContinue')">
+            {{ t('mscard.defaultSaveAndContinueText') }}
+          </a-button>
+          <a-button type="primary" @click="emit('save')">{{ t('mscard.defaultConfirm') }}</a-button>
+        </slot>
       </div>
-      <slot name="footerRight">
-        <a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
-        <a-button v-if="!props.hideContinue" type="secondary" @click="emit('saveAndContinue')">
-          {{ t('mscard.defaultSaveAndContinueText') }}
-        </a-button>
-        <a-button type="primary" @click="emit('save')">{{ t('mscard.defaultConfirm') }}</a-button>
-      </slot>
     </div>
-  </div>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +38,7 @@
       hideContinue?: boolean;
       handleBack?: () => void;
       hideFooter?: boolean;
+      loading?: boolean;
     }>(),
     {
       hideContinue: false,
diff --git a/frontend/src/components/pure/ms-description/index.vue b/frontend/src/components/pure/ms-description/index.vue
index 08c7e03de2..7bceca1fda 100644
--- a/frontend/src/components/pure/ms-description/index.vue
+++ b/frontend/src/components/pure/ms-description/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <a-descriptions :data="props.descriptions" size="large" :column="1">
+  <a-descriptions :data="(props.descriptions as unknown as DescData[])" size="large" :column="1">
     <a-descriptions-item v-for="item of props.descriptions" :key="item.label" :label="item.label">
       <template v-if="item.isTag">
         <a-tag
-          v-for="tag of item.value.split(',')"
+          v-for="tag of item.value"
           :key="tag"
           color="var(--color-text-n8)"
           class="mr-[8px] font-normal !text-[var(--color-text-1)]"
@@ -11,19 +11,32 @@
           {{ tag }}
         </a-tag>
       </template>
-      <div v-else>{{ item.value }}</div>
+      <a-button v-else-if="item.isButton" type="text" @click="handleItemClick(item)">{{ item.value }}</a-button>
+      <div v-else>
+        {{ item.value }}
+      </div>
     </a-descriptions-item>
   </a-descriptions>
 </template>
 
 <script setup lang="ts">
+  import type { DescData } from '@arco-design/web-vue';
+
   export interface Description {
     label: string;
-    value: string;
+    value: (string | number) | (string | number)[];
     isTag?: boolean;
+    isButton?: boolean;
+    onClick?: () => void;
   }
 
   const props = defineProps<{ descriptions: Description[] }>();
+
+  function handleItemClick(item: Description) {
+    if (typeof item.onClick === 'function') {
+      item.onClick();
+    }
+  }
 </script>
 
 <style lang="less" scoped>
diff --git a/frontend/src/components/pure/ms-drawer/index.vue b/frontend/src/components/pure/ms-drawer/index.vue
index bcfd22e786..fa9b7fb030 100644
--- a/frontend/src/components/pure/ms-drawer/index.vue
+++ b/frontend/src/components/pure/ms-drawer/index.vue
@@ -7,6 +7,7 @@
     :class="props.mask ? '' : 'ms-drawer-no-mask'"
     @ok="handleOk"
     @cancel="handleCancel"
+    @close="handleCancel"
   >
     <template #title>
       <slot name="title">
@@ -37,11 +38,13 @@
     titleTagColor?: string;
     descriptions?: Description[];
     footer?: boolean;
+    mask?: boolean;
     [key: string]: any;
   }
 
   const props = withDefaults(defineProps<DrawerProps>(), {
     footer: true,
+    mask: true,
   });
   const emit = defineEmits(['update:visible']);
 
diff --git a/frontend/src/components/pure/navbar/index.vue b/frontend/src/components/pure/navbar/index.vue
index 3061f015e1..7dcc0a7f2a 100644
--- a/frontend/src/components/pure/navbar/index.vue
+++ b/frontend/src/components/pure/navbar/index.vue
@@ -198,8 +198,12 @@
   const projectList: Ref<ProjectListItem[]> = ref([]);
 
   onBeforeMount(async () => {
-    const res = await getProjectList(appStore.getCurrentOrgId);
-    projectList.value = res;
+    try {
+      const res = await getProjectList(appStore.getCurrentOrgId);
+      projectList.value = res;
+    } catch (error) {
+      console.log(error);
+    }
   });
 
   const showProjectSelect = computed(() => {