Skip to content

Commit

Permalink
修改整体路由、生成页面缩略图 (TencentBlueKing#253)
Browse files Browse the repository at this point in the history 
* 增加chart图表

* fix冲突

* 删除consolelog

* 更新图标库

* 同步新的lesscode-develop，fix图表bug

* fix高版本echarts无法自适应大小的问题

* project模块layout和router

* 提交页面管理

* merge

* fix复制页面问题

* 删除preview页面的query参数

* update msg

* 修改整体路由、生成页面缩略图

Co-authored-by: ielgnaw <wuji0223@gmail.com>
  • Loading branch information
@terlinhe @ielgnaw
terlinhe and ielgnaw committed Jul 29, 2020
1 parent d6e0605 commit 710936e
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 26 deletions.
39 changes: 19 additions & 20 deletions paas-ce/lesscode/lib/client/src/router/index.js
View file
Expand Up @@ -41,23 +41,6 @@ const Start = () => import(/* webpackChunkName: 'start' */'@/views/help/docs/sta
const Changelog = () => import(/* webpackChunkName: 'start' */'@/views/changelog/index.md')

const routes = [
{
path: `/${APP_CODE}`,
component: MainEntry,
alias: '',
children: [
{
path: '',
name: 'new',
component: Index
},
{
path: 'preview',
name: 'preview',
component: Preview
}
]
},
{
path: '/help',
component: MainHelpEntry,
Expand All @@ -70,7 +53,7 @@ const routes = [
]
},
{
path: '/system',
path: '/',
component: SystemEntry,
redirect: { name: 'projects' },
children: [
Expand Down Expand Up @@ -117,7 +100,7 @@ const routes = [
redirect: { name: 'pageList' }
},
{
path: 'page',
path: 'pages',
name: 'pageList',
component: Page
},
Expand All @@ -127,7 +110,23 @@ const routes = [
component: Member
}
]

},
{
path: `/project/:projectId/page/:pageId`,
component: MainEntry,
alias: '',
children: [
{
path: '',
name: 'new',
component: Index
},
{
path: 'preview',
name: 'preview',
component: Preview
}
]
},
{
path: '*',
Expand Down
17 changes: 16 additions & 1 deletion paas-ce/lesscode/lib/client/src/views/index/index.vue
View file
Expand Up @@ -13,7 +13,7 @@
<main class="app-main">
<div class="main-top">
<div class="page-title">
<div class="page-name">
<div class="page-name" @click="generatePreviewImg">
可视化开发
</div>
</div>
Expand Down Expand Up @@ -200,6 +200,7 @@
import Methods from '@/components/methods'
import codeMixin from '@/components/vue-code/code-mixin'
import ComponentSearch from './component-search'
import html2canvas from 'html2canvas'
import customComponents from '@/custom'
Expand Down Expand Up @@ -845,6 +846,20 @@
})
},
generatePreviewImg () {
if (this.actionSelected !== 'edit' || !this.$route.params.pageId) return
html2canvas(document.querySelector('.main-content')).then((canvas) => {
const imgData = canvas.toDataURL('image/png')
this.$store.dispatch('page/update', {
data: {
pageData: {
id: parseInt(this.$route.params.pageId),
previewImg: imgData
}
}
})
})
},
/**
* 跳转到开源版 github
*/
Expand Down
1 change: 0 additions & 1 deletion paas-ce/lesscode/lib/client/src/views/preview/index.vue
View file
Expand Up @@ -87,7 +87,6 @@
this.comp = 'preview-page'
this.isLoading = false
}, 300)
// this.isLoading = true
// try {
// const res = await httpVueLoader(this.url)
Expand Down
21 changes: 17 additions & 4 deletions paas-ce/lesscode/lib/client/src/views/project/page.vue
View file
Expand Up @@ -19,7 +19,7 @@
<div class="page-item" v-for="(page, index) in renderList" :key="index">
<div class="item-bd">
<div class="preview">
<img :src="pagePreivewImg" alt="项目缩略预览">
<img :src="page.previewImg || pagePreivewImg" alt="页面缩略预览">
<div class="mask">
<div class="operate-btns">
<bk-button class="edit-btn" theme="primary" @click="handleEditPage(page.id)">编辑</bk-button>
Expand Down Expand Up @@ -124,7 +124,7 @@
if (!code) {
this.$bkMessage({
theme: 'error',
message: '源码为空'
message: '该页面为空页面，无源码生成'
})
return
}
Expand Down Expand Up @@ -162,9 +162,22 @@
})
},
handleEditPage (id) {
this.$router.push('/')
this.$router.push({
name: 'new',
params: {
projectId: this.projectId,
pageId: id
}
})
},
handlePreview (content) {
handlePreview (page) {
if (!page.content) {
this.$bkMessage({
theme: 'error',
message: '该页面为空页面，请先编辑页面'
})
return
}
window.open('/preview', '_blank')
},
handleSearch (clear = false) {
Expand Down
6 changes: 6 additions & 0 deletions paas-ce/lesscode/lib/server/model/entities/page.js
View file
Expand Up @@ -21,6 +21,12 @@ export default class extends Base {
})
sourceCode

@Column({
type: 'mediumtext',
comment: '预览图base64'
})
previewImg

@Column({
type: 'int',
nullable: false,
Expand Down
1 change: 1 addition & 0 deletions paas-ce/lesscode/lib/server/model/sql/20200707/initial.sql
View file
Expand Up @@ -135,6 +135,7 @@ CREATE TABLE `page` (
`pageName` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`content` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '页面的 targetData（JSON 串）',
`sourceCode` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '页面源代码',
`previewImg` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '缩略图base64',
`status` int(11) NOT NULL DEFAULT 0 COMMENT '项目状态：0 为正常，1 为私有，2 为删除',
`createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
`updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
Expand Down
1 change: 1 addition & 0 deletions paas-ce/lesscode/package.json
View file
Expand Up @@ -127,6 +127,7 @@
"highlight.js": "~9.16.2",
"html-loader": "~1.1.0",
"html-webpack-plugin": "~3.2.0",
"html2canvas": "^1.0.0-rc.5",
"jsonp": "~0.2.1",
"koa": "~2.8.2",
"koa-bodyparser": "~4.2.1",
Expand Down

0 comments on commit 710936e

Please sign in to comment.