gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成命名空间页面

Browse Source
This commit is contained in:
xlsea 2024-04-10 10:29:36 +08:00
parent 51cd5ee70c
commit 610bcbf223
17 changed files with 253 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/advanced/table-header-operation.vue
View File

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

117
src/components/common/operate-drawer.vue Normal file
View File

@ -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>

2
src/layouts/modules/global-header/index.vue
View File

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

30
src/layouts/modules/namespace-select/index.vue
View File

@ -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>

10
src/locales/langs/en-us.ts
View File

@ -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'
}
};

12
src/locales/langs/zh-cn.ts
View File

@ -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: '切换空间'
}
};

4
src/plugins/loading.ts
View File

@ -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');

20
src/service/api/namespace.ts
View File

@ -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
});
}

1
src/styles/css/global.css
View File

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

10
src/styles/css/retry.css Normal file
View File

@ -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;
}

4
src/typings/api.d.ts vendored
View File

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

4
src/typings/app.d.ts vendored
View File

@ -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;
};
};

4
src/typings/components.d.ts vendored
View File

@ -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']

64
src/views/namepase/index.vue
View File

@ -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,
onBatchDeleted,
onDeleted
checkedRowKeys
// 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>
:deep(.n-card-header) {
--n-title-font-weight: 600 !important;
}
</style>
<style scoped></style>

51
src/views/namepase/modules/namespace-operate-drawer.vue
View File

@ -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">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<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>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
<OperateDrawer v-model="visible" :title="title" @handle-submit="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')"
/>
</NFormItem>
<NFormItem :label="$t('page.namespace.name')" path="name">
<NInput v-model:value="model.name" :placeholder="$t('page.namespace.form.name')" />
</NFormItem>
</NForm>
</OperateDrawer>
</template>
<style scoped></style>

5
src/views/namepase/modules/namespace-search.vue
View File

@ -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')" />

5
src/views/pods/modules/pods-search.vue
View File

@ -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')" />