fix: improve the layout of tables offline on the mobile (#4573)

vbenjs · Oct 5, 2024 · 47d162e · 47d162e
1 parent d37e2f5
commit 47d162e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -30,12 +30,12 @@ const submitButtonOptions = computed(() => {
   };
 });
 
-const isQueryForm = computed(() => {
-  return !!unref(rootProps).showCollapseButton;
-});
+// const isQueryForm = computed(() => {
+//   return !!unref(rootProps).showCollapseButton;
+// });
 
 const queryFormStyle = computed(() => {
-  if (isQueryForm.value) {
+  if (!unref(rootProps).actionWrapperClass) {
     return {
       'grid-column': `-2 / -1`,
       marginLeft: 'auto',

diff --git a/packages/effects/plugins/src/vxe-table/theme.css b/packages/effects/plugins/src/vxe-table/theme.css
@@ -76,3 +76,7 @@
     }
   }
 }
+
+.vxe-pager--wrapper {
+  @apply justify-center md:justify-end;
+}
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -19,6 +19,7 @@ import {
 import { usePriorityValues } from '@vben/hooks';
 import { EmptyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
+import { usePreferences } from '@vben/preferences';
 import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
 import { VbenLoading } from '@vben-core/shadcn-ui';
 
@@ -48,6 +49,8 @@ const {
   formOptions,
 } = usePriorityValues(props, state);
 
+const { isMobile } = usePreferences();
+
 const slots = useSlots();
 
 const [Form, formApi] = useTableForm({});
@@ -91,6 +94,20 @@ const options = computed(() => {
   }
 
   if (mergedOptions.pagerConfig) {
+    const mobileLayouts = [
+      'PrevJump',
+      'PrevPage',
+      'Number',
+      'NextPage',
+      'NextJump',
+    ] as any;
+    const layouts = [
+      'Total',
+      'Sizes',
+      'Home',
+      ...mobileLayouts,
+      'End',
+    ] as readonly string[];
     mergedOptions.pagerConfig = mergeWithArrayOverride(
       {},
       mergedOptions.pagerConfig,
@@ -99,18 +116,7 @@ const options = computed(() => {
         background: true,
         pageSizes: [10, 20, 30, 50, 100, 200],
         className: 'mt-2 w-full',
-        layouts: [
-          'Total',
-          'Sizes',
-          'Home',
-          'PrevJump',
-          'PrevPage',
-          'Number',
-          'NextPage',
-          'NextJump',
-          'End',
-          // 'FullJump',
-        ] as any[],
+        layouts: isMobile.value ? mobileLayouts : layouts,
         size: 'mini' as const,
       },
     );
@@ -138,7 +144,6 @@ const vbenFormOptions = computed(() => {
       const formValues = formApi.form.values;
       props.api.reload(formValues);
     },
-    collapseTriggerResize: true,
     commonConfig: {
       componentProps: {
         class: 'w-full',
@@ -150,8 +155,15 @@ const vbenFormOptions = computed(() => {
     },
     wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
   };
+  const finalFormOptions: VbenFormProps = mergeWithArrayOverride(
+    {},
+    formOptions.value,
+    defaultFormProps,
+  );
+
   return {
-    ...mergeWithArrayOverride({}, formOptions.value, defaultFormProps),
+    ...finalFormOptions,
+    collapseTriggerResize: !!finalFormOptions.showCollapseButton,
   };
 });
 
@@ -244,7 +256,7 @@ onMounted(() => {
             </Form>
           </slot>
           <div
-            class="bg-background-deep z-100 absolute -left-2 bottom-2 h-4 w-[calc(100%+1rem)] overflow-hidden"
+            class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
           ></div>
         </div>
       </template>

diff --git a/playground/src/locales/langs/zh-CN.json b/playground/src/locales/langs/zh-CN.json
@@ -92,7 +92,7 @@
         "editCell": "单元格编辑",
         "editRow": "行编辑",
         "custom-cell": "自定义单元格",
-        "form": "开启搜索表单"
+        "form": "搜索表单"
       },
       "captcha": {
         "title": "验证码",