diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index dcc89c72747e92977a0357bc49359eed57634d13..daa6ecd2fe61bfb8bc6b9b1c949194a6968fd333 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -2,6 +2,7 @@ body[theme='dark'] {
   --o-main-bg-color: #131415;
   --o-bg-image: url('../../assets/svgs/dark_background.svg');
   --no-work-flow: url('../../assets/images/dark_no_flow.png');
+  --o-question-color:#d3dce9;
   --o-button-color: #576372;
   --o-button-border-color: #576372;
   --o-button-disable-color: #626d7c;
@@ -59,7 +60,7 @@ body[theme='dark'] {
     rgba(28, 57, 81, 0.929) 98.202%
   );
   --o-api-description: rgb(211, 220, 233);
-  --el-drawer-padding-primary: 24px;
+  --el-drawer-padding-primary: 24px !important;
   // 这里是不同种类的debug图标
   --flow-debug-default: url('../../assets/svgs/dark_debug.svg');
   --flow-debug-hover: url('../../assets/svgs/dark_debug_hover.svg');
@@ -69,7 +70,7 @@ body[theme='dark'] {
   --expand-fold-default: url('../../assets/svgs/dark_expand_fold.svg');
   --expand-fold-hover: url('../../assets/svgs/dark_expand_fold_hover.svg');
   --expand-fold-active: url('../../assets/svgs/dark_expand_fold_active.svg');
-  --o-scrollbar-thumb: #536372;
+  --o-scrollbar-thumb: #d3dce9;
   --o-apiBox-bg: rgb(253, 254, 255);
 }
 
@@ -77,6 +78,7 @@ body[theme='light'] {
   --o-main-bg-color: #f1f8ff;
   --o-bg-image: url('../../assets/svgs/light_background.webp');
   --no-work-flow: url('../../assets/images/light_no_flow.png');
+  --o-question-color:#4e5865;
   --o-button-color: #c3cedf;
   --o-button-border-color: #d3dce9;
   --o-button-disable-color: #bfc7d7;
@@ -140,6 +142,7 @@ body[theme='light'] {
   --expand-fold-active: url('../../assets/svgs/light_expand_fold_active.svg');
   --o-scrollbar-thumb: #c3cedf;
   --o-apiBox-bg: rgb(253, 254, 255);
+  --el-drawer-padding-primary: 24px !important;
 }
 
 body {
@@ -149,7 +152,6 @@ body {
     background-color: #6395fd !important;
     font-weight: normal !important;
   }
-  --el-drawer-padding-primary: 24px;
   // 悬浮优先级高于选中
   .el-select-dropdown__item:hover {
     background-color: #7aa5ff !important;
diff --git a/src/components/Upload/index.vue b/src/components/Upload/index.vue
index 189c8881779589848b489a9cbfb926bbe32c1381..49e8e44ba220d549779d9e43985a0f92a9aab0b3 100644
--- a/src/components/Upload/index.vue
+++ b/src/components/Upload/index.vue
@@ -325,14 +325,14 @@ onMounted(() => {
         :name="item.name"
       >
         <template #title>
-          <span>{{ item.name }}</span>
-          <!-- 这里接口返回的需要限制最大位数 -->
           <el-icon
             class="el-collapse-item__arrow"
             :class="{ 'is-active': activeServiceNameList.includes(item.name) }"
           >
             <IconCaretRight></IconCaretRight>
           </el-icon>
+          <span class="el-collapse-item__title">{{ item.name }}</span>
+          <!-- 这里接口返回的需要限制最大位数 -->
         </template>
         <div class="o-collapse-content">
           <div class="itemTitle">
@@ -371,6 +371,11 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.el-collapse-item__title{
+  display: block;
+  position: relative;
+  left: 4px;
+}
 .code-container {
   height: calc(100% - 48px);
 }
@@ -511,6 +516,7 @@ onMounted(() => {
   :deep(.el-collapse-item__header) {
     background-color: var(--el-collapse-header-bg) !important;
     height: 32px;
+    padding: 8px 12px !important;
     border-bottom: 1px solid var(--el-collapse-border) !important;
     border-bottom-color: var(--el-collapse-border) !important;
   }
@@ -520,12 +526,17 @@ onMounted(() => {
     border-bottom: 1px solid var(--el-collapse-border) !important;
     border-bottom-color: var(--el-collapse-border) !important;
   }
+  :deep(.el-collapse-item__wrap){
+    border-bottom: 1px solid var(--el-collapse-border) !important;
+    border-bottom-color: var(--el-collapse-border) !important;
+  }
 }
 
 .o-collapse-content {
-  padding-left: 18px;
+  padding: 8px 32px 0px;
+  padding-left: 32px;
   .subName {
-    margin-top: 8px;
+    margin-bottom: 8px;
     width: 100%;
     line-height: 16px;
     display: flex;
diff --git a/src/components/dialoguePanel/DialogueFlow.vue b/src/components/dialoguePanel/DialogueFlow.vue
index b35db07dea9fe6417a597b5ac7324fa13a0d4d16..5db8fbaced50ec4c2a38498a10b15e3883cfa221 100644
--- a/src/components/dialoguePanel/DialogueFlow.vue
+++ b/src/components/dialoguePanel/DialogueFlow.vue
@@ -190,7 +190,7 @@ watch(
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" scope>
 
 .el-collapse-item:last-child {
   margin-bottom: 0px;
@@ -231,6 +231,12 @@ watch(
     background-color: var(--o-bg-color-light2) !important;
   }
 }
+:deep(.el-collapse .o-nest-collapse){
+  &:last-child {
+    border-bottom: none!important;
+    background-color: beige!important;
+  }
+}
 .title {
   .el-collapse-item__wrap {
     background-color: var(--o-bg-color-light2);
@@ -249,13 +255,11 @@ watch(
   }
   .el-collapse-item__arrow.is-active {
     transform: rotate(90deg);
-    top: 3px;
     padding-left: 3px;
   }
 }
 .el-collapse-item__arrow.is-active {
   transform: rotate(90deg);
-  top: 3px;
   padding-left: 3px;
 }
 .el-collapse-item__arrow {
diff --git a/src/components/dialoguePanel/DialoguePanel.scss b/src/components/dialoguePanel/DialoguePanel.scss
index 48f0d433d4fd52a40be37fdf546bec9da01a20d6..91aa50da0454611fc1d420f484d80e869bb4f162 100644
--- a/src/components/dialoguePanel/DialoguePanel.scss
+++ b/src/components/dialoguePanel/DialoguePanel.scss
@@ -400,13 +400,13 @@
 
           .pagenation-cur {
             font-size: 12px;
-            line-height: 18px;
+            line-height: 16px;
             color: var(--o-text-color-tertiary) !important;
           }
 
           .pagenation-total {
             font-size: 12px;
-            line-height: 18px;
+            line-height: 16px;
             color: var(--o-text-color-primary) !important;
           }
 
diff --git a/src/views/api/components/PluginCard.vue b/src/views/api/components/PluginCard.vue
index b98e758607aeb75481ba095f7d208921734975cb..eb16dbf9c35d4db8737d8060994651fe0e1c9826 100644
--- a/src/views/api/components/PluginCard.vue
+++ b/src/views/api/components/PluginCard.vue
@@ -34,7 +34,7 @@ const props = defineProps<CardInfo>();
 .plugin-card {
   display: flex;
   .plugin-card-icon {
-    margin-right: 18px;
+    margin-right: 16px;
     display: flex;
     align-items: start;
     .menu-icon {
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index 7a70cec3bb72f114da03f551063606fa034df0b0..b78477862c97eaeb3a6666bd5024689a28aba14f 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -594,7 +594,11 @@ onBeforeUnmount(() => {
 }
 .drawerHeader {
   color: pink;
+  background-color: #5481de !important;
   margin-bottom: 0px !important;
+  .header{
+    background-color: pink;
+  }
 }
 .drawerContent {
   overflow-y: auto;
@@ -606,6 +610,8 @@ onBeforeUnmount(() => {
   &::v-deep(.el-drawer__header) {
     margin-bottom: 0px !important;
     color: var(--o-text-color-primary) !important;
+    margin: 24px !important;
+    padding: 24px !important;
   }
 }
 .apiCenterCardSingle {
@@ -691,8 +697,8 @@ img {
   width: 100%;
   max-width: 430px;
 }
-.el-drawer__header {
-  padding: 24px 24px 16px;
+:deep(.el-drawer__header) {
+  padding: 24px 24px 16px !important;
   margin-bottom: 0px;
   .drawerHeader {
     width: 100%;
@@ -703,9 +709,12 @@ img {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .el-drawer__title{
+    color: var(--o-text-color-primary) !important; 
+  }
 }
 :deep(.el-drawer__body) {
-  padding: 8px 24px 16px !important;
+  padding: 0px 24px 16px !important;
   .drawerBody {
     height: 100%;
     textarea {
diff --git a/src/views/api/style.scss b/src/views/api/style.scss
index 2b0e5384e604786eb1460155a2861ef85492fb30..e4589e76c131ecdb69fbc7560237e94a39ae84df 100644
--- a/src/views/api/style.scss
+++ b/src/views/api/style.scss
@@ -145,6 +145,8 @@
         }
       }
       .appCenterNoData {
+        top: calc(50% - 80px);
+        position: relative;
         display: flex;
         flex-direction: column;
         gap: 8px;
diff --git a/src/views/app/style.scss b/src/views/app/style.scss
index 472385a7a5e3e337f3fc9b1751e6beb78398f1ff..c3a06d71a5dc6d6ee6b3ed58eda18378baac6cbd 100644
--- a/src/views/app/style.scss
+++ b/src/views/app/style.scss
@@ -197,6 +197,8 @@
         }
       }
       .appCenterNoData {
+        top: calc(50% - 80px);
+        position: relative;
         display: flex;
         flex-direction: column;
         gap: 8px;
diff --git a/src/views/createapp/components/PermissionControl.vue b/src/views/createapp/components/PermissionControl.vue
index 349f2fdff01767d3f28706509694c3101885659a..104d35195472a8c6c0a0e528fa4a2ae831c00134 100644
--- a/src/views/createapp/components/PermissionControl.vue
+++ b/src/views/createapp/components/PermissionControl.vue
@@ -125,9 +125,15 @@ const filteredOptionalList = computed(() => {
 </template>
 <style lang="scss" scoped>
 .permission-control {
+  .permission-control__radio {
+    margin-bottom: 8px !important;
+  }
   :deep(.el-radio-group) {
+    margin-top: 8px !important;
     .el-radio {
       margin-right: 22px;
+      line-height: 16px;
+      height: 16px;
     }
   }
 
diff --git a/src/views/createapp/components/workFlowConfig/editFlowName.vue b/src/views/createapp/components/workFlowConfig/editFlowName.vue
index 83ca79cef6fd05a47f3056529dfc4bb16e6634c4..fc07b92e35f5eb519b9d7e0a1405e66881124a09 100644
--- a/src/views/createapp/components/workFlowConfig/editFlowName.vue
+++ b/src/views/createapp/components/workFlowConfig/editFlowName.vue
@@ -136,6 +136,7 @@ const handleSubmit = (formEl: FormInstance | undefined) => {
 .workFlowDia.el-dialog {
   padding: 0px;
   width: 560px;
+  top: calc(50% - 300px);
   .el-form {
     margin-top: 0px;
     .el-form-item {
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index f0026f156eb33a946a7a35adc0cbdf3c27ece819..4630f5ad089c949f5174208fee9199c80b4f0840 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -209,7 +209,10 @@ const updateNodeYaml = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped> 
+:deep(.el-collapse-item__arrow .is-active){ 
+    top: 0px !important; 
+}
 .yamlMonacoEditor {
   height: 400px;
 }
diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue
index 7b001e5eead4d095341db43d3598d3ec1f086e5f..381db40721c3c1a6e2e599d2eb2cf75ff96536c8 100644
--- a/src/views/dialogue/components/DialogueAside.vue
+++ b/src/views/dialogue/components/DialogueAside.vue
@@ -24,7 +24,7 @@ import { useI18n } from 'vue-i18n';
 import { successMsg } from 'src/components/Message';
 import i18n from 'src/i18n';
 import appIcon from '@/assets/svgs/myApp.svg';
-import { IconChevronUp } from '@computing/opendesign-icons';
+import { IconCaretRight, IconChevronUp,IconChevronDown } from '@computing/opendesign-icons';
 import router from 'src/router';
 const { user_selected_app } = storeToRefs(useHistorySessionStore());
 
@@ -423,19 +423,19 @@ watch(
             />
           </div>
           <ul v-if="filteredHistorySessions.length">
-            <ElCollapse v-model="activeNames">
+            <el-collapse v-model="activeNames"
+            class="o-hpc-collapse"
+            :prefix-icon="IconChevronDown">
               <template v-for="item in filteredHistorySessions" :key="item.key">
-                <ElCollapseItem :name="item.key">
+                <el-collapse-item :name="item.key">
                   <template #title>
-                    {{ item.title }}
-                  </template>
-                  <template #icon="{ isActive }">
-                    <el-icon v-if="isActive" :size="16">
-                      <CaretBottom />
-                    </el-icon>
-                    <el-icon v-else :size="16">
-                      <CaretRight />
+                    <el-icon 
+                    class="el-collapse-item__arrow"
+                    :class="{ 'is-active': activeNames.includes(item.key) }"
+                    >
+                      <IconCaretRight></IconCaretRight>
                     </el-icon>
+                    <span class="el-collapse-item__title">{{ item.title }}</span>
                   </template>
                   <template
                     v-for="session in item.list"
@@ -447,9 +447,9 @@ watch(
                       @deleteOne="deleteOne"
                     />
                   </template>
-                </ElCollapseItem>
+                </el-collapse-item>
               </template>
-            </ElCollapse>
+            </el-collapse>
           </ul>
 
           <div v-else class="history-record-null">
@@ -510,6 +510,16 @@ watch(
   </aside>
 </template>
 <style lang="scss" scoped>
+:deep(.el-collapse-item__title){
+  // flex: 1 0 90%;
+  line-height: 18px !important;
+}
+:deep(.el-collapse-item__arrow.is-active) {
+    height: 56px;
+    list-style: 56px;
+    transform: rotate(90deg);
+    padding-left: 3px;
+}
 :deep(.el-collapse-item__content) {
   border-bottom: none;
   padding-bottom: 0px;
diff --git a/src/views/dialogue/components/InterPreview.vue b/src/views/dialogue/components/InterPreview.vue
index 2d937610481d6b0992fc3699710fa1fd14f8d871..f93f5ef097012f4850b8bc2916bb4197ec53aa5a 100644
--- a/src/views/dialogue/components/InterPreview.vue
+++ b/src/views/dialogue/components/InterPreview.vue
@@ -264,7 +264,7 @@ watch(
           line-height: 24px;
           margin-top: 8px;
           margin-bottom: 20px;
-          color: var(--o-text-color-primary);
+          color: var(--o-text-color-secondary);
         }
         .preMainContentLink {
           .contentLinkTitle {
@@ -341,7 +341,7 @@ watch(
             padding: 8px 16px;
             background-color: var(--o-bg-color-base);
             .vue-text {
-              color: #4e5865;
+              color: var(--o-question-color);
             }
           }
         }
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index 8c9b03b3b87c129087ccd9f5bf7e626623b6d8c6..42613588bd7bad1270604bed62979c1bcf3b97ee 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -214,7 +214,7 @@
       width: 320px;
       height: 202px;
       top: calc(50% - 101px);
-      left: calc(50% - 160px - 120px);
+      left: calc(50% - 160px);
       display: flex;
       flex-direction: column;
       align-items: center;