[vue3] merge from vue2 branch

Author: tzfun

src/Terminal.vue

@@ -19,7 +19,7 @@ import {
   TerminalAsk,
   TerminalFlash,
   InputTipsSearchHandlerFunc,
-  InputTipsSelectHandlerFunc, TerminalElementInfo
+  InputTipsSelectHandlerFunc, TerminalElementInfo, TerminalCursorStyle
 } from "./types";
 import {
   _copyTextToClipboard, _debounce,
@@ -38,7 +38,7 @@ import {
   _isSafari,
   _nonEmpty,
   _openUrl,
-  _pointInRect,
+  _pointInRect, _screenType,
 } from "~/common/util.ts";
 import api, {register, rename, unregister} from "~/common/api";
 import {DEFAULT_COMMANDS} from "~/common/configuration.ts";
@@ -131,15 +131,9 @@ const props = defineProps({
     type: Number,
     default: 15
   },
-  /**
-   * 光标样式，可选值：
-   * - block
-   * - underline
-   * - bar
-   * - none
-   */
+  //  光标样式
   cursorStyle: {
-    type: String,
+    type: String as PropType<TerminalCursorStyle>,
     default: () => "block"
   },
   //  光标闪烁开关
@@ -197,6 +191,14 @@ const containerStyle = computed(() => {
   return ''
 })
 
+const isEnableHelpBox = computed<boolean>(() => {
+  return props.enableHelpBox && tips.items[tips.selectedIndex] && tips.items[tips.selectedIndex].command
+})
+
+const selectedTipCommand = computed<Command | null>(() => {
+  return tips.items[tips.selectedIndex] ? tips.items[tips.selectedIndex].command : null
+})
+
 const _name = ref<string>()
 const command = ref<string>("")
 const cursorConf = reactive({
@@ -696,7 +698,7 @@ const _searchCmd = () => {
         items.push({
           content: o.keyword,
           description: o.item.description,
-          attach: o.item
+          command: o.item
         })
       }
       _updateTipsItems(items, cursorInKey)
@@ -1241,21 +1243,27 @@ const _onInput = (e: InputEvent) => {
 
   _calculateTipsPos()
 
-  _checkInputCursor()
-  _calculateCursorPos()
+  nextTick(() => {
+    _checkInputCursor()
+    _calculateCursorPos()
+
+    let helpBoxRef  = terminalHelpBoxRef.value
+    if (helpBoxRef) {
+      let cursorRect = terminalCursorRef.value.getBoundingClientRect()
+      let helpBoxRect = tips.helpBox.defaultBoxRect || helpBoxRef.getBoundingClientRect()
+      if (cursorRect && helpBoxRect && _pointInRect({
+        x: cursorRect.x + byteLen.en * 2,
+        y: cursorRect.y + FONT_HEIGHT
+      }, helpBoxRect)) {
+        tips.helpBox.open = false
+        tips.helpBox.defaultBoxRect = helpBoxRect
+      } else {
+        tips.helpBox.open = true
+        tips.helpBox.defaultBoxRect = null
+      }
+    }
+  })
 
-  let cursorRect = terminalCursorRef.value.getBoundingClientRect()
-  let helpBoxRect = tips.helpBox.defaultBoxRect || terminalHelpBoxRef.value.getBoundingClientRect()
-  if (cursorRect && helpBoxRect && _pointInRect({
-    x: cursorRect.x + byteLen.en * 2,
-    y: cursorRect.y + FONT_HEIGHT
-  }, helpBoxRect)) {
-    tips.helpBox.open = false
-    tips.helpBox.defaultBoxRect = helpBoxRect
-  } else {
-    tips.helpBox.open = true
-    tips.helpBox.defaultBoxRect = null
-  }
 }
 
 const _checkInputCursor = () => {
@@ -1696,7 +1704,7 @@ const _selectTips = () => {
     })
     return
   }
-  command.value = selectedItem.attach.key
+  command.value = selectedItem.command.key
   _resetCursorPos()
   _jumpToBottom()
 }
@@ -1864,12 +1872,12 @@ defineExpose({
         </p>
       </div>
     </div>
-    <div v-if="enableHelpBox">
-      <slot name="helpBox" :showHeader="showHeader" :item="tips.items[tips.selectedIndex] ? tips.items[tips.selectedIndex].attach : null">
-        <t-help-box ref="terminalHelpBox"
+    <div v-if="isEnableHelpBox">
+      <slot name="helpBox" :showHeader="showHeader" :item="selectedTipCommand">
+        <t-help-box ref="terminalHelpBoxRef"
                     :top="headerHeight + 10"
-                    :content="tips.items[tips.selectedIndex] ? tips.items[tips.selectedIndex].attach : null"
-                    v-show="tips.helpBox.open"/>
+                    :content="selectedTipCommand"
+                    v-show="tips.helpBox.open && !_screenType().xs"/>
       </slot>
     </div>
 

src/components/THelpBox.vue

@@ -1,42 +1,40 @@
 <script setup lang="ts">
 import {PropType, ref} from "vue";
-import {SearchResult} from "~/types";
+import {Command} from "~/types";
 
 defineProps({
   top: Number,
-  result: Object as PropType<SearchResult>
+  content: Object as PropType<Command>
 })
 const terminalHelpBoxRef = ref()
-const getClientRect = (): DOMRect => {
+
+const getBoundingClientRect = (): DOMRect => {
   return terminalHelpBoxRef.value.getBoundingClientRect()
 }
 
 defineExpose({
-  getClientRect
+  getBoundingClientRect
 })
 </script>
 
 <template>
   <div class="t-cmd-help"
        ref="terminalHelpBoxRef"
        :style="`top: ${top}px;max-height: calc(100% - ${top}px);`">
-    <p class="text"
-       v-if="result.item.description"
-       style="margin: 15px 0"
-       v-html="result.item.description"/>
-    <div v-if="result.item.example && result.item.example.length > 0">
-      <div v-for="(it,idx) in result.item.example" :key="idx" class="text">
-        <div v-if="result.item.example.length === 1">
-          <span>Example: <code>{{ it.cmd }}</code> {{ it.des }}</span>
+    <div class="t-cmd-help-des" v-if="content.description" v-html="content.description"/>
+    <div v-if="content.example && content.example.length > 0">
+      <div v-for="(it,idx) in content.example" :key="idx" class="text">
+        <div v-if="content.example.length === 1">
+          <span>Example: <code class="t-code-inline">{{ it.cmd }}</code> {{ it.des }}</span>
         </div>
         <div v-else>
           <div class="t-cmd-help-eg">
-            eg{{ (result.item.example.length > 1 ? (idx + 1) : '') }}:
+            eg{{ (content.example.length > 1 ? (idx + 1) : '') }}:
           </div>
           <div class="t-cmd-help-example">
             <ul class="t-example-ul">
-              <li class="t-example-li"><code>{{ it.cmd }}</code></li>
-              <li class="t-example-li"><span v-if="it.des != null" class="t-cmd-help-des">{{ it.des }}</span></li>
+              <li class="t-example-li"><code class="t-code-inline">{{ it.cmd }}</code></li>
+              <li class="t-example-li"><span v-if="it.des != null" class="t-cmd-help-des-item">{{ it.des }}</span></li>
             </ul>
           </div>
         </div>

src/types/index.ts

@@ -1,3 +1,9 @@
+export type TerminalMessageClass = 'success' | 'error' | 'info' | 'warning' | 'system'
+
+export type TerminalMessageType = 'cmdLine' | 'normal' | 'json' | 'code' | 'table' | 'html' | 'ansi'
+
+export type TerminalCursorStyle = 'block' | 'underline' | 'bar' | 'none'
+
 export interface EditorConfig {
     open: boolean
     focus: boolean
@@ -20,12 +26,6 @@ export type DragConfig = {
     pinned?: boolean
 }
 
-export type SearchResult = {
-    show: boolean
-    defaultBoxRect: null
-    item?: Command
-}
-
 export type ScreenType = {
     xs?: boolean
     sm?: boolean
@@ -70,9 +70,9 @@ export type MessageGroup = {
 }
 
 export type Message = {
-    type?: 'normal' | 'json' | 'code' | 'table' | 'html' | 'ansi' | 'cmdLine'
+    type?: TerminalMessageType
     content: string | number | object | MessageContentTable | Array<any>
-    class?: 'success' | 'error' | 'info' | 'warning' | 'system'
+    class?: TerminalMessageClass
     tag?: string,
     depth?: number
 }
@@ -87,7 +87,7 @@ export type AskConfig = {
 export type InputTipItem = {
     content: string,
     description?: string,
-    attach?: Command
+    command?: Command
 }
 
 export type CharWidth = {

test/App.vue

@@ -275,7 +275,7 @@ const setCommand = () => {
           :show-header="item.showHeader"
           :push-message-before="pushMessageBefore"
           :log-size-limit="20"
-          cursor-style="bar"
+          cursor-style="block"
           :enable-cursor-blink="true"
           :line-space="15"
           enable-hover-stripe