Commit 8b0bdbf2 authored by 郝聪敏's avatar 郝聪敏

feature: 接入量星球

parent 52c7f198
...@@ -18,4 +18,5 @@ export default (application: Application) => { ...@@ -18,4 +18,5 @@ export default (application: Application) => {
router.get('/editor/login', controller.editor.login); router.get('/editor/login', controller.editor.login);
router.get('/editor', controller.editor.home); router.get('/editor', controller.editor.home);
router.get('/editor/*', controller.editor.home); router.get('/editor/*', controller.editor.home);
router.get('/*', controller.editor.home);
}; };
\ No newline at end of file
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; import micro from './micro/index.vue';
import iView from 'iview'; import single from './single/index.vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
import { release } from '@/.sentryclirc';
import VueContextMenu from '@editor/component/Contextmenu/index';
import localStorage from '@/service/localStorage.service';
import '@/service/qg.service';
import 'iview/dist/styles/iview.css';
Vue.use(iView); export default window.__POWERED_BY_QIANKUN__ ? micro : single;
Vue.use(VueContextMenu); \ No newline at end of file
// 初始化sentry
if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
Raven.config('http://0785298052fd46128e201f30ca649102@sentry.q-gp.com/64', {
release,
environment: 'production'
})
.addPlugin(RavenVue, Vue)
.install();
}
@Component({
name: 'Layout',
})
export default class Layout extends Vue {
activeName: string = 'list';
username: string = localStorage.get('user')?.name || '陌生人';
get isDashboard() {
return this.activeName === 'detail';
}
@Watch('$route', { immediate: true })
onRouteChange(to) {
this.activeName = to.name;
}
select(name) {
this.$router.push({
name
});
}
logOut() {
localStorage.clear();
window.location.href = '/editor/login';
}
created() {
console.log('>>EASY_ENV_IS_NODE create', EASY_ENV_IS_NODE);
}
}
\ No newline at end of file
<template>
<div id="app" class="layout">
<Row type="flex" class="layout-container" v-if="!isDashboard">
<Sider collapsible :collapsed-width="71" style="z-index: 100" ref="sider" v-model="isCollapsed">
<Menu :active-name="activeName" theme="dark" width="auto" :open-names="openNames" accordion @on-select="select" :class="menuitemClasses" ref="menus">
<template v-for="(menu, index) in page">
<MenuItem style="background: #001529;" v-if="!isCollapsed" :name="index" :key="menu.name">
<Icon :type="menu.icon"></Icon>
<span class="layout-text">{{ menu.name }}</span>
</MenuItem>
<Tooltip v-else="isCollapsed" :key="menu.name" transfer :content="menu.name" placement="right">
<MenuItem :name="index" :class="[index == activeName ? 'sub-menu-selected' : 'sub-menu-not-selected']">
<Icon :type="menu.icon"></Icon>
<span class="layout-text">{{ menu.name }}</span>
</MenuItem>
</Tooltip>
</template>
</Menu>
</Sider>
<div class="right-content">
<div class="layout-content">
<Spin fix v-show="showLoading">
<Icon type="load-c" size="58" class="spin-icon-load"></Icon>
<div style="font-size: 20Px">Loading</div>
</Spin>
<transition name="router-fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
<div class="layout-copy">
2014-2021 &copy; QuantGroup
</div>
</div>
</Row>
<slot v-else></slot>
</div>
</template>
<script>
export default {
data() {
return {
showLoading: false,
activeName: 0,
openNames: ['0'],
isCollapsed: false,
page: [{
name: '作品列表',
icon: 'ios-list',
path: 'list',
children: []
},
{
name: '我的草稿',
icon: 'ios-book',
path: 'my',
children: []
},
{
name: '创意模板',
icon: 'ios-compose',
path: 'template',
children: []
}]
}
},
methods: {
select(name) {
console.log('select', name);
const current = this.page[name];
this.$router.push({
name: current.path,
});
this.$nextTick(() => {
this.activeName = name;
this.$refs.menus.updateOpened();
this.$refs.menus.updateActiveName();
});
},
},
created() {
console.log('isDashboard', this.$route);
},
computed: {
menuitemClasses: function() {
return ['ivu-menu-dark', 'menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
},
isDashboard() {
console.log('isDashboard', this.$route);
return this.$route.name === 'detail';
}
},
}
</script>
<style lang="less" scoped>
.layout {
position: absolute;
top: 60Px !important;
bottom: 0;
border: 0 !important;
border-radius: 0;
background: #f5f7f9;
width: 100%;
.layout-container {
height: 100%;
flex-flow: row;
.menu-item {
& > div {
display: block !important;
}
span {
line-height: 21Px;
display: inline-block;
overflow: hidden;
width: 100Px;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
transition: width 0.2s ease, opacity;
z-index: 100;
}
i {
transform: translateX(0);
transition: font-size 0.2s ease, transform 0.2s ease;
vertical-align: middle;
font-size: 20Px;
}
.sub-menu-selected {
color: #fff;
}
.sub-menu-not-selected {
color: rgba(255, 255, 255, 0.7) !important;
}
}
.collapsed-menu {
span {
width: 0;
}
}
.right-content {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
.layout-content {
flex: 1;
margin: 15Px;
height: 100%;
overflow: auto;
background: #fff;
border-radius: 4Px;
}
.layout-copy {
text-align: center;
padding: 10Px 0 20Px;
color: #9ea7b4;
}
}
}
}
.spin-icon-load {
animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
.router-fade-enter-active,
.router-fade-leave-active {
transition: opacity 0.3s;
}
.router-fade-enter,
.router-fade-leave-active {
opacity: 0;
}
</style>
<!-- <script lang="ts" src="./index.ts"></script> -->
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import iView from 'iview';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
import { release } from '@/.sentryclirc';
import VueContextMenu from '@editor/component/Contextmenu/index';
import localStorage from '@/service/localStorage.service';
import '@/service/qg.service';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
Vue.use(VueContextMenu);
// 初始化sentry
if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
Raven.config('http://0785298052fd46128e201f30ca649102@sentry.q-gp.com/64', {
release,
environment: 'production'
})
.addPlugin(RavenVue, Vue)
.install();
}
@Component({
name: 'Layout',
})
export default class Layout extends Vue {
activeName: string = 'list';
username: string = localStorage.get('user')?.name || '陌生人';
get isDashboard() {
return this.activeName === 'detail';
}
@Watch('$route', { immediate: true })
onRouteChange(to) {
this.activeName = to.name;
}
select(name) {
this.$router.push({
name
});
}
logOut() {
localStorage.clear();
window.location.href = '/editor/login';
}
created() {
console.log('>>EASY_ENV_IS_NODE create', EASY_ENV_IS_NODE);
}
}
\ No newline at end of file
<template>
<div id="app" class="layout" >
<Row type="flex" class="layout-container" v-if="!isDashboard">
<i-col :span="3" class="layout-menu-left">
<Menu :active-name="activeName" theme="dark" width="auto" :open-names="['1']" accordion @on-select="select">
<div class="layout-logo-left">低代码平台</div>
<Menu-item name="list">作品列表</Menu-item>
<Menu-item name="my">我的草稿</Menu-item>
<Menu-item name="template">创意模板</Menu-item>
</Menu>
</i-col>
<i-col :span="21" class="layout-menu-right">
<div class="layout-header">
<div class="avator">
<span>{{ username }}</span>
<span @click="logOut" style="cursor: pointer;">退出</span>
</div>
</div>
<div class="layout-content">
<slot></slot>
</div>
<div class="layout-copy">
2014-2021 &copy; QuantGroup
</div>
</i-col>
</Row>
<slot v-if="isDashboard"></slot>
</div>
</template>
<style lang="less" scoped>
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ivu-spin-fix {
z-index: 1000;
background-color: rgba(0, 0, 0, 0.8);
}
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: auto;
height: 100%;
}
.layout-container {
height: 100%;
}
.layout-breadcrumb {
padding: 10px 15px 0;
}
.layout-content {
flex: 1;
overflow: auto;
background: #fff;
border-radius: 4px;
}
.layout-content-main {
padding: 10px;
}
.layout-copy {
text-align: center;
padding: 10px 0 20px;
color: #9ea7b4;
}
.layout-menu-left {
background: #464c5b;
}
.layout-menu-right {
display: flex;
flex-direction: column;
}
.layout-header {
height: 45px;
line-height: 45px;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-ceiling-main {
float: right;
margin-right: 15px;
}
.layout-logo-left {
width: 90%;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 18px;
text-align: center;
background: #5b6270;
border-radius: 3px;
margin: 15px auto;
}
.layout-ceiling-main a {
color: #9ba7b5;
}
.ivu-col {
transition: width 0.2s ease-in-out;
}
.router-fade-enter-active,
.router-fade-leave-active {
transition: opacity 0.3s;
}
.router-fade-enter,
.router-fade-leave-active {
opacity: 0;
}
.avator {
float: right;
width: 120px;
height: 45px;
line-height: 45px;
font-size: 14px;
}
body {
/deep/ .cr-popup {
z-index: 1111;
}
}
</style>
<script lang="ts" src="./index.ts"></script>
\ No newline at end of file
...@@ -17,9 +17,6 @@ ...@@ -17,9 +17,6 @@
<div v-else-if="!isNode" id="app"><slot></slot></div> <div v-else-if="!isNode" id="app"><slot></slot></div>
</template> </template>
<style> <style>
html {
font-size: 10vw;
}
#app { #app {
position: absolute; position: absolute;
top: 0; top: 0;
......
const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'http'; const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'http';
export default { export default {
apiHost: `http://localhost:7002/`, // apiHost: `http://localhost:7002/`,
// apiHost: `http://192.168.28.199:7001/`, // apiHost: `http://192.168.28.199:7001/`,
// apiHost: 'https://quantum-vcc2.liangkebang.net/', apiHost: 'https://quantum-vcc2.liangkebang.net/',
h5Host: 'https://quantum-h5-vcc2.liangkebang.net/', h5Host: 'https://quantum-h5-vcc2.liangkebang.net/',
qiniuHost: `https://appsync.lkbang.net/`, qiniuHost: `https://appsync.lkbang.net/`,
shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`, shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
......
declare var EASY_ENV_IS_NODE: boolean; declare var EASY_ENV_IS_NODE: boolean;
declare var EASY_ENV_IS_BROWSER: boolean; declare var EASY_ENV_IS_BROWSER: boolean;
type PlainObject<T = any> = { [key: string]: T }; declare var __webpack_public_path__: string;
\ No newline at end of file type PlainObject<T = any> = { [key: string]: T };
interface Window {
__INITIAL_STATE__: string;
__POWERED_BY_QIANKUN__: string;
__INJECTED_PUBLIC_PATH_BY_QIANKUN__: string;
}
...@@ -43,7 +43,7 @@ export default class DynamicPageForm extends Mixins(ContextMenuMixin) { ...@@ -43,7 +43,7 @@ export default class DynamicPageForm extends Mixins(ContextMenuMixin) {
this.$set(this.commonStyleForm, schame.key, this.pageData?.commonStyle[schame.key]); this.$set(this.commonStyleForm, schame.key, this.pageData?.commonStyle[schame.key]);
}); });
this.propsSchame.forEach(schame => { this.propsSchame.forEach(schame => {
this.$set(this.propsForm, schame.key, this.pageData?.props[schame.key]); this.$set(this.propsForm, schame.key, this.pageData?.props?.[schame.key]);
}); });
} }
......
'use strict'; // tslint:disable
import Vue from 'vue';
import { sync } from 'vuex-router-sync';
import App from '@framework/app'; import App from '@framework/app';
import createStore from '../store/index'; import createStore from '../store/index';
import createRouter from './router/index'; import createRouter from './router/index';
import entry from '@editor/view/home/index.vue'; import entry from '@editor/view/home/index.vue';
export default new App({ entry, createStore, createRouter }).bootstrap(); import './public-path';
\ No newline at end of file
const create = function(initState) {
console.log('initState', initState);
const store = createStore(initState);
const router = createRouter();
sync(store, router);
return {
router,
store,
render: h => {
return h(entry);
},
};
};
const client = function() {
const vm = create(window.__INITIAL_STATE__);
const app = new Vue(vm);
const root = document.getElementById('app');
const hydrate = (<HTMLElement>root).childNodes.length > 0;
app.$mount('#app', hydrate);
};
export async function bootstrap() {}
export async function mount() {
setTimeout(() => {
client();
});
}
export async function unmount() {}
window.__POWERED_BY_QIANKUN__ || mount();
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
...@@ -2,24 +2,16 @@ import Vue from 'vue'; ...@@ -2,24 +2,16 @@ import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import Dashboard from '../view/dashboard/index.vue'; import Dashboard from '../view/dashboard/index.vue';
import PageList from '../view/pageList/index.vue'; import PageList from '../view/pageList/index.vue';
import myPage from '../view/myPage/index.vue'; import MyPage from '../view/myPage/index.vue';
import template from '../view/template/index.vue'; import Template from '../view/template/index.vue';
import localStorage from '@/service/localStorage.service'; import localStorage from '@/service/localStorage.service';
Vue.use(VueRouter); Vue.use(VueRouter);
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
VueRouter.prototype.replace = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
export default function createRouter() { export default function createRouter() {
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
base: '/editor/', base: window.__POWERED_BY_QIANKUN__ ? '/micro/quantum-blocks' : '/editor',
routes: [ routes: [
{ {
path: '/', path: '/',
...@@ -28,22 +20,26 @@ export default function createRouter() { ...@@ -28,22 +20,26 @@ export default function createRouter() {
{ {
name: 'detail', name: 'detail',
path: '/detail/:pageId?', path: '/detail/:pageId?',
component: () => import('../view/dashboard/index.vue') component: Dashboard
// component: () => import('../view/dashboard/index.vue')
}, },
{ {
name: 'list', name: 'list',
path: '/list', path: '/list',
component: () => import('../view/pageList/index.vue') component: PageList
// component: () => import('../view/pageList/index.vue')
}, },
{ {
name: 'my', name: 'my',
path: '/my', path: '/my',
component: () => import('../view/myPage/index.vue') component: MyPage
// component: () => import('../view/myPage/index.vue')
}, },
{ {
name: 'template', name: 'template',
path: '/template', path: '/template',
component: () => import('../view/template/index.vue') component: Template
// component: () => import('../view/template/index.vue')
}, },
] ]
}); });
......
<template> <template>
<Row class="dashboard" v-cloak> <Row class="dashboard">
<Row class="dashboard-header" type="flex" align="middle"> <!-- <Row class="dashboard-header" type="flex" align="middle">
<Col span="8"> <Col span="8">
<h3>低代码开发平台</h3> <h3>低代码开发平台</h3>
</Col> </Col>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</Col> </Col>
</Row> </Row>
</Col> </Col>
</Row> </Row> -->
<Row class="dashboard-container"> <Row class="dashboard-container">
<Col class="dashboard-container-left" span="6"> <Col class="dashboard-container-left" span="6">
<Menu class="Dc-left-menu" active-name="1" @on-select="selectMaterial"> <Menu class="Dc-left-menu" active-name="1" @on-select="selectMaterial">
...@@ -48,7 +48,17 @@ ...@@ -48,7 +48,17 @@
<Col class="dashboard-container-middle" span="18"> <Col class="dashboard-container-middle" span="18">
<Row class="Dc-middle-row"> <Row class="Dc-middle-row">
<Col :span="isCollapsed ? 24 : 16" class="Dc-middle-container" @click.native="toggle(true)"> <Col :span="isCollapsed ? 24 : 16" class="Dc-middle-container" @click.native="toggle(true)">
<div :class="[{'Dcm-container-panel_in': isDragIn, 'Dcm-container-panel_draging': isDraging}, 'Dcm-container-panel']" @dragover.prevent @dragenter="dragenter" @dragover="dragover" <Row type="flex" justify="center" class="Dcm-container-header">
<Col span="4" @click.native="save()">
<Icon type="ionic"></Icon>
<span>保存</span>
</Col>
<Col span="4" @click.native="exit">
<Icon type="monitor"></Icon>
<span>返回</span>
</Col>
</Row>
<div :class="[{'Dcm-container-panel_in': isDragIn, 'Dcm-container-panel_draging': isDraging}, 'Dcm-container-panel']" @dragover.prevent @dragenter="dragenter" @dragover="dragover"
@dragleave="dragleave" @drop="drops"> @dragleave="dragleave" @drop="drops">
<grid-layout <grid-layout
:layout.sync="layout" :layout.sync="layout"
...@@ -103,9 +113,6 @@ ...@@ -103,9 +113,6 @@
justify-content: center; justify-content: center;
} }
} }
[v-cloak] {
display: none;
}
.dashboard { .dashboard {
min-width: 1280px; min-width: 1280px;
height: 100% !important; height: 100% !important;
...@@ -119,7 +126,7 @@ ...@@ -119,7 +126,7 @@
z-index: 901; z-index: 901;
} }
&-container { &-container {
height: calc(100% - 48px) !important; height: 100%;
&-left { &-left {
display: flex !important; display: flex !important;
height: 100%; height: 100%;
...@@ -148,6 +155,13 @@ ...@@ -148,6 +155,13 @@
height: 100%; height: 100%;
opacity: 1; opacity: 1;
transition: width ease-in-out 0.5s; transition: width ease-in-out 0.5s;
.Dcm-container-header {
margin: 20px 0 50px 0;
.ivu-col {
font-size: 20px;
text-align: center;
}
}
.Dcm-container-panel { .Dcm-container-panel {
margin: 30px auto; margin: 30px auto;
width: 375px; width: 375px;
...@@ -186,6 +200,7 @@ ...@@ -186,6 +200,7 @@
} }
} }
.Dc-middle-sider { .Dc-middle-sider {
padding-top: 10px;
height: 100%; height: 100%;
background: #fff; background: #fff;
transition: width ease-in-out 0.5s; transition: width ease-in-out 0.5s;
......
import { Vue, Component, Emit } from 'vue-property-decorator'; import { Vue, Component, Emit } from 'vue-property-decorator';
import Layout from 'component/layout/editor/index.vue'; import Layout from 'component/layout/editor/index';
@Component({ @Component({
components: { components: {
......
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" style="font-size: 37.5px;"> <html lang="en">
<head> <head>
<title>低代码平台</title> <title>低代码平台</title>
<meta name="keywords"> <meta name="keywords">
...@@ -8,7 +8,12 @@ ...@@ -8,7 +8,12 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/public/asset/css/reset.css"> <link rel="stylesheet" href="/public/asset/css/reset.css">
<link href="https://cdn.bootcss.com/iview/2.9.0/styles/iview.css" rel="stylesheet">
<style> <style>
html {
font-size: 37.5Px;
}
html, body { html, body {
line-height: 1.15 !important; line-height: 1.15 !important;
} }
...@@ -17,5 +22,8 @@ ...@@ -17,5 +22,8 @@
<body> <body>
<div id="app"><!--vue-ssr-outlet--></div> <div id="app"><!--vue-ssr-outlet--></div>
<script src="https://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script> <script src="https://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcss.com/iview/2.9.0/iview.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -3,12 +3,19 @@ const path = require('path'); ...@@ -3,12 +3,19 @@ const path = require('path');
const SentryPlugin = require("webpack-sentry-plugin"); const SentryPlugin = require("webpack-sentry-plugin");
const resolve = filepath => path.resolve(__dirname, filepath); const resolve = filepath => path.resolve(__dirname, filepath);
const SentryConfig = require("./app/web/.sentryclirc.ts"); const SentryConfig = require("./app/web/.sentryclirc.ts");
let { name } = require('./package');
name = name.replace(/-/g, '');
module.exports = { module.exports = {
entry: { entry: {
'login': 'app/web/page/login/index.vue', 'login': 'app/web/page/login/index.vue',
'editor': 'app/web/page/editor/index.ts', 'editor': 'app/web/page/editor/index.ts',
}, },
output: {
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
},
resolve: { resolve: {
alias:{ alias:{
'@': resolve('app/web'), '@': resolve('app/web'),
...@@ -158,6 +165,11 @@ module.exports = { ...@@ -158,6 +165,11 @@ module.exports = {
} }
} }
}, },
externals: {
'vue': 'Vue',
'iview': 'iview',
'vue-router': 'VueRouter'
},
devtool:'source-map', devtool:'source-map',
customize(webpackConfig){ customize(webpackConfig){
// 此外 webpackConfig 为原生生成的 webpack config,可以进行自定义处理 // 此外 webpackConfig 为原生生成的 webpack config,可以进行自定义处理
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment