fix(Embedded Management, Data Source): Embedded Management, Data Source More styles are incorrect

Author: dataeaseShu

frontend/src/components/layout/Menu.vue

@@ -86,7 +86,7 @@ const routerList = computed(() => {
     }
   }
 
-  .ed-sub-menu .ed-sub-menu__title:hover {
+  .ed-sub-menu .ed-sub-menu__title {
     border-radius: 6px;
   }
 
@@ -100,4 +100,24 @@ const routerList = computed(() => {
     margin-right: 8px;
   }
 }
+.ed-popper.is-light:has(.ed-menu--popup) {
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  background: #eff1f0;
+  overflow: hidden;
+}
+.ed-menu--popup {
+  padding: 8px;
+  background: #eff1f0;
+
+  .ed-menu-item {
+    padding: 9px 16px;
+    height: 40px !important;
+    border-radius: 6px;
+    &.is-active {
+      background-color: #fff !important;
+    }
+  }
+}
 </style>

frontend/src/components/layout/Person.vue

@@ -47,7 +47,9 @@ const languageList = [
     value: 'zh-CN',
   }, */,
 ]
+const popoverRef = ref()
 const toSystem = () => {
+  popoverRef.value.hide()
   router.push('/system')
 }
 
@@ -86,7 +88,12 @@ const logout = () => {
 </script>
 
 <template>
-  <el-popover trigger="click" popper-class="system-person" :placement="collapse ? 'right' : 'top'">
+  <el-popover
+    ref="popoverRef"
+    trigger="click"
+    popper-class="system-person"
+    :placement="collapse ? 'right' : 'top-start'"
+  >
     <template #reference>
       <button class="person" :title="name" :class="collapse && 'collapse'">
         <el-icon size="32">
@@ -155,6 +162,7 @@ const logout = () => {
           </el-icon>
           <div class="datasource-name">{{ $t('common.help') }}</div>
         </div>
+        <div style="height: 4px; width: 100%"></div>
         <div class="popover-item mr4" @click="logout">
           <el-icon size="16">
             <icon_logout_outlined></icon_logout_outlined>
@@ -245,6 +253,7 @@ const logout = () => {
   box-shadow: 0px 4px 8px 0px #1f23291a;
   border: 1px solid #dee0e3;
   position: relative;
+  border-radius: 6px;
 
   &::after {
     content: '';
@@ -314,7 +323,7 @@ const logout = () => {
       }
 
       &.mr4 {
-        margin: 4px 0;
+        margin: 4px;
       }
 
       .right {

frontend/src/views/chat/ChatList.vue

@@ -221,7 +221,12 @@ const handleConfirmPassword = () => {
             <span class="title">{{ chat.brief ?? 'Untitled' }}</span>
             <el-popover :teleported="false" popper-class="popover-card" placement="bottom">
               <template #reference>
-                <el-icon class="more" size="16" style="margin-left: auto" @click.stop>
+                <el-icon
+                  class="more"
+                  size="16"
+                  style="margin-left: auto; color: #646a73"
+                  @click.stop
+                >
                   <icon_more_outlined></icon_more_outlined>
                 </el-icon>
               </template>

frontend/src/views/ds/Card.vue

@@ -115,7 +115,7 @@ const onClickOutside = () => {
           trigger="click"
           :teleported="false"
           popper-class="popover-card"
-          placement="bottom"
+          placement="bottom-end"
         >
           <div class="content">
             <div class="item" @click.stop="handleEdit">
@@ -193,12 +193,7 @@ const onClickOutside = () => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 28px;
-
-    .ed-button {
-      height: 28px;
-      min-width: 78px;
-    }
+    height: 32px;
 
     .form-rate {
       display: flex;
@@ -220,23 +215,31 @@ const onClickOutside = () => {
       .more {
         position: relative;
         cursor: pointer;
+        margin-left: 4px;
+        width: 32px;
+        height: 32px;
+
+        svg {
+          position: relative;
+          z-index: 10;
+        }
 
         &::after {
           content: '';
-          background-color: #1f23291a;
           position: absolute;
           border-radius: 6px;
-          width: 24px;
-          height: 24px;
+          width: 32px;
+          height: 32px;
           transform: translate(-50%, -50%);
           top: 50%;
           left: 50%;
-          display: none;
+          background: #fff;
+          border: 1px solid #d9dcdf;
         }
 
         &:hover {
           &::after {
-            display: block;
+            background-color: #f5f6f7;
           }
         }
       }

frontend/src/views/system/appearance/Person.vue

@@ -196,7 +196,7 @@ const account = computed(() => userStore.getAccount)
       }
 
       &.mr4 {
-        margin: 4px 0;
+        margin: 4px;
       }
 
       .right {

frontend/src/views/system/embedded/Card.vue

@@ -179,7 +179,7 @@ const onClickOutside = () => {
 
       &::after {
         content: '';
-        background: #f5f6f7;
+        background: #fff;
         position: absolute;
         border-radius: 6px;
         width: 30px;
@@ -189,12 +189,11 @@ const onClickOutside = () => {
         left: 50%;
         border: 1px solid #d9dcdf;
         z-index: 1;
-        display: none;
       }
 
       &:hover {
         &::after {
-          display: block;
+          background: #f5f6f7;
         }
       }
     }