ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-11-03 22:57:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Charles7c
2025-04-04 22:15:09 +08:00
parent d97cf15938
commit 32c6c16362
5 changed files with 185 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/GiPageLayout/index.vue
View File

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

21
src/views/system/config/index.vue
View File

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

126
src/views/system/dict/index.vue
View File

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

30
src/views/system/role/index.vue
View File

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

156
src/views/system/user/index.vue
View File

@@ -1,92 +1,88 @@
<template> <template>
<div class="gi_page"> <GiPageLayout>
<SplitPanel size="20%"> <template #left>
<template #left> <DeptTree @node-click="handleSelectDept" />
<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>
<template #main> <template #toolbar-left>
<GiTable <a-button v-permission="['system:user:create']" type="primary" @click="onAdd">
row-key="id" <template #icon><icon-plus /></template>
:data="dataList" <template #default>新增</template>
:columns="columns" </a-button>
:loading="loading" <a-button v-permission="['system:user:import']" @click="onImport">
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }" <template #icon><icon-upload /></template>
:pagination="pagination" <template #default>导入</template>
:disabled-tools="['size']" </a-button>
: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> </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" /> <UserAddDrawer ref="UserAddDrawerRef" @save-success="search" />
<UserImportDrawer ref="UserImportDrawerRef" @save-success="search" /> <UserImportDrawer ref="UserImportDrawerRef" @save-success="search" />
<UserDetailDrawer ref="UserDetailDrawerRef" /> <UserDetailDrawer ref="UserDetailDrawerRef" />
<UserResetPwdModal ref="UserResetPwdModalRef" /> <UserResetPwdModal ref="UserResetPwdModalRef" />
<UserUpdateRoleModal ref="UserUpdateRoleModalRef" @save-success="search" /> <UserUpdateRoleModal ref="UserUpdateRoleModalRef" @save-success="search" />
</div> </GiPageLayout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">