节点按钮样式

src/views/workflow/chart/node-add.vue

@@ -6,7 +6,7 @@
         class="__hover-bg flex items-center rounded-sm px-1 py-0.5 text-xs"
         @click="$emit('onAddNode', { type: key, e: $event })"
       >
-        <img :src="value.icon" class="m-1 size-4" />
+        <img :src="value.icon" class="mr-1 size-6" />
         {{ NodeTypeObj[key]?.title }}
       </div>
     </template>

src/views/workflow/chart/panel-index.vue

@@ -1,11 +1,22 @@
 <template>
   <transition name="slide">
-    <div class="panel-index" v-if="WorkflowStore.panel.show">
-      <div class="panel-header">
-        <h3>{{ state.nodeData.title }}</h3>
-        <div class="__hover" @click="WorkflowStore.nodePanelClose()">×</div>
+    <div
+      class="z-1000 flex h-full w-[400px] flex-col rounded-l-lg bg-white shadow"
+      v-if="WorkflowStore.panel.show"
+    >
+      <div class="flex items-center px-4 pt-4 font-bold">
+        <template v-if="nodeSources[nodeDataCpt.type]?.icon">
+          <img class="mr-2 size-6" :src="nodeSources[nodeDataCpt.type].icon" />
+        </template>
+        <div class="">{{ state.nodeData.title }}</div>
+        <div
+          class="__hover ml-auto text-xl"
+          @click="WorkflowStore.nodePanelClose()"
+        >
+          ×
+        </div>
       </div>
-      <div class="panel-sub">
+      <div class="panel-sub p-1.5">
         <CzrFormColumn
           :span="24"
           label-width="0px"
@@ -16,7 +27,7 @@
           :clearable="false"
         />
       </div>
-      <div class="panel-content">
+      <div class="overflow-y-auto px-4 pb-4">
         <template v-for="(value, key) in nodeSources">
           <template v-if="nodeDataCpt.type === key">
             <component :is="value.panelCom" :node="WorkflowStore.panel.node" />
@@ -76,32 +87,8 @@ watch(
 
 <style lang="scss" scoped>
 @use '@/views/workflow/instance/component/style';
-
-.panel-index {
-  width: 400px;
-  height: 100%;
-  background-color: white;
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  border-radius: 10px 0 0 10px;
-  .panel-header {
-    padding: 16px 16px 0 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: bold;
-  }
-  .panel-sub {
-    border-bottom: style.$borderStyle;
-    padding: 6px;
-  }
-  .panel-content {
-    padding: 0 16px 16px;
-    flex: 1;
-    overflow-y: auto;
-  }
+.panel-sub {
+  border-bottom: style.$borderStyle;
 }
 
 /* 过渡动画 */

src/views/workflow/config.ts

@@ -8,19 +8,19 @@ import {
 } from '@/views/workflow/types'
 import startNodeDefault from '@/views/workflow/instance/start/default'
 // @ts-ignore
-import answerImg from '@/assets/images/workflow/answer.png'
+import answerImg from '@/assets/images/workflow/icon-answer.png'
 import answerNodeDefault from '@/views/workflow/instance/answer/default'
 // @ts-ignore
-import llmImg from '@/assets/images/workflow/llm.svg'
+import llmImg from '@/assets/images/workflow/icon-llm.png'
 import llmNodeDefault from '@/views/workflow/instance/llm/default'
 // @ts-ignore
-import knowledgeImg from '@/assets/images/workflow/knowledge.png'
+import knowledgeImg from '@/assets/images/workflow/icon-knowledge.png'
 import knowledgeNodeDefault from '@/views/workflow/instance/knowledge/default'
 // @ts-ignore
-import ifElseImg from '@/assets/images/workflow/if-else.png'
+import ifElseImg from '@/assets/images/workflow/icon-if-else.png'
 import ifElseNodeDefault from '@/views/workflow/instance/if-else/default'
 // @ts-ignore
-import switchImg from '@/assets/images/workflow/switch.png'
+import switchImg from '@/assets/images/workflow/icon-switch.png'
 import switchNodeDefault from '@/views/workflow/instance/switch/default'
 
 import { defineAsyncComponent } from 'vue'

src/views/workflow/instance/component/buttons/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="__hover flex h-6 items-center justify-center gap-1 rounded-sm border-1 px-2 text-xs font-normal"
+    :class="`${styleCpt.borderColor} ${styleCpt.bgColor} ${styleCpt.textColor}`"
+  >
+    <SvgIcon v-if="icon" :name="icon" :color="styleCpt.textColor" size="10" />
+    {{ title }}
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'workflowButton',
+})
+import { computed, reactive } from 'vue'
+
+const props = defineProps({
+  icon: {},
+  title: {},
+  type: { default: 'main' },
+})
+const state: any = reactive({})
+const styleCpt = computed(() => {
+  const obj = {
+    borderColor: '',
+    bgColor: '',
+    textColor: '',
+  }
+  switch (props.type) {
+    case 'main':
+      {
+        obj.borderColor = 'border-[var(--czr-main-color)]'
+        obj.bgColor = 'bg-[var(--czr-main-color)]'
+        obj.textColor = 'text-[#ffffff]'
+      }
+      break
+    case 'error':
+      {
+        obj.borderColor = 'border-[var(--czr-error-color)]'
+        obj.bgColor = 'bg-[var(--czr-error-color)]/10'
+        obj.textColor = 'text-[var(--czr-error-color)]'
+      }
+      break
+  }
+  return obj
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/workflow/instance/component/condition/condition-item.vue

@@ -50,7 +50,7 @@
     </div>
     <!--     @click="$emit('update:conditions', conditions.filter((_, i) => i !== index))"-->
     <div class="condition-item-del __hover" @click="$emit('onDel')">
-      <SvgIcon name="czr_del" size="14" color="#666666" />
+      <SvgIcon name="czr_del" size="14" color="var(--czr-error-color)" />
     </div>
   </div>
 </template>

src/views/workflow/instance/component/model-select/index.vue

@@ -86,7 +86,7 @@
                   </a-row>
                 </div>
               </template>
-              <div class="flex justify-between">
+              <div class="mt-1 flex justify-between">
                 <div class="text-xs">
                   <div class="flex items-center">
                     停止序列

src/views/workflow/instance/component/vars/evn-index.vue

@@ -1,10 +1,10 @@
 <template>
   <transition name="slide">
     <div class="panel-index" v-if="WorkflowStore.envVars.show">
-      <div class="panel-header">
-        <h3>环境变量</h3>
+      <div class="panel-header mb-2">
+        <div>环境变量</div>
         <div
-          class="__hover"
+          class="__hover text-xl"
           @click="WorkflowStore.$patch((s: any) => (s.envVars.show = false))"
         >
           ×
@@ -15,7 +15,12 @@
         密钥、数据库密码等。它们被存储在工作流程中，而不是代码中，以便在不同环境中共享。
       </div>
       <div class="panel-content">
-        <CzrButton type="add" title="添加环境变量" @click="onAddVars" />
+        <workflowButton
+          title="添加环境变量"
+          icon="czr_add"
+          class="ml-auto"
+          @click="onAddVars"
+        />
         <div class="vars-list">
           <template v-for="(item, index) in WorkflowStore.envVars.vars">
             <div class="item">
@@ -50,6 +55,7 @@ import {
 import { useWorkflowStore } from '@/stores'
 import envDetail from './env-detail.vue'
 import varsItem from './vars-item.vue'
+import workflowButton from '@/views/workflow/instance/component/buttons/index.vue'
 
 const WorkflowStore = useWorkflowStore()
 const emit = defineEmits([])

src/views/workflow/instance/if-else/panel/index.vue

@@ -14,12 +14,13 @@
               @setVars="(vars) => onAddCondition(index, vars)"
               class="ml-auto"
             >
-              <CzrButton type="add" title="添加" />
+              <workflowButton title="添加条件" icon="czr_add" />
             </varsPopover>
-            <CzrButton
+            <workflowButton
+              title="删除条件"
+              icon="czr_del"
+              type="error"
               class="ml-2"
-              type="del"
-              title="刪除"
               v-if="state.nodeData.__ports.length > 1"
               @click="state.nodeData.__ports.splice(index, 1)"
             />
@@ -53,12 +54,14 @@
         </div>
       </template>
     </div>
-    <CzrButton
-      type="add"
-      title="添加条件分支"
+    <el-button
+      :icon="Plus"
+      class="mt-2 w-full"
+      style="margin-top: 8px"
       @click="onAddCase"
-      class="mt-4"
-    />
+    >
+      ELSE IF
+    </el-button>
   </div>
 </template>
 
@@ -76,7 +79,8 @@ import {
   ConditionString,
   ConditionType,
 } from '@/views/workflow/types'
-import CzrButton from '@/components/czr-ui/CzrButton.vue'
+import workflowButton from '@/views/workflow/instance/component/buttons/index.vue'
+import { Plus } from '@element-plus/icons-vue'
 
 const WorkflowStore = useWorkflowStore()
 const emit = defineEmits(['reLayoutPort'])

src/views/workflow/instance/llm/panel/index.vue

@@ -57,9 +57,10 @@
         </template>
       </paramsTextarea>
     </template>
-    <a-button
+    <el-button
+      :icon="Plus"
+      class="mt-2 w-full"
       style="margin-top: 8px"
-      class="w-full"
       @click="
         state.nodeData.chatModelMessages.push({
           role: 'user',
@@ -69,7 +70,7 @@
       "
     >
       添加消息
-    </a-button>
+    </el-button>
     <div class="__czr-title_2 my-4">
       记忆
       <el-tooltip content="聊天记忆设置" placement="top">
@@ -139,6 +140,7 @@ import { VarsSource } from '@/views/workflow/types'
 import nodeDefault from '@/views/workflow/instance/llm/default'
 import { v4 } from 'uuid'
 import modelSelect from '@/views/workflow/instance/component/model-select/index.vue'
+import { Plus } from '@element-plus/icons-vue'
 
 const emit = defineEmits([])
 const props = defineProps({

src/views/workflow/instance/start/panel/index.vue

@@ -2,10 +2,10 @@
   <div class="panel-block" v-if="state.nodeData">
     <div class="__czr-title_2 my-4">
       输入字段
-      <CzrButton
-        class="ml-auto"
-        type="add"
+      <workflowButton
         title="添加参数"
+        icon="czr_add"
+        class="ml-auto"
         @click="onAddVars"
       />
     </div>
@@ -43,6 +43,7 @@
 import { getCurrentInstance, reactive, ref, watch } from 'vue'
 import varsItem from '@/views/workflow/instance/component/vars/vars-item.vue'
 import varsDetail from '@/views/workflow/instance/component/vars/vars-detail.vue'
+import workflowButton from '@/views/workflow/instance/component/buttons/index.vue'
 
 const emit = defineEmits([])
 const props = defineProps({

src/views/workflow/instance/switch/panel/index.vue

@@ -27,9 +27,14 @@
         <template #title> 分类 {{ index + 1 }} </template>
       </paramsTextarea>
     </template>
-    <a-button style="margin-top: 8px" class="w-full" @click="onAddCase">
+    <el-button
+      :icon="Plus"
+      class="mt-2 w-full"
+      style="margin-top: 8px"
+      @click="onAddCase"
+    >
       添加分类
-    </a-button>
+    </el-button>
     <div class="__czr-title_2 my-4">高级设置</div>
     <paramsTextarea
       v-model="state.nodeData.instruction"
@@ -85,6 +90,7 @@ import paramsTextarea from '@/views/workflow/instance/component/params-textarea/
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import varsOut from '@/views/workflow/instance/component/vars/vars-out.vue'
 import modelSelect from '@/views/workflow/instance/component/model-select/index.vue'
+import { Plus } from '@element-plus/icons-vue'
 
 const WorkflowStore = useWorkflowStore()
 const emit = defineEmits(['reLayoutPort'])