@easy_vscode/webview 1.6.9 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +18 -0
- package/index.tsx +26 -12
- package/package.json +9 -37
- package/.babelrc +0 -25
- package/es/assets/open-link.svg +0 -3
- package/es/assets/react-logo.svg +0 -7
- package/es/global.css +0 -100
- package/es/index.html +0 -26
- package/src/App.tsx +0 -30
- package/src/assets/open-link.svg +0 -3
- package/src/assets/react-logo.svg +0 -7
- package/src/common-styles/basic.ts +0 -71
- package/src/common-styles/descriptions.ts +0 -9
- package/src/common-styles/flexWrapper.ts +0 -44
- package/src/common-styles/table.ts +0 -72
- package/src/common-styles/tabs.ts +0 -18
- package/src/global.css +0 -100
- package/src/helpers/fetch.ts +0 -98
- package/src/index.html +0 -26
- package/webpack.webview.js +0 -137
package/index.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
|
|
3
|
+
export * from './src/helpers/callVscode'
|
|
4
|
+
|
|
5
|
+
export type WebviewComponents = Record<string, React.FC>
|
|
6
|
+
|
|
7
|
+
export interface WebviewRootProps {
|
|
8
|
+
components: WebviewComponents
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface RegisterWebviewOptions {
|
|
12
|
+
Root?: React.FC<WebviewRootProps>
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export declare function registerWebview(
|
|
16
|
+
webviewComponents: WebviewComponents,
|
|
17
|
+
options?: RegisterWebviewOptions
|
|
18
|
+
): void
|
package/index.tsx
CHANGED
|
@@ -1,20 +1,34 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
import { render } from 'react-dom'
|
|
3
|
-
import App from './src/App'
|
|
4
|
-
import i18n, { i18next } from '@easy_vscode/i18n'
|
|
5
3
|
|
|
6
4
|
export * from './src/helpers/callVscode'
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
export type WebviewComponents = Record<string, React.FC>
|
|
7
|
+
|
|
8
|
+
export interface WebviewRootProps {
|
|
9
|
+
components: WebviewComponents
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface RegisterWebviewOptions {
|
|
13
|
+
/** Root layout (e.g. Ant Design ConfigProvider). Default: mount selected view only. */
|
|
14
|
+
Root?: React.FC<WebviewRootProps>
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const NO_CURRENT_VIEW = '$currentView$'
|
|
18
|
+
|
|
19
|
+
const DefaultWebviewRoot: React.FC<WebviewRootProps> = ({ components }) => {
|
|
20
|
+
let currentView = (window as any).currentView
|
|
21
|
+
if (currentView === NO_CURRENT_VIEW) {
|
|
22
|
+
currentView = Object.keys(components)[0]
|
|
23
|
+
}
|
|
24
|
+
const CurrentComponent = components[currentView]
|
|
25
|
+
return CurrentComponent ? <CurrentComponent /> : null
|
|
10
26
|
}
|
|
11
27
|
|
|
12
|
-
export const registerWebview = function (
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
})
|
|
19
|
-
})
|
|
28
|
+
export const registerWebview = function (
|
|
29
|
+
webviewComponents: WebviewComponents,
|
|
30
|
+
options?: RegisterWebviewOptions
|
|
31
|
+
) {
|
|
32
|
+
const Root = options?.Root ?? DefaultWebviewRoot
|
|
33
|
+
render(<Root components={webviewComponents} />, document.getElementById('root'))
|
|
20
34
|
}
|
package/package.json
CHANGED
|
@@ -1,53 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@easy_vscode/webview",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "webview
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "Lightweight webview runtime: registerWebview, callVscode",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "zhangjian",
|
|
7
7
|
"main": "index.tsx",
|
|
8
|
+
"types": "index.d.ts",
|
|
8
9
|
"scripts": {
|
|
9
|
-
"check-type": "tsc --noEmit"
|
|
10
|
-
"lint-staged": "lint-staged",
|
|
11
|
-
"ui-build": "webpack --config webpack.webview.js --color --mode production",
|
|
12
|
-
"ui-dev": "webpack serve --config webpack.webview.js --color --progress --mode development",
|
|
13
|
-
"ui-watch": "webpack --config webpack.webview.js --watch --mode development"
|
|
14
|
-
},
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"@ant-design/icons": "^4.7.16",
|
|
17
|
-
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
18
|
-
"@babel/plugin-transform-runtime": "^7.18.10",
|
|
19
|
-
"@easy_vscode/i18n": "^1.2.7",
|
|
20
|
-
"antd": "^4.22.5",
|
|
21
|
-
"babel-loader": "^8.2.5",
|
|
22
|
-
"babel-plugin-import": "^1.13.5",
|
|
23
|
-
"babel-plugin-styled-components": "^2.0.7",
|
|
24
|
-
"clean-webpack-plugin": "^4.0.0",
|
|
25
|
-
"commander": "^9.4.0",
|
|
26
|
-
"css-loader": "^6.7.1",
|
|
27
|
-
"fork-ts-checker-webpack-plugin": "4.1.6",
|
|
28
|
-
"html-webpack-plugin": "^5.5.0",
|
|
29
|
-
"less-loader": "^11.0.0",
|
|
30
|
-
"mini-css-extract-plugin": "^2.6.1",
|
|
31
|
-
"react-hot-loader": "^4.13.0",
|
|
32
|
-
"style-loader": "^3.3.1",
|
|
33
|
-
"styled-components": "^5.3.5",
|
|
34
|
-
"terser-webpack-plugin": "^5.3.4",
|
|
35
|
-
"vscode": "^1.1.37",
|
|
36
|
-
"webpack": "^5.45.1",
|
|
37
|
-
"webpack-cli": "^4.7.2"
|
|
38
|
-
},
|
|
39
|
-
"devDependencies": {
|
|
40
|
-
"@types/react-router-dom": "^5.3.3",
|
|
41
|
-
"@types/styled-components": "^5.1.26",
|
|
42
|
-
"@types/vscode": "^1.70.0"
|
|
10
|
+
"check-type": "tsc --noEmit"
|
|
43
11
|
},
|
|
44
12
|
"peerDependencies": {
|
|
45
13
|
"react": ">=16.6.0",
|
|
46
14
|
"react-dom": ">=16.6.0"
|
|
47
15
|
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@types/vscode": "^1.70.0",
|
|
18
|
+
"typescript": "^4.3.5"
|
|
19
|
+
},
|
|
48
20
|
"publishConfig": {
|
|
49
21
|
"access": "public",
|
|
50
22
|
"registry": "https://registry.npmjs.org/"
|
|
51
23
|
},
|
|
52
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "f3b585804107bc72f4d9834f36dced2074a713da"
|
|
53
25
|
}
|
package/.babelrc
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"presets": [
|
|
3
|
-
"@babel/preset-env",
|
|
4
|
-
"@babel/preset-typescript",
|
|
5
|
-
"@babel/preset-react"
|
|
6
|
-
],
|
|
7
|
-
"plugins": [
|
|
8
|
-
"@babel/plugin-transform-runtime",
|
|
9
|
-
["@babel/plugin-proposal-decorators", { "legacy": true }],
|
|
10
|
-
["@babel/plugin-proposal-class-properties", { "loose" : true }],
|
|
11
|
-
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
|
|
12
|
-
["@babel/plugin-proposal-private-methods", { "loose": true }],
|
|
13
|
-
["babel-plugin-styled-components", { "ssr": false }],
|
|
14
|
-
"@babel/plugin-syntax-dynamic-import",
|
|
15
|
-
"react-hot-loader/babel",
|
|
16
|
-
[
|
|
17
|
-
"import",
|
|
18
|
-
{
|
|
19
|
-
"libraryName": "antd",
|
|
20
|
-
"style": true
|
|
21
|
-
}
|
|
22
|
-
]
|
|
23
|
-
],
|
|
24
|
-
"sourceType": "unambiguous"
|
|
25
|
-
}
|
package/es/assets/open-link.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M14.8085 9.21906C14.8559 9.13191 14.8821 9.03265 14.8845 8.93096V8.93096C14.8824 8.77265 14.8239 8.62164 14.7216 8.51083L10.8897 4.36945C10.6739 4.13741 10.3288 4.14279 10.119 4.38146C9.90916 4.62012 9.91402 5.0017 10.1298 5.23374L13.0716 8.40279H4.53938C4.23962 8.40279 3.99661 8.67151 3.99661 9.00299C3.99661 9.33447 4.23962 9.60319 4.53938 9.60319H12.9848L10.1298 12.7842C9.91702 13.0196 9.91702 13.4012 10.1298 13.6365C10.3427 13.8719 10.6877 13.8719 10.9006 13.6365L14.6239 9.48315C14.7072 9.41667 14.7713 9.32495 14.8085 9.21906L14.8085 9.21906ZM5.08214 16.8056H1.82556C1.5258 16.8056 1.28279 16.5369 1.28279 16.2054V1.8006V1.8006C1.28279 1.46912 1.5258 1.2004 1.82556 1.2004H5.08214C5.3819 1.2004 5.6249 0.93168 5.6249 0.600199C5.6249 0.268719 5.3819 0 5.08214 0H1.82556C0.926277 0 0.197266 0.806156 0.197266 1.8006V16.2054V16.2054C0.197266 17.1998 0.926277 18.006 1.82556 18.006H5.08214C5.3819 18.006 5.6249 17.7373 5.6249 17.4058C5.6249 17.0743 5.3819 16.8056 5.08214 16.8056Z" fill="currentColor" />
|
|
3
|
-
</svg>
|
package/es/assets/react-logo.svg
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<svg viewBox="-11.5 -10.23174 23 20.46348" color="white" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle fill="currentColor" r="2.05"/>
|
|
3
|
-
<g fill="none" stroke="currentColor">
|
|
4
|
-
<ellipse rx="11" ry="4.2"/>
|
|
5
|
-
<ellipse rx="11" ry="4.2" transform="matrix(.5 .8660254 -.8660254 .5 0 0)"/><ellipse rx="11" ry="4.2" transform="matrix(-.5 .8660254 -.8660254 -.5 0 0)"/>
|
|
6
|
-
</g>
|
|
7
|
-
</svg>
|
package/es/global.css
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
body {
|
|
2
|
-
background-color: #fff;
|
|
3
|
-
font-family: 'Roboto,PingFang SC';
|
|
4
|
-
font-size: 14px;
|
|
5
|
-
padding: 0;
|
|
6
|
-
margin: 0;
|
|
7
|
-
}
|
|
8
|
-
#root {
|
|
9
|
-
height: 100%;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* remove drawer horizontal split line */
|
|
13
|
-
.ant-drawer-wrapper-body .ant-drawer-header {
|
|
14
|
-
border-bottom: none;
|
|
15
|
-
padding: 16px 24px 8px;
|
|
16
|
-
}
|
|
17
|
-
.ant-drawer-wrapper-body .ant-drawer-footer {
|
|
18
|
-
border-top: none;
|
|
19
|
-
padding: 24px;
|
|
20
|
-
}
|
|
21
|
-
.ant-drawer-wrapper-body .ant-drawer-footer span {
|
|
22
|
-
font-weight: 500;
|
|
23
|
-
}
|
|
24
|
-
.ant-drawer-wrapper-body .ant-form-item-label > label {
|
|
25
|
-
font-size: 16px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* remove table columns split */
|
|
29
|
-
div
|
|
30
|
-
.ant-table-thead
|
|
31
|
-
> tr
|
|
32
|
-
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
|
33
|
-
background: none;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* change selected menu appearance */
|
|
37
|
-
div .ant-menu-inline .ant-menu-item::after {
|
|
38
|
-
border-right: none;
|
|
39
|
-
}
|
|
40
|
-
.ant-menu-item {
|
|
41
|
-
border-left: 3px solid rgba(0, 0, 0, 0);
|
|
42
|
-
}
|
|
43
|
-
.ant-menu-item-selected {
|
|
44
|
-
border-left: 3px solid #2673dd;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* sub menu bgcolor */
|
|
48
|
-
.ant-menu-submenu .ant-menu-sub.ant-menu-inline {
|
|
49
|
-
background: #fff;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
div .ant-tag {
|
|
53
|
-
line-height: 24px;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/* let it be coverd by Modal.confirm,error... */
|
|
57
|
-
div .ant-notification {
|
|
58
|
-
z-index: 800;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* change horizontal Form label margin right */
|
|
62
|
-
div .ant-form-horizontal .ant-form-item-label > label {
|
|
63
|
-
margin-right: 12px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* ui modal */
|
|
67
|
-
div .ant-modal-confirm-body .ant-modal-confirm-title {
|
|
68
|
-
font-size: 20px;
|
|
69
|
-
font-weight: 500;
|
|
70
|
-
}
|
|
71
|
-
div .ant-modal-confirm .ant-modal-body {
|
|
72
|
-
padding: 24px;
|
|
73
|
-
}
|
|
74
|
-
div .ant-modal-close-x {
|
|
75
|
-
width: 64px;
|
|
76
|
-
height: 64px;
|
|
77
|
-
line-height: 64px;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
div .ant-popover-inner-content {
|
|
81
|
-
padding: 24px;
|
|
82
|
-
}
|
|
83
|
-
div .ant-popover-title {
|
|
84
|
-
padding: 16px 24px 4px;
|
|
85
|
-
border-bottom: none;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
div .ant-tooltip {
|
|
89
|
-
max-width: none;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.ant-modal-header {
|
|
93
|
-
border-bottom: none;
|
|
94
|
-
}
|
|
95
|
-
.ant-modal-footer {
|
|
96
|
-
border-top: none;
|
|
97
|
-
}
|
|
98
|
-
.ant-modal-body {
|
|
99
|
-
padding: 12px 24px;
|
|
100
|
-
}
|
package/es/index.html
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
|
-
<meta http-equiv="Content-Security-Policy" content="
|
|
8
|
-
default-src 'self' https://*;
|
|
9
|
-
connect-src 'self' https://* wss://* ws:;
|
|
10
|
-
font-src 'self' https://* blob: data:;
|
|
11
|
-
frame-src 'self' https://* blob: data:;
|
|
12
|
-
media-src 'self' https://* blob: data:;
|
|
13
|
-
img-src 'self' https://* blob: data:;
|
|
14
|
-
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://* http://*;
|
|
15
|
-
style-src 'self' 'unsafe-inline' https://* blob: data: http://*;
|
|
16
|
-
"
|
|
17
|
-
/>
|
|
18
|
-
<title>vscode-infra-webview</title>
|
|
19
|
-
<script type="text/javascript"> window.currentView = '$currentView$' </script>
|
|
20
|
-
<script type="text/javascript"> window.vscodeEnv = $vscodeEnv$ </script>
|
|
21
|
-
<script type="text/javascript"> window.commandArgs = $commandArgs$ </script>
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
<div id="root"></div>
|
|
25
|
-
</body>
|
|
26
|
-
</html>
|
package/src/App.tsx
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
import { ConfigProvider } from 'antd'
|
|
3
|
-
import 'antd/dist/antd.css'
|
|
4
|
-
import './global.css'
|
|
5
|
-
|
|
6
|
-
const NO_CURRENT_VIEW = '$currentView$'
|
|
7
|
-
|
|
8
|
-
interface IAppProps{
|
|
9
|
-
components:Record<string, React.FunctionComponent>
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const App: React.FC<IAppProps> = ({components={}}:IAppProps)=> {
|
|
13
|
-
let currentView = (window as any).currentView
|
|
14
|
-
if(currentView === NO_CURRENT_VIEW) {
|
|
15
|
-
currentView = Object.keys(components)[0]
|
|
16
|
-
}
|
|
17
|
-
const CurrentComponent = components[currentView]
|
|
18
|
-
return (
|
|
19
|
-
<ConfigProvider
|
|
20
|
-
getPopupContainer={(triggerNode) => {
|
|
21
|
-
if (triggerNode) return triggerNode
|
|
22
|
-
return document.body
|
|
23
|
-
}}
|
|
24
|
-
>
|
|
25
|
-
<CurrentComponent />
|
|
26
|
-
</ConfigProvider>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export default App
|
package/src/assets/open-link.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M14.8085 9.21906C14.8559 9.13191 14.8821 9.03265 14.8845 8.93096V8.93096C14.8824 8.77265 14.8239 8.62164 14.7216 8.51083L10.8897 4.36945C10.6739 4.13741 10.3288 4.14279 10.119 4.38146C9.90916 4.62012 9.91402 5.0017 10.1298 5.23374L13.0716 8.40279H4.53938C4.23962 8.40279 3.99661 8.67151 3.99661 9.00299C3.99661 9.33447 4.23962 9.60319 4.53938 9.60319H12.9848L10.1298 12.7842C9.91702 13.0196 9.91702 13.4012 10.1298 13.6365C10.3427 13.8719 10.6877 13.8719 10.9006 13.6365L14.6239 9.48315C14.7072 9.41667 14.7713 9.32495 14.8085 9.21906L14.8085 9.21906ZM5.08214 16.8056H1.82556C1.5258 16.8056 1.28279 16.5369 1.28279 16.2054V1.8006V1.8006C1.28279 1.46912 1.5258 1.2004 1.82556 1.2004H5.08214C5.3819 1.2004 5.6249 0.93168 5.6249 0.600199C5.6249 0.268719 5.3819 0 5.08214 0H1.82556C0.926277 0 0.197266 0.806156 0.197266 1.8006V16.2054V16.2054C0.197266 17.1998 0.926277 18.006 1.82556 18.006H5.08214C5.3819 18.006 5.6249 17.7373 5.6249 17.4058C5.6249 17.0743 5.3819 16.8056 5.08214 16.8056Z" fill="currentColor" />
|
|
3
|
-
</svg>
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<svg viewBox="-11.5 -10.23174 23 20.46348" color="white" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle fill="currentColor" r="2.05"/>
|
|
3
|
-
<g fill="none" stroke="currentColor">
|
|
4
|
-
<ellipse rx="11" ry="4.2"/>
|
|
5
|
-
<ellipse rx="11" ry="4.2" transform="matrix(.5 .8660254 -.8660254 .5 0 0)"/><ellipse rx="11" ry="4.2" transform="matrix(-.5 .8660254 -.8660254 -.5 0 0)"/>
|
|
6
|
-
</g>
|
|
7
|
-
</svg>
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { Link } from 'react-router-dom'
|
|
2
|
-
import styled from 'styled-components'
|
|
3
|
-
import { Button } from 'antd'
|
|
4
|
-
|
|
5
|
-
export const StyledCommonContent = styled.div`
|
|
6
|
-
background-color: #fff;
|
|
7
|
-
padding: 24px;
|
|
8
|
-
// height: 100%;
|
|
9
|
-
margin-bottom: 16px;
|
|
10
|
-
`
|
|
11
|
-
|
|
12
|
-
export const StyledSuffix = styled.span`
|
|
13
|
-
font-size: 14px;
|
|
14
|
-
color: #999;
|
|
15
|
-
`
|
|
16
|
-
|
|
17
|
-
export const StyledLinkName = styled(Link)`
|
|
18
|
-
display: block;
|
|
19
|
-
line-height: 16px;
|
|
20
|
-
font-size: 14px;
|
|
21
|
-
font-weight: 500;
|
|
22
|
-
color: #2673dd;
|
|
23
|
-
text-decoration: underline;
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
`
|
|
26
|
-
|
|
27
|
-
export const StyledEllipsis = styled.div`
|
|
28
|
-
display: inline-block;
|
|
29
|
-
text-overflow: ellipsis;
|
|
30
|
-
overflow: hidden;
|
|
31
|
-
white-space: nowrap;
|
|
32
|
-
`
|
|
33
|
-
|
|
34
|
-
export const StyledTitle = styled.div`
|
|
35
|
-
font-weight: bold;
|
|
36
|
-
font-size: 26px;
|
|
37
|
-
line-height: 28px;
|
|
38
|
-
color: #333;
|
|
39
|
-
margin-bottom: 24px;
|
|
40
|
-
`
|
|
41
|
-
|
|
42
|
-
export const StyleTag = styled.span`
|
|
43
|
-
padding: 4px 8px;
|
|
44
|
-
border: 1px solid #e5e5e5;
|
|
45
|
-
border-radius: 2px;
|
|
46
|
-
background: #fafafa;
|
|
47
|
-
color: #333333;
|
|
48
|
-
font-size: 14px;
|
|
49
|
-
margin: 0 4px 4px 0;
|
|
50
|
-
display: inline-block;
|
|
51
|
-
`
|
|
52
|
-
|
|
53
|
-
export const StyledLinkButton = styled(Button)`
|
|
54
|
-
padding-left: 0;
|
|
55
|
-
`
|
|
56
|
-
|
|
57
|
-
export const StyledSubTitle = styled.div`
|
|
58
|
-
font-family: 'Roboto';
|
|
59
|
-
font-style: normal;
|
|
60
|
-
font-weight: 500;
|
|
61
|
-
font-size: 18px;
|
|
62
|
-
line-height: 20px;
|
|
63
|
-
color: #333;
|
|
64
|
-
margin-bottom: 32px;
|
|
65
|
-
`
|
|
66
|
-
|
|
67
|
-
export const StyledBlockTitle = styled.div`
|
|
68
|
-
font-weight: 500;
|
|
69
|
-
font-size: 18px;
|
|
70
|
-
margin-bottom: 24px;
|
|
71
|
-
`
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components'
|
|
2
|
-
|
|
3
|
-
export const StyledEndWrapper = styled.div`
|
|
4
|
-
width: 100%;
|
|
5
|
-
height: 100%;
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
justify-content: flex-end;
|
|
9
|
-
`
|
|
10
|
-
|
|
11
|
-
export const StyledCenterWrapper = styled.div`
|
|
12
|
-
width: 100%;
|
|
13
|
-
height: 100%;
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
`
|
|
18
|
-
|
|
19
|
-
export const StyledBetweenWrapper = styled.div`
|
|
20
|
-
width: 100%;
|
|
21
|
-
height: 100%;
|
|
22
|
-
display: flex;
|
|
23
|
-
align-items: center;
|
|
24
|
-
justify-content: space-between;
|
|
25
|
-
`
|
|
26
|
-
|
|
27
|
-
export const styledAroundWrapper = styled.div`
|
|
28
|
-
width: 100%;
|
|
29
|
-
height: 100%;
|
|
30
|
-
display: flex;
|
|
31
|
-
align-items: center;
|
|
32
|
-
justify-content: space-around;
|
|
33
|
-
`
|
|
34
|
-
|
|
35
|
-
export const StyledHorizonCenterWrapper = styled.div`
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
`
|
|
39
|
-
|
|
40
|
-
export const StyledFlexWrapper = styled.div`
|
|
41
|
-
width: 100%;
|
|
42
|
-
height: 100%;
|
|
43
|
-
display: flex;
|
|
44
|
-
`
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components'
|
|
2
|
-
import { Table as AntdTable, Input, DatePicker } from 'antd'
|
|
3
|
-
|
|
4
|
-
const { RangePicker } = DatePicker
|
|
5
|
-
|
|
6
|
-
export const Table = styled(AntdTable)`
|
|
7
|
-
.ant-table-container {
|
|
8
|
-
border: 1px solid #f0f0f0;
|
|
9
|
-
border-bottom: none;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.ant-table-thead {
|
|
13
|
-
height: 40px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.ant-table-thead > tr > th {
|
|
17
|
-
padding: 5px 15px;
|
|
18
|
-
font-weight: 400;
|
|
19
|
-
font-size: 14px;
|
|
20
|
-
color: #666;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.ant-table-tbody > tr .ant-table-wrapper:only-child .ant-table {
|
|
24
|
-
margin: 0;
|
|
25
|
-
|
|
26
|
-
.ant-table-tbody > tr:last-child > td {
|
|
27
|
-
border-bottom: 1px solid #f0f0f0;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.ant-table-tbody > tr > td {
|
|
32
|
-
color: #333;
|
|
33
|
-
padding: 16px 16px;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.ant-table-expanded-row > .ant-table-cell {
|
|
37
|
-
background: #fff;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.ant-table-column-sorters {
|
|
41
|
-
padding: 16px 0;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.ant-table {
|
|
45
|
-
position: relative;
|
|
46
|
-
z-index: 1;
|
|
47
|
-
}
|
|
48
|
-
`
|
|
49
|
-
|
|
50
|
-
export const IPAddress = styled.div`
|
|
51
|
-
white-space: nowrap;
|
|
52
|
-
font-size: 12px;
|
|
53
|
-
font-weight: 400;
|
|
54
|
-
line-height: 14px;
|
|
55
|
-
`
|
|
56
|
-
|
|
57
|
-
export const IPLabel = styled.span`
|
|
58
|
-
color: #b7b7b7;
|
|
59
|
-
`
|
|
60
|
-
|
|
61
|
-
export const StyledInput = styled(Input)`
|
|
62
|
-
width: 480px;
|
|
63
|
-
`
|
|
64
|
-
|
|
65
|
-
export const StyledRangePicker = styled(RangePicker)`
|
|
66
|
-
margin-left: 24px;
|
|
67
|
-
`
|
|
68
|
-
|
|
69
|
-
export const Header = styled.div`
|
|
70
|
-
display: flex;
|
|
71
|
-
margin-bottom: 24px;
|
|
72
|
-
`
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components'
|
|
2
|
-
import { Tabs as AntdTabs } from 'antd'
|
|
3
|
-
|
|
4
|
-
export const Tabs = styled(AntdTabs)`
|
|
5
|
-
.ant-tabs-nav {
|
|
6
|
-
margin: 0 0 24px 0;
|
|
7
|
-
line-height: 18px;
|
|
8
|
-
}
|
|
9
|
-
.ant-tabs-tab {
|
|
10
|
-
padding: 0 19px 16px 19px;
|
|
11
|
-
}
|
|
12
|
-
.ant-tabs-tab + .ant-tabs-tab {
|
|
13
|
-
margin: 0;
|
|
14
|
-
}
|
|
15
|
-
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn span {
|
|
16
|
-
color: #2673dd;
|
|
17
|
-
}
|
|
18
|
-
`
|
package/src/global.css
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
body {
|
|
2
|
-
background-color: #fff;
|
|
3
|
-
font-family: 'Roboto,PingFang SC';
|
|
4
|
-
font-size: 14px;
|
|
5
|
-
padding: 0;
|
|
6
|
-
margin: 0;
|
|
7
|
-
}
|
|
8
|
-
#root {
|
|
9
|
-
height: 100%;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* remove drawer horizontal split line */
|
|
13
|
-
.ant-drawer-wrapper-body .ant-drawer-header {
|
|
14
|
-
border-bottom: none;
|
|
15
|
-
padding: 16px 24px 8px;
|
|
16
|
-
}
|
|
17
|
-
.ant-drawer-wrapper-body .ant-drawer-footer {
|
|
18
|
-
border-top: none;
|
|
19
|
-
padding: 24px;
|
|
20
|
-
}
|
|
21
|
-
.ant-drawer-wrapper-body .ant-drawer-footer span {
|
|
22
|
-
font-weight: 500;
|
|
23
|
-
}
|
|
24
|
-
.ant-drawer-wrapper-body .ant-form-item-label > label {
|
|
25
|
-
font-size: 16px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* remove table columns split */
|
|
29
|
-
div
|
|
30
|
-
.ant-table-thead
|
|
31
|
-
> tr
|
|
32
|
-
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
|
33
|
-
background: none;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* change selected menu appearance */
|
|
37
|
-
div .ant-menu-inline .ant-menu-item::after {
|
|
38
|
-
border-right: none;
|
|
39
|
-
}
|
|
40
|
-
.ant-menu-item {
|
|
41
|
-
border-left: 3px solid rgba(0, 0, 0, 0);
|
|
42
|
-
}
|
|
43
|
-
.ant-menu-item-selected {
|
|
44
|
-
border-left: 3px solid #2673dd;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* sub menu bgcolor */
|
|
48
|
-
.ant-menu-submenu .ant-menu-sub.ant-menu-inline {
|
|
49
|
-
background: #fff;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
div .ant-tag {
|
|
53
|
-
line-height: 24px;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/* let it be coverd by Modal.confirm,error... */
|
|
57
|
-
div .ant-notification {
|
|
58
|
-
z-index: 800;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* change horizontal Form label margin right */
|
|
62
|
-
div .ant-form-horizontal .ant-form-item-label > label {
|
|
63
|
-
margin-right: 12px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* ui modal */
|
|
67
|
-
div .ant-modal-confirm-body .ant-modal-confirm-title {
|
|
68
|
-
font-size: 20px;
|
|
69
|
-
font-weight: 500;
|
|
70
|
-
}
|
|
71
|
-
div .ant-modal-confirm .ant-modal-body {
|
|
72
|
-
padding: 24px;
|
|
73
|
-
}
|
|
74
|
-
div .ant-modal-close-x {
|
|
75
|
-
width: 64px;
|
|
76
|
-
height: 64px;
|
|
77
|
-
line-height: 64px;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
div .ant-popover-inner-content {
|
|
81
|
-
padding: 24px;
|
|
82
|
-
}
|
|
83
|
-
div .ant-popover-title {
|
|
84
|
-
padding: 16px 24px 4px;
|
|
85
|
-
border-bottom: none;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
div .ant-tooltip {
|
|
89
|
-
max-width: none;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.ant-modal-header {
|
|
93
|
-
border-bottom: none;
|
|
94
|
-
}
|
|
95
|
-
.ant-modal-footer {
|
|
96
|
-
border-top: none;
|
|
97
|
-
}
|
|
98
|
-
.ant-modal-body {
|
|
99
|
-
padding: 12px 24px;
|
|
100
|
-
}
|
package/src/helpers/fetch.ts
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import axio from 'axios'
|
|
2
|
-
|
|
3
|
-
const STATUS_UNAUTH = 401
|
|
4
|
-
const STATUS_NOT_FOUND = 404
|
|
5
|
-
|
|
6
|
-
const axios = axio.create({
|
|
7
|
-
baseURL: '',
|
|
8
|
-
timeout: 15000,
|
|
9
|
-
headers: {
|
|
10
|
-
Accept: 'application/json',
|
|
11
|
-
'Content-Type': 'application/json;charset=utf-8'
|
|
12
|
-
}
|
|
13
|
-
})
|
|
14
|
-
axios.interceptors.request.use(
|
|
15
|
-
(config) => {
|
|
16
|
-
return config
|
|
17
|
-
},
|
|
18
|
-
(error) => Promise.reject(error)
|
|
19
|
-
)
|
|
20
|
-
axios.interceptors.response.use(
|
|
21
|
-
(res) => res,
|
|
22
|
-
(error) => {
|
|
23
|
-
if (error.response) {
|
|
24
|
-
if (error.response.status === STATUS_UNAUTH) {
|
|
25
|
-
// unauthorizedCb()
|
|
26
|
-
console.error('please login')
|
|
27
|
-
} else if (error.response.status === STATUS_NOT_FOUND) {
|
|
28
|
-
console.error('resource not found')
|
|
29
|
-
} else if (error.response.status >= 500) {
|
|
30
|
-
console.error('server error')
|
|
31
|
-
}
|
|
32
|
-
} else {
|
|
33
|
-
console.error('network error')
|
|
34
|
-
}
|
|
35
|
-
return Promise.reject(error)
|
|
36
|
-
}
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
interface IFetchParam {
|
|
40
|
-
server?: string
|
|
41
|
-
version?: string
|
|
42
|
-
resource?: string
|
|
43
|
-
payload?: any
|
|
44
|
-
params?: any
|
|
45
|
-
contentType?: string
|
|
46
|
-
method?: 'GET' | 'POST' | 'DELETE' | 'PATCH' | 'PUT'
|
|
47
|
-
headers?: any
|
|
48
|
-
credentials?: string
|
|
49
|
-
timeout?: number
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* fetch util
|
|
54
|
-
* @param {*} fetchParam
|
|
55
|
-
* @returns promise
|
|
56
|
-
*/
|
|
57
|
-
// const request = (url, method, params = {}, config) => {
|
|
58
|
-
const request = (fetchParam: IFetchParam): Promise<any> => {
|
|
59
|
-
const { resource, method = 'GET', params = {}, payload = {}, headers = {}, ...config } = fetchParam
|
|
60
|
-
const reqParams: any = {
|
|
61
|
-
url: resource,
|
|
62
|
-
method,
|
|
63
|
-
headers,
|
|
64
|
-
...config
|
|
65
|
-
}
|
|
66
|
-
reqParams.params = { env: 'test', ...params }
|
|
67
|
-
if (method.toUpperCase() !== 'GET') {
|
|
68
|
-
reqParams.data = payload
|
|
69
|
-
}
|
|
70
|
-
return new Promise((resolve, reject) => {
|
|
71
|
-
axios(reqParams)
|
|
72
|
-
.then((response: any) => {
|
|
73
|
-
const error = response.data?.error
|
|
74
|
-
if (error) {
|
|
75
|
-
reject(error)
|
|
76
|
-
}
|
|
77
|
-
resolve(response.data)
|
|
78
|
-
})
|
|
79
|
-
.catch((error) => {
|
|
80
|
-
reject(error.response && error.response.data)
|
|
81
|
-
console.error('fetch error', error)
|
|
82
|
-
})
|
|
83
|
-
})
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
export default request
|
|
87
|
-
|
|
88
|
-
export class HTTPError extends Error {
|
|
89
|
-
code: number
|
|
90
|
-
details: any
|
|
91
|
-
|
|
92
|
-
constructor(message: string, code: number, details: any) {
|
|
93
|
-
super(message)
|
|
94
|
-
this.message = message
|
|
95
|
-
this.code = code
|
|
96
|
-
this.details = details
|
|
97
|
-
}
|
|
98
|
-
}
|
package/src/index.html
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
|
-
<meta http-equiv="Content-Security-Policy" content="
|
|
8
|
-
default-src 'self' https://*;
|
|
9
|
-
connect-src 'self' https://* wss://* ws:;
|
|
10
|
-
font-src 'self' https://* blob: data:;
|
|
11
|
-
frame-src 'self' https://* blob: data:;
|
|
12
|
-
media-src 'self' https://* blob: data:;
|
|
13
|
-
img-src 'self' https://* blob: data:;
|
|
14
|
-
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://* http://*;
|
|
15
|
-
style-src 'self' 'unsafe-inline' https://* blob: data: http://*;
|
|
16
|
-
"
|
|
17
|
-
/>
|
|
18
|
-
<title>vscode-infra-webview</title>
|
|
19
|
-
<script type="text/javascript"> window.currentView = '$currentView$' </script>
|
|
20
|
-
<script type="text/javascript"> window.vscodeEnv = $vscodeEnv$ </script>
|
|
21
|
-
<script type="text/javascript"> window.commandArgs = $commandArgs$ </script>
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
<div id="root"></div>
|
|
25
|
-
</body>
|
|
26
|
-
</html>
|
package/webpack.webview.js
DELETED
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
|
|
2
|
-
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
|
|
3
|
-
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
4
|
-
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
5
|
-
const path = require('path')
|
|
6
|
-
const TerserPlugin = require('terser-webpack-plugin')
|
|
7
|
-
const webpack = require('webpack')
|
|
8
|
-
|
|
9
|
-
const cssUse = [MiniCssExtractPlugin.loader].concat('css-loader')
|
|
10
|
-
const cssUseDebug = ['style-loader', 'css-loader']
|
|
11
|
-
|
|
12
|
-
console.log('process.cwd():', process.cwd())
|
|
13
|
-
console.log('__dirname:', __dirname)
|
|
14
|
-
|
|
15
|
-
// const isProductionMode = argv.mode === 'production'
|
|
16
|
-
const isProductionMode = true
|
|
17
|
-
exports.default = {
|
|
18
|
-
target: 'web',
|
|
19
|
-
entry: {
|
|
20
|
-
// app: ['./src/webviewUI/src/index.tsx']
|
|
21
|
-
app: [path.resolve(__dirname, './src/index.tsx')]
|
|
22
|
-
},
|
|
23
|
-
output: {
|
|
24
|
-
path: path.resolve('./distWebview/'),
|
|
25
|
-
publicPath: '/'
|
|
26
|
-
},
|
|
27
|
-
optimization: {
|
|
28
|
-
chunkIds: 'named',
|
|
29
|
-
minimizer: [
|
|
30
|
-
new TerserPlugin({
|
|
31
|
-
parallel: true
|
|
32
|
-
})
|
|
33
|
-
]
|
|
34
|
-
},
|
|
35
|
-
module: {
|
|
36
|
-
rules: [
|
|
37
|
-
{
|
|
38
|
-
test: /\.(j|t)sx?$/,
|
|
39
|
-
use: {
|
|
40
|
-
loader: 'babel-loader',
|
|
41
|
-
options: {
|
|
42
|
-
cacheDirectory: true,
|
|
43
|
-
babelrc: true,
|
|
44
|
-
configFile: path.resolve(__dirname, './.babelrc')
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
test: /\.css$/,
|
|
50
|
-
use: isProductionMode ? cssUse : cssUseDebug
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
test: /\.less$/,
|
|
54
|
-
use: [
|
|
55
|
-
{ loader: 'style-loader' },
|
|
56
|
-
{ loader: 'css-loader' },
|
|
57
|
-
{
|
|
58
|
-
loader: 'less-loader',
|
|
59
|
-
options: {
|
|
60
|
-
lessOptions: {
|
|
61
|
-
modifyVars: {
|
|
62
|
-
'primary-color': '#2673DD',
|
|
63
|
-
'link-color': '#2673DD'
|
|
64
|
-
},
|
|
65
|
-
javascriptEnabled: true
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
]
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
|
73
|
-
use: [
|
|
74
|
-
{
|
|
75
|
-
loader: 'babel-loader'
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
loader: '@svgr/webpack',
|
|
79
|
-
options: {
|
|
80
|
-
babel: false,
|
|
81
|
-
icon: true
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
]
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
test: /\.(png|jpg|gif|woff2|svg?)$/,
|
|
88
|
-
use: [
|
|
89
|
-
{
|
|
90
|
-
loader: 'url-loader',
|
|
91
|
-
options: {
|
|
92
|
-
limit: 10000
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
]
|
|
96
|
-
}
|
|
97
|
-
]
|
|
98
|
-
},
|
|
99
|
-
resolve: {
|
|
100
|
-
extensions: ['.tsx', '.ts', '.js'],
|
|
101
|
-
modules: [path.resolve(__dirname, 'src'), 'node_modules']
|
|
102
|
-
},
|
|
103
|
-
plugins: [
|
|
104
|
-
new CleanWebpackPlugin(),
|
|
105
|
-
// !isProductionMode &&
|
|
106
|
-
new ForkTsCheckerWebpackPlugin({
|
|
107
|
-
reportFiles: ['src/**/*.{ts,tsx}']
|
|
108
|
-
}),
|
|
109
|
-
new HtmlWebpackPlugin({
|
|
110
|
-
template: path.resolve(__dirname, './src/index.html'),
|
|
111
|
-
favicon: path.resolve(__dirname, './src/favicon.ico'),
|
|
112
|
-
inject: true,
|
|
113
|
-
minify: {
|
|
114
|
-
html5: true,
|
|
115
|
-
minifyCSS: false,
|
|
116
|
-
minifyJS: false,
|
|
117
|
-
removeComments: false,
|
|
118
|
-
collapseWhitespace: false,
|
|
119
|
-
preserveLineBreaks: true
|
|
120
|
-
}
|
|
121
|
-
}),
|
|
122
|
-
new webpack.HotModuleReplacementPlugin(),
|
|
123
|
-
new MiniCssExtractPlugin({
|
|
124
|
-
filename: isProductionMode ? '[name].[hash].css' : '[name].css',
|
|
125
|
-
chunkFilename: isProductionMode ? '[id].[hash].css' : '[id].css'
|
|
126
|
-
})
|
|
127
|
-
],
|
|
128
|
-
devServer: {
|
|
129
|
-
historyApiFallback: {
|
|
130
|
-
disableDotRule: true
|
|
131
|
-
},
|
|
132
|
-
hot: true,
|
|
133
|
-
compress: true,
|
|
134
|
-
port: 5000
|
|
135
|
-
},
|
|
136
|
-
devtool: isProductionMode ? false : 'source-map'
|
|
137
|
-
}
|