├── design
    ├── vue.png
    └── logo.html
├── shortcut
    ├── logo.png
    ├── dragging.gif
    ├── ele-info.png
    └── vue-web-terminal.gif
├── tsconfig.node.json
├── .github
    └── ISSUE_TEMPLATE
    │   ├── Feature or Suggestion.md
    │   └── Bug.md
├── vue-web-terminal.iml
├── .npmignore
├── index.html
├── test
    ├── main.ts
    └── App.vue
├── src
    ├── components
    │   ├── TViewerCode.vue
    │   ├── TViewerNormal.vue
    │   ├── TViewerTable.vue
    │   ├── TViewerJson.vue
    │   ├── TEditor.vue
    │   ├── THelpBox.vue
    │   └── THeader.vue
    ├── index.ts
    ├── env.d.ts
    ├── common
    │   ├── configuration.ts
    │   ├── api
    │   │   └── index.ts
    │   ├── store
    │   │   └── index.ts
    │   └── util.ts
    ├── css
    │   ├── scrollbar.css
    │   ├── theme
    │   │   ├── light.css
    │   │   └── dark.css
    │   ├── ansi.css
    │   └── style.css
    ├── ansi
    │   ├── ansi-256-colors.json
    │   └── index.ts
    ├── types
    │   └── index.ts
    └── Terminal.vue
├── .gitignore
├── tsconfig.json
├── package.js
├── publish.py
├── package.json
├── vite.config.ts
├── README_ZH.md
├── README.md
└── LICENSE


/design/vue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tzfun/vue-web-terminal/HEAD/design/vue.png


--------------------------------------------------------------------------------
/shortcut/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tzfun/vue-web-terminal/HEAD/shortcut/logo.png


--------------------------------------------------------------------------------
/shortcut/dragging.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tzfun/vue-web-terminal/HEAD/shortcut/dragging.gif


--------------------------------------------------------------------------------
/shortcut/ele-info.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tzfun/vue-web-terminal/HEAD/shortcut/ele-info.png


--------------------------------------------------------------------------------
/shortcut/vue-web-terminal.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tzfun/vue-web-terminal/HEAD/shortcut/vue-web-terminal.gif


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/Feature or Suggestion.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature or Suggestion
 3 | about: Provide some better suggestions or optimizations
 4 | title: ''
 5 | labels: enhancement
 6 | assignees: tzfun
 7 | 
 8 | ---
 9 | 
10 | **Feature or optimization description**
11 | 
12 | **Applicable scene**
13 | 


--------------------------------------------------------------------------------
/vue-web-terminal.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
4 |     <exclude-output />
5 |     <content url="file://$MODULE_DIR$" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |   </component>
8 | </module>


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .*
 2 | *.md
 3 | *.yml
 4 | *.iml
 5 | *.lock
 6 | *.html
 7 | tsconfig.json
 8 | tsconfig.node.json
 9 | vite.config.ts
10 | build/
11 | node_modules/
12 | src/
13 | test/
14 | dist/
15 | public/
16 | gulpfile.js
17 | babel.config.js
18 | webpack.config.js
19 | vue.config.js
20 | package.js
21 | lib/*.html
22 | lib/*.chunk.*
23 | lib/*.txt
24 | lib/*.png
25 | lib/*.gif
26 | lib/*.jpg
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 | <!--    <link rel="icon" type="image/svg+xml" href="/vite.svg" />-->
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>vue-web-terminal demo</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/test/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/test/main.ts:
--------------------------------------------------------------------------------
 1 | // @ts-ignore
 2 | import App from './App.vue'
 3 | import {createApp} from "vue";
 4 | import { createTerminal } from '../src'
 5 | 
 6 | const app = createApp(App)
 7 | 
 8 | const terminal = createTerminal()
 9 | terminal.configStoreName("test-terminal")
10 | terminal.configMaxStoredCommandCountPerInstance(2)
11 | 
12 | //  这行代码是一个错误示例
13 | // terminal.configTheme("custom", "s")
14 | 
15 | app.use(terminal)
16 | 
17 | app.mount('#app')
18 | 


--------------------------------------------------------------------------------
/src/components/TViewerCode.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {PropType} from "vue";
 3 | import {Message} from "~/types";
 4 | 
 5 | defineProps({
 6 |   message: Object as PropType<Message>
 7 | })
 8 | 
 9 | </script>
10 | 
11 | <template>
12 |   <div class="t-code t-code-default">
13 |     <pre style="padding: 1em;margin: 0"><code style="font-size: 15px">{{ message.content }}</code></pre>
14 |   </div>
15 | </template>
16 | 
17 | <style scoped>
18 | 
19 | </style>
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | # local env files
11 | .env.local
12 | .env.*.local
13 | 
14 | node_modules
15 | dist
16 | dist-ssr
17 | *.local
18 | /lib
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | .vscode
25 | .DS_Store
26 | *.suo
27 | *.ntvs*
28 | *.njsproj
29 | *.sln
30 | *.sw?
31 | 
32 | /vue-web-terminal.css
33 | /vue-web-terminal.js
34 | stats.html
35 | /docs/
36 | /docs/.vuepress/
37 | pnpm-lock.yaml
38 | /yarn.lock
39 | 


--------------------------------------------------------------------------------
/src/components/TViewerNormal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | import {_nonEmpty} from "~/common/util.ts";
 4 | import {PropType} from "vue";
 5 | import {Message} from "~/types";
 6 | defineProps({
 7 |   message: Object as PropType<Message>,
 8 |   idx: [Number, String]
 9 | })
10 | 
11 | </script>
12 | 
13 | <template>
14 |   <span class="t-content-normal">
15 |     <span v-if="_nonEmpty(message.tag == null ? message.class : message.tag)"
16 |           :class="message.class"
17 |           style="margin-right: 10px">{{ message.tag == null ? message.class : message.tag }}</span>
18 |     <span v-html="message.content"></span>
19 |   </span>
20 | </template>
21 | 
22 | <style scoped>
23 | 
24 | </style>


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/Bug.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: bug
 6 | assignees: tzfun
 7 | 
 8 | ---
 9 | 
10 | **Bug description**
11 | A clear and concise description of what the bug is.
12 | 
13 | **Steps to reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Screenshot**
21 | If applicable, add screenshots to help explain your problem.
22 | 
23 | **Reproduce environment:**
24 |  - OS: [e.g. iOS]
25 |  - Browser [e.g. chrome, safari]
26 |  - Version [e.g. 2.0.4]
27 | 
28 | **Detailed Description**
29 | Add any other context about the problem here.
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "target": "ES2020",
 5 |     "useDefineForClassFields": true,
 6 |     "module": "ESNext",
 7 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 8 |     "skipLibCheck": true,
 9 |     "paths": {
10 |       "~/*": ["src/*"]
11 |     },
12 |     /* Bundler mode */
13 |     "moduleResolution": "bundler",
14 |     "allowImportingTsExtensions": true,
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "preserve",
18 |     "noEmit": false,
19 |     "emitDeclarationOnly": true,
20 |     "declaration": true,
21 |     "declarationDir": "lib"
22 |   },
23 |   "include": [
24 |     "src/**/*.ts",
25 |     "src/**/*.d.ts",
26 |     "src/**/*.tsx",
27 |     "src/**/*.vue"
28 |   ],
29 |   "references": [{ "path": "./tsconfig.node.json" }]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/TViewerTable.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {PropType} from "vue";
 3 | import {Message, MessageContentTable} from "~/types";
 4 | 
 5 | defineProps({
 6 |   message: Object as PropType<Message>,
 7 |   idx: [Number, String]
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <table class="t-table t-border-dashed">
13 |     <thead>
14 |     <tr class="t-border-dashed">
15 |       <td v-for="it in (message.content as MessageContentTable).head" :key="it" class="t-border-dashed">{{ it }}</td>
16 |     </tr>
17 |     </thead>
18 |     <tbody>
19 |     <tr v-for="(row, idx) in (message.content as MessageContentTable).rows" :key="idx" class="t-border-dashed">
20 |       <td v-for="(it, idx) in row" :key="idx" class="t-border-dashed">
21 |         <div v-html="it"></div>
22 |       </td>
23 |     </tr>
24 |     </tbody>
25 |   </table>
26 | </template>
27 | 
28 | <style scoped>
29 | 
30 | </style>


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import './css/scrollbar.css'
 2 | import './css/ansi.css'
 3 | import './css/style.css'
 4 | import 'vue-json-viewer/style.css'
 5 | import type {App} from 'vue'
 6 | import TerminalApi, {configMaxStoredCommandCountPerInstance, configStoreName, configTheme} from "./common/api"
 7 | import Terminal from "./Terminal.vue"
 8 | import {TerminalAsk, TerminalFlash, VueWebTerminal} from "./types"
 9 | import {getStore, initStore} from "~/common/store";
10 | 
11 | const install = (app: App): void => {
12 |     initStore()
13 |     app.component(Terminal.__name as string, Terminal)
14 | }
15 | 
16 | const createTerminal = (): VueWebTerminal => {
17 |     return {
18 |         install,
19 |         configTheme,
20 |         configStoreName,
21 |         configMaxStoredCommandCountPerInstance
22 |     }
23 | }
24 | 
25 | export * from './types'
26 | 
27 | export {
28 |     Terminal,
29 |     TerminalApi,
30 |     TerminalAsk,
31 |     TerminalFlash,
32 |     createTerminal,
33 |     getStore
34 | }
35 | 
36 | export default Terminal
37 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vite/client" />
 2 | 
 3 | import '@vue/runtime-core'
 4 | 
 5 | export {}
 6 | 
 7 | declare module '@vue/runtime-core' {
 8 |   export interface GlobalComponents {
 9 |     THeader: typeof import("~/components/THeader.vue")['default']
10 |     TEditor: typeof import("~/components/TEditor.vue")['default']
11 |     THelpBox: typeof import("~/components/THelpBox.vue")['default']
12 |     TViewerCode: typeof import("~/components/TViewerCode.vue")['default']
13 |     TViewerJson: typeof import("~/components/TViewerJson.vue")['default']
14 |     TViewerNormal: typeof import("~/components/TViewerNormal.vue")['default']
15 |     TViewerTable: typeof import("~/components/TViewerTable.vue")['default']
16 |     JsonViewer: typeof import("vue-json-viewer")['default']
17 |     Terminal: typeof import("~/Terminal.vue")['default']
18 |   }
19 | }
20 | 
21 | declare module "*.vue" {
22 |   import { DefineComponent } from "vue";
23 |   const component: DefineComponent<{}, {}, any>;
24 |   export default component;
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/TViewerJson.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {PropType, reactive} from "vue";
 3 | import {_parseToJson} from "~/common/util.ts";
 4 | import {Message} from "~/types";
 5 | import JsonViewer from 'vue-json-viewer'
 6 | 
 7 | defineProps({
 8 |   message: Object as PropType<Message>,
 9 |   idx: [Number, String]
10 | })
11 | 
12 | const jsonViewDepth = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
13 | 
14 | </script>
15 | 
16 | <template>
17 |   <span style="position: relative" class="t-json-container">
18 |     <json-viewer :expand-depth="message.depth"
19 |                  sort
20 |                  copyable
21 |                  expanded
22 |                  :key="idx + '_' + message.depth"
23 |                  :value="_parseToJson(message.content)">
24 |     </json-viewer>
25 |     <select class="t-json-deep-selector" v-model="message.depth">
26 |       <option value="" disabled selected hidden label="Choose a display deep"></option>
27 |       <option
28 |           v-for="i in jsonViewDepth"
29 |           :key="i"
30 |           :label="`Deep ${i}`"
31 |           :value="i">
32 |       </option>
33 |     </select>
34 |   </span>
35 | </template>
36 | 
37 | <style scoped>
38 | 
39 | </style>
40 | 


--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import fs from 'fs'
 3 | 
 4 | function copyDir(src, dest) {
 5 |     fs.mkdirSync(dest)
 6 |     for (let f of fs.readdirSync(src)) {
 7 |         fs.copyFileSync(path.join(src, f), path.join(dest, f));
 8 |     }
 9 |     console.log('copied', `'${src}'`, '-->', `'${dest}'`)
10 | }
11 | 
12 | function deleteFile(fileOrDirName) {
13 |     let stat = fs.statSync(fileOrDirName)
14 |     if (stat.isDirectory()) {
15 |         for (let f of fs.readdirSync(fileOrDirName)) {
16 |             let filePath = path.join(fileOrDirName, f)
17 |             deleteFile(filePath)
18 |         }
19 |         fs.rmdirSync(fileOrDirName)
20 |     } else {
21 |         fs.unlinkSync(fileOrDirName)
22 |         console.log(`deleted ==> ${fileOrDirName}`)
23 |     }
24 | }
25 | 
26 | function deleteFileWithPattern(dir, regexp) {
27 |     for (let f of fs.readdirSync(dir)) {
28 |         if (f.match(regexp)) {
29 |             fs.unlinkSync(path.join(dir, f))
30 |             console.log(`deleted ==> ${dir}/${f}`)
31 |         }
32 |     }
33 | }
34 | 
35 | function copyTypes() {
36 |     fs.copyFileSync('./lib/types/index.d.ts', './lib/types.d.ts')
37 |     deleteFile('./lib/types')
38 |     console.log(`copied types.d.ts`)
39 | }
40 | 
41 | // copyDir('./src/css/theme', './lib/theme');
42 | deleteFile('./lib/ansi')
43 | deleteFile('./lib/common')
44 | deleteFile('./lib/components')
45 | deleteFileWithPattern('./lib', /\.(png|gif|jpg)/)
46 | // copyTypes()
47 | 


--------------------------------------------------------------------------------
/publish.py:
--------------------------------------------------------------------------------
 1 | # encoding=utf8
 2 | 
 3 | import subprocess
 4 | import platform
 5 | 
 6 | NPM_REPOSITORY="https://registry.npmjs.org"
 7 | NPM_REPOSITORY_MIRROR="https://registry.npmmirror.com"
 8 | NODE_VERSION = 18
 9 | ENCODING = "gbk" if platform.system().lower() == 'windows' else 'utf-8'
10 | 
11 | def execute(command, with_result = False,encoding = ENCODING):
12 |     print(f"[calling]: {command}")
13 |     if with_result:
14 |         p = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT, encoding=encoding)
15 |         stdout,stderr = p.communicate()
16 |         if p.returncode == 0:
17 |             return stdout
18 |         else:
19 |             raise Exception(f"exit with {p.returncode}, stderr: {stderr}")
20 |     else:
21 |         returncode = subprocess.call(command, shell=True, encoding=encoding)
22 |         if returncode != 0:
23 |             raise Exception(f"exit with {returncode}")
24 | 
25 | if __name__ == '__main__':
26 |     registry = execute(f'npm config get registry', with_result=True)
27 |     node_version = execute(f'node -v', with_result=True)
28 |     if not node_version.startswith(f'v{NODE_VERSION}'):
29 |         raise Exception(f'Node version must be {NODE_VERSION}')
30 |     try:
31 |         execute(f'pnpm install')
32 |         execute(f'pnpm run build')
33 |         execute(f'npm config set registry {NPM_REPOSITORY}')
34 |         execute(f'npm publish')
35 |     finally:
36 |         execute(f'npm config set registry {registry}')
37 | 


--------------------------------------------------------------------------------
/src/components/TEditor.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {PropType, ref} from "vue";
 3 | import {EditorConfig} from "../types";
 4 | 
 5 | const props = defineProps({
 6 |   config: Object as PropType<EditorConfig>,
 7 |   modelValue: String
 8 | })
 9 | const emits = defineEmits(['update:modelValue', 'close'])
10 | const textEditorRef = ref()
11 | 
12 | const _focus = () => {
13 |   textEditorRef.value.focus()
14 | }
15 | 
16 | const _close = (flag) => {
17 |   emits('close', flag)
18 | }
19 | 
20 | const _updateModelValue = (event:InputEvent) => {
21 |   emits('update:modelValue', (event.target as HTMLInputElement).value)
22 | }
23 | 
24 | defineExpose({
25 |   focus:_focus
26 | })
27 | </script>
28 | 
29 | <template>
30 |   <div class="t-editor">
31 |     <textarea name="editor"
32 |               ref="textEditorRef"
33 |               autofocus
34 |               class="t-text-editor"
35 |               @input="_updateModelValue"
36 |               :value="props.modelValue"
37 |               @focus="(config as EditorConfig).onFocus"
38 |               @blur="(config as EditorConfig).onBlur"/>
39 |     <div class="t-text-editor-floor" align="center">
40 |       <button class="t-text-editor-floor-btn t-close-btn"
41 |               @click="_close(false)"
42 |               title="Cancel Edit">Cancel
43 |       </button>
44 |       <button class="t-text-editor-floor-btn t-save-btn"
45 |               @click="_close(true)"
46 |               title="Save And Close">Save & Close
47 |       </button>
48 |     </div>
49 |   </div>
50 | </template>
51 | 
52 | <style scoped>
53 | .t-editor {
54 |   width: 100%;
55 |   height: 100%;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/components/THelpBox.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {PropType, ref} from "vue";
 3 | import {Command} from "~/types";
 4 | 
 5 | defineProps({
 6 |   top: Number,
 7 |   content: Object as PropType<Command>
 8 | })
 9 | const terminalHelpBoxRef = ref()
10 | 
11 | const getBoundingClientRect = (): DOMRect => {
12 |   return terminalHelpBoxRef.value.getBoundingClientRect()
13 | }
14 | 
15 | defineExpose({
16 |   getBoundingClientRect
17 | })
18 | </script>
19 | 
20 | <template>
21 |   <div class="t-cmd-help"
22 |        ref="terminalHelpBoxRef"
23 |        :style="`top: ${top}px;max-height: calc(100% - ${top}px);`">
24 |     <div class="t-cmd-help-des" v-if="content.description" v-html="content.description"/>
25 |     <p v-if="content.usage">Usage: <code class="t-code-inline">{{ content.usage }}</code></p>
26 |     <div v-if="content.example && content.example.length > 0">
27 |       <div v-for="(it,idx) in content.example" :key="idx" class="text">
28 |         <div v-if="content.example.length === 1">
29 |           <span>Example: <code class="t-code-inline">{{ it.cmd }}</code> {{ it.des }}</span>
30 |         </div>
31 |         <div v-else>
32 |           <div class="t-cmd-help-eg">
33 |             eg{{ (content.example.length > 1 ? (idx + 1) : '') }}:
34 |           </div>
35 |           <div class="t-cmd-help-example">
36 |             <ul class="t-example-ul">
37 |               <li class="t-example-li"><code class="t-code-inline">{{ it.cmd }}</code></li>
38 |               <li class="t-example-li"><span v-if="it.des != null" class="t-cmd-help-des-item">{{ it.des }}</span></li>
39 |             </ul>
40 |           </div>
41 |         </div>
42 |       </div>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <style scoped>
48 | 
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/common/configuration.ts:
--------------------------------------------------------------------------------
 1 | import {Command} from "~/types";
 2 | 
 3 | export const DEFAULT_COMMANDS:Command[] = [
 4 |     {
 5 |         key: 'help',
 6 |         title: 'Help',
 7 |         group: 'local',
 8 |         usage: 'help [pattern]',
 9 |         description: 'Show command document.',
10 |         example: [
11 |             {
12 |                 des: "Get all commands.",
13 |                 cmd: 'help'
14 |             }, {
15 |                 des: "Get help documentation for exact match commands.",
16 |                 cmd: 'help refresh'
17 |             }, {
18 |                 des: "Get help documentation for fuzzy matching commands.",
19 |                 cmd: 'help *e*'
20 |             }, {
21 |                 des: "Get help documentation for specified group, match key must start with ':'.",
22 |                 cmd: 'help :groupA'
23 |             }
24 |         ]
25 |     }, {
26 |         key: 'clear',
27 |         title: 'Clear screen or history logs',
28 |         group: 'local',
29 |         usage: 'clear [history]',
30 |         description: 'Clear screen or history.',
31 |         example: [
32 |             {
33 |                 cmd: 'clear',
34 |                 des: 'Clear all records on the current screen.'
35 |             }, {
36 |                 cmd: 'clear history',
37 |                 des: 'Clear command history'
38 |             }
39 |         ]
40 |     }, {
41 |         key: 'open',
42 |         title: 'Open page',
43 |         group: 'local',
44 |         usage: 'open <url>',
45 |         description: 'Open a specified page.',
46 |         example: [
47 |             {
48 |                 cmd: 'open blog.beifengtz.com'
49 |             }
50 |         ]
51 |     }
52 | ]
53 | 
54 | export const WINDOW_STYLE = {
55 |     PADDING_LEFT: 10,
56 |     PADDING_LEFT_FOLD: 20,
57 |     PADDING_RIGHT: 10,
58 |     PADDING_TOP: 0,
59 |     PADDING_BOTTOM: 0
60 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-web-terminal",
 3 |   "version": "3.4.1",
 4 |   "description": "A beautiful web-side command line window plugin (native simulation). 一个漂亮的网页命令行插件（原生模拟）",
 5 |   "license": "Apache-2.0",
 6 |   "private": false,
 7 |   "type": "module",
 8 |   "main": "lib/vue-web-terminal.umd.cjs",
 9 |   "module": "lib/vue-web-terminal.js",
10 |   "types": "./lib/index.d.ts",
11 |   "exports": {
12 |     ".": {
13 |       "import": "./lib/vue-web-terminal.js",
14 |       "require": "./lib/vue-web-terminal.umd.cjs",
15 |       "types": [
16 |         "./lib/index.d.ts",
17 |         "./lib/Terminal.vue.d.ts",
18 |         "./lib/types/index.d.ts"
19 |       ]
20 |     }
21 |   },
22 |   "files": [
23 |     "package.json",
24 |     "README.md",
25 |     "LICENSE",
26 |     "lib"
27 |   ],
28 |   "publishConfig": {
29 |     "registry": "https://registry.npmjs.org",
30 |     "access": "public"
31 |   },
32 |   "scripts": {
33 |     "test": "vite --host",
34 |     "build": "vite build&& vue-tsc",
35 |     "preview": "vite preview"
36 |   },
37 |   "dependencies": {
38 |     "vue": "^3.3.4",
39 |     "vue-json-viewer": "^3.0.4"
40 |   },
41 |   "devDependencies": {
42 |     "@types/node": "20.16.13",
43 |     "@vitejs/plugin-vue": "4.6.2",
44 |     "rollup-plugin-visualizer": "5.9.3",
45 |     "sass": "1.62.1",
46 |     "terser": "5.37.0",
47 |     "typescript": "5.4.5",
48 |     "vite": "5.4.6",
49 |     "vue-tsc": "1.8.26",
50 |     "vite-plugin-css-injected-by-js": "3.3.1",
51 |     "vite-plugin-dts": "3.6.3"
52 |   },
53 |   "browserslist": [
54 |     "> 1%",
55 |     "last 2 versions",
56 |     "not dead",
57 |     "not ie 11"
58 |   ],
59 |   "repository": {
60 |     "type": "git",
61 |     "url": "https://github.com/tzfun/vue-web-terminal.git"
62 |   },
63 |   "bugs": {
64 |     "url": "https://github.com/tzfun/vue-web-terminal/issues"
65 |   },
66 |   "homepage": "https://tzfun.github.io/vue-web-terminal/",
67 |   "keywords": [
68 |     "terminal",
69 |     "vue",
70 |     "vue3",
71 |     "web-terminal",
72 |     "vue-terminal",
73 |     "console",
74 |     "web-console",
75 |     "vue-console"
76 |   ],
77 |   "author": "beifengtz"
78 | }
79 | 


--------------------------------------------------------------------------------
/src/common/api/index.ts:
--------------------------------------------------------------------------------
 1 | import {TerminalApi, TerminalApiData, TerminalApiListenerFunc, TerminalConfiguration} from "~/types";
 2 | import {_isEmpty} from "~/common/util.ts";
 3 | 
 4 | const data: TerminalApiData = {
 5 |     pool: {},
 6 |     configuration: {
 7 |         maxStoredCommandCountPerInstance: 100,
 8 |         storeName: 'terminal',
 9 |         themes: {}
10 |     }
11 | }
12 | 
13 | export function register(name: string, listener: TerminalApiListenerFunc) {
14 |     if (data.pool[name]) {
15 |         throw Error(`Unable to register an existing terminal: ${name}`)
16 |     }
17 |     data.pool[name] = listener
18 | }
19 | 
20 | export function unregister(name: string) {
21 |     delete data.pool[name]
22 | }
23 | 
24 | export function rename(newName: string, oldName: string, listener: TerminalApiListenerFunc) {
25 |     unregister(oldName)
26 |     register(newName, listener);
27 | }
28 | 
29 | export function configTheme(theme: string, css: string) {
30 |     let res = css.match(/^.*\{(.*)}\s*$/s)
31 |     if (!res || res.length != 2) {
32 |         throw new Error(`Incorrect theme style format, correct format example:
33 | :root {
34 |     --t-main-background-color: #191b24;
35 |     --t-main-font-color: #fff;
36 |     ...
37 | }
38 |         `)
39 |     }
40 |     let themes = data.configuration.themes
41 |     if (!themes) {
42 |         data.configuration.themes = themes = {}
43 |     }
44 |     themes[theme] = css
45 | }
46 | 
47 | export function configStoreName(name: string) {
48 |     if (_isEmpty(name)) {
49 |         throw new Error("The terminal storage name is invalid: " + name)
50 |     }
51 |     data.configuration.storeName = name
52 |     console.debug("Configured storeName", name)
53 | }
54 | 
55 | export function configMaxStoredCommandCountPerInstance(count: number) {
56 |     if (count <= 1) {
57 |         throw new Error("The value of 'maxStoredLogCountPerInstance' must be a valid positive number: " + count)
58 |     }
59 |     data.configuration.maxStoredCommandCountPerInstance = count
60 |     console.debug("Configured maxStoredCommandCountPerInstance", count)
61 | }
62 | 
63 | export function getConfiguration(): TerminalConfiguration {
64 |     return data.configuration
65 | }
66 | 
67 | export default new TerminalApi(data)
68 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import {resolve} from 'path'
 2 | import {defineConfig} from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | import dts from 'vite-plugin-dts'
 5 | 
 6 | import {visualizer} from 'rollup-plugin-visualizer'
 7 | import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 8 | 
 9 | const pathSrc = resolve(__dirname, 'src')
10 | 
11 | // https://vitejs.dev/config/
12 | export default defineConfig({
13 |     server: {},
14 |     plugins: [
15 |         vue(),
16 |         //  包体分析
17 |         visualizer({
18 |             filename: 'stats.html',
19 |             open: false
20 |         }),
21 |         cssInjectedByJsPlugin(),
22 |         dts()
23 |     ],
24 |     resolve: {
25 |         alias: {
26 |             '~/': `${pathSrc}/`,
27 |         }
28 |     },
29 |     css: {
30 |         preprocessorOptions: {
31 |             scss: {},
32 |         }
33 |     },
34 |     build: {
35 |         lib: {
36 |             entry: resolve(__dirname, 'src/index.ts'),
37 |             //  暴露的全局变量
38 |             name: 'Terminal',
39 |             fileName: 'vue-web-terminal'
40 |         },
41 |         outDir: 'lib',
42 |         rollupOptions: {
43 |             //  不打包的依赖
44 |             //  https://rollupjs.org/configuration-options/
45 |             external: ['vue'],
46 |             output: {
47 |                 //  https://rollupjs.org/configuration-options/#output-format
48 |                 format: 'es',
49 |                 //  https://rollupjs.org/configuration-options/#output-exports
50 |                 exports: 'named',
51 |                 //  在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
52 |                 //  https://rollupjs.org/configuration-options/#output-globals
53 |                 globals: {
54 |                     vue: 'Vue'
55 |                 },
56 |                 // manualChunks: undefined,
57 |             }
58 |         },
59 |         minify: 'terser',
60 |         terserOptions: {
61 |             compress: {
62 |                 drop_console: true,
63 |                 drop_debugger: true
64 |             },
65 |             format: {
66 |                 // 删除注释
67 |                 comments: true
68 |             }
69 |         },
70 |         commonjsOptions: {
71 |             esmExternals: true
72 |         }
73 |     }
74 | })
75 | 


--------------------------------------------------------------------------------
/src/css/scrollbar.css:
--------------------------------------------------------------------------------
 1 | .t-window::-webkit-scrollbar,
 2 | .t-code::-webkit-scrollbar,
 3 | .t-text-editor::-webkit-scrollbar,
 4 | .t-vue-codemirror .vue-codemirror .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar,
 5 | .t-window pre::-webkit-scrollbar,
 6 | .t-cmd-tips-items::-webkit-scrollbar,
 7 | .t-cmd-help::-webkit-scrollbar
 8 | {
 9 |     width: 8px;
10 |     height: 8px;
11 | }
12 | 
13 | .t-window::-webkit-scrollbar-button,
14 | .t-code::-webkit-scrollbar-button,
15 | .t-text-editor::-webkit-scrollbar-button,
16 | .t-vue-codemirror .vue-codemirror .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar-button,
17 | .t-window pre::-webkit-scrollbar-button,
18 | .t-cmd-tips-items::-webkit-scrollbar-button,
19 | .t-cmd-help::-webkit-scrollbar-button
20 | {
21 |     width: 0;
22 |     height: 0;
23 |     display: none;
24 | }
25 | 
26 | .t-window::-webkit-scrollbar-thumb,
27 | .t-code::-webkit-scrollbar-thumb,
28 | .t-text-editor::-webkit-scrollbar-thumb,
29 | .t-vue-codemirror .vue-codemirror .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
30 | .t-window pre::-webkit-scrollbar-thumb,
31 | .t-cmd-tips-items::-webkit-scrollbar-thumb,
32 | .t-cmd-help::-webkit-scrollbar-thumb
33 | {
34 |     border-radius: 6px;
35 |     border-style: dashed;
36 |     border-color: transparent;
37 |     border-width: 2px;
38 |     background-color: rgba(157, 165, 183, 0.4);
39 |     background-clip: padding-box;
40 | }
41 | 
42 | .t-window::-webkit-scrollbar-thumb:hover,
43 | .t-code::-webkit-scrollbar-thumb:hover,
44 | .t-text-editor::-webkit-scrollbar-thumb:hover,
45 | .t-vue-codemirror .vue-codemirror .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover,
46 | .t-window pre::-webkit-scrollbar-thumb:hover,
47 | .t-cmd-tips-items::-webkit-scrollbar-thumb:hover,
48 | .t-cmd-help::-webkit-scrollbar-thumb:hover
49 | {
50 |     background: rgba(157, 165, 183, 0.7);
51 |     cursor: pointer;
52 | }
53 | 
54 | .t-window::-webkit-scrollbar-track,
55 | .t-code::-webkit-scrollbar-track,
56 | .t-text-editor::-webkit-scrollbar-track,
57 | .t-vue-codemirror .vue-codemirror .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar-track,
58 | .t-window pre::-webkit-scrollbar-track,
59 | .t-cmd-tips-items::-webkit-scrollbar-track,
60 | .t-cmd-help::-webkit-scrollbar-track
61 | {
62 |     border-radius: 6px;
63 | }
64 | 


--------------------------------------------------------------------------------
/src/css/theme/light.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --t-main-background-color: #fff;
 3 |     --t-main-font-color: #000;
 4 |     --t-window-box-shadow: 0 0 40px 1px rgb(0 0 0 / 20%);
 5 |     --t-header-background-color: #4b474c;
 6 |     --t-header-font-color: white;
 7 |     --t-tag-font-color: #fff;
 8 |     --t-cursor-color: #000;
 9 |     --t-cmd-key-color: #834dff;
10 |     --t-cmd-arg-color: #c0c0ff;
11 |     --t-cmd-splitter-color: #808085;
12 |     --t-link-color: #02505e;
13 |     --t-link-hover-color: #17b2d2;
14 |     --t-table-border: 1px dashed #565151;
15 |     --t-selection-font-color: white;
16 |     --t-selection-background-color: #2a2626;
17 |     --t-code-inline-font-color: #00b10e;
18 |     --t-cmd-help-background-color: white;
19 |     --t-cmd-help-code-background-color: #f7f7f9;
20 |     --t-cmd-help-box-shadow: 0px 0px 0px 4px rgb(0 0 0 / 20%);
21 |     --t-text-editor-floor-background-color: white;
22 |     --t-text-editor-floor-close-btn-color: #9a7070;
23 |     --t-text-editor-floor-save-btn-color: #00b10e;
24 |     --t-text-editor-floor-btn-hover-color: #652222;
25 |     --t-json-background-color: rgba(0, 0, 0, 0);
26 |     --t-json-value-obj-color: #bdadad;
27 |     --t-json-value-bool-color: #cdc83c;
28 |     --t-json-value-number-color: #a625be;
29 |     --t-json-ellipsis-background-color: #f5f5f5;
30 |     --t-json-more-background-webkit: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 20%, rgb(255 255 255 / 10%) 100%);
31 |     --t-json-more-background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgb(255 255 255 / 10%) 100%);
32 |     --t-json-deep-selector-border-color: rgb(249 249 249 / 52%);
33 |     --t-code-default-background-color: rgb(227 239 248);
34 |     --t-log-box-hover-script-background-color: #f5f6f7;
35 |     --t-log-box-folded-background-color: #e2eaeb;
36 |     --t-log-box-folded-hover-background-color: #d3d6d7;
37 |     --t-log-fold-icon-color: #4ca5c1;
38 |     --t-log-fold-icon-background-color: white;
39 |     --t-log-fold-icon-border-color: #4ca5c1;
40 |     --t-log-fold-icon-active-color: white;
41 |     --t-log-fold-icon-active-background-color: #4ca5c1;
42 |     --t-log-fold-line-color: #4ca5c1;
43 |     --t-cmd-tips-background-color: #ffffff;
44 |     --t-cmd-tips-font-color: #000;
45 |     --t-cmd-tips-active-background-color: #cbd3fd;
46 |     --t-cmd-tips-content-font-color: #644c4c;
47 |     --t-cmd-tips-des-font-color: #939393;
48 |     --t-cmd-tips-footer-font-color: #6e5f5f;
49 |     --t-cmd-tips-footer-background-color: #efefef;
50 | }
51 | 


--------------------------------------------------------------------------------
/src/css/theme/dark.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --t-main-background-color: #191b24;
 3 |     --t-main-font-color: #fff;
 4 |     --t-window-box-shadow: 0 0 40px 1px rgb(0 0 0 / 20%);
 5 |     --t-header-background-color: #959598;
 6 |     --t-header-font-color: white;
 7 |     --t-tag-font-color: #fff;
 8 |     --t-cursor-color: #fff;
 9 |     --t-cmd-key-color: yellow;
10 |     --t-cmd-arg-color: #c0c0ff;
11 |     --t-cmd-splitter-color: #808085;
12 |     --t-link-color: antiquewhite;
13 |     --t-link-hover-color: white;
14 |     --t-table-border: 1px dashed #fff;
15 |     --t-selection-font-color: black;
16 |     --t-selection-background-color: white;
17 |     --t-code-inline-font-color: #00b10e;
18 |     --t-cmd-help-background-color: black;
19 |     --t-cmd-help-code-background-color: rgba(0, 0, 0, 0);
20 |     --t-cmd-help-box-shadow: 0px 0px 0px 4px rgb(255 255 255 / 20%);
21 |     --t-text-editor-floor-background-color: rgb(72 69 69);
22 |     --t-text-editor-floor-close-btn-color: #bba9a9;
23 |     --t-text-editor-floor-save-btn-color: #00b10e;
24 |     --t-text-editor-floor-btn-hover-color: #befcff;
25 |     --t-json-background-color: rgba(0, 0, 0, 0);
26 |     --t-json-value-obj-color: #bdadad;
27 |     --t-json-value-bool-color: #cdc83c;
28 |     --t-json-value-number-color: #f3c7fb;
29 |     --t-json-ellipsis-background-color: #674848;
30 |     --t-json-more-background-webkit: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 20%, rgb(255 255 255 / 10%) 100%);
31 |     --t-json-more-background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgb(255 255 255 / 10%) 100%);
32 |     --t-json-deep-selector-border-color: rgb(249 249 249 / 52%);
33 |     --t-code-default-background-color: rgb(39 50 58);
34 |     --t-log-box-hover-script-background-color: #2a2c34;
35 |     --t-log-box-folded-background-color: #042f36;
36 |     --t-log-box-folded-hover-background-color: #515157;
37 |     --t-log-fold-icon-color: #4ca5c1;
38 |     --t-log-fold-icon-background-color: #191b24;
39 |     --t-log-fold-icon-border-color: #4ca5c1;
40 |     --t-log-fold-icon-active-color: #191b24;
41 |     --t-log-fold-icon-active-background-color: #4ca5c1;
42 |     --t-log-fold-line-color: #4ca5c1;
43 |     --t-cmd-tips-background-color: #544a4a;
44 |     --t-cmd-tips-font-color: #fff;
45 |     --t-cmd-tips-active-background-color: #5c6ec9;
46 |     --t-cmd-tips-content-font-color: #fff;
47 |     --t-cmd-tips-des-font-color: #cbb0b0;
48 |     --t-cmd-tips-footer-font-color: #e3c2c2;
49 |     --t-cmd-tips-footer-background-color: #546456;
50 | }


--------------------------------------------------------------------------------
/src/common/store/index.ts:
--------------------------------------------------------------------------------
 1 | import {CmdHistory} from "~/types";
 2 | import {getConfiguration} from "~/common/api";
 3 | import {ref} from "vue";
 4 | 
 5 | const store = ref<TerminalStore>()
 6 | 
 7 | export class TerminalStore {
 8 |     storageKey: string
 9 |     maxStoredCommandCountPerInstance: number
10 |     dataMap: Record<string, CmdHistory>
11 | 
12 |     constructor(key: string, maxStoredCommandCountPerInstance: number) {
13 |         this.storageKey = key
14 |         this.maxStoredCommandCountPerInstance = maxStoredCommandCountPerInstance
15 |         let dataMapStr = window.localStorage.getItem(this.storageKey)
16 |         if (dataMapStr) {
17 |             this.dataMap = JSON.parse(dataMapStr)
18 |         } else {
19 |             this.dataMap = {}
20 |         }
21 |     }
22 | 
23 |     push(name: string, cmd: string) {
24 |         let data = this.getData(name)
25 |         if (data.cmdLog == null) {
26 |             data.cmdLog = []
27 |         }
28 |         if (data.cmdLog.length === 0 || data.cmdLog[data.cmdLog.length - 1] !== cmd) {
29 |             data.cmdLog.push(cmd)
30 | 
31 |             console.log(data.cmdLog.length, this.maxStoredCommandCountPerInstance)
32 | 
33 |             if (data.cmdLog.length > this.maxStoredCommandCountPerInstance) {
34 |                 data.cmdLog.splice(0, data.cmdLog.length - this.maxStoredCommandCountPerInstance)
35 |             }
36 |         }
37 | 
38 |         data.cmdIdx = data.cmdLog.length
39 |         this.store()
40 |     }
41 | 
42 |     store() {
43 |         window.localStorage.setItem(this.storageKey, JSON.stringify(this.dataMap))
44 |     }
45 | 
46 |     getData(name: string): CmdHistory {
47 |         let data = this.dataMap[name]
48 |         if (data == null) {
49 |             data = {
50 |                 cmdLog: [],
51 |                 cmdIdx: 0
52 |             }
53 |             this.dataMap[name] = data
54 |         }
55 |         return data
56 |     }
57 | 
58 |     getLog(name: string) {
59 |         let data = this.getData(name)
60 |         if (!data.cmdLog) {
61 |             data.cmdLog = []
62 |         }
63 |         return data.cmdLog
64 |     }
65 | 
66 |     clear(name: string) {
67 |         let data = this.getData(name)
68 |         data.cmdLog = []
69 |         data.cmdIdx = 0
70 |         this.store()
71 |     }
72 | 
73 |     clearAll() {
74 |         this.dataMap = {}
75 |         this.store()
76 |     }
77 | 
78 |     getIdx(name: string) {
79 |         let data = this.getData(name)
80 |         return data.cmdIdx | 0
81 |     }
82 | 
83 |     setIdx(name: string, idx: number) {
84 |         this.getData(name).cmdIdx = idx
85 |     }
86 | }
87 | 
88 | export function initStore() {
89 |     const configuration = getConfiguration();
90 |     store.value = new TerminalStore(configuration.storeName, configuration.maxStoredCommandCountPerInstance)
91 | }
92 | 
93 | export function getStore(): TerminalStore {
94 |     if (store.value) {
95 |         return store.value
96 |     }
97 |     throw new Error("The store must be initialized before reading")
98 | }
99 | 


--------------------------------------------------------------------------------
/design/logo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>vue-web-terminal design</title>
 6 |     <style>
 7 |         #logo {
 8 |             margin: 100px;
 9 |             overflow: hidden;
10 |             padding: 15px;
11 |             width: 200px;
12 |             height: 200px;
13 |             background-color: #35495e;
14 |             border-radius: 15px;
15 |             //box-shadow: 0 0 15px rgba(0,0,0,.5);
16 |             position: relative;
17 |             filter: drop-shadow(0 0 5px #000);
18 |         }
19 |         .vue-icon {
20 |             width: 100px;
21 |             position: absolute;
22 |             left: 20px;
23 |             top: 50px;
24 |             transform: rotate(-90deg);
25 |             z-index: 2;
26 |         }
27 |         .line {
28 |             position: absolute;
29 |             bottom: 50px;
30 |             right: 30px;
31 |             width: 85px;
32 |             height: 18px;
33 |             background-color: #41b883;
34 |             z-index: 2;
35 |         }
36 |         .shadow {
37 |             position: absolute;
38 |             background: #0000002b;
39 |             z-index: 1;
40 |             width: 243px;
41 |             height: 74px;
42 |             transform: rotate(30deg);
43 |             top: 135px;
44 |             left: 29px;
45 |         }
46 |     </style>
47 | </head>
48 | <body>
49 |     <button onclick="download()">生成图片</button>
50 |     <div id="logo">
51 |         <img src="vue.png" alt="vue-icon" class="vue-icon">
52 | 
53 |         <!--        <svg width="100px" height="100px" class="vue-icon" viewBox="0 -17.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">-->
54 |         <!--            <g>-->
55 |         <!--                <path d="M204.8,0 L256,0 L128,220.8 L0,0 L50.56,0 L97.92,0 L128,51.2 L157.44,0 L204.8,0 Z" fill="#41B883"></path>-->
56 |         <!--                <path d="M0,0 L128,220.8 L256,0 L204.8,0 L128,132.48 L50.56,0 L0,0 Z" fill="#41B883"></path>-->
57 |         <!--                <path d="M50.56,0 L128,133.12 L204.8,0 L157.44,0 L128,51.2 L97.92,0 L50.56,0 Z" fill="#35495E"></path>-->
58 |         <!--            </g>-->
59 |         <!--        </svg>-->
60 | 
61 |         <span class="line"></span>
62 |         <span class="shadow"></span>
63 |     </div>
64 | </body>
65 | <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
66 | <script type="text/javascript">
67 |     function download() {
68 |         const node = document.getElementById("logo")
69 |         html2canvas(node, {
70 |             useCORS: true,
71 |             allowTaint: true,
72 |             height: node.offsetHeight,
73 |             width: node.offsetWidth,
74 |             scrollY: 0,
75 |             scrollX: 0,
76 |             backgroundColor: null
77 |         }).then(async (canvas) => {
78 | 
79 |             canvas.shadowOffsetX = 0;
80 |             canvas.shadowOffsetY = 0;
81 |             canvas.shadowBlur = 15;
82 |             canvas.shadowColor = "rgba(0,0,0,0.5)"
83 | 
84 |             let imgUrl = canvas.toDataURL();
85 |             let img = new Image();
86 |             img.src = imgUrl;  // 导出图片
87 |             document.body.appendChild(img);  // 将生成的图片添加到body
88 |         })
89 |     }
90 | </script>
91 | </html>


--------------------------------------------------------------------------------
/src/css/ansi.css:
--------------------------------------------------------------------------------
  1 | .t-ansi-0 {
  2 |     /*    no style  */
  3 | }
  4 | 
  5 | .t-ansi-1 {
  6 |     font-weight: bold;
  7 | }
  8 | 
  9 | .t-ansi-2 {
 10 |     font-weight: 200;
 11 | }
 12 | 
 13 | .t-ansi-3 {
 14 |     font-style:oblique;
 15 | }
 16 | 
 17 | .t-ansi-4 {
 18 |     text-decoration: underline;
 19 | }
 20 | 
 21 | @keyframes t-blink {
 22 |     0% {
 23 |         opacity: 1;
 24 |     }
 25 |     50% {
 26 |         opacity: 1;
 27 |     }
 28 |     50.01% {
 29 |         opacity: 0;
 30 |     }
 31 |     100% {
 32 |         opacity: 0;
 33 |     }
 34 | }
 35 | 
 36 | .t-ansi-5, .t-ansi-6 {
 37 |     animation: t-blink 1s linear infinite;
 38 |     -webkit-animation: t-blink 1s linear infinite;
 39 |     -moz-animation: t-blink 1s linear infinite;
 40 |     -ms-animation: t-blink 1s linear infinite;
 41 |     -o-animation: t-blink 1s linear infinite;
 42 | }
 43 | 
 44 | .t-ansi-7 {
 45 |     background-color: white;
 46 |     color: #1C1D21;
 47 | }
 48 | 
 49 | .t-ansi-8 {
 50 |     visibility: hidden;
 51 | }
 52 | 
 53 | .t-ansi-9 {
 54 |     text-decoration:line-through;
 55 | }
 56 | 
 57 | .t-ansi-21,.t-ansi-22 {
 58 |     font-weight: unset;
 59 | }
 60 | 
 61 | .t-ansi-23 {
 62 |     font-style:unset;
 63 | }
 64 | 
 65 | .t-ansi-24, .t-ansi-29 {
 66 |     text-decoration: none;
 67 | }
 68 | 
 69 | .t-ansi-25, .t-ansi-26 {
 70 |     animation: none;
 71 |     -webkit-animation: none;
 72 |     -moz-animation: none;
 73 |     -ms-animation: none;
 74 |     -o-animation: none;
 75 | }
 76 | 
 77 | .t-ansi-27 {
 78 |     background-color: inherit;
 79 |     color: inherit;
 80 | }
 81 | 
 82 | .t-ansi-28 {
 83 |     visibility: unset;
 84 | }
 85 | 
 86 | /*   前景色   */
 87 | .t-ansi-30 {
 88 |     color: black;
 89 | }
 90 | 
 91 | .t-ansi-31 {
 92 |     color: #f10606;
 93 | }
 94 | 
 95 | .t-ansi-32 {
 96 |     color: #14cb14;
 97 | }
 98 | 
 99 | .t-ansi-33 {
100 |     color: yellow;
101 | }
102 | 
103 | .t-ansi-34 {
104 |     color: #3993d4;
105 | }
106 | 
107 | .t-ansi-35 {
108 |     color: #bd12bd;
109 | }
110 | 
111 | .t-ansi-36 {
112 |     color: #0eb4b4;
113 | }
114 | 
115 | .t-ansi-37 {
116 |     color: white;
117 | }
118 | 
119 | .t-ansi-90 {
120 |     color: #585859;
121 | }
122 | 
123 | .t-ansi-91 {
124 |     color: #ef353a;
125 | }
126 | 
127 | .t-ansi-92 {
128 |     color: #4ec215;
129 | }
130 | 
131 | .t-ansi-93 {
132 |     color: #e3bd01;
133 | }
134 | 
135 | .t-ansi-94 {
136 |     color: #1faffe;
137 | }
138 | 
139 | .t-ansi-95 {
140 |     color: #eb7dec;
141 | }
142 | 
143 | .t-ansi-96 {
144 |     color: #00e3e4;
145 | }
146 | 
147 | .t-ansi-97 {
148 |     color: #fdfdfe;
149 | }
150 | 
151 | /*  后景色 */
152 | .t-ansi-40 {
153 |     background-color: black;
154 | }
155 | 
156 | .t-ansi-41 {
157 |     background-color: #f10606;
158 | }
159 | 
160 | .t-ansi-42 {
161 |     background-color: #14cb14;
162 | }
163 | 
164 | .t-ansi-43 {
165 |     background-color: yellow;
166 | }
167 | 
168 | .t-ansi-44 {
169 |     background-color: #3993d4;
170 | }
171 | 
172 | .t-ansi-45 {
173 |     background-color: #bd12bd;
174 | }
175 | 
176 | .t-ansi-46 {
177 |     background-color: #0eb4b4;
178 | }
179 | 
180 | .t-ansi-47 {
181 |     background-color: white;
182 | }
183 | 
184 | .t-ansi-100 {
185 |     background-color: #585859;
186 | }
187 | 
188 | .t-ansi-101 {
189 |     background-color: #ef353a;
190 | }
191 | 
192 | .t-ansi-102 {
193 |     background-color: #4ec215;
194 | }
195 | 
196 | .t-ansi-103 {
197 |     background-color: #e3bd01;
198 | }
199 | 
200 | .t-ansi-104 {
201 |     background-color: #1faffe;
202 | }
203 | 
204 | .t-ansi-105 {
205 |     background-color: #eb7dec;
206 | }
207 | 
208 | .t-ansi-106 {
209 |     background-color: #00e3e4;
210 | }
211 | 
212 | .t-ansi-107 {
213 |     background-color: #fdfdfe;
214 | }
215 | 
216 | .t-ansi-line {
217 |     min-height: var(--t-font-height);
218 | }
219 | 
220 | .t-ansi-char {
221 |     min-width: 7px;
222 |     min-height: var(--t-font-height);
223 |     font-size: inherit;
224 |     display: inline;
225 |     height: 100%;
226 |     vertical-align: top;
227 |     font-weight: bold;
228 |     word-break: break-all;
229 |     white-space: pre-wrap;
230 | }
231 | 


--------------------------------------------------------------------------------
/README_ZH.md:
--------------------------------------------------------------------------------
  1 | 中文版 | [English](./README.md)
  2 | 
  3 | <div align=center>
  4 | <img src=shortcut/logo.png/>
  5 | </div>
  6 | 
  7 | # vue-web-terminal
  8 | 
  9 | <a href="https://github.com/tzfun/vue-web-terminal/tree/vue2"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue2"></a>
 10 | <a href="https://github.com/tzfun/vue-web-terminal/tree/vue3"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue3"></a>
 11 | <a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://shields.io/bundlephobia/minzip/vue-web-terminal"></a>
 12 | <a href="https://npmcharts.com/compare/vue-web-terminal?minimal=true"><img src="https://img.shields.io/npm/dt/vue-web-terminal.svg" alt="Downloads"></a>
 13 | <a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://img.shields.io/npm/l/vue-web-terminal.svg" alt="Version"></a>
 14 | 
 15 | 一个由 Vue 构建的支持多内容格式显示的网页端命令行窗口插件，支持表格、json、代码等多种消息格式，支持自定义消息样式、命令行库、键入搜索提示等，模拟原生终端窗口支持 ← →
 16 | 光标切换和 ↑ ↓ 历史命令切换。
 17 | 
 18 | > :tada: 新版文档已开放访问，文档更详细界面更友好，欢迎体验：[https://tzfun.github.io/vue-web-terminal/](https://tzfun.github.io/vue-web-terminal/)
 19 | 
 20 | ## 功能支持
 21 | 
 22 | * 支持消息格式：普通文本、表格、json、代码/多行文本、html、ansi
 23 | * 支持内容实时回显、追加，可制作简单的动画效果
 24 | * 支持用户问答输入
 25 | * 支持在线文本编辑
 26 | * 支持窗口拖拽、固定
 27 | * 支持 ← → 光标键切换和 ↑ ↓ 键历史命令切换
 28 | * 支持一键全屏
 29 | * 支持命令输入提示
 30 | * 支持日志记录分组折叠
 31 | * 支持多种样式 Slot 插槽，可自定义样式
 32 | * 支持主题，默认内置暗色和亮色主题，也可自定义主题
 33 | * 提供丰富的JS API，几乎所有功能均可由API来模拟非人为操作
 34 | * 支持Vue2/Vue3
 35 | 
 36 | ![vue-web-terminal](shortcut/vue-web-terminal.gif)
 37 | 
 38 | > 一句话描述：
 39 | >
 40 | > 它并不具备执行某个具体命令的能力，这个能力需要开发者自己去实现，它负责的事情是在网页上以终端界面的形式从用户那拿到想要执行的命令，然后交给开发者去实现，执行完之后再交给它展示给用户。
 41 | 
 42 | # 在线体验
 43 | 
 44 | 你可以通过 [在线体验](https://tzfun.github.io/vue-web-terminal/demo.html) 了解本插件的一些功能，也可以在 [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/silly-scooby-l8wk9b) 上尝试编辑代码并预览。
 45 | 
 46 | # 文档
 47 | 
 48 | 请前往 [Document](https://tzfun.github.io/vue-web-terminal/) 阅读使用文档
 49 | 
 50 | # 快速上手
 51 | 
 52 | > **Vue2**版本从 **2024年12月24日** 开始正式归档，不再提供维护更新，
 53 | > 源码见 [vue2分支](https://github.com/tzfun/vue-web-terminal/tree/vue2)。
 54 | 
 55 | npm安装vue-web-terminal，`2.x.x`版本对应vue2，`3.x.x`版本对应vue3，建议下载对应大版本的最新版。
 56 | 
 57 | ```shell
 58 | #  install for vue2
 59 | npm install vue-web-terminal@2.xx --save
 60 | 
 61 | #  install for vue3
 62 | npm install vue-web-terminal@3.xx --save 
 63 | ```
 64 | 
 65 | `main`中载入 Terminal 插件
 66 | 
 67 | **Vue2**
 68 | ```js
 69 | import Terminal from 'vue-web-terminal'
 70 | 
 71 | Vue.use(Terminal)
 72 | ```
 73 | 
 74 | **Vue3**
 75 | ```ts
 76 | import { createTerminal } from 'vue-web-terminal'
 77 | 
 78 | const app = createApp(App)
 79 | 
 80 | app.use(createTerminal())
 81 | 
 82 | app.mount('#app')
 83 | ```
 84 | 
 85 | 使用示例
 86 | 
 87 | ```vue
 88 | <script setup lang="ts">
 89 |   import {Terminal, SuccessFunc, FailedFunc} from "vue-web-terminal"
 90 | 
 91 |   const onExecCmd = (key: string, command: string, success: SuccessFunc, failed: FailedFunc) => {
 92 |     if (key === 'fail') {
 93 |       failed('Something wrong!!!')
 94 |     } else {
 95 |       let allClass = ['success', 'error', 'system', 'info', 'warning'];
 96 | 
 97 |       let clazz = allClass[Math.floor(Math.random() * allClass.length)];
 98 |       success({
 99 |         type: 'normal',
100 |         class: clazz,
101 |         tag: 'success',
102 |         content: command
103 |       })
104 |     }
105 |   }
106 | </script>
107 | <template>
108 |   <div id="app">
109 |     <terminal name="my-terminal" @exec-cmd="onExecCmd"></terminal>
110 |   </div>
111 | </template>
112 | 
113 | <style>
114 |   body, html, #app {
115 |     margin: 0;
116 |     padding: 0;
117 |     width: 100%;
118 |     height: 100%;
119 |   }
120 | </style>
121 | ```
122 | 
123 | # 联系作者
124 | 
125 | 我是一名后端Coder，恰巧对前端也会一点，个人兴趣开发了此插件。
126 | 
127 | 如果对代码优化或功能有好的想法并乐意贡献代码欢迎提交[PR](https://github.com/tzfun/vue-web-terminal/pulls)
128 | ，对插件使用存在疑问或发现bug请提交[issue](https://github.com/tzfun/vue-web-terminal/issues)。
129 | 
130 | > 联系我（添加请备注vue-web-terminal）
131 | >
132 | > 📮 Email: *beifengtz@qq.com*
133 | >
134 | > ![](https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon16_wx_logo.png) 微信: *beifeng-tz*
135 | 
136 | # License
137 | 
138 | [Apache License 2.0](LICENSE)
139 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [中文版](./README_ZH.md) | English
  2 | 
  3 | <div align=center>
  4 | <img src=shortcut/logo.png/>
  5 | </div>
  6 | 
  7 | # vue-web-terminal
  8 | 
  9 | <a href="https://github.com/tzfun/vue-web-terminal/tree/vue2"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue2"></a>
 10 | <a href="https://github.com/tzfun/vue-web-terminal/tree/vue3"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue3"></a>
 11 | <a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://shields.io/bundlephobia/minzip/vue-web-terminal"></a>
 12 | <a href="https://npmcharts.com/compare/vue-web-terminal?minimal=true"><img src="https://img.shields.io/npm/dt/vue-web-terminal.svg" alt="Downloads"></a>
 13 | <a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://img.shields.io/npm/l/vue-web-terminal.svg" alt="Version"></a>
 14 | 
 15 | A web-side command line plugin built by `Vue`, supports multiple message formats such as tables, json, and codes, supports custom message styles, command line libraries, typing search prompts, etc., and simulates native terminal support ← → cursor toggle and ↑ ↓ history command toggle.
 16 | 
 17 | > :tada: The new document is now available. It's more detailed and more friendly, welcome to experience it: [https://tzfun.github.io/vue-web-terminal/](https://tzfun.github.io/vue-web-terminal/)
 18 | 
 19 | ## Feature Support
 20 | 
 21 | * Supported message formats: plain text, table, json, code/multi-line text, html, ansi
 22 | * Supports real-time content display and appending, and can create simple animation effects
 23 | * Support user question and answer input
 24 | * Support online text editing
 25 | * Support window dragging and fixing
 26 | * Support ← → cursor key switching and ↑ ↓ key history command switching
 27 | * Support fullscreen
 28 | * Support command input prompts
 29 | * Support logging group folding
 30 | * Supports multiple styles of slots, customizable styles
 31 | * Supports themes, with built-in dark and light themes by default, and you can also customize themes
 32 | * Provides a rich set of JS APIs, almost all functions can be simulated by APIs to simulate non-human operations
 33 | * Supports Vue2/Vue3
 34 | 
 35 | ![vue-web-terminal](shortcut/vue-web-terminal.gif)
 36 | 
 37 | > Short description:
 38 | >
 39 | > It does not have the ability to execute a specific command. This ability needs to be implemented by the developer.
 40 | > What it is responsible for is to get the command to be executed from the user in the form of an interface, and then
 41 | > hand it over to the developer to implement and execute. After that, hand it over to show it to the user
 42 | 
 43 | # Online Experience
 44 | 
 45 | You can learn about some of the features of this plugin through the [Online Experience](https://tzfun.github.io/vue-web-terminal/demo.html), or try editing the code and previewing it on [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/silly-scooby-l8wk9b).
 46 | 
 47 | # Document
 48 | 
 49 | Please go to [Document](https://tzfun.github.io/vue-web-terminal/)
 50 | 
 51 | # Quick Start
 52 | 
 53 | > The **Vue2** version will be officially archived from **December 24, 2024** and will no longer provide maintenance updates.
 54 | > For the source code, see [vue2 branch](https://github.com/tzfun/vue-web-terminal/tree/vue2).
 55 | 
 56 | Install vue-web-terminal by npm. The `2.x.x` version corresponds to vue2, and the `3.x.x` version corresponds to vue3.
 57 | It is recommended to download the latest version corresponding to the main version.
 58 | 
 59 | ```shell
 60 | #  install for vue2
 61 | npm install vue-web-terminal@2.xx --save
 62 | 
 63 | #  install for vue3
 64 | npm install vue-web-terminal@3.xx --save 
 65 | ```
 66 | 
 67 | Use Terminal plugin in `main`
 68 | 
 69 | **Vue2**
 70 | ```js
 71 | import Terminal from 'vue-web-terminal'
 72 | 
 73 | Vue.use(Terminal)
 74 | ```
 75 | 
 76 | **Vue3**
 77 | ```ts
 78 | import { createTerminal } from 'vue-web-terminal'
 79 | 
 80 | const app = createApp(App)
 81 | 
 82 | app.use(createTerminal())
 83 | 
 84 | app.mount('#app')
 85 | ```
 86 | 
 87 | Example:
 88 | 
 89 | ```vue
 90 | <script setup lang="ts">
 91 |   import {Terminal, SuccessFunc, FailedFunc} from "vue-web-terminal"
 92 | 
 93 |   const onExecCmd = (key: string, command: string, success: SuccessFunc, failed: FailedFunc) => {
 94 |     if (key === 'fail') {
 95 |       failed('Something wrong!!!')
 96 |     } else {
 97 |       let allClass = ['success', 'error', 'system', 'info', 'warning'];
 98 | 
 99 |       let clazz = allClass[Math.floor(Math.random() * allClass.length)];
100 |       success({
101 |         type: 'normal',
102 |         class: clazz,
103 |         tag: 'success',
104 |         content: command
105 |       })
106 |     }
107 |   }
108 | </script>
109 | <template>
110 |   <div id="app">
111 |     <terminal name="my-terminal" @exec-cmd="onExecCmd"></terminal>
112 |   </div>
113 | </template>
114 | 
115 | <style>
116 |   body, html, #app {
117 |     margin: 0;
118 |     padding: 0;
119 |     width: 100%;
120 |     height: 100%;
121 |   }
122 | </style>
123 | ```
124 | 
125 | # Contact Author
126 | 
127 | I am a backend coder, and I know a little bit about frontend. This plugin was created out of my interest.
128 | 
129 | If you have good ideas for code optimization or functions and are willing to contribute code, please submit [PR](https://github.com/tzfun/vue-web-terminal/pulls),
130 | If you have any questions about the use of the plugin or find bugs, please submit[issue](https://github.com/tzfun/vue-web-terminal/issues).
131 | 
132 | > Contact me (Add please note vue-web-terminal)
133 | >
134 | > 📮 Email: *beifengtz@qq.com*
135 | >
136 | > ![](https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon16_wx_logo.png) WeChat: *beifeng-tz*
137 | 
138 | # License
139 | 
140 | [Apache License 2.0](LICENSE)
141 | 


--------------------------------------------------------------------------------
/src/components/THeader.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | 
  3 | defineProps({
  4 |   title: {
  5 |     type: String,
  6 |     default: 'vue-web-terminal'
  7 |   },
  8 |   pinned: Boolean,
  9 |   draggable: Boolean,
 10 |   fullscreenState: Boolean
 11 | })
 12 | const emits = defineEmits(['on-click'])
 13 | 
 14 | const _triggerClick = (type) => {
 15 |   emits('on-click', type)
 16 | }
 17 | </script>
 18 | 
 19 | <template>
 20 |   <div class="t-header">
 21 |     <span class="t-header-title t-disable-select" @click="_triggerClick('title')">
 22 |       {{ title }}
 23 |     </span>
 24 |     <ul class="t-shell-dots">
 25 |       <li class="shell-dot-item t-shell-dots-red"
 26 |           @click="_triggerClick('close')">
 27 |         <svg t="1719914784910"
 28 |              class="t-shell-dot"
 29 |              viewBox="0 0 1024 1024"
 30 |              version="1.1"
 31 |              xmlns="http://www.w3.org/2000/svg"
 32 |              p-id="7341"
 33 |              width="10"
 34 |              height="10">
 35 |           <path
 36 |               d="M803.84 863.744c-8.704 0-16.896-3.584-23.552-10.24L512 585.728l-267.264 267.264c-6.656 6.656-14.336 10.24-23.04 10.24-12.288 0-25.088-7.168-39.424-21.504-14.848-14.848-21.504-27.648-21.504-39.936 0-8.704 3.584-16.384 10.752-23.04L438.272 512 170.496 244.224c-25.6-26.112 0-52.736 9.728-62.464 11.776-11.776 25.088-23.04 39.424-23.04 8.192 0 16.384 3.584 24.576 11.264L512 438.272l267.776-267.264c7.168-7.168 15.36-10.752 23.552-10.752 12.288 0 24.064 7.168 40.96 23.552 11.264 11.264 35.328 35.328 9.216 60.928L585.728 512l267.264 267.264c23.04 23.04 9.216 44.032-9.216 62.976-13.824 14.336-27.648 21.504-39.936 21.504z"
 37 |               p-id="7342"
 38 |               fill="#1413139c"/>
 39 |         </svg>
 40 |       </li>
 41 |       <li class="shell-dot-item t-shell-dots-yellow">
 42 | 
 43 |       </li>
 44 |       <li class="shell-dot-item t-shell-dots-green"
 45 |           @click="_triggerClick('fullscreen')">
 46 |         <svg t="1719914741670"
 47 |              class="t-shell-dot"
 48 |              viewBox="0 0 1027 1024"
 49 |              version="1.1"
 50 |              xmlns="http://www.w3.org/2000/svg"
 51 |              p-id="7131"
 52 |              width="10"
 53 |              height="10">
 54 |           <path
 55 |               d="M403.456 549.888l-173.568 173.568v-123.392c0-8.192-6.656-14.848-14.848-14.848H143.872c-8.192 0-14.848 6.656-14.848 14.848v237.056c0 31.744 26.112 57.344 57.344 57.344h237.568c8.192 0 14.848-6.656 14.848-14.848V808.96c0-8.192-6.656-14.848-14.848-14.848H302.08l173.056-173.056c5.632-5.632 5.632-14.848 0-20.48l-50.688-50.688c-6.144-5.632-15.36-5.632-20.992 0zM894.464 254.464V186.88c0.512-31.744-25.6-57.344-56.832-57.344h-237.568c-7.68 0-14.336 6.144-14.336 14.336v72.192c0 7.68 6.144 14.336 14.336 14.336h123.904l-169.984 168.96c-5.632 5.632-5.632 14.336 0 19.968L605.696 471.04c5.632 5.632 14.336 5.632 19.968 0L793.6 302.592v120.832c0 7.68 6.144 14.336 14.336 14.336h72.192c7.68 0 14.336-6.144 14.336-14.336v-168.96z"
 56 |               p-id="7132"
 57 |               fill="#1413139c"/>
 58 |         </svg>
 59 |       </li>
 60 |     </ul>
 61 | 
 62 |     <div class="t-header-pin" @click="_triggerClick('pin')" v-if="draggable">
 63 |       <svg v-if="pinned"
 64 |            t="1683254395548"
 65 |            class="icon"
 66 |            viewBox="0 0 1025 1024"
 67 |            version="1.1"
 68 |            xmlns="http://www.w3.org/2000/svg"
 69 |            p-id="4113"
 70 |            width="18"
 71 |            height="18">
 72 |         <path d="M320 839.68l-238.592 174.08c-8.704 6.656-19.456 9.728-29.696 9.728-12.8 0-26.112-5.12-35.84-14.848-17.92-17.92-20.48-46.08-5.12-66.56l212.992-288.256L56.32 487.424C39.936 471.04 36.864 445.44 48.128 425.472c8.192-12.8 76.8-112.64 229.376-75.264 2.56 0.512 5.12 0.512 8.192 1.024 6.144 0.512 13.312 1.024 20.992 2.56 32.256 5.12 89.6-20.48 139.264-62.976 47.616-40.448 78.336-87.552 78.336-120.32 0-7.68 0-15.872-0.512-23.552-1.024-30.72-3.072-77.824 31.744-112.64 41.472-41.472 107.52-45.056 153.088-7.68 1.024 0.512 1.536 1.536 2.56 2.56 24.576 24.064 276.48 275.968 279.04 278.528 21.504 21.504 33.792 50.688 33.792 81.408s-11.776 59.392-33.792 80.896c-34.816 34.816-82.432 33.28-113.664 31.744-7.168 0-15.36-0.512-23.04-0.512-30.72 0-67.584 21.504-103.936 60.928-50.688 55.296-81.92 126.464-79.36 158.72 1.024 10.24 3.072 28.16 3.584 30.72 36.864 149.504-62.976 217.6-74.752 225.28-20.48 12.288-46.592 9.216-62.976-7.168l-165.376-165.376-50.688 35.328z"
 73 |               fill="#65ff2e"
 74 |               class="t-shell-pin-icon"
 75 |               p-id="4114"/>
 76 |       </svg>
 77 |       <svg v-else
 78 |            t="1683166931100"
 79 |            class="icon"
 80 |            viewBox="0 0 1025 1024"
 81 |            version="1.1"
 82 |            xmlns="http://www.w3.org/2000/svg"
 83 |            p-id="2638"
 84 |            width="18"
 85 |            height="18">
 86 |         <path
 87 |             d="M51.196068 1024c-13.021992 0-26.0184-5.091113-36.021541-15.094254-18.113104-18.164271-20.262117-46.050265-5.091113-66.337966l213.059228-288.325828-166.983379-166.983379C39.862586 470.961896 36.639068 445.48075 48.305135 425.2698c7.982046-12.612656 76.699275-112.82315 229.483822-75.010766 2.532765 0.307002 5.270197 0.537253 8.212297 0.793088 6.267953 0.537253 13.277827 1.17684 20.87612 2.404847 32.33752 5.244614 89.516599-20.722619 139.148552-63.037697 47.559691-40.49865 78.285451-87.751339 78.285451-120.344693 0-7.57271-0.179084-15.631507-0.358169-23.536802-1.279174-30.623426-3.223519-77.697031 31.979351-112.874317 41.649907-41.701074 107.552953-45.05251 153.270633-7.854129 0.921005 0.741921 1.76526 1.535009 2.583932 2.379264l-0.025583 0c24.585725 24.048472 276.608594 275.815506 279.243692 278.476188 21.694792 21.694792 33.642277 50.527374 33.693444 81.176384 0.025583 30.674593-11.896319 59.456009-33.539943 81.099634-35.023785 35.049369-82.353225 33.053857-113.565071 31.723516-7.393626-0.153501-15.478006-0.332585-23.025133-0.332585-30.828094 0-67.69389 21.592458-103.715431 60.760767-50.808793 55.260318-82.09739 126.63823-79.411124 158.617581 1.125673 10.258976 3.223519 28.37208 3.607271 30.930428 36.891379 149.612195-63.114447 217.843339-74.627013 225.109047-20.697036 12.484739-46.357267 9.389137-63.012113-7.240125l-178.393611-178.393611c-10.003141-10.003141-10.003141-26.171901 0-36.175042s26.171901-10.003141 36.175042 0l178.393611 178.393611c7.854129-5.091113 80.101878-54.646315 51.320462-171.76749-0.51167-2.35368-3.044434-23.562386-4.374775-35.970374-4.298025-51.115795 35.586622-136.027367 92.688951-198.118475 32.439854-35.254036 83.27423-77.287695 141.348731-77.287695 7.905296 0 16.399011 0.179084 24.662475 0.358169 32.41427 1.355924 58.048918 0.972172 75.77827-16.782763 11.973069-11.973069 18.548024-27.885994 18.548024-44.847842-0.025583-17.013015-6.677288-33.00269-18.701524-45.05251C952.220677 340.23031 683.849964 72.243349 675.944668 64.645055c-24.278723-19.724864-60.7096-17.882853-83.785899 5.21903-17.908437 17.908437-18.317772 43.491917-17.013015 75.087516 0.204668 8.800717 0.383752 17.243266 0.383752 25.148562 0 48.378362-35.995957 107.936705-96.270638 159.282751-49.478452 42.135993-122.979792 83.811483-180.491457 74.60143-6.293536-1.023339-12.049819-1.509425-17.192099-1.944345-3.325852-0.281418-6.421454-0.562837-9.312387-0.921005-2.456014-0.07675-4.860861-0.537253-7.188958-1.304758-117.760762-29.037251-167.597382 43.44075-172.893163 51.806549l182.742803 182.026466c8.954218 8.954218 10.028724 23.101883 2.481598 33.309692L51.170485 973.114457l238.617125-174.530506c11.435816-8.365798 27.425491-5.80745 35.740123 5.602782s5.80745 27.399908-5.602782 35.714539l-238.821793 174.12117C72.148939 1020.699731 61.685295 1024 51.196068 1024z"
 88 |             fill="#e6e6e6"
 89 |             class="t-shell-pin-icon"
 90 |             p-id="2639"/>
 91 |       </svg>
 92 |     </div>
 93 |   </div>
 94 | </template>
 95 | 
 96 | <style scoped>
 97 | .t-header-pin {
 98 |   display: inline-block;
 99 |   position: absolute;
100 |   z-index: 100;
101 |   right: 13px;
102 |   top: 7px;
103 |   cursor: pointer;
104 | }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/ansi/ansi-256-colors.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "c0": "rgb(0,0,0)",
  3 |   "c1": "rgb(128,0,0)",
  4 |   "c2": "rgb(0,128,0)",
  5 |   "c3": "rgb(128,128,0)",
  6 |   "c4": "rgb(0,0,128)",
  7 |   "c5": "rgb(128,0,128)",
  8 |   "c6": "rgb(0,128,128)",
  9 |   "c7": "rgb(192,192,192)",
 10 |   "c8": "rgb(128,128,128)",
 11 |   "c9": "rgb(255,0,0)",
 12 |   "c10": "rgb(0,255,0)",
 13 |   "c11": "rgb(255,255,0)",
 14 |   "c12": "rgb(0,0,255)",
 15 |   "c13": "rgb(255,0,255)",
 16 |   "c14": "rgb(0,255,255)",
 17 |   "c15": "rgb(255,255,255)",
 18 |   "c16": "rgb(0,0,0)",
 19 |   "c17": "rgb(0,0,95)",
 20 |   "c18": "rgb(0,0,135)",
 21 |   "c19": "rgb(0,0,175)",
 22 |   "c20": "rgb(0,0,215)",
 23 |   "c21": "rgb(0,0,255)",
 24 |   "c22": "rgb(0,95,0)",
 25 |   "c23": "rgb(0,95,95)",
 26 |   "c24": "rgb(0,95,135)",
 27 |   "c25": "rgb(0,95,175)",
 28 |   "c26": "rgb(0,95,215)",
 29 |   "c27": "rgb(0,95,255)",
 30 |   "c28": "rgb(0,135,0)",
 31 |   "c29": "rgb(0,135,95)",
 32 |   "c30": "rgb(0,135,135)",
 33 |   "c31": "rgb(0,135,175)",
 34 |   "c32": "rgb(0,135,215)",
 35 |   "c33": "rgb(0,135,255)",
 36 |   "c34": "rgb(0,175,0)",
 37 |   "c35": "rgb(0,175,95)",
 38 |   "c36": "rgb(0,175,135)",
 39 |   "c37": "rgb(0,175,175)",
 40 |   "c38": "rgb(0,175,215)",
 41 |   "c39": "rgb(0,175,255)",
 42 |   "c40": "rgb(0,215,0)",
 43 |   "c41": "rgb(0,215,95)",
 44 |   "c42": "rgb(0,215,135)",
 45 |   "c43": "rgb(0,215,175)",
 46 |   "c44": "rgb(0,215,215)",
 47 |   "c45": "rgb(0,215,255)",
 48 |   "c46": "rgb(0,255,0)",
 49 |   "c47": "rgb(0,255,95)",
 50 |   "c48": "rgb(0,255,135)",
 51 |   "c49": "rgb(0,255,175)",
 52 |   "c50": "rgb(0,255,215)",
 53 |   "c51": "rgb(0,255,255)",
 54 |   "c52": "rgb(95,0,0)",
 55 |   "c53": "rgb(95,0,95)",
 56 |   "c54": "rgb(95,0,135)",
 57 |   "c55": "rgb(95,0,175)",
 58 |   "c56": "rgb(95,0,215)",
 59 |   "c57": "rgb(95,0,255)",
 60 |   "c58": "rgb(95,95,0)",
 61 |   "c59": "rgb(95,95,95)",
 62 |   "c60": "rgb(95,95,135)",
 63 |   "c61": "rgb(95,95,175)",
 64 |   "c62": "rgb(95,95,215)",
 65 |   "c63": "rgb(95,95,255)",
 66 |   "c64": "rgb(95,135,0)",
 67 |   "c65": "rgb(95,135,95)",
 68 |   "c66": "rgb(95,135,135)",
 69 |   "c67": "rgb(95,135,175)",
 70 |   "c68": "rgb(95,135,215)",
 71 |   "c69": "rgb(95,135,255)",
 72 |   "c70": "rgb(95,175,0)",
 73 |   "c71": "rgb(95,175,95)",
 74 |   "c72": "rgb(95,175,135)",
 75 |   "c73": "rgb(95,175,175)",
 76 |   "c74": "rgb(95,175,215)",
 77 |   "c75": "rgb(95,175,255)",
 78 |   "c76": "rgb(95,215,0)",
 79 |   "c77": "rgb(95,215,95)",
 80 |   "c78": "rgb(95,215,135)",
 81 |   "c79": "rgb(95,215,175)",
 82 |   "c80": "rgb(95,215,215)",
 83 |   "c81": "rgb(95,215,255)",
 84 |   "c82": "rgb(95,255,0)",
 85 |   "c83": "rgb(95,255,95)",
 86 |   "c84": "rgb(95,255,135)",
 87 |   "c85": "rgb(95,255,175)",
 88 |   "c86": "rgb(95,255,215)",
 89 |   "c87": "rgb(95,255,255)",
 90 |   "c88": "rgb(135,0,0)",
 91 |   "c89": "rgb(135,0,95)",
 92 |   "c90": "rgb(135,0,135)",
 93 |   "c91": "rgb(135,0,175)",
 94 |   "c92": "rgb(135,0,215)",
 95 |   "c93": "rgb(135,0,255)",
 96 |   "c94": "rgb(135,95,0)",
 97 |   "c95": "rgb(135,95,95)",
 98 |   "c96": "rgb(135,95,135)",
 99 |   "c97": "rgb(135,95,175)",
100 |   "c98": "rgb(135,95,215)",
101 |   "c99": "rgb(135,95,255)",
102 |   "c100": "rgb(135,135,0)",
103 |   "c101": "rgb(135,135,95)",
104 |   "c102": "rgb(135,135,135)",
105 |   "c103": "rgb(135,135,175)",
106 |   "c104": "rgb(135,135,215)",
107 |   "c105": "rgb(135,135,255)",
108 |   "c106": "rgb(135,175,0)",
109 |   "c107": "rgb(135,175,95)",
110 |   "c108": "rgb(135,175,135)",
111 |   "c109": "rgb(135,175,175)",
112 |   "c110": "rgb(135,175,215)",
113 |   "c111": "rgb(135,175,255)",
114 |   "c112": "rgb(135,215,0)",
115 |   "c113": "rgb(135,215,95)",
116 |   "c114": "rgb(135,215,135)",
117 |   "c115": "rgb(135,215,175)",
118 |   "c116": "rgb(135,215,215)",
119 |   "c117": "rgb(135,215,255)",
120 |   "c118": "rgb(135,255,0)",
121 |   "c119": "rgb(135,255,95)",
122 |   "c120": "rgb(135,255,135)",
123 |   "c121": "rgb(135,255,175)",
124 |   "c122": "rgb(135,255,215)",
125 |   "c123": "rgb(135,255,255)",
126 |   "c124": "rgb(175,0,0)",
127 |   "c125": "rgb(175,0,95)",
128 |   "c126": "rgb(175,0,135)",
129 |   "c127": "rgb(175,0,175)",
130 |   "c128": "rgb(175,0,215)",
131 |   "c129": "rgb(175,0,255)",
132 |   "c130": "rgb(175,95,0)",
133 |   "c131": "rgb(175,95,95)",
134 |   "c132": "rgb(175,95,135)",
135 |   "c133": "rgb(175,95,175)",
136 |   "c134": "rgb(175,95,215)",
137 |   "c135": "rgb(175,95,255)",
138 |   "c136": "rgb(175,135,0)",
139 |   "c137": "rgb(175,135,95)",
140 |   "c138": "rgb(175,135,135)",
141 |   "c139": "rgb(175,135,175)",
142 |   "c140": "rgb(175,135,215)",
143 |   "c141": "rgb(175,135,255)",
144 |   "c142": "rgb(175,175,0)",
145 |   "c143": "rgb(175,175,95)",
146 |   "c144": "rgb(175,175,135)",
147 |   "c145": "rgb(175,175,175)",
148 |   "c146": "rgb(175,175,215)",
149 |   "c147": "rgb(175,175,255)",
150 |   "c148": "rgb(175,215,0)",
151 |   "c149": "rgb(175,215,95)",
152 |   "c150": "rgb(175,215,135)",
153 |   "c151": "rgb(175,215,175)",
154 |   "c152": "rgb(175,215,215)",
155 |   "c153": "rgb(175,215,255)",
156 |   "c154": "rgb(175,255,0)",
157 |   "c155": "rgb(175,255,95)",
158 |   "c156": "rgb(175,255,135)",
159 |   "c157": "rgb(175,255,175)",
160 |   "c158": "rgb(175,255,215)",
161 |   "c159": "rgb(175,255,255)",
162 |   "c160": "rgb(215,0,0)",
163 |   "c161": "rgb(215,0,95)",
164 |   "c162": "rgb(215,0,135)",
165 |   "c163": "rgb(215,0,175)",
166 |   "c164": "rgb(215,0,215)",
167 |   "c165": "rgb(215,0,255)",
168 |   "c166": "rgb(215,95,0)",
169 |   "c167": "rgb(215,95,95)",
170 |   "c168": "rgb(215,95,135)",
171 |   "c169": "rgb(215,95,175)",
172 |   "c170": "rgb(215,95,215)",
173 |   "c171": "rgb(215,95,255)",
174 |   "c172": "rgb(215,135,0)",
175 |   "c173": "rgb(215,135,95)",
176 |   "c174": "rgb(215,135,135)",
177 |   "c175": "rgb(215,135,175)",
178 |   "c176": "rgb(215,135,215)",
179 |   "c177": "rgb(215,135,255)",
180 |   "c178": "rgb(215,175,0)",
181 |   "c179": "rgb(215,175,95)",
182 |   "c180": "rgb(215,175,135)",
183 |   "c181": "rgb(215,175,175)",
184 |   "c182": "rgb(215,175,215)",
185 |   "c183": "rgb(215,175,255)",
186 |   "c184": "rgb(215,215,0)",
187 |   "c185": "rgb(215,215,95)",
188 |   "c186": "rgb(215,215,135)",
189 |   "c187": "rgb(215,215,175)",
190 |   "c188": "rgb(215,215,215)",
191 |   "c189": "rgb(215,215,255)",
192 |   "c190": "rgb(215,255,0)",
193 |   "c191": "rgb(215,255,95)",
194 |   "c192": "rgb(215,255,135)",
195 |   "c193": "rgb(215,255,175)",
196 |   "c194": "rgb(215,255,215)",
197 |   "c195": "rgb(215,255,255)",
198 |   "c196": "rgb(255,0,0)",
199 |   "c197": "rgb(255,0,95)",
200 |   "c198": "rgb(255,0,135)",
201 |   "c199": "rgb(255,0,175)",
202 |   "c200": "rgb(255,0,215)",
203 |   "c201": "rgb(255,0,255)",
204 |   "c202": "rgb(255,95,0)",
205 |   "c203": "rgb(255,95,95)",
206 |   "c204": "rgb(255,95,135)",
207 |   "c205": "rgb(255,95,175)",
208 |   "c206": "rgb(255,95,215)",
209 |   "c207": "rgb(255,95,255)",
210 |   "c208": "rgb(255,135,0)",
211 |   "c209": "rgb(255,135,95)",
212 |   "c210": "rgb(255,135,135)",
213 |   "c211": "rgb(255,135,175)",
214 |   "c212": "rgb(255,135,215)",
215 |   "c213": "rgb(255,135,255)",
216 |   "c214": "rgb(255,175,0)",
217 |   "c215": "rgb(255,175,95)",
218 |   "c216": "rgb(255,175,135)",
219 |   "c217": "rgb(255,175,175)",
220 |   "c218": "rgb(255,175,215)",
221 |   "c219": "rgb(255,175,255)",
222 |   "c220": "rgb(255,215,0)",
223 |   "c221": "rgb(255,215,95)",
224 |   "c222": "rgb(255,215,135)",
225 |   "c223": "rgb(255,215,175)",
226 |   "c224": "rgb(255,215,215)",
227 |   "c225": "rgb(255,215,255)",
228 |   "c226": "rgb(255,255,0)",
229 |   "c227": "rgb(255,255,95)",
230 |   "c228": "rgb(255,255,135)",
231 |   "c229": "rgb(255,255,175)",
232 |   "c230": "rgb(255,255,215)",
233 |   "c231": "rgb(255,255,255)",
234 |   "c232": "rgb(8,8,8)",
235 |   "c233": "rgb(18,18,18)",
236 |   "c234": "rgb(28,28,28)",
237 |   "c235": "rgb(38,38,38)",
238 |   "c236": "rgb(48,48,48)",
239 |   "c237": "rgb(58,58,58)",
240 |   "c238": "rgb(68,68,68)",
241 |   "c239": "rgb(78,78,78)",
242 |   "c240": "rgb(88,88,88)",
243 |   "c241": "rgb(98,98,98)",
244 |   "c242": "rgb(108,108,108)",
245 |   "c243": "rgb(118,118,118)",
246 |   "c244": "rgb(128,128,128)",
247 |   "c245": "rgb(138,138,138)",
248 |   "c246": "rgb(148,148,148)",
249 |   "c247": "rgb(158,158,158)",
250 |   "c248": "rgb(168,168,168)",
251 |   "c249": "rgb(178,178,178)",
252 |   "c250": "rgb(188,188,188)",
253 |   "c251": "rgb(198,198,198)",
254 |   "c252": "rgb(208,208,208)",
255 |   "c253": "rgb(218,218,218)",
256 |   "c254": "rgb(228,228,228)",
257 |   "c255": "rgb(238,238,238)"
258 | }
259 | 


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
  1 | import {App} from "vue";
  2 | 
  3 | export type TerminalMessageClass = 'success' | 'error' | 'info' | 'warning' | 'system'
  4 | 
  5 | export type TerminalMessageType = 'cmdLine' | 'normal' | 'json' | 'code' | 'table' | 'html' | 'ansi'
  6 | 
  7 | export type TerminalCursorStyle = 'block' | 'underline' | 'bar' | 'none'
  8 | 
  9 | export interface VueWebTerminal {
 10 |     install: (app: App) => void;
 11 |     /**
 12 |      * 自定义主题设置，也可以覆盖默认的 dark 和 light 主题
 13 |      * @param theme 主题名
 14 |      * @param css 主题css内容
 15 |      */
 16 |     configTheme: (theme: string, css: string) => void;
 17 |     /**
 18 |      * 配置 local storage 存储名
 19 |      * @param name 存储名
 20 |      */
 21 |     configStoreName: (name: string) => void;
 22 |     /**
 23 |      * 配置每个Terminal实力存储的指令记录数量
 24 |      * @param count
 25 |      */
 26 |     configMaxStoredCommandCountPerInstance: (count: number) => void;
 27 | }
 28 | 
 29 | export interface EditorConfig {
 30 |     open: boolean
 31 |     focus: boolean
 32 |     value: string
 33 |     onClose: null | Function
 34 |     onFocus?: Function
 35 |     onBlur?: Function
 36 | }
 37 | 
 38 | export type Position = {
 39 |     x: number
 40 |     y: number
 41 | }
 42 | 
 43 | export type DragConfig = {
 44 |     width: number | string
 45 |     height: number | string
 46 |     zIndex?: number
 47 |     init?: Position
 48 |     pinned?: boolean
 49 | }
 50 | 
 51 | export type ScreenType = {
 52 |     xs?: boolean
 53 |     sm?: boolean
 54 |     md?: boolean
 55 |     lg?: boolean
 56 |     xl?: boolean
 57 | }
 58 | 
 59 | export type Command = {
 60 |     key: string
 61 |     title?: string
 62 |     group?: string
 63 |     usage?: string
 64 |     description?: string
 65 |     example?: Array<CommandExample>
 66 | }
 67 | 
 68 | export type CommandExample = {
 69 |     cmd: string
 70 |     des?: string
 71 | }
 72 | 
 73 | export type CmdHistory = {
 74 |     cmdLog: string[],
 75 |     cmdIdx: number
 76 | }
 77 | 
 78 | export type TerminalConfiguration = {
 79 |     storeName: string,
 80 |     maxStoredCommandCountPerInstance: number,
 81 |     themes: Record<string, string>,
 82 | }
 83 | 
 84 | export type MessageContentTable = {
 85 |     head: string[],
 86 |     rows: string[][]
 87 | }
 88 | 
 89 | export type MessageGroup = {
 90 |     fold: boolean,
 91 |     logs: Message[],
 92 |     tag?: string
 93 | }
 94 | 
 95 | export type Message = {
 96 |     type?: TerminalMessageType
 97 |     content: string | number | object | MessageContentTable | Array<any>
 98 |     class?: TerminalMessageClass
 99 |     tag?: string,
100 |     depth?: number
101 | }
102 | 
103 | export type AskConfig = {
104 |     isPassword: boolean
105 |     question: string,
106 |     autoReview: boolean
107 |     callback?: (value: string) => void
108 | }
109 | 
110 | export type InputTipItem = {
111 |     content: string,
112 |     description?: string,
113 |     command?: Command
114 | }
115 | 
116 | export type CharWidth = {
117 |     en?: number,
118 |     cn?: number
119 | }
120 | 
121 | export type TerminalElementInfo = {
122 |     pos: Position,
123 |     screenWidth: number,
124 |     screenHeight: number,
125 |     clientWidth: number,
126 |     clientHeight: number,
127 |     charWidth: CharWidth
128 | }
129 | 
130 | export type CommandSortHandlerFunc = (a: any, b: any) => number
131 | 
132 | export type InputFilterFunc = (str1: string, str2: string, event: InputEvent | CompositionEvent) => string | null
133 | 
134 | export type CommandFormatterFunc = (cmd: string) => string
135 | 
136 | export type TerminalApiListenerFunc = (type: string, options?: any) => any | void
137 | 
138 | export type SuccessFunc = (message?: Message | Array<Message> | string | TerminalFlash | TerminalAsk) => void
139 | 
140 | export type FailedFunc = (message: string) => void
141 | 
142 | export type PushMessageBeforeFunc = (message: Message, name: String) => void
143 | 
144 | /**
145 |  * 提示选择处理函数
146 |  *
147 |  * @param command       当前用户输入的完整命令行
148 |  * @param cursorIndex   当前光标所处位置
149 |  * @param item          用户选择提示项
150 |  * @param callback      填充结束后需调用此函数返回新的命令行
151 |  */
152 | export type InputTipsSelectHandlerFunc = (command: string, cursorIndex: number, item: InputTipItem, callback: (cmd: string) => void) => void
153 | 
154 | /**
155 |  * 用户自定义命令搜索提示实现
156 |  *
157 |  * @param command       当前用户输入的完整命令行
158 |  * @param cursorIndex   当前光标所处位置
159 |  * @param commandStore  命令集合
160 |  * @param callback      搜索结束回调，回调格式为一个数组
161 |  */
162 | export type InputTipsSearchHandlerFunc = (command: string, cursorIndex: number, commandStore: Command[], callback: (tips: InputTipItem[], openTips?: boolean) => void) => void
163 | 
164 | class TerminalCallback {
165 | 
166 |     onFinishListener: Function
167 | 
168 |     finish() {
169 |         if (this.onFinishListener != null) {
170 |             this.onFinishListener()
171 |         }
172 |     }
173 | 
174 |     onFinish(callback: Function) {
175 |         this.onFinishListener = callback
176 |     }
177 | }
178 | 
179 | export class TerminalAsk extends TerminalCallback {
180 |     handler: Function
181 | 
182 |     ask(options: AskConfig) {
183 |         if (this.handler != null) {
184 |             this.handler(options)
185 |         }
186 |     }
187 | 
188 |     onAsk(callback: (config: AskConfig) => void) {
189 |         this.handler = callback
190 |     }
191 | }
192 | 
193 | export class TerminalFlash extends TerminalCallback {
194 |     handler: Function
195 | 
196 |     flush(msg: string) {
197 |         if (this.handler != null) {
198 |             this.handler(msg)
199 |         }
200 |     }
201 | 
202 |     onFlush(callback: (msg: string) => void) {
203 |         this.handler = callback
204 |     }
205 | }
206 | 
207 | export interface TerminalApiData {
208 |     pool: {
209 |         [key: string]: TerminalApiListenerFunc
210 |     },
211 |     configuration: TerminalConfiguration
212 | }
213 | 
214 | export class TerminalApi {
215 | 
216 |     data: TerminalApiData
217 | 
218 |     constructor(data: TerminalApiData) {
219 |         this.data = data
220 |     }
221 | 
222 |     post(name: string = 'terminal', event: string, options?: any) {
223 |         let listener: TerminalApiListenerFunc = this.data.pool[name]
224 |         if (listener != null) {
225 |             return listener(event, options)
226 |         }
227 |     }
228 | 
229 |     pushMessage(name: string, message: Message | Array<Message> | string): void {
230 |         this.post(name, 'pushMessage', message)
231 |     }
232 | 
233 |     appendMessage(name: string, message: string): void {
234 |         this.post(name, 'appendMessage', message)
235 |     }
236 | 
237 |     fullscreen(name: string): void {
238 |         this.post(name, "fullscreen")
239 |     }
240 | 
241 |     isFullscreen(name: string): boolean {
242 |         return this.post(name, 'isFullscreen')
243 |     }
244 | 
245 |     dragging(name: string, position: Position): void {
246 |         this.post(name, 'dragging', position)
247 |     }
248 | 
249 |     /**
250 |      * Simulate trigger execution instructions
251 |      *
252 |      * @param name name of terminal
253 |      * @param command content of the command
254 |      * @return { boolean } Trigger success
255 |      */
256 |     execute(name: string, command: string): boolean {
257 |         return this.post(name, 'execute', command)
258 |     }
259 | 
260 |     focus(name: string, enforce?: boolean): void {
261 |         this.post(name, 'focus', enforce)
262 |     }
263 | 
264 |     elementInfo(name: string): TerminalElementInfo {
265 |         return this.post(name, 'elementInfo')
266 |     }
267 | 
268 |     textEditorOpen(name: string, setting?: EditorSetting): void {
269 |         this.post(name, 'textEditorOpen', setting)
270 |     }
271 | 
272 |     textEditorClose(name: string, closeCallbackParams?: any): string | undefined {
273 |         return this.post(name, 'textEditorClose', closeCallbackParams)
274 |     }
275 | 
276 |     clearLog(name: string, clearHistory?: boolean): void {
277 |         this.post(name, 'clearLog', clearHistory)
278 |     }
279 | 
280 |     getCommand(name: string): string {
281 |         return this.post(name, 'getCommand')
282 |     }
283 | 
284 |     setCommand(name: string, newCommand: string): void {
285 |         this.post(name, 'setCommand', newCommand)
286 |     }
287 | 
288 |     switchAllFoldState(name: string, foldStat: boolean): number {
289 |         return this.post(name, 'switchAllFoldState', foldStat)
290 |     }
291 | 
292 |     jumpToBottom(name: string, enforce: boolean): void {
293 |         this.post(name, 'jumpToBottom', enforce)
294 |     }
295 | 
296 |     getOutputs(name: string): MessageGroup[] {
297 |         return this.post(name, 'getOutputs')
298 |     }
299 | }
300 | 
301 | export interface EditorSetting {
302 |     content: string,
303 |     onClose: Function
304 | }
305 | 


--------------------------------------------------------------------------------
/src/ansi/index.ts:
--------------------------------------------------------------------------------
  1 | import ansi256colors from "./ansi-256-colors.json";
  2 | 
  3 | export const ANSI_NUL = '\x00'
  4 | export const ANSI_BEL = '\x07'
  5 | export const ANSI_BS = '\x08'
  6 | export const ANSI_CR = '\x0D'
  7 | export const ANSI_ENQ = '\x05'
  8 | export const ANSI_FF = '\x0C'
  9 | export const ANSI_LF = '\x0A'
 10 | export const ANSI_SO = '\x0E'
 11 | export const ANSI_SP = '\x20'
 12 | export const ANSI_TAB = '\x09'
 13 | export const ANSI_VT = '\x0B'
 14 | export const ANSI_SI = '\x0F'
 15 | export const ANSI_ESC = '\x1B'
 16 | 
 17 | export const ANSI_IND = ANSI_ESC + 'D' + '\u0000'
 18 | export const ANSI_NEL = ANSI_ESC + 'E'
 19 | export const ANSI_HTS = ANSI_ESC + 'H'
 20 | export const ANSI_RI = ANSI_ESC + 'M'
 21 | export const ANSI_SS2 = ANSI_ESC + 'N'
 22 | export const ANSI_SS3 = ANSI_ESC + 'O'
 23 | export const ANSI_DCS = ANSI_ESC + 'P'
 24 | export const ANSI_SPA = ANSI_ESC + 'V'
 25 | export const ANSI_EPA = ANSI_ESC + 'W'
 26 | export const ANSI_SOS = ANSI_ESC + 'X'
 27 | export const ANSI_DECID = ANSI_ESC + 'Z'
 28 | export const ANSI_CSI = ANSI_ESC + '['
 29 | export const ANSI_ST = ANSI_ESC + '\\'
 30 | export const ANSI_OSC = ANSI_ESC + ']'
 31 | export const ANSI_PM = ANSI_ESC + '^'
 32 | export const ANSI_APC = ANSI_ESC + '_'
 33 | export const ANSI_DECPAM = ANSI_ESC + '='
 34 | export const ANSI_DECPNM = ANSI_ESC + '>'
 35 | export const ANSI_DESIGNATE_CHARSET_0 = ANSI_ESC + '('
 36 | export const ANSI_DESIGNATE_CHARSET_1 = ANSI_ESC + ')'
 37 | export const ANSI_DESIGNATE_CHARSET_2 = ANSI_ESC + '*'
 38 | export const ANSI_DESIGNATE_CHARSET_3 = ANSI_ESC + '+'
 39 | export const ANSI_CHARSET = ANSI_ESC + '%'
 40 | export const ANSI_DECD = ANSI_ESC + '#'
 41 | 
 42 | /**
 43 |  * 解析并过滤ANSI Code，目前仅对着色码翻译，其余码过滤
 44 |  *
 45 |  * @param str
 46 |  * @param os windows | mac | linux | unix
 47 |  * @returns string
 48 |  * @private
 49 |  */
 50 | export function _parseANSI(str: string, os: 'windows' | 'mac' | 'linux' | 'unix' = 'windows'): string {
 51 |     let lines = ['']
 52 |     let data = {
 53 |         attachStyle: <string>'',
 54 |         styleFlag: <Array<string | number>>[]
 55 |     }
 56 | 
 57 |     let lastChar = {
 58 |         dom: <HTMLElement>null,
 59 |         attachStyle: ''
 60 |     };
 61 | 
 62 |     function getLastCharDomStr(): string {
 63 |         if (!lastChar.dom) {
 64 |             return ''
 65 |         }
 66 |         let container = document.createElement("div");
 67 |         container.appendChild(lastChar.dom)
 68 |         let domStr = container.innerHTML
 69 |         container = null
 70 |         return domStr
 71 |     }
 72 | 
 73 |     function updateLastChar(clazz: string | null, style: string, innerText: string): void {
 74 |         let dom = document.createElement('span')
 75 |         dom.className = clazz
 76 |         dom.setAttribute('style', style)
 77 |         dom.innerText = innerText
 78 | 
 79 |         lastChar.dom = dom
 80 |         lastChar.attachStyle = style
 81 |     }
 82 | 
 83 |     function checkDirtyChar(): void {
 84 |         if (lastChar.dom) {
 85 |             lines[lines.length - 1] = lines[lines.length - 1] + getLastCharDomStr()
 86 |             lastChar.dom = null
 87 |             lastChar.attachStyle = ''
 88 |         }
 89 |     }
 90 | 
 91 |     function newLine():void {
 92 |         checkDirtyChar()
 93 |         lines[lines.length - 1] = '<div class="t-ansi-line">' + lines[lines.length - 1] + '</div>'
 94 |         lines.push('')
 95 |     }
 96 | 
 97 |     function fillChar(char: string) {
 98 |         try {
 99 |             let arr = char.split('')
100 |             for (let c of arr) {
101 |                 let clazz = "t-ansi-char"
102 |                 if (data.styleFlag.length > 0) {
103 |                     data.styleFlag.forEach(o => clazz += (' t-ansi-' + parseInt(String(o))))
104 |                 }
105 | 
106 |                 let charStr = null
107 |                 if (lastChar.dom) {
108 |                     //  相同样式进行标签合并
109 |                     if (clazz === lastChar.dom.className && data.attachStyle === lastChar.attachStyle) {
110 |                         lastChar.dom.innerText += c
111 |                     } else {
112 |                         //  保存上一个dom并替换
113 |                         charStr = getLastCharDomStr()
114 |                         updateLastChar(clazz, data.attachStyle, c)
115 |                     }
116 |                 } else {
117 |                     updateLastChar(clazz, data.attachStyle, c)
118 |                 }
119 |                 if (charStr) {
120 |                     lines[lines.length - 1] = lines[lines.length - 1] + charStr
121 |                 }
122 |             }
123 |         } catch (e) {
124 |             console.error('Can not fill char: ' + char.toString(), e)
125 |         }
126 |     }
127 | 
128 |     let arr = Array.from(str)
129 | 
130 |     for (let i = 0; i < arr.length; i++) {
131 |         let c = arr[i]
132 |         if (c === ANSI_NUL) {
133 |             continue
134 |         }
135 |         //  Control Sequence
136 |         if (c === ANSI_ESC) {
137 |             let flag = str.substring(i, i + 2)
138 |             let y = i
139 |             if (flag === ANSI_CSI) {
140 |                 const endFlagReg = /[@ABCDEFGHIJKLMPSTXZ`"bcdfghilmnpqrstwxz]/
141 |                 let controlType
142 |                 y = i + 1
143 |                 while (y < arr.length - 1) {
144 |                     let char = arr[++y]
145 |                     if (endFlagReg.test(char.toString())) {
146 |                         if (char === '`' && y + 1 < arr.length) {
147 |                             let next = arr[y + 1]
148 |                             if (/[wz{|]/.test(next.toString())) {
149 |                                 controlType = char + next
150 |                                 y++
151 |                                 break
152 |                             }
153 |                         } else if (char === '"' && y + 1 < arr.length) {
154 |                             let next = arr[y + 1]
155 |                             if (/[pq]/.test(next.toString())) {
156 |                                 controlType = char + next
157 |                                 y++
158 |                                 break
159 |                             }
160 |                         } else if (char === '&' && y + 1 < arr.length) {
161 |                             let next = arr[y + 1]
162 |                             if (next === 'w') {
163 |                                 controlType = char + next
164 |                                 y++
165 |                                 break
166 |                             }
167 |                         }
168 |                         controlType = char
169 |                         break
170 |                     }
171 |                 }
172 | 
173 |                 let cs = str.substring(i, y + 1)
174 | 
175 |                 if (controlType === 'm') {
176 |                     let value = cs.substring(2, cs.length - 1)
177 |                     if (value.length === 0) {
178 |                         value = '0'
179 |                     }
180 |                     data.styleFlag = []
181 |                     for (let ps of value.split(";")) {
182 |                         let m = parseInt(ps)
183 |                         if (m === 0) {
184 |                             data.attachStyle = ''
185 |                             data.styleFlag = []
186 |                         } else {
187 |                             data.styleFlag.push(m)
188 |                         }
189 |                     }
190 | 
191 |                     if (data.styleFlag.length === 3) {
192 |                         //  256前景色
193 |                         if (data.styleFlag[0] === 38 && data.styleFlag[1] === 5) {
194 |                             // @ts-ignore
195 |                             data.attachStyle += `color:${ansi256colors['c' + data.styleFlag[2]]};`
196 |                             data.styleFlag = []
197 |                         }
198 |                         //  256背景色
199 |                         else if (data.styleFlag[0] === 48 && data.styleFlag[1] === 5) {
200 |                             // @ts-ignore
201 |                             data.attachStyle += `background-color:${ansi256colors['c' + data.styleFlag[2]]};`
202 |                             data.styleFlag = []
203 |                         } else {
204 |                             data.attachStyle = ''
205 |                         }
206 |                     }
207 |                 }
208 |             }
209 |             //  窗口信息同步
210 |             else if (flag === ANSI_OSC) {
211 |                 let p = i + 1
212 |                 while (p <= arr.length) {
213 |                     p++
214 |                     if (arr[p] === ANSI_BEL) {
215 |                         y = p
216 |                         break
217 |                     } else if (arr[p] === ANSI_ESC && arr[p] === '\\') {
218 |                         y = p + 1
219 |                         break
220 |                     }
221 |                 }
222 |             } else if (flag === ANSI_PM) {
223 |                 //  for xterm
224 |                 let p = i + 1
225 |                 while (p < arr.length) {
226 |                     ++p
227 |                     if (arr[p] === '\\') {
228 |                         break
229 |                     }
230 |                 }
231 |                 y = p
232 |             }
233 |             //  切换至Application Keypad
234 |             else if (flag === ANSI_DECPAM) {
235 |                 y = i + 1
236 |             }
237 |             //  切换至常规键入模式
238 |             else if (flag === ANSI_DECPNM) {
239 |                 y = i + 1
240 |             }
241 |             //  设置字符集
242 |             else if (flag === ANSI_DESIGNATE_CHARSET_0 || flag === ANSI_DESIGNATE_CHARSET_1
243 |                 || ANSI_DESIGNATE_CHARSET_2 || ANSI_DESIGNATE_CHARSET_3) {
244 |                 //  忽略
245 |                 y = i + 2
246 |             }
247 |             //  设置字符编码
248 |             else if (flag === ANSI_CHARSET) {
249 |                 //  忽略
250 |                 y = i + 2
251 |             }
252 |             //  设置字符和行 的 宽度、高度
253 |             else if (flag === ANSI_DECD) {
254 |                 y = i + 2
255 |             }
256 |             i = y
257 |             continue
258 |         } else if (c === '\r') {
259 |             if (os === 'windows') {
260 |                 if (i + 1 < arr.length && arr[i + 1] === '\n') {    //  \r\n换行
261 |                     newLine()
262 |                     i++
263 |                 } else {    //  \r回车
264 |                     newLine()
265 |                 }
266 |             } else if (os === 'mac') {
267 |                 newLine()
268 |             }
269 |             continue
270 |         } else if (c === '\n') {
271 |             newLine()
272 |             continue
273 |         } else if (c === '\b') {    //  退格
274 |             continue
275 |         } else if (c === '\t') {    //  水平制表
276 |             fillChar(' '.repeat(4))
277 |             continue
278 |         } else if (c >= '\x00' && c <= '\x1F') {
279 |             //  特殊ascii，暂不做处理
280 |             continue
281 |         }
282 | 
283 |         fillChar(c)
284 |     }
285 | 
286 |     checkDirtyChar()
287 | 
288 |     return lines.join('');
289 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/test/App.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | // import '../lib/theme/light.css'
  3 | // import {Terminal, TerminalApi, TerminalAsk} from '../lib/vue-web-terminal.js'
  4 | // import {Command} from "../lib/types";
  5 | 
  6 | // import '~/css/theme/light.css'
  7 | // import '~/css/theme/dark.css'
  8 | import {Terminal, TerminalApi, TerminalAsk, TerminalElementInfo} from '../src/index'
  9 | import {Command, FailedFunc, Message, SuccessFunc} from '../src/types';
 10 | import {reactive, ref} from "vue";
 11 | 
 12 | const commandStore: Array<Command> = [
 13 |   {
 14 |     key: "COMMAND CONFIG"
 15 |   },
 16 |   {
 17 |     key: "CONFIG",
 18 |   },
 19 |   {
 20 |     key: "config",
 21 |   },
 22 |   {
 23 |     key: "COMMAND CONFIG come on",
 24 |     description: "This is a very long long long long description."
 25 |   },
 26 |   {
 27 |     key: "CONFIG haha",
 28 |   },
 29 |   {
 30 |     key: "Test CONFIG",
 31 |   },
 32 |   {
 33 |     key: "theme",
 34 |     usage: "theme <dark|light>",
 35 |   }
 36 | ]
 37 | const initLog = reactive([
 38 |   {
 39 |     type: 'normal',
 40 |     content: "Terminal Initializing ..."
 41 |   },
 42 |   {
 43 |     type: 'normal',
 44 |     content: "Current login time: " + new Date().toLocaleString()
 45 |   },
 46 |   {
 47 |     type: 'ansi',
 48 |     content: '\x1B[1;34mThis are some blue text.\x1B[0m\n\x1B[30;43mThis is a line of text with a background color.\x1B[0m\n\x1B[92;5mThis is blink text.\x1B[0m'
 49 |   },
 50 |   {
 51 |     type: 'normal',
 52 |     content: "Welcome to vue web terminal! If you are using for the first time, you can use the <span class='t-cmd-key'>help</span> command to learn. Thanks for your star support: <a class='t-a' target='_blank' href='https://github.com/tzfun/vue-web-terminal'>https://github.com/tzfun/vue-web-terminal</a>"
 53 |   }
 54 | ])
 55 | const testInputValue = ref("")
 56 | 
 57 | const terminals = ref<Array<any>>([
 58 |   {
 59 |     show: true,
 60 |     name: 'terminal-test [default]',
 61 |     context: '/vue-web-terminal/test<br/>123/阿里云/2',
 62 |     dragConf: {
 63 |       width: "60%",
 64 |       height: "50%",
 65 |       zIndex: 100,
 66 |       init: {
 67 |         x: 100,
 68 |         y: 70
 69 |       },
 70 |       pinned: false
 71 |     },
 72 |     showHeader: true,
 73 |     theme: 'dark'
 74 |   }
 75 | ])
 76 | 
 77 | const onExecCmd = (key: string, command: string, success: SuccessFunc, failed: FailedFunc, name: string) => {
 78 |   console.log(`Executed command is '${command}'`)
 79 |   if (key === 'list') {
 80 |     success("hello")
 81 |     TerminalApi.pushMessage(name, {
 82 |       class: "success",
 83 |       content: "success text"
 84 |     })
 85 |     TerminalApi.pushMessage(name, {
 86 |       class: "warning",
 87 |       content: "warning text"
 88 |     })
 89 |     TerminalApi.pushMessage(name, {
 90 |       class: "error",
 91 |       content: "error text"
 92 |     })
 93 |     TerminalApi.pushMessage(name, {
 94 |       class: "system",
 95 |       content: "system text"
 96 |     })
 97 |     TerminalApi.pushMessage(name, {
 98 |       class: "info",
 99 |       content: "info text"
100 |     })
101 |   } else if (key === 'code') {
102 |     success({
103 |       type: 'code',
104 |       content: "<template>\n" +
105 |           "  <div id=\"app\">\n" +
106 |           "    <div v-for=\"(item,i) in terminals\" :key=\"i\">\n" +
107 |           "      <terminal\n" +
108 |           "          v-show=\"item.show\"\n" +
109 |           "          :name=\"item.name\"\n" +
110 |           "          :title=\"item.name\"\n" +
111 |           "          :context=\"item.context\"\n" +
112 |           "          :warn-log-count-limit=\"200\"\n" +
113 |           "          :drag-conf=\"item.dragConf\"\n" +
114 |           "          show-header\n" +
115 |           "          :push-message-before=\"_pushMessageBefore\"\n" +
116 |           "          @exec-cmd=\"onExecCmd\"\n" +
117 |           "          @on-active=\"onActive\"\n" +
118 |           "          @on-inactive=\"onInactive\"\n" +
119 |           "          style=\"position: fixed\">\n" +
120 |           "      </terminal>\n" +
121 |           "    </div>\n" +
122 |           "  </div>\n" +
123 |           "\n" +
124 |           "</template>"
125 |     })
126 |   } else if (key === 'loop') {
127 |     let count = 200
128 |     let timer = setInterval(() => {
129 |       if (count-- <= 0) {
130 |         clearInterval(timer)
131 |         success()
132 |       }
133 |       TerminalApi.pushMessage(name, "loop: " + count)
134 |     }, 200)
135 |   } else if (key === 'json') {
136 |     success({
137 |       type: 'json',
138 |       content: {
139 |         key1: '123123',
140 |         key2: true,
141 |         key3: 123123123,
142 |         key4: [{
143 |           key: 12312,
144 |           k: "vasdas"
145 |         }],
146 |         key5: {
147 |           "kasdasd": "asdasd",
148 |           "aksdasd": 1243123423
149 |         }
150 |       }
151 |     })
152 |   } else if (key === 'close') {
153 |     closeWindow(name, true)
154 |     success()
155 |   } else if (key === 'new') {
156 |     let seq = terminals.value.length
157 |     terminals.value.push({
158 |       show: true,
159 |       name: 'terminal-test-' + seq,
160 |       context: '/vue-web-terminal/test/' + seq,
161 |       dragConf: {
162 |         width: "60%",
163 |         height: "50%",
164 |         zIndex: 100,
165 |         init: {
166 |           x: 100 + seq * 50,
167 |           y: 70 + seq * 20
168 |         }
169 |       }
170 |     })
171 |     success()
172 |   } else if (key === 'ansi') {
173 |     let args = command.split(' ')
174 |     let loop = 1;
175 |     if (args.length > 1) {
176 |       loop = parseInt(args[1])
177 |     }
178 |     ansiLoop(name, loop)
179 | 
180 |     success()
181 |   } else if (key === 'edit') {
182 |     TerminalApi.textEditorOpen(name, {
183 |       content: 'Please edit this file',
184 |       onClose: (value: string, option: boolean) => {
185 |         console.log("text close, value:", value, ". option:", option)
186 |         success({
187 |           type: 'code',
188 |           content: value
189 |         })
190 |       }
191 |     })
192 |   } else if (key === 'ask') {
193 |     let asker = new TerminalAsk()
194 |     success(asker)
195 |     asker.ask({
196 |       question: 'Ask? (y/n): ',
197 |       autoReview: true,
198 |       callback: (value: string) => {
199 |         console.log("input: ", value)
200 |         asker.finish()
201 |       }
202 |     })
203 |     TerminalApi.focus(name)
204 |   } else if (key === 'header') {
205 |     terminals.value.forEach((o: any) => {
206 |       if (o.name === name) {
207 |         o.showHeader = !o.showHeader
208 |       }
209 |     })
210 |     success()
211 |   } else if (key === 'append') {
212 |     let content = command.split(" ")[1]
213 |     TerminalApi.appendMessage(name, content)
214 |     success()
215 |   } else if (key === 'doclear') {
216 |     TerminalApi.clearLog(name)
217 |     success()
218 |   } else if (key === 'fold') {
219 |     success(TerminalApi.switchAllFoldState(name, true).toString())
220 |   } else if (key === 'unfold') {
221 |     success(TerminalApi.switchAllFoldState(name, false).toString())
222 |   } else if (key === 'info') {
223 |     success({
224 |       type: 'json',
225 |       content: TerminalApi.elementInfo(name)
226 |     })
227 |   } else if (key === 'theme') {
228 |     let theme = command.split(" ")[1]
229 |     if (theme.match("dark|light")) {
230 |       terminals.value.forEach((o: any) => {
231 |         if (o.name === name) {
232 |           o.theme = theme
233 |         }
234 |       })
235 |       success()
236 |     } else {
237 |       failed("Invalid theme")
238 |     }
239 |   } else if (key === 'name') {
240 |     let newName = command.split(" ")[1]
241 |     terminals.value.forEach((o: any) => {
242 |       if (o.name === name) {
243 |         o.name = newName
244 |       }
245 |     })
246 |     success()
247 |   } else if (key === 'clean') {
248 |     ansiLoop(name, 10)
249 |   } else {
250 |     failed("Unknown command: " + key)
251 |   }
252 | }
253 | 
254 | const ansiLoop = (name: string, loop: number) => {
255 |   for (let i = 0; i < loop; i++) {
256 |     let ansiContent = 'vue-wen-terminal 支持 ANSI 码的着色解码功能，但暂不支持其他的光标、设备、窗口控制等，默认会将不支持的 ANSI 码过滤。\n\n\x1B[1;34mThis are some blue text.\x1B[0m\n\x1B[30;43mThis is a line of text with a background color.\x1B[0m\n\x1B[92;5mThis is blink text.\x1B[0m\n'
257 | 
258 |     ansiContent += '\nThis is xterm-256-color content:\n'
259 |     for (let i = 0; i < 256; i++) {
260 |       ansiContent += ('\x1B[38;5;' + i + 'mV\x1B[0m')
261 |     }
262 | 
263 |     ansiContent += '\n\nThis is xterm-256-color background content:\n'
264 |     for (let i = 0; i < 256; i++) {
265 |       ansiContent += ('\x1B[48;5;' + i + 'm \x1B[0m')
266 |     }
267 | 
268 |     ansiContent += `\nfinished ${i}\n`
269 |     ansiContent += `\tTab ${i} \t 123`
270 |     TerminalApi.pushMessage(name, {
271 |       type: 'ansi',
272 |       content: ansiContent
273 |     })
274 |   }
275 | }
276 | 
277 | const onActive = (name: string) => {
278 |   terminals.value.forEach((o: any) => {
279 |     if (o.name === name) {
280 |       o.dragConf.zIndex = 101
281 |     }
282 |   })
283 | }
284 | 
285 | const onInactive = (name: string) => {
286 |   terminals.value.forEach((o: any) => {
287 |     if (o.name === name) {
288 |       o.dragConf.zIndex = 100
289 |     }
290 |   })
291 | }
292 | 
293 | const onResize = (info: TerminalElementInfo, name: string) => {
294 |   console.log(name, "resize =>", info)
295 | }
296 | 
297 | const pushMessageBefore = (message: Message, name: string) => {
298 |   console.debug(message, name)
299 | }
300 | 
301 | const getCommand = () => {
302 |   console.log("The current command is[", TerminalApi.getCommand(terminals.value[0].name), "]")
303 | }
304 | 
305 | const setCommand = () => {
306 |   TerminalApi.setCommand(terminals.value[0].name, "The custom command -a xxx")
307 | }
308 | 
309 | const jumpToBottom = () => {
310 |   TerminalApi.jumpToBottom(terminals.value[0].name, true)
311 | }
312 | 
313 | const closeWindow = (name: string, remove: boolean = false) => {
314 |   let activeNext: string
315 |   let idx = -1
316 |   for (let i = 0; i < terminals.value.length; i++) {
317 |     let o = terminals.value[i]
318 |     if (o.name === name) {
319 |       o.show = false
320 |       idx = i
321 |     }
322 |     if (o.show) {
323 |       activeNext = o.name
324 |     }
325 |   }
326 |   if (activeNext) {
327 |     TerminalApi.focus(activeNext, true)
328 |   }
329 |   if (remove && idx >= 0) {
330 |     terminals.value.splice(idx, 1)
331 |   }
332 | }
333 | 
334 | const onClick = (key: string, name: string) => {
335 |   if (key === 'close') {
336 |     closeWindow(name, true)
337 |   }
338 | }
339 | 
340 | const textAreaKeyDown = (e: KeyboardEvent) => {
341 |   console.log(e)
342 |   if (e.key === 'Enter') {
343 |     e.preventDefault()
344 |   }
345 | }
346 | 
347 | const textAreaKeyEnter = () => {
348 |   console.log("input enter")
349 | }
350 | 
351 | const focus = () => {
352 |   TerminalApi.focus(terminals.value[0].name, true)
353 | }
354 | </script>
355 | <template>
356 |   <div id="app">
357 | 
358 |     <button @click="getCommand">get command</button>
359 |     <button @click="setCommand">set command</button>
360 |     <button @click="jumpToBottom">jump to bottom</button>
361 |     <textarea v-model="testInputValue"
362 |               @keydown="textAreaKeyDown"
363 |               @keyup.enter="textAreaKeyEnter"/>
364 |     <button @click="focus">focus</button>
365 | 
366 |     <!--    <div style="width: 700px;height: 400px;margin-left: 150px;margin-top: 300px">-->
367 |     <!--      <terminal-->
368 |     <!--          name="test"-->
369 |     <!--          show-header-->
370 |     <!--          @exec-cmd="onExecCmd">-->
371 |     <!--      </terminal>-->
372 |     <!--    </div>-->
373 | 
374 |     <div v-for="item in terminals" :key="item.name">
375 |       <terminal
376 |           v-show="item.show"
377 |           :name="item.name"
378 |           :title="item.name"
379 |           :context="item.context"
380 |           context-suffix=" > "
381 |           :drag-conf="item.dragConf"
382 |           :show-header="item.showHeader"
383 |           :push-message-before="pushMessageBefore"
384 |           :log-size-limit="20"
385 |           cursor-style="block"
386 |           :enable-cursor-blink="true"
387 |           :line-space="15"
388 |           enable-hover-stripe
389 |           :enable-fold="true"
390 |           :init-log="initLog"
391 |           :theme="item.theme"
392 |           :command-store="commandStore"
393 |           @exec-cmd="onExecCmd"
394 |           @on-active="onActive"
395 |           @on-inactive="onInactive"
396 |           @on-resize="onResize"
397 |           @on-click="onClick"
398 |           style="position: fixed">
399 |         <!--        <template #header>-->
400 |         <!--          <div class="custom-header">This is custom header</div>-->
401 |         <!--        </template>-->
402 | <!--        <template #cmdLine="{ item }">-->
403 | <!--          <span>{{ item.content }}</span>-->
404 | <!--        </template>-->
405 |       </terminal>
406 |     </div>
407 |   </div>
408 | </template>
409 | 
410 | <style>
411 | body, html, #app {
412 |   margin: 0;
413 |   padding: 0;
414 |   width: 100%;
415 |   height: 100%;
416 |   background-color: #ffffff;
417 |   font-family: Menlo, Consolas, monospace;
418 |   overflow: auto;
419 | }
420 | 
421 | .custom-header {
422 |   background-color: #0eb4b4;
423 |   color: white;
424 |   text-align: center;
425 |   height: 100px;
426 | }
427 | </style>
428 | 


--------------------------------------------------------------------------------
/src/common/util.ts:
--------------------------------------------------------------------------------
  1 | import {ScreenType} from "~/types";
  2 | 
  3 | /**
  4 |  * 将空格、回车、Tab转译为html
  5 |  *
  6 |  * @param str
  7 |  * @returns {*|string}
  8 |  * @private
  9 |  */
 10 | export function _html(str: string): string {
 11 |     return String(str)
 12 |         .replace(/&(?!\w+;)/g, '&amp;')
 13 |         .replace(/ /g, '&nbsp;')
 14 |         .replace(/</g, '&lt;')
 15 |         .replace(/>/g, '&gt;')
 16 |         .replace(/"/g, '&quot;')
 17 |         .replace(/'/g, '&#039;')
 18 |         .replace(/\n/g, '<br>')
 19 |         .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
 20 | }
 21 | 
 22 | /**
 23 |  * 判断一个对象是否为逻辑上的空
 24 |  *
 25 |  * @param value
 26 |  * @returns {boolean|boolean}
 27 |  * @private
 28 |  */
 29 | export function _isEmpty(value: string | object | undefined | null): boolean {
 30 |     return (
 31 |         value === undefined ||
 32 |         value === null ||
 33 |         (typeof value === "string" && value.trim().length === 0) ||
 34 |         (typeof value === "object" && Object.keys(value).length === 0)
 35 |     );
 36 | }
 37 | 
 38 | export function _nonEmpty(value: string | object | undefined | null) {
 39 |     return !_isEmpty(value)
 40 | }
 41 | 
 42 | export function _screenType(width: number = document.body.clientWidth): ScreenType {
 43 |     let result: ScreenType = {}
 44 |     if (width < 600) {
 45 |         result.xs = true
 46 |     } else if (width >= 600 && width < 960) {
 47 |         result.sm = true
 48 |     } else if (width >= 960 && width < 1264) {
 49 |         result.md = true
 50 |     } else if (width >= 1264 && width < 1904) {
 51 |         result.lg = true
 52 |     } else {
 53 |         result.xl = true
 54 |     }
 55 |     return result as ScreenType
 56 | }
 57 | 
 58 | export function _isSafari() {
 59 |     return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
 60 | }
 61 | 
 62 | export function _getByteLen(val: string) {
 63 |     if (val.match(/[\n\r]/)) {
 64 |         return 0
 65 |     }
 66 |     let len = 0;
 67 |     for (let i = 0; i < val.length; i++) {
 68 |         // eslint-disable-next-line no-control-regex
 69 |         if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
 70 |             len += 2; //如果是全角，占用两个字节
 71 |         else len += 1; //半角占用一个字节
 72 |     }
 73 |     return len;
 74 | }
 75 | 
 76 | /**
 77 |  * 获取两个连续字符串的不同部分
 78 |  *
 79 |  * @param one
 80 |  * @param two
 81 |  * @returns {string}
 82 |  */
 83 | export function _getDifferent(one: string, two: string) {
 84 |     if (one === two) {
 85 |         return '';
 86 |     }
 87 |     let i = 0, j = 0;
 88 |     let longOne = one.length > two.length ? one : two;
 89 |     let shortOne = one.length > two.length ? two : one;
 90 | 
 91 |     let diff = '', nextChar = '';
 92 |     let hasDiff = false;
 93 |     while (i < shortOne.length || j < longOne.length) {
 94 |         if (shortOne[i] === longOne[j]) {
 95 |             if (hasDiff) {
 96 |                 break;
 97 |             }
 98 |             i++;
 99 |             j++;
100 |         } else {
101 |             if (i < shortOne.length - 1) {
102 |                 nextChar = shortOne[i + 1]
103 |             }
104 |             if (longOne[j] === nextChar || j >= longOne.length) {
105 |                 break;
106 |             } else {
107 |                 diff += longOne[j];
108 |             }
109 |             j++;
110 |             hasDiff = true;
111 |         }
112 |     }
113 |     return diff;
114 | }
115 | 
116 | export function _eventOn(dom: Document | Window, eventName: string, handler: EventListenerOrEventListenerObject) {
117 |     dom && dom.addEventListener && dom.addEventListener(eventName, handler);
118 | }
119 | 
120 | export function _eventOff(dom: Document | Window, eventName: string, handler: EventListenerOrEventListenerObject) {
121 |     dom && dom.removeEventListener && dom.removeEventListener(eventName, handler);
122 | }
123 | 
124 | export function _getClipboardText(): Promise<string> {
125 |     if (navigator && navigator.clipboard) {
126 |         return navigator.clipboard.readText();
127 |     } else {
128 |         return new Promise((resolve, reject) => {
129 |             try {
130 |                 let pasteTarget = document.createElement("div");
131 |                 pasteTarget.contentEditable = "true";
132 |                 let actElem = document.activeElement.appendChild(pasteTarget).parentNode;
133 |                 pasteTarget.focus();
134 |                 //  可能会失败
135 |                 document.execCommand("paste")
136 |                 let paste = pasteTarget.innerText;
137 |                 actElem.removeChild(pasteTarget);
138 |                 resolve(paste)
139 |             } catch (e) {
140 |                 reject(e)
141 |             }
142 |         })
143 |     }
144 | }
145 | 
146 | export function _copyTextToClipboard(text: string | null): Promise<any> {
147 |     if (!text) {
148 |         return
149 |     }
150 |     text = text.replace(/nbsp;/g, ' ')
151 |     if (navigator && navigator.clipboard) {
152 |         return navigator.clipboard.writeText(text)
153 |     } else {
154 |         let textArea = document.createElement("textarea")
155 |         textArea.value = text
156 |         textArea.style.position = "absolute"
157 |         textArea.style.opacity = "0"
158 |         textArea.style.left = "-999999px"
159 |         textArea.style.top = "-999999px"
160 |         document.body.appendChild(textArea)
161 |         textArea.focus()
162 |         textArea.select()
163 |         document.execCommand('copy')
164 |         textArea.remove()
165 |         return Promise.resolve()
166 |     }
167 | }
168 | 
169 | export function _pointInRect(point, rect) {
170 |     const {x, y} = point;
171 |     const dx = rect.x, dy = rect.y, width = rect.width, height = rect.height;
172 |     return x >= dx && x <= dx + width && y >= dy && y <= dy + height;
173 | }
174 | 
175 | export function _getSelection() {
176 |     if (window.getSelection) {
177 |         return window.getSelection()
178 |     } else {
179 |         return document.getSelection()
180 |     }
181 | }
182 | 
183 | export function _parseToJson(obj: any) {
184 |     if (typeof obj === 'object' && obj) {
185 |         return obj;
186 |     } else if (typeof obj === 'string') {
187 |         try {
188 |             return JSON.parse(obj);
189 |         } catch (e) {
190 |             return obj;
191 |         }
192 |     }
193 | }
194 | 
195 | export function _openUrl(url: string, pushMessage: Function) {
196 |     let match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[/?:]?.*$/;
197 |     if (match.test(url)) {
198 |         if (!url.startsWith("http") && !url.startsWith("https")) {
199 |             window.open(`http://${url}`)
200 |         } else {
201 |             window.open(url);
202 |         }
203 |     } else {
204 |         pushMessage({
205 |             class: 'error',
206 |             type: 'normal',
207 |             content: "Invalid website url"
208 |         })
209 |     }
210 | }
211 | 
212 | /**
213 |  * 默认命令行样式格式化实现，对部分关键符号高亮处理。
214 |  *
215 |  * 此方法会对高亮字符进行合并，适用于记录命令行
216 |  *
217 |  * @param cmd
218 |  * @return {string}
219 |  * @private
220 |  */
221 | export function _defaultMergedCommandFormatter(cmd: string): string {
222 |     //  过滤ASCII 160的空白字符串
223 |     let split = cmd.replace(/\xA0/g, " ").split(" ")
224 |     let formatted = ''
225 |     let isCmdKey = true
226 | 
227 |     for (let i = 0; i < split.length; i++) {
228 |         let char = _html(split[i])
229 |         if (isCmdKey) {
230 |             formatted += `<span class='t-cmd-key'>${char}</span>`
231 |             isCmdKey = false
232 |         } else if (char.startsWith("-")) {
233 |             formatted += `<span class="t-cmd-arg">${char}</span>`
234 |         } else if (char === '\r') {
235 |             //  \r\n换行
236 |             if (i < split.length - 1 && split[i + 1] === '\n') {
237 |                 formatted += `<br/>`
238 |                 i++
239 |             }
240 |             // \r换行
241 |             else {
242 |                 formatted += `<br/>`
243 |             }
244 |         } else if (char === '\n') {
245 |             formatted += `<br/>`
246 |         } else if (char.length > 0) {
247 |             if (char === '|') {
248 |                 isCmdKey = true
249 |                 formatted += `<span>${char}</span>`
250 |             } else {
251 |                 formatted += '<span>'
252 |                 let startNewCmdKey = false
253 |                 const charArr: string[] = [...char];
254 |                 charArr.forEach((ch, index) => {
255 |                     if (ch === ',') {
256 |                         formatted += `<span class="t-cmd-splitter">${ch}</span>`
257 |                     } else if (ch === '|') {
258 |                         formatted += ch
259 | 
260 |                         isCmdKey = true
261 |                         if (index < char.length - 1) {
262 |                             formatted += `<span class='t-cmd-key'>`
263 |                             startNewCmdKey = true
264 |                         }
265 |                     } else {
266 |                         formatted += ch
267 |                     }
268 |                     if (index == charArr.length - 1 && ch != '|') {
269 |                         isCmdKey = false
270 |                     }
271 |                 });
272 | 
273 |                 formatted += '</span>'
274 |                 if (startNewCmdKey) {
275 |                     formatted += '</span>'
276 |                 }
277 |             }
278 |         }
279 |         if (i < split.length - 1) {
280 |             formatted += "<span>&nbsp;</span>"
281 |         }
282 |     }
283 | 
284 |     return formatted
285 | }
286 | 
287 | 
288 | /**
289 |  * 默认命令行样式格式化实现，对部分关键符号高亮出路。
290 |  *
291 |  * 此方法会对每个字符进行分割，由单独的span约束，适用于编辑命令行
292 |  *
293 |  * @param cmd
294 |  * @private
295 |  */
296 | export function _defaultSplittableCommandFormatter(cmd: string): string {
297 |     //  过滤ASCII 160的空白字符串
298 |     let split = cmd.replace(/\xA0/g, " ").split(" ")
299 |     let formatted = ''
300 |     let isCmdKey = true
301 | 
302 |     function splitFill(clazz: string | null, char: string) {
303 |         for (let c of char) {
304 |             formatted += `<span class='${clazz ? clazz : ""}'>${_html(c)}</span>`
305 |         }
306 |     }
307 | 
308 |     for (let i = 0; i < split.length; i++) {
309 |         let srcChar: string = split[i]
310 |         if (isCmdKey) {
311 | 
312 |             splitFill('t-cmd-key', srcChar)
313 | 
314 |             isCmdKey = false
315 |         } else if (srcChar.startsWith("-")) {
316 |             splitFill('t-cmd-arg', srcChar)
317 |         } else if (srcChar.length > 0) {
318 |             if (srcChar === '|') {
319 |                 isCmdKey = true
320 |                 splitFill(null, srcChar)
321 |             } else {
322 |                 let startNewCmdKey = false
323 |                 const charArr: string[] = [...srcChar]
324 |                 charArr.forEach((ch, j) => {
325 |                     if (ch === ',') {
326 |                         splitFill('t-cmd-splitter', ch)
327 |                     } else if (ch === '|') {
328 |                         splitFill(null, ch)
329 | 
330 |                         isCmdKey = true
331 |                         if (j < charArr.length - 1) {
332 |                             startNewCmdKey = true
333 |                         }
334 |                     } else {
335 |                         if (startNewCmdKey) {
336 |                             splitFill('t-cmd-key', ch)
337 |                         } else {
338 |                             splitFill(null, ch)
339 |                         }
340 |                     }
341 |                     if (j === charArr.length - 1 && ch !== '|') {
342 |                         isCmdKey = false
343 |                     }
344 |                 })
345 |             }
346 |         }
347 |         if (i < split.length - 1) {
348 |             splitFill(null, ' ')
349 |         }
350 |     }
351 |     return formatted
352 | }
353 | 
354 | /**
355 |  * 判断一个Dom A是否是另一个Dom B的孩子节点
356 |  *
357 |  * @param target    目标Dom，A
358 |  * @param parent    父级Dom，B
359 |  * @param clazz     中断类，当检索到当前节点拥有这个 class 时就中断搜索，用于优化处理，避免搜索整个Dom树
360 |  * @return {boolean}
361 |  * @private
362 |  */
363 | export function _isParentDom(target, parent, clazz = null) {
364 |     while (target) {
365 |         if (target === parent) {
366 |             return true;
367 |         }
368 | 
369 |         if (clazz && target.classList.contains(clazz)) {
370 |             break
371 |         }
372 |         target = target.parentElement
373 |     }
374 |     return false;
375 | }
376 | 
377 | export function _isPhone() {
378 |     let info = navigator.userAgent;
379 |     if (info) {
380 |         return /mobile/i.test(info)
381 |     }
382 |     let screen: ScreenType = _screenType()
383 |     return screen.xs || screen.sm
384 | }
385 | 
386 | export function _isPad() {
387 |     let info = navigator.userAgent;
388 |     if (info) {
389 |         return /pad/i.test(info)
390 |     }
391 |     return _screenType().sm
392 | }
393 | 
394 | /**
395 |  *
396 |  * <pre>
397 |  *     methods: {
398 |  *          _someMethod: _debounce(function () {
399 |  *              //  ...
400 |  *          }, 100)
401 |  *     }
402 |  * </pre>
403 |  *
404 |  * @param fn
405 |  * @param delay
406 |  * @return {(function(): void)|*}
407 |  * @private
408 |  */
409 | export function _debounce(fn: Function, delay: number = 200) {
410 |     let timer = null;
411 |     return function () {
412 |         let _this = this
413 |         let args = arguments
414 |         if (timer) {
415 |             clearTimeout(timer)
416 |         }
417 |         timer = setTimeout(function () {
418 |             fn.apply(_this, args);
419 |         }, delay);
420 |     };
421 | }
422 | 
423 | /**
424 |  * 将配置值转为像素度单位值
425 |  * @param value {number | string} 配置值，如果为number值则单位默认为px，如果为string只支持百分比和px单位配置
426 |  * @param parentPixel 父元素的像素度，用于百分比计算
427 |  * @param defaultValue 默认值，如果解析失败则使用默认值
428 |  */
429 | export function _parsePixelFromValue(value: number | string, parentPixel: number, defaultValue: number): number {
430 |     let pixel: number
431 |     if (value) {
432 |         if (typeof value === 'string') {
433 |             if (value.endsWith("%")) {
434 |                 pixel = (parentPixel * (parseFloat(value) / 100))
435 |             } else if (value.endsWith("px")) {
436 |                 pixel = parseFloat(value)
437 |             } else {
438 |                 pixel = parseFloat(value)
439 |             }
440 |         } else if (typeof value === 'number') {
441 |             pixel = value
442 |         } else {
443 |             pixel = defaultValue
444 |         }
445 |     } else {
446 |         pixel = defaultValue
447 |     }
448 |     return pixel
449 | }
450 | 
451 | export function _hash(str: string) {
452 |     // Step 1: Initialize hash value
453 |     let hash = 5381;
454 | 
455 |     // Step 2: Compute hash
456 |     for (let i = 0; i < str.length; i++) {
457 |         hash = (hash * 33) ^ str.charCodeAt(i);
458 |     }
459 | 
460 |     // Step 3: Convert hash to 32-bit unsigned integer
461 |     hash = hash >>> 0;
462 | 
463 |     // Step 4: Convert hash to hexadecimal string
464 |     return hash.toString(16);
465 | }
466 | 


--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     /*限定字体高度*/
  3 |     --t-font-height: 19px;
  4 |     /*限定字体大小*/
  5 |     --t-font-size: 16px;
  6 |     --t-cmd-tips-border-radius: 5px;
  7 | }
  8 | 
  9 | .t-log-box, .t-cmd-line {
 10 |     margin-block-start: 0;
 11 |     margin-block-end: 0;
 12 |     margin-inline-start: 0;
 13 |     margin-inline-end: 0;
 14 | }
 15 | 
 16 | .t-log-box {
 17 |     display: block;
 18 |     position: relative;
 19 |     line-height: var(--t-font-height);
 20 | }
 21 | 
 22 | .t-container {
 23 |     position: relative;
 24 |     margin: 0;
 25 |     padding: 0;
 26 |     border-radius: 15px;
 27 |     background-color: var(--t-main-background-color);
 28 |     box-shadow: var(--t-window-box-shadow);
 29 |     -moz-box-shadow: var(--t-window-box-shadow);
 30 |     -webkit-box-shadow: var(--t-window-box-shadow);
 31 |     -o-box-shadow: var(--t-window-box-shadow);
 32 | }
 33 | 
 34 | .t-header-container {
 35 |     position: relative;
 36 |     z-index: 2;
 37 |     top: 0;
 38 |     right: 0;
 39 |     left: 0;
 40 | }
 41 | 
 42 | .t-header {
 43 |     text-align: center;
 44 |     padding: 2px;
 45 |     background-color: var(--t-header-background-color);
 46 | }
 47 | 
 48 | .t-header-title {
 49 |     font-size: calc(var(--t-font-size) + 2px);
 50 |     font-weight: bold;
 51 |     margin: 5px;
 52 |     height: var(--t-font-height);
 53 |     line-height: var(--t-font-height);
 54 |     letter-spacing: 1px;
 55 |     color: var(--t-header-font-color);
 56 |     display: inline-block;
 57 |     cursor: pointer;
 58 |     text-shadow: 0 0 20px #41454a;
 59 | }
 60 | 
 61 | .t-header ul.t-shell-dots {
 62 |     position: absolute;
 63 |     top: 5px;
 64 |     left: 8px;
 65 |     padding-left: 0;
 66 |     margin: 0;
 67 | }
 68 | 
 69 | .t-header ul.t-shell-dots li {
 70 |     display: inline-block;
 71 |     width: 16px;
 72 |     height: 16px;
 73 |     border-radius: 10px;
 74 |     margin-left: 6px;
 75 |     margin-top: 4px;
 76 |     line-height: 16px;
 77 |     cursor: pointer;
 78 | }
 79 | 
 80 | .shell-dot-item {
 81 |     position: relative;
 82 | }
 83 | 
 84 | .t-header ul .t-shell-dots-red {
 85 |     background-color: #f14444;
 86 | }
 87 | 
 88 | .t-header ul .t-shell-dots-yellow {
 89 |     background-color: #f7db60;
 90 | }
 91 | 
 92 | .t-header ul .t-shell-dots-green {
 93 |     background-color: #23bd65;
 94 | }
 95 | 
 96 | .t-shell-dot {
 97 |     opacity: 0;
 98 |     transition: opacity 0.2s ease;
 99 |     -moz-transition: opacity 0.2s ease;
100 |     -ms-transition: opacity 0.2s ease;
101 |     -webkit-transition: opacity 0.2s ease;
102 |     -o-transition: opacity 0.2s ease;
103 |     margin-bottom: 0;
104 |     position: absolute;
105 |     left: 50%;
106 |     margin-left: -5px;
107 |     top: 50%;
108 |     margin-top: -5px;
109 | }
110 | 
111 | .t-shell-dots:hover .t-shell-dot {
112 |     opacity: 1;
113 | }
114 | 
115 | .t-shell-pin-icon {
116 |     filter: drop-shadow(5px 30px 5px rgba(26, 58, 70, 0.8));
117 |     -ms-filter: drop-shadow(5px 30px 5px rgba(26, 58, 70, 0.8));
118 |     -webkit-filter: drop-shadow(5px 30px 5px rgba(26, 58, 70, 0.8));
119 | }
120 | 
121 | .t-window,
122 | .t-ask-input,
123 | .t-window p,
124 | .t-window div,
125 | .t-crude-font {
126 |     font-size: var(--t-font-size);
127 |     font-family: Monaco, "Lucida Console", monospace;
128 | }
129 | 
130 | .t-window {
131 |     position: absolute;
132 |     top: 0;
133 |     left: 0;
134 |     right: 0;
135 |     overflow: auto;
136 |     z-index: 1;
137 |     max-height: none;
138 |     min-height: 140px;
139 |     padding: 0 0 0 20px;
140 |     font-weight: 400;
141 |     cursor: text;
142 |     background-color: var(--t-main-background-color);
143 |     color: var(--t-main-font-color);
144 | }
145 | 
146 | .t-window p {
147 |     overflow-wrap: break-word;
148 |     word-break: break-all;
149 | }
150 | 
151 | .t-window p .cmd {
152 |     line-height: 24px;
153 | }
154 | 
155 | @keyframes cursor-flash {
156 |     0%, 100% {
157 |         opacity: 0;
158 |     }
159 |     50% {
160 |         opacity: 1;
161 |     }
162 | }
163 | 
164 | .t-window .t-cursor {
165 |     position: absolute;
166 | }
167 | 
168 | .t-window .t-cursor-blink {
169 |     animation: cursor-flash 1s infinite;
170 |     -webkit-animation: cursor-flash 1s infinite;
171 |     -o-animation: cursor-flash 1s infinite;
172 |     -moz-animation: cursor-flash 1s infinite;
173 | }
174 | 
175 | .t-window .t-cursor-block {
176 |     background-color: var(--t-cursor-color);
177 | }
178 | 
179 | .t-window .t-cursor-underline::before {
180 |     display: block;
181 |     position: absolute;
182 |     background-color: var(--t-cursor-color);
183 |     width: 100%;
184 |     height: 3px;
185 |     z-index: 100;
186 |     bottom: 0;
187 |     left: 0;
188 |     content: " ";
189 | }
190 | 
191 | .t-window .t-cursor-bar::before {
192 |     display: block;
193 |     position: absolute;
194 |     background-color: var(--t-cursor-color);
195 |     width: 2px;
196 |     height: 100%;
197 |     z-index: 100;
198 |     top: 0;
199 |     left: 0;
200 |     content: " ";
201 | }
202 | 
203 | .t-window .t-cursor-none {
204 |     display: none;
205 | }
206 | 
207 | .t-a {
208 |     color: var(--t-link-color);
209 | }
210 | 
211 | .t-a:hover {
212 |     color: var(--t-link-hover-color);
213 | }
214 | 
215 | .t-ask-input {
216 |     border: none;
217 |     max-width: 300px;
218 |     background: none;
219 |     outline: none;
220 |     padding: 0;
221 |     display: inline-block;
222 |     color: var(--t-main-font-color);
223 | }
224 | 
225 | .t-ask-input:focus, .t-ask-input:focus-visible {
226 |     border: none;
227 |     outline: none;
228 | }
229 | 
230 | .t-cmd-input {
231 |     position: relative;
232 |     border: none;
233 |     width: 1px;
234 |     height: 0;
235 |     opacity: 0;
236 |     cursor: text;
237 |     padding: 1px 2px;
238 |     -webkit-writing-mode: horizontal-tb !important;
239 |     text-rendering: auto;
240 |     letter-spacing: normal;
241 |     word-spacing: normal;
242 |     text-transform: none;
243 |     text-indent: 0;
244 |     text-shadow: none;
245 |     display: inline-block;
246 |     text-align: start;
247 |     appearance: textfield;
248 |     -webkit-rtl-ordering: logical;
249 |     border-image: initial;
250 |     word-wrap: break-word;
251 |     margin: 0;
252 |     background-color: var(--t-main-background-color);
253 | }
254 | 
255 | .t-content-normal .success,
256 | .t-content-normal .error,
257 | .t-content-normal .warning,
258 | .t-content-normal .info,
259 | .t-content-normal .system {
260 |     padding: 0 3px;
261 |     color: var(--t-tag-font-color);
262 | }
263 | 
264 | .t-content-normal .success {
265 |     background-color: #27ae60;
266 | }
267 | 
268 | .t-content-normal .error {
269 |     background-color: #c0392b;
270 | }
271 | 
272 | .t-content-normal .warning {
273 |     background-color: #f39c12;
274 | }
275 | 
276 | .t-content-normal .info {
277 |     background-color: #2980b9;
278 | }
279 | 
280 | .t-content-normal .system {
281 |     background-color: #8697a2;
282 | }
283 | 
284 | .t-crude-font {
285 |     font-weight: 600;
286 | }
287 | 
288 | .t-flag {
289 |     opacity: 0;
290 | }
291 | 
292 | .t-last-line {
293 |     font-size: 0;
294 |     word-spacing: 0;
295 |     letter-spacing: 0;
296 |     position: relative;
297 |     margin-bottom: 15px;
298 |     line-height: var(--t-font-height);
299 | }
300 | 
301 | /*手机*/
302 | @media screen and (max-width: 768px ) {
303 |     .t-window {
304 |         padding: 0 0 0 15px;
305 |     }
306 | }
307 | 
308 | /*平板*/
309 | @media screen and (max-width: 992px) and (min-width: 768.1px) {
310 | 
311 | }
312 | 
313 | .t-cmd-line {
314 |     font-size: 0;
315 |     line-height: var(--t-font-height);
316 | }
317 | 
318 | .t-cmd-line-content {
319 |     font-size: var(--t-font-size);
320 |     word-break: break-all;
321 |     white-space: break-spaces;
322 | }
323 | 
324 | .t-cmd-key {
325 |     font-weight: 700;
326 |     color: var(--t-cmd-key-color);
327 | }
328 | 
329 | .t-cmd-arg {
330 |     color: var(--t-cmd-arg-color);
331 | }
332 | 
333 | .t-cmd-splitter {
334 |     color: var(--t-cmd-splitter-color);
335 | }
336 | 
337 | .t-help-list {
338 |     margin: 0;
339 |     list-style: none;
340 |     padding-left: 0;
341 |     display: inline-grid;
342 |     display: -moz-inline-grid;
343 |     display: -ms-inline-grid;
344 | }
345 | 
346 | .t-help-list li {
347 |     margin: 3px 0;
348 | }
349 | 
350 | .t-cmd-help {
351 |     position: absolute;
352 |     top: 15px;
353 |     right: 12px;
354 |     z-index: 99;
355 |     max-width: 50%;
356 |     padding: 5px;
357 |     overflow: auto;
358 |     max-height: calc(100% - 60px);
359 |     background-color: var(--t-cmd-help-background-color);
360 |     color: var(--t-main-font-color);
361 |     box-shadow: var(--t-cmd-help-box-shadow);
362 | }
363 | 
364 | .t-cmd-help code {
365 |     font-size: var(--t-font-size);
366 |     border: none;
367 |     padding: 2px 5px 2px 5px;
368 |     background-color: var(--t-cmd-help-code-background-color) !important;
369 | }
370 | 
371 | .t-cmd-help-eg {
372 |     float: left;
373 |     width: 30px;
374 |     display: flex;
375 |     font-size: var(--t-font-size);
376 |     line-height: var(--t-font-height);
377 | }
378 | 
379 | .t-cmd-help-example {
380 |     float: left;
381 |     width: calc(100% - 30px);
382 |     display: flex
383 | }
384 | 
385 | .t-cmd-help-des {
386 |     margin-bottom: 10px;
387 | }
388 | 
389 | .t-cmd-help-des-item {
390 |     font-size: var(--t-font-size);
391 | }
392 | 
393 | .t-pre-numbering {
394 |     margin-top: 0;
395 |     position: absolute;
396 |     top: 0;
397 |     left: -30px;
398 |     width: 30px;
399 |     text-align: center;
400 |     padding: 1em 0;
401 | }
402 | 
403 | .t-pre-numbering li {
404 |     list-style: none;
405 |     font-size: 1em;
406 | }
407 | 
408 | .t-window pre {
409 |     position: relative;
410 |     margin: 0;
411 |     overflow: auto;
412 | }
413 | 
414 | .t-example-ul {
415 |     padding: 0 0 0 10px;
416 |     margin: 0;
417 |     list-style: none;
418 | }
419 | 
420 | .t-table {
421 |     max-width: 100%;
422 |     overflow: auto;
423 |     padding: 0;
424 |     margin: 0;
425 | }
426 | 
427 | .t-border-dashed {
428 |     border-collapse: collapse;
429 |     border: var(--t-table-border);
430 | }
431 | 
432 | .t-table thead {
433 |     font-weight: 600;
434 | }
435 | 
436 | .t-table, .t-table tr, .t-table td, .t-table tbody, .t-table thead {
437 |     margin: 0;
438 |     padding: 15px;
439 | }
440 | 
441 | .t-code-inline {
442 |     color: var(--t-code-inline-font-color);
443 |     font-weight: 600;
444 | }
445 | 
446 | .t-code {
447 |     position: relative;
448 |     max-height: 500px;
449 |     overflow: auto;
450 | }
451 | 
452 | .t-vue-codemirror div,
453 | .t-vue-highlight div {
454 |     font-size: var(--t-font-size);
455 | }
456 | 
457 | .t-code .t-vue-codemirror .vue-codemirror .CodeMirror {
458 |     height: unset;
459 |     border: none;
460 | }
461 | 
462 | .t-text-editor-container {
463 |     position: absolute;
464 |     left: 0;
465 |     top: 0;
466 |     width: 100%;
467 |     height: 100%;
468 |     z-index: 1;
469 | }
470 | 
471 | .t-text-editor {
472 |     width: calc(100% - 10px);
473 |     height: calc(100% - 35px);
474 |     overflow: auto;
475 |     resize: none;
476 |     margin: 0;
477 |     padding: 0 5px;
478 |     border: none;
479 |     font-size: var(--t-font-size);
480 |     color: var(--t-main-font-color);
481 |     background-color: var(--t-main-background-color);
482 | }
483 | 
484 | .t-text-editor:focus-visible, .t-text-editor:focus {
485 |     outline: none;
486 |     outline-offset: unset;
487 | }
488 | 
489 | .t-text-editor-floor {
490 |     position: absolute;
491 |     height: 35px;
492 |     width: 100%;
493 |     bottom: 0;
494 |     left: 0;
495 |     background-color: var(--t-text-editor-floor-background-color);
496 | }
497 | 
498 | .t-text-editor-floor-btn {
499 |     border: none;
500 |     outline: none;
501 |     margin-top: 10px;
502 |     cursor: pointer;
503 |     background-color: rgba(0, 0, 0, 0);
504 | }
505 | 
506 | .t-close-btn {
507 |     color: var(--t-text-editor-floor-close-btn-color);
508 | }
509 | 
510 | .t-save-btn {
511 |     color: var(--t-text-editor-floor-save-btn-color);
512 | }
513 | 
514 | .t-text-editor-floor-btn:hover {
515 |     color: var(--t-text-editor-floor-btn-hover-color);
516 | }
517 | 
518 | .t-disable-select {
519 |     user-select: none;
520 |     -moz-user-select: none;
521 |     -webkit-user-select: none;
522 |     -ms-user-select: none;
523 |     -khtml-user-selece: none;
524 | }
525 | 
526 | .t-point {
527 |     width: var(--t-font-height);
528 |     height: var(--t-font-height);
529 |     background-color: rgba(0, 0, 0, 0);
530 |     position: absolute;
531 |     z-index: 100;
532 | }
533 | 
534 | .t-point-lt {
535 |     left: calc(0px - var(--t-font-height) / 2);
536 |     top: calc(0px - var(--t-font-height) / 2);
537 |     cursor: nwse-resize;
538 | }
539 | 
540 | .t-point-rt {
541 |     left: calc(100% - var(--t-font-height) / 2);
542 |     top: calc(0px - var(--t-font-height) / 2);
543 |     cursor: nesw-resize;
544 | }
545 | 
546 | .t-point-lb {
547 |     left: calc(0px - var(--t-font-height) / 2);
548 |     top: calc(100% - var(--t-font-height) / 2);
549 |     cursor: nesw-resize;
550 | }
551 | 
552 | .t-point-rb {
553 |     left: calc(100% - var(--t-font-height) / 2);
554 |     top: calc(100% - var(--t-font-height) / 2);
555 |     cursor: nwse-resize;
556 | }
557 | 
558 | .t-code-default {
559 |     background-color: var(--t-code-default-background-color);
560 | }
561 | 
562 | .t-log-box-hover-script:hover {
563 |     background-color: var(--t-log-box-hover-script-background-color);
564 | }
565 | 
566 | .t-log-box-folded:hover {
567 |     background-color:var(--t-log-box-folded-hover-background-color);
568 | }
569 | 
570 | .t-log-box-folded {
571 |     height: var(--t-font-height);
572 |     overflow-y: clip;
573 |     background-color: var(--t-log-box-folded-background-color);
574 |     cursor: pointer;
575 | }
576 | 
577 | .t-log-fold-icon {
578 |     position: absolute;
579 |     width: 10px;
580 |     height: 10px;
581 |     left: -17px;
582 |     top: 4px;
583 |     border: 1px solid var(--t-log-fold-icon-border-color);
584 |     text-align: center;
585 |     line-height: 9px;
586 |     background-color: var(--t-log-fold-icon-background-color);
587 |     color: var(--t-log-fold-icon-color);
588 |     cursor: pointer;
589 |     user-select: none;
590 |     z-index: 100;
591 | }
592 | 
593 | .t-log-fold-icon-active {
594 |     background-color: var(--t-log-fold-icon-active-background-color);
595 |     color: var(--t-log-fold-icon-active-color);
596 | }
597 | 
598 | .t-log-fold-line {
599 |     position: absolute;
600 |     height: calc(100% - 10px);
601 |     width: 1px;
602 |     background-color: var(--t-log-fold-line-color);
603 |     left: -12px;
604 |     top: 10px;
605 | }
606 | 
607 | .t-cmd-tips {
608 |     --t-cmd-tips-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.3);
609 | 
610 |     position: absolute;
611 |     display: block;
612 |     z-index: 100;
613 |     background-color: var(--t-cmd-tips-background-color);
614 |     border-radius: var(--t-cmd-tips-border-radius);
615 |     color: var(--t-cmd-tips-font-color);
616 |     -ms-overflow-y: auto;
617 |     cursor: context-menu;
618 |     font-weight: normal;
619 |     box-shadow: var(--t-cmd-tips-box-shadow);
620 |     -moz-box-shadow: var(--t-cmd-tips-box-shadow);
621 |     -webkit-box-shadow: var(--t-cmd-tips-box-shadow);
622 |     -o-box-shadow: var(--t-cmd-tips-box-shadow);
623 |     font-family: system-ui;
624 | }
625 | 
626 | .t-cmd-tips-items {
627 |     display: block;
628 |     min-width: 280px;
629 |     max-width: 500px;
630 |     max-height: 200px;
631 |     overflow-y: auto;
632 |     padding: 5px;
633 | }
634 | 
635 | .t-cmd-tips-footer {
636 |     display: block;
637 |     width: 100%;
638 |     padding: 5px 0;
639 |     text-indent: 6px;
640 |     line-height: var(--t-font-height);
641 |     background-color: var(--t-cmd-tips-footer-background-color);
642 |     color: var(--t-cmd-tips-footer-font-color);
643 |     font-size: 12px;
644 |     border-bottom-left-radius: var(--t-cmd-tips-border-radius);
645 |     -webkit-border-bottom-left-radius: var(--t-cmd-tips-border-radius);
646 |     border-bottom-right-radius: var(--t-cmd-tips-border-radius);
647 |     -webkit-border-bottom-right-radius: var(--t-cmd-tips-border-radius);
648 | }
649 | 
650 | .t-cmd-tips-item {
651 |     display: block;
652 |     padding: 5px 8px;
653 |     text-overflow:ellipsis;
654 |     overflow:hidden;
655 |     text-wrap: nowrap;
656 |     color: var(--t-cmd-tips-des-font-color);
657 |     border-radius: 5px;
658 | }
659 | 
660 | .t-cmd-tips-item-first {
661 |     border-top-left-radius: var(--t-cmd-tips-border-radius);
662 |     -webkit-border-top-left-radius: var(--t-cmd-tips-border-radius);
663 |     border-top-right-radius: var(--t-cmd-tips-border-radius);
664 |     -webkit-border-top-right-radius: var(--t-cmd-tips-border-radius);
665 | }
666 | 
667 | .t-cmd-tips-item-active {
668 |     background-color: var(--t-cmd-tips-active-background-color);
669 | }
670 | 
671 | .t-cmd-tips-content {
672 |     font-weight: bold;
673 |     color: var(--t-cmd-tips-content-font-color);
674 |     cursor: context-menu;
675 |     user-select: none;
676 | }
677 | 
678 | .t-cmd-tips-des {
679 |     color: var(--t-cmd-tips-des-font-color);
680 |     margin-left: 8px;
681 |     cursor: context-menu;
682 |     user-select: none;
683 | }
684 | 
685 | /*--------------------------json viewer style------------------------*/
686 | .t-json-container .jv-container.jv-light {
687 |     border: none;
688 |     background-color: var(--t-json-background-color);
689 |     color: var(--t-main-font-color);
690 | }
691 | 
692 | .t-json-container .jv-container .jv-code,
693 | .t-json-container .jv-container .jv-code.open {
694 |     padding-bottom: 0;
695 |     overflow: hidden;
696 | }
697 | 
698 | .t-json-container .jv-container {
699 |     display: inline-block;
700 |     min-width: 300px;
701 | }
702 | 
703 | .t-json-container .jv-container.jv-light .jv-item.jv-array,
704 | .t-json-container .jv-container.jv-light .jv-item.jv-object {
705 |     color: var(--t-json-value-obj-color);
706 | }
707 | 
708 | .t-json-container .jv-container.jv-light .jv-key {
709 |     color: var(--t-main-font-color);
710 | }
711 | 
712 | .t-json-container .jv-container.jv-light .jv-item.jv-boolean {
713 |     color: var(--t-json-value-bool-color);
714 | }
715 | 
716 | .t-json-container .jv-container.jv-light .jv-item.jv-number {
717 |     color: var(--t-json-value-number-color);
718 | }
719 | 
720 | .t-json-container .jv-container.jv-light .jv-ellipsis {
721 |     color: var(--t-main-font-color);
722 |     background-color: var(--t-json-ellipsis-background-color);
723 | }
724 | 
725 | .t-json-container .jv-container .jv-more:after {
726 |     background: var(--t-json-more-background-webkit);
727 |     background: var(--t-json-more-background);
728 | }
729 | 
730 | .t-json-deep-selector {
731 |     margin-top: 8px;
732 |     width: 75px;
733 |     position: absolute;
734 |     margin-left: -150px;
735 |     font-size: var(--t-font-size);
736 |     border-radius: 2px;
737 |     cursor: pointer;
738 |     border: 1px solid var(--t-json-deep-selector-border-color);
739 | }
740 | 
741 | .t-json-deep-selector:focus,
742 | .t-json-deep-selector:focus-visible {
743 |     outline: none;
744 | }
745 | 
746 | /*--------------------------selection style------------------------*/
747 | .t-window div::selection,
748 | .t-window a::selection,
749 | .t-window span::selection,
750 | .t-window li::selection,
751 | .t-window p::selection,
752 | .t-window code::selection,
753 | .t-window td::selection,
754 | .t-window th::selection,
755 | .t-window br::selection {
756 |     color: var(--t-selection-font-color);
757 |     background-color: var(--t-selection-background-color);
758 | }
759 | 


--------------------------------------------------------------------------------
/src/Terminal.vue:
--------------------------------------------------------------------------------
   1 | <script setup lang="ts">
   2 | import {computed, nextTick, onMounted, onUnmounted, PropType, reactive, ref, watch} from "vue";
   3 | import {
   4 |   AskConfig,
   5 |   Command,
   6 |   CommandFormatterFunc,
   7 |   CommandSortHandlerFunc,
   8 |   DragConfig,
   9 |   EditorConfig,
  10 |   EditorSetting,
  11 |   FailedFunc,
  12 |   InputFilterFunc,
  13 |   InputTipItem,
  14 |   InputTipsSearchHandlerFunc,
  15 |   InputTipsSelectHandlerFunc,
  16 |   Message,
  17 |   MessageGroup,
  18 |   Position,
  19 |   PushMessageBeforeFunc,
  20 |   SuccessFunc,
  21 |   TerminalAsk,
  22 |   TerminalCursorStyle,
  23 |   TerminalElementInfo,
  24 |   TerminalFlash
  25 | } from "./types";
  26 | import {
  27 |   _copyTextToClipboard,
  28 |   _debounce,
  29 |   _defaultMergedCommandFormatter,
  30 |   _eventOff,
  31 |   _eventOn,
  32 |   _getByteLen,
  33 |   _getClipboardText,
  34 |   _getSelection,
  35 |   _hash,
  36 |   _html,
  37 |   _isEmpty,
  38 |   _isPad,
  39 |   _isParentDom,
  40 |   _isPhone,
  41 |   _isSafari,
  42 |   _nonEmpty,
  43 |   _openUrl,
  44 |   _parsePixelFromValue,
  45 |   _pointInRect,
  46 |   _screenType,
  47 | } from "~/common/util.ts";
  48 | import api, {getConfiguration, register, rename, unregister} from "~/common/api";
  49 | import {DEFAULT_COMMANDS, WINDOW_STYLE} from "~/common/configuration.ts";
  50 | import {_parseANSI} from "~/ansi";
  51 | import {getStore} from "~/common/store";
  52 | import THeader from "~/components/THeader.vue";
  53 | import TViewerNormal from "~/components/TViewerNormal.vue";
  54 | import TViewerJson from "~/components/TViewerJson.vue";
  55 | import TViewerCode from "~/components/TViewerCode.vue";
  56 | import TViewerTable from "~/components/TViewerTable.vue";
  57 | import THelpBox from "~/components/THelpBox.vue";
  58 | import TEditor from "~/components/TEditor.vue";
  59 | 
  60 | import themeDark from "~/css/theme/dark.css?inline"
  61 | import themeLight from "~/css/theme/light.css?inline"
  62 | 
  63 | //  对应css变量 --t-font-height
  64 | const FONT_HEIGHT = 19;
  65 | const emits = defineEmits([
  66 |   "on-keydown",
  67 |   "on-click",
  68 |   "before-exec-cmd",
  69 |   "exec-cmd",
  70 |   "destroyed",
  71 |   "init-before",
  72 |   "init-complete",
  73 |   'on-active',
  74 |   'on-inactive',
  75 |   'on-resize',
  76 |   'on-dragging'
  77 | ])
  78 | const props = defineProps({
  79 |   title: {
  80 |     type: String,
  81 |     default: 'vue-web-terminal'
  82 |   },
  83 |   name: {
  84 |     type: String,
  85 |     default: ''
  86 |   },
  87 |   //  初始化日志内容
  88 |   initLog: {
  89 |     type: Array<Message>,
  90 |     default: (): Array<Message> => null
  91 |   },
  92 |   //  上下文
  93 |   context: {
  94 |     type: String,
  95 |     default: '/vue-web-terminal'
  96 |   },
  97 |   contextSuffix: {
  98 |     type: String,
  99 |     default: ' > '
 100 |   },
 101 |   //  命令行搜索以及help指令用
 102 |   commandStore: Array<Command>,
 103 |   //   命令行排序方式
 104 |   commandSortHandler: Function as PropType<CommandSortHandlerFunc>,
 105 |   //  显示终端头部
 106 |   showHeader: {
 107 |     type: Boolean,
 108 |     default: true
 109 |   },
 110 |   //  是否开启命令提示
 111 |   enableHelpBox: {
 112 |     type: Boolean,
 113 |     default: true
 114 |   },
 115 |   //  输入过滤器
 116 |   inputFilter: Function as PropType<InputFilterFunc>,
 117 |   //  拖拽配置
 118 |   dragConf: Object as PropType<DragConfig>,
 119 |   //  命令格式化显示函数
 120 |   commandFormatter: Function as PropType<CommandFormatterFunc>,
 121 |   //  滚动条滚动模式
 122 |   scrollMode: {
 123 |     type: String as PropType<ScrollBehavior>,
 124 |     default: 'smooth'
 125 |   },
 126 |   //  在 push 消息之前触发的钩子函数，只能对message对象的属性进行修改
 127 |   pushMessageBefore: Function as PropType<PushMessageBeforeFunc>,
 128 |   //  日志条数限制，命令行也算一条日志
 129 |   logSizeLimit: {
 130 |     type: Number,
 131 |     default: 200
 132 |   },
 133 |   //  是否开启内部默认指令，例如 help、open等
 134 |   enableDefaultCommand: {
 135 |     type: Boolean,
 136 |     default: true
 137 |   },
 138 |   //  行间距，单位px
 139 |   lineSpace: {
 140 |     type: Number,
 141 |     default: 15
 142 |   },
 143 |   //  光标样式
 144 |   cursorStyle: {
 145 |     type: String as PropType<TerminalCursorStyle>,
 146 |     default: () => "block"
 147 |   },
 148 |   //  光标闪烁开关
 149 |   enableCursorBlink: {
 150 |     type: Boolean,
 151 |     default: () => true
 152 |   },
 153 |   //  命令折叠开关
 154 |   enableFold: {
 155 |     type: Boolean,
 156 |     default: () => true
 157 |   },
 158 |   //  鼠标hover时分组高亮开关
 159 |   enableHoverStripe: {
 160 |     type: Boolean,
 161 |     default: () => false
 162 |   },
 163 |   //  命令提示开关
 164 |   enableInputTips: {
 165 |     type: Boolean,
 166 |     default: () => true
 167 |   },
 168 |   //  提示选择处理函数
 169 |   inputTipsSelectHandler: Function as PropType<InputTipsSelectHandlerFunc>,
 170 |   //  用户自定义命令搜索提示实现
 171 |   inputTipsSearchHandler: Function as PropType<InputTipsSearchHandlerFunc>,
 172 |   //  主题
 173 |   theme: {
 174 |     type: String,
 175 |     default: () => 'dark'
 176 |   }
 177 | })
 178 | 
 179 | const draggable = computed<boolean>(() => {
 180 |   return props.showHeader && props.dragConf != undefined
 181 | })
 182 | 
 183 | const isPinned = computed<boolean>(() => {
 184 |   return props.dragConf && props.dragConf.pinned
 185 | })
 186 | 
 187 | const isActive = computed(() => {
 188 |   return cursorConf.show
 189 |       || (ask.open && terminalAskInputRef.value === document.activeElement)
 190 |       || (textEditor.open && textEditor.focus)
 191 | })
 192 | 
 193 | const isBlockCommandFocus = computed(() => {
 194 |   return textEditor.open || flash.open || ask.open
 195 | })
 196 | 
 197 | const containerStyle = computed(() => {
 198 |   if (containerStyleStore.value) {
 199 |     let styles = []
 200 |     for (let key in containerStyleStore.value) {
 201 |       styles.push(`${key}:${containerStyleStore.value[key]}`)
 202 |     }
 203 |     return styles.join(';')
 204 |   }
 205 |   return ''
 206 | })
 207 | 
 208 | const isEnableHelpBox = computed<boolean>(() => {
 209 |   let enable: boolean = props.enableHelpBox
 210 |   if (enable) {
 211 |     let tipItem = tips.items[tips.selectedIndex]
 212 |     enable = !!(tipItem && tipItem.command);
 213 |   }
 214 |   return enable
 215 | })
 216 | 
 217 | const selectedTipCommand = computed<Command | null>(() => {
 218 |   return tips.items[tips.selectedIndex] ? tips.items[tips.selectedIndex].command : null
 219 | })
 220 | 
 221 | const _name = ref<string>()
 222 | const command = ref<string>("")
 223 | const inputLock = ref(false)
 224 | const cursorConf = reactive({
 225 |   defaultWidth: 7,
 226 |   width: 7,
 227 |   left: 'unset',
 228 |   top: 'unset',
 229 |   idx: 0, //  从0开始
 230 |   show: false
 231 | })
 232 | const byteLen = reactive({
 233 |   init: false,
 234 |   en: 8,
 235 |   cn: 13
 236 | })
 237 | const showInputLine = ref<boolean>(true)
 238 | const terminalLog = ref<MessageGroup[]>([])
 239 | const logSize = ref<number>(0)
 240 | const allCommandStore = ref<Command[]>([])
 241 | const fullscreenState = ref<boolean>(false)
 242 | const inputBoxParam = reactive({
 243 |   boxWidth: 0,
 244 |   boxHeight: 0,
 245 |   promptWidth: 0,
 246 |   promptHeight: 0
 247 | })
 248 | const flash = reactive({
 249 |   open: false,
 250 |   content: null
 251 | })
 252 | const ask = reactive({
 253 |   open: false,
 254 |   question: <string>null,
 255 |   isPassword: false,
 256 |   callback: null,
 257 |   autoReview: false,
 258 |   input: ''
 259 | })
 260 | const textEditor = reactive<EditorConfig>({
 261 |   open: false,
 262 |   focus: false,
 263 |   value: '',
 264 |   onClose: null
 265 | })
 266 | textEditor.onFocus = () => {
 267 |   textEditor.focus = true
 268 | }
 269 | textEditor.onBlur = () => {
 270 |   textEditor.focus = false
 271 | }
 272 | const containerStyleStore = ref<{ [prop: string]: string | number }>()
 273 | const headerHeight = ref(0)
 274 | const tips = reactive({
 275 |   open: false,
 276 |   style: {
 277 |     opacity: 100,
 278 |     top: 0,
 279 |     left: 0
 280 |   },
 281 |   cursorIdx: 0,
 282 |   items: <InputTipItem[]>[],
 283 |   helpBox: {
 284 |     //  避免默认提示板与输入框遮挡，某些情况下需要隐藏提示板
 285 |     open: false,
 286 |     lastRect: null
 287 |   },
 288 |   selectedIndex: 0
 289 | })
 290 | 
 291 | //  references
 292 | const terminalContainerRef = ref(null)
 293 | const terminalHeaderRef = ref(null)
 294 | const terminalWindowRef = ref(null)
 295 | const terminalCmdInputRef = ref(null)
 296 | const terminalAskInputRef = ref(null)
 297 | const terminalInputBoxRef = ref(null)
 298 | const terminalInputPromptRef = ref(null)
 299 | const terminalEnFlagRef = ref(null)
 300 | const terminalCnFlagRef = ref(null)
 301 | const terminalTextEditorRef = ref<InstanceType<typeof TEditor>>(null)
 302 | const terminalCursorRef = ref(null)
 303 | const terminalHelpBoxRef = ref<InstanceType<typeof THelpBox>>(null)
 304 | const resizeLTRef = ref(null)
 305 | const resizeRTRef = ref(null)
 306 | const resizeLBRef = ref(null)
 307 | const resizeRBRef = ref(null)
 308 | const terminalCmdTipsRef = ref(null)
 309 | 
 310 | //  listeners
 311 | const clickListener = ref()
 312 | const keydownListener = ref()
 313 | const terminalListener = ref()
 314 | 
 315 | const resizeObserver = ref<ResizeObserver>()
 316 | const forceScrollToBottom = ref(true)
 317 | 
 318 | onMounted(() => {
 319 |   emits('init-before', getName())
 320 | 
 321 |   setTheme(props.theme)
 322 | 
 323 |   _initContainerStyle()
 324 | 
 325 |   if (props.initLog) {
 326 |     _newTerminalLogGroup('init')
 327 |     _pushMessage(props.initLog)
 328 |   }
 329 | 
 330 |   let commandStore = []
 331 |   if (props.enableDefaultCommand) {
 332 |     commandStore = commandStore.concat(DEFAULT_COMMANDS)
 333 |   }
 334 |   if (props.commandStore) {
 335 |     if (props.commandSortHandler) {
 336 |       props.commandStore.sort(props.commandSortHandler)
 337 |     }
 338 |     commandStore = commandStore.concat(props.commandStore)
 339 |   }
 340 |   allCommandStore.value = commandStore
 341 | 
 342 |   if (terminalWindowRef.value) {
 343 |     terminalWindowRef.value.scrollTop = terminalWindowRef.value.offsetHeight;
 344 |   }
 345 | 
 346 |   let selectContentText = null
 347 | 
 348 |   _eventOn(window, "click", clickListener.value = (e) => {
 349 |     const beforeActive = isActive.value
 350 |     let activeCursor = false
 351 |     let container = terminalContainerRef.value
 352 |     if (container && container.getBoundingClientRect) {
 353 |       //  点击在窗口区域内
 354 |       if (_pointInRect(e, container.getBoundingClientRect())) {
 355 |         activeCursor = _isParentDom(e.target, container, "t-container")
 356 |             || (e.target && e.target.classList.contains('t-text-editor-floor-btn'))
 357 |       } else if (!beforeActive) {
 358 |         //  在窗口区域之外并且当前窗口不活跃时，忽略掉此事件
 359 |         return
 360 |       }
 361 |     }
 362 | 
 363 |     if (isBlockCommandFocus.value) {
 364 |       cursorConf.show = false
 365 |     } else {
 366 |       cursorConf.show = activeCursor
 367 |     }
 368 | 
 369 |     if (activeCursor) {
 370 |       if (!beforeActive) {
 371 |         _onActive()
 372 |       }
 373 |     } else {
 374 |       _closeTips(false)
 375 |       if (beforeActive) {
 376 |         _onInactive()
 377 |       }
 378 |     }
 379 |   })
 380 | 
 381 |   _eventOn(window, 'keydown', keydownListener.value = (event: KeyboardEvent) => {
 382 |     if (isActive.value) {
 383 |       try {
 384 |         let key = event.key.toLowerCase()
 385 |         if (key.match(/c|control|meta/g)) {
 386 |           if (event.metaKey || event.ctrlKey) {
 387 |             return
 388 |           }
 389 |           if (key === 'c' && (event.metaKey || event.ctrlKey)) {
 390 |             return
 391 |           }
 392 |         }
 393 | 
 394 |         if (key === 'escape' && tips.open) {
 395 |           _closeTips(false)
 396 |           return;
 397 |         }
 398 | 
 399 |         if (cursorConf.show) {
 400 |           if (key === 'home') {
 401 |             _setCursorIdx(0)
 402 | 
 403 |             event.preventDefault()
 404 |           } else if (key == 'end') {
 405 |             _setCursorIdx(terminalCmdInputRef.value.value.length)
 406 | 
 407 |             event.preventDefault()
 408 |           } else if (key === 'tab') {
 409 |             _selectTips()
 410 |             event.preventDefault()
 411 |           } else if (document.activeElement !== terminalCmdInputRef.value) {
 412 |             terminalCmdInputRef.value.focus()
 413 |             _onInputKeydown(event)
 414 |           }
 415 |         }
 416 |       } finally {
 417 |         emits('on-keydown', event, getName())
 418 |       }
 419 |     }
 420 |   })
 421 | 
 422 |   //  先暂存选中文本
 423 |   _eventOn(terminalWindowRef.value, 'mousedown', () => {
 424 |     let selection = _getSelection();
 425 |     let content = ''
 426 |     if (!selection.isCollapsed || (content = selection.toString()).length > 0) {
 427 |       selectContentText = content.length > 0 ? content : selection.toString()
 428 |       selectContentText = selectContentText.replace(new RegExp(String.fromCharCode(160), "g"), ' ')
 429 |     }
 430 |   })
 431 | 
 432 |   _eventOn(terminalWindowRef.value, 'contextmenu', (event: MouseEvent) => {
 433 |     event.preventDefault();
 434 | 
 435 |     if (selectContentText) {
 436 |       _copyTextToClipboard(selectContentText)
 437 |       selectContentText = null
 438 |       return;
 439 |     }
 440 | 
 441 |     const clipboardText = _getClipboardText();
 442 |     if (clipboardText) {
 443 |       clipboardText.then(text => {
 444 |         if (!text) {
 445 |           return;
 446 |         }
 447 |         text = text.trim()
 448 |             .replace(/\r\n/g, '\n')
 449 |             .replace(/\r/g, '\n')
 450 |         const cmd = command.value;
 451 |         let cursorIdx = cursorConf.idx
 452 |         command.value = cmd.substring(0, cursorIdx) + text + cmd.substring(cursorIdx)
 453 |         nextTick(() => {
 454 |           _setCursorIdx(cursorIdx + text.length)
 455 |           _calculateCursorPos()
 456 |         })
 457 | 
 458 |         _focus()
 459 |         _jumpToBottom(true)
 460 |       }).catch(error => {
 461 |         console.error(error);
 462 |       })
 463 |     } else {
 464 |       _focus()
 465 |     }
 466 |   });
 467 | 
 468 |   let containerStyleCache = null;
 469 |   //  监听全屏事件，用户ESC退出时需要设置全屏状态
 470 |   ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'].forEach((item) => {
 471 |     _eventOn(window, item, () => {
 472 |       const dom: any = document
 473 |       let isFullScreen = dom.fullscreenElement || dom.fullScreen || dom.mozFullScreen || dom.webkitIsFullScreen
 474 |       if (isFullScreen) {
 475 |         //  存储窗口样式
 476 |         containerStyleCache = JSON.parse(JSON.stringify(containerStyleStore.value))
 477 | 
 478 |         //  进入全屏
 479 |         if (_isSafari()) {
 480 |           containerStyleStore.value.width = '100%'
 481 |           containerStyleStore.value.height = '100%'
 482 |           containerStyleStore.value.left = '0'
 483 |           containerStyleStore.value.top = '0'
 484 |         }
 485 |       } else {
 486 |         //  退出全屏
 487 |         fullscreenState.value = false
 488 |         if (containerStyleCache) {
 489 |           containerStyleStore.value = containerStyleCache
 490 |         }
 491 |       }
 492 |     });
 493 |   });
 494 | 
 495 |   _eventOn(terminalWindowRef.value, 'scroll', (e: Event) => {
 496 |     let doc = e.target as HTMLElement
 497 |     let bottom = doc.scrollHeight - doc.clientHeight - doc.scrollTop
 498 | 
 499 |     forceScrollToBottom.value = bottom <= 100;
 500 |   })
 501 | 
 502 |   //  如果是移动设备，需要监听touch事件来模拟双击事件
 503 |   if (_isPhone() || _isPad()) {
 504 |     let touchTime = 0
 505 |     terminalWindowRef.value.addEventListener('touchend', () => {
 506 |       let now = new Date().getTime()
 507 |       if (touchTime === 0) {
 508 |         touchTime = now
 509 |       } else {
 510 |         if (new Date().getTime() - touchTime < 600) {
 511 |           //  移动端双击
 512 |           _focus(true)
 513 |         } else {
 514 |           touchTime = now
 515 |         }
 516 |       }
 517 |     })
 518 |   }
 519 | 
 520 |   //  监听header的尺寸变化
 521 |   resizeObserver.value = new ResizeObserver(entries => {
 522 |     for (const entry of entries) {
 523 |       if (entry.target === terminalHeaderRef.value) {
 524 |         updateHeaderHeight()
 525 |       }
 526 |     }
 527 |   });
 528 |   if (terminalHeaderRef.value) {
 529 |     resizeObserver.value.observe(terminalHeaderRef.value)
 530 |   }
 531 | 
 532 |   _initDrag()
 533 | 
 534 |   register(getName(), terminalListener.value = (type: string, options?: any) => {
 535 |     if (type === 'pushMessage') {
 536 |       _pushMessage(options)
 537 |     } else if (type === 'appendMessage') {
 538 |       _appendMessage(options as string)
 539 |     } else if (type === 'fullscreen') {
 540 |       _fullscreen()
 541 |     } else if (type === 'isFullscreen') {
 542 |       return fullscreenState.value
 543 |     } else if (type === 'dragging') {
 544 |       if (draggable.value) {
 545 |         _dragging(options as Position)
 546 |       } else {
 547 |         console.warn("Terminal is not draggable: " + getName())
 548 |       }
 549 |     } else if (type === 'execute') {
 550 |       if (!isBlockCommandFocus.value && _nonEmpty(options)) {
 551 |         command.value = options.trim()
 552 |         _execute()
 553 |         return true
 554 |       } else {
 555 |         return false
 556 |       }
 557 |     } else if (type === 'focus') {
 558 |       _focus(options)
 559 |     } else if (type === 'elementInfo') {
 560 |       return _getElementInfo()
 561 |     } else if (type === 'textEditorOpen') {
 562 |       let opt: EditorSetting = options || {}
 563 | 
 564 |       textEditor.value = opt.content
 565 |       textEditor.open = true
 566 |       textEditor.onClose = opt.onClose
 567 |       _focus()
 568 |     } else if (type === 'textEditorClose') {
 569 |       return _textEditorClose(options)
 570 |     } else if (type === 'clearLog') {
 571 |       return _clearLog(options)
 572 |     } else if (type === 'getCommand') {
 573 |       return _getCommand()
 574 |     } else if (type === 'setCommand') {
 575 |       return _setCommand(options as string)
 576 |     } else if (type === 'switchAllFoldState') {
 577 |       return _switchAllFoldState(options)
 578 |     } else if (type === 'jumpToBottom') {
 579 |       return _jumpToBottom(options)
 580 |     } else if (type === 'getOutputs') {
 581 |       return terminalLog.value
 582 |     } else {
 583 |       console.error(`Unsupported event type ${type} in instance ${getName()}`)
 584 |     }
 585 |   })
 586 |   emits('init-complete', getName())
 587 | })
 588 | 
 589 | onUnmounted(() => {
 590 |   //  通知
 591 |   emits('destroyed', getName())
 592 | 
 593 |   //  注销事件监听器
 594 |   _eventOff(window, 'keydown', keydownListener.value)
 595 |   _eventOff(window, "click", clickListener.value)
 596 |   if (resizeObserver.value && terminalHeaderRef.value) {
 597 |     resizeObserver.value.unobserve(terminalHeaderRef.value)
 598 |     resizeObserver.value = null
 599 |   }
 600 | 
 601 |   //  移除样式文件
 602 |   let style = document.getElementById(getThemeStyleId(_hash(getName())))
 603 |   if (style) {
 604 |     document.body.removeChild(style)
 605 |   }
 606 | 
 607 |   //  注销本地数据
 608 |   unregister(getName())
 609 | })
 610 | 
 611 | //  监听主题
 612 | watch(() => props.theme, (t) => {
 613 |   setTheme(t)
 614 | })
 615 | 
 616 | //  监听上下文
 617 | watch(
 618 |     () => props.context,
 619 |     () => {
 620 |       nextTick(() => {
 621 |         _calculatePromptLen()
 622 |       }).then(() => {
 623 |       })
 624 |     }
 625 | )
 626 | 
 627 | //  监听改名称
 628 | watch(
 629 |     () => props.name,
 630 |     (newVal, oldVal) => {
 631 |       let newName = newVal ? newVal : getName()
 632 |       let oldName = oldVal ? oldVal : _name.value
 633 |       rename(newName, oldName, terminalListener.value)
 634 |       changeThemeFlag(_hash(newName), _hash(oldName))
 635 |     }
 636 | )
 637 | 
 638 | //  监听层级变化
 639 | watch(
 640 |     () => {
 641 |       if (props.dragConf) {
 642 |         return props.dragConf.zIndex
 643 |       } else {
 644 |         return null
 645 |       }
 646 |     },
 647 |     (newVal) => {
 648 |       if (containerStyleStore.value) {
 649 |         containerStyleStore.value['z-index'] = newVal
 650 |       }
 651 |     }
 652 | )
 653 | 
 654 | //  监听header显示
 655 | watch(
 656 |     () => props.showHeader,
 657 |     () => {
 658 |       updateHeaderHeight()
 659 |     }
 660 | )
 661 | 
 662 | watch(
 663 |     () => cursorConf,
 664 |     () => {
 665 |       _calculateTipsPos()
 666 |     },
 667 |     {
 668 |       deep: true
 669 |     }
 670 | )
 671 | 
 672 | let idx = 0;
 673 | 
 674 | function generateTerminalName() {
 675 |   idx++;
 676 |   return `terminal_${idx}`;
 677 | }
 678 | 
 679 | const updateHeaderHeight = () => {
 680 |   nextTick(() => {
 681 |     if (terminalHeaderRef.value && terminalHeaderRef.value.getBoundingClientRect) {
 682 |       let rect: DOMRect = terminalHeaderRef.value.getBoundingClientRect()
 683 |       headerHeight.value = rect.height
 684 |     } else {
 685 |       headerHeight.value = 0
 686 |     }
 687 |   })
 688 | }
 689 | 
 690 | const getName = (): string => {
 691 |   if (props.name) {
 692 |     return props.name;
 693 |   }
 694 |   if (!_name.value) {
 695 |     _name.value = generateTerminalName();
 696 |   }
 697 |   return _name.value;
 698 | }
 699 | 
 700 | const getThemeStyleId = (salt: string): string => {
 701 |   return `t-theme-style-${salt}`
 702 | }
 703 | 
 704 | /**
 705 |  * 设置主题
 706 |  * @param theme
 707 |  */
 708 | const setTheme = (theme: string) => {
 709 |   let customThemes = getConfiguration().themes
 710 |   let themeStyle: string
 711 |   if (customThemes && customThemes[theme]) {
 712 |     themeStyle = customThemes[theme]
 713 |   } else if (theme === 'dark') {
 714 |     themeStyle = themeDark as string
 715 |   } else if (theme === 'light') {
 716 |     themeStyle = themeLight as string
 717 |   } else {
 718 |     console.warn("The specified terminal theme style was not found:", theme)
 719 |     return
 720 |   }
 721 |   let css = themeStyle.match(/^.*\{(.*)}\s*$/s)[1]
 722 | 
 723 |   let terminalNameKey = _hash(getName())
 724 | 
 725 |   themeStyle = `.t-container[t-data-key="${terminalNameKey}"] { ${css} }`
 726 | 
 727 |   let tagId = getThemeStyleId(terminalNameKey)
 728 |   let styleTag = document.getElementById(tagId)
 729 |   if (styleTag) {
 730 |     styleTag.innerHTML = themeStyle
 731 |   } else {
 732 |     let themeLink = document.createElement("style")
 733 |     themeLink.innerHTML = themeStyle
 734 |     themeLink.id = tagId
 735 |     document.body.appendChild(themeLink)
 736 |   }
 737 | }
 738 | 
 739 | /**
 740 |  * 当改名时，需更新css文件
 741 |  * @param newNameKey 新 Key（已转换过）
 742 |  * @param oldNameKey 旧 Key（已转换过）
 743 |  */
 744 | const changeThemeFlag = (newNameKey: string, oldNameKey: string) => {
 745 |   let newTagId = getThemeStyleId(newNameKey)
 746 |   let oldThemeStyle = document.getElementById(getThemeStyleId(oldNameKey))
 747 |   if (oldThemeStyle) {
 748 |     let style = oldThemeStyle.innerHTML.replace(`[t-data-key="${oldNameKey}"]`, `[t-data-key="${newNameKey}"]`)
 749 |     oldThemeStyle.id = newTagId
 750 |     oldThemeStyle.innerHTML = style
 751 |   }
 752 | }
 753 | 
 754 | const _clearLog = (clearHistory: boolean) => {
 755 |   if (clearHistory) {
 756 |     getStore().clear(getName())
 757 |   } else {
 758 |     terminalLog.value = [];
 759 |     logSize.value = 0;
 760 |   }
 761 | }
 762 | 
 763 | const _triggerClick = (key: string) => {
 764 |   if (key === 'fullscreen') {
 765 |     _fullscreen()
 766 |   } else if (key === 'pin' && props.showHeader) {
 767 |     let pinned = props.dragConf.pinned || false
 768 |     props.dragConf.pinned = !pinned;
 769 |   }
 770 | 
 771 |   emits('on-click', key, getName())
 772 | }
 773 | 
 774 | const _calculateByteLen = () => {
 775 |   if (byteLen.init) {
 776 |     return
 777 |   }
 778 |   let enGhost = terminalEnFlagRef.value
 779 |   if (enGhost) {
 780 |     let rect = enGhost.getBoundingClientRect()
 781 |     if (rect && rect.width > 0) {
 782 |       byteLen.init = true
 783 |       byteLen.en = rect.width / 10
 784 |       byteLen.cn = terminalCnFlagRef.value.getBoundingClientRect().width / 10
 785 | 
 786 |       cursorConf.defaultWidth = byteLen.en
 787 |       cursorConf.width = byteLen.en
 788 |       byteLen.init = true
 789 |     }
 790 |   }
 791 | }
 792 | 
 793 | const _calculatePromptLen = () => {
 794 |   let prompt = terminalInputPromptRef.value
 795 |   if (prompt) {
 796 |     let rect = prompt.getBoundingClientRect()
 797 |     if (rect.width > 0) {
 798 |       inputBoxParam.promptWidth = rect.width
 799 |       inputBoxParam.promptHeight = rect.height
 800 |     }
 801 |   }
 802 | }
 803 | 
 804 | const _searchCmd = () => {
 805 |   if (!props.enableInputTips) {
 806 |     return
 807 |   }
 808 | 
 809 |   //  用户自定义搜索实现
 810 |   if (props.inputTipsSearchHandler) {
 811 |     props.inputTipsSearchHandler(command.value, cursorConf.idx, allCommandStore.value, (items: InputTipItem[], openTips?: boolean) => {
 812 |       _updateTipsItems(items, openTips)
 813 |     })
 814 |     return
 815 |   }
 816 | 
 817 |   let firstSpaceIdx = command.value.indexOf(' ')
 818 |   let cursorInKey = firstSpaceIdx <= 0 || cursorConf.idx <= firstSpaceIdx
 819 | 
 820 |   let cmd = command.value.trim().split(' ')[0]
 821 | 
 822 |   if (cmd.length === 0) {
 823 |     _closeTips(true)
 824 |   } else {
 825 |     let reg = new RegExp(cmd.trim().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'ig')
 826 |     let matchArray = []
 827 | 
 828 |     let lowerCaseCmd = cmd.toLowerCase()
 829 | 
 830 |     for (const o of allCommandStore.value) {
 831 |       if (_nonEmpty(o.key)) {
 832 |         let res = o.key.match(reg)
 833 |         if (res != null) {
 834 |           //  匹配分数集合：[是否完全匹配，是否大小写完全匹配，首个匹配索引位置，匹配次数, 源字符串长度]
 835 |           let score = [0, 0, 0, 0, 0]
 836 |           //  完全匹配
 837 |           if (cmd.length === o.key.length) {
 838 |             score[0] = 1
 839 |           } else {
 840 |             score[1] = res.includes(cmd) ? 1 : 0
 841 |             score[2] = o.key.toLowerCase().indexOf(lowerCaseCmd)
 842 |             score[3] = res.length
 843 |             score[4] = o.key.length
 844 |           }
 845 |           matchArray.push({
 846 |             item: o,
 847 |             keyword: o.key.replace(reg, '<span class="t-cmd-key">$&</span>'),
 848 |             score: score
 849 |           })
 850 |         }
 851 |       }
 852 |     }
 853 | 
 854 |     if (matchArray.length > 0) {
 855 |       matchArray.sort((a, b) => {
 856 |         let scoreA = a.score
 857 |         let scoreB = b.score
 858 | 
 859 |         //  都完全匹配
 860 |         if (scoreA[0] == 1 && scoreA[0] == scoreB[0]) {
 861 |           return 0
 862 |         }
 863 |         //  a完全匹配
 864 |         else if (scoreA[0] == 1) {
 865 |           return -1
 866 |         }
 867 |         //  b完全匹配
 868 |         else if (scoreB[0] == 1) {
 869 |           return 1
 870 |         }
 871 |         //  均不完全匹配
 872 |         else {
 873 |           if (scoreA[1] == scoreB[1]) {
 874 |             //  匹配索引位置越靠左越优先展示
 875 |             let res = scoreA[2] - scoreB[2]
 876 |             if (res == 0) {
 877 |               //  匹配次数越多越优先展示
 878 |               res = scoreB[3] - scoreA[3]
 879 |               //  匹配源字符长度越短越优先展示
 880 |               if (res == 0) {
 881 |                 res = scoreA[4] - scoreB[4]
 882 |               }
 883 |             }
 884 |             return res
 885 |           } else {
 886 |             //  大小写完全匹配的优先展示
 887 |             return scoreB[1] - scoreA[1]
 888 |           }
 889 |         }
 890 |       })
 891 | 
 892 |       let items = []
 893 | 
 894 |       for (let o of matchArray) {
 895 |         items.push({
 896 |           content: o.keyword,
 897 |           description: o.item.description,
 898 |           command: o.item
 899 |         })
 900 |       }
 901 |       _updateTipsItems(items, cursorInKey)
 902 |     } else {
 903 |       _closeTips(true)
 904 |     }
 905 |   }
 906 | }
 907 | 
 908 | const _focus = (enforceFocus?: boolean | MouseEvent) => {
 909 |   nextTick(() => {
 910 |     _onActive()
 911 |     let input: HTMLInputElement
 912 |     if (ask.open) {
 913 |       input = terminalAskInputRef.value
 914 |       cursorConf.show = false
 915 |     } else if (textEditor.open) {
 916 |       //  @ts-ignore
 917 |       input = terminalTextEditorRef.value
 918 |       cursorConf.show = false
 919 |     } else {
 920 |       if (enforceFocus === true) {
 921 |         input = terminalCmdInputRef.value
 922 |       }
 923 |       //  可能会和点击事件冲突，这里延迟执行
 924 |       setTimeout(() => {
 925 |         cursorConf.show = true
 926 |       })
 927 |     }
 928 | 
 929 |     if (input) {
 930 |       input.focus()
 931 |     }
 932 |   })
 933 | }
 934 | 
 935 | /**
 936 |  * help命令执行后调用此方法
 937 |  *
 938 |  * 命令搜索：comm*、command
 939 |  * 分组搜索：:groupA
 940 |  */
 941 | const _printHelp = (regExp: RegExp, srcStr: string) => {
 942 |   let content = {
 943 |     head: ['KEY', 'GROUP', 'DETAIL'],
 944 |     rows: []
 945 |   }
 946 |   let findGroup = srcStr && srcStr.length > 1 && srcStr.startsWith(":")
 947 |       ? srcStr.substring(1).toLowerCase()
 948 |       : null
 949 |   allCommandStore.value.forEach(cmd => {
 950 |     if (findGroup) {
 951 |       if (_isEmpty(cmd.group) || findGroup !== cmd.group.toLowerCase()) {
 952 |         return;
 953 |       }
 954 |     } else if (!regExp.test(cmd.key)) {
 955 |       return
 956 |     }
 957 |     let row = []
 958 |     row.push(`<span class='t-cmd-key'>${cmd.key}</span>`)
 959 |     row.push(cmd.group)
 960 | 
 961 |     let detail = ''
 962 |     if (_nonEmpty(cmd.description)) {
 963 |       detail += `Description: ${cmd.description}<br>`
 964 |     }
 965 |     if (_nonEmpty(cmd.usage)) {
 966 |       detail += `Usage: <code class="t-code-inline">${_html(cmd.usage)}</code><br>`
 967 |     }
 968 |     if (cmd.example != null) {
 969 |       if (cmd.example.length > 0) {
 970 |         detail += '<br>'
 971 |       }
 972 | 
 973 |       for (let idx in cmd.example) {
 974 |         let eg = cmd.example[idx]
 975 |         detail += `
 976 |         <div>
 977 |           <div class="t-cmd-help-eg">
 978 |             eg${parseInt(idx) + 1}:
 979 |           </div>
 980 |           <div class="t-cmd-help-example">
 981 |             <ul class="t-example-ul">
 982 |               <li class="t-example-li"><code class="t-code-inline">${eg.cmd}</code></li>
 983 |               <li class="t-example-li"><span></span></li>
 984 |         `
 985 | 
 986 |         if (_nonEmpty(eg.des)) {
 987 |           detail += `<li class="t-example-li"><span>${eg.des}</span></li>`
 988 |         }
 989 |         detail += `
 990 |             </ul>
 991 |           </div>
 992 |         </div>
 993 |         `
 994 |       }
 995 |     }
 996 | 
 997 |     row.push(detail)
 998 | 
 999 |     content.rows.push(row)
1000 |   })
1001 |   _pushMessage({
1002 |     type: 'table',
1003 |     content: content
1004 |   })
1005 | }
1006 | 
1007 | const _inputEnter = (e: KeyboardEvent) => {
1008 |   if (inputLock.value) {
1009 |     return
1010 |   }
1011 |   if (e.ctrlKey) {
1012 |     if (command.value.length > 0) {
1013 |       let cursorIdx = cursorConf.idx
1014 |       command.value = command.value.substring(0, cursorIdx) + '\n' + command.value.substring(cursorIdx)
1015 | 
1016 |       cursorIdx++
1017 |       //  恢复光标位置
1018 |       nextTick(() => {
1019 |         _setCursorIdx(cursorIdx)
1020 |       })
1021 |       _jumpToBottom(true)
1022 |     }
1023 |   } else {
1024 |     _execute()
1025 |   }
1026 | }
1027 | 
1028 | const _setCursorIdx = (idx: number) => {
1029 |   terminalCmdInputRef.value.selectionStart = idx
1030 |   terminalCmdInputRef.value.selectionEnd = idx
1031 |   cursorConf.idx = idx
1032 | }
1033 | 
1034 | const _execute = () => {
1035 |   _closeTips(true)
1036 |   _saveCurCommand();
1037 |   if (_nonEmpty(command.value)) {
1038 |     try {
1039 |       let split = command.value.split(" ")
1040 |       let cmdKey = split[0];
1041 |       emits("before-exec-cmd", cmdKey, command.value, getName())
1042 | 
1043 |       const execute = () => {
1044 |         showInputLine.value = false
1045 |         let _success: SuccessFunc = (message) => {
1046 |           let _finish = () => {
1047 |             _jumpToBottom()
1048 |             showInputLine.value = true
1049 |             _endExecCallBack()
1050 |           }
1051 | 
1052 |           if (message) {
1053 |             //  实时回显处理
1054 |             if (message instanceof TerminalFlash) {
1055 |               message.onFlush((msg: string) => {
1056 |                 flash.content = msg
1057 |               })
1058 |               message.onFinish(() => {
1059 |                 flash.open = false
1060 |                 _finish()
1061 |               })
1062 |               flash.open = true
1063 |               return
1064 |             } else if (message instanceof TerminalAsk) {
1065 |               message.onAsk((options: AskConfig) => {
1066 |                 ask.input = ''
1067 |                 ask.isPassword = options.isPassword
1068 |                 ask.question = _html(options.question)
1069 |                 ask.callback = options.callback
1070 |                 ask.autoReview = options.autoReview
1071 |                 _focus()
1072 |                 _jumpToBottom(true)
1073 |               })
1074 | 
1075 |               message.onFinish(() => {
1076 |                 ask.open = false
1077 |                 _finish()
1078 |                 _focus(true)
1079 |               })
1080 |               ask.open = true
1081 |               return
1082 |             } else {
1083 |               _pushMessage(message)
1084 |             }
1085 |           }
1086 |           _finish()
1087 |         }
1088 | 
1089 |         let _failed: FailedFunc = (message) => {
1090 |           if (message) {
1091 |             _pushMessage({
1092 |               type: 'normal',
1093 |               class: 'error',
1094 |               content: message
1095 |             })
1096 |           }
1097 |           showInputLine.value = true
1098 |           _endExecCallBack()
1099 |         }
1100 | 
1101 |         emits("exec-cmd", cmdKey, command.value, _success, _failed, getName())
1102 |       }
1103 |       if (props.enableDefaultCommand) {
1104 |         switch (cmdKey) {
1105 |           case 'help': {
1106 |             let reg = `^${split.length > 1 && _nonEmpty(split[1]) ? split[1] : "*"}$`
1107 |             reg = reg.replace(/\*/g, ".*")
1108 |             _printHelp(new RegExp(reg, "i"), split[1])
1109 |             break;
1110 |           }
1111 |           case 'clear':
1112 |             _clearLog(split.length === 2 && split[1] === 'history');
1113 |             break;
1114 |           case 'open':
1115 |             _openUrl(split[1], _pushMessage);
1116 |             break;
1117 |           default: {
1118 |             execute()
1119 |             return
1120 |           }
1121 |         }
1122 |       } else {
1123 |         execute()
1124 |         return;
1125 |       }
1126 |     } catch (e) {
1127 |       console.error(e)
1128 |       _pushMessage({
1129 |         type: 'normal',
1130 |         class: 'error',
1131 |         content: _html(e.stack),
1132 |         tag: 'error'
1133 |       })
1134 |     }
1135 |   }
1136 |   _endExecCallBack()
1137 | }
1138 | 
1139 | const _endExecCallBack = () => {
1140 |   command.value = ""
1141 |   _resetCursorPos()
1142 |   if (isActive.value) {
1143 |     _focus()
1144 |     cursorConf.show = true
1145 |   } else {
1146 |     cursorConf.show = false
1147 |   }
1148 |   _closeTips(true)
1149 | }
1150 | 
1151 | const _filterMessageType = (message: Message) => {
1152 |   const valid = message.type && /^(normal|html|code|table|json|ansi)$/.test(message.type)
1153 |   if (!valid) {
1154 |     console.debug(`Invalid terminal message type: ${message.type}, the default type normal will be used`)
1155 |     message.type = 'normal'
1156 |   } else {
1157 |     if (message.type === 'json') {
1158 |       if (!message.depth) {
1159 |         message.depth = 1;
1160 |       }
1161 |     }
1162 |   }
1163 |   return valid
1164 | }
1165 | 
1166 | const _newTerminalLogGroup = (tag?: string): MessageGroup => {
1167 |   let newGroup: MessageGroup = {
1168 |     fold: false,
1169 |     logs: []
1170 |   }
1171 |   if (tag) {
1172 |     newGroup.tag = tag
1173 |   }
1174 |   terminalLog.value.push(newGroup)
1175 |   return newGroup
1176 | }
1177 | 
1178 | const _pushMessage = (message: Message | Array<Message> | string) => {
1179 |   let forceToBottom = forceScrollToBottom.value
1180 |   if (!message) return
1181 |   if (message instanceof Array) {
1182 |     for (let m of message) {
1183 |       _pushMessage0(m, false)
1184 |     }
1185 |     _checkLogSize()
1186 |     _jumpToBottom(forceToBottom)
1187 |     return;
1188 |   }
1189 | 
1190 |   _pushMessage0(message)
1191 |   _jumpToBottom(forceToBottom)
1192 | 
1193 |   if (typeof message != 'string' && message.type === 'json') {
1194 |     setTimeout(() => {
1195 |       _jumpToBottom(forceToBottom)
1196 |     }, 80)
1197 |   }
1198 | }
1199 | 
1200 | const _pushMessage0 = (message: Message | string, checkSize: boolean = false) => {
1201 |   if (typeof message === 'string') {
1202 |     message = {
1203 |       type: 'normal',
1204 |       content: message as string
1205 |     }
1206 |   } else {
1207 |     _filterMessageType(message)
1208 |     if (message.type === 'ansi') {
1209 |       message.type = 'html'
1210 |       message.content = _parseANSI(message.content as string)
1211 |     }
1212 | 
1213 |     if (message.type !== 'cmdLine' && props.pushMessageBefore) {
1214 |       props.pushMessageBefore(message, getName())
1215 |     }
1216 |   }
1217 | 
1218 |   let terminalLogLength = terminalLog.value.length
1219 |   if (terminalLogLength === 0) {
1220 |     _newTerminalLogGroup()
1221 |   }
1222 |   terminalLogLength = terminalLog.value.length
1223 |   let logGroup = terminalLog.value[terminalLogLength - 1]
1224 |   logGroup.logs.push(message)
1225 |   logSize.value++
1226 | 
1227 |   if (checkSize) {
1228 |     _checkLogSize()
1229 |   }
1230 | }
1231 | 
1232 | const _checkLogSize = () => {
1233 |   if (props.logSizeLimit <= 0) {
1234 |     console.warn("Invalid attribute 'log-size-limit':", props.logSizeLimit)
1235 |     return;
1236 |   }
1237 | 
1238 |   //  留10%的缓冲
1239 |   let limit = Math.floor(props.logSizeLimit * 1.1)
1240 | 
1241 |   let count = logSize.value - limit;
1242 |   while (count > 0) {
1243 |     let group = terminalLog.value[0]
1244 |     let leftCount = count - group.logs.length
1245 |     if (leftCount >= 0) {
1246 |       terminalLog.value.splice(0, 1)
1247 |       logSize.value -= group.logs.length
1248 |     } else {
1249 |       group.logs.splice(0, count);
1250 |       group.fold = false
1251 |       logSize.value -= count
1252 |     }
1253 |     count = leftCount;
1254 |   }
1255 | }
1256 | 
1257 | /**
1258 |  * 追加内容到最后一条记录中，仅当最后一条消息存在，且其格式为 normal、ansi、code、html时才会追加，
1259 |  * 否则push一条新的消息
1260 |  * @param message 被追加的内容，格式为string
1261 |  */
1262 | const _appendMessage = (message: string) => {
1263 |   let lastMessage: Message
1264 |   for (let i = terminalLog.value.length - 1; i >= 0; i--) {
1265 |     let group = terminalLog.value[i]
1266 |     for (let j = group.logs.length - 1; j >= 0; j--) {
1267 |       let message = group.logs[j]
1268 |       if (message.type !== 'cmdLine') {
1269 |         lastMessage = message
1270 |         break
1271 |       }
1272 |     }
1273 |     if (lastMessage) {
1274 |       break
1275 |     }
1276 |   }
1277 |   if (lastMessage) {
1278 |     //  仅对部分格式的消息可追加
1279 |     if (lastMessage.type === 'normal' || lastMessage.type === 'ansi'
1280 |         || lastMessage.type === 'code' || lastMessage.type == 'html') {
1281 |       lastMessage.content += message
1282 |     } else {
1283 |       console.warn(`The last message type is ${lastMessage.type}, can not append it and then push it.`)
1284 |       _pushMessage(message)
1285 |     }
1286 |   } else {
1287 |     _pushMessage(message)
1288 |   }
1289 | }
1290 | 
1291 | const _jumpToBottom = (enforce: boolean = false) => {
1292 |   if (!enforce && !forceScrollToBottom.value) {
1293 |     return
1294 |   }
1295 |   nextTick(() => {
1296 |     let box = terminalWindowRef.value
1297 |     if (box) {
1298 |       box.scrollTo({
1299 |         top: box.scrollHeight + 100,
1300 |         behavior: props.scrollMode
1301 |       })
1302 |     }
1303 |   })
1304 | }
1305 | 
1306 | const _saveCurCommand = () => {
1307 |   let cmd = command.value = command.value.trim()
1308 |   if (cmd.length > 0) {
1309 |     getStore().push(getName(), cmd)
1310 |   }
1311 | 
1312 |   let group = _newTerminalLogGroup()
1313 |   group.logs.push({
1314 |     type: "cmdLine",
1315 |     content: `${_html(props.context)}${props.contextSuffix}${_commandFormatter(cmd)}`
1316 |   });
1317 |   _jumpToBottom()
1318 | }
1319 | 
1320 | const _resetCursorPos = (cmd?: string) => {
1321 |   _calculateByteLen()
1322 | 
1323 |   let input = terminalCmdInputRef.value
1324 |   if (input) {
1325 |     input.focus()
1326 |     let cursorPos = command.value.length
1327 |     input.setSelectionRange(cursorPos, cursorPos)
1328 |   }
1329 | 
1330 |   cursorConf.idx = (cmd ? cmd : command.value).length
1331 |   cursorConf.left = 'unset'
1332 |   cursorConf.top = 'unset'
1333 |   cursorConf.width = cursorConf.defaultWidth
1334 | }
1335 | 
1336 | const _calculateCursorPos = (cmdStr?: string) => {
1337 |   let cmd = cmdStr ? cmdStr : command.value
1338 |   //  idx可以认为是需要光标覆盖字符的索引
1339 |   let idx = cursorConf.idx
1340 | 
1341 |   _calculateByteLen()
1342 | 
1343 |   if (idx < 0 || idx >= cmd.length) {
1344 |     _resetCursorPos()
1345 |     return
1346 |   }
1347 | 
1348 |   if (inputBoxParam.promptWidth === 0) {
1349 |     _calculatePromptLen()
1350 |   }
1351 | 
1352 |   let lineWidth = terminalInputBoxRef.value.getBoundingClientRect().width
1353 | 
1354 |   let pos = {left: 0, top: 0}
1355 |   //  当前字符长度
1356 |   let charWidth = cursorConf.defaultWidth
1357 |   //  前面字符的长度
1358 |   let lastCharWidth = inputBoxParam.promptWidth
1359 |   //  前一个字符是否是回车换行
1360 |   let lastCharIsEnter = false
1361 | 
1362 |   //  先找到被覆盖字符的位置
1363 |   for (let i = 0; i <= idx; i++) {
1364 |     let char = cmd[i]
1365 | 
1366 |     if (lastCharIsEnter) {
1367 |       pos.top += FONT_HEIGHT
1368 |       pos.left = 0
1369 |       lastCharWidth = 0
1370 |     }
1371 | 
1372 |     if (char === '\n') {
1373 |       pos.left += lastCharWidth
1374 |       lastCharIsEnter = true
1375 |       continue
1376 |     } else {
1377 |       lastCharIsEnter = false
1378 |     }
1379 | 
1380 |     charWidth = _calculateStringWidth(cmd[i])
1381 |     pos.left += lastCharWidth
1382 |     lastCharWidth = charWidth
1383 |     if (pos.left > lineWidth) {
1384 |       //  行高 对应 css 变量 --t-font-height
1385 |       pos.top += FONT_HEIGHT
1386 |       pos.left = charWidth
1387 |     }
1388 |   }
1389 | 
1390 |   cursorConf.left = pos.left + 'px'
1391 |   cursorConf.top = pos.top + 'px'
1392 |   cursorConf.width = charWidth
1393 | }
1394 | 
1395 | const _cursorGoLeft = () => {
1396 |   if (cursorConf.idx > 0) {
1397 |     cursorConf.idx--;
1398 |   }
1399 |   _calculateCursorPos()
1400 | }
1401 | 
1402 | const _cursorGoRight = () => {
1403 |   if (cursorConf.idx < command.value.length) {
1404 |     cursorConf.idx++;
1405 |   }
1406 |   _calculateCursorPos()
1407 | }
1408 | 
1409 | const _inputKeyUp = () => {
1410 |   if (inputLock.value) {
1411 |     return
1412 |   }
1413 |   if (tips.open) {
1414 |     let idx = tips.selectedIndex
1415 |     if (idx > 0) {
1416 |       idx--
1417 |     } else {
1418 |       idx = tips.items.length - 1
1419 |     }
1420 |     _switchTipsSelectedIdx(idx)
1421 |   } else {
1422 |     _switchPreCmd()
1423 |   }
1424 | }
1425 | 
1426 | const _inputKeyDown = () => {
1427 |   if (inputLock.value) {
1428 |     return
1429 |   }
1430 |   if (tips.open) {
1431 |     let idx = tips.selectedIndex
1432 |     if (idx < tips.items.length - 1) {
1433 |       idx++
1434 |     } else {
1435 |       idx = 0
1436 |     }
1437 |     _switchTipsSelectedIdx(idx)
1438 |   } else {
1439 |     _switchNextCmd()
1440 |   }
1441 | }
1442 | 
1443 | const _switchTipsSelectedIdx = (idx: number) => {
1444 |   let viewItem = terminalCmdTipsRef.value.querySelector(".t-cmd-tips-item:nth-child(" + (idx + 1) + ")")
1445 |   if (viewItem) {
1446 |     viewItem.scrollIntoView({
1447 |       block: "center",
1448 |       behavior: "smooth"
1449 |     })
1450 |   }
1451 |   tips.selectedIndex = idx
1452 | 
1453 |   let input = terminalCmdInputRef.value
1454 |   if (input) {
1455 |     input.setSelectionRange(tips.cursorIdx, tips.cursorIdx)
1456 |   }
1457 | }
1458 | 
1459 | const _switchPreCmd = () => {
1460 |   let cmdLog = getStore().getLog(getName())
1461 |   let cmdIdx = getStore().getIdx(getName())
1462 |   if (cmdLog.length !== 0 && cmdIdx > 0) {
1463 |     cmdIdx -= 1;
1464 |     command.value = cmdLog[cmdIdx] ? cmdLog[cmdIdx] : '';
1465 |   }
1466 |   _resetCursorPos()
1467 |   getStore().setIdx(getName(), cmdIdx)
1468 |   _jumpToBottom(true)
1469 | }
1470 | 
1471 | const _switchNextCmd = () => {
1472 |   let cmdLog = getStore().getLog(getName())
1473 |   let cmdIdx = getStore().getIdx(getName())
1474 |   if (cmdLog.length !== 0 && cmdIdx < cmdLog.length - 1) {
1475 |     cmdIdx += 1;
1476 |     command.value = cmdLog[cmdIdx] ? cmdLog[cmdIdx] : '';
1477 |   } else {
1478 |     cmdIdx = cmdLog.length;
1479 |     command.value = '';
1480 |   }
1481 |   _resetCursorPos()
1482 |   getStore().setIdx(getName(), cmdIdx)
1483 |   _jumpToBottom(true)
1484 | }
1485 | 
1486 | const _calculateStringWidth = (str: string): number => {
1487 |   let width = 0
1488 |   for (let char of str) {
1489 |     width += (_getByteLen(char) === 1 ? byteLen.en : byteLen.cn)
1490 |   }
1491 |   return width
1492 | }
1493 | 
1494 | const _onInput = (e: InputEvent | CompositionEvent) => {
1495 |   if (inputLock.value) {
1496 |     return
1497 |   }
1498 |   if (props.inputFilter) {
1499 |     let value = (e.target as HTMLInputElement).value
1500 |     let newStr = props.inputFilter(e.data, value, e)
1501 |     if (newStr == null) {
1502 |       newStr = value
1503 |     }
1504 |     command.value = newStr
1505 |   }
1506 | 
1507 |   if (_isEmpty(command.value)) {
1508 |     _closeTips(true);
1509 |   } else {
1510 |     _searchCmd()
1511 |   }
1512 | 
1513 |   nextTick(() => {
1514 |     _checkInputCursor()
1515 |     _calculateCursorPos()
1516 | 
1517 |     let cursorRect = terminalCursorRef.value.getBoundingClientRect()
1518 |     let helpBoxRect = tips.helpBox.lastRect || (terminalHelpBoxRef.value ? terminalHelpBoxRef.value.getBoundingClientRect() : null)
1519 |     if (cursorRect && helpBoxRect && _pointInRect({
1520 |       x: cursorRect.x + byteLen.en * 2,
1521 |       y: cursorRect.y + FONT_HEIGHT
1522 |     }, helpBoxRect)) {
1523 |       tips.helpBox.open = false
1524 |       tips.helpBox.lastRect = helpBoxRect
1525 |     } else {
1526 |       tips.helpBox.open = true
1527 |       tips.helpBox.lastRect = null
1528 |     }
1529 |   })
1530 |   _jumpToBottom(true)
1531 | }
1532 | 
1533 | const _onCompositionstart = () => {
1534 |   inputLock.value = true
1535 | }
1536 | 
1537 | const _onCompositionend = (e: CompositionEvent) => {
1538 |   setTimeout(() => {
1539 |     inputLock.value = false
1540 |     _onInput(e)
1541 |   }, 100)
1542 | }
1543 | 
1544 | const _checkInputCursor = () => {
1545 |   let eIn = terminalCmdInputRef.value
1546 |   if (eIn.selectionStart !== cursorConf.idx) {
1547 |     cursorConf.idx = eIn.selectionStart
1548 |   }
1549 | }
1550 | 
1551 | const _onInputKeydown = (e: KeyboardEvent) => {
1552 |   if (inputLock.value) {
1553 |     return
1554 |   }
1555 |   let key = e.key.toLowerCase()
1556 |   if (key === 'arrowleft') {
1557 |     _checkInputCursor()
1558 |     _cursorGoLeft()
1559 |   } else if (key === 'arrowright') {
1560 |     _checkInputCursor()
1561 |     _cursorGoRight()
1562 |   } else if (key === 'enter') {
1563 |     e.preventDefault()
1564 |   }
1565 | }
1566 | 
1567 | const _onInputKeyup = (e: KeyboardEvent) => {
1568 |   let key = e.key.toLowerCase()
1569 |   if (key === 'enter') {
1570 |     e.preventDefault()
1571 |     return
1572 |   }
1573 |   let code = e.code.toLowerCase()
1574 |   if (key === 'home' || key === 'end' || code === 'altleft' || code === 'metaleft' || code === 'controlleft'
1575 |       || ((e.ctrlKey || e.metaKey || e.altKey) && (key === 'arrowright' || key === 'arrowleft'))) {
1576 |     _checkInputCursor()
1577 |     _calculateCursorPos()
1578 |   }
1579 | }
1580 | 
1581 | const _fullscreen = () => {
1582 |   let fullArea = terminalContainerRef.value
1583 |   if (fullscreenState.value) {
1584 |     let dom: any = document
1585 |     if (dom.exitFullscreen) {
1586 |       dom.exitFullscreen();
1587 |     } else if (dom.webkitCancelFullScreen) {
1588 |       dom.webkitCancelFullScreen();
1589 |     } else if (dom.mozCancelFullScreen) {
1590 |       dom.mozCancelFullScreen();
1591 |     } else if (dom.msExitFullscreen) {
1592 |       dom.msExitFullscreen();
1593 |     } else {
1594 |       return
1595 |     }
1596 |   } else {
1597 |     if (fullArea.requestFullscreen) {
1598 |       fullArea.requestFullscreen();
1599 |     } else if (fullArea.webkitRequestFullScreen) {
1600 |       fullArea.webkitRequestFullScreen();
1601 |     } else if (fullArea.mozRequestFullScreen) {
1602 |       fullArea.mozRequestFullScreen();
1603 |     } else if (fullArea.msRequestFullscreen) {
1604 |       // IE11
1605 |       fullArea.msRequestFullscreen();
1606 |     } else {
1607 |       return
1608 |     }
1609 |   }
1610 |   fullscreenState.value = !fullscreenState.value
1611 | }
1612 | 
1613 | const _initContainerStyle = () => {
1614 |   let styleStore: { [prop: string]: string | number } = {}
1615 |   if (draggable.value) {
1616 |     let clientWidth = document.body.clientWidth
1617 |     let clientHeight = document.body.clientHeight
1618 | 
1619 |     let width: number = _parsePixelFromValue(props.dragConf.width, clientWidth, 700)
1620 |     let height: number = _parsePixelFromValue(props.dragConf.height, clientHeight, 500)
1621 | 
1622 |     let zIndex = props.dragConf.zIndex ? props.dragConf.zIndex : 100
1623 | 
1624 |     let initX: number, initY: number
1625 | 
1626 |     let initPos = props.dragConf.init
1627 |     if (initPos && initPos.x && initPos.y) {
1628 |       initX = initPos.x
1629 |       initY = initPos.y
1630 |     } else {
1631 |       initX = (clientWidth - width) / 2
1632 |       initY = (clientHeight - height) / 2
1633 |     }
1634 |     styleStore.position = 'fixed'
1635 |     styleStore.width = width + 'px'
1636 |     styleStore.height = height + 'px'
1637 |     styleStore.left = initX + 'px'
1638 |     styleStore.top = initY + 'px'
1639 |     styleStore['z-index'] = zIndex
1640 |   } else {
1641 |     styleStore.width = '100%'
1642 |     styleStore.height = '100%'
1643 |   }
1644 |   containerStyleStore.value = styleStore
1645 | }
1646 | 
1647 | const _initDrag = () => {
1648 |   if (!draggable.value) {
1649 |     return
1650 |   }
1651 |   // 记录当前鼠标位置
1652 |   let mouseOffsetX = 0;
1653 |   let mouseOffsetY = 0;
1654 | 
1655 |   let dragArea = terminalHeaderRef.value
1656 |   let box = terminalContainerRef.value
1657 |   let terminalWindow = terminalWindowRef.value
1658 | 
1659 |   let isDragging = false;
1660 |   let isResize = false;
1661 |   let resizeData = {
1662 |     minWidth: 270,
1663 |     minHeight: 180,
1664 |     type: '',
1665 |     boxX: 0,
1666 |     boxY: 0,
1667 |     boxWidth: 0,
1668 |     boxHeight: 0,
1669 |     cursorX: 0,
1670 |     cursorY: 0
1671 |   }
1672 | 
1673 |   const storeResizeData = (type: string, evt: MouseEvent) => {
1674 |     isResize = true
1675 |     terminalWindow.style['user-select'] = 'none'
1676 |     resizeData.type = type
1677 |     resizeData.cursorX = evt.clientX
1678 |     resizeData.cursorY = evt.clientY
1679 |     resizeData.boxX = box.offsetLeft
1680 |     resizeData.boxY = box.offsetTop
1681 |     resizeData.boxWidth = box.clientWidth
1682 |     resizeData.boxHeight = box.clientHeight
1683 |   }
1684 | 
1685 |   // _eventOn(dragArea, 'dragstart', (evt:DragEvent) => {
1686 |   // })
1687 |   //
1688 |   // _eventOn(dragArea, 'drag', (evt:DragEvent) => {
1689 |   // })
1690 | 
1691 |   _eventOn(dragArea, 'mousedown', (evt: MouseEvent) => {
1692 |     if (fullscreenState.value) {
1693 |       return
1694 |     }
1695 |     _onActive()
1696 |     mouseOffsetX = evt.clientX - box.offsetLeft;
1697 |     mouseOffsetY = evt.clientY - box.offsetTop;
1698 | 
1699 |     isDragging = true
1700 |   })
1701 | 
1702 |   _eventOn(resizeLTRef.value, 'mousedown', (evt: MouseEvent) => {
1703 |     storeResizeData('lt', evt)
1704 |   })
1705 |   _eventOn(resizeRTRef.value, 'mousedown', (evt: MouseEvent) => {
1706 |     storeResizeData('rt', evt)
1707 |   })
1708 |   _eventOn(resizeLBRef.value, 'mousedown', (evt: MouseEvent) => {
1709 |     storeResizeData('lb', evt)
1710 |   })
1711 |   _eventOn(resizeRBRef.value, 'mousedown', (evt: MouseEvent) => {
1712 |     storeResizeData('rb', evt)
1713 |   })
1714 | 
1715 |   _eventOn(document, 'mousemove', (evt: MouseEvent) => {
1716 |     if (isPinned.value || fullscreenState.value) {
1717 |       return
1718 |     }
1719 | 
1720 |     if (isDragging) {
1721 |       evt.preventDefault()
1722 |       window.getSelection().removeAllRanges()
1723 |       let moveX = evt.clientX - mouseOffsetX;
1724 |       let moveY = evt.clientY - mouseOffsetY;
1725 |       _dragging({
1726 |         x: moveX,
1727 |         y: moveY
1728 |       })
1729 |     } else if (isResize) {
1730 |       evt.preventDefault()
1731 |       window.getSelection().removeAllRanges()
1732 |       let cx = evt.clientX - resizeData.cursorX
1733 |       let cy = evt.clientY - resizeData.cursorY
1734 |       //  右下
1735 |       if (resizeData.type === 'rb') {
1736 |         cx = cx < 0 ? -Math.min(resizeData.boxWidth - resizeData.minWidth, -cx) : cx
1737 |         cy = cy < 0 ? -Math.min(resizeData.boxHeight - resizeData.minHeight, -cy) : cy
1738 | 
1739 |         containerStyleStore.value.width = (resizeData.boxWidth + cx) + 'px'
1740 |         containerStyleStore.value.height = (resizeData.boxHeight + cy) + 'px'
1741 |       }
1742 |       //  右上
1743 |       else if (resizeData.type === 'rt') {
1744 |         cx = cx < 0 ? -Math.min(resizeData.boxWidth - resizeData.minWidth, -cx) : cx
1745 |         cy = cy > 0 ? Math.min(resizeData.boxHeight - resizeData.minHeight, cy) : cy
1746 | 
1747 |         containerStyleStore.value.width = (resizeData.boxWidth + cx) + 'px'
1748 |         containerStyleStore.value.height = (resizeData.boxHeight - cy) + 'px'
1749 |         containerStyleStore.value.top = Math.max(0, resizeData.boxY + cy) + 'px'
1750 |       }
1751 |       //  左下
1752 |       else if (resizeData.type === 'lb') {
1753 |         cx = cx > 0 ? Math.min(resizeData.boxWidth - resizeData.minWidth, cx) : cx
1754 |         cy = cy < 0 ? -Math.min(resizeData.boxHeight - resizeData.minHeight, -cy) : cy
1755 | 
1756 |         containerStyleStore.value.width = (resizeData.boxWidth - cx) + 'px'
1757 |         containerStyleStore.value.height = (resizeData.boxHeight + cy) + 'px'
1758 |         containerStyleStore.value.left = Math.max(0, resizeData.boxX + cx) + 'px'
1759 |       }
1760 |       //  左上
1761 |       else if (resizeData.type === 'lt') {
1762 |         cx = cx > 0 ? Math.min(resizeData.boxWidth - resizeData.minWidth, cx) : cx
1763 |         cy = cy > 0 ? Math.min(resizeData.boxHeight - resizeData.minHeight, cy) : cy
1764 | 
1765 |         containerStyleStore.value.width = (resizeData.boxWidth - cx) + 'px'
1766 |         containerStyleStore.value.height = (resizeData.boxHeight - cy) + 'px'
1767 |         containerStyleStore.value.left = Math.max(0, resizeData.boxX + cx) + 'px'
1768 |         containerStyleStore.value.top = Math.max(0, resizeData.boxY + cy) + 'px'
1769 |       }
1770 |       _onResize()
1771 |     }
1772 |   })
1773 | 
1774 |   _eventOn(document, 'mouseup', () => {
1775 |     if (isDragging || isResize) {
1776 |       _onActive()
1777 |     }
1778 |     isDragging = false
1779 |     isResize = false
1780 |   })
1781 | }
1782 | 
1783 | const _dragging = (pos: Position) => {
1784 |   if (isPinned.value) {
1785 |     return
1786 |   }
1787 |   const x = pos.x
1788 |   const y = pos.y
1789 |   let clientWidth = document.body.clientWidth
1790 |   let clientHeight = document.body.clientHeight
1791 |   let container = terminalContainerRef.value
1792 | 
1793 |   let xVal: number, yVal: number
1794 |   if (x > clientWidth - container.clientWidth) {
1795 |     xVal = clientWidth - container.clientWidth
1796 |   } else {
1797 |     xVal = Math.max(0, x)
1798 |   }
1799 | 
1800 |   if (y > clientHeight - container.clientHeight) {
1801 |     yVal = clientHeight - container.clientHeight
1802 |   } else {
1803 |     yVal = Math.max(0, y)
1804 |   }
1805 | 
1806 |   if (props.dragConf) {
1807 |     props.dragConf.init = {
1808 |       x: xVal,
1809 |       y: yVal
1810 |     }
1811 |   }
1812 | 
1813 |   containerStyleStore.value.left = xVal + "px";
1814 |   containerStyleStore.value.top = yVal + "px";
1815 | 
1816 |   let position: Position = {x: xVal, y: yVal}
1817 |   emits('on-dragging', position, getName())
1818 | }
1819 | 
1820 | const _commandFormatter = (cmd: string): string => {
1821 |   if (props.commandFormatter) {
1822 |     return props.commandFormatter(cmd)
1823 |   }
1824 |   let splitsCode = []
1825 |   let splits = cmd.split(/\r\n|\n|\r/g)
1826 |   for (let c of splits) {
1827 |     splitsCode.push(_defaultMergedCommandFormatter(c))
1828 |   }
1829 |   return splitsCode.join("<br/>")
1830 | }
1831 | 
1832 | const _onAskInput = () => {
1833 |   if (ask.autoReview) {
1834 |     _pushMessage(ask.question + (ask.isPassword ? '*'.repeat(ask.input.length) : ask.input))
1835 |   }
1836 |   ask.question = null
1837 |   if (ask.callback) {
1838 |     ask.callback(ask.input)
1839 |   }
1840 | }
1841 | 
1842 | const _textEditorClose = (options: any) => {
1843 |   if (textEditor.open) {
1844 |     textEditor.open = false
1845 |     let content = textEditor.value
1846 |     textEditor.value = ''
1847 |     if (textEditor.onClose) {
1848 |       textEditor.onClose(content, options)
1849 |       textEditor.onClose = null
1850 |     }
1851 |     _focus(true)
1852 |     return content
1853 |   }
1854 | }
1855 | 
1856 | const _onActive = () => {
1857 |   emits('on-active', getName())
1858 | }
1859 | 
1860 | const _onInactive = () => {
1861 |   emits('on-inactive', getName())
1862 | }
1863 | 
1864 | const _getCommand = () => {
1865 |   return command.value
1866 | }
1867 | 
1868 | const _setCommand = (cmd: string) => {
1869 |   if (ask.open) {
1870 |     console.error("Cannot call 'setCommand' api in ask mode")
1871 |     return
1872 |   } else if (textEditor.open) {
1873 |     console.error("Cannot call 'setCommand' api in editor mode")
1874 |     return
1875 |   } else if (flash.open) {
1876 |     console.error("Cannot call 'setCommand' api in flash mode")
1877 |     return
1878 |   }
1879 |   if (typeof cmd === 'string') {
1880 |     command.value = cmd.trim()
1881 |     nextTick(() => {
1882 |       _resetCursorPos()
1883 |     })
1884 |   } else {
1885 |     console.warn("Type error, the parameter received by the 'setCommand' api is " + (typeof cmd) + ", expected string")
1886 |   }
1887 | }
1888 | 
1889 | const _closeGroupFold = (group: MessageGroup) => {
1890 |   if (props.enableFold && group.fold) {
1891 |     group.fold = false
1892 |   }
1893 | }
1894 | 
1895 | const _enableFold = (group: MessageGroup) => {
1896 |   return props.enableFold && group.tag !== 'init' && group.logs.length > 1 && group.logs[0].type === 'cmdLine'
1897 | }
1898 | 
1899 | const _switchAllFoldState = (fold: boolean) => {
1900 |   let count = 0;
1901 |   if (props.enableFold) {
1902 |     for (let group of terminalLog.value) {
1903 |       if (_enableFold(group) && group.fold !== fold) {
1904 |         group.fold = fold
1905 |         count++;
1906 |       }
1907 |     }
1908 |   } else {
1909 |     console.warn("Before using folding related functions, please set enable-fold to enable the folding function.")
1910 |   }
1911 |   return count
1912 | }
1913 | 
1914 | const _calculateTipsPos = () => {
1915 |   if (tips.open) {
1916 |     nextTick(() => {
1917 |       let cursorRect = terminalCursorRef.value.getBoundingClientRect()
1918 |       let containerRect = terminalContainerRef.value.getBoundingClientRect()
1919 |       let tipsRect = terminalCmdTipsRef.value.getBoundingClientRect()
1920 | 
1921 |       let cursorRelativeLeft = cursorRect.left - containerRect.left
1922 |       let cursorRelativeRight = containerRect.left + containerRect.width - cursorRect.left
1923 |       let cursorRelativeTop = cursorRect.top - containerRect.top
1924 |       let cursorRelativeBottom = containerRect.top + containerRect.height - cursorRect.top
1925 | 
1926 |       let containerPaddingLeft = props.enableFold ? WINDOW_STYLE.PADDING_LEFT_FOLD : WINDOW_STYLE.PADDING_LEFT
1927 | 
1928 |       //  tips默认在右下角展示
1929 |       let tipsRelativeTop = FONT_HEIGHT
1930 |       let tipsRelativeLeft = cursorRelativeLeft - containerPaddingLeft
1931 | 
1932 |       //  超右边界
1933 |       if (cursorRect.left + tipsRect.width > containerRect.left + containerRect.width) {
1934 |         //  按照可视区域更大的来展示
1935 |         if (cursorRelativeLeft > cursorRelativeRight) {
1936 |           tipsRelativeLeft -= (tipsRect.width - cursorConf.width)
1937 |         }
1938 |       }
1939 | 
1940 |       //  超下边界
1941 |       if (cursorRect.top + tipsRect.height > containerRect.top + containerRect.height) {
1942 |         //  按照可视区域更大的来展示
1943 |         if (cursorRelativeTop > cursorRelativeBottom) {
1944 |           tipsRelativeTop = -tipsRect.height
1945 |         }
1946 |       }
1947 | 
1948 |       tips.style.top = tipsRelativeTop
1949 |       tips.style.left = tipsRelativeLeft
1950 |       tips.style.opacity = 100
1951 |     })
1952 |   }
1953 | }
1954 | 
1955 | const _closeTips = (clearItems: boolean = true) => {
1956 |   tips.open = false
1957 |   if (clearItems) {
1958 |     tips.items = []
1959 |     tips.selectedIndex = 0
1960 |   }
1961 | }
1962 | 
1963 | const _updateTipsItems = (items: InputTipItem[], openTips: boolean = true) => {
1964 |   if (props.enableInputTips && items && items instanceof Array && items.length > 0) {
1965 |     tips.items = items
1966 |     tips.selectedIndex = 0
1967 |     if (openTips) {
1968 |       tips.style.opacity = 0
1969 |       tips.cursorIdx = terminalCmdInputRef.value.selectionStart
1970 |       tips.open = true
1971 |     } else {
1972 |       tips.open = false
1973 |     }
1974 |   } else {
1975 |     _closeTips(true)
1976 |   }
1977 | }
1978 | 
1979 | const _clickTips = (idx: number) => {
1980 |   if (idx === tips.selectedIndex) {
1981 |     _selectTips()
1982 |   } else {
1983 |     tips.selectedIndex = idx
1984 |   }
1985 | }
1986 | 
1987 | const _selectTips = () => {
1988 |   if (!tips.open) {
1989 |     return
1990 |   }
1991 |   let selectedItem = tips.items[tips.selectedIndex]
1992 |   if (props.inputTipsSelectHandler) {
1993 |     props.inputTipsSelectHandler(command.value, cursorConf.idx, selectedItem, (newCommand: string) => {
1994 |       if (newCommand && typeof newCommand === 'string') {
1995 |         command.value = newCommand
1996 |         _resetCursorPos()
1997 |         _jumpToBottom(true)
1998 |       } else {
1999 |         console.warn(`'tipsSelectHandler' returns an invalid result, the expected return value is string type, got ${typeof newCommand}.`)
2000 |       }
2001 |     })
2002 |     return
2003 |   }
2004 |   command.value = selectedItem.command.key
2005 |   _resetCursorPos()
2006 |   _jumpToBottom(true)
2007 | }
2008 | 
2009 | const _getElementInfo = (): TerminalElementInfo => {
2010 |   let windowRect = terminalWindowRef.value.getBoundingClientRect()
2011 |   let containerRect = terminalContainerRef.value.getBoundingClientRect()
2012 |   let hasScroll = terminalWindowRef.value.scrollHeight > terminalWindowRef.value.clientHeight
2013 |       || terminalWindowRef.value.offsetHeight > terminalWindowRef.value.clientHeight
2014 |   let clientWidth = windowRect.width - WINDOW_STYLE.PADDING_RIGHT
2015 |   if (hasScroll) {
2016 |     //  滚动条宽度 8px
2017 |     clientWidth -= 8
2018 |   }
2019 | 
2020 |   //  减去padding值
2021 |   if (props.enableFold) {
2022 |     clientWidth -= WINDOW_STYLE.PADDING_LEFT_FOLD
2023 |   } else {
2024 |     clientWidth -= WINDOW_STYLE.PADDING_LEFT
2025 |   }
2026 | 
2027 |   let clientHeight = windowRect.height - WINDOW_STYLE.PADDING_TOP - WINDOW_STYLE.PADDING_BOTTOM - headerHeight.value
2028 |   return {
2029 |     //  窗口所在位置
2030 |     pos: {
2031 |       x: containerRect.x,
2032 |       y: containerRect.y
2033 |     },
2034 |     screenWidth: containerRect.width,   //  窗口整体宽度
2035 |     screenHeight: containerRect.height, //  窗口整体高度
2036 |     clientWidth: clientWidth,           //  可显示内容范围高度
2037 |     clientHeight: clientHeight,    //  可显示内容范围高度
2038 |     charWidth: {
2039 |       en: byteLen.en,            //  单个英文字符宽度
2040 |       cn: byteLen.cn             //  单个中文字符宽度
2041 |     }
2042 |   }
2043 | }
2044 | 
2045 | const _onResize = _debounce(() => {
2046 |   emits('on-resize', _getElementInfo(), getName())
2047 | })
2048 | 
2049 | defineExpose({
2050 |   pushMessage: _pushMessage,
2051 |   fullscreen: _fullscreen,
2052 |   isFullscreen: (): boolean => {
2053 |     return fullscreenState.value
2054 |   },
2055 |   dragging: _dragging,
2056 |   execute: (cmd: string): any => {
2057 |     return api.execute(getName(), cmd)
2058 |   },
2059 |   focus: _focus,
2060 |   elementInfo: _getElementInfo,
2061 |   textEditorOpen: (options?: EditorSetting) => {
2062 |     return api.textEditorOpen(getName(), options)
2063 |   },
2064 |   textEditorClose: _textEditorClose,
2065 |   clearLog: _clearLog,
2066 |   getCommand: _getCommand,
2067 |   setCommand: _setCommand,
2068 |   switchAllFoldState: _switchAllFoldState,
2069 |   jumpToBottom: _jumpToBottom,
2070 |   getOutputs: (): MessageGroup[] => {
2071 |     return terminalLog.value
2072 |   }
2073 | })
2074 | 
2075 | </script>
2076 | 
2077 | <template>
2078 |   <div :class="'t-container ' + (isActive ? '' : 't-disable-select')"
2079 |        :t-data-key="_hash(getName())"
2080 |        :style="containerStyle"
2081 |        ref="terminalContainerRef">
2082 |     <div v-if="draggable">
2083 |       <div class="t-point t-point-lt" ref="resizeLTRef"></div>
2084 |       <div class="t-point t-point-rt" ref="resizeRTRef"></div>
2085 |       <div class="t-point t-point-lb" ref="resizeLBRef"></div>
2086 |       <div class="t-point t-point-rb" ref="resizeRBRef"></div>
2087 |     </div>
2088 | 
2089 |     <div class="terminal">
2090 |       <div class="t-header-container"
2091 |            ref="terminalHeaderRef"
2092 |            v-if="showHeader"
2093 |            :style="draggable ? 'cursor: move;' : ''"
2094 |            @dblclick="_fullscreen">
2095 |         <slot name="header">
2096 |           <t-header :title="title"
2097 |                     :pinned="isPinned"
2098 |                     :draggable="draggable"
2099 |                     :fullscreen-state="fullscreenState"
2100 |                     @on-click="_triggerClick"/>
2101 |         </slot>
2102 |       </div>
2103 |       <div class="t-window"
2104 |            :style="`
2105 |            ${showHeader ? `height:calc(100% - ${headerHeight}px);
2106 |            margin-top: ${headerHeight}px;` : 'height:100%'};
2107 |            padding:${WINDOW_STYLE.PADDING_TOP}px ${WINDOW_STYLE.PADDING_RIGHT}px ${WINDOW_STYLE.PADDING_BOTTOM}px ${enableFold ? WINDOW_STYLE.PADDING_LEFT_FOLD : WINDOW_STYLE.PADDING_LEFT}px;
2108 |            `"
2109 |            ref="terminalWindowRef"
2110 |            @click="_focus"
2111 |            @dblclick="_focus(true)">
2112 |         <div v-for="(group,groupIdx) in terminalLog"
2113 |              :key="groupIdx"
2114 |              :class="`
2115 |              t-log-box
2116 |              t-log-fold-container
2117 |              ${enableHoverStripe && group.logs.length > 1 ? 't-log-box-hover-script' : ''}
2118 |              ${group.fold ? 't-log-box-folded' : ''}
2119 |              `"
2120 |              :style="`margin-top:${lineSpace}px;`">
2121 |           <span v-if="_enableFold(group)">
2122 |             <slot name="folder" :group="group">
2123 |               <span class="t-log-fold-icon t-log-fold-icon-active"
2124 |                     v-if="group.fold"
2125 |                     @click="_closeGroupFold(group)">+</span>
2126 |               <span class="t-log-fold-icon" v-else @click="group.fold = true">-</span>
2127 |               <span class="t-log-fold-line" v-if="!group.fold"/>
2128 |             </slot>
2129 |           </span>
2130 |           <div v-for="(item,idx) in group.logs"
2131 |                :key="idx"
2132 |                :style="`margin-top:${lineSpace}px;`"
2133 |                @click="_closeGroupFold(group)">
2134 |             <span v-if="item.type === 'cmdLine'">
2135 |               <slot name="cmdLine" :item="item">
2136 |                 <span class="t-crude-font t-cmd-line t-cmd-line-content" v-html="item.content"></span>
2137 |               </slot>
2138 |             </span>
2139 |             <div v-else>
2140 |               <span v-if="item.type === 'normal'">
2141 |                 <slot name="normal" :message="item">
2142 |                   <t-viewer-normal :message="item"/>
2143 |                 </slot>
2144 |               </span>
2145 |               <div v-else-if="item.type === 'json'">
2146 |                 <slot name="json" :message="item">
2147 |                   <t-viewer-json :message="item" :idx="idx"/>
2148 |                 </slot>
2149 |               </div>
2150 |               <div v-else-if="item.type === 'code'">
2151 |                 <slot name="code" :message="item">
2152 |                   <t-viewer-code :message="item"/>
2153 |                 </slot>
2154 |               </div>
2155 |               <div v-else-if="item.type === 'table'">
2156 |                 <slot name="table" :message="item">
2157 |                   <t-viewer-table :message="item"/>
2158 |                 </slot>
2159 |               </div>
2160 |               <div v-else-if="item.type === 'html'">
2161 |                 <slot name="html" :message="item">
2162 |                   <div v-html="item.content"></div>
2163 |                 </slot>
2164 |               </div>
2165 |             </div>
2166 |           </div>
2167 |         </div>
2168 |         <div v-if="flash.open && flash.content" :style="`margin:${lineSpace}px 0;`">
2169 |           <slot name="flash" :content="flash.content">
2170 |             <div v-html="flash.content"></div>
2171 |           </slot>
2172 |         </div>
2173 |         <div v-if="ask.open && ask.question" :style="`margin:${lineSpace}px 0;`">
2174 |           <div v-html="ask.question" style="display: inline-block"></div>
2175 |           <input :type="ask.isPassword ? 'password' : 'text'"
2176 |                  ref="terminalAskInputRef"
2177 |                  v-model="ask.input"
2178 |                  class="t-ask-input"
2179 |                  autofocus
2180 |                  autocomplete="off"
2181 |                  auto-complete="new-password"
2182 |                  @keyup.enter="_onAskInput">
2183 |         </div>
2184 |         <p class="t-last-line t-crude-font t-cmd-line"
2185 |            ref="terminalInputBoxRef"
2186 |            v-show="showInputLine"
2187 |            :style="`margin-top:${lineSpace}px;`">
2188 |           <span class="t-prompt t-cmd-line-content" ref="terminalInputPromptRef">
2189 |             <span>{{ context }}</span>
2190 |             <span>{{ contextSuffix }}</span>
2191 |           </span><span class="t-cmd-line-content" v-html="_commandFormatter(command)"></span><span
2192 |             v-show="cursorConf.show"
2193 |             :class="`t-cursor t-disable-select t-cursor-${cursorStyle} ${enableCursorBlink ? 't-cursor-blink' : ''}`"
2194 |             ref="terminalCursorRef"
2195 |             :style="`width:${cursorConf.width}px;left:${cursorConf.left};top:${cursorConf.top};`">&nbsp;</span>
2196 |           <span class="t-cmd-tips"
2197 |                 v-if="tips.open"
2198 |                 :style="`top: ${tips.style.top}px;left: ${tips.style.left}px;opacity: ${tips.style.opacity};`"
2199 |                 ref="terminalCmdTipsRef">
2200 |             <span class="t-cmd-tips-items">
2201 |               <span v-for="(item,idx) in tips.items"
2202 |                     :key="idx"
2203 |                     @click="_clickTips(idx)"
2204 |                     :class="'t-cmd-tips-item ' + (idx === tips.selectedIndex ? 't-cmd-tips-item-active ' : ' ') + (idx === 0 ? 't-cmd-tips-item-first ' : ' ')"
2205 |               >
2206 |                 <span class="t-cmd-tips-content" v-html="item.content"></span>
2207 |                 <span class="t-cmd-tips-des" v-html="item.description"></span>
2208 |               </span>
2209 |             </span>
2210 |             <span class="t-cmd-tips-footer">
2211 |               Press <strong>Tab</strong> to choose the selected suggestion.
2212 |             </span>
2213 |           </span>
2214 |           <textarea autofocus
2215 |                     v-model="command"
2216 |                     class="t-cmd-input t-disable-select"
2217 |                     ref="terminalCmdInputRef"
2218 |                     autocomplete="off"
2219 |                     auto-complete="new-password"
2220 |                     @keydown="_onInputKeydown"
2221 |                     @keyup="_onInputKeyup"
2222 |                     @input="_onInput"
2223 |                     @compositionstart="_onCompositionstart"
2224 |                     @compositionend="_onCompositionend"
2225 |                     @focusin="cursorConf.show = true"
2226 |                     @keyup.up.exact="_inputKeyUp"
2227 |                     @keyup.down.exact="_inputKeyDown"
2228 |                     @keyup.enter="_inputEnter"/>
2229 |         </p>
2230 |       </div>
2231 |     </div>
2232 |     <div v-if="isEnableHelpBox">
2233 |       <slot name="helpBox" :showHeader="showHeader" :item="selectedTipCommand">
2234 |         <t-help-box ref="terminalHelpBoxRef"
2235 |                     :top="headerHeight + 10"
2236 |                     :content="selectedTipCommand"
2237 |                     v-show="tips.helpBox.open && !_screenType().xs"/>
2238 |       </slot>
2239 |     </div>
2240 | 
2241 |     <div class="t-text-editor-container" v-if="textEditor.open"
2242 |          :style="`${showHeader ? `height:calc(100% - ${headerHeight}px);margin-top: ${headerHeight}px;` : 'height:100%'}`">
2243 |       <slot name="textEditor" :data="textEditor">
2244 |         <t-editor :config="textEditor"
2245 |                   v-model="textEditor.value"
2246 |                   @close="_textEditorClose"
2247 |                   ref="terminalTextEditorRef"></t-editor>
2248 |       </slot>
2249 |     </div>
2250 | 
2251 |     <span class="t-flag t-crude-font t-disable-select">
2252 |       <span class="t-cmd-line-content t-disable-select" ref="terminalEnFlagRef">aaaaaaaaaa</span>
2253 |       <span class="t-cmd-line-content t-disable-select" ref="terminalCnFlagRef">你你你你你你你你你你</span>
2254 |     </span>
2255 |   </div>
2256 | </template>
2257 | 
2258 | <style scoped>
2259 | 
2260 | </style>
2261 | 


--------------------------------------------------------------------------------