+
+
+
+
diff --git a/lib/client/src/element-materials/modifier/component/tab/index.vue b/lib/client/src/element-materials/modifier/component/tab/index.vue
index 0b86461ab..26c041155 100644
--- a/lib/client/src/element-materials/modifier/component/tab/index.vue
+++ b/lib/client/src/element-materials/modifier/component/tab/index.vue
@@ -124,13 +124,18 @@
})
this.panelItems = [...this.componentNode.children]
// 设置默认选中的tab
+ const props = {
+ format: 'value',
+ code: 'tab1',
+ renderValue: 'tab1'
+ }
+ if (LC.getFramework() === 'vue3') {
+ props.directive = 'v-model'
+ } else {
+ props.modifiers = ['sync']
+ }
this.componentNode.setProp({
- active: LC.utils.genPropFormatValue({
- format: 'value',
- code: 'tab1',
- renderValue: 'tab1',
- modifiers: ['sync']
- })
+ active: LC.utils.genPropFormatValue(props)
})
},
handleAdd () {
diff --git a/lib/client/src/element-materials/modifier/index.vue b/lib/client/src/element-materials/modifier/index.vue
index f377e24f3..ed9693e83 100644
--- a/lib/client/src/element-materials/modifier/index.vue
+++ b/lib/client/src/element-materials/modifier/index.vue
@@ -8,17 +8,19 @@
import LC from '@/element-materials/core'
import ComponentModifier from './component'
import TemplateModifier from './template'
+ import PageModifier from './page'
const comMap = {
template: TemplateModifier,
- component: ComponentModifier
+ component: ComponentModifier,
+ page: PageModifier
}
export default {
name: 'element-modifier',
data () {
return {
- panel: 'component',
+ panel: 'page',
templateInfo: {}
}
},
@@ -26,6 +28,9 @@
...mapGetters('drag', [
'curTemplateData'
]),
+ activeNode () {
+ return LC.getActiveNode()
+ },
com () {
if (comMap.hasOwnProperty(this.panel)) {
return comMap[this.panel]
@@ -36,21 +41,35 @@
watch: {
// template没有指定面板，展示component修改器
curTemplateData (curTemplateData) {
- if (curTemplateData.panelActive) {
- this.panel = 'template'
- } else {
- this.panel = 'component'
- }
+ this.changePanel()
}
},
created () {
const activeCallback = () => {
this.panel = 'component'
}
+ const activeClearCallback = () => {
+ this.changePanel()
+ }
LC.addEventListener('active', activeCallback)
+ LC.addEventListener('activeClear', activeClearCallback)
this.$once('hook:beforeDestroy', () => {
LC.removeEventListener('active', activeCallback)
})
+ this.$once('hook:beforeDestroy', () => {
+ LC.removeEventListener('activeClear', activeClearCallback)
+ })
+ },
+ methods: {
+ changePanel () {
+ if (this.curTemplateData.panelActive) {
+ this.panel = 'template'
+ } else if (this.aciveNode?.componentId) {
+ this.panel = 'component'
+ } else {
+ this.panel = 'page'
+ }
+ }
}
}
diff --git a/lib/client/src/element-materials/modifier/page/components/children/page-route-setting.vue b/lib/client/src/element-materials/modifier/page/components/children/page-route-setting.vue
new file mode 100644
index 000000000..18f76057f
--- /dev/null
+++ b/lib/client/src/element-materials/modifier/page/components/children/page-route-setting.vue
@@ -0,0 +1,191 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/client/src/element-materials/modifier/page/components/children/page-style-setting.vue b/lib/client/src/element-materials/modifier/page/components/children/page-style-setting.vue
new file mode 100644
index 000000000..7bf525f62
--- /dev/null
+++ b/lib/client/src/element-materials/modifier/page/components/children/page-style-setting.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/client/src/element-materials/modifier/page/components/page-func.vue b/lib/client/src/element-materials/modifier/page/components/page-func.vue
new file mode 100644
index 000000000..92832ffc8
--- /dev/null
+++ b/lib/client/src/element-materials/modifier/page/components/page-func.vue
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+ {{func.name}}：
+
+
+
+
+
+
+
+
+
diff --git a/lib/client/src/element-materials/modifier/page/components/page-setting.vue b/lib/client/src/element-materials/modifier/page/components/page-setting.vue
new file mode 100644
index 000000000..670acdeed
--- /dev/null
+++ b/lib/client/src/element-materials/modifier/page/components/page-setting.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/client/src/element-materials/modifier/page/index.vue b/lib/client/src/element-materials/modifier/page/index.vue
new file mode 100644
index 000000000..ee6da12e9
--- /dev/null
+++ b/lib/client/src/element-materials/modifier/page/index.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
diff --git a/lib/client/src/element-materials/modifier/template/editor/menu/edit.vue b/lib/client/src/element-materials/modifier/template/editor/menu/edit.vue
index 06496b861..ebde320a4 100644
--- a/lib/client/src/element-materials/modifier/template/editor/menu/edit.vue
+++ b/lib/client/src/element-materials/modifier/template/editor/menu/edit.vue
@@ -114,8 +114,8 @@
-
-
diff --git a/lib/client/src/preview/children/404/404.css b/lib/client/src/preview/children/404/404.css
new file mode 100644
index 000000000..a5993fded
--- /dev/null
+++ b/lib/client/src/preview/children/404/404.css
@@ -0,0 +1,5 @@
+.exception-wrap-item {
+ margin: 150px auto 0 !important;
+ height: 420px;
+ padding-top: 22px;
+}
diff --git a/lib/client/src/preview/children/404/404.js b/lib/client/src/preview/children/404/404.js
new file mode 100644
index 000000000..26c364211
--- /dev/null
+++ b/lib/client/src/preview/children/404/404.js
@@ -0,0 +1,52 @@
+import cssModule from './404.css?module'
+import {
+ h
+} from 'bk-lesscode-render'
+
+export default {
+ computed: {
+ pageRoute () {
+ const pageCode = this.$route.query.pageCode // '' | undefined | code
+ const pageRoute = this.$store.state['projectPageRouteList'].find(item => item.pageCode === pageCode)
+ return pageRoute || { pageCode }
+ }
+ },
+ render (render) {
+ h.init(render)
+
+ const renderChildren = () => {
+ const children = []
+ if (this.pageRoute.pageName) {
+ children.push(h({
+ component: 'span',
+ children: [
+ `未找到页面，请检查页面“${this.pageRoute.pageName}”的路由配置`
+ ]
+ }))
+ } else if (this.pageRoute.pageCode === '') {
+ children.push(h({
+ component: 'span',
+ children: [
+ '未找到应用首页，建议将地址“/”配置为应用默认首页'
+ ]
+ }))
+ } else if (!this.pageRoute.pageCode) {
+ children.push(h({
+ component: 'span',
+ children: [
+ '未找到页面'
+ ]
+ }))
+ }
+ }
+
+ return h({
+ component: 'bk-exception',
+ class: cssModule['exception-wrap-item'],
+ props: {
+ type: '404'
+ },
+ children: renderChildren()
+ })
+ }
+}
diff --git a/lib/client/src/preview/children/App.vue b/lib/client/src/preview/children/App.vue
deleted file mode 100644
index 5c485cf61..000000000
--- a/lib/client/src/preview/children/App.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
-
-
-
diff --git a/lib/client/src/preview/children/app/app.css b/lib/client/src/preview/children/app/app.css
new file mode 100644
index 000000000..78a593f07
--- /dev/null
+++ b/lib/client/src/preview/children/app/app.css
@@ -0,0 +1,75 @@
+* {
+ box-sizing: border-box;
+}
+html,body {
+ margin: 0;
+ padding: 0;
+}
+ul,li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+dl,dt,dd,p {
+ margin: 0;
+ padding: 0;
+}
+a {
+ text-decoration: none;
+}
+button {
+ outline: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+td,th {
+ padding: 0;
+}
+.navigation-bar {
+ width: 100%;
+ height: 100%;
+}
+.navigation-bar-container {
+ width: 100%;
+ max-width: 100%;
+}
+.bk-navigation, .lesscode-bk-navigation {
+ min-width: 1360px;
+ height: 100vh !important;
+}
+.bk-navigation-wrapper .navigation-container {
+ max-width: 100% !important;
+}
+.navigation-header .tippy-popper .tippy-tooltip.navigation-message-theme {
+ padding: 0;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.lesscode-bk-navigation-wrapper .navigation-container .container-content {
+ padding: 0px !important;
+}
+.tippy-tooltip .tippy-content {
+ padding: 0;
+}
+.tippy-tooltip .tippy-arrow {
+ width: 0;
+ height: 0;
+}
+.empty-padding.lesscode-bk-popover.lesscode-bk-pop2-content {
+ padding: 0 !important;
+}
+.lesscode-bk-color-picker-icon .icon-angle-down, .lesscode-bk-cascader-node .icon-angle-right, .lesscode-bk-transfer .icon-move, .lesscode-bk-transfer .icon-delete{
+ &::before {
+ content: '' !important;
+ }
+}
+.lesscode-bk-menu-submenu .submenu-header-icon {
+ color: #96a2b9;
+}
+
+.lesscode-bk-table-body-content .cell.none {
+ display: block !important;
+}
diff --git a/lib/client/src/preview/children/app/app.js b/lib/client/src/preview/children/app/app.js
new file mode 100644
index 000000000..45419e5ac
--- /dev/null
+++ b/lib/client/src/preview/children/app/app.js
@@ -0,0 +1,37 @@
+import './app.css'
+import { h } from 'bk-lesscode-render'
+
+export default {
+ name: 'app',
+ data () {
+ return {
+ userInfoLoading: true
+ }
+ },
+ created () {
+ this.getUserInfo()
+ },
+ methods: {
+ async getUserInfo () {
+ await this.$store.dispatch('userInfo')
+ this.userInfoLoading = false
+ }
+ },
+ render (render) {
+ h.init(render)
+
+ return h({
+ component: 'div',
+ attrs: {
+ id: 'app'
+ },
+ children: [
+ this.userInfoLoading
+ ? ''
+ : h({
+ component: 'router-view'
+ })
+ ]
+ })
+ }
+}
diff --git a/lib/client/src/preview/children/bk-error.vue b/lib/client/src/preview/children/bk-error.vue
deleted file mode 100644
index fc52f5c83..000000000
--- a/lib/client/src/preview/children/bk-error.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
- {{ message }}
-
-
-
-
-
-
-
diff --git a/lib/client/src/preview/children/bk-error/bk-error.css b/lib/client/src/preview/children/bk-error/bk-error.css
new file mode 100644
index 000000000..a5993fded
--- /dev/null
+++ b/lib/client/src/preview/children/bk-error/bk-error.css
@@ -0,0 +1,5 @@
+.exception-wrap-item {
+ margin: 150px auto 0 !important;
+ height: 420px;
+ padding-top: 22px;
+}
diff --git a/lib/client/src/preview/children/bk-error/bk-error.js b/lib/client/src/preview/children/bk-error/bk-error.js
new file mode 100644
index 000000000..21652552f
--- /dev/null
+++ b/lib/client/src/preview/children/bk-error/bk-error.js
@@ -0,0 +1,34 @@
+import cssModule from './bk-error.css?module'
+import { h } from 'bk-lesscode-render'
+
+export default {
+ data () {
+ return {
+ message: ''
+ }
+ },
+ mounted () {
+ this.message = this.$route.meta.message
+ },
+ render (render) {
+ h.init(render)
+
+ const self = this
+
+ return h({
+ component: 'bk-exception',
+ class: cssModule['exception-wrap-item'],
+ props: {
+ type: 500
+ },
+ children: [
+ h({
+ component: 'div',
+ children: [
+ self.message
+ ]
+ })
+ ]
+ })
+ }
+}
diff --git a/lib/client/src/preview/children/home.vue b/lib/client/src/preview/children/home.vue
deleted file mode 100644
index 716e24b63..000000000
--- a/lib/client/src/preview/children/home.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
diff --git a/lib/client/src/preview/children/home/home.js b/lib/client/src/preview/children/home/home.js
new file mode 100644
index 000000000..5b6dd34f2
--- /dev/null
+++ b/lib/client/src/preview/children/home/home.js
@@ -0,0 +1,15 @@
+import {
+ h
+} from 'bk-lesscode-render'
+
+export default {
+ name: 'Home',
+
+ render (render) {
+ h.init(render)
+
+ return h({
+ component: 'router-view'
+ })
+ }
+}
diff --git a/lib/client/src/preview/component.js b/lib/client/src/preview/component.js
index e9cdada30..c1493a2a5 100644
--- a/lib/client/src/preview/component.js
+++ b/lib/client/src/preview/component.js
@@ -8,26 +8,25 @@
* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
-
+import Vue from 'vue'
+import { registerComponent, install, vue3Resource } from 'bk-lesscode-render'
// 注入组件库
import '@/common/bkui-vue-complex'
import '@/common/fully-import'
import '@/common/element'
import '@/common/vant'
import * as swiperAni from '@/common/swiper.animate.min.js'
-import '@/css/animate.min.css'
// 注入全局组件
-import renderHtml from '@/components/patch/render-html/index.vue'
-import widgetBkTable from '@/components/patch/widget-bk-table/index.vue'
+import renderHtml from '@/components/render/pc/widget/html/index'
+import widgetBkTable from '@/components/render/pc/widget/table/table'
import widgetElTable from '@/components/patch/widget-el-table/index.vue'
-import widgetTableColumn from '@/components/patch/widget-table-column/index.vue'
+import widgetTableColumn from '@/components/render/pc/widget/table/table-column'
import processForm from '@/components/flow-form-comp/process-form'
import dataManage from '@/components/flow-form-comp/data-manage'
import mavonEditor from 'mavon-editor'
-import 'mavon-editor/dist/css/index.css'
-module.exports = (Vue, projectId, versionId) => {
+const loadCustomComponents = (projectId, versionId, framework) => {
return new Promise((resolve, reject) => {
// 注入自定义组件
window.previewCustomCompontensPlugin = []
@@ -39,8 +38,10 @@ module.exports = (Vue, projectId, versionId) => {
script.src = `/${parseInt(projectId)}/component/preview-register.js?v=${versionId || ''}`
script.onload = () => {
window.previewCustomCompontensPlugin.forEach(callback => {
- const [config, source] = callback(Vue)
- Vue.component(config.type, source)
+ const [config, source] = callback(framework === 'vue2' ? Vue : vue3Resource)
+ new Promise((resolve) => source(resolve)).then((component) => {
+ registerComponent(config.type, component)
+ })
})
resolve()
}
@@ -48,14 +49,26 @@ module.exports = (Vue, projectId, versionId) => {
reject(err.message || err || window.i18n.t('获取自定义组件失败'))
}
document.body.appendChild(script)
+ })
+}
+const registerSysComponents = () => {
+ return new Promise((resolve, reject) => {
// 注入全局组件
- Vue.component('renderHtml', renderHtml)
- Vue.component('widget-bk-table', widgetBkTable)
- Vue.component('widget-el-table', widgetElTable)
- Vue.component('renderColumn', widgetTableColumn)
- Vue.component('processForm', processForm)
- Vue.component('dataManage', dataManage)
- Vue.use(mavonEditor)
+ registerComponent('render-html', renderHtml)
+ registerComponent('widget-bk-table', widgetBkTable)
+ registerComponent('widget-el-table', widgetElTable)
+ registerComponent('widget-table-column', widgetTableColumn)
+ registerComponent('processForm', processForm)
+ registerComponent('dataManage', dataManage)
+ install(mavonEditor)
+ resolve()
})
}
+
+export const registerComponents = (projectId, versionId, framework) => {
+ return Promise.all([
+ loadCustomComponents(projectId, versionId, framework),
+ registerSysComponents()
+ ])
+}
diff --git a/lib/client/src/preview/index.js b/lib/client/src/preview/index.js
index 4b878b6e9..05c1d2371 100644
--- a/lib/client/src/preview/index.js
+++ b/lib/client/src/preview/index.js
@@ -9,82 +9,58 @@
* specific language governing permissions and limitations under the License.
*/
import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
import pureAxios from '@/api/pureAxios.js'
-import { errorHandle } from './overlay'
-import registerComponent from './component'
-import App from './children/App.vue'
-import i18n from '@/locales/i18n'
-import ApplyPage from '@/components/apply-permission/apply-page.vue'
-import generateRouter from './router'
-import generateStore from './store'
-// 注入全局样式
-import '../../../server/project-template/project-init-code/lib/client/src/css/app.css'
-import '../../../server/project-template/project-init-code/lib/client/src/css/reset.css'
+import {
+ init as handleInit,
+ addGlobalProperty
+} from 'bk-lesscode-render'
+import {
+ handleError,
+ handleUnauth
+} from './overlay'
+import {
+ handleRender
+} from './render'
+import {
+ handleStyle
+} from './style'
+import {
+ registerComponents as handleRegisterComponents
+} from './component'
+
+// 设置 未发布请勿分享 的国际化
+const previewTipDom = document.getElementById('preview-tip')
+if (previewTipDom) {
+ previewTipDom.innerHTML = window.i18n.t('未发布
请勿分享')
+ previewTipDom.setAttribute('style', 'display: block')
+}
+document.title = window.i18n.t('可视化开发平台 | 腾讯蓝鲸智云')
// 解析 url 参数
const location = window.location
const projectIdReg = new RegExp(`${location.origin}/preview/project/(\\d+)(/version/(\\d+))?(/platform/(PC|MOBILE))?`)
const [, projectId, , versionId = null, , platform] = projectIdReg.exec(location.href) || []
+Vue.use(VueCompositionAPI)
-Promise.all([
- pureAxios.get('/projectCode/previewCode', {
+pureAxios
+ .get('/projectCode/previewCode', {
params: {
projectId,
platform,
versionId
}
- }),
- registerComponent(Vue, projectId, versionId)
-]).then(([res]) => {
- const { code, data } = res
- if (code === 403) {
- if (data.pass === false) {
- window.app = new Vue({
- el: '#preview-app',
- components: { ApplyPage },
- data () {
- return {
- authResult: data
- }
- },
- template: '
'
- })
+ })
+ .then(async (res) => {
+ const { code, data } = res
+ if (code === 403) {
+ handleUnauth(data)
} else {
- errorHandle({
- response: {
- data: {
- message: window.i18n.t('当前页面无权限')
- }
- }
- })
+ handleInit(data.framework)
+ await handleRegisterComponents(projectId, versionId, data.framework)
+ handleStyle(data.framework)
+ handleRender(data, projectId, versionId, platform)
+ addGlobalProperty('$http', pureAxios)
}
- } else {
- Vue.prototype.$http = pureAxios
- const data = res.data || {}
- const projectPageRouteList = (data.pageRouteList || []).map(item => ({
- ...item,
- fullPath: item.id ? `${item.layoutPath}${item.layoutPath.endsWith('/') ? '' : '/'}${item.path}` : ''
- }))
- const projectRouteList = (Object.values(data.routeGroup || {}) || []).map(({ children }) => children)
- .reduce((pre, cur) => pre.concat(cur), [])
- .map(({ id, layoutPath, path, redirect, pageCode }) => ({
- id,
- layoutPath,
- path,
- redirect,
- pageCode,
- fullPath: `${layoutPath}${layoutPath.endsWith('/') ? '' : '/'}${path}`
- }))
-
- const router = generateRouter(data.routeGroup, projectPageRouteList, projectRouteList, projectId, platform, versionId)
- const store = generateStore(data.storeData, { projectPageRouteList, projectRouteList })
- window.app = new Vue({
- el: '#preview-app',
- components: { App },
- router,
- store,
- i18n,
- template: '
'
- })
- }
-}).catch(errorHandle)
+ })
+ .catch(handleError)
diff --git a/lib/client/src/preview/overlay.js b/lib/client/src/preview/overlay.js
index d4a2bf1c4..0d13d3174 100644
--- a/lib/client/src/preview/overlay.js
+++ b/lib/client/src/preview/overlay.js
@@ -8,10 +8,12 @@
* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
-
+import Vue from 'vue'
import Img403 from '@/images/403.png'
+import ApplyPage from '@/components/apply-permission/apply-page.vue'
-function errorHandle (err = {}) {
+export const handleError = (err = {}) => {
+ console.error(err)
const response = err.response || {}
const data = response.data || {}
const message = data.message || err.message || window.i18n.t('无法连接到后端服务，请稍候再试。')
@@ -34,6 +36,25 @@ function errorHandle (err = {}) {
parentNode.innerHTML = content
}
-module.exports = {
- errorHandle
+export const handleUnauth = (data) => {
+ if (data.pass === false) {
+ window.app = new Vue({
+ el: '#preview-app',
+ components: { ApplyPage },
+ data () {
+ return {
+ authResult: data
+ }
+ },
+ template: '
'
+ })
+ } else {
+ handleError({
+ response: {
+ data: {
+ message: '当前页面无权限'
+ }
+ }
+ })
+ }
}
diff --git a/lib/client/src/preview/render.js b/lib/client/src/preview/render.js
new file mode 100644
index 000000000..2bdd24fab
--- /dev/null
+++ b/lib/client/src/preview/render.js
@@ -0,0 +1,37 @@
+import App from './children/app/app'
+import generateRouter from './router'
+import generateStore from './store'
+import {
+ render
+} from 'bk-lesscode-render'
+import {
+ i18nConfig
+} from '@/locales/i18n.js'
+
+export const handleRender = (data, projectId, versionId, platform) => {
+ const projectPageRouteList = (data.pageRouteList || []).map(item => ({
+ ...item,
+ fullPath: item.id ? `${item.layoutPath}${item.layoutPath.endsWith('/') ? '' : '/'}${item.path}` : ''
+ }))
+ const projectRouteList = (Object.values(data.routeGroup || {}) || []).map(({ children }) => children)
+ .reduce((pre, cur) => pre.concat(cur), [])
+ .map(({ id, layoutPath, path, redirect, pageCode }) => ({
+ id,
+ layoutPath,
+ path,
+ redirect,
+ pageCode,
+ fullPath: `${layoutPath}${layoutPath.endsWith('/') ? '' : '/'}${path}`
+ }))
+
+ const router = generateRouter(data.routeGroup, projectPageRouteList, projectRouteList, projectId, platform, versionId)
+ const store = generateStore(data.storeData, { projectPageRouteList, projectRouteList })
+ // 执行渲染
+ window.app = render({
+ component: App,
+ router,
+ store,
+ i18nConfig,
+ selector: '#preview-app'
+ })
+}
diff --git a/lib/client/src/preview/router.js b/lib/client/src/preview/router.js
index f99a39d8e..57d1d5ed7 100644
--- a/lib/client/src/preview/router.js
+++ b/lib/client/src/preview/router.js
@@ -8,25 +8,41 @@
* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
-// import httpVueLoader from '@/common/http-vue-loader'
import { uuid } from 'shared/util'
-import { getRouteFullPath, getRouteName, getFinalRoute, getProjectDefaultRoute } from 'shared/route'
+import {
+ getRouteFullPath,
+ getRouteName,
+ getFinalRoute,
+ getProjectDefaultRoute
+} from 'shared/route'
import VueRouter from 'vue-router'
import Vue from 'vue'
-import Home from './children/home.vue'
-import BkNotFound from './children/404.vue'
-import BkError from './children/bk-error.vue'
-import { bundless, triggleUpdate } from '@blueking/bundless'
+import {
+ createRouter,
+ framework,
+ vue3Resource
+} from 'bk-lesscode-render'
+import Home from './children/home/home'
+import BkNotFound from './children/404/404'
+import BkError from './children/bk-error/bk-error'
+import {
+ bundless,
+ triggleUpdate
+} from '@blueking/bundless'
import bundlessPluginVue2 from '@blueking/bundless-plugin-vue2'
+import bundlessPluginVue3 from '@blueking/bundless-plugin-vue3'
Vue.use(VueRouter)
const uniqStr = uuid()
function registerComponent (source, id) {
+ const bundlessPluginVue = framework === 'vue3'
+ ? bundlessPluginVue3(vue3Resource)
+ : bundlessPluginVue2
return bundless({
source,
id,
- plugins: [bundlessPluginVue2]
+ plugins: [bundlessPluginVue]
})
}
@@ -46,6 +62,15 @@ window.addEventListener('storage', (event) => {
// 生成路由
module.exports = (routeGroup, projectPageRouteList, projectRouteList, projectId, platform, versionId) => {
+ // 如果是预览移动端， 则只生成移动端相关router
+ if (platform === 'MOBILE') {
+ Object.keys(routeGroup).forEach(key => {
+ if (routeGroup[key]?.layoutType?.indexOf('mobile') === -1) {
+ delete routeGroup[key]
+ }
+ })
+ }
+ const allPath = framework === 'vue3' ? '/:pathMatch(.*)' : '*'
const routes = []
// 当前编辑页面的内容信息
const editPageData = JSON.parse(localStorage.getItem('ONLINE_PREVIEW_CONTENT') || '{}')
@@ -111,7 +136,7 @@ module.exports = (routeGroup, projectPageRouteList, projectRouteList, projectId,
// 404
if (layout.path !== '/') {
- children.push({ path: '*', component: BkNotFound })
+ children.push({ path: allPath, component: BkNotFound })
}
routes.push({
@@ -156,7 +181,7 @@ module.exports = (routeGroup, projectPageRouteList, projectRouteList, projectId,
component: BkNotFound
},
{
- path: '*',
+ path: allPath,
redirect: { name: '404' }
}
]
@@ -168,10 +193,11 @@ module.exports = (routeGroup, projectPageRouteList, projectRouteList, projectId,
if (platform) {
base = `${base}/platform/${platform}`
}
-
- return new VueRouter({
- mode: 'history',
- base,
- routes: allRoutes
- })
+ return createRouter(
+ {
+ base,
+ routes: allRoutes
+ },
+ VueRouter
+ )
}
diff --git a/lib/client/src/preview/store.js b/lib/client/src/preview/store.js
index d170e6626..b656c0c66 100644
--- a/lib/client/src/preview/store.js
+++ b/lib/client/src/preview/store.js
@@ -8,10 +8,9 @@
* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
-import Vue from 'vue'
import Vuex from 'vuex'
+import { createStore } from 'bk-lesscode-render'
import pureAxios from '@/api/pureAxios.js'
-Vue.use(Vuex)
function getVariableModule (storeData) {
function getInitVariableValue (defaultValue, defaultValueType) {
@@ -40,48 +39,51 @@ function getVariableModule (storeData) {
}
function getStore (variable, globalData) {
- return new Vuex.Store({
- modules: {
- variable
- },
- state: {
- user: {},
- ...globalData
- },
- getters: {
- user: state => state.user
- },
- mutations: {
- updateUser (state, user) {
- state.user = Object.assign({}, user)
- }
- },
- actions: {
- userInfo ({ commit }, config) {
- return pureAxios.get('/user/userinfo', config).then(response => {
- const userData = response.data || {}
- userData.isAuthenticated = userData.code !== 'Unauthorized'
- commit('updateUser', userData)
- return userData
- })
+ return createStore(
+ {
+ modules: {
+ variable
},
- getApiData ({ state }, data) {
- const parent = window.parent || {}
- const parentLocation = parent.location || {}
- const url = parentLocation.href
- const exp = new RegExp(`${parentLocation.origin}/preview/project/([^/]+)`)
- const res = exp.exec(url) || []
- const projectId = res[1] || ''
- const postData = {
- projectId,
- ...data
+ state: {
+ user: {},
+ ...globalData
+ },
+ getters: {
+ user: state => state.user
+ },
+ mutations: {
+ updateUser (state, user) {
+ state.user = Object.assign({}, user)
+ }
+ },
+ actions: {
+ userInfo ({ commit }, config) {
+ return pureAxios.get('/user/userinfo', config).then(response => {
+ const userData = response.data || {}
+ userData.isAuthenticated = userData.code !== 'Unauthorized'
+ commit('updateUser', userData)
+ return userData
+ })
+ },
+ getApiData ({ state }, data) {
+ const parent = window.parent || {}
+ const parentLocation = parent.location || {}
+ const url = parentLocation.href
+ const exp = new RegExp(`${parentLocation.origin}/preview/project/([^/]+)`)
+ const res = exp.exec(url) || []
+ const projectId = res[1] || ''
+ const postData = {
+ projectId,
+ ...data
+ }
+ return pureAxios.post('/data/getApiData', postData, { globalError: false }).then(response => {
+ return response
+ })
}
- return pureAxios.post('/data/getApiData', postData, { globalError: false }).then(response => {
- return response
- })
}
- }
- })
+ },
+ Vuex
+ )
}
module.exports = (storeData, globalData) => {
diff --git a/lib/client/src/preview/style.js b/lib/client/src/preview/style.js
new file mode 100644
index 000000000..6c0e60957
--- /dev/null
+++ b/lib/client/src/preview/style.js
@@ -0,0 +1,13 @@
+// 处理预览时候的样式
+export const handleStyle = (framework) => {
+ require('@/css/animate.min.css')
+ require('mavon-editor/dist/css/index.css')
+ if (framework === 'vue3') {
+ require('../../../server/project-template/vue3/project-init-code/lib/client/src/css/app.css')
+ require('../../../server/project-template/vue3/project-init-code/lib/client/src/css/reset.css')
+ require('bk-lesscode-render/dist/index.css')
+ } else {
+ require('../../../server/project-template/vue2/project-init-code/lib/client/src/css/app.css')
+ require('../../../server/project-template/vue2/project-init-code/lib/client/src/css/reset.css')
+ }
+}
diff --git a/lib/client/src/router/index.js b/lib/client/src/router/index.js
index 570a495d6..0bfa3984d 100644
--- a/lib/client/src/router/index.js
+++ b/lib/client/src/router/index.js
@@ -9,14 +9,15 @@
* specific language governing permissions and limitations under the License.
*/
-import _ from 'lodash'
import Vue from 'vue'
import VueRouter from 'vue-router'
+import { bus } from '@/common/bus'
import store from '@/store'
import preload from '@/common/preload'
import { IAM_ACTION } from 'shared/constant'
import { leaveConfirm } from '@/common/leave-confirm'
+import { FOLD_MENU_ROUTE_LIST } from '@/common/constant-en'
Vue.use(VueRouter)
@@ -246,13 +247,31 @@ const routes = [
},
redirect: { name: 'pageList' },
children: [
+ {
+ name: 'page-entry',
+ path: 'page/:pageId',
+ redirect: { name: 'new' },
+ components: {
+ default: MainEntry,
+ permission: require('@/views/status/403').default
+ },
+ children: [
+ {
+ path: '',
+ name: 'new',
+ component: Index
+ },
+ {
+ path: 'edit',
+ name: 'editNocode',
+ component: EditNocode
+ }
+ ]
+ },
{
path: 'pages',
name: 'pageList',
- component: PageManage,
- meta: {
- title: '页面列表'
- }
+ component: PageManage
},
{
path: 'component-manage',
@@ -378,19 +397,13 @@ const routes = [
{
path: '',
name: 'flowConfig',
- component: FlowConfig,
- meta: {
- hideSideNav: true
- }
+ component: FlowConfig
},
// 流程设计
{
path: 'advanced',
name: 'flowAdvancedConfig',
- component: FlowAdvancedConfig,
- meta: {
- hideSideNav: true
- }
+ component: FlowAdvancedConfig
}
]
},
@@ -398,10 +411,7 @@ const routes = [
{
path: ':flowId/page/:pageId',
name: 'createTicketPageEdit',
- component: CreateTicketPageEdit,
- meta: {
- hideSideNav: true
- }
+ component: CreateTicketPageEdit
}
]
},
@@ -479,30 +489,6 @@ const routes = [
}
]
},
- {
- name: 'page-entry',
- path: '/project/:projectId/page/:pageId',
- components: {
- default: MainEntry,
- permission: require('@/views/status/non-exist-project').default
- },
- meta: {
- owner: 'projects'
- },
- redirect: { name: 'new' },
- children: [
- {
- path: '',
- name: 'new',
- component: Index
- },
- {
- path: 'edit',
- name: 'editNocode',
- component: EditNocode
- }
- ]
- },
{
path: '/preview-template/project/:projectId/:templateId',
name: 'previewTemplate',
@@ -527,13 +513,6 @@ const routes = [
]
const router = new VueRouter({
mode: 'history',
- // scrollBehavior: (to, from, savedPosition) => {
- // if (to.hash) {
- // return { selector: to.hash }
- // } else {
- // return { x: 0, y: 0 }
- // }
- // },
routes: routes
})
@@ -562,11 +541,24 @@ const checkViewAuth = async (to) => {
let preloading = true
let pageMethodExecuting = true
+// 设置左侧菜单默认展开收起
+const setAsideFold = (toName = '', fromName = '') => {
+ console.log(toName, fromName, 'route')
+ // 两个画布页面、流程子页面需要自动收起菜单
+ const foldAsideList = FOLD_MENU_ROUTE_LIST
+ if (foldAsideList.indexOf(toName) !== -1) {
+ bus.$emit('is-fold-aside', { isFold: true, showMenuFooter: false })
+ } else if (foldAsideList.indexOf(fromName) > -1) {
+ bus.$emit('is-fold-aside', { isFold: false, showMenuFooter: true })
+ }
+}
+
router.beforeEach(async (to, from, next) => {
try {
Vue.set(to.meta, 'authed', false)
await checkViewAuth(to)
Vue.set(to.meta, 'authed', true)
+ setAsideFold(to.name, from.name)
next()
} catch (e) {
console.error(e)
@@ -627,29 +619,6 @@ router.replace = (params, callback = () => {}) => {
}
// 浏览器路由回退时
router.afterEach(() => {
- history.pushState(null, null, document.URL)
- const callback = () => {
- leaveConfirm()
- .then(() => {
- window.removeEventListener('popstate', callback)
- window.history.go(-2)
- })
- .catch(() => {
- history.pushState(null, null, document.URL)
- })
- }
-
- window.addEventListener('popstate', callback)
-
- const currentRoute = _.last(router.currentRoute.matched)
- if (currentRoute && currentRoute.instances.default) {
- const routerDefault = currentRoute.instances.default
- setTimeout(() => {
- routerDefault.$once('hook:beforeDestroy', () => {
- window.removeEventListener('popstate', callback)
- })
- })
- }
})
export const useRouter = () => router
diff --git a/lib/client/src/store/index.js b/lib/client/src/store/index.js
index 070554ee8..8eba52ed3 100644
--- a/lib/client/src/store/index.js
+++ b/lib/client/src/store/index.js
@@ -28,6 +28,7 @@ import member from './modules/member'
import form from './modules/nocode/form'
import flow from './modules/nocode/flow'
import logs from './modules/logs'
+import iconManage from './modules/icon-manage'
import functionMarket from './modules/function-market'
import projectVersion from './modules/project-version'
import dataSource from './modules/data-source'
@@ -50,7 +51,7 @@ import jsCookie from 'js-cookie'
Vue.use(Vuex)
-const store = new Vuex.Store({
+export const storeConfig = {
// 模块
modules: {
drag,
@@ -69,6 +70,7 @@ const store = new Vuex.Store({
form,
flow,
logs,
+ iconManage,
functionMarket,
projectVersion,
dataSource,
@@ -90,6 +92,7 @@ const store = new Vuex.Store({
primaryColor: '#f5f6fa',
secondaryColor: '#FAFAFC'
},
+ isExternal: process.env.BK_ENGINE_REGION !== 'ieod',
// 权限中心无依赖资源的操作权限
iamNoResourcesPerm: {
[IAM_ACTION.manage_function[0]]: false,
@@ -105,7 +108,7 @@ const store = new Vuex.Store({
[IAM_ACTION.download_page_template_source[0]]: false
},
// 获取当前语言环境
- Language: jsCookie.get('blueking_language')
+ Language: jsCookie.get('blueking_language') || 'zh-cn'
},
// 公共 getters
getters: {
@@ -209,7 +212,7 @@ const store = new Vuex.Store({
})
},
- updatePreview ({ state }, { isGenerateNav, id, curTemplateData, types, storageKey, nocodePayload = {} }) {
+ updatePreview ({ state }, { isGenerateNav, id, curTemplateData, types, storageKey, nocodePayload = {}, framework }) {
let targetData = []
try {
targetData = JSON.parse(circleJSON(LC.getRoot().toJSON().renderSlots.default))
@@ -218,12 +221,13 @@ const store = new Vuex.Store({
}
const funcGroups = JSON.parse(circleJSON(state.functions.funcGroups || []))
const variableList = JSON.parse(circleJSON(state.variable.variableList || []))
+ const lifeCycle = isGenerateNav ? {} : state.page.pageDetail?.lifeCycle
const pageData = getPageCode({
targetData,
pageType: 'preview',
platform: state.page.pageDetail?.pageType,
funcGroups,
- lifeCycle: state.page.pageDetail?.lifeCycle,
+ lifeCycle,
projectId: router.currentRoute.params?.projectId,
pageId: router.currentRoute.params?.pageId,
layoutContent: curTemplateData,
@@ -239,7 +243,8 @@ const store = new Vuex.Store({
apiList: state.api.apiData?.map(group => group.children).flat(),
nocodeType: state.page.pageDetail?.nocodeType,
nocodePayload,
- isRenderAppPermComponents: false
+ isRenderAppPermComponents: false,
+ framework
})
const payload = JSON.stringify({
types,
@@ -249,7 +254,9 @@ const store = new Vuex.Store({
localStorage.setItem(storageKey, payload)
}
}
-})
+}
+
+const store = new Vuex.Store(storeConfig)
/**
* hack vuex dispatch, add third parameter `config` to the dispatch method
diff --git a/lib/client/src/store/modules/drag.js b/lib/client/src/store/modules/drag.js
index 737791a22..18e610e96 100644
--- a/lib/client/src/store/modules/drag.js
+++ b/lib/client/src/store/modules/drag.js
@@ -152,6 +152,5 @@ export default {
curSelectedComponentData: state => state.curSelectedComponentData,
curTemplateData: state => state.curTemplateData,
freeLayoutItemPlaceholderPointerEvents: state => state.freeLayoutItemPlaceholderPointerEvents
- },
- actions: {}
+ }
}
diff --git a/lib/client/src/store/modules/icon-manage.js b/lib/client/src/store/modules/icon-manage.js
new file mode 100644
index 000000000..3242ed0db
--- /dev/null
+++ b/lib/client/src/store/modules/icon-manage.js
@@ -0,0 +1,70 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import http from '@/api'
+
+export default {
+ namespaced: true,
+ state: {
+ iconList: []
+ },
+ mutations: {
+ setIconList (state, iconList) {
+ state.iconList = Object.freeze(iconList)
+ }
+ },
+ getters: {
+ },
+ actions: {
+ projectList (state, params = {}) {
+ return http.get('/icon-manage/project-list', { params }).then(response => {
+ const data = response.data || {}
+ return data
+ })
+ },
+ list ({ commit }, params = {}) {
+ return http.get('/icon-manage/list', { params }).then(response => {
+ const data = response.data || []
+ commit('setIconList', data)
+ })
+ },
+ useing (state, params = {}) {
+ return http.get('/icon-manage/useing', { params }).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ use (state, params = {}) {
+ return http.post('/icon-manage/use', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ usageRecord (state, params = {}) {
+ return http.get('/icon-manage/usageRecord', { params }).then(response => {
+ const data = response.data || []
+ return data
+ })
+ },
+ upgrade (state, params = {}) {
+ return http.post('/icon-manage/upgrade', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ remove (state, params = {}) {
+ return http.post('/icon-manage/remove', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ }
+ }
+}
diff --git a/lib/client/src/store/modules/layout.js b/lib/client/src/store/modules/layout.js
index 27ee5e001..2c4d7be6d 100644
--- a/lib/client/src/store/modules/layout.js
+++ b/lib/client/src/store/modules/layout.js
@@ -10,6 +10,12 @@
*/
import http from '@/api'
+import {
+ triggerEventListener
+} from '@/common/watcher'
+import {
+ NOTICE_TYPE
+} from '@/components/render/common/constant'
export default {
namespaced: true,
@@ -19,6 +25,7 @@ export default {
mutations: {
setPageLayout (state, payload) {
state.pageLayout = Object.freeze(payload)
+ triggerEventListener(NOTICE_TYPE.LAYOUT_CHANGE, state.pageLayout)
}
},
getters: {
diff --git a/lib/client/src/store/modules/nocode/markdown.js b/lib/client/src/store/modules/nocode/markdown.js
index 0b12f1c98..c994cae9c 100644
--- a/lib/client/src/store/modules/nocode/markdown.js
+++ b/lib/client/src/store/modules/nocode/markdown.js
@@ -1,16 +1,16 @@
-export default {
- namespaced: true,
- state: {
- mdContent: ''
- },
- mutations: {
- setMdContent (state, data) {
- state.mdContent = data
- }
- },
- getters: {
- mdContent: state => state.mdContent
- },
- actions: {
- }
-}
+export default {
+ namespaced: true,
+ state: {
+ mdContent: ''
+ },
+ mutations: {
+ setMdContent (state, data) {
+ state.mdContent = data
+ }
+ },
+ getters: {
+ mdContent: state => state.mdContent
+ },
+ actions: {
+ }
+}
diff --git a/lib/client/src/store/modules/page-template.js b/lib/client/src/store/modules/page-template.js
index b4ca9a2f5..6254e8f0a 100644
--- a/lib/client/src/store/modules/page-template.js
+++ b/lib/client/src/store/modules/page-template.js
@@ -1,120 +1,123 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-import http from '@/api'
-
-export default {
- namespaced: true,
- state: {
- },
- mutations: {
- },
- getters: {
- },
- actions: {
- list (state, params = {}) {
- return http.get('/pageTemplate/list', { params }).then(response => {
- const data = response.data || ''
- return data
- })
- },
- listByCategory (state, { projectId }) {
- return http.get(`/pageTemplate/listByCategory?projectId=${projectId}`).then(response => {
- const data = response.data || ''
- return data
- })
- },
- detail (state, params = {}) {
- return http.get('/pageTemplate/detail', { params }).then(response => {
- const data = response.data || ''
- return data
- })
- },
- checkIsExist (state, params = {}) {
- return http.post('/pageTemplate/checkIsExist', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- create (state, params) {
- return http.post('/pageTemplate/create', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- apply (state, params = {}) {
- return http.post('pageTemplate/apply', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- import (state, params = {}) {
- return http.post('pageTemplate/import', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- update (state, params = {}) {
- return http.post('/pageTemplate/update', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- delete ({ commit }, { templateId }) {
- return http.delete(`/pageTemplate/delete?templateId=${templateId}`).then(response => {
- const data = response.data || ''
- return data
- })
- },
- categoryCount (state, { projectId }) {
- return http.get(`/pageTemplate/categoryCount?projectId=${projectId}`).then(response => {
- const data = response.data || ''
- return data
- })
- },
- categoryList (state, params = {}) {
- return http.get('/pageTemplateCategory/list', { params }).then(response => {
- const data = response.data || ''
- return data
- })
- },
- categoryCreate (state, params) {
- return http.post('/pageTemplateCategory/create', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- categoryUpdate (state, params) {
- return http.post('/pageTemplateCategory/update', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- categorySort (state, params) {
- return http.post('/pageTemplateCategory/sort', params).then(response => {
- const data = response.data || ''
- return data
- })
- },
- categoryDelete (state, params) {
- return http.delete('/pageTemplateCategory/delete', { params }).then(response => {
- const data = response.data || ''
- return data
- })
- },
- getProjectFuncAndVar (state, params = {}) {
- return http.get('/pageTemplate/getProjectFuncAndVar', { params }).then(response => {
- const data = response.data || ''
- return data
- })
- }
- }
-}
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import http from '@/api'
+
+export default {
+ namespaced: true,
+ state: {
+ },
+ mutations: {
+ },
+ getters: {
+ },
+ actions: {
+ list (state, params = {}) {
+ return http.get('/pageTemplate/list', { params }).then(response => {
+ const data = response.data || ''
+ data.forEach((item) => {
+ item.templateName = window.i18n.t(item.templateName)
+ })
+ return data
+ })
+ },
+ listByCategory (state, { projectId }) {
+ return http.get(`/pageTemplate/listByCategory?projectId=${projectId}`).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ detail (state, params = {}) {
+ return http.get('/pageTemplate/detail', { params }).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ checkIsExist (state, params = {}) {
+ return http.post('/pageTemplate/checkIsExist', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ create (state, params) {
+ return http.post('/pageTemplate/create', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ apply (state, params = {}) {
+ return http.post('pageTemplate/apply', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ import (state, params = {}) {
+ return http.post('pageTemplate/import', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ update (state, params = {}) {
+ return http.post('/pageTemplate/update', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ delete ({ commit }, { templateId }) {
+ return http.delete(`/pageTemplate/delete?templateId=${templateId}`).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ categoryCount (state, { projectId }) {
+ return http.get(`/pageTemplate/categoryCount?projectId=${projectId}`).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ categoryList (state, params = {}) {
+ return http.get('/pageTemplateCategory/list', { params }).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ categoryCreate (state, params) {
+ return http.post('/pageTemplateCategory/create', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ categoryUpdate (state, params) {
+ return http.post('/pageTemplateCategory/update', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ categorySort (state, params) {
+ return http.post('/pageTemplateCategory/sort', params).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ categoryDelete (state, params) {
+ return http.delete('/pageTemplateCategory/delete', { params }).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ },
+ getProjectFuncAndVar (state, params = {}) {
+ return http.get('/pageTemplate/getProjectFuncAndVar', { params }).then(response => {
+ const data = response.data || ''
+ return data
+ })
+ }
+ }
+}
diff --git a/lib/client/src/store/modules/project.js b/lib/client/src/store/modules/project.js
index be201d83c..fb6f51975 100644
--- a/lib/client/src/store/modules/project.js
+++ b/lib/client/src/store/modules/project.js
@@ -25,8 +25,8 @@ export default {
}
},
getters: {
- currentProject: state => state.currentProject,
- projectDetail: state => state.currentProject
+ currentProject: state => state.currentProject || {},
+ projectDetail: state => state.currentProject || {}
},
actions: {
create ({ commit }, { data, config }) {
diff --git a/lib/client/src/store/modules/variable.js b/lib/client/src/store/modules/variable.js
index e8198b440..0c4db8b35 100644
--- a/lib/client/src/store/modules/variable.js
+++ b/lib/client/src/store/modules/variable.js
@@ -11,6 +11,9 @@
import http from '@/api'
import { VARIABLE_TYPE, VARIABLE_VALUE_TYPE } from 'shared/variable/index.js'
+import {
+ triggerEventListener
+} from '@/common/watcher'
const variablePerfix = '/variable'
export default {
@@ -49,6 +52,7 @@ export default {
variable.defaultValue[key] = newVariable
})
}
+ triggerEventListener(newVariable.variableCode)
}
})
}
@@ -93,6 +97,7 @@ export default {
const data = response.data || []
data.defaultValue = JSON.parse(data.defaultValue || '{}')
commit('editVariable', data)
+ triggerEventListener(data.variableCode)
return data
})
},
diff --git a/lib/client/src/store/modules/vue-code.js b/lib/client/src/store/modules/vue-code.js
index 47c3ecbf1..2a06f24e2 100644
--- a/lib/client/src/store/modules/vue-code.js
+++ b/lib/client/src/store/modules/vue-code.js
@@ -39,7 +39,7 @@ export default {
},
getPageCode ({ state }, data) {
return http.post('/vueCode/getPageCode', data).then(response => {
- const data = response.data || {}
+ const data = response.data || ''
const codeErrMessage = response.codeErrMessage || ''
if (codeErrMessage) bkMessage({ theme: 'warning', message: codeErrMessage })
return data
diff --git a/lib/client/src/views/edit-nocode/components/action-tool/components/code-and-json.vue b/lib/client/src/views/edit-nocode/components/action-tool/components/code-and-json.vue
new file mode 100644
index 000000000..bc6481431
--- /dev/null
+++ b/lib/client/src/views/edit-nocode/components/action-tool/components/code-and-json.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/lib/client/src/views/edit-nocode/components/action-tool/index.vue b/lib/client/src/views/edit-nocode/components/action-tool/index.vue
index e42d34172..cdb6bb8b4 100644
--- a/lib/client/src/views/edit-nocode/components/action-tool/index.vue
+++ b/lib/client/src/views/edit-nocode/components/action-tool/index.vue
@@ -1,37 +1,23 @@
@@ -41,10 +27,4 @@
align-items: center;
height: 100%;
}
- .func-split-line {
- background-color: #dcdee5;
- height: 22px;
- margin-left: 5px;
- width: 1px;
- }
diff --git a/lib/client/src/views/edit-nocode/components/header-operate/data-manage-operate.vue b/lib/client/src/views/edit-nocode/components/header-operate/data-manage-operate.vue
new file mode 100644
index 000000000..42302074d
--- /dev/null
+++ b/lib/client/src/views/edit-nocode/components/header-operate/data-manage-operate.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+ {{name}}
+
+
+
+
+
diff --git a/lib/client/src/views/edit-nocode/components/header-operate/form-page-operate.vue b/lib/client/src/views/edit-nocode/components/header-operate/form-page-operate.vue
new file mode 100644
index 000000000..c31dccca6
--- /dev/null
+++ b/lib/client/src/views/edit-nocode/components/header-operate/form-page-operate.vue
@@ -0,0 +1,175 @@
+
+
+
+
+ {{ $t('生成表单数据管理页') }}
+
+
+
+ {{ $t('关联的数据管理页面（{0}）', [dataManagePages.length]) }}
+
+
+
+ {{ $t('已生成') }} {{ dataManagePages.length }}
+ {{ $t('个数据管理页') }}
+
+
+
+
+ -
+
+ {{item.pageName}}
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/client/src/views/edit-nocode/components/header-operate/index.vue b/lib/client/src/views/edit-nocode/components/header-operate/index.vue
new file mode 100644
index 000000000..d29d9880f
--- /dev/null
+++ b/lib/client/src/views/edit-nocode/components/header-operate/index.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
diff --git a/lib/client/src/views/edit-nocode/components/action-tool/components/save.vue b/lib/client/src/views/edit-nocode/components/header-operate/save.vue
similarity index 83%
rename from lib/client/src/views/edit-nocode/components/action-tool/components/save.vue
rename to lib/client/src/views/edit-nocode/components/header-operate/save.vue
index c99b79648..907c06336 100644
--- a/lib/client/src/views/edit-nocode/components/action-tool/components/save.vue
+++ b/lib/client/src/views/edit-nocode/components/header-operate/save.vue
@@ -1,23 +1,27 @@
-
+
+
+ {{ $t('保存') }}
+
+
+
+
diff --git a/lib/client/src/views/index/components/action-tool/children/page-variable.vue b/lib/client/src/views/index/components/action-tool/children/page-variable.vue
new file mode 100644
index 000000000..15302203c
--- /dev/null
+++ b/lib/client/src/views/index/components/action-tool/children/page-variable.vue
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/client/src/views/index/components/action-tool/components/canvas-guide.vue b/lib/client/src/views/index/components/action-tool/components/canvas-guide.vue
new file mode 100644
index 000000000..15f31b12c
--- /dev/null
+++ b/lib/client/src/views/index/components/action-tool/components/canvas-guide.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
diff --git a/lib/client/src/views/index/components/action-tool/components/clear-canvas.vue b/lib/client/src/views/index/components/action-tool/components/clear-canvas.vue
index b35d192a4..0a1c6f976 100644
--- a/lib/client/src/views/index/components/action-tool/components/clear-canvas.vue
+++ b/lib/client/src/views/index/components/action-tool/components/clear-canvas.vue
@@ -14,7 +14,7 @@
return {
item: {
icon: 'bk-drag-icon bk-drag-delete',
- text: window.i18n.t('清空'),
+ tips: this.$t('清空画布内容区域（不包含导航部分）'),
func: this.handleClearAll
}
}
diff --git a/lib/client/src/views/index/components/action-tool/components/code-and-json.vue b/lib/client/src/views/index/components/action-tool/components/code-and-json.vue
new file mode 100644
index 000000000..62e0fb02a
--- /dev/null
+++ b/lib/client/src/views/index/components/action-tool/components/code-and-json.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/lib/client/src/views/index/components/action-tool/components/common/use-save.js b/lib/client/src/views/index/components/action-tool/components/common/use-save.js
index 7eeddd183..448a4b744 100644
--- a/lib/client/src/views/index/components/action-tool/components/common/use-save.js
+++ b/lib/client/src/views/index/components/action-tool/components/common/use-save.js
@@ -35,7 +35,7 @@ const checkValueConfig = rootNode => {
// 检测选择了自定义变量但是没配置变量
const checkCustomVariable = (data, componentId, name) => {
if (data.buildInVariableType === BUILDIN_VARIABLE_TYPE_LIST[1].VAL && (!data.payload || !data.payload.customVariableCode)) {
- errorStack.push(window.i18n.t('组件【{0}】的【{1}】的变量类型配置为【{2}】但没有选择变量', [componentId, name, BUILDIN_VARIABLE_TYPE_LIST[1].NAME]))
+ errorStack.push(window.i18n.t('组件【{0}】的【{1}】的变量类型配置为【{2}】但没有选择变量', [componentId, window.i18n.t(name), window.i18n.t(BUILDIN_VARIABLE_TYPE_LIST[1].NAME)]))
}
}
// 检测选择 remote 类型但是没选择函数
@@ -48,8 +48,8 @@ const checkValueConfig = rootNode => {
params: data?.payload?.params
}
}
- if (data.valueType === 'remote' && !methodData?.methodCode && !['chart', 'bk-charts', 'bkflow'].includes(componentType)) {
- errorStack.push(window.i18n.t('组件【{0}】的【{1}】的属性初始值来源配置为函数，但没有选择函数', [componentId, name]))
+ if (['remote', 'select-remote'].includes(data.valueType) && !methodData?.methodCode && !['chart', 'bk-charts', 'bkflow'].includes(componentType)) {
+ errorStack.push(window.i18n.t('组件【{0}】的【{1}】的属性初始值来源配置为函数，但没有选择函数', [componentId, window.i18n.t(name)]))
}
checkMethodParams(methodData?.params, componentId, window.i18n.t('属性'), name)
}
@@ -60,7 +60,7 @@ const checkValueConfig = rootNode => {
'select-data-source',
'table-data-source'
].includes(data.valueType) && (!data.payload || !data.payload.sourceData || !data.payload.sourceData.tableName)) {
- errorStack.push(window.i18n.t('组件【{0}】的【{1}】的属性初始值来源配置为数据表，但没有选择数据表', [componentId, name]))
+ errorStack.push(window.i18n.t('组件【{0}】的【{1}】的属性初始值来源配置为数据表，但没有选择数据表', [componentId, window.i18n.t(name)]))
}
}
// 检查 payload 的格式
@@ -77,7 +77,7 @@ const checkValueConfig = rootNode => {
errorStack.push(window.i18n.t('组件【{0}】的【pagination】的【{1}】配置为变量或表达式，但没有选择变量或者填写表达式', [componentId, key]))
}
if ([BUILDIN_VARIABLE_TYPE_LIST[1].VAL].includes(val.buildInVariableType) && !val.customVariableCode) {
- errorStack.push(window.i18n.t('组件【{0}】的【pagination】的【{1}】的变量类型配置为【{2}】但没有选择变量', [componentId, key, BUILDIN_VARIABLE_TYPE_LIST[1].NAME]))
+ errorStack.push(window.i18n.t('组件【{0}】的【pagination】的【{1}】的变量类型配置为【{2}】但没有选择变量', [componentId, key, window.i18n.t(BUILDIN_VARIABLE_TYPE_LIST[1].NAME)]))
}
})
}
@@ -113,7 +113,7 @@ const checkValueConfig = rootNode => {
if (!LC.isNode(slot)) {
if (['variable', 'expression'].includes(slot.format)
&& slot.code === '') {
- errorStack.push(window.i18n.t('组件【{0}】的【{1}】配置为【{2}】但没有设置具体值', [node.componentId, slotMaterial.displayName, formatMap[slot.format]]))
+ errorStack.push(window.i18n.t('组件【{0}】的【{1}】配置为【{2}】但没有设置具体值', [node.componentId, window.i18n.t(slotMaterial.displayName), formatMap[slot.format]]))
}
checkCustomVariable(slot, node.componentId, slotMaterial.displayName)
checkRemote(slot, node.componentId, slotMaterial.displayName)
@@ -364,6 +364,7 @@ export default () => {
})
isLoading.value = true
+ console.log(pageDetail, 'beforesave')
return Promise.all([
store.dispatch('page/update', {
data: {
@@ -373,7 +374,8 @@ export default () => {
versionId: versionId.value,
pageData: {
id: parseInt(route.params.pageId),
- content: JSON.stringify(rootJSON)
+ content: JSON.stringify(rootJSON),
+ lifeCycle: pageDetail.value.lifeCycle || {}
},
customCompData: customCompData,
functionData: releateMethodIdList,
diff --git a/lib/client/src/views/index/components/action-tool/components/menu-item.vue b/lib/client/src/views/index/components/action-tool/components/menu-item.vue
index e34a6dd85..1de831ffb 100644
--- a/lib/client/src/views/index/components/action-tool/components/menu-item.vue
+++ b/lib/client/src/views/index/components/action-tool/components/menu-item.vue
@@ -11,7 +11,6 @@
}"
@click="item.func">
-
{{item.text}}
- 
- 
- 
- 
+