feat:三个浮动窗口功能新增

frontend/src/layout/components/Main/TaskTemplate/TaskProcess/ProcessCard.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { getActionTypeDisplay } from '@/layout/components/config.ts'
-import { CloseBold, Select } from '@element-plus/icons-vue'
+import { useAgentsStore } from '@/stores'
+import BranchButton from './components/TaskButton.vue'
+
+const agentsStore = useAgentsStore()
 
 const props = defineProps<{
   step: {
@@ -27,6 +30,11 @@ const editValue = ref('')
 // 鼠标悬停的process ID
 const hoverProcessId = ref<string | null>(null)
 
+// 检测当前是否是深色模式
+function isDarkMode(): boolean {
+  return document.documentElement.classList.contains('dark')
+}
+
 // 获取颜色浅两号的函数
 function getLightColor(color: string, level: number = 2): string {
   if (!color || color.length !== 7 || color[0] !== '#') return color
@@ -46,6 +54,34 @@ function getLightColor(color: string, level: number = 2): string {
     .padStart(2, '0')}${Math.round(newB).toString(16).padStart(2, '0')}`
 }
 
+// 获取颜色深两号的函数
+function getDarkColor(color: string, level: number = 2): string {
+  if (!color || color.length !== 7 || color[0] !== '#') return color
+
+  const r = parseInt(color.substr(1, 2), 16)
+  const g = parseInt(color.substr(3, 2), 16)
+  const b = parseInt(color.substr(5, 2), 16)
+
+  // 降低亮度（深两号）
+  const darkenAmount = level * 20
+  const newR = Math.max(0, r - darkenAmount)
+  const newG = Math.max(0, g - darkenAmount)
+  const newB = Math.max(0, b - darkenAmount)
+
+  return `#${Math.round(newR).toString(16).padStart(2, '0')}${Math.round(newG)
+    .toString(16)
+    .padStart(2, '0')}${Math.round(newB).toString(16).padStart(2, '0')}`
+}
+
+// 根据主题模式获取调整后的颜色
+function getAdjustedColor(color: string, level: number = 2): string {
+  if (isDarkMode()) {
+    return getDarkColor(color, level)
+  } else {
+    return getLightColor(color, level)
+  }
+}
+
 // 处理鼠标进入
 function handleMouseEnter(processId: string) {
   hoverProcessId.value = processId
@@ -107,30 +143,32 @@ function handleCancel() {
           <!-- 编辑模式 - 修改为卡片样式 -->
           <div v-if="editingProcessId === process.ID" class="edit-container">
             <div class="edit-card">
-              <el-input
-                v-model="editValue"
-                type="textarea"
-                :autosize="{ minRows: 3, maxRows: 6 }"
-                placeholder="请输入描述内容"
-                autofocus
-              />
-              <div class="edit-buttons">
-                <el-button
-                  type="success"
-                  size="small"
-                  :icon="Select"
-                  @click="handleSave(process.ID)"
-                  title="保存"
-                >
-                </el-button>
-                <el-button
-                  type="danger"
-                  size="small"
-                  :icon="CloseBold"
-                  @click="handleCancel"
-                  title="取消"
-                >
-                </el-button>
+              <div class="flex flex-col gap-3">
+                <el-input
+                  v-model="editValue"
+                  type="textarea"
+                  :autosize="{ minRows: 3, maxRows: 6 }"
+                  placeholder="请输入描述内容"
+                  autofocus
+                />
+                <div class="flex justify-end">
+                  <svg-icon
+                    icon-class="Check"
+                    size="20px"
+                    color="#328621"
+                    class="cursor-pointer mr-4"
+                    @click="handleSave(process.ID)"
+                    title="保存"
+                  />
+                  <svg-icon
+                    icon-class="Cancel"
+                    size="20px"
+                    color="#8e0707"
+                    class="cursor-pointer mr-1"
+                    @click="handleCancel"
+                    title="取消"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -144,7 +182,7 @@ function handleCancel() {
               border: `1px solid ${getActionTypeDisplay(process.ActionType)?.border}`,
               backgroundColor:
                 hoverProcessId === process.ID
-                  ? getLightColor(getActionTypeDisplay(process.ActionType)?.color || '#909399')
+                  ? getAdjustedColor(getActionTypeDisplay(process.ActionType)?.color || '#909399')
                   : 'transparent'
             }"
             @dblclick="handleDblClick(process.ID, process.Description)"
@@ -156,11 +194,13 @@ function handleCancel() {
         </span>
       </div>
     </div>
+    <BranchButton :step="step" />
   </div>
 </template>
 
 <style scoped lang="scss">
 .process-card {
+  position: relative;
   margin-bottom: 16px;
   padding: 16px;
   border-radius: 8px;
@@ -194,7 +234,6 @@ function handleCancel() {
           margin-bottom: 8px;
 
           .edit-card {
-            position: relative;
             //background: #f0f2f5;
             border-radius: 8px;
             padding: 16px;
@@ -217,36 +256,10 @@ function handleCancel() {
             }
 
             .edit-buttons {
-              position: absolute;
-              right: 12px;
-              bottom: 8px;
               display: flex;
               gap: 8px;
-
-              .el-button {
-                width: 32px;
-                height: 32px;
-                padding: 0;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 14px;
-
-                &:first-child {
-                  background-color: #67c23a;
-                  border-color: #67c23a;
-                }
-
-                &:last-child {
-                  background-color: #f56c6c;
-                  border-color: #f56c6c;
-                }
-
-                &:hover {
-                  transform: scale(1.05);
-                }
-              }
+              justify-content: flex-end;
+              margin-top: 8px;
             }
           }
         }