feat(GiPageLayout): 新增折叠侧边栏功能，并使用 GiPageLayout 优化用户、角色、字典管理

src/components/GiPageLayout/index.vue

@@ -1,11 +1,18 @@
 <template>
   <a-row align="stretch" :gutter="rowGutter" class="gi-page-layout" :class="getClass">
-    <a-col v-if="slots.left" v-bind="props.leftColProps" :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px">
+    <a-col v-if="slots.left" v-show="!isCollapsed || (!isDesktop && !isCollapsed)" v-bind="props.leftColProps" :xs="isCollapsed ? 1 : 23" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4">
       <div class="gi-page-layout__left" :style="props.leftStyle">
         <slot name="left"></slot>
       </div>
     </a-col>
-    <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps">
+    <div
+      class="gi-page-layout__divider" :class="{
+        none: isCollapsed || !isDesktop,
+      }"
+    >
+      <GiSplitButton :collapsed="isCollapsed" @click="toggleCollapsed"></GiSplitButton>
+    </div>
+    <a-col v-show="isDesktop || (!isDesktop && isCollapsed)" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps">
       <div v-if="slots.header" class="gi-page-layout__header" :style="props.headerStyle">
         <slot name="header"></slot>
       </div>
@@ -19,6 +26,7 @@
 <script setup lang='ts'>
 import type { ColProps } from '@arco-design/web-vue'
 import type { CSSProperties } from 'vue'
+import { useDevice } from '@/hooks'
 
 defineOptions({ name: 'GiPageLayout' })
 
@@ -40,6 +48,8 @@ defineSlots<{
   default: () => void
 }>()
 
+const { isDesktop } = useDevice()
+
 const getClass = computed(() => {
   return {
     'gi-page-layout--margin': props.margin,
@@ -68,6 +78,10 @@ interface Props {
 }
 
 const slots = useSlots()
+const isCollapsed = ref(false)
+const toggleCollapsed = () => {
+  isCollapsed.value = !isCollapsed.value
+}
 </script>
 
 <style lang='scss' scoped>
@@ -78,6 +92,7 @@ const slots = useSlots()
   overflow: hidden;
   box-sizing: border-box;
   background-color: var(--color-bg-1);
+  position: relative;
 
   &--margin {
     margin: $margin;
@@ -112,7 +127,6 @@ const slots = useSlots()
 
 .gi-page-layout__left {
   height: 100%;
-  border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -131,4 +145,14 @@ const slots = useSlots()
   overflow: hidden;
   box-sizing: border-box;
 }
+
+.gi-page-layout__divider {
+  position: relative;
+  width: 1px;
+  background-color: var(--color-border);
+}
+
+.gi-page-layout__divider.none {
+  width: 0;
+}
 </style>

src/views/system/config/index.vue

@@ -1,31 +1,22 @@
 <template>
   <div class="gi_table_page">
-    <a-tabs v-model:active-key="activeKey" size="large" position="left" @change="change">
+    <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
       <a-tab-pane key="site">
         <template #title><icon-apps /> 网站配置</template>
-        <keep-alive>
-          <component :is="PanMap[activeKey]" />
-        </keep-alive>
       </a-tab-pane>
       <a-tab-pane key="security">
         <template #title><icon-safe /> 安全配置</template>
-        <keep-alive>
-          <component :is="PanMap[activeKey]" />
-        </keep-alive>
       </a-tab-pane>
       <a-tab-pane key="mail">
         <template #title><icon-email /> 邮件配置</template>
-        <keep-alive>
-          <component :is="PanMap[activeKey]" />
-        </keep-alive>
       </a-tab-pane>
       <a-tab-pane key="login">
         <template #title><icon-lock /> 登录配置</template>
-        <keep-alive>
-          <component :is="PanMap[activeKey]" />
-        </keep-alive>
       </a-tab-pane>
     </a-tabs>
+    <keep-alive>
+      <component :is="PanMap[activeKey]" />
+    </keep-alive>
   </div>
 </template>
 
@@ -91,6 +82,10 @@ const change = (key: string | number) => {
   right: -20px;
 }
 
+:deep(.arco-tabs) {
+  overflow: visible;
+}
+
 :deep(.arco-tabs-nav) {
   overflow: visible;
 }

src/views/system/dict/index.vue

@@ -1,71 +1,67 @@
 <template>
-  <div class="gi_page">
-    <SplitPanel>
-      <template #left>
-        <DictTree @node-click="handleSelectDict" />
-      </template>
-      <template #main>
-        <a-row align="stretch" :gutter="14" class="h-full page_content">
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" flex="1" class="h-full overflow-hidden">
-            <GiTable
-              row-key="id"
-              :data="dataList"
-              :columns="columns"
-              :loading="loading"
-              :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
-              :pagination="pagination"
-              :disabled-tools="['size']"
-              :disabled-column-keys="['label']"
-              @refresh="search"
-            >
-              <template #toolbar-left>
-                <a-input-search v-model="queryForm.description" placeholder="搜索标签/描述" allow-clear @search="search" />
-                <a-button @click="reset">
-                  <template #icon><icon-refresh /></template>
-                  <template #default>重置</template>
-                </a-button>
-              </template>
-              <template #toolbar-right>
-                <a-button v-permission="['system:dict:item:create']" type="primary" @click="onAdd">
-                  <template #icon><icon-plus /></template>
-                  <template #default>新增</template>
-                </a-button>
-                <a-button v-permission="['system:dict:item:clearCache']" type="outline" status="warning" @click="onClearCache">
-                  <template #icon><icon-delete /></template>
-                  <template #default>清除缓存</template>
-                </a-button>
-              </template>
-              <template #label="{ record }">
-                <a-tag v-if="record.color === 'primary'" color="arcoblue">{{ record.label }}</a-tag>
-                <a-tag v-else-if="record.color === 'success'" color="green">{{ record.label }}</a-tag>
-                <a-tag v-else-if="record.color === 'warning'" color="orangered">{{ record.label }}</a-tag>
-                <a-tag v-else-if="record.color === 'error'" color="red">{{ record.label }}</a-tag>
-                <a-tag v-else-if="record.color === 'default'" color="gray">{{ record.label }}</a-tag>
-              </template>
-              <template #status="{ record }">
-                <GiCellStatus :status="record.status" />
-              </template>
-              <template #action="{ record }">
-                <a-space>
-                  <a-link v-permission="['system:dict:item:update']" title="修改" @click="onUpdate(record)">修改</a-link>
-                  <a-link
-                    v-permission="['system:dict:item:delete']"
-                    status="danger"
-                    title="删除"
-                    @click="onDelete(record)"
-                  >
-                    删除
-                  </a-link>
-                </a-space>
-              </template>
-            </GiTable>
-          </a-col>
-        </a-row>
-      </template>
-    </SplitPanel>
+  <GiPageLayout>
+    <template #left>
+      <DictTree @node-click="handleSelectDict" />
+    </template>
+    <a-row align="stretch" :gutter="14" class="h-full page_content">
+      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" flex="1" class="h-full overflow-hidden">
+        <GiTable
+          row-key="id"
+          :data="dataList"
+          :columns="columns"
+          :loading="loading"
+          :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
+          :pagination="pagination"
+          :disabled-tools="['size']"
+          :disabled-column-keys="['label']"
+          @refresh="search"
+        >
+          <template #toolbar-left>
+            <a-input-search v-model="queryForm.description" placeholder="搜索标签/描述" allow-clear @search="search" />
+            <a-button @click="reset">
+              <template #icon><icon-refresh /></template>
+              <template #default>重置</template>
+            </a-button>
+          </template>
+          <template #toolbar-right>
+            <a-button v-permission="['system:dict:item:create']" type="primary" @click="onAdd">
+              <template #icon><icon-plus /></template>
+              <template #default>新增</template>
+            </a-button>
+            <a-button v-permission="['system:dict:item:clearCache']" type="outline" status="warning" @click="onClearCache">
+              <template #icon><icon-delete /></template>
+              <template #default>清除缓存</template>
+            </a-button>
+          </template>
+          <template #label="{ record }">
+            <a-tag v-if="record.color === 'primary'" color="arcoblue">{{ record.label }}</a-tag>
+            <a-tag v-else-if="record.color === 'success'" color="green">{{ record.label }}</a-tag>
+            <a-tag v-else-if="record.color === 'warning'" color="orangered">{{ record.label }}</a-tag>
+            <a-tag v-else-if="record.color === 'error'" color="red">{{ record.label }}</a-tag>
+            <a-tag v-else-if="record.color === 'default'" color="gray">{{ record.label }}</a-tag>
+          </template>
+          <template #status="{ record }">
+            <GiCellStatus :status="record.status" />
+          </template>
+          <template #action="{ record }">
+            <a-space>
+              <a-link v-permission="['system:dict:item:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+              <a-link
+                v-permission="['system:dict:item:delete']"
+                status="danger"
+                title="删除"
+                @click="onDelete(record)"
+              >
+                删除
+              </a-link>
+            </a-space>
+          </template>
+        </GiTable>
+      </a-col>
+    </a-row>
 
     <DictItemAddModal ref="DictItemAddModalRef" @save-success="search" />
-  </div>
+  </GiPageLayout>
 </template>
 
 <script setup lang="ts">

src/views/system/role/index.vue

@@ -1,21 +1,17 @@
 <template>
-  <div class="gi_page">
-    <SplitPanel>
-      <template #left>
-        <RoleTree @node-click="handleSelectRole" />
-      </template>
-      <template #main>
-        <a-tabs v-model:activeKey="activeTab" class="gi_tabs" size="large">
-          <a-tab-pane key="1" title="功能权限">
-            <component :is="Permission" v-if="activeTab === '1'" :role-id="roleId" />
-          </a-tab-pane>
-          <a-tab-pane key="2" title="角色用户">
-            <component :is="RoleUser" v-if="activeTab === '2'" :role-id="roleId" />
-          </a-tab-pane>
-        </a-tabs>
-      </template>
-    </SplitPanel>
-  </div>
+  <GiPageLayout :header-style="{ padding: 0, borderBottom: 'none' }">
+    <template #left>
+      <RoleTree @node-click="handleSelectRole" />
+    </template>
+    <template #header>
+      <a-tabs v-model:activeKey="activeTab" class="gi_tabs" hide-content size="large">
+        <a-tab-pane key="1" title="功能权限"></a-tab-pane>
+        <a-tab-pane key="2" title="角色用户"></a-tab-pane>
+      </a-tabs>
+    </template>
+    <component :is="Permission" v-if="activeTab === '1'" :role-id="roleId" />
+    <component :is="RoleUser" v-if="activeTab === '2'" :role-id="roleId" />
+  </GiPageLayout>
 </template>
 
 <script setup lang="ts">

src/views/system/user/index.vue

@@ -1,92 +1,88 @@
 <template>
-  <div class="gi_page">
-    <SplitPanel size="20%">
-      <template #left>
-        <DeptTree @node-click="handleSelectDept" />
+  <GiPageLayout>
+    <template #left>
+      <DeptTree @node-click="handleSelectDept" />
+    </template>
+    <GiTable
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['nickname']"
+      @refresh="search"
+    >
+      <template #top>
+        <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
       </template>
-      <template #main>
-        <GiTable
-          row-key="id"
-          :data="dataList"
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['nickname']"
-          @refresh="search"
-        >
-          <template #top>
-            <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
-          </template>
-          <template #toolbar-left>
-            <a-button v-permission="['system:user:create']" type="primary" @click="onAdd">
-              <template #icon><icon-plus /></template>
-              <template #default>新增</template>
-            </a-button>
-            <a-button v-permission="['system:user:import']" @click="onImport">
-              <template #icon><icon-upload /></template>
-              <template #default>导入</template>
-            </a-button>
-          </template>
-          <template #toolbar-right>
-            <a-button v-permission="['system:user:export']" @click="onExport">
-              <template #icon><icon-download /></template>
-              <template #default>导出</template>
-            </a-button>
-          </template>
-          <template #nickname="{ record }">
-            <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
-          </template>
-          <template #gender="{ record }">
-            <GiCellGender :gender="record.gender" />
-          </template>
-          <template #roleNames="{ record }">
-            <GiCellTags :data="record.roleNames" />
-          </template>
-          <template #status="{ record }">
-            <GiCellStatus :status="record.status" />
-          </template>
-          <template #isSystem="{ record }">
-            <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
-            <a-tag v-else color="arcoblue" size="small">否</a-tag>
-          </template>
-          <template #action="{ record }">
-            <a-space>
-              <a-link v-permission="['system:user:get']" title="详情" @click="onDetail(record)">详情</a-link>
-              <a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
-              <a-link
-                v-permission="['system:user:delete']"
-                status="danger"
-                :disabled="record.isSystem"
-                :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                @click="onDelete(record)"
-              >
-                删除
-              </a-link>
-              <a-dropdown>
-                <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
-                  <template #icon>
-                    <icon-more :size="16" />
-                  </template>
-                </a-button>
-                <template #content>
-                  <a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
-                  <a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
-                </template>
-              </a-dropdown>
-            </a-space>
-          </template>
-        </GiTable>
+      <template #toolbar-left>
+        <a-button v-permission="['system:user:create']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <template #default>新增</template>
+        </a-button>
+        <a-button v-permission="['system:user:import']" @click="onImport">
+          <template #icon><icon-upload /></template>
+          <template #default>导入</template>
+        </a-button>
       </template>
-    </SplitPanel>
+      <template #toolbar-right>
+        <a-button v-permission="['system:user:export']" @click="onExport">
+          <template #icon><icon-download /></template>
+          <template #default>导出</template>
+        </a-button>
+      </template>
+      <template #nickname="{ record }">
+        <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
+      </template>
+      <template #gender="{ record }">
+        <GiCellGender :gender="record.gender" />
+      </template>
+      <template #roleNames="{ record }">
+        <GiCellTags :data="record.roleNames" />
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #isSystem="{ record }">
+        <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+        <a-tag v-else color="arcoblue" size="small">否</a-tag>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:user:get']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['system:user:delete']"
+            status="danger"
+            :disabled="record.isSystem"
+            :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+          <a-dropdown>
+            <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
+              <template #icon>
+                <icon-more :size="16" />
+              </template>
+            </a-button>
+            <template #content>
+              <a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
+              <a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
+            </template>
+          </a-dropdown>
+        </a-space>
+      </template>
+    </GiTable>
 
     <UserAddDrawer ref="UserAddDrawerRef" @save-success="search" />
     <UserImportDrawer ref="UserImportDrawerRef" @save-success="search" />
     <UserDetailDrawer ref="UserDetailDrawerRef" />
     <UserResetPwdModal ref="UserResetPwdModalRef" />
     <UserUpdateRoleModal ref="UserUpdateRoleModalRef" @save-success="search" />
-  </div>
+  </GiPageLayout>
 </template>
 
 <script setup lang="ts">