feat(dept): [dept] Optimize style

Author: Youyou-smiles

examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue

@@ -6,6 +6,7 @@
       @update:approvalPerson="person = $event"
       :fetch-hrapprover="getFetchHrapprover"
       :category="category"
+      title="选择权签人"
     ></tiny-hrapprover>
   </div>
 </template>

examples/sites/demos/pc/app/hrapprover/custom-service.vue

@@ -6,6 +6,7 @@
       @update:approvalPerson="person = $event"
       :fetch-hrapprover="getFetchHrapprover"
       :category="category"
+      title="选择权签人"
     ></tiny-hrapprover>
   </div>
 </template>

packages/theme/src/base/reset.less

@@ -177,7 +177,23 @@
   }
 }
 
-.tiny-popper,
+.tiny-popper {
+  &[x-placement^='top'] {
+    margin-bottom: 4px;
+  }
+  &[x-placement^='bottom'] {
+    margin-top: 4px;
+  }
+  &[x-placement^='right'] {
+    margin-left: 4px;
+  }
+  &[x-placement^='left'] {
+    margin-right: 4px;
+  }
+}
+
+
+.tiny-popconfirm-popover,
 .tiny-tooltip__popper {
   .popper__arrow {
     position: absolute;

packages/theme/src/dept/index.less

@@ -22,22 +22,19 @@
   .inject-Dept-vars();
 
   &__search {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
   &__text,
   &__label {
+    width: 80px;
     font-size: var(--tv-Dept-label-font-size);
     color: var(--tv-Dept-label-text-color);
     font-weight: var(--tv-Dept-label-font-weight);
+    text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
-
-  &__label {
-    text-align: right;
-
     &.is-selected {
       text-align: left;
       margin-bottom: 4px;
@@ -53,7 +50,7 @@
   }
 
   &__item {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
   &__search &__label,

packages/theme/src/dept/vars.less

@@ -12,8 +12,8 @@
 
 .inject-Dept-vars() {
   --tv-Dept-label-font-size: var(--tv-font-size-md);
-  --tv-Dept-label-text-color: var(--tv-color-text);
-  --tv-Dept-label-font-weight: var(--tv-font-weight-bold);
+  --tv-Dept-label-text-color: var(--tv-color-text-secondary);
+  --tv-Dept-label-font-weight: var(--tv-font-weight-regular);
   --tv-Dept-selected-info-text-color: var(--tv-color-text);
   --tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
   --tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);

packages/theme/src/espace/index.less

@@ -22,7 +22,7 @@
   .item-talk,
   .item-call,
   .item-email {
-    margin: 0 8px 0 0;
+    margin: 0 24px 0 0;
     line-height: 1;
 
     .@{svg-prefix-cls} {

packages/theme/src/roles/index.less

@@ -24,7 +24,7 @@
 
   &__selector {
     &.@{css-prefix}popover.@{css-prefix}popper {
-      padding: 0;
+      padding: 8px 0;
     }
   }
 
@@ -57,11 +57,5 @@
       background: var(--tv-Roles-poplist-item-hover-bg-color);
     }
 
-    &.is-selected {
-      &,
-      &:hover {
-        background: var(--tv-Roles-poplist-item-selected-bg-color);
-      }
-    }
   }
 }

packages/theme/src/roles/vars.less

@@ -19,6 +19,4 @@
   --tv-Roles-poplist-item-font-size: var(--tv-font-size-md);
   // 下拉面板选项悬浮背景色
   --tv-Roles-poplist-item-hover-bg-color: var(--tv-color-bg-hover);
-  // 下拉面板选项选中色
-  --tv-Roles-poplist-item-selected-bg-color: var(--tv-color-bg-active);
 }

packages/vue/src/dept/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dept",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/dept/src/pc.vue

@@ -18,6 +18,7 @@
       @update:visible="state.open = $event"
       :close-on-click-modal="false"
       width="550px"
+      top="10vh"
       append-to-body
       @close="closeDialog"
       :title="title"