feat: 完成命名空间页面

src/components/advanced/table-header-operation.vue

@@ -7,8 +7,8 @@ interface Props {
   itemAlign?: NaiveUI.Align;
   disabledDelete?: boolean;
   loading?: boolean;
-  showDelete: boolean;
+  showDelete?: boolean;
-  showAdd: boolean;
+  showAdd?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {

src/components/common/operate-drawer.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, reactive, ref, watch } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+
+defineOptions({
+  name: 'NamespaceOperateDrawer'
+});
+
+interface Props {
+  title?: string;
+  modelValue?: boolean;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'handleSubmit'): void;
+  (e: 'update:modelValue', modelValue: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+const appStore = useAppStore();
+const state = reactive({ width: 0 });
+const visible = ref(props.modelValue);
+const isFullscreen = ref(false);
+const drawerWidth = computed(() => {
+  const maxMinWidth = 360;
+  const maxMaxWidth = 600;
+  if (appStore.isMobile) {
+    return state.width * 0.9 >= maxMinWidth ? `${maxMinWidth}px` : '90%';
+  }
+  let minWidth = state.width * 0.3 >= maxMinWidth ? `${maxMinWidth}px` : '30%';
+  minWidth = state.width <= 420 ? '90%' : '30%';
+  let maxWidth = state.width * 0.5 >= maxMaxWidth ? `${maxMaxWidth}px` : '50%';
+  maxWidth = state.width <= 420 ? '90%' : '50%';
+  return isFullscreen.value ? maxWidth : minWidth;
+});
+
+const getState = () => {
+  state.width = document.documentElement.clientWidth;
+};
+
+nextTick(() => {
+  getState();
+  window.addEventListener('resize', getState);
+});
+
+onUnmounted(() => {
+  // 移除监听事件
+  window.removeEventListener('resize', getState);
+});
+
+watch(
+  () => props.modelValue,
+  val => {
+    visible.value = val;
+  },
+  { immediate: true }
+);
+
+const closeDrawer = () => {
+  visible.value = false;
+  emit('update:modelValue', false);
+};
+
+const onUpdateShow = (value: boolean) => {
+  emit('update:modelValue', value);
+};
+
+const handleSubmit = () => {
+  emit('handleSubmit');
+  closeDrawer();
+};
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" display-directive="show" :width="drawerWidth" @update:show="onUpdateShow">
+    <NDrawerContent :title="props.title" :native-scrollbar="false" closable header-class="operate-dawer-header">
+      <template #header>
+        {{ props.title }}
+        <div
+          v-if="!appStore.isMobile && state.width <= 1920"
+          quaternary
+          class="fullscreen text-18px color-#6a6a6a"
+          @click="isFullscreen = !isFullscreen"
+        >
+          <icon-material-symbols:close-fullscreen-rounded v-if="isFullscreen" />
+          <icon-material-symbols:open-in-full-rounded v-else />
+        </div>
+      </template>
+      <slot></slot>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped>
+.fullscreen {
+  height: 22px;
+  width: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fullscreen:hover {
+  background-color: #e8e8e8;
+  color: #696969;
+  border-radius: 6px;
+  cursor: pointer;
+}
+</style>

src/layouts/modules/global-header/index.vue

@@ -65,7 +65,7 @@ const headerMenus = computed(() => {
         :is-dark="themeStore.darkMode"
         @switch="themeStore.toggleThemeScheme"
       />
-      <ThemeButton />
+      <ThemeButton v-if="!appStore.isMobile" />
       <UserAvatar />
     </div>
   </DarkModeContainer>

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

@@ -1,27 +1,47 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+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';
 
 const router = useRouter();
-
+const appStore = useAppStore();
 const namespaceId = ref<string>(localStg.get('namespaceId')!);
-
 const userInfo = localStg.get('userInfo');
-const options = ref(
+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 };
+  })
+);
 
 const onChange = (value: string) => {
+  namespaceId.value = value;
   localStg.set('namespaceId', value);
   router.go(0);
 };
 </script>
 
 <template>
-  <NSelect v-model:value="namespaceId" class="namespace-select" :options="options" @update:value="onChange" />
+  <NDropdown v-if="appStore.isMobile" :value="namespaceId" :options="dropOptions" trigger="hover" @select="onChange">
+    <div>
+      <ButtonIcon :tooltip-content="$t('icon.namepase')" tooltip-placement="left">
+        <SvgIcon icon="oui:app-spaces" />
+      </ButtonIcon>
+    </div>
+  </NDropdown>
+  <NSelect
+    v-else
+    v-model:value="namespaceId"
+    class="namespace-select"
+    :options="selectOptions"
+    @update:value="onChange"
+  />
 </template>
 
 <style lang="scss" scoped>

src/locales/langs/en-us.ts

@@ -15,6 +15,7 @@ const local: App.I18n.Schema = {
     columnSetting: 'Column Setting',
     config: 'Config',
     confirm: 'Confirm',
+    save: 'Save',
     delete: 'Delete',
     deleteSuccess: 'Delete Success',
     confirmDelete: 'Are you sure you want to delete?',
@@ -309,11 +310,11 @@ const local: App.I18n.Schema = {
       title: 'Namespace',
       name: 'Name',
       keyword: 'Name/UniqueId',
-      uniqueId: 'UniqueId',
+      uniqueId: 'Unique ID (default UUID)',
       form: {
         name: 'Please enter name',
         keyword: 'Please enter name/uniqueId',
-        uniqueId: 'Please enter UniqueId'
+        uniqueId: 'Please enter Unique ID'
       },
       addNamespace: 'Add Namespaces',
       editNamespace: 'Edit Namespaces'
@@ -517,11 +518,14 @@ const local: App.I18n.Schema = {
     lang: 'Switch Language',
     fullscreen: 'Fullscreen',
     fullscreenExit: 'Exit Fullscreen',
+    magnify: 'Magnify',
+    restore: 'Restore',
     reload: 'Reload Page',
     collapse: 'Collapse Menu',
     expand: 'Expand Menu',
     pin: 'Pin',
-    unpin: 'Unpin'
+    unpin: 'Unpin',
+    namepase: 'Switch Namepase'
   }
 };
 

src/locales/langs/zh-cn.ts

@@ -15,6 +15,7 @@ const local: App.I18n.Schema = {
     columnSetting: '列设置',
     config: '配置',
     confirm: '确认',
+    save: '保存',
     delete: '删除',
     deleteSuccess: '删除成功',
     confirmDelete: '确认删除吗？',
@@ -305,11 +306,11 @@ const local: App.I18n.Schema = {
       title: '命名空间',
       name: '名称',
       keyword: '空间名称/唯一标识',
-      uniqueId: 'UniqueId',
+      uniqueId: '唯一标识(默认UUID)',
       form: {
-        name: '请输入名称',
+        name: '请输入空间名称',
         keyword: '请输入空间名称/唯一标识',
-        uniqueId: '请输入UniqueId'
+        uniqueId: '请输入唯一标识'
       },
       addNamespace: '新增命名空间',
       editNamespace: '编辑命名空间'
@@ -513,11 +514,14 @@ const local: App.I18n.Schema = {
     lang: '切换语言',
     fullscreen: '全屏',
     fullscreenExit: '退出全屏',
+    magnify: '放大',
+    restore: '还原',
     reload: '刷新页面',
     collapse: '折叠菜单',
     expand: '展开菜单',
     pin: '固定',
-    unpin: '取消固定'
+    unpin: '取消固定',
+    namepase: '切换空间'
   }
 };
 

src/plugins/loading.ts

@@ -18,7 +18,7 @@ export function setupLoading() {
     'right-0 bottom-0 animate-delay-1500'
   ];
 
-  const logoWithClass = systemLogo.replace('<svg', `<svg class="size-256px text-primary"`);
+  const logoWithClass = systemLogo.replace('<svg', `<svg class="size-128px text-primary"`);
 
   const dot = loadingClasses
     .map(item => {
@@ -34,7 +34,7 @@ export function setupLoading() {
       ${dot}
     </div>
   </div>
-  <h2 class="text-26px font-500 pt-32px text-#646464">${$t('system.desc')}</h2>
+  <h2 class="text-18px font-500 pt-32px w-80% text-center text-#646464">${$t('system.desc')}</h2>
 </div>`;
 
   const app = document.getElementById('app');

src/service/api/namespace.ts

@@ -1,6 +1,6 @@
 import { request } from '../request';
 
-/** Namespace */
+/** get namespace list */
 export function fetchGetNamespaceList(params?: Api.Namespace.NamespaceSearchParams) {
   return request<Api.Namespace.NamespaceList>({
     url: '/namespace/list',
@@ -8,3 +8,21 @@ export function fetchGetNamespaceList(params?: Api.Namespace.NamespaceSearchPara
     params
   });
 }
+
+/** add namespace */
+export function fetchAddNamespace(data: Api.Namespace.Namespace) {
+  return request<boolean>({
+    url: '/namespace',
+    method: 'post',
+    data
+  });
+}
+
+/** edit namespace */
+export function fetchEditNamespace(data: Api.Namespace.Namespace) {
+  return request<boolean>({
+    url: '/namespace',
+    method: 'put',
+    data
+  });
+}

src/styles/css/global.css

@@ -1,5 +1,6 @@
 @import './reset.css';
 @import './nprogress.css';
+@import './retry.css';
 @import './transition.css';
 
 html,

src/styles/css/retry.css

@@ -0,0 +1,10 @@
+.view-card-header .n-card-header__main {
+  --n-title-font-weight: 600;
+}
+
+.operate-dawer-header .n-drawer-header__main {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}

src/typings/api.d.ts

@@ -254,9 +254,9 @@ declare namespace Api {
     /** namespace */
     type Namespace = Common.CommonRecord<{
       /** 主键 */
-      id: string;
+      id?: string;
       /** 名称 */
-      name: string;
+      name?: string;
       /** UniqueId */
       uniqueId: string;
     }>;

src/typings/app.d.ts

@@ -261,6 +261,7 @@ declare namespace App {
         columnSetting: string;
         config: string;
         confirm: string;
+        save: string;
         delete: string;
         deleteSuccess: string;
         confirmDelete: string;
@@ -667,11 +668,14 @@ declare namespace App {
         lang: string;
         fullscreen: string;
         fullscreenExit: string;
+        magnify: string;
+        restore: string;
         reload: string;
         collapse: string;
         expand: string;
         pin: string;
         unpin: string;
+        namepase: string;
       };
     };
 

src/typings/components.d.ts

@@ -26,12 +26,15 @@ declare module 'vue' {
     IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
+    'IconMaterialSymbols:closeFullscreenRounded': typeof import('~icons/material-symbols/close-fullscreen-rounded')['default']
+    'IconMaterialSymbols:openInFullRounded': typeof import('~icons/material-symbols/open-in-full-rounded')['default']
     IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
     IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
     IconMdiDrag: typeof import('~icons/mdi/drag')['default']
     IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
     IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    'IconOui:appSpaces': typeof import('~icons/oui/app-spaces')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
@@ -86,6 +89,7 @@ declare module 'vue' {
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTree: typeof import('naive-ui')['NTree']
+    OperateDrawer: typeof import('./../components/common/operate-drawer.vue')['default']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/views/namepase/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton } from 'naive-ui';
 import { fetchGetNamespaceList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
@@ -17,11 +17,6 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     keyword: undefined
   },
   columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
-    },
     {
       key: 'index',
       title: $t('common.index'),
@@ -32,46 +27,36 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'name',
       title: $t('page.namespace.name'),
       align: 'left',
-      minWidth: 120
+      width: 120
     },
     {
       key: 'uniqueId',
       title: $t('page.namespace.uniqueId'),
       align: 'left',
-      minWidth: 180
+      width: 180
     },
     {
       key: 'createDt',
       title: $t('page.common.createTime'),
       align: 'left',
-      minWidth: 120
+      width: 130
     },
     {
       key: 'updateDt',
       title: $t('page.common.upadteTime'),
       align: 'left',
-      minWidth: 120
+      width: 130
     },
     {
       key: 'operate',
       title: $t('common.operate'),
       align: 'center',
-      width: 130,
+      width: 64,
       render: row => (
         <div class="flex-center gap-8px">
-          <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
+          <NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
             {$t('common.edit')}
           </NButton>
-          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
-            {{
-              default: () => $t('common.confirmDelete'),
-              trigger: () => (
-                <NButton type="error" ghost size="small">
-                  {$t('common.delete')}
-                </NButton>
-              )
-            }}
-          </NPopconfirm>
         </div>
       )
     }
@@ -84,26 +69,10 @@ const {
   editingData,
   handleAdd,
   handleEdit,
-  checkedRowKeys,
+  checkedRowKeys
-  onBatchDeleted,
-  onDeleted
   // closeDrawer
 } = useTableOperate(data, getData);
 
-async function handleBatchDelete() {
-  // request
-  console.log(checkedRowKeys.value);
-
-  onBatchDeleted();
-}
-
-function handleDelete(id: string) {
-  // request
-  console.log(id);
-
-  onDeleted();
-}
-
 function edit(id: string) {
   handleEdit(id);
 }
@@ -112,14 +81,20 @@ function edit(id: string) {
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <NamespaceSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
-    <NCard :title="$t('page.namespace.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+    <NCard
+      :title="$t('page.namespace.title')"
+      :bordered="false"
+      size="small"
+      class="sm:flex-1-hidden card-wrapper"
+      header-class="view-card-header"
+    >
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="columnChecks"
           :disabled-delete="checkedRowKeys.length === 0"
           :loading="loading"
+          :show-delete="false"
           @add="handleAdd"
-          @delete="handleBatchDelete"
           @refresh="getData"
         />
       </template>
@@ -127,7 +102,6 @@ function edit(id: string) {
         v-model:checked-row-keys="checkedRowKeys"
         :columns="columns"
         :data="data"
-        size="small"
         :flex-height="!appStore.isMobile"
         :scroll-x="962"
         :loading="loading"
@@ -146,8 +120,4 @@ function edit(id: string) {
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-:deep(.n-card-header) {
-  --n-title-font-weight: 600 !important;
-}
-</style>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
+import { fetchAddNamespace, fetchEditNamespace } from '@/service/api';
 
 defineOptions({
   name: 'NamespaceOperateDrawer'
@@ -25,7 +27,6 @@ const emit = defineEmits<Emits>();
 const visible = defineModel<boolean>('visible', {
   default: false
 });
-
 const { formRef, validate, restoreValidation } = useNaiveForm();
 const { defaultRequiredRule } = useFormRules();
 
@@ -37,7 +38,7 @@ const title = computed(() => {
   return titles[props.operateType];
 });
 
-type Model = Pick<Api.Namespace.Namespace, 'name' | 'uniqueId'>;
+type Model = Pick<Api.Namespace.Namespace, 'id' | 'name' | 'uniqueId'>;
 
 const model: Model = reactive(createDefaultModel());
 
@@ -65,15 +66,19 @@ function handleUpdateModelWhenEdit() {
   }
 }
 
-function closeDrawer() {
-  visible.value = false;
-}
-
 async function handleSubmit() {
   await validate();
   // request
+  if (props.operateType === 'add') {
+    const { name, uniqueId } = model;
+    fetchAddNamespace({ name, uniqueId });
+  }
+
+  if (props.operateType === 'edit') {
+    const { id, name, uniqueId } = model;
+    fetchEditNamespace({ id, name, uniqueId });
+  }
   window.$message?.success($t('common.updateSuccess'));
-  closeDrawer();
   emit('submitted');
 }
 
@@ -86,24 +91,20 @@ watch(visible, () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
+  <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
-    <NDrawerContent :title="title" :native-scrollbar="false" closable>
     <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')"
+        />
+      </NFormItem>
       <NFormItem :label="$t('page.namespace.name')" path="name">
         <NInput v-model:value="model.name" :placeholder="$t('page.namespace.form.name')" />
       </NFormItem>
-        <NFormItem :label="$t('page.namespace.uniqueId')" path="uniqueId">
-          <NInput v-model:value="model.uniqueId" :placeholder="$t('page.namespace.form.uniqueId')" />
-        </NFormItem>
     </NForm>
-      <template #footer>
+  </OperateDrawer>
-        <NSpace :size="16">
-          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
-          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
-        </NSpace>
-      </template>
-    </NDrawerContent>
-  </NDrawer>
 </template>
 
 <style scoped></style>

src/views/namepase/modules/namespace-search.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
 import { useNaiveForm } from '@/hooks/common/form';
 
 defineOptions({
@@ -13,6 +14,8 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+const appStore = useAppStore();
+
 const { formRef, validate, restoreValidation } = useNaiveForm();
 
 const model = defineModel<Api.Namespace.NamespaceSearchParams>('model', { required: true });
@@ -30,7 +33,7 @@ async function search() {
 
 <template>
   <NCard :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="false">
+    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px">
           <NInput v-model:value="model.keyword" :placeholder="$t('page.namespace.form.keyword')" />

src/views/pods/modules/pods-search.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
 import { useNaiveForm } from '@/hooks/common/form';
 
 defineOptions({
@@ -13,6 +14,8 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+const appStore = useAppStore();
+
 const { formRef, validate, restoreValidation } = useNaiveForm();
 
 const model = defineModel<Api.Dashboard.DashboardPodsParams>('model', { required: true });
@@ -30,7 +33,7 @@ async function search() {
 
 <template>
   <NCard :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" label-placement="left" :label-width="60" :show-feedback="false">
+    <NForm ref="formRef" :model="model" label-placement="left" :label-width="60" :show-feedback="appStore.isMobile">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px">
           <NInput v-model:value="model.groupName" :placeholder="$t('page.pods.form.groupName')" />