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

style: 优化搜索框样式

Browse Source
This commit is contained in:
xlsea 2024-04-18 09:47:26 +08:00
parent 41aef1cd1e
commit bf075380e1
12 changed files with 142 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/operate-drawer.vue
View File

@ -3,7 +3,7 @@ import { computed, nextTick, onUnmounted, reactive, ref, watch } from 'vue';
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
defineOptions({ defineOptions({
name: 'NamespaceOperateDrawer' name: 'OperateDrawer'
}); });
interface Props { interface Props {

67
src/components/common/search-form.vue Normal file
View File

@ -0,0 +1,67 @@
<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({
name: 'SearchForm'
});
interface Props {
model: Record<string, any>;
}
defineProps<Props>();
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
async function reset() {
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
<NGrid responsive="screen" item-responsive>
<slot></slot>
<NFormItemGi span="24 m:12 m:6" class="pr-24px lg:p-t-0 md:p-t-16px">
<NSpace class="min-w-172px w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template>
<style scoped></style>

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

@ -483,6 +483,8 @@ declare namespace Api {
groupName: string; groupName: string;
/** 业务ID */ /** 业务ID */
businessId: string; businessId: string;
/** 业务名称 */
businessName?: string;
/** 状态 */ /** 状态 */
notifyStatus: string; notifyStatus: string;
/** 通知类型 */ /** 通知类型 */
@ -514,12 +516,7 @@ declare namespace Api {
>; >;
/** notify-config list */ /** notify-config list */
type NotifyConfigList = Common.PaginatingQueryRecord< type NotifyConfigList = Common.PaginatingQueryRecord<NotifyConfig>;
{
/** 业务名称 */
businessName: string;
} & NotifyConfig
>;
} }
/** /**

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

@ -89,6 +89,8 @@ declare module 'vue' {
ReloadButton: typeof import('./../components/common/reload-button.vue')['default'] ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
Search: typeof import('../components/common/search-form.vue')['default']
SearchForm: typeof import('./../components/common/search-form.vue')['default']
SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default'] SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default']
SvgIcon: typeof import('./../components/custom/svg-icon.vue')['default'] SvgIcon: typeof import('./../components/custom/svg-icon.vue')['default']
SystemLogo: typeof import('./../components/common/system-logo.vue')['default'] SystemLogo: typeof import('./../components/common/system-logo.vue')['default']

15
src/views/group-config/index.vue
View File

@ -149,7 +149,13 @@ function edit(id: string) {
<template> <template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"> <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<GroupConfigSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" /> <GroupConfigSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
<NCard :title="$t('page.groupConfig.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper"> <NCard
:title="$t('page.groupConfig.title')"
:bordered="false"
size="small"
header-class="view-card-header"
class="sm:flex-1-hidden card-wrapper"
>
<template #header-extra> <template #header-extra>
<TableHeaderOperation <TableHeaderOperation
v-model:columns="columnChecks" v-model:columns="columnChecks"
@ -164,7 +170,6 @@ function edit(id: string) {
v-model:checked-row-keys="checkedRowKeys" v-model:checked-row-keys="checkedRowKeys"
:columns="columns" :columns="columns"
:data="data" :data="data"
size="small"
:flex-height="!appStore.isMobile" :flex-height="!appStore.isMobile"
:scroll-x="962" :scroll-x="962"
:loading="loading" :loading="loading"
@ -183,8 +188,4 @@ function edit(id: string) {
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
:deep(.n-card-header) {
--n-title-font-weight: 600 !important;
}
</style>

22
src/views/group-config/modules/groupConfig-operate-drawer.vue
View File

@ -85,21 +85,13 @@ watch(visible, () => {
</script> </script>
<template> <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">
<NForm ref="formRef" :model="model" :rules="rules"> <NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
<NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId"> <NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
<NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" /> </NFormItem>
</NFormItem> </NForm>
</NForm> </OperateDrawer>
<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>
</template> </template>
<style scoped></style> <style scoped></style>

45
src/views/group-config/modules/groupConfig-search.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { $t } from '@/locales'; import { $t } from '@/locales';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({ defineOptions({
name: 'GroupConfigSearch' name: 'GroupConfigSearch'
@ -13,51 +12,23 @@ interface Emits {
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.GroupConfig.GroupConfigSearchParams>('model', { required: true }); const model = defineModel<Api.GroupConfig.GroupConfigSearchParams>('model', { required: true });
async function reset() { function reset() {
await restoreValidation();
emit('reset'); emit('reset');
} }
async function search() { function search() {
await validate();
emit('search'); emit('search');
} }
</script> </script>
<template> <template>
<NCard :bordered="false" size="small" class="card-wrapper"> <SearchForm :model="model" @search="search" @reset="reset">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80"> <NFormItemGi span="24 s:12 m:6" :label="$t('page.groupConfig.groupName')" path="userName" class="pr-24px">
<NGrid responsive="screen" item-responsive> <NInput v-model:value="model.groupName" :placeholder="$t('page.groupConfig.form.groupName')" />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.groupConfig.groupName')" path="userName" class="pr-24px"> </NFormItemGi>
<NInput v-model:value="model.groupName" :placeholder="$t('page.groupConfig.form.groupName')" /> </SearchForm>
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template> </template>
<style scoped> <style scoped></style>
:deep(.n-card-header) {
--n-title-font-weight: 600 !important;
}
</style>

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

@ -1,8 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({ defineOptions({
name: 'NamespaceSearch' name: 'NamespaceSearch'
@ -15,51 +12,23 @@ interface Emits {
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.Namespace.NamespaceSearchParams>('model', { required: true }); const model = defineModel<Api.Namespace.NamespaceSearchParams>('model', { required: true });
async function reset() { function reset() {
await restoreValidation();
emit('reset'); emit('reset');
} }
async function search() { function search() {
await validate();
emit('search'); emit('search');
} }
</script> </script>
<template> <template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper"> <SearchForm :model="model" @search="search" @reset="reset">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile"> <NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px">
<NGrid responsive="screen" item-responsive> <NInput v-model:value="model.keyword" :placeholder="$t('page.namespace.form.keyword')" />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px"> </NFormItemGi>
<NInput v-model:value="model.keyword" :placeholder="$t('page.namespace.form.keyword')" /> </SearchForm>
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template> </template>
<style scoped></style> <style scoped></style>

63
src/views/notify/recipient/modules/notify-recipient-search.vue
View File

@ -1,8 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app'; import SearchForm from '@/components/common/search-form.vue';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({ defineOptions({
name: 'NotifyRecipientSearch' name: 'NotifyRecipientSearch'
@ -15,59 +13,32 @@ interface Emits {
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.NotifyRecipient.NotifyRecipientParams>('model', { required: true }); const model = defineModel<Api.NotifyRecipient.NotifyRecipientParams>('model', { required: true });
async function reset() { function reset() {
await restoreValidation();
emit('reset'); emit('reset');
} }
async function search() { function search() {
await validate();
emit('search'); emit('search');
} }
</script> </script>
<template> <template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper"> <SearchForm :model="model" @search="search" @reset="reset">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile"> <NFormItemGi
<NGrid responsive="screen" item-responsive> span="24 s:12 m:6"
<NFormItemGi :label-width="100"
span="24 s:12 m:6" :label="$t('page.notifyRecipient.recipientName')"
:label="$t('page.notifyRecipient.recipientName')" path="userName"
path="userName" class="pr-24px"
class="pr-24px" >
> <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
<NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" /> </NFormItemGi>
</NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyRecipient.notifyType')" path="userName" class="pr-24px">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyRecipient.notifyType')" path="userName" class="pr-24px"> <NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.notifyType')" clearable />
<NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.notifyType')" clearable /> </NFormItemGi>
</NFormItemGi> </SearchForm>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template> </template>
<style scoped></style> <style scoped></style>

57
src/views/notify/scene/modules/notify-config-search.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({ defineOptions({
name: 'NotifyConfigSearch' name: 'NotifyConfigSearch'
@ -15,57 +12,29 @@ interface Emits {
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.NotifyConfig.NotifySearchParams>('model', { required: true }); const model = defineModel<Api.NotifyConfig.NotifySearchParams>('model', { required: true });
async function reset() { function reset() {
await restoreValidation();
emit('reset'); emit('reset');
} }
async function search() { function search() {
await validate();
emit('search'); emit('search');
} }
</script> </script>
<template> <template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper"> <SearchForm :model="model" @search="search" @reset="reset">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile"> <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.groupName')" path="userName" class="pr-24px">
<NGrid responsive="screen" item-responsive> <NSelect v-model:value="model.groupName" :placeholder="$t('page.notifyConfig.groupName')" clearable />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.groupName')" path="userName" class="pr-24px"> </NFormItemGi>
<NSelect v-model:value="model.groupName" :placeholder="$t('page.notifyConfig.groupName')" clearable /> <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyStatus')" path="userName" class="pr-24px">
</NFormItemGi> <NSelect v-model:value="model.notifyStatus" :placeholder="$t('page.notifyConfig.notifyStatus')" clearable />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyStatus')" path="userName" class="pr-24px"> </NFormItemGi>
<NSelect v-model:value="model.notifyStatus" :placeholder="$t('page.notifyConfig.notifyStatus')" clearable /> <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyScene')" path="userName" class="pr-24px">
</NFormItemGi> <NSelect v-model:value="model.notifyScene" :placeholder="$t('page.notifyConfig.notifyScene')" clearable />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyScene')" path="userName" class="pr-24px"> </NFormItemGi>
<NSelect v-model:value="model.notifyScene" :placeholder="$t('page.notifyConfig.notifyScene')" clearable /> </SearchForm>
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template> </template>
<style scoped></style> <style scoped></style>

8
src/views/pods/index.vue
View File

@ -121,7 +121,7 @@ const { checkedRowKeys } = useTableOperate(data, getData);
:title="$t('page.pods.title')" :title="$t('page.pods.title')"
:bordered="false" :bordered="false"
size="small" size="small"
header-style="font-weight: 800;" header-class="view-card-header"
class="sm:flex-1-hidden card-wrapper" class="sm:flex-1-hidden card-wrapper"
> >
<template #header-extra> <template #header-extra>
@ -150,8 +150,4 @@ const { checkedRowKeys } = useTableOperate(data, getData);
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
:deep(.n-card-header) {
--n-title-font-weight: 600 !important;
}
</style>

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

@ -1,8 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({ defineOptions({
name: 'PodsSearch' name: 'PodsSearch'
@ -15,51 +12,23 @@ interface Emits {
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.Dashboard.DashboardPodsParams>('model', { required: true }); const model = defineModel<Api.Dashboard.DashboardPodsParams>('model', { required: true });
async function reset() { function reset() {
await restoreValidation();
emit('reset'); emit('reset');
} }
async function search() { function search() {
await validate();
emit('search'); emit('search');
} }
</script> </script>
<template> <template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper"> <SearchForm :model="model" @search="search" @reset="reset">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="60" :show-feedback="appStore.isMobile"> <NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px">
<NGrid responsive="screen" item-responsive> <NInput v-model:value="model.groupName" :placeholder="$t('page.pods.form.groupName')" />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px"> </NFormItemGi>
<NInput v-model:value="model.groupName" :placeholder="$t('page.pods.form.groupName')" /> </SearchForm>
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template> </template>
<style scoped></style> <style scoped></style>