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

refactor: 首页修改 (#1651)

Browse Source 
* refactor:首页修改

* refactor: 首页修改

Co-authored-by: wangjiahao <1522128093@qq.com>
This commit is contained in:
fit2cloudrd 2022-01-18 12:38:33 +08:00 committed by GitHub
parent e4f44bd2d4
commit 5e32cd9dde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 344 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
View File

@ -11,6 +11,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
import java.util.Map;
@Api(tags = "首页")
@ -24,7 +25,7 @@ public class ReptileController {
@GetMapping("lastActive")
@ApiOperation("获取官方Blog最新动态")
public Map<String, String> lastActive() {
public List lastActive() {
return reptileService.lastActive();
}
}

31
backend/src/main/java/io/dataease/service/wizard/ReptileService.java
View File

@ -7,8 +7,7 @@ import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.Map;
import java.util.*;
/**
* Author: wangjiahao
@ -18,27 +17,33 @@ import java.util.Map;
@Service
public class ReptileService {
String blogUrl = "https://blog.fit2cloud.com/?cat=321";
//获取最新的前几条数据
private static int infoCount=1;
public Map<String, String> lastActive() {
Map<String, String> result = new HashMap();
public List lastActive() {
List result = new ArrayList();
try {
//爬取最新数据
Document doc = Jsoup.parse(HttpClientUtil.get(blogUrl, null));
Elements elementsContent = doc.getElementsByAttributeValue("rel", "bookmark");
Elements elementsTime = doc.getElementsByTag("time");
Element lastInfo = elementsContent.get(0);
result.put("title",lastInfo.attr("title"));
result.put("href",lastInfo.attr("href"));
result.put("time",elementsTime.get(0).childNode(0).outerHtml());
for(int i = 0;i<infoCount;i++){
Element info = elementsContent.get(i*3);
Map<String, String> infoMap = new HashMap();
infoMap.put("title",info.attr("title"));
infoMap.put("href",info.attr("href"));
infoMap.put("time",elementsTime.get(i).childNode(0).outerHtml());
result.add(infoMap);
}
} catch (Exception e) {
//ignore
result.put("title","支持移动端展示，数据源新增对DB2的支持，DataEase开源数据可视化分析平台v1.6.0发布");
result.put("href","https://blog.fit2cloud.com/?p=3200");
result.put("time","2022年1月10日");
Map<String, String> infoMap = new HashMap();
infoMap.put("title","支持移动端展示，数据源新增对DB2的支持，DataEase开源数据可视化分析平台v1.6.0发布");
infoMap.put("href","https://blog.fit2cloud.com/?p=3200");
infoMap.put("time","2022年1月10日");
result.add(infoMap);
}
return result;
}

BIN
frontend/src/assets/DataEase-0.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
frontend/src/assets/DataEase-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
frontend/src/assets/DataEase-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
frontend/src/assets/DataEase-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
frontend/src/assets/DataEase-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
frontend/src/assets/DataEase-5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
frontend/src/assets/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

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

@ -1815,6 +1815,9 @@ export default {
open_source_community: 'Open source community',
click_show: 'Click To View',
show_more: 'Show More',
click_inner: 'Click To Enter'
click_inner: 'Click To Enter',
email: 'Email:',
tel: 'Tel:',
web: 'Web:'
}
}

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

@ -1825,6 +1825,9 @@ export default {
open_source_community: '開源社區',
click_show: '點擊查看',
show_more: '查看更多',
click_inner: '點擊進入'
click_inner: '點擊進入',
email: '邮箱：',
tel: '电话：',
web: '网址：'
}
}

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

@ -1835,6 +1835,8 @@ export default {
open_source_community: '开源社区',
click_show: '点击查看',
show_more: '查看更多',
click_inner: '点击进入'
email: '邮箱：',
tel: '电话：',
web: '网址：'
}
}

2
frontend/src/views/wizard/card.vue
View File

@ -54,7 +54,7 @@ export default {
border: lightgray solid 1px;
border-radius: 0px 5px 5px 5px;
height: 100%;
overflow: hidden;
overflow-y: auto;
}
</style>

90
frontend/src/views/wizard/details/CardDetail.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<el-row
class="demo_main"
>
<div class="demo_title">
<a target="_blank" :href="details.href">
<img
:src="require('../../../assets/DataEase-' +imgIndex + '.jpg')"
height="100%"
>
</a>
</div>
<div class="demo_content">
<el-row class="head">
<span>{{ details.head }}</span>
</el-row>
<el-row class="content">
<span v-html="details.content" />
</el-row>
<el-row class="bottom">
<span class="span-box">{{ details.bottom }}</span>
</el-row>
</div>
</el-row>
</template>
<script>
export default {
name: 'CardDetail',
props: {
imgIndex: {
type: Number,
required: true
},
details: {
type: Object,
required: true
}
},
data() {
return {
imgSrc: '../../../assets/DataEase-' + this.imgIndex + '.jpg'
}
},
computed: {
}
}
</script>
<style lang="scss" scoped>
::v-deep a:hover{color:blue;}
.demo_main{
height: 100%;
}
.demo_title{
float: left;
height: 100%;
}
.demo_content{
margin: auto;
padding-left: 15px;
height: 100%;
overflow: hidden;
.head{
padding-top: 24px;
color: var(--TopTextColor, #000000);
}
.content{
height: 50%;
padding-top: 15px;
padding-right: 10px;
color: var(--TextPrimary, #6D6D6D);
font-size: 12px;
overflow-y: auto;
}
.bottom{
height: 25%;
.span-box{
color: var(--TextPrimary, #6D6D6D);
font-size: 12px;
position: absolute;
bottom: 8px;
}
}
}
</style>

97
frontend/src/views/wizard/details/LatestDevelopments.vue
View File

@ -1,13 +1,26 @@
<template>
<el-row class="demo_main">
<el-row class="demo_content">
<a :href="href" target="_blank">{{ title }}</a>
<br>
<span style="color: lightgray">{{ time }}</span>
</el-row>
<el-row class="demo_bottom">
<a href="https://blog.fit2cloud.com/?cat=321" target="_blank">{{ $t('wizard.show_more') }}</a>
</el-row>
<el-row
class="demo_main"
>
<div class="demo_title">
<a target="_blank" :href="details.href">
<img
:src="require('../../../assets/DataEase-' +imgIndex + '.jpg')"
height="100%"
>
</a>
</div>
<div class="demo_content">
<el-row class="head">
<span>{{ details.head }}</span>
</el-row>
<el-row class="content">
<span v-html="details.content" />
</el-row>
<el-row class="bottom">
<span class="span-box">{{ details.bottom }}</span>
</el-row>
</div>
</el-row>
</template>
@ -16,13 +29,25 @@
import { blogLastActive } from '@/api/wizard/wizard'
export default {
name: 'LatestDevelopments',
name: 'CardDetail',
props: {
imgIndex: {
type: Number,
required: true
},
details: {
type: Object,
required: true
}
},
data() {
return {
title: '',
href: '',
time: ''
blogsInfo: {},
imgSrc: '../../../assets/DataEase-' + this.imgIndex + '.jpg'
}
},
computed: {
},
mounted() {
this.init()
@ -30,9 +55,7 @@ export default {
methods: {
init() {
blogLastActive().then(res => {
this.title = res.data.title
this.href = res.data.href
this.time = res.data.time
this.blogsInfo = res.data[0]
})
}
}
@ -43,23 +66,37 @@ export default {
<style lang="scss" scoped>
.demo_main{
height: 100%;
padding: 10px 20px 10px 20px;
}
.demo_title{
float: left;
height: 100%;
}
.demo_content{
padding-left: 10px;
float: left;
font-weight: 500;
color: var(--MenuActiveBG, #409EFF);
max-height: 80%;
margin: auto;
padding-left: 15px;
height: 100%;
overflow: hidden;
}
.demo_bottom{
position: absolute;
left: 30px;
bottom: 10px;
font-weight: 500;
color: var(--MenuActiveBG, #409EFF);
.head{
padding-top: 24px;
color: var(--TopTextColor, #000000);
}
.content{
height: 50%;
padding-top: 15px;
padding-right: 20px;
color: var(--TextPrimary, #6D6D6D);
font-size: 12px;
overflow: hidden;
}
.bottom{
height: 25%;
.span-box{
color: var(--TextPrimary, #6D6D6D);
font-size: 12px;
position: absolute;
bottom: 5px;
}
}
}
</style>

63
frontend/src/views/wizard/details/LatestDevelopmentsBack.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<el-row class="demo_main">
<el-row class="demo_content">
<el-row v-for="(details,index) in blogsInfo" :key="index">
<a :href="details.href" target="_blank">{{ details.title }}</a>
<br>
<span style="color: lightgray">{{ details.time }}</span>
</el-row>
</el-row>
<el-row class="demo_bottom">
<a href="https://blog.fit2cloud.com/?cat=321" target="_blank">{{ $t('wizard.show_more') }}</a>
</el-row>
</el-row>
</template>
<script>
import { blogLastActive } from '@/api/wizard/wizard'
export default {
name: 'LatestDevelopments',
data() {
return {
blogsInfo: []
}
},
mounted() {
this.init()
},
methods: {
init() {
blogLastActive().then(res => {
this.blogsInfo = res.data
})
}
}
}
</script>
<style lang="scss" scoped>
.demo_main{
height: 100%;
padding: 10px 20px 10px 20px;
}
.demo_content{
padding-left: 10px;
float: left;
font-weight: 500;
color: var(--MenuActiveBG, #409EFF);
max-height: 80%;
overflow: hidden;
}
.demo_bottom{
position: absolute;
left: 30px;
bottom: 10px;
font-weight: 500;
color: var(--MenuActiveBG, #409EFF);
}
</style>

76
frontend/src/views/wizard/index.vue
View File

@ -5,9 +5,9 @@
<span class="hint_content">{{ $t('wizard.welcome_hint') }}</span>
</el-row>
<el-row class="card_container">
<card v-for="(cardDetail,index) in cardList" :key="index" :head-info="cardDetail.headInfo">
<component :is="cardDetail.component" />
</card>
<info-card v-for="(cardDetail,index) in cardList" :key="index">
<component :is="cardDetail.component" :img-index="index" :details="cardDetail" />
</info-card>
</el-row>
</el-row>
</template>
@ -21,38 +21,72 @@ import LatestDevelopments from '@/views/wizard/details/LatestDevelopments'
import TeachingVideo from '@/views/wizard/details/TeachingVideo'
import EnterpriseEdition from '@/views/wizard/details/EnterpriseEdition'
import ContactUs from '@/views/wizard/details/ContactUs'
import InfoCard from '@/views/wizard/infoCard'
import CardDetail from '@/views/wizard/details/CardDetail'
import { blogLastActive } from '@/api/wizard/wizard'
export default {
name: 'Wizard',
components: { Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs },
components: { InfoCard, Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs, CardDetail },
data() {
return {
cardList: [
{
headInfo: this.$t('wizard.demo_video'),
component: 'DemoVideo'
head: this.$t('wizard.demo_video'),
content: this.$t('wizard.demo_video_hint'),
bottom: '',
href: 'https://www.bilibili.com/video/BV1UB4y1K7jA',
component: 'CardDetail'
},
{
headInfo: this.$t('wizard.online_document'),
component: 'OnlineDocument'
head: this.$t('wizard.online_document'),
content: this.$t('wizard.online_document_hint'),
bottom: '',
href: 'https://dataease.io/docs/dev_manual/dev_manual/',
component: 'CardDetail'
},
{
headInfo: this.$t('wizard.latest_developments'),
component: 'LatestDevelopments'
head: this.$t('wizard.latest_developments'),
content: '',
bottom: '',
href: 'https://blog.fit2cloud.com/?cat=321',
component: 'CardDetail'
},
{
headInfo: this.$t('wizard.teaching_video'),
component: 'TeachingVideo'
head: this.$t('wizard.teaching_video'),
content: '<a href="https://live.vhall.com/v3/lives/subscribe/533874762" target="_blank"><span style="line-height: 30px">40分钟带你玩转 DataEase </span></a><br><a href="https://live.vhall.com/v3/lives/subscribe/903960272" target="_blank">用DataEase开源工具可视化 ClickHouse数据</a>',
bottom: '',
href: 'https://e.vhall.com/v3/user/home/45637107',
component: 'CardDetail'
},
{
headInfo: this.$t('wizard.enterprise_edition'),
component: 'EnterpriseEdition'
head: this.$t('wizard.enterprise_edition'),
content: this.$t('wizard.enterprise_edition_hint1') + '<br>' + this.$t('wizard.enterprise_edition_hint2') + '<br>' + this.$t('wizard.enterprise_edition_hint3'),
bottom: '',
href: 'https://jinshuju.net/f/TK5TTd',
component: 'CardDetail'
},
{
headInfo: this.$t('wizard.contact_us'),
component: 'ContactUs'
head: this.$t('wizard.contact_us'),
content: this.$t('wizard.email') + 'dataease@fit2cloud.com<br>' + this.$t('wizard.tel') + '400-052-0755<br>' + this.$t('wizard.web') + '<a target="_blank" href="https://www.dataease.io">www.dataease.io</a>',
bottom: '',
href: 'https://www.dataease.io',
component: 'CardDetail'
}
]
}
},
created() {
this.init()
},
methods: {
init() {
blogLastActive().then(res => {
const blogsInfo = res.data[0]
this.cardList[2].content = blogsInfo.title
this.cardList[2].bottom = blogsInfo.time
})
}
}
}
@ -62,23 +96,25 @@ export default {
.main_container {
}
.head {
background-color: var(--MenuActiveBG, #409EFF);
text-align: center;
color: white;
padding: 10px;
margin-top: 25px;
margin-top: 35px;
background-size: 100% 100% !important;
background-image: url('../../assets/banner.png');
}
.hint_head {
line-height: 40px;
line-height: 50px;
font-weight: bold;
font-size: 25px;
}
.hint_content {
line-height: 40px;
line-height: 50px;
font-size: 15px;
}
.card_container {
vertical-align: middle;
}
</style>

36
frontend/src/views/wizard/infoCard.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<el-col :span="8" class="card_main">
<el-row class="card_content">
<slot />
</el-row>
</el-col>
</template>
<script>
export default {
name: 'InfoCard',
props: {
},
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.card_main{
padding: 5% 25px 30px 25px;
min-height: 250px;
height: 33vh;
max-height: 300px;
}
.card_content{
border: lightgray solid 1px;
border-radius: 5px;
height: 100%;
overflow: hidden;
}
</style>