Update: 移动端适配

web/src/components/query-bar/QueryBar.vue

@@ -13,12 +13,11 @@
   >
     <n-space wrap :size="[35, 15]">
       <slot />
-    </n-space>
+      <div>
-
-    <div flex-shrink-0>
         <n-button secondary type="primary" @click="emit('reset')">重置</n-button>
         <n-button ml-20 type="primary" @click="emit('search')">搜索</n-button>
       </div>
+    </n-space>
   </div>
 </template>
 

web/src/components/query-bar/QueryBarItem.vue

@@ -8,7 +8,7 @@
     >
       {{ label }}
     </label>
-    <div :style="{ width: contentWidth + 'px' }" flex-shrink-0>
+    <div>
       <slot />
     </div>
   </div>

web/src/components/table/CrudTable.vue

@@ -8,6 +8,7 @@
     :loading="loading"
     :columns="columns"
     :data="tableData"
+    :scroll-x="scrollX"
     :row-key="(row) => row[rowKey]"
     :pagination="isPagination ? pagination : false"
     @update:checked-row-keys="onChecked"
@@ -16,7 +17,6 @@
 </template>
 
 <script setup>
-
 const props = defineProps({
   /**
    * @remote true: 后端分页  false： 前端分页
@@ -34,7 +34,7 @@ const props = defineProps({
   },
   scrollX: {
     type: Number,
-    default: 1200,
+    default: 450,
   },
   rowKey: {
     type: String,

web/src/layout/components/header/components/FullScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-icon mr20 size="18" style="cursor: pointer" @click="toggle">
+  <n-icon v-if="appStore.fullScreen" mr20 size="18" style="cursor: pointer" @click="toggle">
     <icon-ant-design:fullscreen-exit-outlined v-if="isFullscreen" />
     <icon-ant-design:fullscreen-outlined v-else />
   </n-icon>
@@ -7,6 +7,8 @@
 
 <script setup>
 import { useFullscreen } from '@vueuse/core'
+import { useAppStore } from '@/store'
 
+const appStore = useAppStore()
 const { isFullscreen, toggle } = useFullscreen()
 </script>

web/src/layout/index.vue

@@ -37,5 +37,38 @@ import AppTags from './components/tags/index.vue'
 import { useAppStore } from '@/store'
 import { header, tags } from '~/settings'
 
+// 移动端适配
+import { useBreakpoints } from '@vueuse/core'
+
 const appStore = useAppStore()
+const breakpointsEnum = {
+  xl: 1600,
+  lg: 1199,
+  md: 991,
+  sm: 666,
+  xs: 575,
+}
+const breakpoints = reactive(useBreakpoints(breakpointsEnum))
+const isMobile = breakpoints.smaller('sm')
+const isPad = breakpoints.between('sm', 'md')
+const isPC = breakpoints.greater('md')
+watchEffect(() => {
+  if (isMobile.value) {
+    // Mobile
+    appStore.setCollapsed(true)
+    appStore.setFullScreen(false)
+  }
+
+  if (isPad.value) {
+    // IPad
+    appStore.setCollapsed(true)
+    appStore.setFullScreen(false)
+  }
+
+  if (isPC.value) {
+    // PC
+    appStore.setCollapsed(false)
+    appStore.setFullScreen(true)
+  }
+})
 </script>

web/src/store/modules/app/index.js

@@ -7,6 +7,7 @@ export const useAppStore = defineStore('app', {
     return {
       reloadFlag: true,
       collapsed: false,
+      fullScreen: true,
       /** keepAlive路由的key，重新赋值可重置keepAlive */
       aliveKeys: {},
       isDark,
@@ -30,6 +31,9 @@ export const useAppStore = defineStore('app', {
     setCollapsed(collapsed) {
       this.collapsed = collapsed
     },
+    setFullScreen(fullScreen) {
+      this.fullScreen = fullScreen
+    },
     setAliveKeys(key, val) {
       this.aliveKeys[key] = val
     },
@@ -43,5 +47,3 @@ export const useAppStore = defineStore('app', {
     },
   },
 })
-
-

web/src/views/system/api/index.vue

@@ -132,6 +132,7 @@ const columns = [
             {
               size: 'small',
               type: 'primary',
+              style: 'margin-right: 8px;',
               onClick: () => {
                 handleEdit(row)
                 modalForm.value.roles = row.roles.map((e) => (e = e.id))
@@ -158,7 +159,6 @@ const columns = [
                   {
                     size: 'small',
                     type: 'error',
-                    style: 'margin-left: 8px;',
                   },
                   {
                     default: () => '删除',
@@ -181,13 +181,18 @@ const columns = [
   <CommonPage show-footer title="API列表">
     <template #action>
       <div>
-        <NButton v-permission="'post/api/v1/api/create'" type="primary" @click="handleAdd">
+        <NButton
+          v-permission="'post/api/v1/api/create'"
+          class="float-right mr-15"
+          type="primary"
+          @click="handleAdd"
+        >
           <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />新建API
         </NButton>
         <NButton
           v-permission="'post/api/v1/api/refresh'"
+          class="float-right mr-15"
           type="warning"
-          class="ml-16"
           @click="handleRefreshApi"
         >
           <TheIcon icon="material-symbols:refresh" :size="18" class="mr-5" />刷新API

web/src/views/system/menu/index.vue

@@ -77,13 +77,12 @@ const columns = [
   },
   { title: '排序', key: 'order', width: 30, ellipsis: { tooltip: true } },
   { title: '访问路径', key: 'path', width: 60, ellipsis: { tooltip: true } },
-  { title: '跳转路径', key: 'redirect', width: 80, ellipsis: { tooltip: true } },
+  { title: '跳转路径', key: 'redirect', width: 60, ellipsis: { tooltip: true } },
-  { title: '组件路径', key: 'component', width: 80, ellipsis: { tooltip: true } },
+  { title: '组件路径', key: 'component', width: 60, ellipsis: { tooltip: true } },
   {
-    title: 'KeepAlive',
+    title: '保活',
     key: 'keepalive',
-    width: 30,
+    width: 40,
-    fixed: 'left',
     render(row) {
       return h(NSwitch, {
         size: 'small',
@@ -96,8 +95,7 @@ const columns = [
   {
     title: '隐藏',
     key: 'is_hidden',
-    width: 30,
+    width: 40,
-    fixed: 'left',
     render(row) {
       return h(NSwitch, {
         size: 'small',
@@ -118,7 +116,7 @@ const columns = [
   {
     title: '操作',
     key: 'actions',
-    width: 115,
+    width: 80,
     align: 'center',
     fixed: 'right',
     render(row) {

web/src/views/system/role/index.vue

@@ -125,7 +125,7 @@ const columns = [
   {
     title: '操作',
     key: 'actions',
-    width: 150,
+    width: 80,
     align: 'center',
     fixed: 'right',
     render(row) {
@@ -136,6 +136,7 @@ const columns = [
             {
               size: 'small',
               type: 'primary',
+              style: 'margin-right: 8px;',
               onClick: () => {
                 handleEdit(row)
               },
@@ -161,7 +162,7 @@ const columns = [
                   {
                     size: 'small',
                     type: 'error',
-                    style: 'margin-left: 10px;',
+                    style: 'margin-right: 8px;',
                   },
                   {
                     default: () => '删除',
@@ -179,7 +180,6 @@ const columns = [
             {
               size: 'small',
               type: 'primary',
-              style: 'margin-left: 10px;',
               onClick: async () => {
                 active.value = true
                 role_id.value = row.id

web/src/views/system/user/index.vue

@@ -92,7 +92,7 @@ const columns = [
   {
     title: '用户角色',
     key: 'role',
-    width: 80,
+    width: 60,
     align: 'center',
     render(row) {
       const roles = row.roles ?? []
@@ -108,7 +108,7 @@ const columns = [
     title: '超级用户',
     key: 'is_superuser',
     align: 'center',
-    width: 70,
+    width: 40,
     render(row) {
       return h(
         NTag,
@@ -121,14 +121,15 @@ const columns = [
     title: '上次登录时间',
     key: 'last_login',
     align: 'center',
-    width: 70,
+    width: 80,
+    ellipsis: { tooltip: true },
     render(row) {
       return h(
         NButton,
         { size: 'small', type: 'text', ghost: true },
         {
           default: () => (row.last_login !== null ? formatDate(row.last_login) : null),
-          icon: renderIcon('mdi:update', { size: 18 }),
+          icon: renderIcon('mdi:update', { size: 16 }),
         }
       )
     },
@@ -136,9 +137,8 @@ const columns = [
   {
     title: '禁用',
     key: 'is_active',
-    width: 30,
+    width: 50,
     align: 'center',
-    fixed: 'left',
     render(row) {
       return h(NSwitch, {
         size: 'small',
@@ -165,6 +165,7 @@ const columns = [
             {
               size: 'small',
               type: 'primary',
+              style: 'margin-right: 8px;',
               onClick: () => {
                 // roles => role_ids
                 handleEdit(row)
@@ -192,7 +193,6 @@ const columns = [
                   {
                     size: 'small',
                     type: 'error',
-                    style: 'margin-left: 8px;',
                   },
                   {
                     default: () => '删除',

web/src/views/workbench/index.vue

@@ -2,22 +2,17 @@
   <AppPage :show-footer="false">
     <div flex-1>
       <n-card rounded-10>
+        <div flex items-center justify-between>
           <div flex items-center>
             <img rounded-full width="60" :src="userStore.avatar" />
-          <div ml-20>
+            <div ml-10>
-            <p text-20>Hello, {{ userStore.name }}</p>
+              <p text-20 font-semibold>hello, {{ userStore.name }}</p>
               <p mt-5 text-14 op-60>今天又是元气满满的一天!</p>
             </div>
-          <div ml-auto flex items-center>
-            <n-space :size="24" :wrap="false">
-              <n-statistic
-                v-for="item in statisticData"
-                :key="item.id"
-                class="whitespace-nowrap"
-                v-bind="item"
-              ></n-statistic>
-            </n-space>
           </div>
+          <n-space :size="12" :wrap="false">
+            <n-statistic v-for="item in statisticData" :key="item.id" v-bind="item"></n-statistic>
+          </n-space>
         </div>
       </n-card>
 
@@ -29,7 +24,7 @@
           <n-card
             v-for="i in 9"
             :key="i"
-            class="mb-10 mt-10 w-300 flex-shrink-0 cursor-pointer"
+            class="mb-10 mt-10 w-300 cursor-pointer"
             hover:card-shadow
             title="Vue FastAPI Admin"
             size="small"