Skip to content

Commit 34d22f7

Browse files
author
奇淼（piexlmax
authored
调整为按需加载，element样式调整为皮肤模式，不再使用全局变量覆盖。 (flipped-aurora#1349)
* 调整element为自动按需引入，减少打包体积。 * 调整element样式变更为变量模式不再使用全局css覆盖 * 修改element自动化模板适配element皮肤变量模式 --------- Co-authored-by: piexlmax<303176530@qq.com>
1 parent 6213f03 commit 34d22f7

File tree

31 files changed

+184
-289
lines changed

31 files changed

+184
-289
lines changed

‎server/resource/autocode_template/web/form.vue.tpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
</el-form-item>
3434
{{- end }}
3535
<el-form-item>
36-
<el-button size="small" type="primary" @click="save">保存</el-button>
37-
<el-button size="small" type="primary" @click="back">返回</el-button>
36+
<el-button type="primary" @click="save">保存</el-button>
37+
<el-button type="primary" @click="back">返回</el-button>
3838
</el-form-item>
3939
</el-form>
4040
</div>

‎server/resource/autocode_template/web/table.vue.tpl

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -60,22 +60,22 @@
6060

6161
</el-form-item>{{ end }}{{ end }}{{ end }}
6262
<el-form-item>
63-
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
64-
<el-button size="small" icon="refresh" @click="onReset">重置</el-button>
63+
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
64+
<el-button icon="refresh" @click="onReset">重置</el-button>
6565
</el-form-item>
6666
</el-form>
6767
</div>
6868
<div class="gva-table-box">
6969
<div class="gva-btn-list">
70-
<el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>
70+
<el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
7171
<el-popover v-model:visible="deleteVisible" placement="top" width="160">
7272
<p>确定要删除吗？</p>
7373
<div style="text-align: right; margin-top: 8px;">
74-
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
75-
<el-button size="small" type="primary" @click="onDelete">确定</el-button>
74+
<el-button type="primary" link @click="deleteVisible = false">取消</el-button>
75+
<el-button type="primary" @click="onDelete">确定</el-button>
7676
</div>
7777
<template #reference>
78-
<el-button icon="delete" size="small" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
78+
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
7979
</template>
8080
</el-popover>
8181
</div>
@@ -115,8 +115,8 @@
115115
{{- end }}
116116
<el-table-column align="left" label="按钮组">
117117
<template #default="scope">
118-
<el-button type="primary" link icon="edit" size="small" class="table-button" @click="update{{.StructName}}Func(scope.row)">变更</el-button>
119-
<el-button type="primary" link icon="delete" size="small" @click="deleteRow(scope.row)">删除</el-button>
118+
<el-button type="primary" link icon="edit" class="table-button" @click="update{{.StructName}}Func(scope.row)">变更</el-button>
119+
<el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
120120
</template>
121121
</el-table-column>
122122
</el-table>
@@ -167,8 +167,8 @@
167167
</el-form>
168168
<template #footer>
169169
<div class="dialog-footer">
170-
<el-button size="small" @click="closeDialog">取 消</el-button>
171-
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
170+
<el-button @click="closeDialog">取 消</el-button>
171+
<el-button type="primary" @click="enterDialog">确 定</el-button>
172172
</div>
173173
</template>
174174
</el-dialog>

‎web/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"axios": "^0.19.2",
1515
"core-js": "^3.6.5",
1616
"echarts": "5.3.2",
17-
"element-plus": "2.2.9",
17+
"element-plus": "2.2.30",
1818
"highlight.js": "^10.6.0",
1919
"marked": "^2.0.0",
2020
"mitt": "^3.0.0",
@@ -45,8 +45,10 @@
4545
"eslint-plugin-vue": "^7.0.0",
4646
"sass": "^1.54.0",
4747
"terser": "^5.4.0",
48+
"unplugin-auto-import": "^0.14.2",
49+
"unplugin-vue-components": "^0.23.0",
4850
"vite": "^3.0.1",
4951
"vite-plugin-banner": "^0.1.3",
5052
"vite-plugin-importer": "^0.2.5"
5153
}
52-
}
54+
}

‎web/src/App.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ export default {
1212

1313
<style lang="scss">
1414
// 引入初始化样式
15-
@import '@/style/main.scss';
16-
@import '@/style/base.scss';
17-
@import '@/style/mobile.scss';
1815
#app {
1916
background: #eee;
2017
height: 100vh;

‎web/src/components/chooseImg/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</el-form-item>
2323

2424
<el-form-item>
25-
<el-button size="small" type="primary" icon="search" @click="open">查询</el-button>
25+
<el-button type="primary" icon="search" @click="open">查询</el-button>
2626
</el-form-item>
2727
</el-form>
2828
</div>

‎web/src/components/upload/common.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
:show-file-list="false"
1010
class="upload-btn"
1111
>
12-
<el-button size="small" type="primary">普通上传</el-button>
12+
<el-button type="primary">普通上传</el-button>
1313
</el-upload>
1414
</div>
1515
</template>

‎web/src/components/upload/image.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
:before-upload="beforeImageUpload"
1010
:multiple="false"
1111
>
12-
<el-button size="small" type="primary">压缩上传</el-button>
12+
<el-button type="primary">压缩上传</el-button>
1313
</el-upload>
1414
</div>
1515
</template>

‎web/src/main.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
import { createApp } from 'vue'
2-
import 'element-plus/dist/index.css'
3-
import './style/element_visiable.scss'
4-
import ElementPlus from 'element-plus'
5-
import zhCn from 'element-plus/es/locale/lang/zh-cn'
62
// 引入gin-vue-admin前端初始化相关内容
73
import './core/gin-vue-admin'
84
// 引入封装的router
@@ -13,6 +9,10 @@ import auth from '@/directive/auth'
139
import { store } from '@/pinia'
1410
import App from './App.vue'
1511
import { initDom } from './utils/positionToCode'
12+
13+
import 'element-plus/theme-chalk/src/message.scss'
14+
import './style/element_visiable.scss'
15+
1616
initDom()
1717
/**
1818
* @description 导入加载进度条，防止首屏加载时间过长，用户等待
@@ -35,7 +35,6 @@ app
3535
.use(store)
3636
.use(auth)
3737
.use(router)
38-
.use(ElementPlus, { locale: zhCn })
3938
.mount('#app')
4039

4140
export default app

‎web/src/style/element/index.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
2+
$colors: (
3+
'primary': (
4+
'base': #4d70ff,
5+
),
6+
)
7+
);

‎web/src/style/element_visiable.scss

Lines changed: 5 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
/* 改变主题色变量 */
1+
@import '@/style/main.scss';
2+
@import '@/style/base.scss';
3+
@import '@/style/mobile.scss';
24

35
#app {
46
.el-button {
@@ -7,10 +9,6 @@
79
}
810
}
911

10-
.el-dialog {
11-
border-radius: 2px;
12-
}
13-
1412
::-webkit-scrollbar-track-piece {
1513
background-color: #f8f8f8;
1614
}
@@ -31,57 +29,20 @@
3129
background-color: #bbb;
3230
}
3331

34-
.el-button--primary {
35-
--el-button-font-color: #ffffff;
36-
--el-button-background-color: #4D70FF;
37-
--el-button-border-color: #4D70FF;
38-
--el-button-hover-color: #0d84ff;
39-
--el-button-active-font-color: #e6e6e6;
40-
--el-button-active-background-color: #0d84ff;
41-
--el-button-active-border-color: #0d84ff;
42-
}
43-
44-
.el-button--primary {
45-
--el-button-font-color: #ffffff;
46-
--el-button-background-color: #4D70FF;
47-
--el-button-border-color: #4D70FF;
48-
--el-button-hover-color: #0d84ff;
49-
--el-button-active-font-color: #e6e6e6;
50-
--el-button-active-background-color: #0d84ff;
51-
--el-button-active-border-color: #0d84ff;
52-
}
5332

5433
:root {
5534
--el-color-primary: #4D70FF;
5635
--el-menu-item-height:56px ;
5736
}
5837

5938
.gva-search-box {
60-
.el-collapse {
61-
border: none;
62-
.el-collapse-item__header,
63-
.el-collapse-item__wrap {
64-
border-bottom: none;
65-
}
66-
}
6739
padding: 24px;
6840
padding-bottom: 2px;
6941
background-color: #fff;
7042
border-radius: 2px;
7143
margin-bottom: 12px;
7244
}
7345

74-
.el-form--inline{
75-
.el-form-item{
76-
margin-right: 24px;
77-
}
78-
}
79-
80-
.el-input__inner{
81-
height: 40px;
82-
line-height: 40px;
83-
}
84-
8546
.gva-form-box {
8647
padding: 24px;
8748
background-color: #fff;
@@ -143,85 +104,16 @@
143104
}
144105
// 兼容久版用户升级
145106
.active {
146-
background: #4D70FF;
107+
background: var(--el-color-primary);
147108
border-radius: 2px;
148109
color: #ffffff !important;
149110
}
150-
.el-pager li.active+li {
151-
border-left: 1px solid #ddd !important;
152-
}
153111
// end
154112

155-
156113
.is-active {
157-
background: #4D70FF;
114+
background: var(--el-color-primary);
158115
border-radius: 2px;
159116
color: #ffffff !important;
160117
}
161-
.el-pager li.is-active+li {
162-
border-left: 1px solid #ddd !important;
163-
}
164-
.el-pagination__sizes {
165-
.el-input {
166-
.el-input__suffix {
167-
margin-top: 2px;
168-
}
169-
}
170-
}
171-
}
172-
173-
.el-button--small {
174-
min-height: 32px;
175-
font-size: 12px !important;
176-
}
177-
178-
.el-checkbox{
179-
height: auto;
180-
}
181-
182-
.el-button {
183-
padding: 8px 16px;
184-
border-radius: 2px;
185-
&.el-button--text {
186-
padding: 8px 0;
187-
}
188-
}
189-
190-
.el-dialog {
191-
padding: 12px;
192-
.el-dialog__body {
193-
padding: 12px 6px;
194-
}
195-
.el-dialog__header {
196-
.el-dialog__title {
197-
font-size: 14px;
198-
font-weight: 500;
199-
}
200-
padding: 2px 20px 12px 20px;
201-
border-bottom: 1px solid #E4E4E4;
202-
}
203-
.el-dialog__footer {
204-
padding: 0 16px 16px 0;
205-
.dialog-footer {
206-
.el-button {
207-
padding-left: 24px;
208-
padding-right: 24px;
209-
}
210-
.el-button+.el-button {
211-
margin-left: 30px;
212-
}
213-
}
214-
}
215-
}
216-
217-
.el-drawer__body {
218-
padding: 0;
219-
}
220-
221-
.el-date-editor .el-range-separator {
222-
line-height: 24px;
223118
}
224119

225-
.el-select .el-input .el-select__caret.el-icon {
226-
height: 38px;
227-
}

‎web/src/view/example/breakpoint/breakpoint.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<input v-show="false" id="file" ref="FileInput" multiple="multiple" type="file" @change="choseFile">
99
</div>
1010
</form>
11-
<el-button :disabled="limitFileSize" type="primary" size="small" class="uploadBtn" @click="getFile">上传文件</el-button>
11+
<el-button :disabled="limitFileSize" type="primary" class="uploadBtn" @click="getFile">上传文件</el-button>
1212
<div class="el-upload__tip">请上传不超过5MB的文件</div>
1313
<div class="list">
1414
<transition name="list" tag="p">

‎web/src/view/example/customer/customer.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<warning-bar title="在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示" />
44
<div class="gva-table-box">
55
<div class="gva-btn-list">
6-
<el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>
6+
<el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
77
</div>
88
<el-table
99
ref="multipleTable"
@@ -23,15 +23,15 @@
2323
<el-table-column align="left" label="接入人ID" prop="sysUserId" width="120" />
2424
<el-table-column align="left" label="按钮组" min-width="160">
2525
<template #default="scope">
26-
<el-button size="small" type="primary" link icon="edit" @click="updateCustomer(scope.row)">变更</el-button>
26+
<el-button type="primary" link icon="edit" @click="updateCustomer(scope.row)">变更</el-button>
2727
<el-popover v-model="scope.row.visible" placement="top" width="160">
2828
<p>确定要删除吗？</p>
2929
<div style="text-align: right; margin-top: 8px;">
30-
<el-button size="small" type="primary" link @click="scope.row.visible = false">取消</el-button>
31-
<el-button type="primary" size="small" @click="deleteCustomer(scope.row)">确定</el-button>
30+
<el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
31+
<el-button type="primary" @click="deleteCustomer(scope.row)">确定</el-button>
3232
</div>
3333
<template #reference>
34-
<el-button type="primary" link icon="delete" size="small" @click="scope.row.visible = true">删除</el-button>
34+
<el-button type="primary" link icon="delete" @click="scope.row.visible = true">删除</el-button>
3535
</template>
3636
</el-popover>
3737
</template>
@@ -60,8 +60,8 @@
6060
</el-form>
6161
<template #footer>
6262
<div class="dialog-footer">
63-
<el-button size="small" @click="closeDialog">取 消</el-button>
64-
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
63+
<el-button @click="closeDialog">取 消</el-button>
64+
<el-button type="primary" @click="enterDialog">确 定</el-button>
6565
</div>
6666
</template>
6767
</el-dialog>

‎web/src/view/example/upload/upload.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</el-form-item>
2525

2626
<el-form-item>
27-
<el-button size="small" type="primary" icon="search" @click="getTableData">查询</el-button>
27+
<el-button type="primary" icon="search" @click="getTableData">查询</el-button>
2828
</el-form-item>
2929
</el-form>
3030

@@ -58,8 +58,8 @@
5858
</el-table-column>
5959
<el-table-column align="left" label="操作" width="160">
6060
<template #default="scope">
61-
<el-button size="small" icon="download" type="primary" link @click="downloadFile(scope.row)">下载</el-button>
62-
<el-button size="small" icon="delete" type="primary" link @click="deleteFileFunc(scope.row)">删除</el-button>
61+
<el-button icon="download" type="primary" link @click="downloadFile(scope.row)">下载</el-button>
62+
<el-button icon="delete" type="primary" link @click="deleteFileFunc(scope.row)">删除</el-button>
6363
</template>
6464
</el-table-column>
6565
</el-table>

0 commit comments

Comments
 (0)