下拉选样式

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 {

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
+  }
+}

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 {

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
 }

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;

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
+  }
+}

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(() => {
 
 <template>
   <ElDialog
-    v-if="enableRender"
     :close-on-click-modal="false"
     :modal="false"
     :modal-class="modalClass"
@@ -91,7 +95,6 @@ onUnmounted(() => {
     :title="title"
     class="draggable-dialog"
     destroy-on-close
-    append-to="#dialog-anchor"
     :width="width" @close="closed"
     @closed="closedHandler"
     @opened="openedHandler"

src/components/page/Page.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div id="dialog-anchor" class="page-wrapper">
+  <div class="page-wrapper">
     <slot/>
   </div>
 </template>

src/pages/gds/goods/Goods.vue

@@ -20,7 +20,7 @@
       </ElFormItem>
     </template>
     <template #simpleSearchFormItem="{ searchForm }">
-      <ElFormItem label="产品编码">
+      <ElFormItem>
         <ElInput v-model="searchForm.sn" placeholder="产品编码"/>
       </ElFormItem>
       <ElFormItem label="产品名称">

src/pages/gds/goods/GoodsForm.vue

@@ -111,7 +111,7 @@ defineExpose({
   "picture ." \
   "picture .";
 
-  .el-form-item {
+  :deep(.el-form-item) {
     &:first-child {
       align-items: start;
       grid-area: picture