From 42ef42f8041a073a3999786d17e3ba1d5ace41b6 Mon Sep 17 00:00:00 2001 From: lzq <2495532633@qq.com> Date: Thu, 22 Jan 2026 18:14:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E6=8B=89=E9=80=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/stylus/button.styl | 6 +++ src/assets/stylus/dialog.styl | 40 +++++++++++++++ .../{dropdownmenu.styl => dropdown-menu.styl} | 2 +- src/assets/stylus/index.styl | 51 ++----------------- src/assets/stylus/root.styl | 1 + src/assets/stylus/select-dropdown.styl | 7 +++ src/components/a-dialog/ADialog.vue | 7 ++- src/components/page/Page.vue | 2 +- src/pages/gds/goods/Goods.vue | 2 +- src/pages/gds/goods/GoodsForm.vue | 2 +- 10 files changed, 66 insertions(+), 54 deletions(-) create mode 100644 src/assets/stylus/dialog.styl rename src/assets/stylus/{dropdownmenu.styl => dropdown-menu.styl} (93%) create mode 100644 src/assets/stylus/select-dropdown.styl diff --git a/src/assets/stylus/button.styl b/src/assets/stylus/button.styl index ff9ad50..b26a9db 100644 --- a/src/assets/stylus/button.styl +++ b/src/assets/stylus/button.styl @@ -6,6 +6,12 @@ --el-button-hover-text-color: oklch(72% .19 231.6) !important; --el-button-hover-bg-color: oklch(0.96 0.03 224.26) !important; --el-button-hover-border-color: oklch(0.96 0.03 224.26) !important;*/ + height: var(--el-component-custom-height) !important; + +} + +.el-button--default.is-circle { + width: var(--el-component-custom-height) !important; } .el-button--default { diff --git a/src/assets/stylus/dialog.styl b/src/assets/stylus/dialog.styl new file mode 100644 index 0000000..9062376 --- /dev/null +++ b/src/assets/stylus/dialog.styl @@ -0,0 +1,40 @@ +.el-dialog { + border var(--border-base) !important +} + +.el-dialog__body { + padding: 25px 0 !important; + position: relative; // 为了兼容 el-pagination 样式，需要设置 relative，不然会影响 el-pagination 的样式，比如 el-pagination__jump--small 会被影响，导致 el-pagination__jump--small 按钮无法点击，详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275; +} + + +.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/assets/stylus/dropdownmenu.styl b/src/assets/stylus/dropdown-menu.styl similarity index 93% rename from src/assets/stylus/dropdownmenu.styl rename to src/assets/stylus/dropdown-menu.styl index 83b07ee..197cbd2 100644 --- a/src/assets/stylus/dropdownmenu.styl +++ b/src/assets/stylus/dropdown-menu.styl @@ -1,5 +1,5 @@ .el-dropdown-menu { - padding 5px !important + padding 6px !important box-sizing border-box .el-dropdown-menu__item { diff --git a/src/assets/stylus/index.styl b/src/assets/stylus/index.styl index d4ed573..69cff4a 100644 --- a/src/assets/stylus/index.styl +++ b/src/assets/stylus/index.styl @@ -1,21 +1,13 @@ @import "root.styl" @import "button.styl" @import "menu.styl" -@import "dropdownmenu.styl" +@import "dropdown-menu.styl" +@import "select-dropdown.styl" +@import "dialog.styl" // 优化 Element Plus 组件库默认样式 // -------------------------------- 修改 el-size=default 组件默认高度 start -------------------------------- // 修改 el-button 高度 -.el-button--default { - height: var(--el-component-custom-height) !important; -} - - - -// circle 按钮宽度优化 -.el-button--default.is-circle { - width: var(--el-component-custom-height) !important; -} // 修改 el-select 高度 .el-select--default { @@ -37,43 +29,6 @@ // -------------------------------- 修改 el-size=default 组件默认高度 end -------------------------------- -.el-dialog__body { - padding: 25px 0 !important; - position: relative; // 为了兼容 el-pagination 样式，需要设置 relative，不然会影响 el-pagination 的样式，比如 el-pagination__jump--small 会被影响，导致 el-pagination__jump--small 按钮无法点击，详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275; -} - - -.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 - } -} - .el-input-number { width 100% !important } diff --git a/src/assets/stylus/root.styl b/src/assets/stylus/root.styl index bcc432c..6053e02 100644 --- a/src/assets/stylus/root.styl +++ b/src/assets/stylus/root.styl @@ -15,6 +15,7 @@ body { --el-messagebox-border-radius: 8px !important; --el-border-color-light #EAEBF1 !important; + --border-base: 1px solid var(--el-border-color-light) !important; .region .el-radio-button__original-radio:checked + .el-radio-button__inner { color: var(--theme-color) !important; diff --git a/src/assets/stylus/select-dropdown.styl b/src/assets/stylus/select-dropdown.styl new file mode 100644 index 0000000..95a3b42 --- /dev/null +++ b/src/assets/stylus/select-dropdown.styl @@ -0,0 +1,7 @@ +.el-select-dropdown__list { + padding 6px !important + + .el-select-dropdown__item { + border-radius var(--el-border-radius-base) !important + } +} diff --git a/src/components/a-dialog/ADialog.vue b/src/components/a-dialog/ADialog.vue index c2f63ed..4897882 100644 --- a/src/components/a-dialog/ADialog.vue +++ b/src/components/a-dialog/ADialog.vue @@ -49,6 +49,7 @@ const enableRender = ref(false) let moveHandle = useMove(id) function openedHandler() { + console.log('ADialog opened', id) const modal = document.querySelector('.' + modalClass) let container = modal?.querySelector('.el-overlay-dialog') as HTMLElement let dialog = container?.querySelector('.draggable-dialog') as HTMLElement @@ -62,6 +63,7 @@ function openedHandler() { } function closedHandler() { + console.log('ADialog closed', id) moveHandle .disable() .setContainer() @@ -70,12 +72,15 @@ function closedHandler() { } onMounted(() => { + console.log('ADialog mounted', id) enableRender.value = true }) onActivated(() => { + console.log('ADialog activated', id) moveHandle.enable() }) onUnmounted(() => { + console.log('ADialog unmounted', id) moveHandle.destroy() }) @@ -83,7 +88,6 @@ onUnmounted(() => {