style(sj_1.1.0_beta1): 优化空间切换组件样式

public/iconify/material-symbols.json

@@ -8,6 +8,10 @@
     "dashboard-outline-rounded": {
       "body": "<path fill=\"currentColor\" d=\"M13 8V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v4q0 .425-.288.713T20 9h-6q-.425 0-.712-.288T13 8M3 12V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v8q0 .425-.288.713T10 13H4q-.425 0-.712-.288T3 12m10 8v-8q0-.425.288-.712T14 11h6q.425 0 .713.288T21 12v8q0 .425-.288.713T20 21h-6q-.425 0-.712-.288T13 20M3 20v-4q0-.425.288-.712T4 15h6q.425 0 .713.288T11 16v4q0 .425-.288.713T10 21H4q-.425 0-.712-.288T3 20m2-9h4V5H5zm10 8h4v-6h-4zm0-12h4V5h-4zM5 19h4v-2H5zm4-2\"/>"
     },
+    "expand-more-rounded": {
+      "body": "<path fill=\"currentColor\" d=\"M12 14.95q-.2 0-.375-.062t-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213T12 14.95\"/>",
+      "hidden": true
+    },
     "group-work-outline": {
       "body": "<path fill=\"currentColor\" d=\"M8 16q.825 0 1.413-.587T10 14t-.587-1.412T8 12t-1.412.588T6 14t.588 1.413T8 16m8 0q.825 0 1.413-.587T18 14t-.587-1.412T16 12t-1.412.588T14 14t.588 1.413T16 16m-4-6q.825 0 1.413-.587T14 8t-.587-1.412T12 6t-1.412.588T10 8t.588 1.413T12 10m0 12q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8\"/>"
     },

src/layouts/modules/namespace-select/index.vue

@@ -1,10 +1,12 @@
-<script lang="ts" setup>
+<script lang="tsx" setup>
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import { useAppStore } from '@/store/modules/app';
 import { useAuthStore } from '@/store/modules/auth';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import SvgIcon from '@/components/custom/svg-icon.vue';
 
 defineOptions({
   name: 'NamespaceSelect'
@@ -15,14 +17,13 @@ const appStore = useAppStore();
 const authStore = useAuthStore();
 const namespaceId = ref<string>(localStg.get('namespaceId')!);
 const userInfo = localStg.get('userInfo');
-const selectOptions = computed(() =>
-  userInfo?.namespaceIds.map(item => {
-    return { label: item.name, value: item.uniqueId };
-  })
-);
+
 const dropOptions = computed(() =>
   userInfo?.namespaceIds.map(item => {
-    return { label: item.name, key: item.uniqueId };
+    return {
+      label: () => <span class="block w-120px">{item.name}</span>,
+      key: item.uniqueId
+    };
   })
 );
 
@@ -31,37 +32,66 @@ const onChange = (value: string) => {
   authStore.setNamespaceId(value);
   router.go(0);
 };
+
+const namespaceName = computed(() => {
+  return userInfo?.namespaceIds.filter(item => (item.id = namespaceId.value))[0].name || 'Default';
+});
 </script>
 
 <template>
   <NDropdown v-if="appStore.isMobile" :value="namespaceId" :options="dropOptions" trigger="hover" @select="onChange">
     <div>
       <ButtonIcon :tooltip-content="$t('icon.namespace')" tooltip-placement="left">
-        <SvgIcon icon="oui:app-spaces" />
+        <SvgIcon icon="eos-icons:namespace" />
+      </ButtonIcon>
+    </div>
+  </NDropdown>
+
+  <NDropdown v-else :value="namespaceId" :options="dropOptions" trigger="click" @select="onChange">
+    <div class="namespace-select">
+      <ButtonIcon class="w-full" :tooltip-content="$t('icon.namespace')" tooltip-placement="left">
+        <SvgIcon icon="eos-icons:namespace" />
+        <NEllipsis class="text-14px">{{ namespaceName }}</NEllipsis>
+        <SvgIcon icon="material-symbols:expand-more-rounded" />
       </ButtonIcon>
     </div>
   </NDropdown>
-  <template v-else>
-    <NTooltip trigger="hover">
-      <template #trigger>
-        <NSelect
-          v-model:value="namespaceId"
-          class="namespace-select"
-          :options="selectOptions"
-          @update:value="onChange"
-        />
-      </template>
-      {{ $t('icon.namespace') }}
-    </NTooltip>
-  </template>
 </template>
 
 <style lang="scss" scoped>
 .namespace-select {
   width: 150px;
+  border: 1px solid rgb(224, 224, 230);
+  border-radius: 6px;
 
-  :deep(.n-base-selection) {
-    border-radius: 32px !important;
+  :deep(.n-button):hover {
+    background-color: var(--n-color);
+  }
+
+  :deep(.n-ellipsis) {
+    max-width: 96px;
+  }
+
+  :deep(.n-button) {
+    width: 100% !important;
+    padding: 0 5px 0 10px !important;
+  }
+
+  :deep(.n-button__content) {
+    width: 100% !important;
+  }
+
+  :deep(.gap-8px) {
+    gap: 0 !important;
+  }
+
+  :deep(.flex-center) {
+    width: 100% !important;
+    justify-content: space-between !important;
   }
 }
+
+.namespace-select:hover {
+  border-color: rgb(var(--nprogress-color));
+}
 </style>