fix: Page style optimization

Author: wangdan-fit2cloud

ui/src/assets/workflow/icon_data-source-local.svg

@@ -100,23 +100,5 @@ watch([() => filterText.value, () => props.list], () => {
 </script>
 
 <style lang="scss" scoped>
-.list {
-  cursor: default;
-  padding: 12px;
-  gap: 12px;
-  box-sizing: border-box;
 
-  .list-item {
-    background-color: #ffffff;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: var(--el-color-primary);
-    }
-  }
-
-  .el-empty {
-    margin: 0 auto;
-  }
-}
 </style>

ui/src/assets/workflow/icon_document-split.svg

@@ -310,39 +310,5 @@ async function handleClick(val: string) {
 onMounted(() => {})
 </script>
 <style lang="scss" scoped>
-.workflow-dropdown-menu {
-  -moz-user-select: none; /* Firefox */
-  -webkit-user-select: none; /* WebKit内核 */
-  -ms-user-select: none; /* IE10及以后 */
-  -khtml-user-select: none; /* 早期浏览器 */
-  -o-user-select: none; /* Opera */
-  user-select: none; /* CSS3属性 */
-  position: absolute;
-  top: 49px;
-  right: 16px;
-  z-index: 99;
-  width: 600px;
-  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
-  padding-bottom: 8px;
 
-  .title {
-    padding: 12px 12px 4px;
-  }
-  .workflow-dropdown-item {
-    &:hover {
-      background: var(--app-text-color-light-1);
-    }
-  }
-
-  .list-item {
-    box-sizing: border-box;
-    &:hover {
-      border-color: var(--el-color-primary);
-    }
-  }
-
-  :deep(.el-tabs__header) {
-    margin-bottom: 0;
-  }
-}
 </style>

ui/src/assets/workflow/icon_knowledge-write.svg

@@ -0,0 +1,45 @@
+.workflow-dropdown-menu {
+  -moz-user-select: none; /* Firefox */
+  -webkit-user-select: none; /* WebKit内核 */
+  -ms-user-select: none; /* IE10及以后 */
+  -khtml-user-select: none; /* 早期浏览器 */
+  -o-user-select: none; /* Opera */
+  user-select: none; /* CSS3属性 */
+  position: absolute;
+  top: 49px;
+  right: 16px;
+  z-index: 99;
+  width: 600px;
+  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
+  padding-bottom: 8px;
+
+  .title {
+    padding: 12px 12px 4px;
+  }
+  .workflow-dropdown-item {
+    &:hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+
+  .list-item {
+    box-sizing: border-box;
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+  }
+
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .list {
+    cursor: default;
+    padding: 12px;
+    gap: 12px;
+    box-sizing: border-box;
+
+    .el-empty {
+      margin: 0 auto;
+    }
+  }
+}

ui/src/components/dropdown_menu/application/NodeContent.vue

@@ -23,4 +23,6 @@ const kw: any = {
   [WorkflowMode.Knowledge]: KnowledgeDropdownMenu,
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+@use './index.scss';
+</style>

ui/src/components/dropdown_menu/application/index.vue

@@ -30,9 +30,7 @@
             >
               <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
             </el-avatar>
-            <el-avatar v-else class="avatar-green" shape="square" :size="20">
-              <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
-            </el-avatar>
+            <ToolIcon v-else :size="20" :type="item?.tool_type" />
             <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
           </div>
         </template>
@@ -48,19 +46,9 @@
               >
                 <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
               </el-avatar>
-              <el-avatar v-else class="avatar-green" shape="square" :size="20">
-                <img src="@/assets/tool/icon_tool.svg" style="width: 58%" alt="" />
-              </el-avatar>
+              <ToolIcon v-else :size="20" :type="item?.tool_type" />
               <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
             </div>
-            <div v-if="item.type" class="status-tag" style="margin-left: auto">
-              <el-tag class="warning-tag" v-if="isWorkFlow(item.type)">
-                {{ $t('views.application.workflow') }}
-              </el-tag>
-              <el-tag class="blue-tag" v-else>
-                {{ $t('views.application.simple') }}
-              </el-tag>
-            </div>
           </div>
           <el-text type="info" size="small" class="mt-4">{{ item.desc }}</el-text>
         </template>
@@ -73,7 +61,6 @@
 <script setup lang="ts">
 import { watch, ref } from 'vue'
 import { isAppIcon, resetUrl } from '@/utils/common'
-import { isWorkFlow } from '@/utils/application'
 
 const props = defineProps<{
   list: any[]
@@ -99,24 +86,4 @@ watch([() => filterText.value, () => props.list], () => {
 })
 </script>
 
-<style lang="scss" scoped>
-.list {
-  cursor: default;
-  padding: 12px;
-  gap: 12px;
-  box-sizing: border-box;
-
-  .list-item {
-    background-color: #ffffff;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: var(--el-color-primary);
-    }
-  }
-
-  .el-empty {
-    margin: 0 auto;
-  }
-}
-</style>
+<style lang="scss" scoped></style>