forked from github/dataease
style: 模板市场样式优化
This commit is contained in:
parent
feae7153ef
commit
b978b0602d
@ -566,7 +566,7 @@ export default {
|
|||||||
filter: 'screen',
|
filter: 'screen',
|
||||||
list: 'List item',
|
list: 'List item',
|
||||||
list_info: 'Please select the information to be displayed in the list',
|
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: {
|
ldap: {
|
||||||
url: 'LDAP url',
|
url: 'LDAP url',
|
||||||
@ -1567,6 +1567,7 @@ export default {
|
|||||||
sure_bt: 'Confirm'
|
sure_bt: 'Confirm'
|
||||||
},
|
},
|
||||||
panel: {
|
panel: {
|
||||||
|
template_name_tips: "Panel\'s name should not be null",
|
||||||
panel_background_item: 'Customize panel background',
|
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',
|
panel_background_image_tips: 'Currently.Jpeg,.Jpg,.Png,.Gif files are supported, and the size should not exceed 15m',
|
||||||
reUpload: 'reUpload',
|
reUpload: 'reUpload',
|
||||||
|
@ -567,7 +567,7 @@ export default {
|
|||||||
filter: '篩選',
|
filter: '篩選',
|
||||||
list: '列表項',
|
list: '列表項',
|
||||||
list_info: '請選擇列表中要展示的信息',
|
list_info: '請選擇列表中要展示的信息',
|
||||||
sure_delete: '確定刪除該用戶嗎?',
|
sure_delete: '確定刪除該用戶嗎?'
|
||||||
},
|
},
|
||||||
ldap: {
|
ldap: {
|
||||||
url: 'LDAP地址',
|
url: 'LDAP地址',
|
||||||
@ -1567,6 +1567,7 @@ export default {
|
|||||||
sure_bt: '確定'
|
sure_bt: '確定'
|
||||||
},
|
},
|
||||||
panel: {
|
panel: {
|
||||||
|
template_name_tips: '仪表板名称必填',
|
||||||
panel_background_item: '自定义仪表板背景',
|
panel_background_item: '自定义仪表板背景',
|
||||||
panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
|
panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
|
||||||
reUpload: '重新上传',
|
reUpload: '重新上传',
|
||||||
|
@ -1575,6 +1575,7 @@ export default {
|
|||||||
sure_bt: '确定'
|
sure_bt: '确定'
|
||||||
},
|
},
|
||||||
panel: {
|
panel: {
|
||||||
|
template_name_tips: '仪表板名称必填',
|
||||||
panel_background_item: '自定义仪表板背景',
|
panel_background_item: '自定义仪表板背景',
|
||||||
panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
|
panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
|
||||||
reUpload: '重新上传',
|
reUpload: '重新上传',
|
||||||
|
@ -12,11 +12,12 @@
|
|||||||
<el-input
|
<el-input
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
size="small"
|
size="small"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
class="title-name-search"
|
class="title-name-search"
|
||||||
:placeholder="$t('panel.enter_template_name_tips')"
|
:placeholder="$t('panel.enter_template_name_tips')"
|
||||||
clearable="true"
|
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>
|
||||||
<el-row v-show="extFilterActive">
|
<el-row v-show="extFilterActive">
|
||||||
<el-select v-model="marketActiveTab" class="margin-top16" size="small" placeholder="请选择">
|
<el-select v-model="marketActiveTab" class="margin-top16" size="small" placeholder="请选择">
|
||||||
@ -64,8 +65,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { searchMarket, getCategories } from '@/api/templateMarket'
|
import { searchMarket, getCategories } from '@/api/templateMarket'
|
||||||
import { groupTree, panelSave } from '@/api/panel/panel'
|
import { groupTree } from '@/api/panel/panel'
|
||||||
import bus from '@/utils/bus'
|
|
||||||
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
|
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
|
||||||
import TemplateMarketPreviewItem from '@/views/panel/templateMarket/component/TemplateMarketPreviewItem'
|
import TemplateMarketPreviewItem from '@/views/panel/templateMarket/component/TemplateMarketPreviewItem'
|
||||||
|
|
||||||
@ -134,6 +134,7 @@ export default {
|
|||||||
searchMarket({}).then(rsp => {
|
searchMarket({}).then(rsp => {
|
||||||
this.baseUrl = rsp.data.baseUrl
|
this.baseUrl = rsp.data.baseUrl
|
||||||
this.currentMarketTemplateShowList = rsp.data.contents
|
this.currentMarketTemplateShowList = rsp.data.contents
|
||||||
|
this.hasResult = true
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.networkStatus = false
|
this.networkStatus = false
|
||||||
})
|
})
|
||||||
@ -207,6 +208,7 @@ export default {
|
|||||||
},
|
},
|
||||||
extFilterActiveChange() {
|
extFilterActiveChange() {
|
||||||
this.extFilterActive = !this.extFilterActive
|
this.extFilterActive = !this.extFilterActive
|
||||||
|
this.marketActiveTab = this.marketTabs[0]
|
||||||
},
|
},
|
||||||
closePreview() {
|
closePreview() {
|
||||||
this.$emit('closePreview')
|
this.$emit('closePreview')
|
||||||
@ -337,7 +339,7 @@ export default {
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.insert {
|
.insert-filter {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
font-family: PingFang SC;
|
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{
|
.template-title{
|
||||||
float: left;
|
float: left;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -406,7 +437,7 @@ export default {
|
|||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 5px;
|
padding: 7px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -415,6 +446,11 @@ export default {
|
|||||||
color: #3370FF;
|
color: #3370FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filter-icon-active{
|
||||||
|
border: 1px solid #3370FF;
|
||||||
|
color: #3370FF;
|
||||||
|
}
|
||||||
|
|
||||||
.search-area{
|
.search-area{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="testcase-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 class="bottom-area">
|
||||||
<el-row>
|
<el-row>
|
||||||
<span class="demonstration">{{ template.title }}</span>
|
<span class="demonstration">{{ template.title }}</span>
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
<span class="title-left">{{ $t('panel.template_market') }}</span>
|
<span class="title-left">{{ $t('panel.template_market') }}</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col span="12">
|
<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-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row>
|
||||||
@ -48,16 +48,16 @@
|
|||||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||||
:title="$t('panel.apply_template')"
|
:title="$t('panel.apply_template')"
|
||||||
:visible.sync="folderSelectShow"
|
:visible.sync="folderSelectShow"
|
||||||
width="500px"
|
width="600px"
|
||||||
class="dialog-css"
|
class="market-dialog-css"
|
||||||
append-to-body="true"
|
append-to-body="true"
|
||||||
:destroy-on-close="true"
|
:destroy-on-close="true"
|
||||||
>
|
>
|
||||||
<el-form ref="panelForm" :model="panelForm" label-width="80px">
|
<el-form ref="panelForm" :model="panelForm" :rules="rule" label-width="80px">
|
||||||
<el-form-item :label="$t('panel.name')">
|
<el-form-item :label="$t('panel.name')" prop="name">
|
||||||
<el-input v-model="panelForm.name" :placeholder="$t('panel.enter_name_tips')" />
|
<el-input v-model="panelForm.name" :clearable="true" :placeholder="$t('panel.enter_name_tips')" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('commons.folder')">
|
<el-form-item :label="$t('commons.folder')" prop="pid">
|
||||||
<treeselect
|
<treeselect
|
||||||
v-model="panelForm.pid"
|
v-model="panelForm.pid"
|
||||||
:clearable="false"
|
:clearable="false"
|
||||||
@ -85,6 +85,7 @@ import { groupTree, panelSave } from '@/api/panel/panel'
|
|||||||
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
|
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
|
||||||
import MarketPreview from '@/views/panel/templateMarket/component/MarketPreview'
|
import MarketPreview from '@/views/panel/templateMarket/component/MarketPreview'
|
||||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||||
|
import { PHONE_REGEX } from '@/utils/validate'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TemplateMarket',
|
name: 'TemplateMarket',
|
||||||
@ -92,7 +93,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hasResult: true,
|
hasResult: true,
|
||||||
templateMiniWidth: 350,
|
templateMiniWidth: 330,
|
||||||
templateSpan: '25%',
|
templateSpan: '25%',
|
||||||
previewModel: false,
|
previewModel: false,
|
||||||
previewVisible: false,
|
previewVisible: false,
|
||||||
@ -115,7 +116,23 @@ export default {
|
|||||||
folderSelectShow: false,
|
folderSelectShow: false,
|
||||||
baseUrl: 'https://dataease.io/templates',
|
baseUrl: 'https://dataease.io/templates',
|
||||||
currentMarketTemplateShowList: [],
|
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: {
|
computed: {
|
||||||
@ -263,7 +280,7 @@ export default {
|
|||||||
width: 320px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
.dialog-footer-self{
|
.dialog-footer-self{
|
||||||
text-align: center;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.search-button-self{
|
.search-button-self{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -306,4 +323,33 @@ export default {
|
|||||||
background: #f5f6f7;
|
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>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user