Merge pull request #331 from alibaba/web-ui-enhance

Web ui enhance
This commit is contained in:
Otto Mao 2018-02-09 16:47:00 +08:00 committed by GitHub
commit 11e68100a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 37 deletions

View File

@ -44,7 +44,7 @@ const getErrorResponse = (error, fullUrl) => {
header: {
'Content-Type': 'text/html; charset=utf-8',
'Proxy-Error': true,
'Proxy-Error-Message': error || 'null'
'Proxy-Error-Message': error ? JSON.stringify(error) : 'null'
},
body: requestErrorHandler.getErrorContent(error, fullUrl)
};

View File

@ -37,6 +37,7 @@
"qrcode-npm": "0.0.3",
"request": "^2.74.0",
"stream-throttle": "^0.1.3",
"svg-inline-react": "^1.0.2",
"whatwg-fetch": "^1.0.0",
"ws": "^2.2.0"
},
@ -60,7 +61,7 @@
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^1.0.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.9.0",
"https-proxy-agent": "^1.0.0",
"jasmine": "^2.5.3",
@ -88,9 +89,8 @@
"stream-equal": "0.1.8",
"style-loader": "^0.13.1",
"svg-inline-loader": "^0.7.1",
"svg-inline-react": "^1.0.2",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack": "^3.10.0",
"worker-loader": "^0.7.1"
},
"scripts": {
@ -99,8 +99,8 @@
"lint": "eslint .",
"testserver": "node test/server/startServer.js",
"testOutWeb": "jasmine test/spec_outweb/test_realweb_spec.js",
"buildweb": "NODE_ENV=production webpack --config web/webpack.config.js --process --colors",
"webserver": "NODE_ENV=test webpack --config web/webpack.config.js --process --colors --watch",
"buildweb": "NODE_ENV=production webpack --config web/webpack.config.js --colors",
"webserver": "NODE_ENV=test webpack --config web/webpack.config.js --colors --watch",
"doc:serve": "node build_scripts/prebuild-doc.js && gitbook serve ./docs-src ./docs --log debug",
"doc:build": "./build_scripts/build-doc-site.sh"
},

5
web/postcss.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('autoprefixer')
]
}

View File

@ -208,7 +208,7 @@ class HeaderMenu extends React.Component {
onClick={this.stopRecording}
>
<div className={Style.filterIcon}>
<InlineSVG src={require('svg-inline!assets/stop.svg')} />
<InlineSVG src={require('svg-inline-loader!assets/stop.svg')} />
</div>
<span>Stop</span>
</a>
@ -221,7 +221,7 @@ class HeaderMenu extends React.Component {
onClick={this.resumeRecording}
>
<div className={Style.stopIcon}>
<InlineSVG src={require('svg-inline!assets/play.svg')} />
<InlineSVG src={require('svg-inline-loader!assets/play.svg')} />
</div>
<span>Resume</span>
</a>
@ -234,7 +234,7 @@ class HeaderMenu extends React.Component {
onClick={this.showFilter}
>
<div className={Style.stopIcon}>
<InlineSVG src={require('svg-inline!assets/filter.svg')} />
<InlineSVG src={require('svg-inline-loader!assets/filter.svg')} />
</div>
<span>Filter</span>
</a>
@ -250,7 +250,7 @@ class HeaderMenu extends React.Component {
onClick={this.clearAllRecord}
title="Ctrl + X"
>
<InlineSVG src={require('svg-inline!assets/clear.svg')} />
<InlineSVG src={require('svg-inline-loader!assets/clear.svg')} />
<span>Clear</span>
</a>
{inAppMode ? filterMenu : null}
@ -269,7 +269,7 @@ class HeaderMenu extends React.Component {
href="javascript:void(0)"
>
<div className={Style.tipIcon} >
<InlineSVG src={require('svg-inline!assets/tip.svg')} />
<InlineSVG src={require('svg-inline-loader!assets/tip.svg')} />
</div>
<span>Proxy Info</span>
</a>

View File

@ -93,7 +93,7 @@ class LeftMenu extends React.Component {
title="Only show the filtered result"
>
<span className={Style.filterIcon}>
<InlineSVG src={require('svg-inline!assets/filter.svg')} />
<InlineSVG src={require('svg-inline-loader!assets/filter.svg')} />
</span>
<span>Filter</span>
</a>
@ -105,7 +105,7 @@ class LeftMenu extends React.Component {
title="Download the root CA to the computer and your phone"
>
<span className={Style.downloadIcon}>
<InlineSVG src={require('svg-inline!assets/download.svg')} />
<InlineSVG src={require('svg-inline-loader!assets/download.svg')} />
</span>
<span>RootCA</span>
</a>

View File

@ -3,6 +3,8 @@ const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const extractCss = new ExtractTextPlugin('[name].css', {
disable: false,
allChunks: true
@ -22,73 +24,91 @@ module.exports = {
filename: 'main.js'
},
resolve: {
root: path.join(__dirname, 'src'),
extensions: ['', '.js', '.jsx']
modules: [
'node_modules',
path.join(__dirname, 'src')
],
extensions: ['.', '.js', '.jsx']
},
module: {
loaders: [{
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-0']
}
},
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-0', 'react'],
plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: true }]]
plugins: [['import', { libraryName: 'antd', style: true }]]
}
}
},
{
test: function (filePath) {
return (/antd\/.*\.less$/.test(filePath) || /\.global\.less$/.test(filePath));
},
loader: ExtractTextPlugin.extract('css!postcss!less')
use: ExtractTextPlugin.extract({use: 'css-loader!postcss-loader!less-loader'})
},
{
test: function (filePath) {
return (/\.less$/.test(filePath) && !/\.global\.less$/.test(filePath) && !/antd\/.*\.less$/.test(filePath));
},
loader: ExtractTextPlugin.extract('css?modules&localIdentName=[local]___[hash:base64:5]!postcss!less')
use: ExtractTextPlugin.extract({use: 'css-loader?modules&localIdentName=[local]___[hash:base64:5]!postcss-loader!less-loader'})
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css')
use: ExtractTextPlugin.extract({use:'css-loader'})
},
{
test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/png'
use: {
loader: 'url-loader?limit=10000&mimetype=image/png'
}
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
use: {
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
use: {
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
use: {
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
use: {
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
}
},
{
test: /font\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
use: {
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
}]
},
postcss: function () {
return [autoprefixer];
},
plugins: [
extractCss,
defineProperty
]
defineProperty,
new UglifyJsPlugin()
],
stats: {
children: false
}
};