fix(chat): The left projection is blocked, and the content card order is above the left menu

Author: dataeaseShu

frontend/src/components/drawer-filter/src/DrawerEnumFilter.vue

@@ -84,16 +84,16 @@ useEmitt({
       padding: 1px 6px;
       background: var(--deTextPrimary5, #f5f6f7);
       color: var(--deTextPrimary, #1f2329);
-      border-radius: 2px;
+      border-radius: 4px;
       cursor: pointer;
       display: inline-block;
       margin-bottom: 12px;
     }
 
     .active,
     .more:hover {
-      background: var(--primary10, var(--ed-color-primary-1a, #1cba9033));
-      color: var(--primaryselect, #0c296e);
+      background: var(--ed-color-primary-1a, #1cba9033);
+      color: #0b4a3a;
     }
 
     .more {

frontend/src/components/drawer-filter/src/DrawerFilter.vue

@@ -76,7 +76,6 @@ useEmitt({
 
   > :nth-child(1) {
     color: var(--deTextSecondary, #1f2329);
-    font-family: var(--de-custom_font, 'PingFang');
     font-style: normal;
     font-weight: 400;
     font-size: 14px;

frontend/src/components/layout/LayoutDsl.vue

@@ -62,7 +62,7 @@ const showSysmenu = computed(() => {
         </div>
       </div>
     </div>
-    <div class="right-main">
+    <div class="right-main" :class="collapse && 'right-side-collapse'">
       <div class="content">
         <router-view />
       </div>
@@ -91,6 +91,7 @@ const showSysmenu = computed(() => {
     height: 100%;
     padding: 16px;
     position: relative;
+    min-width: 240px;
 
     .bottom {
       position: absolute;
@@ -137,8 +138,9 @@ const showSysmenu = computed(() => {
 
     &.left-side-collapse {
       width: 64px;
+      min-width: 64px;
       padding: 16px 12px;
-      animation: rotate 1s ease-in-out;
+      // animation: rotate 0.1s ease-in-out;
 
       .ed-menu--collapse {
         --ed-menu-icon-width: 32px;
@@ -168,18 +170,22 @@ const showSysmenu = computed(() => {
   }
 
   .right-main {
-    flex: 1;
+    width: calc(100% - 240px);
     padding: 8px 8px 8px 0;
     max-height: 100vh;
-    overflow-x: auto;
+
+    &.right-side-collapse {
+      width: calc(100% - 64px);
+    }
 
     .content {
       width: 100%;
       height: 100%;
       padding: 16px 24px;
-      box-shadow: 0px 2px 4px 0px #1f23291f;
       background-color: #fff;
       border-radius: 12px;
+      box-shadow: 0px 2px 4px 0px #1f23291f;
+      overflow-x: auto;
 
       &:has(.no-padding) {
         padding: 0;

frontend/src/style.less

@@ -287,3 +287,33 @@ strong {
 .ed-button.is-secondary.is-disabled {
   border-color: #d9dcdf !important;
 }
+
+.ed-drawer.btt {
+  .ed-drawer__body {
+    padding-bottom: 64px;
+  }
+}
+
+.ed-tag.ed-tag--info {
+  --ed-tag-bg-color: #1f23291a !important;
+  --ed-tag-text-color: #1f2329 !important;
+  --ed-tag-font-size: 14px;
+}
+
+.hover-icon_with_bg.ed-icon {
+  cursor: pointer;
+  position: relative;
+  &:hover {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: #1f23291a;
+      width: 24px;
+      height: 24px;
+      border-radius: 6px;
+    }
+  }
+}

frontend/src/views/chat/index.vue

@@ -23,6 +23,7 @@
       <el-popover
         :width="280"
         placement="bottom-start"
+        popper-class="popover-chat_history"
         :popper-style="{ ...defaultFloatPopoverStyle }"
       >
         <template #reference>
@@ -1142,4 +1143,10 @@ onMounted(() => {
     padding: 0;
   }
 }
+
+.popover-chat_history {
+  box-shadow: 0px 4px 8px 0px #1f23291a !important;
+  border-radius: 12px !important;
+  overflow: hidden;
+}
 </style>

frontend/src/views/dashboard/common/ResourceTree.vue

@@ -322,19 +322,16 @@ defineExpose({
     <div class="tree-header">
       <div class="icon-methods">
         <span class="title">{{ t('dashboard.dashboard') }} </span>
-        <div class="flex-align-center">
-          <el-tooltip :content="t('dashboard.new_dashboard')" placement="top" effect="dark">
-            <el-icon
-              class="custom-icon btn"
-              style="margin-right: 10px"
-              @click="addOperation({ opt: 'newLeaf', type: 'dashboard' })"
-            >
-              <Icon name="dv-new-folder">
-                <ope_add class="svg-icon" />
-              </Icon>
-            </el-icon>
-          </el-tooltip>
-        </div>
+        <el-tooltip :content="t('dashboard.new_dashboard')" placement="top" effect="dark">
+          <el-icon
+            class="custom-icon btn hover-icon_with_bg"
+            @click="addOperation({ opt: 'newLeaf', type: 'dashboard' })"
+          >
+            <Icon name="dv-new-folder">
+              <ope_add class="svg-icon" />
+            </Icon>
+          </el-icon>
+        </el-tooltip>
       </div>
       <el-input
         v-model="filterText"
@@ -503,7 +500,7 @@ defineExpose({
   .icon-methods {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: space-between;
     font-size: 20px;
     font-weight: 500;
     color: var(--TextPrimary, #1f2329);

frontend/src/views/ds/TableList.vue

@@ -297,7 +297,6 @@ onMounted(() => {
   }
   .title {
     color: #fff;
-    font-family: var(--de-custom_font, 'PingFang');
     font-size: 16px;
     font-weight: 400;
     display: flex;

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

@@ -89,7 +89,7 @@ const handlePublic = () => {
   padding: 16px;
   border-radius: 12px;
   cursor: pointer;
-  margin: 0 16px 16px 0;
+  margin: 16px 16px 0 0;
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;
   }

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

@@ -776,9 +776,10 @@ const saveHandler = () => {
             </template>
             <div class="card-ds_content">
               <DsCard
-                v-for="ele in dsListOptions"
+                v-for="(ele, index) in dsListOptions"
                 :id="ele.id"
                 :key="ele.id"
+                :class="[0, 1].includes(index) && 'no-margin_top'"
                 :name="ele.name"
                 :type="ele.type"
                 :type-name="ele.type_name"
@@ -1036,20 +1037,31 @@ const saveHandler = () => {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    padding-bottom: 50px;
 
     .card {
       width: 392px;
       &:nth-child(even) {
         margin-right: 0;
       }
     }
+
+    .no-margin_top {
+      margin-top: 0;
+    }
   }
 
   .drawer-content {
     width: 800px;
     margin: 0 auto;
-    height: calc(100% - 20px);
+    height: 100%;
+    padding-bottom: 24px;
+    overflow-y: auto;
+
+    .ed-form-item {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .certificate-table_form {

frontend/src/views/system/model/ModelForm.vue

@@ -459,6 +459,7 @@ defineExpose({
     padding-top: 24px;
     overflow-y: auto;
     height: calc(100% - 120px);
+    padding-bottom: 24px;
 
     .ed-form-item--default {
       margin-bottom: 16px;