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

fix: 未使用文件删除

Browse Source
This commit is contained in:
dataeaseShu 2022-11-08 15:42:58 +08:00
parent bd51f3ebf8
commit 43efd938e1
46 changed files with 0 additions and 10594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/api/commonAjax.js
View File

@ -1,38 +0,0 @@
import request from '@/utils/request'
export function post(url, data) {
return request({
url: url,
method: 'post',
loading: true,
data
})
}
export function get(url) {
return request({
url: url,
method: 'get',
loading: true
})
}
export function fileUpload(url, file, files, param) {
const formData = new FormData()
if (file) {
formData.append('file', file)
}
if (files) {
files.forEach(f => {
formData.append('files', f)
})
}
formData.append('request', new Blob([JSON.stringify(param)], { type: 'application/json' }))
return request({
method: 'POST',
loading: true,
url: url,
data: formData
})
}
export default { fileUpload }

85
frontend/src/components/IconSelect/index.vue
View File

@ -1,85 +0,0 @@
<!-- @author zhengjie -->
<template>
<div class="icon-body">
<el-input
v-model="name"
style="position: relative;"
clearable
placeholder="请输入图标名称"
@clear="filterIcons"
@input.native="filterIcons"
>
<i
slot="suffix"
class="el-icon-search el-input__icon"
/>
</el-input>
<div class="icon-list">
<div
v-for="(item, index) in iconList"
:key="index"
@click="selectedIcon(item)"
>
<svg-icon
:icon-class="item"
style="height: 30px;width: 16px;"
/>
<span>{{ item }}</span>
</div>
</div>
</div>
</template>
<script>
import icons from './requireIcons'
export default {
name: 'IconSelect',
data() {
return {
name: '',
iconList: icons
}
},
methods: {
filterIcons() {
this.iconList = icons
if (this.name) {
this.iconList = this.iconList.filter(item => item.includes(this.name))
}
},
selectedIcon(name) {
this.$emit('selected', name)
document.body.click()
},
reset() {
this.name = ''
this.iconList = icons
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.icon-body {
width: 100%;
padding: 10px;
.icon-list {
height: 200px;
overflow-y: scroll;
div {
height: 30px;
line-height: 30px;
margin-bottom: -5px;
cursor: pointer;
width: 33%;
float: left;
}
span {
display: inline-block;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
}
}
</style>

11
frontend/src/components/IconSelect/requireIcons.js
View File

@ -1,11 +0,0 @@
const req = require.context('@/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys()
const re = /\.\/(.*)\.svg/
const icons = requireAll(req).map(i => {
return i.match(re)[1]
})
export default icons

76
frontend/src/components/asyncSoltComponent/index.vue
View File

@ -1,76 +0,0 @@
<template>
<component
:is="mode"
:ref="refId"
v-bind="$attrs"
v-on="$listeners"
>
<template #default>
<slot name="default" />
</template>
</component>
</template>
<script>
import { uuid } from 'vue-uuid'
import { get } from '@/api/system/dynamic'
export default {
name: 'AsyncComponent',
inheritAttrs: true,
props: {
// 父组件提供请求地址
url: {
type: String,
default: ''
}
},
data() {
return {
resData: '',
mode: '',
refId: null
}
},
watch: {
url: {
immediate: true,
async handler(val, oldVal) {
if (!this.url) return
// Cache 缓存 根据 url 参数
if (!window.SyncComponentCache) {
window.SyncComponentCache = {}
}
let res
if (!window.SyncComponentCache[this.url]) {
window.SyncComponentCache[this.url] = get(this.url)
// window.SyncComponentCache[this.url] = Axios.get(this.url)
res = await window.SyncComponentCache[this.url]
} else {
res = await window.SyncComponentCache[this.url]
}
const Fn = Function
this.mode = new Fn(`return ${res.data || res}`)()
/* if (res && res.data) {
const Fn = Function
this.mode = new Fn(`return ${res.data || res}`)()
} */
}
}
},
created() {
this.refId = uuid.v1
},
methods: {
/* chartResize() {
this.$refs[this.refId] && this.$refs[this.refId].chartResize && this.$refs[this.refId].chartResize()
}, */
callPluginInner(param) {
const { methodName, methodParam } = param
this.$refs[this.refId] && this.$refs[this.refId][methodName] && this.$refs[this.refId][methodName](methodParam)
}
}
}
</script>

92
frontend/src/components/breadcrumb/index.vue
View File

@ -1,92 +0,0 @@
<template>
<el-breadcrumb
class="app-breadcrumb"
separator="/"
>
<transition-group name="breadcrumb">
<el-breadcrumb-item
v-for="(item,index) in levelList"
:key="item.path"
>
<span v-if="index === 0">当前位置：</span>
<span
v-if="item.redirect==='noRedirect'||index==levelList.length-1"
class="no-redirect"
>{{ item.meta.title }}</span>
<a
v-else
@click.prevent="handleLink(item)"
>{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
import pathToRegexp from 'path-to-regexp'
export default {
data() {
return {
levelList: null
}
},
watch: {
$route() {
this.getBreadcrumb()
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb() {
// only show routes with meta.title
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
const first = matched[0]
if (!this.isDashboard(first)) {
matched = [{ path: '/panel', meta: { title: '仪表板' }}].concat(matched)
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},
isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
// return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
return name.trim().toLocaleLowerCase() === 'panel'.toLocaleLowerCase()
},
pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route
var toPath = pathToRegexp.compile(path)
return toPath(params)
},
handleLink(item) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect)
return
}
this.$router.push(this.pathCompile(path))
}
}
}
</script>
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 8px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
</style>

128
frontend/src/components/business/ElSelectAll/index.vue
View File

@ -1,128 +0,0 @@
<template>
<el-select
v-model="selected"
multiple
v-bind="$attrsAll"
v-on="$listenserAll"
@change="onChange"
>
<el-option
v-for="item in mdoptionsList"
:key="item.key"
:label="item.label"
:value="item.value"
/>
<slot name="default" />
</el-select>
</template>
<script>
export default {
name: 'ElSelectAll',
props: {
value: {
type: Array,
default: () => {
return []
}
},
options: {
type: Array,
default: () => {
return []
}
}
},
data() {
const selected = this.value || []
return {
selected,
mdoptionsValue: [],
oldMdoptionsValue: [],
mdoptionsList: []
}
},
computed: {
$attrsAll() {
// const val = this.$vnode.data.model && this.$vnode.data.model.value;
const result = {
// value: val,
...this.$attrs
}
return result
},
$listenserAll() {
const _this = this
return Object.assign({}, this.$listeners, {
change: () => {
this.$emit('change', (_this.selected || []).filter(v => {
return v !== 'all'
}))
},
input: () => {
this.$emit('input', (_this.selected || []).filter(v => {
return v !== 'all'
}))
}
})
}
},
watch: {
selected: {
immediate: true,
deep: true,
handler(val) {
this.$emit('input', (val || []).filter(v => {
return v !== 'all'
}))
}
},
options: {
immediate: true,
deep: true,
handler(val) {
if ((!val || val.length === 0) && !this.$slots) {
this.mdoptionsList = []
} else {
this.mdoptionsList = [{
key: 'all',
value: 'all',
label: '全部'
}, ...val]
}
}
}
},
mounted() {
},
methods: {
onChange(val) {
// eslint-disable-next-line no-debugger
const allValues = []
// 保留所有值
for (const item of this.mdoptionsList) {
allValues.push(item.value)
}
// 用来储存上一次的值，可以进行对比
const oldVal = this.oldMdoptionsValue.length === 1 ? [] : this.oldMdoptionsValue[1] || []
// 若是全部选择
if (val.includes('all')) this.selected = allValues
// 取消全部选中 上次有 当前没有 表示取消全选
if (oldVal.includes('all') && !val.includes('all')) this.selected = []
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes('all') && val.includes('all')) {
const index = val.indexOf('all')
val.splice(index, 1) // 排除全选选项
this.selected = val
}
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
if (!oldVal.includes('all') && !val.includes('all')) {
if (val.length === allValues.length - 1) this.selected = ['all'].concat(val)
}
// 储存当前最后的结果 作为下次的老数据
this.oldMdoptionsValue[1] = this.selected
}
}
}
</script>

131
frontend/src/components/business/complexTable/index.vue
View File

@ -1,131 +0,0 @@
<template>
<div class="complex-table">
<div
v-if="$slots.header || header"
class="complex-table__header"
>
<slot name="header">{{ header }}</slot>
</div>
<div
v-if="$slots.toolbar || searchConfig"
class="complex-table__toolbar"
>
<div>
<slot name="toolbar" />
</div>
<fu-search-bar
ref="search"
v-bind="searchConfig"
@exec="search"
>
<template #complex>
<slot name="complex" />
</template>
<slot name="buttons" />
<fu-table-column-select
v-if="!hideColumns"
:columns="columns"
/>
</fu-search-bar>
</div>
<div class="complex-table__body">
<fu-table
v-bind="$attrs"
:columns="columns"
:local-key="localKey"
v-on="$listeners"
>
<slot />
</fu-table>
</div>
<div
v-if="$slots.pagination || paginationConfig"
class="complex-table__pagination"
>
<slot name="pagination">
<fu-table-pagination
:current-page.sync="paginationConfig.currentPage"
:page-size.sync="paginationConfig.pageSize"
v-bind="paginationConfig"
@change="search"
/>
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'ComplexTable',
props: {
columns: {
type: Array,
default: () => []
},
hideColumns: {
type: Boolean,
default: false
},
// eslint-disable-next-line vue/require-default-prop
localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
// eslint-disable-next-line vue/require-default-prop
header: String,
// eslint-disable-next-line vue/require-default-prop
searchConfig: Object,
// eslint-disable-next-line vue/require-default-prop
paginationConfig: Object,
transCondition: {
type: Object,
default: null
}
},
data() {
return {
condition: {}
}
},
mounted() {
if (this.transCondition !== null) {
this.$refs.search.setConditions(this.transCondition)
}
},
methods: {
search(condition, e) {
if (condition) {
this.condition = condition
}
this.$emit('search', this.condition, e)
}
}
}
</script>
<style lang="scss">
@import "~@/styles/mixin.scss";
.complex-table {
.complex-table__header {
@include flex-row(flex-start, center);
line-height: 60px;
font-size: 18px;
}
.complex-table__toolbar {
@include flex-row(space-between, center);
.fu-search-bar {
width: auto;
}
}
.complex-table__pagination {
margin-top: 20px;
@include flex-row(flex-end);
}
}
</style>

98
frontend/src/components/business/conditionTable/index.vue
View File

@ -1,98 +0,0 @@
<template>
<div>
<!-- <el-switch v-model="value" active-text="当前用户" /> -->
<treeselect
v-model="value"
:options="options"
:load-options="loadData"
style="width: 200px"
:no-children-text="$t('commons.treeselect.no_children_text')"
:no-options-text="$t('commons.treeselect.no_options_text')"
:no-results-text="$t('commons.treeselect.no_results_text')"
/>
</div>
</template>
<script>
import { ComplexCondition } from 'fit2cloud-ui/src/components/search-bar/model'
import { getDeptTree } from '@/api/system/dept'
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
props: {
// eslint-disable-next-line vue/require-default-prop
field: String,
// eslint-disable-next-line vue/require-default-prop
label: String,
// eslint-disable-next-line vue/require-default-prop
defaultOperator: String
// eslint-disable-next-line vue/require-default-prop
// options: Array
// eslint-disable-next-line vue/require-default-prop
// loadData: Function
},
data() {
return {
value: undefined,
operator: 'dept',
operatorLabel: '组织',
options: null
}
},
computed: {
valueLabel() {
return this.value
}
},
// 自定义搜索控件的2个方法
methods: {
init() { // 初始化方法，在打开复合搜索界面时会被调用
// 例如清空之前填写的内容
this.value = undefined
},
getCondition() { // 点击确认时调用
const { field, label, operator, operatorLabel, value, valueLabel } = this
// 必须返回ComplexCondition类型的对象
return new ComplexCondition({ field, label, operator, operatorLabel, value, valueLabel })
},
// 获取弹窗内部门数据
loadData({ action, parentNode, callback }) {
if (action === LOAD_ROOT_OPTIONS) {
const _self = this
!this.options && getDeptTree('0').then(res => {
_self.options = res.data.map(node => _self.normalizer(node))
callback()
})
}
if (action === LOAD_CHILDREN_OPTIONS) {
const _self = this
getDeptTree(parentNode.id).then(res => {
parentNode.children = res.data.map(function(obj) {
return _self.normalizer(obj)
})
callback()
})
}
},
normalizer(node) {
if (node.hasChildren) {
node.children = null
}
return {
id: node.deptId,
label: node.name,
children: node.children
}
}
}
}
</script>
<style scoped>
</style>

115
frontend/src/components/business/treeTable/index.vue
View File

@ -1,115 +0,0 @@
<template>
<div class="complex-table">
<div
v-if="$slots.header || header"
class="complex-table__header"
>
<slot name="header">{{ header }}</slot>
</div>
<div
v-if="$slots.toolbar || searchConfig"
class="complex-table__toolbar"
>
<!-- <slot name="toolbar">
<fu-search-bar v-bind="searchConfig" @exec="search">
<slot name="buttons" />
<fu-table-column-select :columns="columns" />
</fu-search-bar>
</slot> -->
<div>
<slot name="toolbar" />
</div>
<fu-search-bar
v-bind="searchConfig"
@exec="search"
>
<template #complex>
<slot name="complex" />
</template>
<slot name="buttons" />
<fu-table-column-select :columns="columns" />
</fu-search-bar>
</div>
<div class="complex-table__body">
<slot />
<!-- <fu-table ref="table" v-bind="$attrs" :columns="columns" :local-key="localKey" v-on="$listeners">
<slot />
</fu-table> -->
</div>
<div
v-if="$slots.pagination || paginationConfig"
class="complex-table__pagination"
>
<slot name="pagination">
<fu-table-pagination
:current-page.sync="paginationConfig.currentPage"
:page-size.sync="paginationConfig.pageSize"
v-bind="paginationConfig"
@change="search"
/>
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'TreeTable',
props: {
columns: {
type: Array,
default: () => []
},
// eslint-disable-next-line vue/require-default-prop
localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
// eslint-disable-next-line vue/require-default-prop
header: String,
// eslint-disable-next-line vue/require-default-prop
searchConfig: Object,
// eslint-disable-next-line vue/require-default-prop
paginationConfig: Object
},
data() {
return {
condition: {}
}
},
methods: {
search(condition, e) {
if (condition) {
this.condition = condition
}
this.$emit('search', this.condition, e)
}
}
}
</script>
<style lang="scss">
@import "~@/styles/mixin.scss";
.complex-table {
.complex-table__header {
@include flex-row(flex-start, center);
line-height: 60px;
font-size: 18px;
}
.complex-table__toolbar {
@include flex-row(space-between, center);
.fu-search-bar {
width: auto;
}
}
.complex-table__pagination {
margin-top: 20px;
@include flex-row(flex-end);
}
}
</style>

539
frontend/src/components/canvas/assets/iconfont/demo.css
View File

@ -1,539 +0,0 @@
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
width: 80%;
}
.markdown ul > li {
list-style: circle;
}
.markdown > ul li,
.markdown blockquote ul > li {
margin-left: 20px;
padding-left: 4px;
}
.markdown > ul li p,
.markdown > ol li p {
margin: 0.6em 0;
}
.markdown ol > li {
list-style: decimal;
}
.markdown > ol li,
.markdown blockquote ol > li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown > table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown > table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown > table th,
.markdown > table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown > table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown > br,
.markdown > p > br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

307
frontend/src/components/canvas/assets/iconfont/demo_index.html
View File

@ -1,307 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2373406" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe66a;</span>
<div class="name">向右旋转</div>
<div class="code-name">&amp;#xe66a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">图片</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe672;</span>
<div class="name">锁</div>
<div class="code-name">&amp;#xe672;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe790;</span>
<div class="name">矩形</div>
<div class="code-name">&amp;#xe790;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">文本</div>
<div class="code-name">&amp;#xe652;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">按钮</div>
<div class="code-name">&amp;#xe648;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-xiangyouxuanzhuan"></span>
<div class="name">
向右旋转
</div>
<div class="code-name">.icon-xiangyouxuanzhuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tupian"></span>
<div class="name">
图片
</div>
<div class="code-name">.icon-tupian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-suo"></span>
<div class="name">
锁
</div>
<div class="code-name">.icon-suo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juxing"></span>
<div class="name">
矩形
</div>
<div class="code-name">.icon-juxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenben"></span>
<div class="name">
文本
</div>
<div class="code-name">.icon-wenben
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-button"></span>
<div class="name">
按钮
</div>
<div class="code-name">.icon-button
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangyouxuanzhuan"></use>
</svg>
<div class="name">向右旋转</div>
<div class="code-name">#icon-xiangyouxuanzhuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tupian"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icon-tupian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-suo"></use>
</svg>
<div class="name">锁</div>
<div class="code-name">#icon-suo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juxing"></use>
</svg>
<div class="name">矩形</div>
<div class="code-name">#icon-juxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wenben"></use>
</svg>
<div class="name">文本</div>
<div class="code-name">#icon-wenben</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-button"></use>
</svg>
<div class="name">按钮</div>
<div class="code-name">#icon-button</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>

123
frontend/src/components/canvas/components/AnimationList.vue
View File

@ -1,123 +0,0 @@
<template>
<div class="animation-list">
<div class="div-animation">
<el-button @click="isShowAnimation = true">添加动画</el-button>
<el-button @click="previewAnimate">预览动画</el-button>
<div>
<el-tag
v-for="(tag, index) in curComponent.animations"
:key="index"
closable
@close="removeAnimation(index)"
>
{{ tag.label }}
</el-tag>
</div>
</div>
<!-- 选择动画 -->
<Modal v-model="isShowAnimation">
<el-tabs v-model="animationActiveName">
<el-tab-pane
v-for="item in animationClassData"
:key="item.label"
:label="item.label"
:name="item.label"
>
<el-scrollbar class="animate-container">
<div
v-for="(animate, index) in item.children"
:key="index"
class="animate"
@mouseover="hoverPreviewAnimate = animate.value"
@click="addAnimation(animate)"
>
<div :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
{{ animate.label }}
</div>
</div>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</Modal>
</div>
</template>
<script>
import Modal from '@/components/canvas/components/Modal'
import eventBus from '@/components/canvas/utils/eventBus'
import animationClassData from '@/components/canvas/utils/animationClassData'
import { mapState } from 'vuex'
export default {
components: { Modal },
data() {
return {
isShowAnimation: false,
hoverPreviewAnimate: '',
animationActiveName: '进入',
animationClassData,
showAnimatePanel: false
}
},
computed: mapState([
'curComponent'
]),
methods: {
addAnimation(animate) {
this.$store.commit('addAnimation', animate)
this.isShowAnimation = false
},
previewAnimate() {
eventBus.$emit('runAnimation')
},
removeAnimation(index) {
this.$store.commit('removeAnimation', index)
}
}
}
</script>
<style lang="scss">
.animation-list {
.div-animation {
text-align: center;
& > div {
margin-top: 20px;
}
.el-tag {
display: block;
width: 50%;
margin: auto;
margin-bottom: 10px;
}
}
.el-scrollbar__view {
display: flex;
align-items: center;
flex-wrap: wrap;
padding-left: 10px;
.animate > div {
width: 100px;
height: 60px;
background: #f5f8fb;
display: flex;
align-items: center;
justify-content: center;
margin: 0 12px;
margin-bottom: 10px;
font-size: 12px;
color: #333;
border-radius: 3px;
user-select: none;
cursor: pointer;
}
}
}
</style>

153
frontend/src/components/canvas/components/AttrList.vue
View File

@ -1,153 +0,0 @@
<!-- TODO: 这个页面后续将用 JSX 重构 -->
<template>
<div class="attr-list">
<el-form>
<el-form-item
v-for="(key, index) in styleKeys.filter(item => item != 'rotate')"
:key="index"
:label="map[key]"
>
<el-color-picker
v-if="key == 'borderColor'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'color'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'backgroundColor'"
v-model="curComponent.style[key]"
/>
<el-select
v-else-if="selectKey.includes(key)"
v-model="curComponent.style[key]"
>
<template v-if="key == 'textAlign'">
<el-option
v-for="item in textAlignOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
<template v-else-if="key == 'borderStyle'">
<el-option
v-for="item in borderStyleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
<template v-else>
<el-option
v-for="item in verticalAlignOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
</el-select>
<el-input
v-else
v-model="curComponent.style[key]"
type="number"
/>
</el-form-item>
<el-form-item
v-if="curComponent && !excludes.includes(curComponent.component)"
:label="$t('panel.content')"
>
<el-input
v-model="curComponent.propValue"
type="textarea"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
textAlignOptions: [
{
label: this.$t('panel.text_align_left'),
value: 'left'
},
{
label: this.$t('panel.text_align_center'),
value: 'center'
},
{
label: this.$t('panel.text_align_right'),
value: 'right'
}
],
borderStyleOptions: [
{
label: this.$t('panel.border_style_solid'),
value: 'solid'
},
{
label: this.$t('panel.border_style_dashed'),
value: 'dashed'
}
],
verticalAlignOptions: [
{
label: this.$t('panel.vertical_align_top'),
value: 'top'
},
{
label: this.$t('panel.vertical_align_middle'),
value: 'middle'
},
{
label: this.$t('panel.vertical_align_bottom'),
value: 'bottom'
}
],
selectKey: ['textAlign', 'borderStyle', 'verticalAlign'],
map: {
left: this.$t('panel.left'),
top: this.$t('panel.top'),
height: this.$t('panel.height'),
width: this.$t('panel.width'),
color: this.$t('panel.color'),
backgroundColor: this.$t('panel.backgroundColor'),
borderStyle: this.$t('panel.borderStyle'),
borderWidth: this.$t('panel.borderWidth'),
borderColor: this.$t('panel.borderColor'),
borderRadius: this.$t('panel.borderRadius'),
fontSize: this.$t('panel.fontSize'),
fontWeight: this.$t('panel.fontWeight'),
lineHeight: this.$t('panel.lineHeight'),
letterSpacing: this.$t('panel.letterSpacing'),
textAlign: this.$t('panel.textAlign'),
opacity: this.$t('panel.opacity'),
verticalAlign: this.$t('panel.verticalAlign')
}
}
},
computed: {
styleKeys() {
return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
},
curComponent() {
return this.$store.state.curComponent
}
}
}
</script>
<style lang="scss" scoped>
.attr-list {
overflow: auto;
padding: 20px;
padding-top: 0;
height: 100%;
}
</style>

204
frontend/src/components/canvas/components/AttrListExtend.vue
View File

@ -1,204 +0,0 @@
<!-- TODO: 这个页面后续将用 JSX 重构 -->
<template>
<div class="attr-list">
<el-form
label-width="80px"
size="mini"
>
<el-form-item
v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))"
:key="index"
:label="map[key]+':'"
>
<el-color-picker
v-if="key == 'borderColor'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'color'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'backgroundColor'"
v-model="curComponent.style[key]"
/>
<el-select
v-else-if="selectKey.includes(key)"
v-model="curComponent.style[key]"
>
<template v-if="key == 'textAlign'">
<el-option
v-for="item in textAlignOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
<template v-else-if="key == 'borderStyle'">
<el-option
v-for="item in borderStyleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
<template v-else>
<el-option
v-for="item in verticalAlignOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
</el-select>
<el-input
v-else
v-model="curComponent.style[key]"
type="number"
/>
</el-form-item>
<el-form-item :label="$t('panel.content_style')+':'">
<div
v-if="curComponent.type==='v-text'"
style="width: 100%;max-height: 400px;overflow: auto"
>
<VText
style="border: 1px solid #dcdfe6;border-radius:4px;background-color: #f7f8fa;"
:prop-value="curComponent.propValue"
:element="curComponent"
:edit-mode="'edit'"
:style="getComponentStyleDefault(curComponent.style)"
/>
</div>
<rect-shape
v-if="curComponent.type==='rect-shape'"
style="width: 200px!important;height: 100px!important;"
:prop-value="curComponent.propValue"
:element="curComponent"
:style="getComponentStyleDefault(curComponent.style)"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import VText from '@/components/canvas/customComponent/VText'
import RectShape from '@/components/canvas/customComponent/RectShape'
import { getStyle } from '@/components/canvas/utils/style'
export default {
components: { VText, RectShape },
data() {
return {
excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
textAlignOptions: [
{
label: this.$t('panel.text_align_left'),
value: 'left'
},
{
label: this.$t('panel.text_align_center'),
value: 'center'
},
{
label: this.$t('panel.text_align_right'),
value: 'right'
}
],
borderStyleOptions: [
{
label: this.$t('panel.border_style_solid'),
value: 'solid'
},
{
label: this.$t('panel.border_style_dashed'),
value: 'dashed'
}
],
verticalAlignOptions: [
{
label: this.$t('panel.vertical_align_top'),
value: 'top'
},
{
label: this.$t('panel.vertical_align_middle'),
value: 'middle'
},
{
label: this.$t('panel.vertical_align_bottom'),
value: 'bottom'
}
],
selectKey: ['textAlign', 'borderStyle', 'verticalAlign'],
map: {
left: this.$t('panel.left'),
top: this.$t('panel.top'),
height: this.$t('panel.height'),
width: this.$t('panel.width'),
color: this.$t('panel.color'),
backgroundColor: this.$t('panel.backgroundColor'),
borderStyle: this.$t('panel.borderStyle'),
borderWidth: this.$t('panel.borderWidth'),
borderColor: this.$t('panel.borderColor'),
borderRadius: this.$t('panel.borderRadius'),
fontSize: this.$t('panel.fontSize'),
fontWeight: this.$t('panel.fontWeight'),
lineHeight: this.$t('panel.lineHeight'),
letterSpacing: this.$t('panel.letterSpacing'),
textAlign: this.$t('panel.textAlign'),
opacity: this.$t('panel.opacity'),
verticalAlign: this.$t('panel.verticalAlign')
}
}
},
computed: {
styleKeys() {
return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
},
curComponent() {
return this.$store.state.curComponent
},
styleFilter() {
const filter = [
'fontSize',
'fontWeight',
'lineHeight',
'letterSpacing',
'textAlign',
'color',
'borderColor',
'borderWidth',
'backgroundColor',
'borderStyle',
'verticalAlign'
]
if (this.$store.state.curComponent.type === 'v-text') {
filter.push('width', 'height')
}
return filter
}
},
methods: {
getComponentStyleDefault(style) {
if (this.$store.state.curComponent.type === 'v-text') {
return getStyle(style, ['top', 'left', 'rotate'])
} else {
return getStyle(style, ['top', 'left', 'rotate', 'height', 'width'])
}
// return style
}
}
}
</script>
<style lang="scss" scoped>
.attr-list {
overflow: auto;
padding: 5px;
padding-top: 0;
height: 100%;
}
</style>

73
frontend/src/components/canvas/components/ComponentList.vue
View File

@ -1,73 +0,0 @@
<template>
<div
class="component-list"
@dragstart="handleDragStart"
>
<div
v-for="(item, index) in componentList"
:key="index"
class="list"
draggable
:data-index="index"
>
<span
class="iconfont"
:class="'icon-' + item.icon"
/>
<span>{{ item.label }}</span>
</div>
</div>
</template>
<script>
import componentList from '@/components/canvas/customComponent/component-list'
export default {
data() {
return {
componentList
}
},
methods: {
handleDragStart(e) {
e.dataTransfer.setData('index', e.target.dataset.index)
}
}
}
</script>
<style lang="scss" scoped>
.component-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
.list {
width: 45%;
border: 1px solid #ddd;
cursor: grab;
margin-bottom: 10px;
text-align: center;
color: #333;
padding: 2px 5px;
display: flex;
align-items: center;
justify-content: center;
&:active {
cursor: grabbing;
}
.iconfont {
margin-right: 4px;
font-size: 20px;
}
.icon-wenben,
.icon-tupian {
font-size: 18px;
}
}
}
</style>

99
frontend/src/components/canvas/components/EventList.vue
View File

@ -1,99 +0,0 @@
<template>
<div class="event-list">
<div class="div-events">
<el-button @click="isShowEvent = true">添加事件</el-button>
<div>
<el-tag
v-for="event in Object.keys(curComponent.events)"
:key="event"
closable
@close="removeEvent(event)"
>
{{ event }}
</el-tag>
</div>
</div>
<!-- 选择事件 -->
<Modal v-model="isShowEvent">
<el-tabs v-model="eventActiveName">
<el-tab-pane
v-for="item in eventList"
:key="item.key"
:label="item.label"
:name="item.key"
style="padding: 0 20px"
>
<el-input
v-if="item.key == 'redirect'"
v-model="item.param"
type="textarea"
placeholder="请输入完整的 URL"
/>
<el-input
v-if="item.key == 'alert'"
v-model="item.param"
type="textarea"
placeholder="请输入要 alert 的内容"
/>
<el-button
style="margin-top: 20px;"
@click="addEvent(item.key, item.param)"
>确定</el-button>
</el-tab-pane>
</el-tabs>
</Modal>
</div>
</template>
<script>
import { mapState } from 'vuex'
import Modal from '@/components/canvas/components/Modal'
import { eventList } from '@/components/canvas/utils/events'
export default {
components: { Modal },
data() {
return {
isShowEvent: false,
eventURL: '',
eventActiveName: 'redirect',
eventList
}
},
computed: mapState([
'curComponent'
]),
methods: {
addEvent(event, param) {
this.isShowEvent = false
this.$store.commit('addEvent', { event, param })
},
removeEvent(event) {
this.$store.commit('removeEvent', event)
}
}
}
</script>
<style lang="scss" scoped>
.event-list {
.div-events {
text-align: center;
padding: 0 20px;
.el-button {
display: inline-block;
margin-bottom: 10px;
}
.el-tag {
display: block;
width: 50%;
margin: auto;
margin-bottom: 10px;
}
}
}
</style>

56
frontend/src/components/canvas/components/Modal.vue
View File

@ -1,56 +0,0 @@
<template>
<div
v-if="show"
class="modal-bg"
@click="hide"
>
<div
class="fadeInLeft animated modal"
@click="stopPropagation"
>
<slot />
</div>
</div>
</template>
<script>
export default {
model: {
prop: 'show',
event: 'change'
},
props: {
show: {
type: Boolean,
default: false
}
},
methods: {
hide() {
this.$emit('change')
},
stopPropagation(e) {
e.stopPropagation()
}
}
}
</script>
<style lang="scss" scoped>
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
z-index: 1001;
.modal {
width: 400px;
background: #fff;
height: 100%;
}
}
</style>

148
frontend/src/components/canvas/components/editor/Hyperlinks.vue
View File

@ -1,148 +0,0 @@
<template>
<el-popover
ref="popover"
width="340"
trigger="click"
>
<el-row>
<el-form
ref="form"
size="mini"
label-width="70px"
>
<el-form-item :label="$t('panel.enable_jump')">
<el-switch
v-model="linkInfo.enable"
size="mini"
/>
<span
v-show="linkInfo.enable"
style="color: #909399; font-size: 8px;margin-left: 3px"
>
Tips:{{ $t('panel.link_open_tips') }}
</span>
</el-form-item>
<el-form-item :label="$t('panel.open_mode')">
<el-radio-group
v-model="linkInfo.openMode"
:disabled="!linkInfo.enable"
>
<el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
<el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.hyperLinks')">
<el-input
v-model="linkInfo.content"
:disabled="!linkInfo.enable"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onSubmit"
>{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<i
slot="reference"
class="icon iconfont icon-font icon-chaolianjie1"
/>
</el-popover>
</template>
<script>
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import { checkAddHttp } from '@/utils/urlUtils'
export default {
props: {
linkInfo: {
type: Object,
required: true
}
},
data() {
return {
componentType: null,
linkageActiveStatus: false,
editFilter: [
'view',
'custom'
]
}
},
computed: {
...mapState([
'curComponent'
])
},
methods: {
onSubmit() {
this.linkInfo.content = checkAddHttp(this.linkInfo.content)
this.curComponent.hyperlinks = deepCopy(this.linkInfo)
this.$store.commit('canvasChange')
this.popoverClose()
},
onClose() {
this.$emit('close')
this.popoverClose()
},
popoverClose() {
this.$refs.popover.showPopper = false
}
}
}
</script>
<style lang="scss" scoped>
.slot-class{
color: white;
}
.bottom {
margin-top: 20px;
text-align: center;
}
.ellip{
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/
background-color: #f7f8fa;
color: #3d4d66;
font-size: 12px;
line-height: 24px;
height: 24px;
border-radius: 3px;
}
.select-filed{
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/
color: #3d4d66;
font-size: 12px;
line-height: 35px;
height: 35px;
border-radius: 3px;
}
::v-deep .el-popover{
height: 200px;
overflow: auto;
}
.icon-font{
color: white;
}
</style>

295
frontend/src/components/canvas/components/editor/PreviewMobile.vue
View File

@ -1,295 +0,0 @@
<template>
<div
class="bg"
:style="customStyle"
>
<canvas-opt-bar />
<div
id="canvasInfoMain"
ref="canvasInfoMain"
style="width: 100%;height: 100%"
>
<div
id="canvasInfoTemp"
ref="canvasInfoTemp"
:style="[{height:mainHeight},screenShotStyle]"
class="main-class"
@mouseup="deselectCurComponent"
@mousedown="handleMouseDown"
>
<el-row
v-if="componentDataShow.length===0"
style="height: 100%;"
class="custom-position"
>
{{ $t('panel.panelNull') }}
</el-row>
<ComponentWrapper
v-for="(item, index) in componentDataInfo"
:key="index"
:canvas-id="canvasId"
:config="item"
:search-count="searchCount"
:canvas-style-data="canvasStyleData"
:in-screen="inScreen"
/>
</div>
</div>
</div>
</template>
<script>
import { getStyle } from '@/components/canvas/utils/style'
import { mapState } from 'vuex'
import ComponentWrapper from './ComponentWrapper'
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
import { uuid } from 'vue-uuid'
import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
import eventBus from '@/components/canvas/utils/eventBus'
import elementResizeDetectorMaker from 'element-resize-detector'
import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
export default {
components: { ComponentWrapper, CanvasOptBar },
model: {
prop: 'show',
event: 'change'
},
props: {
canvasId: {
type: String,
required: true
},
screenShot: {
type: Boolean,
default: false
},
show: {
type: Boolean,
default: false
},
showType: {
type: String,
required: false,
default: 'full'
},
inScreen: {
type: Boolean,
required: false,
default: true
}
},
data() {
return {
isShowPreview: false,
panelId: '',
needToChangeHeight: [
'top',
'height'
],
needToChangeWidth: [
'left',
'width',
'fontSize',
'borderWidth',
'letterSpacing'
],
scaleWidth: '100',
scaleHeight: '100',
timer: null,
componentDataShow: [],
mainWidth: '100%',
mainHeight: '100%',
searchCount: 0
}
},
computed: {
customStyle() {
let style = {
width: '100%'
}
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
style = {
background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
style = {
background: this.canvasStyleData.panel.color,
...style
}
}
}
return style
},
screenShotStyle() {
return this.screenShot ? this.customStyle : {}
},
// 此处单独计算componentData的值 不放入全局mapState中
componentDataInfo() {
return this.componentDataShow
},
...mapState([
'isClickComponent',
'curComponent',
'componentData',
'canvasStyleData',
'componentGap'
])
},
watch: {
componentData: {
handler(newVal, oldVla) {
this.restore()
},
deep: true
},
canvasStyleData: {
handler(newVal, oldVla) {
this.canvasStyleDataInit()
},
deep: true
}
},
mounted() {
const _this = this
const erd = elementResizeDetectorMaker()
// 监听div变动事件
const mainDom = document.getElementById('canvasInfoMain')
erd.listenTo(mainDom, element => {
_this.$nextTick(() => {
_this.restore()
})
})
// 监听div变动事件
const tempCanvas = document.getElementById('canvasInfoTemp')
erd.listenTo(tempCanvas, element => {
_this.$nextTick(() => {
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
_this.mainHeight = tempCanvas.scrollHeight + 'px!important'
})
})
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
_this.$store.commit('clearLinkageSettingInfo', false)
_this.canvasStyleDataInit()
},
beforeDestroy() {
eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
clearInterval(this.timer)
},
methods: {
canvasStyleDataInit() {
// 数据刷新计时器
this.searchCount = 0
this.timer && clearInterval(this.timer)
let refreshTime = 300000
if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
if (this.canvasStyleData.refreshUnit === 'second') {
refreshTime = this.canvasStyleData.refreshTime * 1000
} else {
refreshTime = this.canvasStyleData.refreshTime * 60000
}
}
this.timer = setInterval(() => {
this.searchCount++
}, refreshTime)
},
changeStyleWithScale,
getStyle,
restore() {
const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
this.handleScaleChange()
},
resetID(data) {
if (data) {
data.forEach(item => {
item.type !== 'custom' && (item.id = uuid.v1())
})
}
return data
},
format(value, scale) {
return value * parseInt(scale) / 100
},
handleScaleChange() {
if (this.componentData) {
const componentData = deepCopy(this.componentData)
componentData.forEach(component => {
Object.keys(component.style).forEach(key => {
if (this.needToChangeHeight.includes(key)) {
component.style[key] = this.format(component.style[key], this.scaleHeight)
}
if (this.needToChangeWidth.includes(key)) {
component.style[key] = this.format(component.style[key], this.scaleWidth)
}
})
})
this.componentDataShow = componentData
this.$nextTick(() => (eventBus.$emit('resizing', '')))
}
},
deselectCurComponent(e) {
if (!this.isClickComponent) {
this.$store.commit('setCurComponent', { component: null, index: null })
}
},
handleMouseDown() {
this.$store.commit('setClickComponentStatus', false)
}
}
}
</script>
<style lang="scss" scoped>
.bg {
padding: 5px;
min-width: 600px;
min-height: 300px;
width: 100%;
height: 100%;
overflow-x: hidden;
background-size: 100% 100% !important;
}
.main-class {
width: 100%;
height: 100%;
background-size: 100% 100% !important;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.gap_class {
padding: 5px;
}
.dialog-css ::v-deep .el-dialog__title {
font-size: 14px;
}
.dialog-css ::v-deep .el-dialog__header {
padding: 40px 20px 0;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 10px 20px 20px;
}
::-webkit-scrollbar {
width: 0px !important;
height: 0px !important;
}
</style>

204
frontend/src/components/canvas/components/editor/SettingMenuTest.vue
View File

@ -1,204 +0,0 @@
<template>
<div>
<div style="width: 100%;">
<el-dropdown
trigger="click"
@mouseup="handleMouseUp"
>
<el-button
ref="trackButton"
class="icon iconfont icon-shezhi"
>TEST</el-button>
<el-dropdown-menu>
<el-dropdown-item
icon="el-icon-document-copy"
@click.native="copy"
>{{ $t('panel.copy') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
@click.native="deleteComponent"
>{{ $t('panel.delete') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-upload2"
@click.native="topComponent"
>{{ $t('panel.topComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-download"
@click.native="bottomComponent"
>{{ $t('panel.bottomComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-arrow-up"
@click.native="upComponent"
>{{ $t('panel.upComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-arrow-down"
@click.native="downComponent"
>{{ $t('panel.downComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-link"
@click.native="linkageSetting"
>联动设置</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import bus from '@/utils/bus'
import { getViewLinkageGather } from '@/api/panel/linkage'
export default {
data() {
return {
copyData: null,
editFilter: [
'view',
'custom'
]
}
},
computed: mapState([
'menuTop',
'menuLeft',
'menuShow',
'curComponent',
'componentData',
'canvasStyleData'
]),
methods: {
trackButtonClick() {
this.$refs.trackButton.click()
this.$refs.trackButton.$el.click()
},
edit() {
if (this.curComponent.type === 'view') {
this.$store.dispatch('chart/setViewId', null)
this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
}
if (this.curComponent.type === 'custom') {
bus.$emit('component-dialog-edit')
}
// 编辑样式组件
if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
bus.$emit('component-dialog-style')
}
},
lock() {
this.$store.commit('lock')
},
unlock() {
this.$store.commit('unlock')
},
// 点击菜单时不取消当前组件的选中状态
handleMouseUp() {
this.$store.commit('setClickComponentStatus', true)
},
cut() {
this.deleteCurCondition()
this.$store.commit('cut')
},
copy() {
this.$store.commit('copy')
this.paste()
},
paste() {
this.$store.commit('paste', true)
this.$store.commit('recordSnapshot')
},
deleteComponent() {
this.deleteCurCondition()
this.$store.commit('deleteComponent')
this.$store.commit('recordSnapshot')
this.$store.commit('setCurComponent', { component: null, index: null })
},
deleteCurCondition() {
if (this.curComponent.type === 'custom') {
this.$store.commit('removeViewFilter', this.curComponent.id)
bus.$emit('delete-condition', { componentId: this.curComponent.id })
}
},
upComponent() {
this.$store.commit('upComponent')
this.$store.commit('recordSnapshot')
},
downComponent() {
this.$store.commit('downComponent')
this.$store.commit('recordSnapshot')
},
topComponent() {
this.$store.commit('topComponent')
this.$store.commit('recordSnapshot')
},
bottomComponent() {
this.$store.commit('bottomComponent')
this.$store.commit('recordSnapshot')
},
linkageSetting() {
// sourceViewId 也加入查询
const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
.map(item => item.propValue.viewId)
// 获取当前仪表板当前视图联动信息
const requestInfo = {
'panelId': this.$store.state.panel.panelInfo.id,
'sourceViewId': this.curComponent.propValue.viewId,
'targetViewIds': targetViewIds
}
getViewLinkageGather(requestInfo).then(rsp => {
this.$store.commit('setLinkageInfo', rsp.data)
})
}
}
}
</script>
<style lang="scss" scoped>
.contextmenu {
position: absolute;
z-index: 1000;
ul {
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-sizing: border-box;
margin: 5px 0;
padding: 6px 0;
li {
font-size: 14px;
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 34px;
line-height: 34px;
box-sizing: border-box;
cursor: pointer;
&:hover {
background-color: var(--background-color-base, #f5f7fa);
}
}
}
}
</style>

1896
frontend/src/components/canvas/components/editor/index.vue
View File

File diff suppressed because it is too large Load Diff

69
frontend/src/components/canvas/customComponent/LinkJumpSetDialog.vue
View File

@ -1,69 +0,0 @@
<template>
<de-container style="height: 500px">
<de-aside-container>
this is test
</de-aside-container>
<de-main-container>
this is test2
</de-main-container>
</de-container>
</template>
<script>
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
import { mapState } from 'vuex'
export default {
name: 'UserView',
components: { DeMainContainer, DeContainer, DeAsideContainer },
props: {
chart: {
type: Object,
default: null
},
chartTable: {
type: Object,
default: null
}
},
data() {
return {
refId: null
}
},
computed: {
...mapState([
'isClickComponent',
'curComponent',
'componentData',
'canvasStyleData'
])
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.ms-aside-container {
height: 50vh;
min-width: 400px;
max-width: 400px;
padding: 0 0;
}
.ms-main-container {
height: 50vh;
border: 1px solid #E6E6E6;
border-left: 0 solid;
}
.chart-class{
height: 100%;
}
.table-class{
height: 100%;
}
</style>

158
frontend/src/components/canvas/index.vue
View File

@ -1,158 +0,0 @@
<template>
<div class="home">
<Toolbar />
<main>
<section class="center">
<div
class="content"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
>
<Editor />
</div>
</section>
</main>
</div>
</template>
<script>
import Editor from '@/components/editor/index'
import componentList from '@/components/canvas/customComponent/component-list' // 左侧列表数据
import Toolbar from '@/components/Toolbar'
import { deepCopy } from '@/utils/utils'
import { mapState } from 'vuex'
import generateID from '@/utils/generateID'
import { uuid } from 'vue-uuid'
export default {
components: { Editor, Toolbar },
data() {
return {
activeName: 'attr',
reSelectAnimateIndex: undefined
}
},
computed: mapState([
'componentData',
'curComponent',
'isClickComponent',
'canvasStyleData'
]),
created() {
this.restore()
},
methods: {
restore() {
// 用保存的数据恢复画布
if (localStorage.getItem('canvasData')) {
this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
}
if (localStorage.getItem('canvasStyle')) {
this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
}
},
resetID(data) {
if (data) {
data.forEach(item => {
item.type !== 'custom' && (item.id = uuid.v1())
})
}
return data
},
handleDrop(e) {
e.preventDefault()
e.stopPropagation()
let component
const id = e.dataTransfer.getData('componentId')
componentList.forEach(componentTemp => {
if (id === componentTemp.id) {
component = deepCopy(componentTemp)
}
})
// const component = deepCopy(componentList[e.dataTransfer.getData('index')])
component.style.top = e.offsetY
component.style.left = e.offsetX
component.id = generateID()
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'handleDrop')
},
handleDragOver(e) {
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleMouseDown() {
this.$store.commit('setClickComponentStatus', false)
},
deselectCurComponent(e) {
if (!this.isClickComponent) {
this.$store.commit('setCurComponent', { component: null, index: null })
}
// 0 左击 1 滚轮 2 右击
if (e.button !== 2) {
this.$store.commit('hideContextMenu')
}
}
}
}
</script>
<style lang="scss">
.home {
height: 100vh;
background: #fff;
main {
height: calc(100% - 64px);
position: relative;
.left {
position: absolute;
height: 100%;
width: 200px;
left: 0;
top: 0;
padding-top: 10px;
}
.right {
position: absolute;
height: 100%;
width: 262px;
right: 0;
top: 0;
}
.center {
margin-left: 200px;
margin-right: 262px;
background: #f5f5f5;
height: 100%;
overflow: auto;
padding: 20px;
.content {
width: 100%;
height: 100%;
overflow: auto;
}
}
}
.placeholder {
text-align: center;
color: #333;
}
}
</style>

52
frontend/src/components/canvas/styles/reset.css
View File

@ -1,52 +0,0 @@
body,
button,
input,
p,
li,
ol,
ul,
div,
section,
article,
td,
th,
span,
textarea,
form,
footer,
header,
nav,
main,
address,
aside,
pre,
canvas {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
li {
list-style: none;
}
#app {
/*overflow: hidden;*/
}
.el-tabs {
height: 100%;
}
.el-tabs__content {
height: calc(100% - 55px);
overflow: auto;
}
.el-tabs__nav-scroll {
padding-left: 20px;
}

94
frontend/src/components/canvas/utils/animationClassData.js
View File

@ -1,94 +0,0 @@
export default [
{
label: '进入',
children: [
{ label: '渐显', value: 'fadeIn' },
{ label: '向右进入', value: 'fadeInLeft' },
{ label: '向左进入', value: 'fadeInRight' },
{ label: '向上进入', value: 'fadeInUp' },
{ label: '向下进入', value: 'fadeInDown' },
{ label: '向右长距进入', value: 'fadeInLeftBig' },
{ label: '向左长距进入', value: 'fadeInRightBig' },
{ label: '向上长距进入', value: 'fadeInUpBig' },
{ label: '向下长距进入', value: 'fadeInDownBig' },
{ label: '旋转进入', value: 'rotateIn' },
{ label: '左顺时针旋转', value: 'rotateInDownLeft' },
{ label: '右逆时针旋转', value: 'rotateInDownRight' },
{ label: '左逆时针旋转', value: 'rotateInUpLeft' },
{ label: '右逆时针旋转', value: 'rotateInUpRight' },
{ label: '弹入', value: 'bounceIn' },
{ label: '向右弹入', value: 'bounceInLeft' },
{ label: '向左弹入', value: 'bounceInRight' },
{ label: '向上弹入', value: 'bounceInUp' },
{ label: '向下弹入', value: 'bounceInDown' },
{ label: '光速从右进入', value: 'lightSpeedInRight' },
{ label: '光速从左进入', value: 'lightSpeedInLeft' },
{ label: '光速从右退出', value: 'lightSpeedOutRight' },
{ label: '光速从左退出', value: 'lightSpeedOutLeft' },
{ label: 'Y轴旋转', value: 'flip' },
{ label: '中心X轴旋转', value: 'flipInX' },
{ label: '中心Y轴旋转', value: 'flipInY' },
{ label: '左长半径旋转', value: 'rollIn' },
{ label: '由小变大进入', value: 'zoomIn' },
{ label: '左变大进入', value: 'zoomInLeft' },
{ label: '右变大进入', value: 'zoomInRight' },
{ label: '向上变大进入', value: 'zoomInUp' },
{ label: '向下变大进入', value: 'zoomInDown' },
{ label: '向右滑动展开', value: 'slideInLeft' },
{ label: '向左滑动展开', value: 'slideInRight' },
{ label: '向上滑动展开', value: 'slideInUp' },
{ label: '向下滑动展开', value: 'slideInDown' }
]
},
{
label: '强调',
children: [
{ label: '弹跳', value: 'bounce' },
{ label: '闪烁', value: 'flash' },
{ label: '放大缩小', value: 'pulse' },
{ label: '放大缩小弹簧', value: 'rubberBand' },
{ label: '左右晃动', value: 'headShake' },
{ label: '左右扇形摇摆', value: 'swing' },
{ label: '放大晃动缩小', value: 'tada' },
{ label: '扇形摇摆', value: 'wobble' },
{ label: '左右上下晃动', value: 'jello' },
{ label: 'Y轴旋转', value: 'flip' }
]
},
{
label: '退出',
children: [
{ label: '渐隐', value: 'fadeOut' },
{ label: '向左退出', value: 'fadeOutLeft' },
{ label: '向右退出', value: 'fadeOutRight' },
{ label: '向上退出', value: 'fadeOutUp' },
{ label: '向下退出', value: 'fadeOutDown' },
{ label: '向左长距退出', value: 'fadeOutLeftBig' },
{ label: '向右长距退出', value: 'fadeOutRightBig' },
{ label: '向上长距退出', value: 'fadeOutUpBig' },
{ label: '向下长距退出', value: 'fadeOutDownBig' },
{ label: '旋转退出', value: 'rotateOut' },
{ label: '左顺时针旋转', value: 'rotateOutDownLeft' },
{ label: '右逆时针旋转', value: 'rotateOutDownRight' },
{ label: '左逆时针旋转', value: 'rotateOutUpLeft' },
{ label: '右逆时针旋转', value: 'rotateOutUpRight' },
{ label: '弹出', value: 'bounceOut' },
{ label: '向左弹出', value: 'bounceOutLeft' },
{ label: '向右弹出', value: 'bounceOutRight' },
{ label: '向上弹出', value: 'bounceOutUp' },
{ label: '向下弹出', value: 'bounceOutDown' },
{ label: '中心X轴旋转', value: 'flipOutX' },
{ label: '中心Y轴旋转', value: 'flipOutY' },
{ label: '左长半径旋转', value: 'rollOut' },
{ label: '由小变大退出', value: 'zoomOut' },
{ label: '左变大退出', value: 'zoomOutLeft' },
{ label: '右变大退出', value: 'zoomOutRight' },
{ label: '向上变大退出', value: 'zoomOutUp' },
{ label: '向下变大退出', value: 'zoomOutDown' },
{ label: '向左滑动收起', value: 'slideOutLeft' },
{ label: '向右滑动收起', value: 'slideOutRight' },
{ label: '向上滑动收起', value: 'slideOutUp' },
{ label: '向下滑动收起', value: 'slideOutDown' }
]
}
]

30
frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue
View File

@ -1,30 +0,0 @@
<template>
<div
v-bottom-to-top-drag
class="drag-bar"
/>
</template>
<script>
export default {
name: 'DeBottom2TopDragBar'
}
</script>
<style scoped>
.drag-bar {
height: 1px;
width: 100%;
z-index: 1000;
cursor: row-resize;
position: fixed;
background-color: #E6E6E6;
border: 0px;
}
.drag-bar:hover {
height: 3px;
}
</style>

31
frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue
View File

@ -1,31 +0,0 @@
<template>
<div
v-right-to-left-drag
class="drag-bar"
/>
</template>
<script>
export default {
name: 'DeRight2LeftDragBar'
}
</script>
<style scoped>
.drag-bar {
height: 100%;
width: 1px;
position: absolute;
left: 0px;
top: 0;
cursor: col-resize;
background-color: #E6E6E6;
border: 0px;
}
.drag-bar:hover {
width: 3px;
}
</style>

32
frontend/src/components/deViewSelect/dom.js
View File

@ -1,32 +0,0 @@
export const on = (function() {
if (document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler)
}
}
}
})()
export const off = (function() {
if (document.removeEventListener) {
return function(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false)
}
}
} else {
return function(element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler)
}
}
}
})()

19
frontend/src/components/doc/index.vue
View File

@ -1,19 +0,0 @@
<template>
<div>
<svg-icon
icon-class="doc"
@click="click"
/>
</div>
</template>
<script>
export default {
name: 'Doc',
methods: {
click() {
window.open(process.env.VUE_APP_BASE_API + 'doc.html', '_blank')
}
}
}
</script>

44
frontend/src/components/gridButton/index.vue
View File

@ -1,44 +0,0 @@
<template>
<el-tooltip :content="tooltip">
<el-button
circle
class="fu-search-bar-button"
:type="type"
:size="size"
@click="click"
>
<slot>
<i :class="icon" />
</slot>
</el-button>
</el-tooltip>
</template>
<script>
export default {
name: 'GridButton',
props: {
size: {
type: String,
default: 'mini'
},
icon: {
type: String,
default: null
},
type: {
type: String,
default: null
},
tooltip: {
type: String,
default: null
}
},
methods: {
click(e) {
this.$emit('click', e)
}
}
}
</script>

47
frontend/src/components/hamburger/index.vue
View File

@ -1,47 +0,0 @@
<template>
<div
style="padding: 0 15px;"
@click="toggleClick"
>
<svg
:class="{'is-active':isActive}"
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div>
</template>
<script>
export default {
name: 'Hamburger',
props: {
isActive: {
type: Boolean,
default: false
}
},
methods: {
toggleClick() {
this.$emit('toggleClick')
}
}
}
</script>
<style scoped>
.hamburger {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
.hamburger.is-active {
transform: rotate(180deg);
}
</style>

104
frontend/src/components/pagination/index.vue
View File

@ -1,104 +0,0 @@
<template>
<div
:class="{'hidden':hidden}"
class="pagination-container"
>
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { scrollTo } from '@/utils/scroll-to'
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 0
},
limit: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, limit: val })
if (this.autoScroll) {
scrollTo(0, 800)
}
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
if (this.autoScroll) {
scrollTo(0, 800)
}
}
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>

63
frontend/src/components/screenfull/index.vue
View File

@ -1,63 +0,0 @@
<template>
<div>
<svg-icon
:icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
@click="click"
/>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'Screenfull',
data() {
return {
isFullscreen: false
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.destroy()
},
methods: {
click() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
},
change() {
this.isFullscreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
}
}
}
</script>
<style scoped>
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
}
</style>

67
frontend/src/components/sizeSelect/index.vue
View File

@ -1,67 +0,0 @@
<template>
<el-dropdown
trigger="click"
@command="handleSetSize"
>
<div>
<svg-icon
class-name="size-icon"
icon-class="size"
/>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item of sizeOptions"
:key="item.value"
:disabled="size===item.value"
:command="item.value"
>
{{
item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data() {
return {
sizeOptions: [
{ label: 'Default', value: 'default' },
{ label: 'Medium', value: 'medium' },
{ label: 'Small', value: 'small' },
{ label: 'Mini', value: 'mini' }
]
}
},
computed: {
size() {
return this.$store.getters.size
}
},
methods: {
handleSetSize(size) {
this.$ELEMENT.size = size
this.$store.dispatch('app/setSize', size)
this.refreshView()
this.$message({
message: '布局设置成功',
type: 'success'
})
},
refreshView() {
// In order to make the cached page re-rendered
// this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
const { fullPath } = this.$route
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
}
}
}
</script>

169
frontend/src/components/themePicker/index.vue
View File

@ -1,169 +0,0 @@
<template>
<el-color-picker
v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d']"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</template>
<script>
import { getThemeCluster } from '@/utils/style'
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data() {
return {
chalk: '', // content of theme-chalk css
theme: ''
}
},
computed: {
defaultTheme() {
return this.$store.state.settings.theme
}
},
watch: {
defaultTheme: {
handler: function(val, oldVal) {
this.theme = val
},
immediate: true
},
async theme(val) {
this.switch(val)
}
},
methods: {
async switch(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = getThemeCluster(val.replace('#', ''))
const originalCluster = getThemeCluster(oldVal.replace('#', ''))
const getHandler = (variable, id) => {
return () => {
const originalCluster = getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk')
}
const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$emit('change', val)
},
updateStyle(style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
getCSSString(url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve()
}
}
xhr.open('GET', url)
xhr.send()
})
}
/*
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
*/
}
}
</script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 99999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>

16
frontend/src/directive/DataPermission/index.js
View File

@ -1,16 +0,0 @@
function checkDataPermission(el, binding, vnode) {
// eslint-disable-next-line no-unused-vars
const dataPermission = vnode.privileges
// eslint-disable-next-line no-unused-vars
const { value } = binding
el.parentNode && el.parentNode.removeChild(el)
}
export default {
inserted(el, binding, vnode) {
checkDataPermission(el, binding, vnode)
},
update(el, binding, vnode) {
checkDataPermission(el, binding, vnode)
}
}

175
frontend/src/lang/es.js
View File

@ -1,175 +0,0 @@
export default {
route: {
dashboard: 'Panel de control',
documentation: 'Documentación',
guide: 'Guía',
permission: 'Permisos',
rolePermission: 'Permisos de rol',
pagePermission: 'Permisos de la página',
directivePermission: 'Permisos de la directiva',
icons: 'Iconos',
components: 'Components',
tinymce: 'Tinymce',
markdown: 'Markdown',
jsonEditor: 'Editor JSON',
dndList: 'Lista Dnd',
splitPane: 'Panel dividido',
avatarUpload: 'Subir avatar',
dropzone: 'Subir ficheros',
sticky: 'Sticky',
countTo: 'CountTo',
componentMixin: 'Mixin',
backToTop: 'Ir arriba',
dragDialog: 'Drag Dialog',
dragSelect: 'Drag Select',
dragKanban: 'Drag Kanban',
charts: 'Gráficos',
keyboardChart: 'Keyboard Chart',
lineChart: 'Gráfico de líneas',
mixChart: 'Mix Chart',
example: 'Ejemplo',
nested: 'Rutas anidadass',
menu1: 'Menu 1',
'menu1-1': 'Menu 1-1',
'menu1-2': 'Menu 1-2',
'menu1-2-1': 'Menu 1-2-1',
'menu1-2-2': 'Menu 1-2-2',
'menu1-3': 'Menu 1-3',
menu2: 'Menu 2',
Table: 'Tabla',
dynamicTable: 'Tabla dinámica',
dragTable: 'Arrastrar tabla',
inlineEditTable: 'Editor',
complexTable: 'Complex Table',
tab: 'Pestaña',
form: 'Formulario',
createArticle: 'Crear artículo',
editArticle: 'Editar artículo',
articleList: 'Listado de artículos',
errorPages: 'Páginas de error',
page401: '401',
page404: '404',
errorLog: 'Registro de errores',
excel: 'Excel',
exportExcel: 'Exportar a Excel',
selectExcel: 'Export seleccionado',
mergeHeader: 'Merge Header',
uploadExcel: 'Subir Excel',
zip: 'Zip',
pdf: 'PDF',
exportZip: 'Exportar a Zip',
theme: 'Tema',
clipboardDemo: 'Clipboard',
i18n: 'I18n',
externalLink: 'Enlace externo',
profile: 'Profile'
},
navbar: {
logOut: 'Salir',
dashboard: 'Panel de control',
github: 'Github',
theme: 'Tema',
size: 'Tamaño global',
profile: 'Profile'
},
login: {
title: 'Formulario de acceso',
logIn: 'Acceso',
username: 'Usuario',
password: 'Contraseña',
any: 'nada',
thirdparty: 'Conectar con',
thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !'
},
documentation: {
documentation: 'Documentación',
github: 'Repositorio Github'
},
permission: {
addRole: 'Nuevo rol',
editPermission: 'Permiso de edición',
roles: 'Tus permisos',
switchRoles: 'Cambiar permisos',
tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
delete: 'Borrar',
confirm: 'Confirmar',
cancel: 'Cancelar'
},
guide: {
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
button: 'Ver guía'
},
components: {
documentation: 'Documentación',
tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
},
table: {
dynamicTips1: 'Fixed header, sorted by header order',
dynamicTips2: 'Not fixed header, sorted by click order',
dragTips1: 'Orden por defecto',
dragTips2: 'The after dragging order',
title: 'Título',
importance: 'Importancia',
type: 'Tipo',
remark: 'Remark',
search: 'Buscar',
add: 'Añadir',
export: 'Exportar',
reviewer: 'reviewer',
id: 'ID',
date: 'Fecha',
author: 'Author',
readings: 'Lector',
status: 'Estado',
actions: 'Acciones',
edit: 'Editar',
publish: 'Publicar',
draft: 'Draft',
delete: 'Eliminar',
cancel: 'Cancelar',
confirm: 'Confirmar'
},
example: {
warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
},
errorLog: {
tips: 'Please click the bug icon in the upper right corner',
description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
documentation: 'Documento de introducción'
},
excel: {
export: 'Exportar',
selectedExport: 'Exportar seleccionados',
placeholder: 'Por favor escribe un nombre de fichero'
},
zip: {
export: 'Exportar',
placeholder: 'Por favor escribe un nombre de fichero'
},
pdf: {
tips: 'Here we use window.print() to implement the feature of downloading pdf.'
},
theme: {
change: 'Cambiar tema',
documentation: 'Documentación del tema',
tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
},
tagsView: {
refresh: 'Actualizar',
close: 'Cerrar',
closeOthers: 'Cerrar otros',
closeAll: 'Cerrar todos'
},
settings: {
title: 'Page style setting',
theme: 'Theme Color',
tagsView: 'Open Tags-View',
fixedHeader: 'Fixed Header',
sidebarLogo: 'Sidebar Logo'
}
}

175
frontend/src/lang/ja.js
View File

@ -1,175 +0,0 @@
export default {
route: {
dashboard: 'トップ',
documentation: 'ドキュメント',
guide: 'ガイド',
permission: '権限',
rolePermission: '権限ロール',
pagePermission: 'ページ権限',
directivePermission: 'ディレクティブ権限',
icons: 'アイコン',
components: 'コンポーネント',
tinymce: 'TinyMCE',
markdown: 'Markdown',
jsonEditor: 'JSON Editor',
dndList: 'Drag-And-Drop',
splitPane: 'パネル',
avatarUpload: 'アバターアップロード',
dropzone: 'Dropzone',
sticky: 'Sticky',
countTo: 'Count To',
componentMixin: 'コンポーネントMixin',
backToTop: 'BackToTop',
dragDialog: 'Drag Dialog',
dragSelect: 'Drag Select',
dragKanban: 'Drag 看板',
charts: 'チャート',
keyboardChart: 'Keyboardチャート',
lineChart: 'Lineチャート',
mixChart: 'Mixチャート',
example: 'Example',
nested: 'Nested Routes',
menu1: 'メニュー１',
'menu1-1': 'メニュー 1-1',
'menu1-2': 'メニュー 1-2',
'menu1-2-1': 'メニュー 1-2-1',
'menu1-2-2': 'メニュー 1-2-2',
'menu1-3': 'メニュー 1-3',
menu2: 'メニュー 2',
Table: 'Table',
dynamicTable: '可変 Table',
dragTable: 'Drag Table',
inlineEditTable: 'Inline Edit Table',
complexTable: 'Complex Table',
tab: 'Tab',
form: 'フォーム',
createArticle: '投稿作成',
editArticle: '投稿編集',
articleList: '投稿リスト',
errorPages: 'エラーページ',
page401: '401',
page404: '404',
errorLog: 'エラーログ',
excel: 'Excel',
exportExcel: '一括エクスポート',
selectExcel: '複数選択エクスポート',
mergeHeader: 'ヘッダーマージ',
uploadExcel: 'アップロード',
zip: 'Zip',
pdf: 'PDF',
exportZip: 'Export Zip',
theme: 'テーマ変更',
clipboardDemo: 'Clipboard',
i18n: '多言語',
externalLink: '外部リンク',
profile: 'プロフィール'
},
navbar: {
dashboard: 'トップ',
github: 'GitHub',
logOut: 'ログアウト',
profile: 'プロフィール',
theme: 'テーマ変更',
size: '画面サイズ'
},
login: {
title: 'ユーザログイン',
logIn: 'ログイン',
username: 'ユーザ名',
password: 'パスワード',
any: 'password',
thirdparty: '外部IDでログイン',
thirdpartyTips: 'ローカル環境ではログインできません。実装が必要です。'
},
documentation: {
documentation: 'ドキュメント',
github: 'Github Link'
},
permission: {
addRole: 'ロール追加',
editPermission: 'ロール変更',
roles: 'ロール',
switchRoles: 'ロール切替',
tips: 'v-permissionは使えない時があります。例えば: Element-UI の el-tab、 el-table-column 及び他の dom。v-ifを使う必要があります。',
delete: '削除',
confirm: '確認',
cancel: 'キャンセル'
},
guide: {
description: 'ガイドは各機能の説明です。',
button: 'ガイドを見る'
},
components: {
documentation: 'ドキュメント',
tinymceTips: 'tinymceは管理画面に重要な機能ですが、その同時に落とし穴がありあす。tinymceを使う道のりが大変でした。Tinymceを使う時に各自のプロジェクト状況で判断が必要です。ドキュメントはこちら',
dropzoneTips: 'Third partyのパッケージを使わず、独自の実装しています。詳細は @/components/Dropzone',
stickyTips: 'ページの指定位置へスクロールした場合、表示されます。',
backToTopTips1: 'トップへスクロールが表示されます。',
backToTopTips2: 'ボタンのスタイルはカスタマイズできます。例えば、show/hide、height、position。 またはElementのel-tooltipを使って、ツールチップを実装できます。',
imageUploadTips: 'mockjsは使えないため、カスタマイズしています。公式の最新バージョンを使ってください。'
},
table: {
dynamicTips1: '先頭は固定、最後に追加',
dynamicTips2: '戦後に追加せず、指定列に追加',
dragTips1: 'デフォルト順番',
dragTips2: 'Drag後の順番',
title: 'タイトル',
importance: '重要',
type: 'タイプ',
remark: '評価',
search: '検索',
add: '追加',
export: 'エクスポート',
reviewer: 'レビュアー',
id: '番号',
date: '日時',
author: '作成者',
readings: '閲覧数',
status: 'ステータス',
actions: '操作',
edit: '編集',
publish: '公開',
draft: '下書き',
delete: 'キャンセル',
cancel: 'キャンセル',
confirm: '確認'
},
example: {
warning: '新規作成と編集画面は keep-alive を使えないです。keep-alive の include はrouteのキャッシュは使えないです。そのため、component name を使ってキャッシュさせるようにします。このようなキャッシュ機能を作りたい場合，localStorageを使う手があります。もしくは keep-alive の includeを使って、全ページキャッシュする方法はあります。'
},
errorLog: {
tips: '右上のbugアイコンをクリックしてください。',
description: '管理画面はspaを使う場合が多い、ユーザ体現向上はできますが、想定外エラーが発生する場合があります。Vueはそのエラーハンドリング機能を提供し、エラーレポートができます。',
documentation: 'ドキュメント'
},
excel: {
export: 'エクスポート',
selectedExport: 'エクスポート対象を選択してください。',
placeholder: 'ファイル名を入力してください。'
},
zip: {
export: 'エクスポート',
placeholder: 'ファイル名を入力してください。'
},
pdf: {
tips: 'window.print() を使ってPDFダウンロードしています。'
},
theme: {
change: 'テーマ切替',
documentation: 'ドキュメント',
tips: 'Tips: テーマの切り替え方法はnavbarのtheme-pickと異なります、使い方はドキュメントを確認してください。'
},
tagsView: {
refresh: '更新',
close: '閉じる',
closeOthers: 'その他閉じる',
closeAll: 'すべて閉じる'
},
settings: {
title: 'システムテーマ',
theme: 'テーマ色',
tagsView: 'Tags-View 開く',
fixedHeader: 'Fixed Header',
sidebarLogo: 'Sidebar Logo'
}
}

210
frontend/src/plugins/Blob.js
View File

@ -1,210 +0,0 @@
/* eslint-disable */
/* Blob.js*/
/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
(function (view) {
"use strict";
view.URL = view.URL || view.webkitURL;
if (view.Blob && view.URL) {
try {
new Blob;
return;
} catch (e) {
}
}
// Internally we use a BlobBuilder implementation to base Blob off of
// in order to support older browsers that only have BlobBuilder
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
var
get_class = function (object) {
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}
, FakeBlobBuilder = function BlobBuilder() {
this.data = [];
}
, FakeBlob = function Blob(data, type, encoding) {
this.data = data;
this.size = data.length;
this.type = type;
this.encoding = encoding;
}
, FBB_proto = FakeBlobBuilder.prototype
, FB_proto = FakeBlob.prototype
, FileReaderSync = view.FileReaderSync
, FileException = function (type) {
this.code = this[this.name = type];
}
, file_ex_codes = (
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
).split(" ")
, file_ex_code = file_ex_codes.length
, real_URL = view.URL || view.webkitURL || view
, real_create_object_URL = real_URL.createObjectURL
, real_revoke_object_URL = real_URL.revokeObjectURL
, URL = real_URL
, btoa = view.btoa
, atob = view.atob
, ArrayBuffer = view.ArrayBuffer
, Uint8Array = view.Uint8Array
, origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
;
FakeBlob.fake = FB_proto.fake = true;
while (file_ex_code--) {
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
}
// Polyfill URL
if (!real_URL.createObjectURL) {
URL = view.URL = function (uri) {
var
uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
, uri_origin
;
uri_info.href = uri;
if (!("origin" in uri_info)) {
if (uri_info.protocol.toLowerCase() === "data:") {
uri_info.origin = null;
} else {
uri_origin = uri.match(origin);
uri_info.origin = uri_origin && uri_origin[1];
}
}
return uri_info;
};
}
URL.createObjectURL = function (blob) {
var
type = blob.type
, data_URI_header
;
if (type === null) {
type = "application/octet-stream";
}
if (blob instanceof FakeBlob) {
data_URI_header = "data:" + type;
if (blob.encoding === "base64") {
return data_URI_header + ";base64," + blob.data;
} else if (blob.encoding === "URI") {
return data_URI_header + "," + decodeURIComponent(blob.data);
}
if (btoa) {
return data_URI_header + ";base64," + btoa(blob.data);
} else {
return data_URI_header + "," + encodeURIComponent(blob.data);
}
} else if (real_create_object_URL) {
return real_create_object_URL.call(real_URL, blob);
}
};
URL.revokeObjectURL = function (object_URL) {
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
real_revoke_object_URL.call(real_URL, object_URL);
}
};
FBB_proto.append = function (data/*, endings*/) {
var bb = this.data;
// decode data to a binary string
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
var
str = ""
, buf = new Uint8Array(data)
, i = 0
, buf_len = buf.length
;
for (; i < buf_len; i++) {
str += String.fromCharCode(buf[i]);
}
bb.push(str);
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
if (FileReaderSync) {
var fr = new FileReaderSync;
bb.push(fr.readAsBinaryString(data));
} else {
// async FileReader won't work as BlobBuilder is sync
throw new FileException("NOT_READABLE_ERR");
}
} else if (data instanceof FakeBlob) {
if (data.encoding === "base64" && atob) {
bb.push(atob(data.data));
} else if (data.encoding === "URI") {
bb.push(decodeURIComponent(data.data));
} else if (data.encoding === "raw") {
bb.push(data.data);
}
} else {
if (typeof data !== "string") {
data += ""; // convert unsupported types to strings
}
// decode UTF-16 to binary string
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob = function (type) {
if (!arguments.length) {
type = null;
}
return new FakeBlob(this.data.join(""), type, "raw");
};
FBB_proto.toString = function () {
return "[object BlobBuilder]";
};
FB_proto.slice = function (start, end, type) {
var args = arguments.length;
if (args < 3) {
type = null;
}
return new FakeBlob(
this.data.slice(start, args > 1 ? end : this.data.length)
, type
, this.encoding
);
};
FB_proto.toString = function () {
return "[object Blob]";
};
FB_proto.close = function () {
this.size = 0;
delete this.data;
};
return FakeBlobBuilder;
}(view));
view.Blob = function (blobParts, options) {
var type = options ? (options.type || "") : "";
var builder = new BlobBuilder();
if (blobParts) {
for (var i = 0, len = blobParts.length; i < len; i++) {
if (Uint8Array && blobParts[i] instanceof Uint8Array) {
builder.append(blobParts[i].buffer);
}
else {
builder.append(blobParts[i]);
}
}
}
var blob = builder.getBlob(type);
if (!blob.slice && blob.webkitSlice) {
blob.slice = blob.webkitSlice;
}
return blob;
};
var getPrototypeOf = Object.getPrototypeOf || function (object) {
return object.__proto__;
};
view.Blob.prototype = getPrototypeOf(new view.Blob());
}(
typeof self !== "undefined" && self
|| typeof window !== "undefined" && window
|| this
));

137
frontend/src/plugins/Export2Excel.js
View File

@ -1,137 +0,0 @@
require('script-loader!file-saver')
/* 这里的路径换成自己的 */
require('@/plugins/Blob.js')
require('script-loader!xlsx/dist/xlsx.core.min')
function generateArray(table) {
var out = []
var rows = table.querySelectorAll('tr')
var ranges = []
for (var R = 0; R < rows.length; ++R) {
var outRow = []
var row = rows[R]
var columns = row.querySelectorAll('td')
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C]
var colspan = cell.getAttribute('colspan')
var rowspan = cell.getAttribute('rowspan')
var cellValue = cell.innerText
if (cellValue !== '' && cellValue === +cellValue) cellValue = +cellValue
// Skip ranges
ranges.forEach(function(range) {
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null)
}
})
// Handle Row Span
if (rowspan || colspan) {
rowspan = rowspan || 1
colspan = colspan || 1
ranges.push({ s: { r: R, c: outRow.length }, e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 }})
}
// Handle Value
outRow.push(cellValue !== '' ? cellValue : null)
// Handle Colspan
if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null)
}
out.push(outRow)
}
return [out, ranges]
}
function datenum(v, date1904) {
if (date1904) v += 1462
var epoch = Date.parse(v)
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}
function sheet_from_array_of_arrays(data, opts) {
var ws = {}
var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 }}
for (var R = 0; R !== data.length; ++R) {
for (var C = 0; C !== data[R].length; ++C) {
if (range.s.r > R) range.s.r = R
if (range.s.c > C) range.s.c = C
if (range.e.r < R) range.e.r = R
if (range.e.c < C) range.e.c = C
var cell = { v: data[R][C] }
if (cell.v === null) continue
// eslint-disable-next-line
var cell_ref = XLSX.utils.encode_cell({ c: C, r: R })
if (typeof cell.v === 'number') cell.t = 'n'
else if (typeof cell.v === 'boolean') cell.t = 'b'
else if (cell.v instanceof Date) {
cell.t = 'n'
// eslint-disable-next-line
cell.z = XLSX.SSF._table[14]
cell.v = datenum(cell.v)
} else cell.t = 's'
ws[cell_ref] = cell
}
}
// eslint-disable-next-line
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
return ws
}
function Workbook() {
if (!(this instanceof Workbook)) return new Workbook()
this.SheetNames = []
this.Sheets = {}
}
function s2ab(s) {
var buf = new ArrayBuffer(s.length)
var view = new Uint8Array(buf)
for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
return buf
}
export function export_table_to_excel(id) {
var theTable = document.getElementById(id)
var oo = generateArray(theTable)
var ranges = oo[1]
/* original data */
var data = oo[0]
var ws_name = 'SheetJS'
var wb = new Workbook(); var ws = sheet_from_array_of_arrays(data)
/* add ranges to worksheet */
// ws['!cols'] = ['apple', 'banan'];
ws['!merges'] = ranges
/* add worksheet to workbook */
wb.SheetNames.push(ws_name)
wb.Sheets[ws_name] = ws
// eslint-disable-next-line
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
// eslint-disable-next-line
saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'test.xlsx')
}
export function export_json_to_excel(th, jsonData, defaultTitle) {
/* original data */
var data = jsonData
data.unshift(th)
var ws_name = 'SheetJS'
var wb = new Workbook(); var ws = sheet_from_array_of_arrays(data)
/* add worksheet to workbook */
wb.SheetNames.push(ws_name)
wb.Sheets[ws_name] = ws
// eslint-disable-next-line
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
var title = defaultTitle || '列表'
// eslint-disable-next-line
saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), title + '.xlsx')
}

539
frontend/src/styles/deicon/demo.css
View File

@ -1,539 +0,0 @@
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

2925
frontend/src/styles/deicon/demo_index.html
View File

File diff suppressed because it is too large Load Diff

123
frontend/src/styles/vdrr/common.scss
View File

@ -1,123 +0,0 @@
* {
padding: 0;
margin: 0;
}
// 滚动条
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
border-radius: 10px;
background: #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
background: #141414;
}
// 文字对齐
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
// 首页
#app {
display: flex;
flex-direction: row;
}
#menu {
width: 275px;
min-width: 200px;
max-width: 500px;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
.el-menu {
border: none;
.el-submenu__title {
height: 40px;
line-height: 40px;
}
.el-menu-item {
height: 28px;
line-height: 28px;
}
}
}
#view {
flex: 1;
min-width: 500px;
padding: 10px 35px 0 35px;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
position: relative;
}
.drag-bar {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 5px;
z-index: 99;
border-left: 1px solid #ccc;
cursor: ew-resize
}
.view-box {
width: 100%;
}
#toolbar {
left: 0;
top: 0;
height: 24px;
padding: 5px;
border: 1px solid #999;
border-bottom: none;
background-color: #CCC;
z-index: 999;
}
.container {
width: 100%;
height: 600px;
border: 1px solid #000;
position: relative;
box-sizing: border-box
}
.vdr {
border: 1px dashed;
}
.vdrr {
border: 1px dashed;
}

147
frontend/src/styles/vdrr/customize.scss
View File

@ -1,147 +0,0 @@
.pattern-contaienr {
border: 1px solid #ccc;
width: 576px;
height: 324px;
}
.iconPistion {
border-width: 2px;
border-style: solid;
border-color: #409eff;
background-color: rgba(128, 128, 128, 0.5);
box-sizing: border-box;
.icon-slot {
font-size: 12px;
}
}
.patternContent {
display: flex;
.patternLeft {
margin: 10px;
}
.patternRight {
width: 400px;
margin: 10px;
}
}
.icon-slot {
width: 100%;
height: 100%;
.status {
text-align: left;
color: #000;
}
.order {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.activePattern {
border-style: solid;
border-color: #08de05;
}
.drag-handle,
.drag-cancel {
padding: 6px;
margin: 6px;
background-color: #CCC;
border: 2px solid;
}
.drag-handle:hover {
cursor: move;
}
.drag-cancel:hover {
cursor: not-allowed;
}
.my-handle-class {
position: absolute;
border: 1px solid black;
border-radius: 50%;
height: 14px;
width: 14px;
font-size: 1em;
line-height: 1em;
box-sizing: border-box;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.my-handle-class-tl {
top: -14px;
left: -14px;
cursor: nw-resize;
}
.my-handle-class-tm {
top: -14px;
left: 50%;
margin-left: -7px;
cursor: n-resize;
}
.my-handle-class-tr {
top: -14px;
right: -14px;
cursor: ne-resize;
}
.my-handle-class-ml {
top: 50%;
margin-top: -7px;
left: -14px;
cursor: w-resize;
}
.my-handle-class-mr {
top: 50%;
margin-top: -7px;
right: -14px;
cursor: e-resize;
}
.my-handle-class-bl {
bottom: -14px;
left: -14px;
cursor: sw-resize;
}
.my-handle-class-bm {
bottom: -14px;
left: 50%;
margin-left: -7px;
cursor: s-resize;
}
.my-handle-class-br {
bottom: -14px;
right: -14px;
cursor: se-resize;
}
.my-handle-class-tl:hover,
.my-handle-class-tm:hover,
.my-handle-class-tr:hover,
.my-handle-class-ml:hover,
.my-handle-class-mr:hover,
.my-handle-class-bl:hover,
.my-handle-class-bm:hover,
.my-handle-class-br:hover {
transform: scale(1.4);
}

50
frontend/src/styles/vdrr/highlight.scss
View File

@ -1,50 +0,0 @@
// 添加行号样式
pre.hljs {
padding: 8px 2px;
border-radius: 5px;
position: relative;
ol {
list-style: decimal;
margin: 0;
margin-left: 40px;
padding: 0;
li {
list-style: decimal-leading-zero;
position: relative;
padding-left: 10px;
.line-num {
position: absolute;
left: -40px;
top: 0;
width: 40px;
height: 100%;
border-right: 1px solid rgba(0, 0, 0, .66);
}
}
}
b.name {
position: absolute;
top: 2px;
right: 12px;
z-index: 10;
color: #999;
pointer-events: none;
}
}
span.hljs-tag,
span.hljs-name {
color: #eb333c;
}
span.hljs-string {
color: #b4aa34;
}

247
frontend/src/styles/vdrr/markdown.scss
View File

@ -1,247 +0,0 @@
.markdown-render {
html {
font-size: 16px;
}
body {
font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: rgb(51, 51, 51);
line-height: 1.6;
}
a {
color: #4183C4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
margin-top: 1rem;
margin-bottom: 1rem;
font-weight: bold;
line-height: 1.4;
cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
text-decoration: none;
}
h1 tt,
h1 code {
font-size: inherit;
}
h2 tt,
h2 code {
font-size: inherit;
}
h3 tt,
h3 code {
font-size: inherit;
}
h4 tt,
h4 code {
font-size: inherit;
}
h5 tt,
h5 code {
font-size: inherit;
}
h6 tt,
h6 code {
font-size: inherit;
}
h1 {
padding-bottom: .3em;
font-size: 2.0m;
line-height: 1.2;
border-bottom: 1px solid #eee;
}
h2 {
padding-bottom: .3em;
font-size: 1.66em;
line-height: 1.225;
border-bottom: 1px solid #eee;
}
h3 {
font-size: 1.33em;
line-height: 1.43;
}
h4 {
font-size: 1.11em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: .8m;
color: #777;
}
p,
blockquote,
ul,
ol,
dl,
table {
margin: 0.8em 0;
}
li>ol,
li>ul {
margin: 0 0;
}
hr {
height: 2px;
padding: 0;
margin: 16px 0;
background-color: #e7e7e7;
border: 0 none;
overflow: hidden;
box-sizing: content-box;
}
li p.first {
display: inline-block;
}
ul,
ol {
padding-left: 30px;
}
ul:first-child,
ol:first-child {
margin-top: 0;
}
ul:last-child,
ol:last-child {
margin-bottom: 0;
}
blockquote {
border-left: 4px solid #dfe2e5;
padding: 0 15px;
color: #777777;
}
blockquote blockquote {
padding-right: 0;
}
table {
padding: 0;
word-break: initial;
}
table tr {
border-top: 1px solid #dfe2e5;
margin: 0;
padding: 0;
}
table tr:nth-child(2n),
thead {
background-color: #f8f8f8;
}
table tr th {
font-weight: bold;
border: 1px solid #dfe2e5;
border-bottom: 0;
margin: 0;
padding: 6px 13px;
}
table tr td {
border: 1px solid #dfe2e5;
margin: 0;
padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
margin-bottom: 0;
}
tt {
border: 1px solid #e7eaed;
background-color: #f8f8f8;
border-radius: 3px;
padding: 0;
padding: 2px 4px 0px 4px;
font-size: .9em;
}
code {
background-color: #f3f4f4;
padding: 0 2px 0 2px;
font-size: 16px;
}
@media print {
html {
font-size: 13px;
}
table,
pre {
page-break-inside: avoid;
}
pre {
word-wrap: break-word;
}
}
pre {
padding: 1rem;
font-size: 100%;
line-height: 1.45;
background-color:#f7f7f7;
border: 0;
border-radius: 3px;
color: #777777;
margin-top: 0 !important;
}
blockquote {
border-left-color: rgba(85, 85, 85, 0.12);
}
header,
footer {
font-family: "Segoe UI", "Arial", sans-serif;
}
}