commit
bb4a06b526
61 changed files with 38938 additions and 0 deletions
@ -0,0 +1,2 @@ |
|||
> 1% |
|||
last 2 versions |
|||
@ -0,0 +1,18 @@ |
|||
module.exports = { |
|||
root: true, |
|||
env: { |
|||
node: true |
|||
}, |
|||
'extends': [ |
|||
'plugin:vue/essential', |
|||
'eslint:recommended' |
|||
], |
|||
rules: { |
|||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
|||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
|||
'no-unused-vars': process.env.NODE_ENV === 'production' ? 'error' : 'off' |
|||
}, |
|||
parserOptions: { |
|||
parser: 'babel-eslint' |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
.DS_Store |
|||
node_modules |
|||
/dist |
|||
|
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,12 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/cli-plugin-babel/preset' |
|||
], |
|||
plugins: [ |
|||
// ['import', {
|
|||
// libraryName: 'ant-design-vue',
|
|||
// libraryDirectory: 'es',
|
|||
// style: true
|
|||
// }, 'vant'],
|
|||
] |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
const path = require("path"); |
|||
|
|||
let config = { |
|||
modules_root: path.join(__dirname, '../public'), |
|||
modules_dir: './vendor', |
|||
modules: { |
|||
vue: ['vue'], |
|||
ant: ['ant-design-vue'], |
|||
css: ['ant-design-vue/dist/antd.css'], |
|||
vuex: ['vuex'], |
|||
vuerouter: ['vue-router'], |
|||
plugins: ['lodash', 'axios', 'vuex-persistedstate'], |
|||
} |
|||
}; |
|||
|
|||
module.exports = config; |
|||
@ -0,0 +1,45 @@ |
|||
var path = require("path"); |
|||
var webpack = require("webpack"); |
|||
const $config = require("./config.js") |
|||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
|||
const root = path.resolve($config.modules_root, $config.modules_dir); |
|||
module.exports = { |
|||
mode: "production", |
|||
// 你想要打包的模块的数组
|
|||
entry: $config.modules, |
|||
module: { |
|||
rules: [{ |
|||
test: /\.css$/, |
|||
use: [{ |
|||
loader: MiniCssExtractPlugin.loader, |
|||
options: { |
|||
esModule: true, |
|||
}, |
|||
}, |
|||
'css-loader', |
|||
] |
|||
}] |
|||
}, |
|||
output: { |
|||
path: root, // 打包后文件输出的位置
|
|||
filename: '[name].[hash:8].dll.js', |
|||
library: '[name]_library' |
|||
// vendor.dll.js中暴露出的全局变量名。
|
|||
// 主要是给DllPlugin中的name使用，
|
|||
// 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
|
|||
}, |
|||
plugins: [ |
|||
new MiniCssExtractPlugin({ |
|||
// Options similar to the same options in webpackOptions.output
|
|||
// all options are optional
|
|||
filename: '[name].[hash:8].dll.css', |
|||
chunkFilename: '[id].css', |
|||
ignoreOrder: false, // Enable to remove warnings about conflicting order
|
|||
}), |
|||
new webpack.DllPlugin({ |
|||
path: path.join(root, '[name]-manifest.json'), |
|||
name: '[name]_library', |
|||
context: process.cwd() |
|||
}), |
|||
] |
|||
}; |
|||
File diff suppressed because it is too large
@ -0,0 +1,49 @@ |
|||
{ |
|||
"name": "VisiblePlatform", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"dll": "webpack --config ./build/webpack.dll.config.js", |
|||
"dev": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"zip": "node ./scripts/zip.js", |
|||
"lint": "vue-cli-service lint" |
|||
}, |
|||
"dependencies": { |
|||
"core-js": "^3.3.2", |
|||
"vue": "^2.6.10", |
|||
"vue-router": "^3.1.3", |
|||
"vuex": "^3.0.1", |
|||
"lodash": "^4.17.15", |
|||
"ant-design-vue": "^1.3.8", |
|||
"babel-plugin-import": "^1.13.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@vue/cli-plugin-babel": "^4.0.0", |
|||
"@vue/cli-plugin-eslint": "^4.0.0", |
|||
"@vue/cli-plugin-router": "^4.0.0", |
|||
"@vue/cli-plugin-vuex": "^4.0.0", |
|||
"@vue/cli-service": "^4.0.0", |
|||
"babel-eslint": "^10.0.3", |
|||
"eslint": "^5.16.0", |
|||
"eslint-plugin-vue": "^5.0.0", |
|||
"normalize.css": "^8.0.1", |
|||
"node-sass": "^4.12.0", |
|||
"sass-loader": "^8.0.0", |
|||
"vue-template-compiler": "^2.6.10", |
|||
"webpack-bundle-analyzer": "^3.4.1", |
|||
"compression-webpack-plugin": "^3.0.0", |
|||
"webpack-cli": "^3.3.10", |
|||
"add-asset-html-webpack-plugin": "^3.1.3", |
|||
"compressing": "^1.5.0", |
|||
"vue-router-invoke-webpack-plugin": "^0.4.3", |
|||
"vuex-persistedstate": "^2.7.0", |
|||
"axios": "^0.19.0", |
|||
"mini-css-extract-plugin": "^0.9.0", |
|||
"vue-cli-plugin-qrcode": "*", |
|||
"qrcode-terminal": "^0.12.0", |
|||
"chalk": "^2.4.2", |
|||
"internal-ip": "^4.2.0" |
|||
}, |
|||
"externals": {} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
plugins: { |
|||
autoprefixer: {}, |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,47 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 --> |
|||
<meta name="apple-mobile-web-app-capable" content="yes" /> |
|||
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 --> |
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> |
|||
<!-- 忽略页面中的数字识别为电话号码,email识别 --> |
|||
<meta name="format-detection" content="telephone=no, email=no" /> |
|||
<!-- 启用360浏览器的极速模式(webkit) --> |
|||
<meta name="renderer" content="webkit"> |
|||
<!-- 避免IE使用兼容模式 --> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> |
|||
<meta name="HandheldFriendly" content="true"> |
|||
<!-- 微软的老式浏览器 --> |
|||
<meta name="MobileOptimized" content="320"> |
|||
<!-- uc强制竖屏 --> |
|||
<meta name="screen-orientation" content="portrait"> |
|||
<!-- UC强制全屏 --> |
|||
<meta name="full-screen" content="yes"> |
|||
<!-- QQ强制全屏 --> |
|||
<meta name="x5-fullscreen" content="true"> |
|||
<!-- UC应用模式 --> |
|||
<meta name="browsermode" content="application"> |
|||
<!-- QQ应用模式 --> |
|||
<meta name="x5-page-mode" content="app"> |
|||
<!-- windows phone 点击无高光 --> |
|||
<meta name="msapplication-tap-highlight" content="no"> |
|||
<link rel="icon" href="favicon.ico"> |
|||
<title>可视化页面布局</title> |
|||
</head> |
|||
|
|||
<body> |
|||
<noscript> |
|||
<strong>We're sorry but VisiblePlatform doesn't work properly without JavaScript enabled. Please enable it to |
|||
continue.</strong> |
|||
</noscript> |
|||
<div id="app"></div> |
|||
<!-- built files will be auto injected --> |
|||
</body> |
|||
|
|||
</html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
{"name":"css_library","content":{"./node_modules/ant-design-vue/dist/antd.css":{"id":970,"buildMeta":{"providedExports":true}}}} |
|||
File diff suppressed because it is too large
@ -0,0 +1 @@ |
|||
var css_library=function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=969)}({969:function(e,r,t){e.exports=t},970:function(e,r,t){}}); |
|||
@ -0,0 +1 @@ |
|||
{"name":"plugins_library","content":{"./node_modules/webpack/buildin/global.js":{"id":51,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/utils.js":{"id":59,"buildMeta":{"providedExports":true}},"./node_modules/process/browser.js":{"id":95,"buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/module.js":{"id":156,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/bind.js":{"id":607,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/buildURL.js":{"id":608,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/isCancel.js":{"id":609,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/defaults.js":{"id":610,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/adapters/xhr.js":{"id":611,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/createError.js":{"id":612,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/mergeConfig.js":{"id":613,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/Cancel.js":{"id":614,"buildMeta":{"providedExports":true}},"./node_modules/lodash/lodash.js":{"id":976,"buildMeta":{"providedExports":true}},"./node_modules/axios/index.js":{"id":977,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/axios.js":{"id":978,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/Axios.js":{"id":979,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/InterceptorManager.js":{"id":980,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/dispatchRequest.js":{"id":981,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/transformData.js":{"id":982,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/normalizeHeaderName.js":{"id":983,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/settle.js":{"id":984,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/enhanceError.js":{"id":985,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/buildFullPath.js":{"id":986,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isAbsoluteURL.js":{"id":987,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/combineURLs.js":{"id":988,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/parseHeaders.js":{"id":989,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isURLSameOrigin.js":{"id":990,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/cookies.js":{"id":991,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/CancelToken.js":{"id":992,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/spread.js":{"id":993,"buildMeta":{"providedExports":true}},"./node_modules/vuex-persistedstate/dist/vuex-persistedstate.es.js":{"id":994,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}}}} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
{"name":"vue_library","content":{"./node_modules/vue/dist/vue.runtime.esm.js":{"id":21,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/webpack/buildin/global.js":{"id":51,"buildMeta":{"providedExports":true}},"./node_modules/process/browser.js":{"id":95,"buildMeta":{"providedExports":true}},"./node_modules/timers-browserify/main.js":{"id":299,"buildMeta":{"providedExports":true}},"./node_modules/setimmediate/setImmediate.js":{"id":300,"buildMeta":{"providedExports":true}}}} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
{"name":"vuerouter_library","content":{"./node_modules/vue-router/dist/vue-router.esm.js":{"id":974,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}}}} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
{"name":"vuex_library","content":{"./node_modules/webpack/buildin/global.js":{"id":51,"buildMeta":{"providedExports":true}},"./node_modules/vuex/dist/vuex.esm.js":{"id":972,"buildMeta":{"exportsType":"namespace","providedExports":["default","Store","createLogger","createNamespacedHelpers","install","mapActions","mapGetters","mapMutations","mapState"]}}}} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@ |
|||
* 克隆拖拽 |
|||
* 拖拽位置不变 |
|||
* 快速拖动不会失去焦点 |
|||
* 拖动节点时不触发点击事件 |
|||
|
|||
## 预想 |
|||
* 框选部分组件 |
|||
* 导出代码 |
|||
* 删除组件 |
|||
* 组件插槽以及布局 |
|||
|
|||
|
|||
https://woai3c.github.io/visual-drag-demo |
|||
https://github.com/woai3c/visual-drag-demo |
|||
@ -0,0 +1,22 @@ |
|||
const compressing = require('compressing'); |
|||
var path = require('path') |
|||
//格式化data时间
|
|||
function timeStamp2String(time) { |
|||
var datetime = new Date(); |
|||
datetime.setTime(time); |
|||
var year = datetime.getFullYear(); |
|||
var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1; |
|||
var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); |
|||
var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours(); |
|||
var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes(); |
|||
var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds(); |
|||
return year + "-" + month + "-" + date + "_" + hour + "-" + minute + "-" + second; |
|||
} |
|||
let name = `dist_${timeStamp2String(new Date())}.zip`; |
|||
compressing.zip.compressDir('dist', name) |
|||
.then(() => { |
|||
console.log('success'); |
|||
}) |
|||
.catch(err => { |
|||
console.error(err); |
|||
}); |
|||
@ -0,0 +1,12 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<keep-alive> |
|||
<router-view v-if="$route.meta.alive" /> |
|||
</keep-alive> |
|||
<router-view v-if="!$route.meta.alive" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/style/global.scss"; |
|||
</style> |
|||
@ -0,0 +1,56 @@ |
|||
import axios from "axios"; |
|||
import qs from "qs"; |
|||
import toast from "@/components/toast"; |
|||
import config from "@/config"; |
|||
|
|||
const checkERR = (err, type) => { |
|||
console.log(err); |
|||
switch (type) { |
|||
case 0: |
|||
// 来自执行的错误
|
|||
break; |
|||
case 1: |
|||
//来自于接口的错误
|
|||
break; |
|||
} |
|||
}; |
|||
|
|||
// 静默执行
|
|||
export function request_(type = "GET", url, data = {},contentType=0,sendToken = true) { |
|||
var __data = {}; |
|||
if (type.toUpperCase() == "GET") { |
|||
__data.params = data; |
|||
} |
|||
if (type.toUpperCase() == "POST") { |
|||
__data.data = data; // qs.stringify(data)
|
|||
} |
|||
return new Promise((resolve, reject) => { |
|||
var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)/; |
|||
var realUrl = url; |
|||
if (!reg.test(url)) { |
|||
realUrl = config.BASEURL + url; |
|||
} |
|||
axios({ |
|||
url: realUrl, |
|||
method: type, |
|||
...__data, |
|||
headers:{ |
|||
$type: contentType, |
|||
$token: sendToken, |
|||
}, |
|||
responseType: "json", |
|||
}) |
|||
.then((res) => { |
|||
if (res.status == 200 && res.data && res.data.error == 0) { |
|||
resolve(res.data); |
|||
} else { |
|||
checkERR(res, 1); |
|||
reject(res); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
checkERR(err, 0); |
|||
reject(err); |
|||
}); |
|||
}); |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
import axios from "axios"; |
|||
import store from "@/store"; |
|||
|
|||
axios.interceptors.request.use( |
|||
(config) => { |
|||
if (!config.headers["Content-Type"]) { |
|||
config.headers = { |
|||
Accept: "application/json", |
|||
"Content-Type": "application/x-www-form-urlencoded", |
|||
}; |
|||
} |
|||
// if (store.getters.token) {
|
|||
// config.headers = {
|
|||
// 'Authorization': store.getters.token
|
|||
// }
|
|||
// }
|
|||
return config; |
|||
}, |
|||
(error) => { |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
|
|||
// 添加响应拦截器
|
|||
axios.interceptors.response.use( |
|||
(res) => { |
|||
//对错误代码做处理
|
|||
return res; |
|||
}, |
|||
(error) => { |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,3 @@ |
|||
html,body,#app{ |
|||
height: 100%; |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
// 引入vue 及 lodash
|
|||
import Vue from 'vue' |
|||
import { |
|||
upperFirst |
|||
} from 'lodash' // 首字线大写
|
|||
import { |
|||
camelCase |
|||
} from 'lodash' // 驼峰命名大法
|
|||
|
|||
// 把 /component/base/ 下的所有 vue 组件 require 进来
|
|||
// path: 要引入的组件所在相对路径（相对于当前文件）
|
|||
// deep: 是否检索子文件夹
|
|||
// matchFile: 匹配的文件名称
|
|||
// require.context(path, deep, matchFile)
|
|||
const requireComponent = require.context('./', true, /base-[\w-]+\.vue$/) |
|||
|
|||
// 遍历 require 进来的组件并注册
|
|||
requireComponent.keys().forEach((fileName) => { |
|||
const componentConfig = requireComponent(fileName) |
|||
const componentName = upperFirst(camelCase(fileName.replace(/^\.\/_/, '').replace(/\.\w+$/, ''))) |
|||
// 全局注册组件
|
|||
Vue.component(componentName, componentConfig.default || componentConfig) |
|||
}) |
|||
@ -0,0 +1,26 @@ |
|||
import Toast from "./toast.vue"; |
|||
import Vue from "vue"; |
|||
function createToast(text, duration = 2000) { |
|||
let VueToast = Vue.extend({ |
|||
render(h) { |
|||
let props = { |
|||
text: text, |
|||
}; |
|||
return h(Toast, { |
|||
props, |
|||
}); |
|||
}, |
|||
}); |
|||
let newToast = new VueToast(); |
|||
let vm = newToast.$mount(); |
|||
document.body.append(vm.$el); |
|||
setTimeout(() => { |
|||
vm.$el.remove(); |
|||
vm = null; |
|||
}, duration); |
|||
} |
|||
|
|||
createToast.install = function(Vue, defaultOptions = {}) { |
|||
Vue.prototype.$toast = createToast; |
|||
}; |
|||
export default createToast; |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<div class="base-toast"> |
|||
{{ text }} |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: ['text'], |
|||
methods: { |
|||
show() {} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.base-toast { |
|||
position: fixed; |
|||
max-width: 60%; |
|||
text-align: center; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
background-color: rgba(0, 0, 0, 0.733); |
|||
color: white; |
|||
padding: 10px; |
|||
border-radius: 10px; |
|||
z-index: 999; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
module.exports = { |
|||
BASEURL: '' |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
let isProd = process.env.NODE_ENV == "production"; |
|||
|
|||
let config = {} |
|||
|
|||
if (isProd) { |
|||
const prodConfig = require("./production"); |
|||
config = { |
|||
...config, |
|||
...prodConfig |
|||
} |
|||
} |
|||
if (!isProd) { |
|||
const devConfig = require("./development"); |
|||
config = { |
|||
...config, |
|||
...devConfig |
|||
} |
|||
} |
|||
export default config; |
|||
@ -0,0 +1,3 @@ |
|||
module.exports = { |
|||
BASEURL: '' |
|||
} |
|||
@ -0,0 +1,130 @@ |
|||
let list = [ |
|||
{ |
|||
name: "a-button", |
|||
describe: "按钮", |
|||
type: "component", |
|||
slot: [{ type: "text", text: "按钮" }], |
|||
props: {}, |
|||
id: "customID", |
|||
style: { |
|||
left: 0, |
|||
top: 0, |
|||
width: 80, |
|||
height: 32, |
|||
}, |
|||
}, |
|||
{ |
|||
name: "a-avatar", |
|||
describe: "图片", |
|||
type: "component", |
|||
slot: [], |
|||
props: { |
|||
icon: "user", |
|||
}, |
|||
id: "badgeID", |
|||
style: { |
|||
left: 0, |
|||
top: 0, |
|||
width: 32, |
|||
height: 32, |
|||
}, |
|||
}, |
|||
{ |
|||
name: "a-input", |
|||
describe: "输入框", |
|||
type: "component", |
|||
slot: [], |
|||
props: {}, |
|||
id: "inputID", |
|||
style: { |
|||
height: 32, |
|||
width: 120, |
|||
left: 0, |
|||
top: 0, |
|||
}, |
|||
}, |
|||
{ |
|||
name: "a-tooltip", |
|||
describe: "tooltip", |
|||
type: "component", |
|||
slot: [ |
|||
{ |
|||
name: "a-button", |
|||
type: "component", |
|||
slot: [{ type: "text", text: "阿萨大" }], |
|||
props: {}, |
|||
style: { |
|||
left: 0, |
|||
top: 0, |
|||
width: 80, |
|||
height: 32, |
|||
}, |
|||
}, |
|||
], |
|||
props: { placement: "topLeft", title: "Prompt Text" }, |
|||
id: "tooltipID", |
|||
style: { |
|||
height: 32, |
|||
width: 80, |
|||
left: 0, |
|||
top: 0, |
|||
}, |
|||
}, |
|||
{ |
|||
name: "a-cascader", |
|||
describe: "级联选择", |
|||
type: "component", |
|||
slot: [], |
|||
props: { |
|||
options: [ |
|||
{ |
|||
value: "zhejiang", |
|||
label: "Zhejiang", |
|||
children: [ |
|||
{ |
|||
value: "hangzhou", |
|||
label: "Hangzhou", |
|||
children: [ |
|||
{ |
|||
value: "xihu", |
|||
label: "West Lake", |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: "jiangsu", |
|||
label: "Jiangsu", |
|||
children: [ |
|||
{ |
|||
value: "nanjing", |
|||
label: "Nanjing", |
|||
children: [ |
|||
{ |
|||
value: "zhonghuamen", |
|||
label: "Zhong Hua Men", |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
placeholder: "Please select", |
|||
}, |
|||
methods: { |
|||
onChange(value) { |
|||
console.log(value); |
|||
}, |
|||
}, |
|||
id: "cascaderID", |
|||
style: { |
|||
width: 120, |
|||
height: 32, |
|||
left: 0, |
|||
top: 0, |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export default list; |
|||
@ -0,0 +1,35 @@ |
|||
import "normalize.css" |
|||
import Vue from 'vue' |
|||
import App from '@/App.vue' |
|||
import router from '@/router'; |
|||
import store from '@/store' |
|||
import '@/components/base' |
|||
import toast from '@/components/toast' |
|||
import '@/vendor/ant' |
|||
import {cloneDeep} from "lodash" |
|||
//http://kazupon.github.io/vue-i18n/api/#constructor-options
|
|||
Vue.prototype.$event = new Vue() |
|||
Vue.config.productionTip = process.env.NODE_ENV === 'production' ? true : false; |
|||
|
|||
Vue.use(toast); |
|||
|
|||
Vue.prototype.$computeStyle= function(style){ |
|||
let myStyle = cloneDeep(style); |
|||
let attr = ["left", "width", "height", "top", "right", "bottom"]; |
|||
let attrStr = ["backgroundColor", "color","position",'zIndex']; |
|||
Object.keys(style).forEach((v) => { |
|||
if (attr.indexOf(v) != -1 && typeof style[v] == "number") { |
|||
myStyle[v] = style[v] + "px"; |
|||
} |
|||
if (attrStr.indexOf(v) != -1) { |
|||
myStyle[v] = style[v]; |
|||
} |
|||
}); |
|||
return myStyle |
|||
}, |
|||
|
|||
new Vue({ |
|||
router, |
|||
store, |
|||
render: h => h(App) |
|||
}).$mount('#app') |
|||
@ -0,0 +1,32 @@ |
|||
import Vue from 'vue'; |
|||
import Router from 'vue-router';; |
|||
Vue.use(Router); |
|||
export const routes = [{ |
|||
component: () => import('@/views/about/index.vue'), |
|||
name: 'about', |
|||
meta: { |
|||
alive: true, |
|||
}, |
|||
path: '/about', |
|||
}, |
|||
{ |
|||
component: () => import('@/views/home/index.vue'), |
|||
name: 'home', |
|||
path: '/home', |
|||
}, |
|||
{ |
|||
path: '/', |
|||
redirect: '/home' |
|||
}, |
|||
|
|||
{ |
|||
name: 'notFound', |
|||
path: '*', |
|||
component: () => import('@/views/NotFound.vue') |
|||
}, |
|||
]; |
|||
const router = new Router({ |
|||
mode: 'hash', |
|||
routes, |
|||
}); |
|||
export default router; |
|||
@ -0,0 +1,33 @@ |
|||
// import Vue from 'vue'
|
|||
// import VueRouter from 'vue-router'
|
|||
// import Home from '../views/home'
|
|||
|
|||
// Vue.use(VueRouter)
|
|||
|
|||
// const routes = [{
|
|||
// path: '/home',
|
|||
// alias:'/',
|
|||
// name: 'home',
|
|||
// meta:{alive:true},
|
|||
// component: Home
|
|||
// },{
|
|||
// path: '/about',
|
|||
// name: 'about',
|
|||
// meta:{alive:true},
|
|||
// component: ()=>import('@/views/about')
|
|||
// }
|
|||
// ]
|
|||
|
|||
// const router = new VueRouter({
|
|||
// mode: 'history',
|
|||
// base: process.env.BASE_URL,
|
|||
// routes
|
|||
// })
|
|||
|
|||
// export default router
|
|||
import router from './.invoke/router'; |
|||
router.beforeEach((to, from, next) => { |
|||
next(); |
|||
}) |
|||
export default router; |
|||
// https://zhuanlan.zhihu.com/p/63079674
|
|||
@ -0,0 +1,33 @@ |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
import createPersistedState from 'vuex-persistedstate' |
|||
import root from './root' |
|||
|
|||
|
|||
Vue.use(Vuex); |
|||
const modules = {}; |
|||
const local = []; |
|||
const requireComponent = require.context('./modules/', true, /^(.*?).js$/); |
|||
// 遍历 require 进来的组件并注册
|
|||
requireComponent.keys().forEach((fileName) => { |
|||
const key = fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''); |
|||
const componentConfig = requireComponent(fileName) |
|||
const module = componentConfig.default || componentConfig; |
|||
modules[key] = module; |
|||
if (module.local == true) { |
|||
local.push(key); |
|||
} |
|||
if (Array.isArray(module.local) && module.local.length > 0) { |
|||
module.local.forEach(v => { |
|||
local.push(key + '.' + v); |
|||
}) |
|||
} |
|||
}); |
|||
const vuexStore = new Vuex.Store({ |
|||
modules, |
|||
...root, |
|||
plugins: [createPersistedState({ |
|||
paths: local |
|||
})] |
|||
}); |
|||
export default vuexStore |
|||
@ -0,0 +1,41 @@ |
|||
const state = { |
|||
components: [], |
|||
}; |
|||
const getters = { |
|||
components(state) { |
|||
return state.components; |
|||
}, |
|||
}; |
|||
|
|||
const mutations = { |
|||
addComponent(state, payload) { |
|||
state.components.push(payload); |
|||
}, |
|||
editComponent(state, payload, index) { |
|||
state.components.splice(index, 1, payload); |
|||
}, |
|||
replaceComponents(state,payload){ |
|||
state.components = payload |
|||
}, |
|||
}; |
|||
|
|||
const actions = { |
|||
addComponent({ commit }, payload) { |
|||
commit("addComponent", payload); |
|||
}, |
|||
editComponent({ commit }, payload, index) { |
|||
commit("editComponent", payload, index); |
|||
}, |
|||
replaceComponents({ commit }, payload) { |
|||
commit("replaceComponents", payload); |
|||
}, |
|||
}; |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
local: false, |
|||
state, |
|||
getters, |
|||
mutations, |
|||
actions, |
|||
}; |
|||
@ -0,0 +1,30 @@ |
|||
const state = { |
|||
token: "", |
|||
userinfo: {} |
|||
} |
|||
const getters = { |
|||
token(state) { |
|||
return state.token |
|||
}, |
|||
userinfo(state) { |
|||
return state.userinfo |
|||
}, |
|||
} |
|||
|
|||
|
|||
const mutations = { |
|||
|
|||
} |
|||
|
|||
const actions = { |
|||
|
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
local: true, |
|||
state, |
|||
getters, |
|||
mutations, |
|||
actions |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
export default { |
|||
state: {}, |
|||
getters: { |
|||
components(state){ |
|||
return state.components.components |
|||
} |
|||
}, |
|||
mutations: {}, |
|||
actions: {} |
|||
} |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<div class="detail"> |
|||
<div v-if="currentDetail"> |
|||
<a-input v-model.number="currentDetail.style.left" @blur="blur" /> |
|||
<a-input v-model.number="currentDetail.style.top" @blur="blur" /> |
|||
</div> |
|||
{{ currentDetail }}--{{ currentIndex }} |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {cloneDeep} from "lodash" |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentDetail: null, |
|||
currentIndex: -1, |
|||
}; |
|||
}, |
|||
created() { |
|||
// 激活详情页 |
|||
this.$event.$on("@editor:publish:activeOne", (item, index) => { |
|||
this.currentDetail = cloneDeep(item); |
|||
this.currentIndex = index; |
|||
}); |
|||
// 获取编辑器更新的数据 |
|||
this.$event.$on("@editor:notice:update", (item, index) => { |
|||
// 编辑器更新节点数据 |
|||
this.currentDetail = cloneDeep(item); |
|||
this.currentIndex = index; |
|||
}); |
|||
}, |
|||
beforeDestroy(){ |
|||
this.$event.$off("@editor:publish:activeOne") |
|||
this.$event.$off("@editor:notice:update") |
|||
}, |
|||
methods: { |
|||
blur() { |
|||
console.log(this.currentDetail,this.currentIndex); |
|||
this.$event.$emit("@editor:publish:updateOne",this.currentDetail,this.currentIndex) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.detail { |
|||
height: 100%; |
|||
width: 200px; |
|||
border-left: 1px solid blue; |
|||
border-top: 1px solid blue; |
|||
padding: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<div class="makeline"> |
|||
<slot></slot> |
|||
<div |
|||
v-for="(item, index) in lineTop" |
|||
:key="index" |
|||
:style="$computeStyle(item)" |
|||
></div> |
|||
<div |
|||
v-for="(item, index) in lineLeft" |
|||
:key="index" |
|||
:style="$computeStyle(item)" |
|||
></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { cloneDeep } from "lodash"; |
|||
let value = 4; |
|||
let lines = []; |
|||
let curIndex = 0; |
|||
let temp1 = { |
|||
id: "", |
|||
position: "absolute", |
|||
left: 0, |
|||
right: 0, |
|||
top: 0, |
|||
height: 1, |
|||
backgroundColor: "red", |
|||
}; |
|||
let temp2 = { |
|||
id: "", |
|||
position: "absolute", |
|||
left: 0, |
|||
bottom: 0, |
|||
top: 0, |
|||
width: 1, |
|||
backgroundColor: "red", |
|||
}; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
lineLeft: [], |
|||
lineTop: [], |
|||
}; |
|||
}, |
|||
methods: { |
|||
removeAll(){ |
|||
this.lineLeft = []; |
|||
this.lineTop = []; |
|||
}, |
|||
listenerChange(list, index,cb) { |
|||
const activeStyle = list[index].style; |
|||
list.forEach((item, jndex) => { |
|||
if (jndex !== index) { |
|||
let curStyle = item.style; |
|||
|
|||
let curBottom = curStyle.top+curStyle.height |
|||
let curRight = curStyle.left+curStyle.width |
|||
let actRight = activeStyle.left+activeStyle.width |
|||
let actBottom = activeStyle.top+activeStyle.height |
|||
|
|||
|
|||
this.removeLine(curStyle.top, curStyle.left); |
|||
this.removeLine(curBottom, curRight); |
|||
// TODO 中 中 |
|||
// 上--上 |
|||
if (Math.abs(activeStyle.top - curStyle.top) <= value) { |
|||
activeStyle.top = curStyle.top; |
|||
this.makeTop2Bottom(curStyle.top); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
// 下--上 |
|||
if (Math.abs(actBottom - curBottom) <= value) { |
|||
activeStyle.top = curBottom - activeStyle.height; |
|||
this.makeTop2Bottom(curBottom); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
// 上--下 |
|||
if (Math.abs(activeStyle.top - curBottom) <= value) { |
|||
activeStyle.top = curBottom; |
|||
this.makeTop2Bottom(curBottom); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
// 左--左 |
|||
if (Math.abs(activeStyle.left - curStyle.left) <= value) { |
|||
activeStyle.left = curStyle.left; |
|||
this.makeLeft2Right(curStyle.left); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
// 左--右 |
|||
if (Math.abs(activeStyle.left - curRight) <= value) { |
|||
activeStyle.left = curRight |
|||
this.makeLeft2Right(curRight); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
// 右--右 |
|||
if (Math.abs(actRight - curRight) <= value) { |
|||
activeStyle.left = curRight - activeStyle.width; |
|||
this.makeLeft2Right(curRight); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
// 下--上 |
|||
if (Math.abs(actBottom - curStyle.top) <= value) { |
|||
activeStyle.top = curStyle.top - activeStyle.height; |
|||
this.makeTop2Bottom(curStyle.top); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
// 右--左 |
|||
if (Math.abs(actRight - curStyle.left) <= value) { |
|||
activeStyle.left = curStyle.left - activeStyle.width; |
|||
this.makeLeft2Right(curStyle.left); |
|||
cb&&cb(list[index],index) |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
removeLine(top, left) { |
|||
let isHave = -1; |
|||
this.lineTop.forEach((line, index) => { |
|||
if (line.top == top) { |
|||
isHave = index; |
|||
} |
|||
}); |
|||
if (isHave != -1) { |
|||
this.lineTop.splice(isHave, 1); |
|||
} |
|||
let isHaveLeft = -1; |
|||
this.lineLeft.forEach((line, index) => { |
|||
if (line.left == left) { |
|||
isHaveLeft = index; |
|||
} |
|||
}); |
|||
if (isHaveLeft != -1) { |
|||
this.lineLeft.splice(isHaveLeft, 1); |
|||
} |
|||
}, |
|||
// 制作从左到右的线 |
|||
makeTop2Bottom(top) { |
|||
const line = cloneDeep(temp1); |
|||
curIndex++; |
|||
line.top = top; |
|||
line.id = curIndex; |
|||
let isHave = false; |
|||
this.lineTop.forEach((line) => { |
|||
if (Math.abs(line.top - top) <= value) { |
|||
isHave = true; |
|||
} |
|||
}); |
|||
if (!isHave) { |
|||
this.lineTop.push(line); |
|||
} |
|||
}, |
|||
// 制作从上到下的线 |
|||
makeLeft2Right(left) { |
|||
const line = cloneDeep(temp2); |
|||
curIndex++; |
|||
line.id = curIndex; |
|||
line.left = left; |
|||
let isHave = false; |
|||
this.lineLeft.forEach((line) => { |
|||
if (Math.abs(line.left - left) <= value) { |
|||
isHave = true; |
|||
} |
|||
}); |
|||
if (!isHave) { |
|||
this.lineLeft.push(line); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.makeline { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
pointer-events: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,24 @@ |
|||
<template> |
|||
<div class="shape"> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.shape { |
|||
position: absolute; |
|||
transition: none; |
|||
&.moving { |
|||
z-index: 99; |
|||
pointer-events: none; |
|||
user-select: none; |
|||
} |
|||
&.staying { |
|||
pointer-events: none; |
|||
user-select: none; |
|||
} |
|||
> .component{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<component |
|||
class="component" |
|||
:is="detail.name" |
|||
v-if="detail.type == 'component'" |
|||
v-bind="detail.props" |
|||
v-on="detail.methods" |
|||
> |
|||
<template v-for="(child, childIndex) in detail.slot"> |
|||
<template v-if="child.type == 'text'"> {{ child.text }}</template> |
|||
<customComponent v-if="child.type == 'component'" :detail="child" :key="childIndex" /> |
|||
</template> |
|||
</component> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "customComponent", |
|||
props: { |
|||
detail: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.component { |
|||
// width: 100%; |
|||
// height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<div |
|||
class="editor" |
|||
:class="[isEnter ? 'dragging' : '']" |
|||
@dragenter="dragenter" |
|||
@dragleave="dragleave" |
|||
@dragover="dragover" |
|||
@drop="drop" |
|||
> |
|||
<Shape |
|||
v-for="(item, index) in componentList" |
|||
ref="shape" |
|||
@mousedown.native="mousedown($event, index)" |
|||
:class="[ |
|||
movingIndex == index ? 'moving' : '', |
|||
movingIndex != -1 && movingIndex != index ? 'staying' : '', |
|||
]" |
|||
:key="index" |
|||
:style="[$computeStyle(item.style)]" |
|||
> |
|||
<customComponent :detail="item" :key="index" /> |
|||
</Shape> |
|||
<MakeLine ref="makeline"> </MakeLine> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import componentList from "@/data/component-list"; |
|||
import { cloneDeep } from "lodash"; |
|||
import Shape from "./Shape"; |
|||
import customComponent from "./customComponent"; |
|||
import MakeLine from "./MakeLine"; |
|||
export default { |
|||
components: { |
|||
Shape, |
|||
customComponent, |
|||
MakeLine, |
|||
}, |
|||
data() { |
|||
return { |
|||
isEnter: false, |
|||
movingIndex: -1, |
|||
activeIndex: -1, |
|||
componentList: [], |
|||
}; |
|||
}, |
|||
created () { |
|||
// 更新了一个组件 |
|||
this.$event.$on("@editor:publish:updateOne",(item,index)=>{ |
|||
this.componentList.splice(index, 1, item); |
|||
// 绑定历史记录 |
|||
// 更新了组件状态 |
|||
this.$event.$emit("@editor:notice:update",item,index); |
|||
}) |
|||
}, |
|||
beforeDestroy(){ |
|||
this.$event.$off("@editor:publish:updateOne") |
|||
}, |
|||
methods: { |
|||
mousedown(ev, index) { |
|||
let startX = ev.clientX; |
|||
let startY = ev.clientY; |
|||
let startW = this.$refs.shape[index].$el.offsetLeft; |
|||
let startH = this.$refs.shape[index].$el.offsetTop; |
|||
this.activeIndex = index |
|||
this.$event.$emit("@editor:publish:activeOne",this.componentList[index],index); |
|||
let isMoving = false; |
|||
document.onmousemove = (ex) => { |
|||
if (!isMoving && Math.abs(ex.clientX - startX) > 1) { |
|||
isMoving = true; |
|||
} |
|||
if (isMoving) { |
|||
this.$refs.shape[index].$el.onmousemove = null; |
|||
// 移动的时候才算是移动状态 |
|||
this.movingIndex = index; |
|||
let el = this.componentList[index]; |
|||
let offsetX = ex.clientX - startX + startW; |
|||
let offsetY = ex.clientY - startY + startH; |
|||
el.style.left = offsetX; |
|||
el.style.top = offsetY; |
|||
this.componentList.splice(index, 1, el); |
|||
// 派发组件更新事件 |
|||
this.$event.$emit("@editor:notice:update",el,index); |
|||
this.$refs.makeline.listenerChange(this.componentList, index,(item,index)=>{ |
|||
this.$event.$emit("@editor:notice:update",item,index); |
|||
}); |
|||
} |
|||
}; |
|||
document.onmouseup = (ex) => { |
|||
// 绑定历史记录 |
|||
this.$refs.makeline.removeAll(); |
|||
isMoving = false; |
|||
this.movingIndex = -1; |
|||
document.onmousemove = null; |
|||
document.onmouseup = null; |
|||
}; |
|||
}, |
|||
drag(e) { |
|||
console.log(e); |
|||
}, |
|||
dragenter() { |
|||
this.isEnter = true; |
|||
}, |
|||
dragleave() { |
|||
this.isEnter = false; |
|||
}, |
|||
drop(ev) { |
|||
ev.stopPropagation(); |
|||
try { |
|||
this.isEnter = false; |
|||
var { id, x, y } = JSON.parse( |
|||
decodeURIComponent(ev.dataTransfer.getData("component-transfer")) |
|||
); |
|||
let offsetX = ev.offsetX - x; |
|||
let offsetY = ev.offsetY - y; |
|||
let el = cloneDeep(componentList.filter((v) => v.id === id)[0]); |
|||
el.style.left = offsetX; |
|||
el.style.top = offsetY; |
|||
this.componentList.push(el); |
|||
} catch (error) { |
|||
console.warn(error); |
|||
} |
|||
}, |
|||
dragover(ev) { |
|||
ev.preventDefault(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.editor { |
|||
width: 200px; |
|||
height: 100%; |
|||
border-top: 1px solid blue; |
|||
position: relative; |
|||
overflow: hidden; |
|||
&.dragging { |
|||
border-color: red; |
|||
* { |
|||
pointer-events: none; |
|||
user-select: none; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<header> |
|||
header |
|||
</header> |
|||
</template> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<div class="panel"> |
|||
<a-button v-for="(item,index) in componentList" :key="index" @dragstart="drag($event,item)" @drag="drago" draggable>{{item.describe}}</a-button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import data from "@/data/component-list" |
|||
export default { |
|||
data () { |
|||
return { |
|||
componentList : data |
|||
} |
|||
}, |
|||
methods: { |
|||
drago(event){ |
|||
|
|||
}, |
|||
drag(event,row){ |
|||
event.dataTransfer.setData("component-transfer",encodeURIComponent(JSON.stringify({id:row.id,x:event.layerX,y:event.layerY}))); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.panel{ |
|||
height: 100%; |
|||
width: 200px; |
|||
border-right: 1px solid blue; |
|||
border-top: 1px solid blue; |
|||
padding: 10px; |
|||
>*{ |
|||
margin: 5px 10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,7 @@ |
|||
import Vue from 'vue'; |
|||
// 通用采用了按需引入
|
|||
import Antd from 'ant-design-vue'; |
|||
import 'ant-design-vue/dist/antd.css'; |
|||
|
|||
console.log(Antd) |
|||
Vue.use(Antd); |
|||
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div> |
|||
404 |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<div> |
|||
<router-link to="/home" replace>Go to home</router-link> |
|||
<input type="text" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
beforeRouteLeave(to, from, next) { |
|||
next(); |
|||
}, |
|||
beforeRouteEnter(to, from, next) { |
|||
next(vw => { |
|||
// 去除缓存 |
|||
vw.$route.meta.alive = false; |
|||
}); |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,2 @@ |
|||
meta: |
|||
- alive: true |
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<div class="home"> |
|||
<x-header></x-header> |
|||
<div class="layout"> |
|||
<panel class="panel"></panel> |
|||
<editor class="editor"></editor> |
|||
<detail class="detail"></detail> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import detail from "@/ui/detail/detail"; |
|||
import editor from "@/ui/editor/editor"; |
|||
import header from "@/ui/header/header"; |
|||
import panel from "@/ui/panel/panel"; |
|||
export default { |
|||
name: "home", |
|||
components: { |
|||
detail, |
|||
editor, |
|||
panel, |
|||
xHeader:header, |
|||
}, |
|||
mounted () { |
|||
setTimeout(() => { |
|||
this.$toast("哈哈") |
|||
}, 200); |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.home{ |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
} |
|||
.layout{ |
|||
flex: 1; |
|||
display: flex; |
|||
align-content: center; |
|||
height: 100%; |
|||
.editor{ |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
const path = require('path') |
|||
const webpack = require('webpack'); |
|||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin |
|||
const CompressionPlugin = require("compression-webpack-plugin"); |
|||
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin"); |
|||
const VueRouterInvokeWebpackPlugin = require('vue-router-invoke-webpack-plugin'); |
|||
const $config = require("./build/config") |
|||
const root = path.resolve($config.modules_root, $config.modules_dir); |
|||
const isProd = () => { |
|||
return process.env.NODE_ENV === 'production'; |
|||
}; |
|||
|
|||
let plugins = []; |
|||
plugins.push( |
|||
// 将 dll 注入到 生成的 html 模板中
|
|||
new AddAssetHtmlPlugin({ |
|||
// dll文件位置
|
|||
filepath: path.resolve(root, '*.js'), |
|||
// dll 引用路径
|
|||
publicPath: $config.modules_dir, |
|||
// dll最终输出的目录
|
|||
outputPath: $config.modules_dir |
|||
}) |
|||
) |
|||
plugins.push( |
|||
// 将 dll 注入到 生成的 html 模板中
|
|||
new AddAssetHtmlPlugin({ |
|||
// dll文件位置
|
|||
filepath: path.resolve(root, '*.css'), |
|||
// dll 引用路径
|
|||
publicPath: $config.modules_dir, |
|||
// dll最终输出的目录
|
|||
typeOfAsset: 'css', |
|||
outputPath: $config.modules_dir |
|||
}) |
|||
) |
|||
let modules = Object.keys($config.modules); |
|||
modules.forEach(module => { |
|||
plugins.push(new webpack.DllReferencePlugin({ |
|||
context: process.cwd(), |
|||
manifest: require(path.resolve(root, `${module}-manifest.json`)) |
|||
}), ) |
|||
}) |
|||
if (isProd()) { |
|||
plugins.push(new BundleAnalyzerPlugin()) |
|||
plugins.push(new CompressionPlugin({ |
|||
test: /\.js$|\.html$|\.css/, |
|||
threshold: 10240, |
|||
deleteOriginalAssets: false |
|||
})); |
|||
} |
|||
|
|||
|
|||
module.exports = { |
|||
publicPath: process.env.NODE_ENV === 'production' ? |
|||
'./' : '/', |
|||
assetsDir: 'static', |
|||
productionSourceMap: false, |
|||
// 以下是必须的，如果你要编译完成之后打印二维码的话
|
|||
devServer: { |
|||
open: true, |
|||
host: '0.0.0.0', |
|||
// 要保证不会冲突，否则二维码不对
|
|||
port: 3200, |
|||
https: false, |
|||
compress: true, |
|||
hotOnly: false, |
|||
overlay: { |
|||
warnings: false, |
|||
errors: true |
|||
} |
|||
}, |
|||
css: { |
|||
// 是否使用css分离插件 ExtractTextPlugin
|
|||
extract: isProd() ? true : false, |
|||
// 开启 CSS source maps?
|
|||
sourceMap: isProd() ? true : false, |
|||
// css预设器配置项
|
|||
loaderOptions: { |
|||
scss: { |
|||
prependData: ` |
|||
@import "~@/assets/style/utils.scss"; |
|||
` |
|||
}, |
|||
}, |
|||
// requireModuleExtension: false,
|
|||
}, |
|||
chainWebpack: config => {}, |
|||
configureWebpack: (config) => { |
|||
return { |
|||
resolve: { |
|||
alias: { |
|||
'@': path.resolve('src') |
|||
} |
|||
}, |
|||
plugins: [ |
|||
new webpack.ProvidePlugin({ |
|||
// _: "lodash",
|
|||
// $: "jquery"
|
|||
}), |
|||
new webpack.BannerPlugin('文件头声明'), |
|||
// https://github.com/cklwblove/vue-preset/blob/master/generator/index.js
|
|||
// https://zhuanlan.zhihu.com/p/63079674
|
|||
new VueRouterInvokeWebpackPlugin({ |
|||
dir: 'src/views', |
|||
alias: '@/views', |
|||
mode: 'hash', |
|||
base: process.env.BASE_URL, |
|||
ignore: ['images', 'components', 'NotFound.vue', /\.scss$/], |
|||
notFound: '@/views/NotFound.vue', |
|||
|
|||
routerDir: 'src/router', |
|||
redirect: [{ |
|||
redirect: '/home', |
|||
path: '/' |
|||
}] |
|||
}), |
|||
...plugins |
|||
], |
|||
externals: {} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue