Skip to content

Commit 1ac8f1f

Browse files
det101det101
committed
add workspace router
1 parent 9c43ea2 commit 1ac8f1f

File tree

4 files changed

+320
-0
lines changed

4 files changed

+320
-0
lines changed

‎web/src/assets/styles/workspace.scss‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/*!
2+
* Copyright 2019 WeBank
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*
16+
*/
17+
@import './variables.scss';
18+
19+
.entry {
20+
font-size: 16px;
21+
height: 120px;
22+
line-height: 120px;
23+
background: #515a6e;
24+
margin: 10px 30px 10px 10px;
25+
color: #FFF;
26+
text-align: center;
27+
cursor: pointer;
28+
29+
&:hover {
30+
font-weight: 600;
31+
32+
.icon-blod {
33+
font-weight: 600;
34+
}
35+
}
36+
}
37+
38+
.no-data-bgc {
39+
font-size: 14px;
40+
position: absolute;
41+
top: 0;
42+
bottom: 40px;
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
justify-content: center;
47+
48+
.no-data-img {
49+
width: 200px;
50+
margin-top: 150px;
51+
}
52+
53+
.bg-text {
54+
width: 60%;
55+
text-align: left;
56+
display: block;
57+
line-height: 40px;
58+
59+
&.weight {
60+
margin-top: 10px;
61+
font-weight: bold;
62+
}
63+
64+
&.indent {
65+
text-indent: 2em;
66+
}
67+
}
68+
}
69+
70+
.icon-blod {
71+
margin-right: 2px;
72+
}
73+
74+
.sort-icon {
75+
margin-top: 10px;
76+
margin-right: 8%;
77+
float: right;
78+
color: #2d8cf0;
79+
cursor: pointer;
80+
}
81+
82+
.icon {
83+
margin-left: 5px;
84+
color: #2d8cf0;
85+
}
86+
87+
.header-search {
88+
padding: 0 35px;
89+
overflow: hidden;
90+
91+
.search-input {
92+
width: 200px;
93+
}
94+
}
95+
96+
.page-bgc {
97+
background-color: #f7f7f7;
98+
background: #fff;
99+
100+
.page-bgc-header {
101+
padding: 10px 25px 0;
102+
}
103+
104+
.header-title {
105+
font-size: 14px;
106+
font-weight: bold;
107+
padding-left: 5px;
108+
border-left: 3px solid $primary-color;
109+
}
110+
111+
.header-info {
112+
padding: 10px 0 10px 20px;
113+
114+
p {
115+
line-height: 24px;
116+
}
117+
}
118+
119+
}
120+
121+
.workspace-main {
122+
padding: 10px 25px;
123+
display: -webkit-box;
124+
display: flex;
125+
-webkit-box-pack: start;
126+
justify-content: flex-start;
127+
-webkit-box-align: start;
128+
align-items: flex-start;
129+
130+
.item-header {
131+
font-size: 14px;
132+
font-weight: bold;
133+
padding-left: 5px;
134+
border-left: 3px solid $primary-color;
135+
}
136+
137+
.left {
138+
flex: 1;
139+
box-shadow: 0 1px 6px rgba(0,0,0,.2);
140+
border-color: #eee;
141+
padding: 0;
142+
}
143+
144+
.right {
145+
margin-left: 25px;
146+
width: 500px;
147+
box-shadow: 0 1px 6px rgba(0,0,0,.2);
148+
border-color: #eee;
149+
padding: 0;
150+
}
151+
152+
.app-list {
153+
display: flex;
154+
155+
.app-item-wrap {
156+
display: flex;
157+
margin: 20px 10px 10px 50px;
158+
padding: 10px;
159+
cursor: pointer;
160+
161+
&:hover {
162+
box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
163+
border-radius: 4px;
164+
}
165+
166+
.label {
167+
margin-left: 10px;
168+
width: 110px;
169+
font-weight: 700;
170+
font-size: 14px;
171+
overflow: hidden;
172+
text-overflow: ellipsis;
173+
white-space: nowrap;
174+
line-height: 30px;
175+
height: 30px;
176+
}
177+
}
178+
}
179+
}
180+
181+
.app-list-tabs {
182+
flex: 1;
183+
// border: 1px solid #eee;
184+
padding: 20px;
185+
border-radius: 6px;
186+
margin-bottom: 20px;
187+
position: relative;
188+
-webkit-transition: all .2s ease-in-out;
189+
transition: all .2s ease-in-out;
190+
191+
&:hover {
192+
box-shadow: 0 2px 7px rgba(0,0,0,.15);
193+
border-color: transparent;
194+
position: relative;
195+
}
196+
}
197+
198+
.input-wrap {
199+
position: absolute;
200+
right: 20px;
201+
top: 20px;
202+
width: 200px;
203+
}
204+
205+
.radio-box .ivu-radio .ivu-radio-inner {
206+
border: 1px solid #2d8cf0;
207+
}

‎web/src/js/service/router.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,15 @@ const router = new VueRouter({
6565
},
6666
component: () => import('../view/workflow/index.vue'),
6767
},
68+
{
69+
path: 'workspace',
70+
name: 'workspace',
71+
meta: {
72+
title: 'Workspace',
73+
publicPage: true,
74+
},
75+
component: () => import('../view/workspace/index.vue'),
76+
},
6877
{
6978
path: 'commonIframe',
7079
name: 'commonIframe',

‎web/src/js/view/workspace/index.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<div class="page-bgc">
3+
<div class="page-bgc-header">
4+
<div class="header-info">
5+
<h1>{{$t('message.project.infoHeader')}}</h1>
6+
<p>{{$t('message.project.infoBodyFirstRow')}}</p>
7+
<p>{{$t('message.project.infoBodySecondRow')}}</p>
8+
</div>
9+
</div>
10+
11+
<div class="workspace-main">
12+
<Card class="left">
13+
<h3 class="item-header">
14+
<span>{{this.$t('message.console.sideNavList.function.name')}}</span>
15+
</h3>
16+
<div class="app-list">
17+
<div class="app-item-wrap">
18+
<!-- <i class="project-type-list-icon" :class="item.font"
19+
:style="{'color': item.color, 'font-size': item.iconSize || '30px'}"
20+
v-if="item.font"></i> -->
21+
22+
<i class="project-type-list-icon fi-exchange" style="color: rgb(102, 204, 153); font-size: 30px;"></i>
23+
<span class="label">进入脚本开发</span>
24+
</div>
25+
</div>
26+
</Card>
27+
28+
<Card class="right">
29+
<h3 class="item-header">
30+
<span>{{this.$t('message.console.sideNavList.function.name')}}</span>
31+
</h3>
32+
<div class="app-list">
33+
<div class="app-item-wrap">
34+
<i class="project-type-list-icon fi-exchange" style="color: rgb(102, 204, 153); font-size: 30px;"></i>
35+
<span class="label">进入脚本开发</span>
36+
</div>
37+
</div>
38+
</Card>
39+
</div>
40+
41+
<div class="workspace-main">
42+
<div class="app-list-tabs">
43+
<Tabs style="flex: 1;" active-key="key1">
44+
<Tab-pane label="标签一" key="key1">
45+
<Card class="right">
46+
<h3 class="item-header">
47+
<span>{{this.$t('message.console.sideNavList.function.name')}}</span>
48+
</h3>
49+
<div class="app-list">
50+
<div class="app-item-wrap">
51+
<i class="project-type-list-icon fi-exchange" style="color: rgb(102, 204, 153); font-size: 30px;"></i>
52+
<span class="label">进入脚本开发</span>
53+
</div>
54+
</div>
55+
</Card>
56+
</Tab-pane>
57+
<Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
58+
<Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
59+
</Tabs>
60+
61+
<div class="input-wrap">
62+
<i-input icon="ios-search" placeholder="请输入..." style="width: 200px"></i-input>
63+
</div>
64+
65+
</div>
66+
</div>
67+
68+
69+
</div>
70+
71+
</template>
72+
73+
<script>
74+
export default {
75+
76+
}
77+
</script>
78+
<style lang="scss" scoped src="../../../assets/styles/workspace.scss"></style>

‎web/vue.config.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,32 @@ const getVersion = () => {
3232
module.exports = {
3333
publicPath: './',
3434
outputDir: 'dist/dist',
35+
devServer: {
36+
port: 8091,
37+
open: true,
38+
disableHostCheck: true,
39+
overlay: {
40+
warnings: false,
41+
errors: true
42+
},
43+
proxy: { //代理转发
44+
'^/api/rest_j/v1': {
45+
target: 'http://192.168.9.180:8089', //后端服务地址
46+
ws: true,
47+
changeOrigin: true,
48+
pathRewrite: {
49+
'^/api/rest_j/v1': '/api/rest_j/v1'
50+
}
51+
},
52+
'^/ws/api': { //websocket
53+
target: 'ws://192.168.9.180:8089',
54+
ws: true,
55+
secure: false,
56+
// logLevel: 'debug',
57+
},
58+
}
59+
// after: require('./mock/mock-server.js')
60+
},
3561
chainWebpack: (config) => {
3662
if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'sandbox') {
3763
config.plugin('compress').use(FileManagerPlugin, [{

0 commit comments

Comments
 (0)