perf(projects): perf manage page style

soybeanjs · Mar 11, 2024 · 779ba4e · 779ba4e
1 parent b2ee9ee
commit 779ba4e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/src/views/manage/role/index.vue b/src/views/manage/role/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="tsx">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import type { PaginationProps } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
 import { fetchGetRoleList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
@@ -130,6 +131,16 @@ const {
   ]
 });
 
+// this is for mobile, if the system does not support mobile, you can use `pagination` directly
+const mobilePagination = computed(() => {
+  const p: PaginationProps = {
+    ...pagination,
+    pageSlot: appStore.isMobile ? 3 : 9
+  };
+
+  return p;
+});
+
 const operateType = ref<OperateType>('add');
 
 function handleAdd() {
@@ -174,7 +185,7 @@ function getIndex(index: number) {
 </script>
 
 <template>
-  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+  <div class="min-h-500px flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
     <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
     <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
@@ -196,7 +207,7 @@ function getIndex(index: number) {
         :scroll-x="702"
         :loading="loading"
         remote
-        :pagination="pagination"
+        :pagination="mobilePagination"
         :row-key="item => item.id"
         class="sm:h-full"
       />

diff --git a/src/views/manage/role/modules/role-search.vue b/src/views/manage/role/modules/role-search.vue
@@ -27,7 +27,7 @@ function search() {
 
 <template>
   <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
-    <NForm :model="model" label-placement="left">
+    <NForm :model="model" label-placement="left" :label-width="80">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px">
           <NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />

diff --git a/src/views/manage/user/index.vue b/src/views/manage/user/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="tsx">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import type { PaginationProps } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
 import { fetchGetUserList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
@@ -160,6 +161,16 @@ const {
   ]
 });
 
+// this is for mobile, if the system does not support mobile, you can use `pagination` directly
+const mobilePagination = computed(() => {
+  const p: PaginationProps = {
+    ...pagination,
+    pageSlot: appStore.isMobile ? 3 : 9
+  };
+
+  return p;
+});
+
 const operateType = ref<OperateType>('add');
 
 function handleAdd() {
@@ -204,7 +215,7 @@ function getIndex(index: number) {
 </script>
 
 <template>
-  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+  <div class="min-h-500px flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
     <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
     <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
@@ -226,7 +237,7 @@ function getIndex(index: number) {
         :scroll-x="962"
         :loading="loading"
         remote
-        :pagination="pagination"
+        :pagination="mobilePagination"
         :row-key="item => item.id"
         class="sm:h-full"
       />

diff --git a/src/views/manage/user/modules/user-search.vue b/src/views/manage/user/modules/user-search.vue
@@ -44,7 +44,7 @@ async function search() {
 
 <template>
   <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" :rules="rules" label-placement="left">
+    <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userName')" path="userName" class="pr-24px">
           <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
@@ -74,7 +74,7 @@ async function search() {
             clearable
           />
         </NFormItemGi>
-        <NFormItemGi span="24 s:12" class="pr-24px">
+        <NFormItemGi span="24 m:12" class="pr-24px">
           <NSpace class="w-full" justify="end">
             <NButton @click="reset">
               <template #icon>