style: change css

Author: ulleo

frontend/src/components/layout/index.vue

@@ -75,14 +75,16 @@
             <el-dropdown-menu>
               <el-dropdown-item @click="switchLayout">Switch Layout</el-dropdown-item>
               <el-dropdown-item @click="logout">Logout</el-dropdown-item>
-              <el-dropdown-item><language-selector /></el-dropdown-item>
+              <el-dropdown-item>
+                <language-selector/>
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
       </div>
     </div>
 
-    <div class="main-content" :class="{'main-conntent-withbar': topLayout}">
+    <div class="main-content" :class="{'main-content-with-bar': topLayout}">
       <div class="header-container" v-if="!topLayout">
         <div class="header">
           <h1>{{ currentPageTitle }}</h1>
@@ -92,7 +94,7 @@
                 <el-icon>
                   <iconsystem/>
                 </el-icon>
-                 <span>{{ t('common.system_manage') }}</span>
+                <span>{{ t('common.system_manage') }}</span>
               </div>
             </el-tooltip>
 
@@ -105,8 +107,10 @@
                 <el-dropdown-menu>
                   <el-dropdown-item @click="switchLayout">Switch Layout</el-dropdown-item>
                   <el-dropdown-item @click="logout">Logout</el-dropdown-item>
-                  <el-dropdown-item><language-selector /></el-dropdown-item>
-                  
+                  <el-dropdown-item>
+                    <language-selector/>
+                  </el-dropdown-item>
+
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -155,10 +159,10 @@ import icon_user from '@/assets/svg/icon_user.svg'
 import icon_ai from '@/assets/svg/icon_ai.svg'
 import {ArrowLeftBold} from '@element-plus/icons-vue'
 import {useCache} from '@/utils/useCache'
-import { useI18n } from 'vue-i18n'
+import {useI18n} from 'vue-i18n'
 import LanguageSelector from '@/components/Language-selector/index.vue'
 
-const { t } = useI18n()
+const {t} = useI18n()
 const {wsCache} = useCache()
 const topLayout = ref(false)
 const router = useRouter()
@@ -284,6 +288,7 @@ onMounted(() => {
       flex: 1;
       border-right: none;
       border-bottom: none;
+
       &:not(.ed-menu--vertical) {
         margin-left: 32px
       }
@@ -293,9 +298,11 @@ onMounted(() => {
   .main-menu-sidebar {
     width: 240px;
     background: #fff;
-    border-right: 1px solid #e6e6e6;
+    box-shadow: 0 1px 3px var(--ed-menu-border-color);
     display: flex;
     flex-direction: column;
+    z-index: 2;
+
     .ed-menu--vertical {
       padding: 0 16px;
     }
@@ -307,9 +314,9 @@ onMounted(() => {
     font-size: 24px;
     font-weight: bold;
     color: var(--el-color-primary);
-    text-align: left;
     justify-content: space-between;
-    border-bottom: 1px solid var(--el-menu-border-color);
+    box-shadow: 0 1px 3px var(--ed-menu-border-color);
+    z-index: 2;
     text-align: center;
 
     .logo {
@@ -419,7 +426,7 @@ onMounted(() => {
     background-color: #f5f7fa;
     box-sizing: border-box;
 
-    &:not(.main-conntent-withba) {
+    &:not(.main-content-with-bar) {
       padding: 16px 24px;
     }
 
@@ -518,7 +525,7 @@ onMounted(() => {
     }
   }
 
-  .main-conntent-withbar {
+  .main-content-with-bar {
     height: 0;
     flex: 1;
     width: 100%;

frontend/src/views/chat/ChatAnswer.vue

@@ -108,8 +108,10 @@ function onTypeChange(type: string) {
 <template>
   <el-container v-if="message">
     <el-header style="display: flex; align-items: center; flex-direction: row;">
-      <div style="flex:1" v-if="message.isTyping">Thinking ...</div>
-      <div style="flex:1" v-if="chartObject.title && !message.isTyping">{{ chartObject.title }}</div>
+      <div style="flex:1">
+        <div v-if="message.isTyping">Thinking ...</div>
+        <div v-if="chartObject.title && !message.isTyping">{{ chartObject.title }}</div>
+      </div>
       <el-tabs v-model="settings.type" class="type-tabs" @tab-click="handleClick" tab-position="top">
         <el-tab-pane label="Chart" name="chart">
           <template #label>

frontend/src/views/chat/index.vue

@@ -85,8 +85,9 @@ import {Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord, questionApi,} fro
 import ChatList from "./ChatList.vue";
 import ChatRow from "./ChatRow.vue";
 import ChatAnswer from "./ChatAnswer.vue";
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
+import {useI18n} from 'vue-i18n'
+
+const {t} = useI18n()
 
 const inputMessage = ref("");
 
@@ -374,9 +375,10 @@ const handleCtrlEnter = (e: KeyboardEvent) => {
   height: 100%;
 
   .chat-container-left {
-    --el-aside-width: 260px;
+    --ed-aside-width: 260px;
 
-    border-right: solid 1px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 3px #d7d7d7;
+    z-index: 1;
 
     background: var(--ed-fill-color-blank);
 

frontend/src/views/dashboard/preview/SQPreviewShow.vue

@@ -118,7 +118,6 @@ defineExpose({
         class="resource-area"
         :class="{ 'close-side': !slideShow, retract: !sideTreeStatus }"
         ref="node"
-        style="width: 280px"
     >
       <resource-tree
           ref="resourceTreeRef"
@@ -134,7 +133,7 @@ defineExpose({
         v-loading="!dataInitState"
     >
       <template v-if="previewShowFlag">
-        <SQPreviewHead  @reload="reload"  />
+        <SQPreviewHead @reload="reload"/>
         <div
             ref="previewCanvasContainer"
             class="content"
@@ -182,11 +181,15 @@ defineExpose({
   position: relative;
 
   .resource-area {
+    --ed-aside-width: 260px;
+
     position: relative;
     height: 100%;
-    width: 279px;
     padding: 0;
-    border-right: 1px solid #d7d7d7;
+
+    box-shadow: 0 0 3px #d7d7d7;
+    z-index: 1;
+
     overflow: visible;
 
     &.retract {