after_cmd 添加语法高亮。

package-lock.json

@@ -7642,6 +7642,12 @@
       "integrity": "sha1-+oPrAVBqsjfNwcjDsc6o3gEr8Ec=",
       "dev": true
     },
+    "react-codemirror": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-codemirror/-/react-codemirror-1.0.0.tgz",
+      "integrity": "sha1-kUZ7U7H12A2Rai/QtMetuFqQAbo=",
+      "dev": true
+    },
     "react-dom": {
       "version": "15.5.4",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.5.4.tgz",

package.json

@@ -83,6 +83,7 @@
     "ora": "^1.1.0",
     "ramda": "^0.24.1",
     "react": "^15.5.4",
+    "react-codemirror": "^1.0.0",
     "react-dom": "^15.5.4",
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
@@ -100,16 +101,29 @@
     "yargs": "^6.5.0"
   },
   "ava": {
-    "files": ["src/**/*.ava.js", "test/*.js", "!**/node_modules/**/*.*"],
-    "source": ["**/*.{js,jsx}", "!dist/**/*"],
+    "files": [
+      "src/**/*.ava.js",
+      "test/*.js",
+      "!**/node_modules/**/*.*"
+    ],
+    "source": [
+      "**/*.{js,jsx}",
+      "!dist/**/*"
+    ],
     "match": [],
     "concurrency": 5,
     "failFast": true,
     "tap": true,
     "powerAssert": false,
-    "require": ["babel-polyfill", "babel-register"],
+    "require": [
+      "babel-polyfill",
+      "babel-register"
+    ],
     "babel": {
-      "presets": ["latest", "stage-0"]
+      "presets": [
+        "latest",
+        "stage-0"
+      ]
     }
   }
-}
+}

ui/frame/frame.less

@@ -57,7 +57,7 @@
         }
 
         .inform {
-          color: #999;
+          color: #aaa;
           line-height: 20px;
           margin-bottom: 5px;
         }

ui/frame/preferences.jsx

@@ -13,6 +13,8 @@ import classnames from 'classnames'
 import Agent from '../Agent'
 import { version as current_version } from '../../app/version'
 import formatVersion from '../../app/libs/formatVersion'
+import CodeMirror from 'react-codemirror'
+import 'codemirror/mode/shell/shell'
 import './preferences.less'
 
 const RadioGroup = Radio.Group
@@ -156,18 +158,27 @@ export default class PreferencesPrompt extends React.Component {
 
   prefAfterCmd () {
     let {lang} = this.props
+    let options = {
+      mode: 'shell'
+    }
 
     return (
       <div className="ln">
         <div>{lang.pref_after_cmd}</div>
         <div>
           <div className="inform">{lang.pref_after_cmd_info}</div>
-          <Input
-            type="textarea"
-            rows={8}
-            defaultValue={this.state.after_cmd}
-            placeholder={lang.pref_after_cmd_placeholder}
-            onChange={(e) => this.updateAfterCmd(e.target.value)}
+          {/*<Input*/}
+            {/*type="textarea"*/}
+            {/*rows={8}*/}
+            {/*defaultValue={this.state.after_cmd}*/}
+            {/*placeholder={lang.pref_after_cmd_placeholder}*/}
+            {/*onChange={(e) => this.updateAfterCmd(e.target.value)}*/}
+          {/*/>*/}
+          <CodeMirror
+            className="pref-cm"
+            value={this.state.after_cmd}
+            onChange={v => this.updateAfterCmd(v)}
+            options={options}
           />
         </div>
       </div>
@@ -229,6 +240,7 @@ export default class PreferencesPrompt extends React.Component {
 
   body () {
     let {lang} = this.props
+    let height = 240
 
     return (
       <div ref="body">
@@ -246,18 +258,18 @@ export default class PreferencesPrompt extends React.Component {
         <Tabs
           defaultActiveKey="1"
           tabPosition="left"
-          style={{minHeight: 240}}
+          style={{minHeight: height}}
         >
-          <TabPane tab={lang.pref_tab_general} key="1">
+          <TabPane tab={lang.pref_tab_general} key="1" style={{height}}>
             {this.prefLanguage()}
             {this.prefChoiceMode()}
             {/*{this.prefAutoLaunch()}*/}
             {this.prefMinimizeAtLaunch()}
           </TabPane>
-          <TabPane tab={lang.pref_tab_custom_cmd} key="2">
+          <TabPane tab={lang.pref_tab_custom_cmd} key="2" style={{height}}>
             {this.prefAfterCmd()}
           </TabPane>
-          <TabPane tab={lang.pref_tab_advanced} key="3">
+          <TabPane tab={lang.pref_tab_advanced} key="3" style={{height}}>
             {this.prefAdvanced()}
           </TabPane>
         </Tabs>

ui/frame/preferences.less

@@ -25,4 +25,15 @@
       }
     }
   }
+
+  .pref-cm {
+    border: 1px solid #d9d9d9;
+    width: 95%;
+    box-sizing: border-box;
+
+    .CodeMirror {
+      height: 160px;
+      line-height: 20px;
+    }
+  }
 }