sysBtn and flexible config mobileKeyboard

docs/develop/share/index.md

@@ -42,6 +42,7 @@ See API design in [`module_ProjectRunner.ts`](./module_ProjectRunner.ts).
 See API design in [`module_Recording.ts`](./module_Recording.ts).
 
 ### MobileKeyboard
+
 移动键盘的组件，负责键盘的展示与编辑逻辑，与 Project 绑定。
 
 See API design in [`module_MobileKeyboard.ts`](./module_MobileKeyboard.ts).
@@ -93,12 +94,12 @@ graph TB
 
     %% 功能模块层
     subgraph FunctionLayer["功能模块层"]
-        VirtualKeyboard["`**VirtualKeyboard**
-        虚拟键盘模块`"]
-        
+        MobileKeyboard["`**MobileKeyboard**
+        移动端键盘模块`"]
+
         ProjectRunner["`**ProjectRunner**
         游戏引擎接口模块`"]
-        
+
         Recording["`**Recording**
         录屏展示模块`"]
     end
@@ -107,7 +108,7 @@ graph TB
     subgraph APILayer["API 服务层"]
         RecordingAPIs["`**Recording APIs**
         录屏管理服务`"]
-        
+
         ProjectAPIs["`**Project APIs**
         项目管理服务`"]
     end
@@ -116,10 +117,10 @@ graph TB
     subgraph ShareLayer["分享界面层"]
         DirectSharing["`**DirectSharing**
         直接分享弹窗`"]
-        
+
         ProjectRecordingSharing["`**ProjectRecordingSharing**
         录屏分享弹窗`"]
-        
+
         ScreenShotSharing["`**ScreenShotSharing**
         截屏分享弹窗`"]
     end
@@ -128,7 +129,7 @@ graph TB
     subgraph PlatformLayer["平台集成层"]
         PlatformSelector["`**PlatformSelector**
         平台选择组件`"]
-        
+
         PlatformShare["`**PlatformShare**
         第三方平台集成`"]
     end
@@ -140,16 +141,16 @@ graph TB
     end
 
     %% 主要流程连接
-    BuilderUI --> VirtualKeyboard
+    BuilderUI --> MobileKeyboard
     BuilderUI --> ProjectRunner
     BuilderUI --> Recording
     BuilderUI --> DirectSharing
     BuilderUI --> ScreenShotSharing
     BuilderUI --> ProjectRecordingSharing
 
     %% 功能模块间连接
-    VirtualKeyboard --> ProjectRunner
-    VirtualKeyboard --> ProjectAPIs
+    MobileKeyboard --> ProjectRunner
+    MobileKeyboard --> ProjectAPIs
 
     %% 分享流程连接
     DirectSharing --> PlatformSelector

docs/develop/share/module_MobileKeyboard.ts

@@ -1,25 +1,25 @@
 import { dispatchKeyToEvent } from "./module_ProjectAPIs";
 import type {
-  MobileKeyboardZoneToKeyMapping,
+  MobileKeyboardBtns,
   MobileKeyboardType,
 } from "./module_ProjectAPIs";
 
 export type KeyboardConfig = {
   type: MobileKeyboardType;
-  mapping: MobileKeyboardZoneToKeyMapping;
+  btns: MobileKeyboardBtns;
 };
 export type UI = any;
 
 export declare function useModal<T>(
   component: any
 ): (props?: any) => Promise<T>;
 
-export declare function KeyboardEditorModal(
+export declare function KeyboardEditor(
   props: {
-    zoneToKeyMapping: MobileKeyboardZoneToKeyMapping;
+    mobileKeyboardBtns: MobileKeyboardBtns;
   },
   emits: {
-    resolved: (result: MobileKeyboardZoneToKeyMapping) => void;
+    resolved: (result: MobileKeyboardBtns) => void;
   }
 ): UI;
 
@@ -37,44 +37,27 @@ export declare function KeyboardEditorModal(
  *
  * use:
  * ```vue
- * <MobileKeyboardView :ZoneToKeyMapping="{ lt: 'Q', rt: 'E' }">
+ * <MobileKeyboardView
+ * :ZoneToKeyMapping="{ label: 'Q', posX: 0, posY: 0, btnWidth: 50, btnHeight: 50 }"
+ * @close="emit('close')"
+ * @rerun="emit('rerun')"
+ * />
  *   <template>
  *     <ProjectRunner :project="project" />
  *   </template>
  * </MobileKeyboardView>
  * ```
  */
-export type MobileKeyboardViewProps = {
-  zoneToKeyMapping: MobileKeyboardZoneToKeyMapping;
-};
-
-export declare function MobileKeyboardView({
-  zoneToKeyMapping,
-}: MobileKeyboardViewProps): UI;
-//  {
-//   const zones = Object.keys(ZoneToKeyMapping);
-//   const zoneToKey = ZoneToKeyMapping;
-//   const handleKeyEvent = (type: string, key: string, code: string) => {
-//     dispatchKeyToEvent(type, code);
-//   };
-
-//   const keyButtons = zones
-//     .map(
-//       (zone) =>
-//         `<UIKeyBtn key="${zone}" value="${zoneToKey[zone]}" active={true} onKeyEvent=${handleKeyEvent} />`
-//     )
-//     .join("");
 
-//   return `
-//     <div className="phone-layout">
-//       <slot name="gameView">
-//       </slot>
-//       <div className="keyboard-zones">
-//         ${keyButtons}
-//       </div>
-//     </div>
-//   `;
-// }
+export declare function MobileKeyboardView(
+  props: {
+    mobileKeyboardBtns: MobileKeyboardBtns;
+  },
+  emits: {
+    close: [];
+    rerun: [];
+  }
+): UI;
 
 //  key UI in Keyboard. provide to MobileKeyboardView and MobileKeyboardEidt
 // active is used to indicate whether a button has functionality（onKeyEvent）.

docs/develop/share/module_ProjectAPIs.ts

@@ -4,29 +4,15 @@ import type {
 } from "../../../spx-gui/src/apis/common/index.ts";
 import { type ProjectRelease } from "../../../spx-gui/src/apis/project-release.ts";
 
-/**
- * Valid mobile keyboard zones
- */
-export const MOBILE_KEYBOARD_ZONES = [
-  "lt",
-  "rt",
-  "lbUp",
-  "lbLeft",
-  "lbRight",
-  "lbDown",
-  "rbA",
-  "rbB",
-  "rbX",
-  "rbY",
-] as const;
-
-export type MobileKeyboardZone = (typeof MOBILE_KEYBOARD_ZONES)[number];
-/**
- * Zone to key mapping for mobile keyboard
- */
-export type MobileKeyboardZoneToKeyMapping = {
-  [zone in MobileKeyboardZone]: string | null;
+export type KeyBtn = {
+  /** The text displayed on the key. */
+  label: string;
+  /** The horizontal coordinate of the left top corner of the key (pixels). */
+  posX: number;
+  /** The vertical coordinate of the left top corner of the key (pixels). */
+  posY: number;
 };
+export type MobileKeyboardBtns = KeyBtn[];
 /**
  * Mobile keyboard type
  * - NoKeyboard: No keyboard
@@ -77,7 +63,7 @@ export type ProjectData = {
   /** Mobile keyboard type */
   mobileKeyboardType: MobileKeyboardType;
   /** Zone to key mapping for mobile keyboard */
-  mobileKeyboardZoneToKey?: MobileKeyboardZoneToKeyMapping;
+  mobileKeyboardBtns?: MobileKeyboardBtns;
 };
 
 /**
@@ -95,7 +81,7 @@ export type AddProjectParams = {
   /** Mobile keyboard type */
   mobileKeyboardType: MobileKeyboardType;
   /** Zone to key mapping for mobile keyboard */
-  mobileKeyboardZoneToKey?: MobileKeyboardZoneToKeyMapping;
+  mobileKeyboardBtns?: MobileKeyboardBtns;
 };
 
 /**
@@ -111,7 +97,7 @@ export type AddProjectByRemixParams = {
   /** Mobile keyboard type */
   mobileKeyboardType: MobileKeyboardType;
   /** Zone to key mapping for mobile keyboard */
-  mobileKeyboardZoneToKey?: MobileKeyboardZoneToKeyMapping;
+  mobileKeyboardBtns?: MobileKeyboardBtns;
 };
 
 /**
@@ -131,7 +117,7 @@ export type UpdateProjectParams = {
   /** Mobile keyboard type */
   mobileKeyboardType?: MobileKeyboardType;
   /** Zone to key mapping for mobile keyboard */
-  mobileKeyboardZoneToKey?: MobileKeyboardZoneToKeyMapping;
+  mobileKeyboardBtns?: MobileKeyboardBtns;
 };
 
 /**