From 7ddcb4cfa664ec1d4a55af37bd3e46a137383dcf Mon Sep 17 00:00:00 2001
From: mizhexiaoxiao <1157861072@qq.com>
Date: Mon, 4 Sep 2023 18:13:20 +0800
Subject: [PATCH] =?UTF-8?q?Update:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/query-bar/QueryBar.vue     |  9 +++--
 web/src/components/query-bar/QueryBarItem.vue |  2 +-
 web/src/components/table/CrudTable.vue        |  4 +--
 .../header/components/FullScreen.vue          |  4 ++-
 web/src/layout/index.vue                      | 33 +++++++++++++++++++
 web/src/store/modules/app/index.js            | 22 +++++++------
 web/src/views/system/api/index.vue            | 11 +++++--
 web/src/views/system/menu/index.vue           | 14 ++++----
 web/src/views/system/role/index.vue           |  6 ++--
 web/src/views/system/user/index.vue           | 14 ++++----
 web/src/views/workbench/index.vue             | 27 +++++++--------
 11 files changed, 90 insertions(+), 56 deletions(-)

diff --git a/web/src/components/query-bar/QueryBar.vue b/web/src/components/query-bar/QueryBar.vue
index 5a70132..9880767 100644
--- a/web/src/components/query-bar/QueryBar.vue
+++ b/web/src/components/query-bar/QueryBar.vue
@@ -13,12 +13,11 @@
   >
     <n-space wrap :size="[35, 15]">
       <slot />
+      <div>
+        <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 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>
   </div>
 </template>
 
diff --git a/web/src/components/query-bar/QueryBarItem.vue b/web/src/components/query-bar/QueryBarItem.vue
index 7434ed5..eb9bb8a 100644
--- a/web/src/components/query-bar/QueryBarItem.vue
+++ b/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>
diff --git a/web/src/components/table/CrudTable.vue b/web/src/components/table/CrudTable.vue
index f4e73b7..b89fabf 100644
--- a/web/src/components/table/CrudTable.vue
+++ b/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,
diff --git a/web/src/layout/components/header/components/FullScreen.vue b/web/src/layout/components/header/components/FullScreen.vue
index 66e873d..f940b12 100644
--- a/web/src/layout/components/header/components/FullScreen.vue
+++ b/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>
diff --git a/web/src/layout/index.vue b/web/src/layout/index.vue
index 7f44efb..2f3c2b3 100644
--- a/web/src/layout/index.vue
+++ b/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>
diff --git a/web/src/store/modules/app/index.js b/web/src/store/modules/app/index.js
index 27353d2..dfdfd8e 100644
--- a/web/src/store/modules/app/index.js
+++ b/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,18 +31,19 @@ export const useAppStore = defineStore('app', {
     setCollapsed(collapsed) {
       this.collapsed = collapsed
     },
+    setFullScreen(fullScreen) {
+      this.fullScreen = fullScreen
+    },
     setAliveKeys(key, val) {
       this.aliveKeys[key] = val
     },
-      /** 设置暗黑模式 */
-      setDark(isDark) {
-        this.isDark = isDark
-      },
-      /** 切换/关闭 暗黑模式 */
-      toggleDark() {
-        this.isDark = !this.isDark
-      },
+    /** 设置暗黑模式 */
+    setDark(isDark) {
+      this.isDark = isDark
+    },
+    /** 切换/关闭 暗黑模式 */
+    toggleDark() {
+      this.isDark = !this.isDark
+    },
   },
 })
-
-
diff --git a/web/src/views/system/api/index.vue b/web/src/views/system/api/index.vue
index f702248..b0de06d 100644
--- a/web/src/views/system/api/index.vue
+++ b/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
diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue
index 2d31c95..273691a 100644
--- a/web/src/views/system/menu/index.vue
+++ b/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: 'component', width: 80, ellipsis: { tooltip: true } },
+  { title: '跳转路径', key: 'redirect', width: 60, ellipsis: { tooltip: true } },
+  { title: '组件路径', key: 'component', width: 60, ellipsis: { tooltip: true } },
   {
-    title: 'KeepAlive',
+    title: '保活',
     key: 'keepalive',
-    width: 30,
-    fixed: 'left',
+    width: 40,
     render(row) {
       return h(NSwitch, {
         size: 'small',
@@ -96,8 +95,7 @@ const columns = [
   {
     title: '隐藏',
     key: 'is_hidden',
-    width: 30,
-    fixed: 'left',
+    width: 40,
     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) {
diff --git a/web/src/views/system/role/index.vue b/web/src/views/system/role/index.vue
index 1aa2d2f..653df87 100644
--- a/web/src/views/system/role/index.vue
+++ b/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
diff --git a/web/src/views/system/user/index.vue b/web/src/views/system/user/index.vue
index 6a58bb5..91143cd 100644
--- a/web/src/views/system/user/index.vue
+++ b/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: () => '删除',
diff --git a/web/src/views/workbench/index.vue b/web/src/views/workbench/index.vue
index 3ed24b0..8f1b03a 100644
--- a/web/src/views/workbench/index.vue
+++ b/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>
-          <img rounded-full width="60" :src="userStore.avatar" />
-          <div ml-20>
-            <p text-20>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 flex items-center justify-between>
+          <div flex items-center>
+            <img rounded-full width="60" :src="userStore.avatar" />
+            <div ml-10>
+              <p text-20 font-semibold>hello, {{ userStore.name }}</p>
+              <p mt-5 text-14 op-60>今天又是元气满满的一天!</p>
+            </div>
           </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"