清理 重构

.vscode/launch.json

@@ -5,7 +5,7 @@
             "type": "chrome",
             "request": "launch",
             "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8188",
+            "url": "http://localhost:7777",
             "webRoot": "${workspaceRoot}" //,
             // "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
         },
@@ -13,7 +13,7 @@
             "type": "chrome",
             "request": "attach",
             "name": "Attach to Chrome",
-            "port": 9222,
+            "port": 7777,
             "webRoot": "${workspaceRoot}"
         }
     ]

src/UI/Components/Command.tsx

@@ -6,14 +6,11 @@ import * as ReactDOM from "react-dom";
 import { CSSProperties } from 'react';
 import DevTools from 'mobx-react-devtools';
 import { CommandLineContainer } from "./CommandLineContainer";
+import { CommandLineInput } from './CommandLineInput';
 
 @inject("commandStore") @observer
 export class CommandComponent extends React.Component<{ commandStore?: CommandStore }, null>
 {
-    //
-    outputContainer: HTMLElement
-    commandList: HTMLElement
-    input: HTMLInputElement
     style: CSSProperties = {
         display: "block",       /* iframes are inline by default */
         background: "#000",
@@ -23,73 +20,17 @@ export class CommandComponent extends React.Component<{ commandStore?: CommandSt
         borderTopWidth: "5px",
         borderLeftWidth: "5px"
     }
-    constructor()
-    {
-        super()
-
-    }
-    componentDidMount()
-    {
-        this.props.commandStore.keyDownHandle = this.keyDownHandle;
-        this.props.commandStore.elInput = this.input;
-    }
-    componentDidUpdate()
-    {
-        this.outputContainer.scrollTop = this.commandList.offsetHeight;
-    }
     render()
     {
         return (
-            <div id="commands" className="win"
-                style={this.style}
-            >
+            <div id="commands" className="win" style={this.style} >
                 <div className="tool-caption">命令栏</div>
-                <div className="content panel"
-                    style={{ padding: 0 }}
-                >
+                <div className="content panel" style={{ padding: 0 }} >
                     <CommandLineContainer />
-                    <div className='terminal-input'>
-                        <input type="text" id="command-input"
-                            ref={input => { this.input = input }}
-                            placeholder="请输入命令:"
-                            onKeyDown={this.onInputKeyDown}
-                            onChange={this.onInputChange}
-                        />
-                    </div>
+                    <CommandLineInput />
                 </div>
                 <DevTools />
             </div >
         );
     }
-    onInputChange = (e: React.FormEvent<HTMLInputElement>) =>
-    {
-        if (e.currentTarget.value == " ") {
-            e.currentTarget.value = ""
-        }
-    }
-    onInputKeyDown = (e: React.KeyboardEvent<object>) =>
-    {
-        this.keyDownHandle(e.keyCode);
-    }
-
-    keyDownHandle = (keyCode: number) =>
-    {
-        let inpValue: string = this.input.value;
-        switch (keyCode) {
-            case 13:
-            case 32:
-                if (inpValue != "") {
-                    this.props.commandStore.Prompt(inpValue)
-                    this.input.value = ""
-                }
-                break;
-            case 27:
-                if (inpValue != "") {
-                    this.input.value = ""
-                    this.props.commandStore.Prompt('取消')
-                }
-            default:
-                break;
-        }
-    }
 }

src/UI/Components/CommandLineInput.tsx

@@ -0,0 +1,33 @@
+import * as React from "React";
+import { observer, inject } from 'mobx-react';
+import { commandStore, CommandStore } from '../Store/CommandStore';
+
+
+@inject("commandStore") @observer
+export class CommandLineInput extends React.Component<{ commandStore?: CommandStore }, {}>
+{
+    render()
+    {
+        const commandStore = this.props.commandStore;
+        return (
+            <div className='terminal-input'>
+                <input type="text" id="command-input"
+                    ref={o => { commandStore.elInput = o; }}
+                    onKeyDown={this.onInputKeyDown}
+                    onChange={this.onInputChange}
+                    placeholder="请输入命令:"
+                />
+            </div>
+        )
+    }
+    onInputChange = (e: React.FormEvent<HTMLInputElement>) =>
+    {
+        if (e.currentTarget.value == " ") {
+            e.currentTarget.value = ""
+        }
+    }
+    onInputKeyDown = (e: React.KeyboardEvent<object>) =>
+    {
+        this.props.commandStore.keyDownHandle(e.keyCode);
+    }
+}

src/UI/Components/Panel.tsx

@@ -1,23 +1,8 @@
 
 import * as React from "React";
-
-
-
 //顶部标题栏.
-
-export class TopPanel extends React.Component<{}, {}>{
-    constructor(props)
-    {
-        super(props);
-    }
-
-    componentDidMount()
-    {
-    }
-
-    componentWillUnmount()
-    {
-    }
+export class TopPanel extends React.Component<{}, {}>
+{
     render()
     {
         return (
@@ -26,10 +11,7 @@ export class TopPanel extends React.Component<{}, {}>{
                     webCAD
                     <sup>dev</sup>
                 </span>
-                {/*<Btn />
-                <Btn />
-                <Btn />
-                <Btn />*/}
+                {/*<Btn />*/}
             </div>
         );
     }

src/UI/Store/CommandStore.ts

@@ -12,14 +12,11 @@ export class CommandStore
         this.RegionKeyDownEvent();
     }
     @observable commands: Array<CommandMsg> = [];
-    @observable scrollTop: number = 0;
     //设置输入框为焦点
     isInputFocus: boolean;
     elInput: HTMLInputElement;
     outputContainer: HTMLElement;
     commandListContainer: HTMLElement;
-    keyDownHandle: (e: number) => void;
-
     index: number = 0
     Prompt(msg: string)
     {
@@ -49,6 +46,30 @@ export class CommandStore
             }
         })
     }
+
+    keyDownHandle = (keyCode: number) =>
+    {
+        let inpValue: string = this.elInput.value;
+        switch (keyCode)
+        {
+            case 13:
+            case 32:
+                if (inpValue != "")
+                {
+                    this.Prompt(inpValue)
+                    this.elInput.value = ""
+                }
+                break;
+            case 27:
+                if (inpValue != "")
+                {
+                    this.elInput.value = ""
+                    this.Prompt('取消')
+                }
+            default:
+                break;
+        }
+    }
 }
 
 function IsNumble(keyCode: number)

src/index.tsx

@@ -6,8 +6,8 @@ import "./UI/Css/style.less"
 import { LoadLayoutNotHead } from './UI/Layout/Layout';
 import { CommandComponent } from "./UI/Components/Command";
 import { App } from './UI/App';
-import { commandStore } from './UI/Store/CommandStore';
-import { autorun } from 'mobx';
+import { commandStore, CommandMsg } from './UI/Store/CommandStore';
+import { autorun, observable } from 'mobx';
 import { Provider } from "mobx-react";
 function createRootElement()
 {
@@ -47,4 +47,4 @@ window.onload = () =>
     )
 }
 
-window["tt"] = commandStore;
+window["t"] = commandStore;

webpack.config.js

@@ -56,7 +56,7 @@ module.exports = {
     devServer: {
         contentBase: path.join(__dirname, "dist"),
         compress: true,
-        port: 8188
+        port: 7777
     },
     plugins: [
         new webpack.DllReferencePlugin({