智能商务模块可以调整左侧栏的宽度
This commit is contained in:
parent
b1206e916e
commit
79b8eb340f
|
@ -7,7 +7,70 @@ export {}
|
||||||
|
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
|
ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
|
||||||
|
ApprovalMessageItem: typeof import('./../components/NotificationCenter/ApprovalMessageItem.vue')['default']
|
||||||
|
Avatar: typeof import('./../components/Avatar/index.vue')['default']
|
||||||
|
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
|
||||||
|
CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
|
||||||
|
Chart: typeof import('./../components/Chart/index.vue')['default']
|
||||||
|
CircularProgress: typeof import('./../components/CircularProgress/index.vue')['default']
|
||||||
|
ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
|
||||||
|
CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
|
||||||
|
CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
|
||||||
|
DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
|
||||||
|
DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
|
||||||
|
FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
|
||||||
|
GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
|
||||||
|
GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
|
||||||
|
GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
|
||||||
|
GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
|
||||||
|
GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
|
||||||
|
GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
|
||||||
|
GiDot: typeof import('./../components/GiDot/index.tsx')['default']
|
||||||
|
GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
|
||||||
|
GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
|
||||||
|
GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
|
||||||
|
GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
|
||||||
|
GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
|
||||||
|
GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
|
||||||
|
GiOption: typeof import('./../components/GiOption/index.vue')['default']
|
||||||
|
GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
|
||||||
|
GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
|
||||||
|
GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
|
||||||
|
GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
|
||||||
|
GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
|
||||||
|
GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
|
||||||
|
GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
|
||||||
|
GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
|
||||||
|
GiTag: typeof import('./../components/GiTag/index.tsx')['default']
|
||||||
|
GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
|
||||||
|
HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
|
||||||
|
Icon403: typeof import('./../components/icons/Icon403.vue')['default']
|
||||||
|
Icon404: typeof import('./../components/icons/Icon404.vue')['default']
|
||||||
|
Icon500: typeof import('./../components/icons/Icon500.vue')['default']
|
||||||
|
IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
|
||||||
|
IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
|
||||||
|
IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
|
||||||
|
IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
|
||||||
|
ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
|
||||||
|
ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
|
||||||
|
IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
|
||||||
|
JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
|
||||||
|
MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
|
||||||
|
MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
|
||||||
|
NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
|
||||||
|
ParentView: typeof import('./../components/ParentView/index.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
|
||||||
|
SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
|
||||||
|
TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
|
||||||
|
TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
|
||||||
|
UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
|
||||||
|
Verify: typeof import('./../components/Verify/index.vue')['default']
|
||||||
|
VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
|
||||||
|
VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
|
||||||
|
WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
|
||||||
|
YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<a-layout class="knowledge-container">
|
<a-layout class="knowledge-container">
|
||||||
<!-- 侧边栏 -->
|
<!-- 侧边栏 -->
|
||||||
<a-layout-sider
|
<a-layout-sider
|
||||||
width="260"
|
:width="sidebarWidth"
|
||||||
:collapsed-width="80"
|
:collapsed-width="80"
|
||||||
theme="dark"
|
theme="dark"
|
||||||
class="folder-sidebar"
|
class="folder-sidebar"
|
||||||
|
@ -101,7 +101,16 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 拖拽分隔线 -->
|
||||||
|
<div
|
||||||
|
v-if="!sidebarCollapsed"
|
||||||
|
class="sidebar-resizer"
|
||||||
|
@mousedown="startResize"
|
||||||
|
@touchstart="startResize"
|
||||||
|
:title="`当前宽度: ${sidebarWidth}px (拖拽调整)`"
|
||||||
|
>
|
||||||
|
<div class="resizer-handle"></div>
|
||||||
|
</div>
|
||||||
</a-layout-sider>
|
</a-layout-sider>
|
||||||
|
|
||||||
<a-layout>
|
<a-layout>
|
||||||
|
@ -2362,6 +2371,86 @@ const fileTypeText = (type) => {
|
||||||
// 侧边栏控制
|
// 侧边栏控制
|
||||||
const sidebarCollapsed = ref(false);
|
const sidebarCollapsed = ref(false);
|
||||||
|
|
||||||
|
// 侧边栏宽度控制
|
||||||
|
const sidebarWidth = ref(260); // 默认宽度
|
||||||
|
const isResizing = ref(false);
|
||||||
|
const startX = ref(0);
|
||||||
|
const startWidth = ref(0);
|
||||||
|
|
||||||
|
// 从localStorage加载保存的宽度
|
||||||
|
const loadSavedWidth = () => {
|
||||||
|
try {
|
||||||
|
const savedWidth = localStorage.getItem('bussiness-sidebar-width');
|
||||||
|
if (savedWidth) {
|
||||||
|
const width = parseInt(savedWidth);
|
||||||
|
if (width >= 200 && width <= 500) {
|
||||||
|
sidebarWidth.value = width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('加载侧边栏宽度失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存宽度到localStorage
|
||||||
|
const saveWidth = (width) => {
|
||||||
|
try {
|
||||||
|
localStorage.setItem('bussiness-sidebar-width', width.toString());
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('保存侧边栏宽度失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 开始拖拽调整大小
|
||||||
|
const startResize = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
isResizing.value = true;
|
||||||
|
startX.value = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
|
||||||
|
startWidth.value = sidebarWidth.value;
|
||||||
|
|
||||||
|
// 添加事件监听器
|
||||||
|
if (event.type === 'mousedown') {
|
||||||
|
document.addEventListener('mousemove', handleResize);
|
||||||
|
document.addEventListener('mouseup', stopResize);
|
||||||
|
} else {
|
||||||
|
document.addEventListener('touchmove', handleResize);
|
||||||
|
document.addEventListener('touchend', stopResize);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加样式
|
||||||
|
document.body.classList.add('resizing');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理拖拽调整
|
||||||
|
const handleResize = (event) => {
|
||||||
|
if (!isResizing.value) return;
|
||||||
|
|
||||||
|
const currentX = event.type === 'mousemove' ? event.clientX : event.touches[0].clientX;
|
||||||
|
const deltaX = currentX - startX.value;
|
||||||
|
const newWidth = Math.max(200, Math.min(500, startWidth.value + deltaX));
|
||||||
|
|
||||||
|
sidebarWidth.value = newWidth;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 停止拖拽调整
|
||||||
|
const stopResize = () => {
|
||||||
|
isResizing.value = false;
|
||||||
|
|
||||||
|
// 移除事件监听器
|
||||||
|
document.removeEventListener('mousemove', handleResize);
|
||||||
|
document.removeEventListener('mouseup', stopResize);
|
||||||
|
document.removeEventListener('touchmove', handleResize);
|
||||||
|
document.removeEventListener('touchend', stopResize);
|
||||||
|
|
||||||
|
// 移除样式
|
||||||
|
document.body.classList.remove('resizing');
|
||||||
|
|
||||||
|
// 保存宽度
|
||||||
|
saveWidth(sidebarWidth.value);
|
||||||
|
};
|
||||||
|
|
||||||
// 打开新建文件夹对话框
|
// 打开新建文件夹对话框
|
||||||
const handleCreateFolder = () => {
|
const handleCreateFolder = () => {
|
||||||
folderForm.id = '';
|
folderForm.id = '';
|
||||||
|
@ -2448,6 +2537,7 @@ watch(uploadDialogVisible, (visible) => {
|
||||||
|
|
||||||
// 初始化加载
|
// 初始化加载
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
loadSavedWidth(); // 加载保存的侧边栏宽度
|
||||||
initData();
|
initData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -3786,4 +3876,52 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 拖拽分隔线样式 */
|
||||||
|
.sidebar-resizer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 6px;
|
||||||
|
height: 100%;
|
||||||
|
cursor: col-resize;
|
||||||
|
background: transparent;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(var(--color-primary-6), 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: rgba(var(--color-primary-6), 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizer-handle {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 2px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
border-radius: 1px;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-resizer:hover .resizer-handle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 拖拽时的全局样式 */
|
||||||
|
body.resizing {
|
||||||
|
cursor: col-resize !important;
|
||||||
|
user-select: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.resizing * {
|
||||||
|
cursor: col-resize !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue