From 20dc0f4048a9ac780722c51704126178836f7b88 Mon Sep 17 00:00:00 2001 From: lzq <2495532633@qq.com> Date: Tue, 20 Jan 2026 19:34:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E7=A7=BB=E5=8A=A8=E5=AF=B9=E8=AF=9D?= =?UTF-8?q?=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + src/assets/stylus/index.styl | 29 +++ src/common/app/app-page-store.ts | 2 +- src/common/router/route-config.ts | 3 + src/common/router/router.d.ts | 4 + src/common/utils/use-move.ts | 184 ++++++++++++++++++ src/components/a-dialog/ADialog.vue | 101 ++++++++++ src/components/page/FormPage.vue | 1 + src/components/page/Page.vue | 2 - src/dts/components.d.ts | 2 - src/pages/a-frame/AFrame.vue | 6 +- .../gds/goods-category/GoodsCategoryForm.vue | 17 +- src/pages/gds/goods/Goods.vue | 2 +- src/pages/gds/goods/GoodsForm.vue | 58 +++--- 14 files changed, 370 insertions(+), 42 deletions(-) create mode 100644 src/common/utils/use-move.ts create mode 100644 src/components/a-dialog/ADialog.vue diff --git a/index.html b/index.html index 329d3c9..ecf1721 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@ margin: 0; padding: 0; border: 0; + user-select: none; } diff --git a/src/assets/stylus/index.styl b/src/assets/stylus/index.styl index 7b1b38c..cc78e9c 100644 --- a/src/assets/stylus/index.styl +++ b/src/assets/stylus/index.styl @@ -82,5 +82,34 @@ } +.el-modal-dialog { + height 100% !important + box-sizing border-box !important + .el-overlay-dialog { + height 100% !important + overflow: hidden !important + display: flex !important + justify-content: center !important + align-items: center !important + box-sizing border-box !important + } + + .el-dialog { + height 90% !important + margin 0 !important + box-sizing border-box !important + } + + .draggable-dialog > .el-dialog__header > .el-dialog__title { + cursor move !important + display block + width 100% + } + + .el-dialog__body { + height calc(100% - 88px) !important + box-sizing border-box !important + } +} diff --git a/src/common/app/app-page-store.ts b/src/common/app/app-page-store.ts index dd1624c..4da5280 100644 --- a/src/common/app/app-page-store.ts +++ b/src/common/app/app-page-store.ts @@ -19,7 +19,7 @@ export const useAppPageStore = defineStore('AppPage', () => { }))/* as Reactive */ const keepAliveInclude = computed(() => { - return pages.filter(it => it.keepAlive).map(it => it.routeName) + return pages.filter(it => it.keepAlive).map(it => Strings.pascalCase(it.routeName)) }) function open(ctx?: AppTypes.PageContext) { diff --git a/src/common/router/route-config.ts b/src/common/router/route-config.ts index 297a43a..3a2c911 100644 --- a/src/common/router/route-config.ts +++ b/src/common/router/route-config.ts @@ -1,5 +1,6 @@ import { SpecialPage } from '@/common/router/constants.ts' import type { RouteRecordRaw } from 'vue-router' +import Strings from '@/common/utils/strings.ts' // 导入 src/pages 目录下的所有 page.ts 文件 // K：文件路径，V：PageConfig 对象 @@ -13,6 +14,7 @@ const routeConfigs = Object.entries(configPath_routeConfig_map).map(([ configPat path = routePath, name = routePath.substring(routePath.lastIndexOf('/') + 1), title = name, + componentName = Strings.pascalCase(name), keepAlive = false, icon = '', component, @@ -25,6 +27,7 @@ const routeConfigs = Object.entries(configPath_routeConfig_map).map(([ configPat parent, path, name, + componentName, title, icon, keepAlive, diff --git a/src/common/router/router.d.ts b/src/common/router/router.d.ts index ca5defc..644e10c 100644 --- a/src/common/router/router.d.ts +++ b/src/common/router/router.d.ts @@ -46,6 +46,10 @@ declare global { * 页面标题 */ title?: string + /** + * 组件名称，默认：路由名称 + */ + componentName?: string /** * 是否缓存页面，默认：缓存 */ diff --git a/src/common/utils/use-move.ts b/src/common/utils/use-move.ts new file mode 100644 index 0000000..85ce55f --- /dev/null +++ b/src/common/utils/use-move.ts @@ -0,0 +1,184 @@ +export class MoveHandle { + public id: string + public container: { + el?: HTMLElement; + width: number; + height: number; + x: number; + y: number; + } + public widget: { + el?: HTMLElement; + width: number; + height: number; + x: number; + y: number; + } + public triggerArea?: HTMLElement + public startPoint: { + x: number; + y: number; + } + public offset: { + x: number; + y: number; + } + public dragging: boolean + + constructor(id: string, container?: HTMLElement, widget?: HTMLElement, triggerArea?: HTMLElement) { + this.id = id + this.container = {width: 0, height: 0, x: 0, y: 0} + this.widget = {width: 0, height: 0, x: 0, y: 0} + this.startPoint = {x: 0, y: 0} + this.offset = {x: 0, y: 0} + this.dragging = false + this.setContainer(container) + .setWidget(widget) + .setTriggerArea(triggerArea) + MoveHandles.set(this.id, this) + } + + setContainer(el?: HTMLElement) { + if (MoveHandleIns === this) return this + this.container.el = el + if (el != null) { + const containerRect = el.getBoundingClientRect() + this.container.width = containerRect.width + this.container.height = containerRect.height + this.container.x = containerRect.x + this.container.y = containerRect.y + } + return this + } + + setWidget(el?: HTMLElement) { + if (MoveHandleIns === this) return this + this.widget.el = el + if (el != null) { + const widgetRect = el.getBoundingClientRect() + this.widget.width = widgetRect.width + this.widget.height = widgetRect.height + this.widget.x = widgetRect.x + this.widget.y = widgetRect.y + } + return this + } + + setTriggerArea(el?: HTMLElement) { + if (MoveHandleIns === this) return this + this.triggerArea?.removeEventListener('mousedown', handlerMousedown) + el?.addEventListener('mousedown', handlerMousedown) + this.triggerArea = el + return this + } + + destroy() { + MoveHandles.delete(this.id) + this.disable() + this.setContainer() + .setWidget() + .setTriggerArea() + } + + enable() { + if (this.container.el == null + || this.widget.el == null + || this.triggerArea == null) { + return + } + MoveHandleIns = this + } + + disable() { + if (MoveHandleIns === this) MoveHandleIns = null + return this + } +} + +let MoveHandleIns: MoveHandle | null = null + +const MoveHandles: Map = new Map() + +function handlerMousedown(e: Event) { + if (MoveHandleIns == null + || MoveHandleIns.container.el == null + || MoveHandleIns.widget.el == null + ) return + const mouseEvent = e as MouseEvent + mouseEvent.preventDefault() + mouseEvent.stopPropagation() + + MoveHandleIns.dragging = true + MoveHandleIns.startPoint.x = mouseEvent.clientX + MoveHandleIns.startPoint.y = mouseEvent.clientY + + const transform = window.getComputedStyle(MoveHandleIns.widget.el).transform + let translateX = 0 + let translateY = 0 + + if (transform !== 'none') { + const matrix = new DOMMatrix(transform) + translateX = matrix.e + translateY = matrix.f + } else { + MoveHandleIns.widget.el.style.transform = 'translate(0, 0)' + } + + MoveHandleIns.offset.x = translateX + MoveHandleIns.offset.y = translateY + + const containerRect = MoveHandleIns.container.el.getBoundingClientRect() + const widgetRect = MoveHandleIns.widget.el.getBoundingClientRect() + MoveHandleIns.container.width = containerRect.width + MoveHandleIns.container.height = containerRect.height + MoveHandleIns.container.x = containerRect.x + MoveHandleIns.container.y = containerRect.y + + MoveHandleIns.widget.width = widgetRect.width + MoveHandleIns.widget.height = widgetRect.height + MoveHandleIns.widget.x = widgetRect.x + MoveHandleIns.widget.y = widgetRect.y + document.addEventListener('mouseup', handlerMouseup) + document.addEventListener('mousemove', handlerMove) +} + +function handlerMove(e: Event) { + if (MoveHandleIns == null + || !MoveHandleIns.dragging + || MoveHandleIns.widget.el == null + ) return + const mouseEvent = e as MouseEvent + + let dx = mouseEvent.clientX - MoveHandleIns.startPoint.x + let dy = mouseEvent.clientY - MoveHandleIns.startPoint.y + // 左右边界 + if (dx < 0) { + const min_dx = MoveHandleIns.container.x - MoveHandleIns.widget.x + dx = Math.max(dx, min_dx) + } else { + const max_dx = (MoveHandleIns.container.x + MoveHandleIns.container.width) - (MoveHandleIns.widget.x + MoveHandleIns.widget.width) + dx = Math.min(dx, max_dx) + } + // 上下边界 + if (dy < 0) { + const min_dy = MoveHandleIns.container.y - MoveHandleIns.widget.y + dy = Math.max(dy, min_dy) + } else { + const max_dy = (MoveHandleIns.container.y + MoveHandleIns.container.height) - (MoveHandleIns.widget.y + MoveHandleIns.widget.height) + dy = Math.min(dy, max_dy) + } + let newOffsetX = MoveHandleIns.offset.x + dx + let newOffsetY = MoveHandleIns.offset.y + dy + MoveHandleIns.widget.el.style.transform = `translate(${newOffsetX}px, ${newOffsetY}px)` +} + +function handlerMouseup() { + if (MoveHandleIns == null) return + MoveHandleIns.dragging = false + document.removeEventListener('mousemove', handlerMove) + document.removeEventListener('mouseup', handlerMouseup) +} + +export default function (id: string, container?: HTMLElement, widget?: HTMLElement, triggerArea?: HTMLElement) { + return MoveHandles.get(id) ?? new MoveHandle(id, container, widget, triggerArea) +} diff --git a/src/components/a-dialog/ADialog.vue b/src/components/a-dialog/ADialog.vue new file mode 100644 index 0000000..43dfea4 --- /dev/null +++ b/src/components/a-dialog/ADialog.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/src/components/page/FormPage.vue b/src/components/page/FormPage.vue index 984ffae..8873ce0 100644 --- a/src/components/page/FormPage.vue +++ b/src/components/page/FormPage.vue @@ -544,6 +544,7 @@ onMounted(doSearch) } } } + .pagination { justify-content center diff --git a/src/components/page/Page.vue b/src/components/page/Page.vue index 267389a..dc19a7d 100644 --- a/src/components/page/Page.vue +++ b/src/components/page/Page.vue @@ -17,8 +17,6 @@ contain: layout paint; transform: translateZ(0); box-sizing border-box - //box-shadow: inset rgba(30, 35, 43, 0.16) 0px 0 10px 1px; - //background-color: white; display flex flex-direction column gap 10px diff --git a/src/dts/components.d.ts b/src/dts/components.d.ts index 7114cd6..0f866c9 100644 --- a/src/dts/components.d.ts +++ b/src/dts/components.d.ts @@ -16,7 +16,6 @@ declare module 'vue' { ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] - ElCard: typeof import('element-plus/es')['ElCard'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] @@ -75,7 +74,6 @@ declare global { const ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] const ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] const ElButton: typeof import('element-plus/es')['ElButton'] - const ElCard: typeof import('element-plus/es')['ElCard'] const ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] const ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] const ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] diff --git a/src/pages/a-frame/AFrame.vue b/src/pages/a-frame/AFrame.vue index 78fcae2..e657b6d 100644 --- a/src/pages/a-frame/AFrame.vue +++ b/src/pages/a-frame/AFrame.vue @@ -31,7 +31,7 @@ onUnmounted(() => {
- {{ item }} + {{ item }}
@@ -51,7 +51,9 @@ onUnmounted(() => { - + + + diff --git a/src/pages/gds/goods-category/GoodsCategoryForm.vue b/src/pages/gds/goods-category/GoodsCategoryForm.vue index ba62a43..9cfc177 100644 --- a/src/pages/gds/goods-category/GoodsCategoryForm.vue +++ b/src/pages/gds/goods-category/GoodsCategoryForm.vue @@ -1,5 +1,10 @@ - +