diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 7fa6b1b..a427ece 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -7,7 +7,70 @@ export {} declare module 'vue' { 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'] 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'] } } diff --git a/src/views/bussiness-data/bussiness.vue b/src/views/bussiness-data/bussiness.vue index 2e6b855..4c4cb9a 100644 --- a/src/views/bussiness-data/bussiness.vue +++ b/src/views/bussiness-data/bussiness.vue @@ -2,7 +2,7 @@ - + + @@ -2362,6 +2371,86 @@ const fileTypeText = (type) => { // 侧边栏控制 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 = () => { folderForm.id = ''; @@ -2448,6 +2537,7 @@ watch(uploadDialogVisible, (visible) => { // 初始化加载 onMounted(() => { + loadSavedWidth(); // 加载保存的侧边栏宽度 initData(); }); @@ -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; +}