feat(主题): 添加新主题颜色并扩展键盘导航功能

- 新增 $themeColor2 作为第二主题色
- 更新缩略图和框架元素的颜色使用新主题色
- 扩展键盘导航支持左右方向键切换幻灯片
- 添加调试日志用于键盘事件追踪

src/assets/styles/variable.scss

@@ -1,4 +1,5 @@
 $themeColor: #d14424;
+$themeColor2: #ec8c00;
 $themeHoverColor: #de6949;
 $textColor: #41464b;
 $borderColor: #e5e7eb;

src/hooks/useGlobalHotkey.ts

@@ -92,8 +92,9 @@ export default () => {
   }
 
   const move = (key: string) => {
+    console.log('move', key)
     if (activeElementIdList.value.length) moveElement(key)
-    else if (key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key)
+    else if (key === KEYS.UP || key === KEYS.DOWN || key === KEYS.LEFT || key === KEYS.RIGHT) updateSlideIndex(key)
   }
 
   const moveSlide = (key: string) => {

src/hooks/useSlideHandler.ts

@@ -46,11 +46,12 @@ export default () => {
    * @param command 移动页面焦点命令：上移、下移
    */
   const updateSlideIndex = (command: string) => {
-    if (command === KEYS.UP && slideIndex.value > 0) {
+    console.log('updateSlideIndex', command)
+    if ((command === KEYS.UP || command === KEYS.LEFT) && slideIndex.value > 0) {
       if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
       slidesStore.updateSlideIndex(slideIndex.value - 1)
     }
-    else if (command === KEYS.DOWN && slideIndex.value < slides.value.length - 1) {
+    else if ((command === KEYS.DOWN || command === KEYS.RIGHT) && slideIndex.value < slides.value.length - 1) {
       if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
       slidesStore.updateSlideIndex(slideIndex.value + 1)
     }

src/views/Editor/Thumbnails/index2.vue

@@ -435,26 +435,26 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
 
   .thumbnail {
     border-radius: $borderRadius;
-    outline: 2px solid rgba($color: $themeColor, $alpha: .15);
+    outline: 2px solid rgba($color: $themeColor2, $alpha: .15);
   }
 
   &.active {
     .label {
-      color: $themeColor;
+      color: $themeColor2;
     }
     .thumbnail {
-      outline-color: $themeColor;
+      outline-color: $themeColor2;
     }
   }
   &.selected {
     .thumbnail {
-      outline-color: $themeColor;
+      outline-color: $themeColor2;
     }
     .note-flag {
-      background-color: $themeColor;
+      background-color: $themeColor2;
 
       &::after {
-        border-top-color: $themeColor;
+        border-top-color: $themeColor2;
       }
     }
   }
@@ -467,7 +467,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
     left: 8px;
     top: 13px;
     font-size: 8px;
-    background-color: rgba($color: $themeColor, $alpha: .75);
+    background-color: rgba($color: $themeColor2, $alpha: .75);
     color: #fff;
     text-align: center;
     line-height: 12px;
@@ -481,7 +481,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
       top: 10px;
       left: 4px;
       border: 4px solid transparent;
-      border-top-color: rgba($color: $themeColor, $alpha: .75);
+      border-top-color: rgba($color: $themeColor2, $alpha: .75);
     }
   }
 }
@@ -519,11 +519,11 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
   color: #555;
 
   &.contextmenu-active {
-    color: $themeColor;
+    color: $themeColor2;
 
     .text::before {
-      border-bottom-color: $themeColor;
-      border-right-color: $themeColor;
+      border-bottom-color: $themeColor2;
+      border-right-color: $themeColor2;
     }
   }
 

src/views/Student/index.vue

@@ -2458,6 +2458,7 @@ const getRefreshButtonRight = () => {
 
 // 键盘快捷键
 const handleKeydown = (e: KeyboardEvent) => {
+  console.log('键盘事件:', e.key)
   switch (e.key) {
     case 'ArrowLeft':
       e.preventDefault()

src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -284,7 +284,7 @@ const handleIframeLoad = async (event: Event) => {
 .thumbnail-content-inner {
   width: 100%;
   height: 100%;
-  color: #3681fc;
+  color: #ec8c00;
   font-size: 110px;
   font-weight: 600;
   text-align: center;