!3151 优化: 命令输入框尺寸自动适应

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}

src/UI/Components/commandLineInput/InputHint.tsx

@@ -1,6 +1,5 @@
 import { Icon } from '@blueprintjs/core';
 import hotkeys from 'hotkeys-js-ext';
-import { reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { end } from 'xaop';
@@ -16,7 +15,6 @@ import { CommandServer } from '../../../DatabaseServices/CommandServer';
 import { CameraControlState } from '../../../Editor/CameraControls';
 import { commandMachine } from '../../../Editor/CommandMachine';
 import { CommandState } from '../../../Editor/CommandState';
-import { AutoReSize } from '../../JsPlugin/InputAutoSize';
 import { CommandStore } from '../../Store/CommandStore';
 import { ConfigTagCommand } from '../Board/ConfigTagCommand';
 import { CommandInputHeight } from '../CommandInput/CommandInputUI';
@@ -52,12 +50,9 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
 {
     public declare state: InputHitState;
     private inputEl: HTMLInputElement;
+    private _INPUT_MIN_WIDTH = 50; // 输入框最小宽度
     private selectIndex: number = 0; //选择历史命令索引
     private isCNInput: boolean = false;
-    /** 更新输入框宽度 */
-    private _UpdateWidth: Function;
-    /** 销毁更新输入框宽度 */
-    private _RemoveUpdateWidth: Function;
     /** 移除监听输入框提示词 */
     private _RemoveReaction: Function;
     private coolTime = new CoolDownTime;
@@ -118,31 +113,13 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
         const topToolBar = document.getElementById("TopToolBar");
         this.setState({ topToolBarHeight: topToolBar?.clientHeight });
 
-        // 监听输入框提示词
-        this._RemoveReaction = reaction(() => this.props.cmdPrompt, (val, oldVal) => this.UpdateInputWidth());
     }
 
     /** 销毁组件时 */
     componentWillUnmount(): void
     {
-        if (this._RemoveUpdateWidth)
-            this._RemoveUpdateWidth();
-        if (this._RemoveReaction)
-            this._RemoveReaction();
     }
 
-    /** 更新输入框宽度(有无提示词时不同行为) */
-    UpdateInputWidth()
-    {
-        if (!this._UpdateWidth)
-            return;
-        // 在有提示词时，输入框宽度 = 文字内容
-        if (this.props.cmdPrompt !== "")
-            this._UpdateWidth();
-        // 在没提示词时，输入框宽度 = 默认
-        else
-            this.inputEl.style.width = "auto";
-    }
 
     // 处理input输入的命令,尝试感知
     public handleOnChangeIntelliSense(cmd: string)
@@ -430,7 +407,7 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                         })
                         }
                     </ul>
-                    <div style={{ display: "flex", flexDirection: "column" }}>
+                    <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
                         <div style={{ maxHeight: `calc(80vh - ${topToolBarHeight}px)`, overflowY: "scroll" }}>
                             {
                                 this.props.keyWordList.map((item, index: number) =>
@@ -453,12 +430,20 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                                 alignItems: "center"
                             }}>
                             <Icon icon="sort-asc" onClick={this.handleShowHistoryCommand} color={"#106ba3"} />
-                            <span className="hint">{this.props.cmdPrompt}
+                            <span className="hint" style={{
+                                width: "calc(100% - 20px)",
+                                display: "flex",
+                                flexDirection: "row",
+                                flexWrap: "wrap",
+                            }} ref={(el) => { }}>
+                                <>
+                                    {this.props.cmdPrompt.split("").map((item, index) => <span>{item}</span>)}
+                                </>
                                 <input
                                     id={CMD_INPUT_ID}
                                     disabled={CommandStore.GetInstance().disableInput}
                                     type="text"
-                                    style={{ flex: 1, minWidth: 50, height: CommandInputHeight, border: "none" }}
+                                    style={{ flex: 1, minWidth: this._INPUT_MIN_WIDTH, height: CommandInputHeight, border: "none" }}
                                     placeholder={this.props.cmdPrompt == "" ? "请输入命令:" : ""}
                                     autoComplete="off"
                                     onPaste={this.handlePaste}
@@ -484,14 +469,6 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                                     onChange={(e) =>
                                     {
                                         this.handleOnChangeIntelliSense(e.target.value);
-                                        // 输入框宽度随着输入内容变化
-                                        if (!this._UpdateWidth)
-                                        {
-                                            const { updateWidth, removeEvent } = AutoReSize(this.inputEl);
-                                            this._UpdateWidth = updateWidth;
-                                            this._RemoveUpdateWidth = removeEvent;
-                                        }
-                                        this.UpdateInputWidth();
                                     }}
                                     ref={el => { this.inputEl = el; }}
                                     onKeyDown={(e) =>

src/UI/JsPlugin/InputAutoSize.ts

@@ -32,7 +32,8 @@ function createGhostElement()
 /**
  * 自适应input的输入框大小,请设置好样式,并加入到dom节点后在调用该函数,如果样式更新,请重新注册.
  * @param element input元素
- * @param [options]
+ * @param [options] 配置项
+ * @property [options.minWidth] 设置最小宽度
  * @returns
  */
 export function AutoReSize(element: HTMLInputElement, options?: { minWidth: number; })