From 5111c5ec3ecd2f49ea27b4795a4e7762c4444430 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Tue, 22 Jun 2021 21:42:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E8=A1=A8=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=B7=BB=E5=8A=A0=E5=BF=AB=E6=8D=B7=E9=94=AE?=
 =?UTF-8?q?=EF=BC=9A=E5=9B=9E=E8=BD=A6=E8=81=9A=E7=84=A6=E5=88=B0=E4=B8=8B?=
 =?UTF-8?q?=E4=B8=80=E8=A1=8C(#44)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/configs/hotkey.ts                         |  6 ++++
 .../ChartStylePanel/ChartDataEditor.vue       | 29 +++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/configs/hotkey.ts b/src/configs/hotkey.ts
index cd32fb5c..43fcfff4 100644
--- a/src/configs/hotkey.ts
+++ b/src/configs/hotkey.ts
@@ -84,6 +84,12 @@ export const HOTKEY_DOC = [
       { label: '在右侧插入一列', value: 'Ctrl + →' },
     ],
   },
+  {
+    type: '图表数据编辑',
+    children: [
+      { label: '聚焦到下一行', value: 'Enter' },
+    ],
+  },
   {
     type: '文本编辑',
     children: [
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
index 4ae3820e..dd666fc0 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
@@ -29,6 +29,7 @@
                 :class="['item', { 'selected': rowIndex <= selectedRange[1] && colIndex <= selectedRange[0] }]"
                 :id="`cell-${rowIndex - 1}-${colIndex - 1}`"
                 autocomplete="off"
+                @focus="focusCell = [rowIndex - 1, colIndex - 1]"
               >
             </td>
           </tr>
@@ -44,8 +45,9 @@
 </template>
 
 <script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
 import { ChartData } from '@/types/slides'
-import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
+import { KEYS } from '@/configs/hotkey'
 
 const CELL_WIDTH = 100
 const CELL_HEIGHT = 32
@@ -61,6 +63,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const selectedRange = ref([0, 0])
     const tempRangeSize = ref({ width: 0, height: 0 })
+    const focusCell = ref<[number, number] | null>(null)
 
     // 当前选区的边框线条位置
     const rangeLines = computed(() => {
@@ -110,6 +113,27 @@ export default defineComponent({
 
     onMounted(initData)
 
+    // 快捷键监听：回车移动焦点到下一行
+    const moveNextRow = () => {
+      if (!focusCell.value) return
+
+      const [rowIndex, colIndex] = focusCell.value
+      const inputRef = document.querySelector(`#cell-${rowIndex + 1}-${colIndex}`) as HTMLInputElement
+      inputRef && inputRef.focus()
+    }
+
+    const keyboardListener = (e: KeyboardEvent) => {
+      const key = e.key.toUpperCase()
+      if (key === KEYS.ENTER) moveNextRow()
+    }
+
+    onMounted(() => {
+      document.addEventListener('keydown', keyboardListener)
+    })
+    onUnmounted(() => {
+      document.removeEventListener('keydown', keyboardListener)
+    })
+
     // 获取当前图表DOM中的数据，整理格式化后传递出去
     const getTableData = () => {
       const [col, row] = selectedRange.value
@@ -200,8 +224,9 @@ export default defineComponent({
       tempRangeSize,
       rangeLines,
       resizablePointStyle,
-      changeSelectRange,
       selectedRange,
+      focusCell,
+      changeSelectRange,
       getTableData,
       closeEditor,
     }