opt 移除highlight和codemirror默认配置方式 #132 调整组件安装方式，引入更多配置项 #133

Author: tzfun

src/Terminal.vue

@@ -32,6 +32,7 @@ import {
   _getByteLen,
   _getClipboardText,
   _getSelection,
+  _hash,
   _html,
   _isEmpty,
   _isPad,
@@ -43,12 +44,11 @@ import {
   _parsePixelFromValue,
   _pointInRect,
   _screenType,
-  _hash,
 } from "~/common/util.ts";
-import api, {getOptions, register, rename, unregister} from "~/common/api";
+import api, {getConfiguration, register, rename, unregister} from "~/common/api";
 import {DEFAULT_COMMANDS, WINDOW_STYLE} from "~/common/configuration.ts";
 import {_parseANSI} from "~/ansi";
-import store from "~/common/store";
+import {getStore} from "~/common/store";
 import THeader from "~/components/THeader.vue";
 import TViewerNormal from "~/components/TViewerNormal.vue";
 import TViewerJson from "~/components/TViewerJson.vue";
@@ -704,14 +704,14 @@ const getThemeStyleId = (salt: string): string => {
  * @param theme
  */
 const setTheme = (theme: string) => {
-  let customThemes = getOptions().themes
-  let themeStyle
+  let customThemes = getConfiguration().themes
+  let themeStyle: string
   if (customThemes && customThemes[theme]) {
     themeStyle = customThemes[theme]
   } else if (theme === 'dark') {
-    themeStyle = themeDark
+    themeStyle = themeDark as string
   } else if (theme === 'light') {
-    themeStyle = themeLight
+    themeStyle = themeLight as string
   } else {
     console.warn("The specified terminal theme style was not found:", theme)
     return
@@ -751,7 +751,7 @@ const changeThemeFlag = (newNameKey: string, oldNameKey: string) => {
 
 const _clearLog = (clearHistory: boolean) => {
   if (clearHistory) {
-    store.clear(getName())
+    getStore().clear(getName())
   } else {
     terminalLog.value = [];
     logSize.value = 0;
@@ -1304,7 +1304,7 @@ const _jumpToBottom = (enforce: boolean = false) => {
 const _saveCurCommand = () => {
   let cmd = command.value = command.value.trim()
   if (cmd.length > 0) {
-    store.push(getName(), cmd)
+    getStore().push(getName(), cmd)
   }
 
   let group = _newTerminalLogGroup()
@@ -1455,21 +1455,21 @@ const _switchTipsSelectedIdx = (idx: number) => {
 }
 
 const _switchPreCmd = () => {
-  let cmdLog = store.getLog(getName())
-  let cmdIdx = store.getIdx(getName())
+  let cmdLog = getStore().getLog(getName())
+  let cmdIdx = getStore().getIdx(getName())
   if (cmdLog.length !== 0 && cmdIdx > 0) {
     cmdIdx -= 1;
     command.value = cmdLog[cmdIdx] ? cmdLog[cmdIdx] : '';
   }
   _resetCursorPos()
-  store.setIdx(getName(), cmdIdx)
+  getStore().setIdx(getName(), cmdIdx)
   _searchCmd()
   _jumpToBottom(true)
 }
 
 const _switchNextCmd = () => {
-  let cmdLog = store.getLog(getName())
-  let cmdIdx = store.getIdx(getName())
+  let cmdLog = getStore().getLog(getName())
+  let cmdIdx = getStore().getIdx(getName())
   if (cmdLog.length !== 0 && cmdIdx < cmdLog.length - 1) {
     cmdIdx += 1;
     command.value = cmdLog[cmdIdx] ? cmdLog[cmdIdx] : '';
@@ -1478,7 +1478,7 @@ const _switchNextCmd = () => {
     command.value = '';
   }
   _resetCursorPos()
-  store.setIdx(getName(), cmdIdx)
+  getStore().setIdx(getName(), cmdIdx)
   _searchCmd()
   _jumpToBottom(true)
 }

src/common/api/index.ts

@@ -1,10 +1,10 @@
-import {Options, TerminalApi, TerminalApiData, TerminalApiListenerFunc} from "~/types";
+import {TerminalApi, TerminalApiData, TerminalApiListenerFunc, TerminalConfiguration} from "~/types";
 
 const data: TerminalApiData = {
     pool: {},
-    options: {
-        highlight: null,
-        codemirror: null,
+    configuration: {
+        maxStoredCommandCountPerInstance: 100,
+        storeName: 'terminal',
         themes: {}
     }
 }
@@ -25,14 +25,6 @@ export function rename(newName: string, oldName: string, listener: TerminalApiLi
     register(newName, listener);
 }
 
-export function configHighlight(config: any) {
-    data.options.highlight = config
-}
-
-export function configCodemirror(config: any) {
-    data.options.codemirror = config
-}
-
 export function configTheme(theme: string, css: string) {
     let res = css.match(/^.*\{(.*)}\s*$/s)
     if (!res || res.length != 2) {
@@ -44,19 +36,28 @@ export function configTheme(theme: string, css: string) {
 }
         `)
     }
-    let themes = data.options.themes
+    let themes = data.configuration.themes
     if (!themes) {
-        data.options.themes = themes = {}
+        data.configuration.themes = themes = {}
     }
     themes[theme] = css
 }
 
-export function getOptions(): Options {
-    return data.options as Options
+export function configStoreName(name: string) {
+    data.configuration.storeName = name
+    console.debug("Configured storeName", name)
+}
+
+export function configMaxStoredCommandCountPerInstance(count: number) {
+    if (count <= 1) {
+        throw new Error("The value of 'maxStoredLogCountPerInstance' must be a valid positive number")
+    }
+    data.configuration.maxStoredCommandCountPerInstance = count
+    console.debug("Configured maxStoredCommandCountPerInstance", count)
 }
 
-export function setOptions(op: Options) {
-    data.options = {...op}
+export function getConfiguration(): TerminalConfiguration {
+    return data.configuration
 }
 
 export default new TerminalApi(data)

src/common/store/index.ts

@@ -1,3 +1,98 @@
-import {TerminalStore} from "~/types";
+import {CmdHistory} from "~/types";
+import {getConfiguration} from "~/common/api";
+import {ref} from "vue";
 
-export default new TerminalStore()
+const store = ref<TerminalStore>()
+
+export class TerminalStore {
+    storageKey: string
+    maxStoredCommandCountPerInstance: number
+    dataMap: Record<string, CmdHistory>
+
+    constructor(key: string, maxStoredCommandCountPerInstance: number) {
+        this.storageKey = key
+        this.maxStoredCommandCountPerInstance = maxStoredCommandCountPerInstance
+        let dataMapStr = window.localStorage.getItem(this.storageKey)
+        if (dataMapStr) {
+            this.dataMap = JSON.parse(dataMapStr)
+        } else {
+            this.dataMap = {}
+        }
+    }
+
+    push(name: string, cmd: string) {
+        let data = this.getData(name)
+        if (data.cmdLog == null) {
+            data.cmdLog = []
+        }
+        if (data.cmdLog.length === 0 || data.cmdLog[data.cmdLog.length - 1] !== cmd) {
+            data.cmdLog.push(cmd)
+
+            console.log(data.cmdLog.length, this.maxStoredCommandCountPerInstance)
+
+            if (data.cmdLog.length > this.maxStoredCommandCountPerInstance) {
+                data.cmdLog.splice(0, data.cmdLog.length - this.maxStoredCommandCountPerInstance)
+            }
+        }
+
+        data.cmdIdx = data.cmdLog.length
+        this.store()
+    }
+
+    store() {
+        window.localStorage.setItem(this.storageKey, JSON.stringify(this.dataMap))
+    }
+
+    getData(name: string): CmdHistory {
+        let data = this.dataMap[name]
+        if (data == null) {
+            data = {
+                cmdLog: [],
+                cmdIdx: 0
+            }
+            this.dataMap[name] = data
+        }
+        return data
+    }
+
+    getLog(name: string) {
+        let data = this.getData(name)
+        if (!data.cmdLog) {
+            data.cmdLog = []
+        }
+        return data.cmdLog
+    }
+
+    clear(name: string) {
+        let data = this.getData(name)
+        data.cmdLog = []
+        data.cmdIdx = 0
+        this.store()
+    }
+
+    clearAll() {
+        this.dataMap = {}
+        this.store()
+    }
+
+    getIdx(name: string) {
+        let data = this.getData(name)
+        return data.cmdIdx | 0
+    }
+
+    setIdx(name: string, idx: number) {
+        this.getData(name).cmdIdx = idx
+    }
+}
+
+export function initStore() {
+    const configuration = getConfiguration();
+    store.value = new TerminalStore(configuration.storeName, configuration.maxStoredCommandCountPerInstance)
+}
+
+export function getStore(): TerminalStore {
+    if (store.value) {
+        return store.value
+    }
+    throw new Error("The store must be initialized before reading")
+}

src/components/TViewerCode.vue

@@ -1,43 +1,16 @@
 <script setup lang="ts">
-import {computed, PropType} from "vue";
+import {PropType} from "vue";
 import {Message} from "~/types";
-import {getOptions} from "~/common/api";
 
 defineProps({
   message: Object as PropType<Message>
 })
 
-const getHighlight = computed(() => {
-  let options = getOptions()
-  if (options) {
-    return options.highlight
-  }
-})
-
-const getCodemirror = computed(() => {
-  let options = getOptions()
-  if (options) {
-    return options.codemirror
-  }
-})
-
 </script>
 
 <template>
-  <div class="t-code">
-    <div v-if="getHighlight" class="t-vue-highlight">
-      <highlightjs ref="highlightjs"
-                   autodetect
-                   :code="message.content"/>
-    </div>
-    <div v-else-if="getCodemirror" class="t-vue-codemirror">
-      <codemirror ref="codemirror"
-                  v-model="message.content"
-                  :options="getCodemirror"/>
-    </div>
-    <div v-else class="t-code-default">
-      <pre style="padding: 1em;margin: 0"><code style="font-size: 15px">{{ message.content }}</code></pre>
-    </div>
+  <div class="t-code t-code-default">
+    <pre style="padding: 1em;margin: 0"><code style="font-size: 15px">{{ message.content }}</code></pre>
   </div>
 </template>
 

src/index.ts

@@ -3,36 +3,34 @@ import './css/ansi.css'
 import './css/style.css'
 import 'vue-json-viewer/style.css'
 import type {App} from 'vue'
-import TerminalStore from "./common/store"
-import TerminalApi, {configCodemirror, configHighlight, configTheme, setOptions} from "./common/api"
+import TerminalApi, {configMaxStoredCommandCountPerInstance, configStoreName, configTheme} from "./common/api"
 import Terminal from "./Terminal.vue"
-import {Options, TerminalAsk, TerminalFlash} from "./types"
+import {TerminalAsk, TerminalFlash, VueWebTerminal} from "./types"
+import {getStore, initStore} from "~/common/store";
 
-const install = (app: App, options?: Options): void => {
-    if (options) {
-        setOptions(options)
-    }
+const install = (app: App): void => {
+    initStore()
     app.component(Terminal.__name as string, Terminal)
 }
 
-//  兼容老版本
-Terminal.install = install
+const createTerminal = (): VueWebTerminal => {
+    return {
+        install,
+        configTheme,
+        configStoreName,
+        configMaxStoredCommandCountPerInstance
+    }
+}
 
 export * from './types'
 
 export {
     Terminal,
-    TerminalStore,
     TerminalApi,
     TerminalAsk,
     TerminalFlash,
-    configHighlight,
-    configCodemirror,
-    configTheme
-}
-
-const VueWebTerminal = {
-    install
+    createTerminal,
+    getStore
 }
 
-export default VueWebTerminal
+export default Terminal