feat(sj_1.1.0): 命名空间列表页支持切换, 新增空间生成uid

public/iconify/material-symbols.json

@@ -35,6 +35,9 @@
     },
     "sunny": {
       "body": "<path fill=\"currentColor\" d=\"M11 5V1h2v4zm6.65 2.75l-1.375-1.375l2.8-2.875l1.4 1.425zM19 13v-2h4v2zm-8 10v-4h2v4zM6.35 7.7L3.5 4.925l1.425-1.4L7.75 6.35zm12.7 12.8l-2.775-2.875l1.35-1.35l2.85 2.75zM1 13v-2h4v2zm3.925 7.5l-1.4-1.425l2.8-2.8l.725.675l.725.7zM12 18q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18\"/>"
+    },
+    "check-circle": {
+      "body": "<path fill=\"currentColor\" d=\"m10.6 16.6l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4zM12 22q-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 22\"/>"
     }
   }
 }

src/locales/langs/en-us.ts

@@ -80,6 +80,8 @@ const local: App.I18n.Schema = {
     confirmPause: 'Are you sure you want to pause?',
     confirmFinish: 'Are you sure you want to finishe?',
     confirmRetry: 'Are you sure you want to retry?',
+    generateRandomly: 'Generate randomly',
+    active: 'Active',
     yesOrNo: {
       yes: 'Yes',
       no: 'No'

src/locales/langs/zh-cn.ts

@@ -80,6 +80,8 @@ const local: App.I18n.Schema = {
     confirmPause: '确认暂停吗？',
     confirmFinish: '确认完成吗？',
     confirmRetry: '确认重试吗？',
+    generateRandomly: '随机生成',
+    active: '活跃',
     yesOrNo: {
       yes: '是',
       no: '否'

src/typings/app.d.ts

@@ -330,6 +330,8 @@ declare namespace App {
         confirmPause: string;
         confirmFinish: string;
         confirmRetry: string;
+        generateRandomly: string;
+        active: string;
         yesOrNo: {
           yes: string;
           no: string;

src/views/namespace/index.vue

@@ -1,13 +1,27 @@
 <script setup lang="tsx">
 import { NButton } from 'naive-ui';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { fetchGetNamespaceList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
+import { localStg } from '@/utils/storage';
+import { useAuthStore } from '@/store/modules/auth';
+import SvgIcon from '@/components/custom/svg-icon.vue';
 import NamespaceOperateDrawer from './modules/namespace-operate-drawer.vue';
 import NamespaceSearch from './modules/namespace-search.vue';
 
+const router = useRouter();
 const appStore = useAppStore();
+const authStore = useAuthStore();
+const namespaceId = ref<string>(localStg.get('namespaceId')!);
+
+const handleChange = (uniqueId: string) => {
+  namespaceId.value = uniqueId;
+  authStore.setNamespaceId(uniqueId);
+  router.go(0);
+};
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetNamespaceList,
@@ -29,6 +43,23 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       align: 'left',
       width: 120
     },
+    {
+      key: 'status',
+      title: $t('common.active'),
+      align: 'center',
+      width: 40,
+      render: row => (
+        <>
+          {namespaceId.value === row.uniqueId! ? (
+            <div class="flex justify-center">
+              <SvgIcon icon="material-symbols:check-circle" class="text-20px color-success" />
+            </div>
+          ) : (
+            ''
+          )}
+        </>
+      )
+    },
     {
       key: 'uniqueId',
       title: $t('page.namespace.uniqueId'),
@@ -57,6 +88,16 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
           <NButton type="primary" text ghost size="small" onClick={() => edit(row.id!)}>
             {$t('common.edit')}
           </NButton>
+          {namespaceId.value !== row.uniqueId! ? (
+            <>
+              <n-divider vertical />
+              <NButton type="warning" text ghost size="small" onClick={() => handleChange(row.uniqueId!)}>
+                {$t('common.switch')}
+              </NButton>
+            </>
+          ) : (
+            ''
+          )}
         </div>
       )
     }

src/views/namespace/modules/namespace-operate-drawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
+import { nanoid } from '@sa/utils';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
@@ -61,6 +62,10 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
   }
 };
 
+function setUniqueId() {
+  model.uniqueId = nanoid(32);
+}
+
 function handleUpdateModelWhenEdit() {
   if (props.operateType === 'add') {
     Object.assign(model, createDefaultModel());
@@ -109,11 +114,21 @@ watch(visible, () => {
   <OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
     <NForm ref="formRef" :model="model" :rules="rules">
       <NFormItem :label="$t('page.namespace.uniqueId')" path="uniqueId">
-        <NInput
-          v-model:value="model.uniqueId"
-          :disabled="props.operateType === 'edit'"
-          :placeholder="$t('page.namespace.form.uniqueId')"
-        />
+        <NInputGroup>
+          <NInput
+            v-model:value="model.uniqueId"
+            :disabled="props.operateType === 'edit'"
+            :placeholder="$t('page.namespace.form.uniqueId')"
+          />
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NButton type="default" ghost :disabled="props.operateType === 'edit'" @click="setUniqueId">
+                <icon-ic-round-refresh class="text-icon" />
+              </NButton>
+            </template>
+            {{ $t('common.generateRandomly') }}
+          </NTooltip>
+        </NInputGroup>
       </NFormItem>
       <NFormItem :label="$t('page.namespace.name')" path="name">
         <NInput v-model:value="model.name" :placeholder="$t('page.namespace.form.name')" />