feat(workflow): add keyboard shortcuts, shortcut editor, and cross-platform support

ui/src/locales/lang/en-US/workflow.ts

@@ -48,13 +48,30 @@ export default {
     deleteMessage: 'This node cannot be deleted',
   },
   control: {
+    dragMode: 'Box Select',
+    clickMode: 'Point Select',
     zoomOut: 'Zoom Out',
     zoomIn: 'Zoom In',
     fitView: 'Fit to Screen',
     retract: 'Collapse All',
     extend: 'Expand All',
     beautify: 'Auto-Arrange',
   },
+  shortcut: {
+    undo: 'Undo',
+    redo: 'Redo',
+    copy: 'Copy',
+    paste: 'Paste',
+    delete: 'Delete',
+    title: 'Keyboard Shortcuts',
+    action: 'Action',
+    keys: 'Shortcut',
+    operation: 'Operation',
+    pressKeys: 'Press new shortcut...',
+    reset: 'Reset',
+    resetAll: 'Reset All',
+    reloadTip: 'Changes take effect after page reload.',
+  },
   variable: {
     global: 'Global Variable',
     chat: 'Chat Variable',

ui/src/locales/lang/zh-CN/workflow.ts

@@ -47,13 +47,30 @@ export default {
     deleteMessage: '节点不允许删除',
   },
   control: {
+    dragMode: '框选模式',
+    clickMode: '点选模式',
     zoomOut: '缩小',
     zoomIn: '放大',
     fitView: '适应',
     retract: '收起全部节点',
     extend: '展开全部节点',
     beautify: '一键美化',
   },
+  shortcut: {
+    undo: '撤销',
+    redo: '重做',
+    copy: '复制',
+    paste: '粘贴',
+    delete: '删除',
+    title: '快捷键设置',
+    action: '动作',
+    keys: '快捷键',
+    operation: '操作',
+    pressKeys: '按下新快捷键...',
+    reset: '重置',
+    resetAll: '恢复默认',
+    reloadTip: '修改后需要刷新页面才能生效。',
+  },
   variable: {
     global: '全局变量',
     chat: '会话变量',

ui/src/locales/lang/zh-Hant/workflow.ts

@@ -47,13 +47,30 @@ export default {
     deleteMessage: '節點不允許刪除',
   },
   control: {
+    dragMode: '框選模式',
+    clickMode: '點選模式',
     zoomOut: '縮小',
     zoomIn: '放大',
     fitView: '適應',
     retract: '收起全部節點',
     extend: '展開全部節點',
     beautify: '一鍵美化',
   },
+  shortcut: {
+    undo: '撤銷',
+    redo: '重做',
+    copy: '複製',
+    paste: '粘貼',
+    delete: '刪除',
+    title: '快捷鍵設置',
+    action: '動作',
+    keys: '快捷鍵',
+    operation: '操作',
+    pressKeys: '按下新快捷鍵...',
+    reset: '重置',
+    resetAll: '恢復默認',
+    reloadTip: '修改後需要刷新頁面才能生效。',
+  },
   variable: {
     global: '全局變量',
     chat: '會話變量',

ui/src/views/application-workflow/index.vue

@@ -38,17 +38,35 @@
           <AppIcon iconName="app-add-outlined" class="mr-4" />
           {{ $t('workflow.setting.addComponent') }}
         </el-button>
-        <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.debug(id)">
-          <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
-          {{ $t('common.debug') }}
-        </el-button>
-        <el-button @click="saveApplication(true)" v-if="permissionPrecise.edit(id)">
-          <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
-          {{ $t('common.save') }}
-        </el-button>
-        <el-button type="primary" @click="publish" v-if="permissionPrecise.publish(id)">
-          {{ $t('common.publish') }}
-        </el-button>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.debug')} (${modifierKey} + Shift + D)`"
+          placement="top"
+        >
+          <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.debug(id)">
+            <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
+            {{ $t('common.debug') }}
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.save')} (${modifierKey} + S)`"
+          placement="top"
+        >
+          <el-button @click="saveApplication(true)" v-if="permissionPrecise.edit(id)">
+            <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
+            {{ $t('common.save') }}
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.publish')} (${modifierKey} + Shift + P)`"
+          placement="top"
+        >
+          <el-button type="primary" @click="publish" v-if="permissionPrecise.publish(id)">
+            {{ $t('common.publish') }}
+          </el-button>
+        </el-tooltip>
 
         <el-dropdown trigger="click">
           <el-button text @click.stop class="ml-8 mt-4">
@@ -74,6 +92,10 @@
                   <el-switch size="small" v-model="isSave" @change="changeSave" />
                 </div>
               </el-dropdown-item>
+              <el-dropdown-item @click="shortcutEditorVisible = true">
+                <AppIcon iconName="app-key" class="color-secondary"></AppIcon>
+                {{ $t('workflow.shortcut.title') }}
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -92,7 +114,7 @@
     </el-collapse-transition>
     <!-- 主画布 -->
     <div class="workflow-main" ref="workflowMainRef">
-      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" />
+      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" @save="saveApplication(true)" @debug="clickShowDebug" @publish="publish" />
     </div>
     <!-- 调试 -->
     <el-collapse-transition>
@@ -151,6 +173,7 @@
       source="work_flow"
       @refresh="getDetail"
     />
+    <ShortcutEditor v-model:visible="shortcutEditorVisible" />
   </div>
 </template>
 <script setup lang="ts">
@@ -161,6 +184,7 @@ import Workflow from '@/workflow/index.vue'
 import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
 import PublishHistory from '@/views/application-workflow/component/PublishHistory.vue'
 import { isAppIcon, resetUrl } from '@/utils/common'
+import ShortcutEditor from '@/workflow/common/ShortcutEditor.vue'
 import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
 import { mapToUrlParams } from '@/utils/application'
@@ -203,6 +227,8 @@ let interval: any
 const workflowRef = ref()
 const workflowMainRef = ref()
 const loading = ref(false)
+const modifierKey = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? 'Cmd' : 'Ctrl'
+const shortcutEditorVisible = ref(false)
 const detail = ref<any>(null)
 
 const showPopover = ref(false)

ui/src/views/knowledge-workflow/index.vue

@@ -38,17 +38,35 @@
           <AppIcon iconName="app-add-outlined" class="mr-4" />
           {{ $t('workflow.setting.addComponent') }}
         </el-button>
-        <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.debug(id)">
-          <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
-          {{ $t('common.debug') }}
-        </el-button>
-        <el-button v-if="permissionPrecise.workflow_edit(id)" @click="saveknowledge(true)">
-          <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
-          {{ $t('common.save') }}
-        </el-button>
-        <el-button type="primary" v-if="permissionPrecise.publish(id)" @click="publish">
-          {{ $t('common.publish') }}
-        </el-button>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.debug')} (${modifierKey} + Shift + D)`"
+          placement="top"
+        >
+          <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.debug(id)">
+            <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
+            {{ $t('common.debug') }}
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.save')} (${modifierKey} + S)`"
+          placement="top"
+        >
+          <el-button v-if="permissionPrecise.workflow_edit(id)" @click="saveknowledge(true)">
+            <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
+            {{ $t('common.save') }}
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.publish')} (${modifierKey} + Shift + P)`"
+          placement="top"
+        >
+          <el-button type="primary" v-if="permissionPrecise.publish(id)" @click="publish">
+            {{ $t('common.publish') }}
+          </el-button>
+        </el-tooltip>
 
         <el-dropdown trigger="click">
           <el-button text @click.stop class="ml-8 mt-4">
@@ -105,6 +123,10 @@
                   <el-switch size="small" v-model="isSave" @change="changeSave" />
                 </div>
               </el-dropdown-item>
+              <el-dropdown-item @click="shortcutEditorVisible = true">
+                <AppIcon iconName="app-key" class="color-secondary"></AppIcon>
+                {{ $t('workflow.shortcut.title') }}
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -123,7 +145,7 @@
     </el-collapse-transition>
     <!-- 主画布 -->
     <div class="workflow-main" ref="workflowMainRef">
-      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" />
+      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" @save="saveknowledge(true)" @debug="clickShowDebug" @publish="publish" />
     </div>
     <!-- 调试 -->
     <el-collapse-transition>
@@ -181,13 +203,15 @@
       source="work_flow"
       @refresh="getDetail"
     />
+    <ShortcutEditor v-model:visible="shortcutEditorVisible" />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onBeforeMount, onBeforeUnmount, computed, nextTick, provide } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import type { Action } from 'element-plus'
 import Workflow from '@/workflow/index.vue'
+import ShortcutEditor from '@/workflow/common/ShortcutEditor.vue'
 import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
 import ExecutionRecord from '@/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue'
 import PublishHistory from '@/views/knowledge-workflow/component/PublishHistory.vue'
@@ -243,6 +267,8 @@ let interval: any
 const workflowRef = ref()
 const loading = ref(false)
 const detail = ref<any>(null)
+const modifierKey = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? 'Cmd' : 'Ctrl'
+const shortcutEditorVisible = ref(false)
 
 const showPopover = ref(false)
 const showDebug = ref(false)

ui/src/views/tool-workflow/index.vue

@@ -38,17 +38,35 @@
           <AppIcon iconName="app-add-outlined" class="mr-4" />
           {{ $t('workflow.setting.addComponent') }}
         </el-button>
-        <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.read()">
-          <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
-          {{ $t('common.debug') }}
-        </el-button>
-        <el-button v-if="permissionPrecise.edit(id)" @click="saveTool(true)">
-          <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
-          {{ $t('common.save') }}
-        </el-button>
-        <el-button type="primary" v-if="permissionPrecise.publish(id)" @click="publish">
-          {{ $t('common.publish') }}
-        </el-button>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.debug')} (${modifierKey} + Shift + D)`"
+          placement="top"
+        >
+          <el-button @click="clickShowDebug" :disabled="showDebug" v-if="permissionPrecise.read()">
+            <AppIcon iconName="app-debug-outlined" class="mr-4"></AppIcon>
+            {{ $t('common.debug') }}
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.save')} (${modifierKey} + S)`"
+          placement="top"
+        >
+          <el-button v-if="permissionPrecise.edit(id)" @click="saveTool(true)">
+            <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
+            {{ $t('common.save') }}
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="`${$t('common.publish')} (${modifierKey} + Shift + P)`"
+          placement="top"
+        >
+          <el-button type="primary" v-if="permissionPrecise.publish(id)" @click="publish">
+            {{ $t('common.publish') }}
+          </el-button>
+        </el-tooltip>
 
         <el-dropdown trigger="click">
           <el-button text @click.stop class="ml-8 mt-4">
@@ -75,6 +93,10 @@
                   <el-switch size="small" v-model="isSave" @change="changeSave" />
                 </div>
               </el-dropdown-item>
+              <el-dropdown-item @click="shortcutEditorVisible = true">
+                <AppIcon iconName="app-key" class="color-secondary"></AppIcon>
+                {{ $t('workflow.shortcut.title') }}
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -93,7 +115,7 @@
     </el-collapse-transition>
     <!-- 主画布 -->
     <div class="workflow-main" ref="workflowMainRef">
-      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" />
+      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" @save="saveTool(true)" @debug="clickShowDebug" @publish="publish" />
     </div>
     <!-- 调试 -->
     <el-collapse-transition>
@@ -151,13 +173,15 @@
       @refresh="getDetail"
     />
     <DebugDrawer ref="debugDrawerRef"></DebugDrawer>
+    <ShortcutEditor v-model:visible="shortcutEditorVisible" />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onBeforeMount, onBeforeUnmount, computed, nextTick, provide } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import type { Action } from 'element-plus'
 import Workflow from '@/workflow/index.vue'
+import ShortcutEditor from '@/workflow/common/ShortcutEditor.vue'
 import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
 
 import PublishHistory from '@/views/tool-workflow/component/PublishHistory.vue'
@@ -210,6 +234,8 @@ const workflowRef = ref()
 const debugDrawerRef = ref<InstanceType<typeof DebugDrawer>>()
 const loading = ref(false)
 const detail = ref<any>(null)
+const modifierKey = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? 'Cmd' : 'Ctrl'
+const shortcutEditorVisible = ref(false)
 
 const showPopover = ref(false)
 const showDebug = ref(false)