style: 模板市场样式优化

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

View File

@ -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',

View File

@ -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: '重新上传',

View File

@ -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: '重新上传',

View File

@ -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;

View File

@ -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>

View File

@ -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>