From 31df8f969d6abc769ff2182a5540582c1c12f0d4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 24 Feb 2023 16:56:16 +0800
Subject: [PATCH] refactor: refine ui in mobile device

---
 .../components/src/components/card/Card.vue   |  1 +
 .../components/src/components/space/Space.vue |  3 +-
 .../contents/attachments/AttachmentList.vue   |  6 ++--
 src/modules/contents/comments/CommentList.vue |  6 ++--
 .../contents/pages/DeletedSinglePageList.vue  |  6 ++--
 src/modules/contents/pages/SinglePageList.vue |  6 ++--
 src/modules/contents/pages/module.ts          |  1 -
 .../contents/posts/DeletedPostList.vue        |  6 ++--
 src/modules/contents/posts/PostList.vue       |  6 ++--
 .../posts/categories/CategoryList.vue         |  2 +-
 src/modules/contents/posts/tags/TagList.vue   |  6 ++--
 src/modules/interface/menus/Menus.vue         | 28 ++++++++-----------
 src/modules/system/actuator/module.ts         |  1 -
 src/modules/system/plugins/PluginList.vue     |  8 ++++--
 src/modules/system/roles/RoleList.vue         |  2 +-
 src/modules/system/users/UserList.vue         |  6 ++--
 16 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/packages/components/src/components/card/Card.vue b/packages/components/src/components/card/Card.vue
index b17f8e25..5c830694 100644
--- a/packages/components/src/components/card/Card.vue
+++ b/packages/components/src/components/card/Card.vue
@@ -54,6 +54,7 @@ defineProps<{
   }
 
   .card-body {
+    @apply overflow-x-auto;
     padding: 12px 16px;
   }
 
diff --git a/packages/components/src/components/space/Space.vue b/packages/components/src/components/space/Space.vue
index 7cc9f9f8..480a95e7 100644
--- a/packages/components/src/components/space/Space.vue
+++ b/packages/components/src/components/space/Space.vue
@@ -33,7 +33,8 @@ const wrapperClasses = computed(() => {
 <style lang="scss">
 .space-wrapper {
   @apply inline-flex
-  box-border;
+  box-border
+  flex-wrap;
 
   &.space-direction-row {
     @apply flex-row;
diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 900e3492..d8a4c3d1 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -336,7 +336,7 @@ onMounted(() => {
           <template #header>
             <div class="block w-full bg-gray-50 px-4 py-3">
               <div
-                class="relative flex flex-col items-start sm:flex-row sm:items-center"
+                class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
               >
                 <div
                   v-permission="['system:attachments:manage']"
@@ -352,11 +352,11 @@ onMounted(() => {
                 <div class="flex w-full flex-1 items-center sm:w-auto">
                   <div
                     v-if="!selectedAttachments.size"
-                    class="flex items-center gap-2"
+                    class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
                   >
                     <FormKit
                       id="keywordInput"
-                      outer-class="!p-0"
+                      outer-class="!p-0 w-full sm:w-auto"
                       placeholder="输入关键词搜索"
                       type="text"
                       name="keyword"
diff --git a/src/modules/contents/comments/CommentList.vue b/src/modules/contents/comments/CommentList.vue
index b162c25a..a0c04efb 100644
--- a/src/modules/contents/comments/CommentList.vue
+++ b/src/modules/contents/comments/CommentList.vue
@@ -313,7 +313,7 @@ function handleClearFilters() {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:comments:manage']"
@@ -329,11 +329,11 @@ function handleClearFilters() {
             <div class="flex w-full flex-1 items-center sm:w-auto">
               <div
                 v-if="!selectedCommentNames.length"
-                class="flex items-center gap-2"
+                class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
               >
                 <FormKit
                   id="keywordInput"
-                  outer-class="!p-0"
+                  outer-class="!p-0 w-full sm:w-auto"
                   placeholder="输入关键词搜索"
                   type="text"
                   name="keyword"
diff --git a/src/modules/contents/pages/DeletedSinglePageList.vue b/src/modules/contents/pages/DeletedSinglePageList.vue
index 15aca966..4b1d5265 100644
--- a/src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/src/modules/contents/pages/DeletedSinglePageList.vue
@@ -261,7 +261,7 @@ function handleClearKeyword() {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:singlepages:manage']"
@@ -277,11 +277,11 @@ function handleClearKeyword() {
             <div class="flex w-full flex-1 items-center sm:w-auto">
               <div
                 v-if="!selectedPageNames.length"
-                class="flex items-center gap-2"
+                class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
               >
                 <FormKit
                   id="keywordInput"
-                  outer-class="!p-0"
+                  outer-class="!p-0 w-full sm:w-auto"
                   placeholder="输入关键词搜索"
                   type="text"
                   name="keyword"
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 8a506a71..aadb9b9e 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -474,7 +474,7 @@ function handleClearFilters() {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:singlepages:manage']"
@@ -490,11 +490,11 @@ function handleClearFilters() {
             <div class="flex w-full flex-1 items-center sm:w-auto">
               <div
                 v-if="!selectedPageNames.length"
-                class="flex items-center gap-2"
+                class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
               >
                 <FormKit
                   id="keywordInput"
-                  outer-class="!p-0"
+                  outer-class="!p-0 w-full sm:w-auto"
                   placeholder="输入关键词搜索"
                   type="text"
                   name="keyword"
diff --git a/src/modules/contents/pages/module.ts b/src/modules/contents/pages/module.ts
index f8190401..e0fd3559 100644
--- a/src/modules/contents/pages/module.ts
+++ b/src/modules/contents/pages/module.ts
@@ -29,7 +29,6 @@ export default definePlugin({
               group: "content",
               icon: markRaw(IconPages),
               priority: 1,
-              mobile: true,
             },
           },
         },
diff --git a/src/modules/contents/posts/DeletedPostList.vue b/src/modules/contents/posts/DeletedPostList.vue
index 26795d80..a097817f 100644
--- a/src/modules/contents/posts/DeletedPostList.vue
+++ b/src/modules/contents/posts/DeletedPostList.vue
@@ -219,7 +219,7 @@ function handleClearKeyword() {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:posts:manage']"
@@ -235,11 +235,11 @@ function handleClearKeyword() {
             <div class="flex w-full flex-1 items-center sm:w-auto">
               <div
                 v-if="!selectedPostNames.length"
-                class="flex items-center gap-2"
+                class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
               >
                 <FormKit
                   id="keywordInput"
-                  outer-class="!p-0"
+                  outer-class="!p-0 w-full sm:w-auto"
                   placeholder="输入关键词搜索"
                   type="text"
                   name="keyword"
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 167e5c80..45e62e05 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -460,7 +460,7 @@ watch(selectedPostNames, (newValue) => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:posts:manage']"
@@ -476,11 +476,11 @@ watch(selectedPostNames, (newValue) => {
             <div class="flex w-full flex-1 items-center sm:w-auto">
               <div
                 v-if="!selectedPostNames.length"
-                class="flex items-center gap-2"
+                class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
               >
                 <FormKit
                   id="keywordInput"
-                  outer-class="!p-0"
+                  outer-class="!p-0 w-full sm:w-auto"
                   placeholder="输入关键词搜索"
                   type="text"
                   name="keyword"
diff --git a/src/modules/contents/posts/categories/CategoryList.vue b/src/modules/contents/posts/categories/CategoryList.vue
index 92dd7212..f8966741 100644
--- a/src/modules/contents/posts/categories/CategoryList.vue
+++ b/src/modules/contents/posts/categories/CategoryList.vue
@@ -102,7 +102,7 @@ const onEditingModalClose = () => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div class="flex w-full flex-1 sm:w-auto">
               <span class="text-base font-medium">
diff --git a/src/modules/contents/posts/tags/TagList.vue b/src/modules/contents/posts/tags/TagList.vue
index d0cb18ed..8bd1a152 100644
--- a/src/modules/contents/posts/tags/TagList.vue
+++ b/src/modules/contents/posts/tags/TagList.vue
@@ -137,10 +137,8 @@ onMounted(async () => {
     <VCard :body-class="['!p-0']">
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
-          <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
-          >
-            <div class="flex w-full flex-1 sm:w-auto">
+          <div class="relative flex flex-wrap items-center justify-between">
+            <div>
               <span class="text-base font-medium">
                 {{ tags?.length || 0 }} 个标签
               </span>
diff --git a/src/modules/interface/menus/Menus.vue b/src/modules/interface/menus/Menus.vue
index 216457a1..0338a965 100644
--- a/src/modules/interface/menus/Menus.vue
+++ b/src/modules/interface/menus/Menus.vue
@@ -217,7 +217,7 @@ const handleResetMenuItems = async () => {
   </VPageHeader>
   <div class="m-0 md:m-4">
     <div class="flex flex-col gap-4 sm:flex-row">
-      <div class="w-96">
+      <div class="w-full sm:w-96">
         <MenuList
           ref="menuListRef"
           v-model:selected-menu="selectedMenu"
@@ -228,25 +228,21 @@ const handleResetMenuItems = async () => {
         <VCard :body-class="['!p-0']">
           <template #header>
             <div class="block w-full bg-gray-50 px-4 py-3">
-              <div
-                class="relative flex flex-col items-start sm:flex-row sm:items-center"
-              >
-                <div class="flex w-full flex-1 sm:w-auto">
+              <div class="relative flex flex-wrap items-center justify-between">
+                <div>
                   <span class="text-base font-medium">
                     {{ selectedMenu?.spec.displayName }}
                   </span>
                 </div>
-                <div class="mt-4 flex sm:mt-0">
-                  <VSpace>
-                    <VButton
-                      v-permission="['system:menus:manage']"
-                      size="xs"
-                      type="default"
-                      @click="menuItemEditingModal = true"
-                    >
-                      新增
-                    </VButton>
-                  </VSpace>
+                <div>
+                  <VButton
+                    v-permission="['system:menus:manage']"
+                    size="xs"
+                    type="default"
+                    @click="menuItemEditingModal = true"
+                  >
+                    新增
+                  </VButton>
                 </div>
               </div>
             </div>
diff --git a/src/modules/system/actuator/module.ts b/src/modules/system/actuator/module.ts
index d7f023a1..860b0763 100644
--- a/src/modules/system/actuator/module.ts
+++ b/src/modules/system/actuator/module.ts
@@ -22,7 +22,6 @@ export default definePlugin({
               group: "system",
               icon: markRaw(IconTerminalBoxLine),
               priority: 3,
-              mobile: true,
             },
           },
         },
diff --git a/src/modules/system/plugins/PluginList.vue b/src/modules/system/plugins/PluginList.vue
index ed098301..b8134bbf 100644
--- a/src/modules/system/plugins/PluginList.vue
+++ b/src/modules/system/plugins/PluginList.vue
@@ -173,12 +173,14 @@ const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
-            <div class="flex w-full flex-1 items-center gap-2 sm:w-auto">
+            <div
+              class="flex w-full flex-1 flex-wrap items-center gap-2 sm:w-auto"
+            >
               <FormKit
                 id="keywordInput"
-                outer-class="!p-0"
+                outer-class="!p-0 w-full sm:w-auto"
                 placeholder="输入关键词搜索"
                 type="text"
                 name="keyword"
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index e1eca6f7..387695f3 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -175,7 +175,7 @@ const handleDelete = async (role: Role) => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div class="flex w-full flex-1 sm:w-auto">
               <FormKit
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index 1b9a0b23..bdee9f6f 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -344,7 +344,7 @@ const hasFilters = computed(() => {
       <template #header>
         <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+            class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
           >
             <div
               v-permission="['system:users:manage']"
@@ -360,11 +360,11 @@ const hasFilters = computed(() => {
             <div class="flex w-full flex-1 items-center sm:w-auto">
               <div
                 v-if="!selectedUserNames.length"
-                class="flex items-center gap-2"
+                class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
               >
                 <FormKit
                   id="keywordInput"
-                  outer-class="!p-0"
+                  outer-class="!p-0 w-full sm:w-auto"
                   :model-value="keyword"
                   name="keyword"
                   placeholder="输入关键词搜索"