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

chore: 优化左树右表

Browse Source
This commit is contained in:
秋帆
2025-01-12 20:30:32 +08:00
parent 4b61e4027e
commit 8c55504bf8
18 changed files with 123 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/GiTable/index.vue
View File

@@ -33,10 +33,10 @@
</a-doption>
</template>
</a-dropdown>
<a-popover
<a-popover
v-if="showSettingColumnBtn" trigger="click" position="br"
:content-style="{ minWidth: '120px', padding: '6px 8px 10px' }"
>
>
<a-tooltip content="列设置">
<a-button>
<template #icon>
@@ -77,15 +77,15 @@
</a-row>
<div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
<div class="gi-table__container">
<a-table
ref="tableRef"
:stripe="stripe"
:size="size"
column-resizable
:bordered="{ cell: isBordered }"
v-bind="{ ...attrs, columns: _columns }"
:scrollbar="true"
:data="data"
<a-table
ref="tableRef"
:stripe="stripe"
:size="size"
column-resizable
:bordered="{ cell: isBordered }"
v-bind="{ ...attrs, columns: _columns }"
:scrollbar="true"
:data="data"
>
<template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
<slot :key="key" :name="key" v-bind="scoped"></slot>
@@ -235,7 +235,7 @@ defineExpose({ tableRef })
height: 100%;
background: var(--color-bg-1);
position: relative;
box-sizing:border-box;
box-sizing: border-box;
&--fullscreen {
padding: $padding;
position: fixed;
@@ -256,6 +256,10 @@ defineExpose({ tableRef })
height: 100%;
}
:deep(.arco-table-container) {
flex: 1;
}
:deep(.arco-table-body) {
height: 100%;
}

222
src/components/SplitPanel/index.vue
View File

@@ -1,47 +1,35 @@
<template>
<div
ref="rootRef"
class="ca-split-panel"
:class="{
'is-vertical': vertical,
'is-reverse': reverse,
'is-resizing': resizing,
'is-collapse': isCollapse,
'is-responsive': isResponsive,
'is-mobile': isMobile,
}"
:style="customStyle"
ref="rootRef"
class="ca-split-panel"
:class="{
'is-vertical': vertical,
'is-resizing': resizing,
'is-collapse': isCollapse,
'is-responsive': isResponsive,
'is-mobile': isMobile,
}"
:style="customStyle"
>
<div ref="sideRef" class="ca-split-panel__side" :style="sideStyle">
<div class="ca-split-panel__content">
<slot name="left"></slot>
</div>
</div>
<div class="container" style="display: flex;height: 100%;" :style="sideStyle">
<div ref="sideRef" class="ca-split-panel__side" :class="{ clead_padding: isCollapse }">
<div class="ca-split-panel__content">
<slot name="left"></slot>
</div>
<!-- 竖线和按钮 -->
<div class="divider">
<div
v-if="allowCollapse"
class="ca-split-panel__collapse-trigger"
:class="{
</div>
<!-- 竖线和按钮 -->
<div class="divider-container">
<div class="divider" v-show="!isCollapse"></div>
<div v-if="allowCollapse" class="ca-split-panel__collapse-trigger" :class="{
'is-collapse': isCollapse,
'is-mobile': isMobile,
}"
:style="!isMobile ? collapseTriggerStyle : undefined"
@click="toggleCollapse"
>
<a-button size="mini">
<template #icon>
<div v-if="reverse">
<IconRight v-if="!isCollapse" />
<IconLeft v-else />
</div>
<div v-else>
<IconLeft v-if="!isCollapse" />
<IconRight v-else />
</div>
</template>
</a-button>
}" :style="!isMobile ? collapseTriggerStyle : undefined" @click="toggleCollapse">
<div class="ca-split-panel__collapse-trigger-icon" style="">
<icon-right size="18" v-if="isCollapse" />
<icon-left v-else size="18" />
</div>
</div>
</div>
</div>
@@ -204,6 +192,10 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
.clead_padding {
padding: 0 !important;
}
.ca-split-panel {
display: flex;
width: 100%;
@@ -211,15 +203,17 @@ onUnmounted(() => {
position: relative;
background: var(--color-bg-2);
.divider {
width: 2px;
background-color: var(--color-border);
margin-right: 10px;
margin-left: 10px;
.divider-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
.divider {
width: 2px;
height: 100%;
background-color: var(--color-border);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
}
// 布局变体
@@ -227,54 +221,16 @@ onUnmounted(() => {
flex-direction: column;
}
&.is-reverse {
flex-direction: row-reverse;
.ca-split-panel__side {
border-right: none;
border-left: 1px solid var(--color-border);
}
&__main-content {
/* margin-left: 10px;*/
:deep(.arco-table-border .arco-table-container) {
border-right: none;
border-left: 1px solid var(--color-border);
}
}
&.is-mobile {
.ca-split-panel__side {
left: auto;
right: 0;
}
.ca-split-panel__collapse-trigger {
left: 10px;
right: auto;
&.is-collapse {
left: auto;
right: 10px;
}
}
&.is-collapse .ca-split-panel__side {
transform: translateX(100%);
}
}
}
// 基础组件
&__side {
display: flex;
flex-direction: column;
flex-direction: row;
flex-shrink: 0;
background: var(--color-bg-2);
flex: 1;
background: var(--color-bg-1);
overflow: hidden;
transition: transform 0.3s ease, width 0.3s ease;
padding: $padding 10px;
}
&__content,
@@ -283,7 +239,7 @@ onUnmounted(() => {
overflow: hidden;
:deep(.arco-table-border .arco-table-container) {
/* border-left: none;*/
/* border-left: none;*/
border: none;
}
}
@@ -296,47 +252,43 @@ onUnmounted(() => {
flex-direction: column;
overflow: hidden;
background: var(--color-bg-1);
padding: $padding;
}
.ca-split-panel__collapse-trigger-icon {
// padding: 2px;
border-radius: 50%;
// position: relative;
z-index: 2;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 1px var(--color-border);
// left: 0;
// transform: translate(-50%, -50%);
background-color: var(--color-border);
display: flex;
justify-content: center;
align-items: center;
&:hover {
box-shadow: 0px 0px 0px 1px var(--color-border-2);
background-color: var(--color-border-2);
}
}
// 折叠触发器
&__collapse-trigger {
align-items: center;
cursor: pointer;
width: 32px;
height: 60px;
background-color: var(--color-bg-2);
border: 1px solid var(--color-border);
width: 28px;
height: 28px;
border-radius: 15px;
justify-content: center;
// 遮罩效果，让分隔线看起来被按钮"切断"
&::before {
content: '';
position: absolute;
left: 50%;
top: -2px;
bottom: -2px;
transform: translateX(-50%);
width: 4px;
background-color: var(--color-bg-2);
z-index: -1;
}
:deep(.arco-btn) {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
width: 100%;
height: 100%;
&:hover,
&:focus,
&:active {
background: transparent;
border: none;
box-shadow: none;
}
}
position: absolute;
top: 50%;
left: 50% !important;
transform: translateX(-50%);
z-index: 1;
}
// 折叠状态
@@ -345,20 +297,19 @@ onUnmounted(() => {
width: 0;
}
/* .ca-split-panel__main {
padding-left: 0;
}*/
.ca-split-panel__collapse-trigger {
transform: translateX(0%);
}
}
// 移动端样式
&.is-mobile {
.ca-split-panel__side {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: var(--color-bg-2);
z-index: 1000;
z-index: 2;
padding: 0;
}
.divider {
@@ -368,13 +319,8 @@ onUnmounted(() => {
}
.ca-split-panel__collapse-trigger {
position: fixed;
right: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 12;
width: 32px;
height: 40px;
transform: translateX(-100%);
&::before {
display: none;
@@ -386,8 +332,8 @@ onUnmounted(() => {
}
}
&.is-collapse .ca-split-panel__side {
transform: translateX(-100%);
&.is-collapse .ca-split-panel__collapse-trigger {
transform: translateX(0%);
}
}

2
src/views/code/generator/index.vue
View File

@@ -2,7 +2,7 @@
<div class="table-page">
<GiTable
v-model:selectedKeys="selectedKeys"
title="代码生成"
title=""
row-key="tableName"
:data="dataList"
:columns="columns"

4
src/views/monitor/log/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="table-page">
<a-row justify="space-between" align="center" class="header">
<!-- <a-row justify="space-between" align="center" class="header">
<a-space wrap>
<div class="title">系统日志</div>
</a-space>
</a-row>
</a-row> -->
<a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
<a-tab-pane key="1">
<template #title><icon-lock /> 登录日志</template>

2
src/views/monitor/online/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="table-page">
<GiTable
title="在线用户"
title=""
row-key="id"
:data="dataList"
:columns="columns"

2
src/views/open/app/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="table-page">
<GiTable
title="应用管理"
title=""
row-key="id"
:data="dataList"
:columns="columns"

2
src/views/schedule/job/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="table-page">
<GiTable
title="任务管理"
title=""
row-key="id"
:data="dataList"
:columns="columns"

2
src/views/schedule/log/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="table-page">
<GiTable
title="任务日志"
title=""
row-key="id"
:data="dataList"
:columns="columns"

2
src/views/system/client/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="table-page">
<GiTable
title="客户端管理"
title=""
row-key="id"
:data="dataList"
:columns="columns"

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

@@ -1,10 +1,10 @@
<template>
<div class="table-page">
<a-row justify="space-between" align="center" class="header page_header">
<!-- <a-row justify="space-between" align="center" class="header page_header">
<a-space wrap>
<div class="title">系统配置</div>
</a-space>
</a-row>
</a-row> -->
<a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
<a-tab-pane key="1">
<template #title><icon-settings /> 基础配置</template>

2
src/views/system/dept/index.vue
View File

@@ -9,7 +9,7 @@
<GiTable
v-show="viewType === 'table'"
ref="tableRef"
title="部门管理"
title=""
row-key="id"
:data="dataList"
:columns="columns"

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

@@ -1,10 +1,10 @@
<template>
<div class="table-page">
<a-row justify="space-between" align="center" class="header page_header">
<div class="gi_page">
<!-- <a-row justify="space-between" align="center" class="header page_header">
<a-space wrap>
<div class="title">字典管理</div>
</a-space>
</a-row>
</a-row> -->
<SplitPanel>
<template #left>
<DictTree @node-click="handleSelectDict" />

2
src/views/system/file/main/FileAside.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<a-card title="文件管理" :bordered="false" :body-style="{ padding: 0 }">
<a-card title="" :bordered="false" :body-style="{ padding: 0 }">
<a-menu :default-open-keys="['0']" :selected-keys="[selectedKey]">
<a-sub-menu key="0">
<template #icon>

2
src/views/system/menu/index.vue
View File

@@ -2,7 +2,7 @@
<div class="table-page">
<GiTable
ref="tableRef"
title="菜单管理"
title=""
row-key="id"
:data="dataList"
:columns="columns"

2
src/views/system/notice/index.vue
View File

@@ -2,7 +2,7 @@
<div class="table-page">
<GiTable
row-key="id"
title="通知公告"
title=""
:data="dataList"
:columns="columns"
:loading="loading"

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

@@ -1,11 +1,12 @@
<template>
<div class="table-page">
<GiTable
title="角色管理"
title=""
row-key="id"
:data="dataList"
:columns="columns"
:loading="loading"
:bordered="false"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="pagination"
:disabled-tools="['size']"

2
src/views/system/storage/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="table-page">
<GiTable
title="存储管理"
title=""
row-key="id"
:data="dataList"
:columns="columns"

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

@@ -1,10 +1,10 @@
<template>
<div class="table-page">
<a-row justify="space-between" align="center" class="header page_header">
<div class="gi_page">
<!-- <a-row justify="space-between" align="center" class="header page_header">
<a-space wrap>
<div class="title">用户管理</div>
</a-space>
</a-row>
</a-row> -->
<SplitPanel size="20%">
<template #left>
<DeptTree @node-click="handleSelectDept" />