Merge pull request #9 from kongying-tavern/refactor/keyboard

refactor keyboard UI layout

Author: boxsnake

src/shared/keyboardLayout.ts

@@ -1,32 +1,27 @@
-export interface KeyboardLayoutOptions {
-  framework: KeyboardFrameworkOptions;
-  layout: KeyboardWidgetOption[];
+export interface KeyboardOption {
+  layout: KeyboardComponentOption[];
 }
 
-export interface KeyboardFrameworkOptions {
-  // TODO
-}
+export type KeyboardLayoutOption = KeyboardRowOption;
+export type KeyboardWidgetOption = KeyboardKeyOption | KeyboardSpanOption;
+
+export type KeyboardComponentOption =
+  | KeyboardLayoutOption
+  | KeyboardWidgetOption;
 
-export type KeyboardKeyType = "key" | "span" | "nl";
+export interface KeyboardRowOption {
+  type: "row";
+  children: KeyboardWidgetOption[];
+}
 
 export interface KeyboardKeyOption {
+  type: "key";
   width?: string | number;
-  keyTextMain: string;
   keyCode: number;
+  keyTextMain: string;
 }
 
 export interface KeyboardSpanOption {
+  type: "span";
   width: string | number;
 }
-
-export interface KeyboardNlOption {}
-
-export type KeyboardWidgetOptions =
-  | KeyboardKeyOption
-  | KeyboardSpanOption
-  | KeyboardNlOption;
-
-export interface KeyboardWidgetOption {
-  type: KeyboardKeyType;
-  options?: KeyboardWidgetOptions;
-}

src/views/pageTypewriter/PageTypewriter.vue

@@ -5,12 +5,10 @@ import InputArea from "./components/InputArea.vue";
 </script>
 
 <template>
-  <main class="flex flex-row fixed top-0 bottom-0 left-0 right-0">
-    <div class="flex flex-col flex-3 p-3 space-y-3">
-      <TextPreview class="flex-auto"></TextPreview>
-      <InputArea class="flex-none"></InputArea>
-      <ConfigBar class="flex-none"></ConfigBar>
-    </div>
+  <main class="flex flex-col fixed top-0 bottom-0 left-0 right-0 p-3 space-y-3">
+    <TextPreview class="flex-auto"></TextPreview>
+    <InputArea class="flex-none"></InputArea>
+    <ConfigBar class="flex-none"></ConfigBar>
   </main>
 </template>