center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

style: 模板市场样式优化

Browse Source
This commit is contained in:
wangjiahao 2022-08-03 11:40:49 +08:00
parent feae7153ef
commit b978b0602d
6 changed files with 103 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/lang/en.js
View File

@ -566,7 +566,7 @@ export default {
filter: 'screen',
list: 'List item',
list_info: 'Please select the information to be displayed in the list',
sure_delete: 'Are you sure to delete this user?',
sure_delete: 'Are you sure to delete this user?'
},
ldap: {
url: 'LDAP url',
@ -1567,6 +1567,7 @@ export default {
sure_bt: 'Confirm'
},
panel: {
template_name_tips: "Panel\'s name should not be null",
panel_background_item: 'Customize panel background',
panel_background_image_tips: 'Currently.Jpeg,.Jpg,.Png,.Gif files are supported, and the size should not exceed 15m',
reUpload: 'reUpload',

3
frontend/src/lang/tw.js
View File

@ -567,7 +567,7 @@ export default {
filter: '篩選',
list: '列表項',
list_info: '請選擇列表中要展示的信息',
sure_delete: '確定刪除該用戶嗎？',
sure_delete: '確定刪除該用戶嗎？'
},
ldap: {
url: 'LDAP地址',
@ -1567,6 +1567,7 @@ export default {
sure_bt: '確定'
},
panel: {
template_name_tips: '仪表板名称必填',
panel_background_item: '自定义仪表板背景',
panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
reUpload: '重新上传',

1
frontend/src/lang/zh.js
View File

@ -1575,6 +1575,7 @@ export default {
sure_bt: '确定'
},
panel: {
template_name_tips: '仪表板名称必填',
panel_background_item: '自定义仪表板背景',
panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
reUpload: '重新上传',

46
frontend/src/views/panel/templateMarket/component/MarketPreview.vue
View File

@ -12,11 +12,12 @@
<el-input
v-model="searchText"
size="small"
prefix-icon="el-icon-search"
class="title-name-search"
:placeholder="$t('panel.enter_template_name_tips')"
clearable="true"
/>
<span class="icon iconfont icon-icon-filter insert icon20 filter-icon-span" :class="extFilterActive?'filter-icon-active':''" @click="extFilterActiveChange()" />
<span class="icon iconfont icon-icon-filter insert-filter filter-icon-span" :class="extFilterActive?'filter-icon-active':''" @click="extFilterActiveChange()" />
</el-row>
<el-row v-show="extFilterActive">
<el-select v-model="marketActiveTab" class="margin-top16" size="small" placeholder="请选择">
@ -64,8 +65,7 @@
<script>
import { searchMarket, getCategories } from '@/api/templateMarket'
import { groupTree, panelSave } from '@/api/panel/panel'
import bus from '@/utils/bus'
import { groupTree } from '@/api/panel/panel'
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import TemplateMarketPreviewItem from '@/views/panel/templateMarket/component/TemplateMarketPreviewItem'
@ -134,6 +134,7 @@ export default {
searchMarket({}).then(rsp => {
this.baseUrl = rsp.data.baseUrl
this.currentMarketTemplateShowList = rsp.data.contents
this.hasResult = true
}).catch(() => {
this.networkStatus = false
})
@ -207,6 +208,7 @@ export default {
},
extFilterActiveChange() {
this.extFilterActive = !this.extFilterActive
this.marketActiveTab = this.marketTabs[0]
},
closePreview() {
this.$emit('closePreview')
@ -337,7 +339,7 @@ export default {
line-height: 24px;
}
.insert {
.insert-filter {
display: inline-block;
font-weight: 400 !important;
font-family: PingFang SC;
@ -366,6 +368,35 @@ export default {
}
}
.insert {
display: inline-block;
font-weight: 400 !important;
font-family: PingFang SC;
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: #646A73;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: .1s;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6;
}
}
.template-title{
float: left;
font-weight: 500;
@ -406,7 +437,7 @@ export default {
width: 32px;
height: 32px;
border-radius: 4px;
padding: 5px;
padding: 7px;
margin-left: 8px;
}
@ -415,6 +446,11 @@ export default {
color: #3370FF;
}
.filter-icon-active{
border: 1px solid #3370FF;
color: #3370FF;
}
.search-area{
width: 100%;
position: relative;

2
frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="testcase-template">
<el-row class="template-img" :style="classBackground" />
<div class="template-img" :style="classBackground" @click.stop="templatePreview" />
<el-row class="bottom-area">
<el-row>
<span class="demonstration">{{ template.title }}</span>

66
frontend/src/views/panel/templateMarket/index.vue
View File

@ -9,7 +9,7 @@
<span class="title-left">{{ $t('panel.template_market') }}</span>
</el-col>
<el-col span="12">
<el-input v-model="searchText" size="small" class="title-right" :placeholder="$t('panel.enter_template_name_tips')" clearable="true" />
<el-input v-model="searchText" prefix-icon="el-icon-search" size="small" class="title-right" :placeholder="$t('panel.enter_template_name_tips')" clearable="true" />
</el-col>
</el-row>
<el-row>
@ -48,16 +48,16 @@
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
:title="$t('panel.apply_template')"
:visible.sync="folderSelectShow"
width="500px"
class="dialog-css"
width="600px"
class="market-dialog-css"
append-to-body="true"
:destroy-on-close="true"
>
<el-form ref="panelForm" :model="panelForm" label-width="80px">
<el-form-item :label="$t('panel.name')">
<el-input v-model="panelForm.name" :placeholder="$t('panel.enter_name_tips')" />
<el-form ref="panelForm" :model="panelForm" :rules="rule" label-width="80px">
<el-form-item :label="$t('panel.name')" prop="name">
<el-input v-model="panelForm.name" :clearable="true" :placeholder="$t('panel.enter_name_tips')" />
</el-form-item>
<el-form-item :label="$t('commons.folder')">
<el-form-item :label="$t('commons.folder')" prop="pid">
<treeselect
v-model="panelForm.pid"
:clearable="false"
@ -85,6 +85,7 @@ import { groupTree, panelSave } from '@/api/panel/panel'
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import MarketPreview from '@/views/panel/templateMarket/component/MarketPreview'
import elementResizeDetectorMaker from 'element-resize-detector'
import { PHONE_REGEX } from '@/utils/validate'
export default {
name: 'TemplateMarket',
@ -92,7 +93,7 @@ export default {
data() {
return {
hasResult: true,
templateMiniWidth: 350,
templateMiniWidth: 330,
templateSpan: '25%',
previewModel: false,
previewVisible: false,
@ -115,7 +116,23 @@ export default {
folderSelectShow: false,
baseUrl: 'https://dataease.io/templates',
currentMarketTemplateShowList: [],
networkStatus: true
networkStatus: true,
rule: {
name: [
{
required: true,
message: this.$t('panel.template_name_tips'),
trigger: 'blur'
}
],
pid: [
{
required: true,
message: '',
trigger: 'blur'
}
]
}
}
},
computed: {
@ -263,7 +280,7 @@ export default {
width: 320px;
}
.dialog-footer-self{
text-align: center;
text-align: right;
}
.search-button-self{
text-align: left;
@ -306,4 +323,33 @@ export default {
background: #f5f6f7;
}
.market-dialog-css{
::v-deep .el-form-item__label {
width: 100% !important;
text-align: left;
}
::v-deep
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before {
display: none;
}
::v-deep
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label::after {
content: "*";
color: #f54a45;
margin-left: 2px;
}
::v-deep .el-form-item__content {
margin-left: 0 !important;
}
::v-deep .vue-treeselect__input{
vertical-align:middle;
}
}
</style>