mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-25 04:12:42 +08:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
c31a67e7bd | ||
|
|
f451d37254 | ||
|
377e507fd9 |
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.80644c67.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.e664c97c.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.0c7365d5.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.80644c67.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.0c7365d5.js"></script><script src="dist/js/app.e664c97c.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.10aa67e3.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-5397ae43.e756f28b.js" rel="prefetch"><link href="dist/css/app.6976ad01.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="preload" as="style"><link href="dist/js/app.ba6b7428.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.8be44735.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="stylesheet"><link href="dist/css/app.6976ad01.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.8be44735.js"></script><script src="dist/js/app.ba6b7428.js"></script></body></html>
|
||||
@@ -6,4 +6,6 @@ public
|
||||
*.md
|
||||
.eslintrc.js
|
||||
.prettierignore
|
||||
.prettierrc
|
||||
.prettierrc
|
||||
package-lock.json
|
||||
package.json
|
||||
@@ -7,7 +7,7 @@
|
||||
"build": "vue-cli-service build && node ../copy.js",
|
||||
"lint": "vue-cli-service lint",
|
||||
"buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist",
|
||||
"format": "prettier --write src/**"
|
||||
"format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@toast-ui/editor": "^3.1.5",
|
||||
@@ -15,6 +15,7 @@
|
||||
"element-ui": "^2.15.1",
|
||||
"v-viewer": "^1.6.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-i18n": "^8.27.2",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2",
|
||||
"xlsx": "^0.18.5"
|
||||
|
||||
@@ -3,6 +3,7 @@ import { simpleDeepClone } from 'simple-mind-map/src/utils/index'
|
||||
import Vue from 'vue'
|
||||
|
||||
const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
|
||||
const SIMPLE_MIND_MAP_LANG = 'SIMPLE_MIND_MAP_LANG'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@@ -75,3 +76,28 @@ export const storeConfig = config => {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林
|
||||
* @Date: 2022-11-05 14:36:50
|
||||
* @Desc: 存储语言
|
||||
*/
|
||||
export const storeLang = lang => {
|
||||
localStorage.setItem(SIMPLE_MIND_MAP_LANG, lang)
|
||||
}
|
||||
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林
|
||||
* @Date: 2022-11-05 14:37:36
|
||||
* @Desc: 获取存储的语言
|
||||
*/
|
||||
export const getLang = () => {
|
||||
let lang = localStorage.getItem(SIMPLE_MIND_MAP_LANG)
|
||||
if (lang) {
|
||||
return lang
|
||||
}
|
||||
storeLang('zh')
|
||||
return 'zh'
|
||||
}
|
||||
|
||||
321
web/src/config/en.js
Normal file
321
web/src/config/en.js
Normal file
@@ -0,0 +1,321 @@
|
||||
// 字体列表
|
||||
export const fontFamilyList = [
|
||||
{
|
||||
name: 'Song Ti',
|
||||
value: '宋体, SimSun, Songti SC'
|
||||
},
|
||||
{
|
||||
name: 'Microsoft Yahei',
|
||||
value: '微软雅黑, Microsoft YaHei'
|
||||
},
|
||||
{
|
||||
name: 'Italics',
|
||||
value: '楷体, 楷体_GB2312, SimKai, STKaiti'
|
||||
},
|
||||
{
|
||||
name: 'Boldface',
|
||||
value: '黑体, SimHei, Heiti SC'
|
||||
},
|
||||
{
|
||||
name: 'Official script',
|
||||
value: '隶书, SimLi'
|
||||
},
|
||||
{
|
||||
name: 'Andale Mono',
|
||||
value: 'andale mono'
|
||||
},
|
||||
{
|
||||
name: 'Arial',
|
||||
value: 'arial, helvetica, sans-serif'
|
||||
},
|
||||
{
|
||||
name: 'arialBlack',
|
||||
value: 'arial black, avant garde'
|
||||
},
|
||||
{
|
||||
name: 'Comic Sans Ms',
|
||||
value: 'comic sans ms'
|
||||
},
|
||||
{
|
||||
name: 'Impact',
|
||||
value: 'impact, chicago'
|
||||
},
|
||||
{
|
||||
name: 'Times New Roman',
|
||||
value: 'times new roman'
|
||||
},
|
||||
{
|
||||
name: 'Sans-Serif',
|
||||
value: 'sans-serif'
|
||||
},
|
||||
{
|
||||
name: 'serif',
|
||||
value: 'serif'
|
||||
}
|
||||
]
|
||||
|
||||
// 边框样式
|
||||
export const borderDasharrayList = [
|
||||
{
|
||||
name: 'Solid',
|
||||
value: 'none'
|
||||
},
|
||||
{
|
||||
name: 'Dotted1',
|
||||
value: '5,5'
|
||||
},
|
||||
{
|
||||
name: 'Dotted2',
|
||||
value: '10,10'
|
||||
},
|
||||
{
|
||||
name: 'Dotted3',
|
||||
value: '20,10,5,5,5,10'
|
||||
},
|
||||
{
|
||||
name: 'Dotted4',
|
||||
value: '5, 5, 1, 5'
|
||||
},
|
||||
{
|
||||
name: 'Dotted5',
|
||||
value: '15, 10, 5, 10, 15'
|
||||
},
|
||||
{
|
||||
name: 'Dotted6',
|
||||
value: '1, 5'
|
||||
}
|
||||
]
|
||||
|
||||
// 连线风格
|
||||
export const lineStyleList = [
|
||||
{
|
||||
name: 'Straight',
|
||||
value: 'straight'
|
||||
},
|
||||
{
|
||||
name: 'Curve',
|
||||
value: 'curve'
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
value: 'direct'
|
||||
}
|
||||
]
|
||||
|
||||
// 图片重复方式
|
||||
export const backgroundRepeatList = [
|
||||
{
|
||||
name: 'No repeat',
|
||||
value: 'no-repeat'
|
||||
},
|
||||
{
|
||||
name: 'Repeat',
|
||||
value: 'repeat'
|
||||
},
|
||||
{
|
||||
name: 'Repeat-x',
|
||||
value: 'repeat-x'
|
||||
},
|
||||
{
|
||||
name: 'Repeat-y',
|
||||
value: 'repeat-y'
|
||||
}
|
||||
]
|
||||
|
||||
// 背景图片定位
|
||||
export const backgroundPositionList = [
|
||||
{
|
||||
name: 'Default',
|
||||
value: '0% 0%'
|
||||
},
|
||||
{
|
||||
name: 'Left top',
|
||||
value: 'left top'
|
||||
},
|
||||
{
|
||||
name: 'Left center',
|
||||
value: 'left center'
|
||||
},
|
||||
{
|
||||
name: 'Left bottom',
|
||||
value: 'left bottom'
|
||||
},
|
||||
{
|
||||
name: 'Right top',
|
||||
value: 'right top'
|
||||
},
|
||||
{
|
||||
name: 'Right center',
|
||||
value: 'right center'
|
||||
},
|
||||
{
|
||||
name: 'Right bottom',
|
||||
value: 'right bottom'
|
||||
},
|
||||
{
|
||||
name: 'Center top',
|
||||
value: 'center top'
|
||||
},
|
||||
{
|
||||
name: 'Center center',
|
||||
value: 'center center'
|
||||
},
|
||||
{
|
||||
name: 'Center bottom',
|
||||
value: 'center bottom'
|
||||
}
|
||||
]
|
||||
|
||||
// 快捷键列表
|
||||
export const shortcutKeyList = [
|
||||
{
|
||||
type: 'Node operation',
|
||||
list: [
|
||||
{
|
||||
icon: 'icontianjiazijiedian',
|
||||
name: 'Inert child node',
|
||||
value: 'Tab'
|
||||
},
|
||||
{
|
||||
icon: 'iconjiedian',
|
||||
name: 'Insert sibling node',
|
||||
value: 'Enter'
|
||||
},
|
||||
{
|
||||
icon: 'iconshangyi',
|
||||
name: 'Move up node',
|
||||
value: 'Ctrl + ↑'
|
||||
},
|
||||
{
|
||||
icon: 'iconxiayi',
|
||||
name: 'Move down node',
|
||||
value: 'Ctrl + ↓'
|
||||
},
|
||||
{
|
||||
icon: 'icongaikuozonglan',
|
||||
name: 'Insert summary',
|
||||
value: 'Ctrl + S'
|
||||
},
|
||||
{
|
||||
icon: 'iconzhankai',
|
||||
name: 'Expand/UnExpand node',
|
||||
value: '/'
|
||||
},
|
||||
{
|
||||
icon: 'iconshanchu',
|
||||
name: 'Delete node',
|
||||
value: 'Delete | Backspace'
|
||||
},
|
||||
{
|
||||
icon: 'iconfuzhi',
|
||||
name: 'Copy node',
|
||||
value: 'Ctrl + C'
|
||||
},
|
||||
{
|
||||
icon: 'iconjianqie',
|
||||
name: 'Cut node',
|
||||
value: 'Ctrl + X'
|
||||
},
|
||||
{
|
||||
icon: 'iconniantie',
|
||||
name: 'Paste node',
|
||||
value: 'Ctrl + V'
|
||||
},
|
||||
{
|
||||
icon: 'iconbianji',
|
||||
name: 'Edit node',
|
||||
value: 'F2'
|
||||
},
|
||||
{
|
||||
icon: 'iconhuanhang',
|
||||
name: 'Text Wrap',
|
||||
value: 'Shift + Enter'
|
||||
},
|
||||
{
|
||||
icon: 'iconhoutui-shi',
|
||||
name: 'Undo',
|
||||
value: 'Ctrl + Z'
|
||||
},
|
||||
{
|
||||
icon: 'iconqianjin1',
|
||||
name: 'Redo',
|
||||
value: 'Ctrl + Y'
|
||||
},
|
||||
{
|
||||
icon: 'iconquanxuan',
|
||||
name: 'Select All',
|
||||
value: 'Ctrl + A'
|
||||
},
|
||||
{
|
||||
icon: 'iconquanxuan',
|
||||
name: 'Multiple choice',
|
||||
value: 'Right click / Ctrl + Left click'
|
||||
},
|
||||
{
|
||||
icon: 'iconzhengli',
|
||||
name: 'Arrange layout',
|
||||
value: 'Ctrl + L'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Canvas operation',
|
||||
list: [
|
||||
{
|
||||
icon: 'iconfangda',
|
||||
name: 'Zoom in',
|
||||
value: 'Ctrl + +'
|
||||
},
|
||||
{
|
||||
icon: 'iconsuoxiao',
|
||||
name: 'Zoom out',
|
||||
value: 'Ctrl + -'
|
||||
},
|
||||
{
|
||||
icon: 'icondingwei',
|
||||
name: 'Reset',
|
||||
value: 'Ctrl + Enter'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// 形状列表
|
||||
export const shapeList = [
|
||||
{
|
||||
name: 'Rectangle',
|
||||
value: 'rectangle'
|
||||
},
|
||||
{
|
||||
name: 'Diamond',
|
||||
value: 'diamond'
|
||||
},
|
||||
{
|
||||
name: 'Parallelogram',
|
||||
value: 'parallelogram'
|
||||
},
|
||||
{
|
||||
name: 'Rounded rectangle',
|
||||
value: 'roundedRectangle'
|
||||
},
|
||||
{
|
||||
name: 'Octagonal rectangle',
|
||||
value: 'octagonalRectangle'
|
||||
},
|
||||
{
|
||||
name: 'Outer triangular rectangle',
|
||||
value: 'outerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: 'Inner triangular rectangle',
|
||||
value: 'innerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: 'Ellipse',
|
||||
value: 'ellipse'
|
||||
},
|
||||
{
|
||||
name: 'Circle',
|
||||
value: 'circle'
|
||||
}
|
||||
]
|
||||
@@ -1,381 +1,79 @@
|
||||
// 字体列表
|
||||
export const fontFamilyList = [
|
||||
{
|
||||
name: '宋体',
|
||||
value: '宋体, SimSun, Songti SC'
|
||||
},
|
||||
{
|
||||
name: '微软雅黑',
|
||||
value: '微软雅黑, Microsoft YaHei'
|
||||
},
|
||||
{
|
||||
name: '楷体',
|
||||
value: '楷体, 楷体_GB2312, SimKai, STKaiti'
|
||||
},
|
||||
{
|
||||
name: '黑体',
|
||||
value: '黑体, SimHei, Heiti SC'
|
||||
},
|
||||
{
|
||||
name: '隶书',
|
||||
value: '隶书, SimLi'
|
||||
},
|
||||
{
|
||||
name: 'Andale Mono',
|
||||
value: 'andale mono'
|
||||
},
|
||||
{
|
||||
name: 'Arial',
|
||||
value: 'arial, helvetica, sans-serif'
|
||||
},
|
||||
{
|
||||
name: 'arialBlack',
|
||||
value: 'arial black, avant garde'
|
||||
},
|
||||
{
|
||||
name: 'Comic Sans Ms',
|
||||
value: 'comic sans ms'
|
||||
},
|
||||
{
|
||||
name: 'Impact',
|
||||
value: 'impact, chicago'
|
||||
},
|
||||
{
|
||||
name: 'Times New Roman',
|
||||
value: 'times new roman'
|
||||
},
|
||||
{
|
||||
name: 'Sans-Serif',
|
||||
value: 'sans-serif'
|
||||
},
|
||||
{
|
||||
name: 'serif',
|
||||
value: 'serif'
|
||||
}
|
||||
]
|
||||
import {
|
||||
fontSizeList,
|
||||
lineHeightList,
|
||||
colorList,
|
||||
borderWidthList,
|
||||
borderRadiusList,
|
||||
lineWidthList,
|
||||
store,
|
||||
langList,
|
||||
fontFamilyList as fontFamilyListZh,
|
||||
borderDasharrayList as borderDasharrayListZh,
|
||||
lineStyleList as lineStyleListZh,
|
||||
backgroundRepeatList as backgroundRepeatListZh,
|
||||
backgroundPositionList as backgroundPositionListZh,
|
||||
shortcutKeyList as shortcutKeyListZh,
|
||||
shapeList as shapeListZh
|
||||
} from './zh'
|
||||
import {
|
||||
fontFamilyList as fontFamilyListEn,
|
||||
borderDasharrayList as borderDasharrayListEn,
|
||||
lineStyleList as lineStyleListEn,
|
||||
backgroundRepeatList as backgroundRepeatListEn,
|
||||
backgroundPositionList as backgroundPositionListEn,
|
||||
shortcutKeyList as shortcutKeyListEn,
|
||||
shapeList as shapeListEn
|
||||
} from './en'
|
||||
|
||||
// 字号
|
||||
export const fontSizeList = [10, 12, 16, 18, 24, 32, 48]
|
||||
|
||||
// 行高
|
||||
export const lineHeightList = [1, 1.5, 2, 2.5, 3]
|
||||
|
||||
// 颜色
|
||||
export const colorList = [
|
||||
'#4D4D4D',
|
||||
'#999999',
|
||||
'#FFFFFF',
|
||||
'#F44E3B',
|
||||
'#FE9200',
|
||||
'#FCDC00',
|
||||
'#DBDF00',
|
||||
'#A4DD00',
|
||||
'#68CCCA',
|
||||
'#73D8FF',
|
||||
'#AEA1FF',
|
||||
'#FDA1FF',
|
||||
'#333333',
|
||||
'#808080',
|
||||
'#cccccc',
|
||||
'#D33115',
|
||||
'#E27300',
|
||||
'#FCC400',
|
||||
'#B0BC00',
|
||||
'#68BC00',
|
||||
'#16A5A5',
|
||||
'#009CE0',
|
||||
'#7B64FF',
|
||||
'#FA28FF',
|
||||
'#000000',
|
||||
'#666666',
|
||||
'#B3B3B3',
|
||||
'#9F0500',
|
||||
'#C45100',
|
||||
'#FB9E00',
|
||||
'#808900',
|
||||
'#194D33',
|
||||
'#0C797D',
|
||||
'#0062B1',
|
||||
'#653294',
|
||||
'#AB149E'
|
||||
]
|
||||
|
||||
// 边框宽度
|
||||
export const borderWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
|
||||
// 边框样式
|
||||
export const borderDasharrayList = [
|
||||
{
|
||||
name: '实线',
|
||||
value: 'none'
|
||||
},
|
||||
{
|
||||
name: '虚线1',
|
||||
value: '5,5'
|
||||
},
|
||||
{
|
||||
name: '虚线2',
|
||||
value: '10,10'
|
||||
},
|
||||
{
|
||||
name: '虚线3',
|
||||
value: '20,10,5,5,5,10'
|
||||
},
|
||||
{
|
||||
name: '虚线4',
|
||||
value: '5, 5, 1, 5'
|
||||
},
|
||||
{
|
||||
name: '虚线5',
|
||||
value: '15, 10, 5, 10, 15'
|
||||
},
|
||||
{
|
||||
name: '虚线6',
|
||||
value: '1, 5'
|
||||
}
|
||||
]
|
||||
|
||||
// 圆角
|
||||
export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
|
||||
// 线宽
|
||||
export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
|
||||
// 连线风格
|
||||
export const lineStyleList = [
|
||||
{
|
||||
name: '直线',
|
||||
value: 'straight'
|
||||
},
|
||||
{
|
||||
name: '曲线',
|
||||
value: 'curve'
|
||||
},
|
||||
{
|
||||
name: '直连',
|
||||
value: 'direct'
|
||||
}
|
||||
]
|
||||
|
||||
// 图片重复方式
|
||||
export const backgroundRepeatList = [
|
||||
{
|
||||
name: '不重复',
|
||||
value: 'no-repeat'
|
||||
},
|
||||
{
|
||||
name: '重复',
|
||||
value: 'repeat'
|
||||
},
|
||||
{
|
||||
name: '水平方向重复',
|
||||
value: 'repeat-x'
|
||||
},
|
||||
{
|
||||
name: '垂直方向重复',
|
||||
value: 'repeat-y'
|
||||
}
|
||||
]
|
||||
|
||||
// 背景图片定位
|
||||
export const backgroundPositionList = [
|
||||
{
|
||||
name: '默认',
|
||||
value: '0% 0%'
|
||||
},
|
||||
{
|
||||
name: '左上',
|
||||
value: 'left top'
|
||||
},
|
||||
{
|
||||
name: '左中',
|
||||
value: 'left center'
|
||||
},
|
||||
{
|
||||
name: '左下',
|
||||
value: 'left bottom'
|
||||
},
|
||||
{
|
||||
name: '右上',
|
||||
value: 'right top'
|
||||
},
|
||||
{
|
||||
name: '右中',
|
||||
value: 'right center'
|
||||
},
|
||||
{
|
||||
name: '右下',
|
||||
value: 'right bottom'
|
||||
},
|
||||
{
|
||||
name: '中上',
|
||||
value: 'center top'
|
||||
},
|
||||
{
|
||||
name: '居中',
|
||||
value: 'center center'
|
||||
},
|
||||
{
|
||||
name: '中下',
|
||||
value: 'center bottom'
|
||||
}
|
||||
]
|
||||
|
||||
// 数据存储
|
||||
export const store = {
|
||||
sidebarZIndex: 1 //侧边栏zIndex
|
||||
const fontFamilyList = {
|
||||
zh: fontFamilyListZh,
|
||||
en: fontFamilyListEn
|
||||
}
|
||||
|
||||
// 快捷键列表
|
||||
export const shortcutKeyList = [
|
||||
{
|
||||
type: '节点操作',
|
||||
list: [
|
||||
{
|
||||
icon: 'icontianjiazijiedian',
|
||||
name: '插入下级节点',
|
||||
value: 'Tab'
|
||||
},
|
||||
{
|
||||
icon: 'iconjiedian',
|
||||
name: '插入同级节点',
|
||||
value: 'Enter'
|
||||
},
|
||||
{
|
||||
icon: 'iconshangyi',
|
||||
name: '上移节点',
|
||||
value: 'Ctrl + ↑'
|
||||
},
|
||||
{
|
||||
icon: 'iconxiayi',
|
||||
name: '下移节点',
|
||||
value: 'Ctrl + ↓'
|
||||
},
|
||||
{
|
||||
icon: 'icongaikuozonglan',
|
||||
name: '插入概要',
|
||||
value: 'Ctrl + S'
|
||||
},
|
||||
{
|
||||
icon: 'iconzhankai',
|
||||
name: '展开/收起节点',
|
||||
value: '/'
|
||||
},
|
||||
{
|
||||
icon: 'iconshanchu',
|
||||
name: '删除节点',
|
||||
value: 'Delete | Backspace'
|
||||
},
|
||||
{
|
||||
icon: 'iconfuzhi',
|
||||
name: '复制节点',
|
||||
value: 'Ctrl + C'
|
||||
},
|
||||
{
|
||||
icon: 'iconjianqie',
|
||||
name: '剪切节点',
|
||||
value: 'Ctrl + X'
|
||||
},
|
||||
{
|
||||
icon: 'iconniantie',
|
||||
name: '粘贴节点',
|
||||
value: 'Ctrl + V'
|
||||
},
|
||||
{
|
||||
icon: 'iconbianji',
|
||||
name: '编辑节点',
|
||||
value: 'F2'
|
||||
},
|
||||
{
|
||||
icon: 'iconhuanhang',
|
||||
name: '文本换行',
|
||||
value: 'Shift + Enter'
|
||||
},
|
||||
{
|
||||
icon: 'iconhoutui-shi',
|
||||
name: '回退',
|
||||
value: 'Ctrl + Z'
|
||||
},
|
||||
{
|
||||
icon: 'iconqianjin1',
|
||||
name: '前进',
|
||||
value: 'Ctrl + Y'
|
||||
},
|
||||
{
|
||||
icon: 'iconquanxuan',
|
||||
name: '全选',
|
||||
value: 'Ctrl + A'
|
||||
},
|
||||
{
|
||||
icon: 'iconquanxuan',
|
||||
name: '多选',
|
||||
value: '右键 / Ctrl + 左键'
|
||||
},
|
||||
{
|
||||
icon: 'iconzhengli',
|
||||
name: '一键整理布局',
|
||||
value: 'Ctrl + L'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: '画布操作',
|
||||
list: [
|
||||
{
|
||||
icon: 'iconfangda',
|
||||
name: '放大',
|
||||
value: 'Ctrl + +'
|
||||
},
|
||||
{
|
||||
icon: 'iconsuoxiao',
|
||||
name: '缩小',
|
||||
value: 'Ctrl + -'
|
||||
},
|
||||
{
|
||||
icon: 'icondingwei',
|
||||
name: '恢复默认',
|
||||
value: 'Ctrl + Enter'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
const borderDasharrayList = {
|
||||
zh: borderDasharrayListZh,
|
||||
en: borderDasharrayListEn
|
||||
}
|
||||
|
||||
// 形状列表
|
||||
export const shapeList = [
|
||||
{
|
||||
name: '矩形',
|
||||
value: 'rectangle'
|
||||
},
|
||||
{
|
||||
name: '菱形',
|
||||
value: 'diamond'
|
||||
},
|
||||
{
|
||||
name: '平行四边形',
|
||||
value: 'parallelogram'
|
||||
},
|
||||
{
|
||||
name: '圆角矩形',
|
||||
value: 'roundedRectangle'
|
||||
},
|
||||
{
|
||||
name: '八角矩形',
|
||||
value: 'octagonalRectangle'
|
||||
},
|
||||
{
|
||||
name: '外三角矩形',
|
||||
value: 'outerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: '内三角矩形',
|
||||
value: 'innerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: '椭圆',
|
||||
value: 'ellipse'
|
||||
},
|
||||
{
|
||||
name: '圆',
|
||||
value: 'circle'
|
||||
}
|
||||
]
|
||||
const lineStyleList = {
|
||||
zh: lineStyleListZh,
|
||||
en: lineStyleListEn
|
||||
}
|
||||
|
||||
const backgroundRepeatList = {
|
||||
zh: backgroundRepeatListZh,
|
||||
en: backgroundRepeatListEn
|
||||
}
|
||||
|
||||
const backgroundPositionList = {
|
||||
zh: backgroundPositionListZh,
|
||||
en: backgroundPositionListEn
|
||||
}
|
||||
|
||||
const shortcutKeyList = {
|
||||
zh: shortcutKeyListZh,
|
||||
en: shortcutKeyListEn
|
||||
}
|
||||
|
||||
const shapeList = {
|
||||
zh: shapeListZh,
|
||||
en: shapeListEn
|
||||
}
|
||||
|
||||
export {
|
||||
fontSizeList,
|
||||
lineHeightList,
|
||||
borderWidthList,
|
||||
borderRadiusList,
|
||||
lineWidthList,
|
||||
store,
|
||||
colorList,
|
||||
langList,
|
||||
fontFamilyList,
|
||||
borderDasharrayList,
|
||||
lineStyleList,
|
||||
backgroundRepeatList,
|
||||
backgroundPositionList,
|
||||
shortcutKeyList,
|
||||
shapeList
|
||||
}
|
||||
|
||||
393
web/src/config/zh.js
Normal file
393
web/src/config/zh.js
Normal file
@@ -0,0 +1,393 @@
|
||||
// 字体列表
|
||||
export const fontFamilyList = [
|
||||
{
|
||||
name: '宋体',
|
||||
value: '宋体, SimSun, Songti SC'
|
||||
},
|
||||
{
|
||||
name: '微软雅黑',
|
||||
value: '微软雅黑, Microsoft YaHei'
|
||||
},
|
||||
{
|
||||
name: '楷体',
|
||||
value: '楷体, 楷体_GB2312, SimKai, STKaiti'
|
||||
},
|
||||
{
|
||||
name: '黑体',
|
||||
value: '黑体, SimHei, Heiti SC'
|
||||
},
|
||||
{
|
||||
name: '隶书',
|
||||
value: '隶书, SimLi'
|
||||
},
|
||||
{
|
||||
name: 'Andale Mono',
|
||||
value: 'andale mono'
|
||||
},
|
||||
{
|
||||
name: 'Arial',
|
||||
value: 'arial, helvetica, sans-serif'
|
||||
},
|
||||
{
|
||||
name: 'arialBlack',
|
||||
value: 'arial black, avant garde'
|
||||
},
|
||||
{
|
||||
name: 'Comic Sans Ms',
|
||||
value: 'comic sans ms'
|
||||
},
|
||||
{
|
||||
name: 'Impact',
|
||||
value: 'impact, chicago'
|
||||
},
|
||||
{
|
||||
name: 'Times New Roman',
|
||||
value: 'times new roman'
|
||||
},
|
||||
{
|
||||
name: 'Sans-Serif',
|
||||
value: 'sans-serif'
|
||||
},
|
||||
{
|
||||
name: 'serif',
|
||||
value: 'serif'
|
||||
}
|
||||
]
|
||||
|
||||
// 字号
|
||||
export const fontSizeList = [10, 12, 16, 18, 24, 32, 48]
|
||||
|
||||
// 行高
|
||||
export const lineHeightList = [1, 1.5, 2, 2.5, 3]
|
||||
|
||||
// 颜色
|
||||
export const colorList = [
|
||||
'#4D4D4D',
|
||||
'#999999',
|
||||
'#FFFFFF',
|
||||
'#F44E3B',
|
||||
'#FE9200',
|
||||
'#FCDC00',
|
||||
'#DBDF00',
|
||||
'#A4DD00',
|
||||
'#68CCCA',
|
||||
'#73D8FF',
|
||||
'#AEA1FF',
|
||||
'#FDA1FF',
|
||||
'#333333',
|
||||
'#808080',
|
||||
'#cccccc',
|
||||
'#D33115',
|
||||
'#E27300',
|
||||
'#FCC400',
|
||||
'#B0BC00',
|
||||
'#68BC00',
|
||||
'#16A5A5',
|
||||
'#009CE0',
|
||||
'#7B64FF',
|
||||
'#FA28FF',
|
||||
'#000000',
|
||||
'#666666',
|
||||
'#B3B3B3',
|
||||
'#9F0500',
|
||||
'#C45100',
|
||||
'#FB9E00',
|
||||
'#808900',
|
||||
'#194D33',
|
||||
'#0C797D',
|
||||
'#0062B1',
|
||||
'#653294',
|
||||
'#AB149E'
|
||||
]
|
||||
|
||||
// 边框宽度
|
||||
export const borderWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
|
||||
// 边框样式
|
||||
export const borderDasharrayList = [
|
||||
{
|
||||
name: '实线',
|
||||
value: 'none'
|
||||
},
|
||||
{
|
||||
name: '虚线1',
|
||||
value: '5,5'
|
||||
},
|
||||
{
|
||||
name: '虚线2',
|
||||
value: '10,10'
|
||||
},
|
||||
{
|
||||
name: '虚线3',
|
||||
value: '20,10,5,5,5,10'
|
||||
},
|
||||
{
|
||||
name: '虚线4',
|
||||
value: '5, 5, 1, 5'
|
||||
},
|
||||
{
|
||||
name: '虚线5',
|
||||
value: '15, 10, 5, 10, 15'
|
||||
},
|
||||
{
|
||||
name: '虚线6',
|
||||
value: '1, 5'
|
||||
}
|
||||
]
|
||||
|
||||
// 圆角
|
||||
export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
|
||||
// 线宽
|
||||
export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
|
||||
// 连线风格
|
||||
export const lineStyleList = [
|
||||
{
|
||||
name: '直线',
|
||||
value: 'straight'
|
||||
},
|
||||
{
|
||||
name: '曲线',
|
||||
value: 'curve'
|
||||
},
|
||||
{
|
||||
name: '直连',
|
||||
value: 'direct'
|
||||
}
|
||||
]
|
||||
|
||||
// 图片重复方式
|
||||
export const backgroundRepeatList = [
|
||||
{
|
||||
name: '不重复',
|
||||
value: 'no-repeat'
|
||||
},
|
||||
{
|
||||
name: '重复',
|
||||
value: 'repeat'
|
||||
},
|
||||
{
|
||||
name: '水平方向重复',
|
||||
value: 'repeat-x'
|
||||
},
|
||||
{
|
||||
name: '垂直方向重复',
|
||||
value: 'repeat-y'
|
||||
}
|
||||
]
|
||||
|
||||
// 背景图片定位
|
||||
export const backgroundPositionList = [
|
||||
{
|
||||
name: '默认',
|
||||
value: '0% 0%'
|
||||
},
|
||||
{
|
||||
name: '左上',
|
||||
value: 'left top'
|
||||
},
|
||||
{
|
||||
name: '左中',
|
||||
value: 'left center'
|
||||
},
|
||||
{
|
||||
name: '左下',
|
||||
value: 'left bottom'
|
||||
},
|
||||
{
|
||||
name: '右上',
|
||||
value: 'right top'
|
||||
},
|
||||
{
|
||||
name: '右中',
|
||||
value: 'right center'
|
||||
},
|
||||
{
|
||||
name: '右下',
|
||||
value: 'right bottom'
|
||||
},
|
||||
{
|
||||
name: '中上',
|
||||
value: 'center top'
|
||||
},
|
||||
{
|
||||
name: '居中',
|
||||
value: 'center center'
|
||||
},
|
||||
{
|
||||
name: '中下',
|
||||
value: 'center bottom'
|
||||
}
|
||||
]
|
||||
|
||||
// 数据存储
|
||||
export const store = {
|
||||
sidebarZIndex: 1 //侧边栏zIndex
|
||||
}
|
||||
|
||||
// 快捷键列表
|
||||
export const shortcutKeyList = [
|
||||
{
|
||||
type: '节点操作',
|
||||
list: [
|
||||
{
|
||||
icon: 'icontianjiazijiedian',
|
||||
name: '插入下级节点',
|
||||
value: 'Tab'
|
||||
},
|
||||
{
|
||||
icon: 'iconjiedian',
|
||||
name: '插入同级节点',
|
||||
value: 'Enter'
|
||||
},
|
||||
{
|
||||
icon: 'iconshangyi',
|
||||
name: '上移节点',
|
||||
value: 'Ctrl + ↑'
|
||||
},
|
||||
{
|
||||
icon: 'iconxiayi',
|
||||
name: '下移节点',
|
||||
value: 'Ctrl + ↓'
|
||||
},
|
||||
{
|
||||
icon: 'icongaikuozonglan',
|
||||
name: '插入概要',
|
||||
value: 'Ctrl + S'
|
||||
},
|
||||
{
|
||||
icon: 'iconzhankai',
|
||||
name: '展开/收起节点',
|
||||
value: '/'
|
||||
},
|
||||
{
|
||||
icon: 'iconshanchu',
|
||||
name: '删除节点',
|
||||
value: 'Delete | Backspace'
|
||||
},
|
||||
{
|
||||
icon: 'iconfuzhi',
|
||||
name: '复制节点',
|
||||
value: 'Ctrl + C'
|
||||
},
|
||||
{
|
||||
icon: 'iconjianqie',
|
||||
name: '剪切节点',
|
||||
value: 'Ctrl + X'
|
||||
},
|
||||
{
|
||||
icon: 'iconniantie',
|
||||
name: '粘贴节点',
|
||||
value: 'Ctrl + V'
|
||||
},
|
||||
{
|
||||
icon: 'iconbianji',
|
||||
name: '编辑节点',
|
||||
value: 'F2'
|
||||
},
|
||||
{
|
||||
icon: 'iconhuanhang',
|
||||
name: '文本换行',
|
||||
value: 'Shift + Enter'
|
||||
},
|
||||
{
|
||||
icon: 'iconhoutui-shi',
|
||||
name: '回退',
|
||||
value: 'Ctrl + Z'
|
||||
},
|
||||
{
|
||||
icon: 'iconqianjin1',
|
||||
name: '前进',
|
||||
value: 'Ctrl + Y'
|
||||
},
|
||||
{
|
||||
icon: 'iconquanxuan',
|
||||
name: '全选',
|
||||
value: 'Ctrl + A'
|
||||
},
|
||||
{
|
||||
icon: 'iconquanxuan',
|
||||
name: '多选',
|
||||
value: '右键 / Ctrl + 左键'
|
||||
},
|
||||
{
|
||||
icon: 'iconzhengli',
|
||||
name: '一键整理布局',
|
||||
value: 'Ctrl + L'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: '画布操作',
|
||||
list: [
|
||||
{
|
||||
icon: 'iconfangda',
|
||||
name: '放大',
|
||||
value: 'Ctrl + +'
|
||||
},
|
||||
{
|
||||
icon: 'iconsuoxiao',
|
||||
name: '缩小',
|
||||
value: 'Ctrl + -'
|
||||
},
|
||||
{
|
||||
icon: 'icondingwei',
|
||||
name: '恢复默认',
|
||||
value: 'Ctrl + Enter'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// 形状列表
|
||||
export const shapeList = [
|
||||
{
|
||||
name: '矩形',
|
||||
value: 'rectangle'
|
||||
},
|
||||
{
|
||||
name: '菱形',
|
||||
value: 'diamond'
|
||||
},
|
||||
{
|
||||
name: '平行四边形',
|
||||
value: 'parallelogram'
|
||||
},
|
||||
{
|
||||
name: '圆角矩形',
|
||||
value: 'roundedRectangle'
|
||||
},
|
||||
{
|
||||
name: '八角矩形',
|
||||
value: 'octagonalRectangle'
|
||||
},
|
||||
{
|
||||
name: '外三角矩形',
|
||||
value: 'outerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: '内三角矩形',
|
||||
value: 'innerTriangularRectangle'
|
||||
},
|
||||
{
|
||||
name: '椭圆',
|
||||
value: 'ellipse'
|
||||
},
|
||||
{
|
||||
name: '圆',
|
||||
value: 'circle'
|
||||
}
|
||||
]
|
||||
|
||||
// 多语言列表
|
||||
export const langList = [
|
||||
{
|
||||
value: 'zh',
|
||||
name: '简体中文'
|
||||
},
|
||||
{
|
||||
value: 'en',
|
||||
name: 'English'
|
||||
}
|
||||
]
|
||||
13
web/src/i18n.js
Normal file
13
web/src/i18n.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import messages from './lang'
|
||||
import { getLang } from '@/api'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: getLang(),
|
||||
messages
|
||||
})
|
||||
|
||||
export default i18n
|
||||
164
web/src/lang/en_us.js
Normal file
164
web/src/lang/en_us.js
Normal file
@@ -0,0 +1,164 @@
|
||||
export default {
|
||||
baseStyle: {
|
||||
title: 'BaseStyle',
|
||||
background: 'Background',
|
||||
color: 'Color',
|
||||
image: 'Image',
|
||||
imageRepeat: 'Image repeat',
|
||||
line: 'Line',
|
||||
width: 'Width',
|
||||
style: 'Style',
|
||||
lineOfOutline: 'Line of outline',
|
||||
nodePadding: 'Node padding',
|
||||
nodeMargin: 'Node margin',
|
||||
horizontal: 'Horizontal',
|
||||
vertical: 'Vertical',
|
||||
maximumWidth: 'Max width',
|
||||
maximumHeight: 'Max height',
|
||||
icon: 'Icon',
|
||||
size: 'Size',
|
||||
level2Node: 'Level2 node',
|
||||
belowLevel2Node: 'Below level2 node'
|
||||
},
|
||||
color: {
|
||||
moreColor: 'More color'
|
||||
},
|
||||
contextmenu: {
|
||||
insertSiblingNode: 'Insert sibling node',
|
||||
insertChildNode: 'Insert child node',
|
||||
insertSummary: 'Insert summary',
|
||||
moveUpNode: 'Move up node',
|
||||
moveDownNode: 'Move down node',
|
||||
deleteNode: 'Delete node',
|
||||
copyNode: 'Copy node',
|
||||
cutNode: 'Cut node',
|
||||
pasteNode: 'Paste node',
|
||||
backCenter: 'Back center',
|
||||
expandAll: 'Expand all',
|
||||
unExpandAll: 'Un expand all',
|
||||
expandTo: 'Expand to',
|
||||
arrangeLayout: 'Arrange layout',
|
||||
level1: 'Level1',
|
||||
level2: 'Level2',
|
||||
level3: 'Level3',
|
||||
level4: 'Level4',
|
||||
level5: 'Level5',
|
||||
level6: 'Level6'
|
||||
},
|
||||
count: {
|
||||
words: 'Words',
|
||||
nodes: 'Nodes'
|
||||
},
|
||||
dialog: {
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm'
|
||||
},
|
||||
export: {
|
||||
title: 'Export',
|
||||
filename: 'Filename',
|
||||
include: 'Is include config like theme and structure',
|
||||
dedicatedFile: 'Dedicated file',
|
||||
jsonFile: 'json file',
|
||||
imageFile: 'Image file',
|
||||
svgFile: 'svg file',
|
||||
pdfFile: 'pdf file',
|
||||
tips: 'tips：.smm and .json file can be import'
|
||||
},
|
||||
fullscreen: {
|
||||
fullscreen: 'Fullscreen'
|
||||
},
|
||||
import: {
|
||||
title: 'Import',
|
||||
selectFile: 'Select file',
|
||||
supportFile: 'Support .smm、.json、.xmind、.xlsx file'
|
||||
},
|
||||
navigatorToolbar: {
|
||||
openMiniMap: 'Open mini map',
|
||||
readonly: 'Readonly',
|
||||
edit: 'Edit'
|
||||
},
|
||||
nodeHyperlink: {
|
||||
title: 'Link',
|
||||
link: 'Href',
|
||||
name: 'Name'
|
||||
},
|
||||
nodeIcon: {
|
||||
title: 'Icon'
|
||||
},
|
||||
nodeImage: {
|
||||
title: 'Image',
|
||||
imgTitle: 'Title'
|
||||
},
|
||||
nodeNote: {
|
||||
title: 'Note'
|
||||
},
|
||||
nodeTag: {
|
||||
title: 'Tag',
|
||||
addTip: 'Press Enter to add'
|
||||
},
|
||||
outline: {
|
||||
title: 'Outline'
|
||||
},
|
||||
scale: {
|
||||
zoomIn: 'Zoom in',
|
||||
zoomOut: 'Zoom out'
|
||||
},
|
||||
shortcutKey: {
|
||||
title: 'Shortcut key'
|
||||
},
|
||||
strusture: {
|
||||
title: 'Strusture'
|
||||
},
|
||||
style: {
|
||||
title: 'Node style',
|
||||
normal: 'Normal',
|
||||
active: 'Active',
|
||||
text: 'Text',
|
||||
fontFamily: 'Font family',
|
||||
fontSize: 'Font size',
|
||||
lineHeight: 'Line height',
|
||||
color: 'color',
|
||||
addFontWeight: 'add font weight',
|
||||
italic: 'Italic',
|
||||
textDecoration: 'Text decoration',
|
||||
underline: 'Underline',
|
||||
lineThrough: 'Line through',
|
||||
overline: 'Overline',
|
||||
border: 'Border',
|
||||
style: 'Style',
|
||||
width: 'Width',
|
||||
borderRadius: 'Border radius',
|
||||
background: 'Background',
|
||||
shape: 'Shape',
|
||||
line: 'Line',
|
||||
nodePadding: 'Node padding',
|
||||
horizontal: 'Horizontal',
|
||||
vertical: 'Vertical'
|
||||
},
|
||||
theme: {
|
||||
title: 'Theme'
|
||||
},
|
||||
toolbar: {
|
||||
undo: 'Undo',
|
||||
redo: 'Redo',
|
||||
insertSiblingNode: 'Insert sibling node',
|
||||
insertChildNode: 'Insert child node',
|
||||
deleteNode: 'Delete node',
|
||||
image: 'Image',
|
||||
icon: 'Icon',
|
||||
link: 'Link',
|
||||
note: 'Note',
|
||||
tag: 'Tag',
|
||||
summary: 'Summary',
|
||||
displayOutline: 'Display outline',
|
||||
baseStyle: 'Base style',
|
||||
theme: 'Theme',
|
||||
strusture: 'Strusture',
|
||||
newFile: 'New file',
|
||||
openFile: 'Open file',
|
||||
saveAs: 'Save as',
|
||||
import: 'Import',
|
||||
export: 'Export',
|
||||
shortcutKey: 'Shortcut key'
|
||||
}
|
||||
}
|
||||
7
web/src/lang/index.js
Normal file
7
web/src/lang/index.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import en from './en_us'
|
||||
import zh from './zh_cn'
|
||||
|
||||
export default {
|
||||
zh,
|
||||
en
|
||||
}
|
||||
164
web/src/lang/zh_cn.js
Normal file
164
web/src/lang/zh_cn.js
Normal file
@@ -0,0 +1,164 @@
|
||||
export default {
|
||||
baseStyle: {
|
||||
title: '基础样式',
|
||||
background: '背景',
|
||||
color: '颜色',
|
||||
image: '图片',
|
||||
imageRepeat: '图片重复',
|
||||
line: '连线',
|
||||
width: '粗细',
|
||||
style: '风格',
|
||||
lineOfOutline: '概要的连线',
|
||||
nodePadding: '节点内边距',
|
||||
nodeMargin: '节点外边距',
|
||||
horizontal: '水平',
|
||||
vertical: '垂直',
|
||||
maximumWidth: '显示的最大宽度',
|
||||
maximumHeight: '显示的最大高度',
|
||||
icon: '图标',
|
||||
size: '大小',
|
||||
level2Node: '二级节点',
|
||||
belowLevel2Node: '三级及以下节点'
|
||||
},
|
||||
color: {
|
||||
moreColor: '更多颜色'
|
||||
},
|
||||
contextmenu: {
|
||||
insertSiblingNode: '插入同级节点',
|
||||
insertChildNode: '插入子级节点',
|
||||
insertSummary: '插入概要',
|
||||
moveUpNode: '上移节点',
|
||||
moveDownNode: '下移节点',
|
||||
deleteNode: '删除节点',
|
||||
copyNode: '复制节点',
|
||||
cutNode: '剪切节点',
|
||||
pasteNode: '粘贴节点',
|
||||
backCenter: '回到中心',
|
||||
expandAll: '展开所有',
|
||||
unExpandAll: '收起所有',
|
||||
expandTo: '展开到',
|
||||
arrangeLayout: '一键整理布局',
|
||||
level1: '一级主题',
|
||||
level2: '二级主题',
|
||||
level3: '三级主题',
|
||||
level4: '四级主题',
|
||||
level5: '五级主题',
|
||||
level6: '六级主题'
|
||||
},
|
||||
count: {
|
||||
words: '字数',
|
||||
nodes: '节点'
|
||||
},
|
||||
dialog: {
|
||||
cancel: '取 消',
|
||||
confirm: '确 定'
|
||||
},
|
||||
export: {
|
||||
title: '导出',
|
||||
filename: '导出文件名称',
|
||||
include: '是否包含主题、结构等配置数据',
|
||||
dedicatedFile: '专有文件',
|
||||
jsonFile: 'json文件',
|
||||
imageFile: '图片文件',
|
||||
svgFile: 'svg文件',
|
||||
pdfFile: 'pdf文件',
|
||||
tips: 'tips：.smm和.json文件可用于导入'
|
||||
},
|
||||
fullscreen: {
|
||||
fullscreen: '全屏'
|
||||
},
|
||||
import: {
|
||||
title: '导入',
|
||||
selectFile: '选取文件',
|
||||
supportFile: '支持.smm、.json、.xmind、.xlsx文件'
|
||||
},
|
||||
navigatorToolbar: {
|
||||
openMiniMap: '开启小地图',
|
||||
readonly: '只读模式',
|
||||
edit: '编辑模式'
|
||||
},
|
||||
nodeHyperlink: {
|
||||
title: '超链接',
|
||||
link: '链接',
|
||||
name: '名称'
|
||||
},
|
||||
nodeIcon: {
|
||||
title: '图标'
|
||||
},
|
||||
nodeImage: {
|
||||
title: '图片',
|
||||
imgTitle: '图片标题'
|
||||
},
|
||||
nodeNote: {
|
||||
title: '备注'
|
||||
},
|
||||
nodeTag: {
|
||||
title: '标签',
|
||||
addTip: '请按回车键添加'
|
||||
},
|
||||
outline: {
|
||||
title: '大纲'
|
||||
},
|
||||
scale: {
|
||||
zoomIn: '放大',
|
||||
zoomOut: '缩小'
|
||||
},
|
||||
shortcutKey: {
|
||||
title: '快捷键'
|
||||
},
|
||||
strusture: {
|
||||
title: '结构'
|
||||
},
|
||||
style: {
|
||||
title: '节点样式',
|
||||
normal: '常态',
|
||||
active: '选中状态',
|
||||
text: '文字',
|
||||
fontFamily: '字体',
|
||||
fontSize: '字号',
|
||||
lineHeight: '行高',
|
||||
color: '颜色',
|
||||
addFontWeight: '加粗',
|
||||
italic: '斜体',
|
||||
textDecoration: '划线',
|
||||
underline: '下划线',
|
||||
lineThrough: '中划线',
|
||||
overline: '上划线',
|
||||
border: '边框',
|
||||
style: '样式',
|
||||
width: '宽度',
|
||||
borderRadius: '圆角',
|
||||
background: '背景',
|
||||
shape: '形状',
|
||||
line: '线条',
|
||||
nodePadding: '节点内边距',
|
||||
horizontal: '水平',
|
||||
vertical: '垂直'
|
||||
},
|
||||
theme: {
|
||||
title: '主题'
|
||||
},
|
||||
toolbar: {
|
||||
undo: '回退',
|
||||
redo: '前进',
|
||||
insertSiblingNode: '插入同级节点',
|
||||
insertChildNode: '插入子节点',
|
||||
deleteNode: '删除节点',
|
||||
image: '图片',
|
||||
icon: '图标',
|
||||
link: '超链接',
|
||||
note: '备注',
|
||||
tag: '标签',
|
||||
summary: '概要',
|
||||
displayOutline: '显示大纲',
|
||||
baseStyle: '基础样式',
|
||||
theme: '主题',
|
||||
strusture: '结构',
|
||||
newFile: '新建',
|
||||
openFile: '打开',
|
||||
saveAs: '另存为',
|
||||
import: '导入',
|
||||
export: '导出',
|
||||
shortcutKey: '快捷键'
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import 'element-ui/lib/theme-chalk/index.css'
|
||||
import '@/assets/icon-font/iconfont.css'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import VueViewer from 'v-viewer'
|
||||
import i18n from './i18n'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$bus = new Vue()
|
||||
@@ -16,5 +17,6 @@ Vue.use(VueViewer)
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router,
|
||||
store
|
||||
store,
|
||||
i18n
|
||||
}).$mount('#app')
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Sidebar ref="sidebar" title="基础样式">
|
||||
<Sidebar ref="sidebar" :title="$t('baseStyle.title')">
|
||||
<div class="sidebarContent" v-if="data">
|
||||
<!-- 背景 -->
|
||||
<div class="title noTop">背景</div>
|
||||
<div class="title noTop">{{ $t('baseStyle.background') }}</div>
|
||||
<div class="row">
|
||||
<el-tabs class="tab" v-model="activeTab">
|
||||
<el-tab-pane label="颜色" name="color">
|
||||
<el-tab-pane :label="$t('baseStyle.color')" name="color">
|
||||
<Color
|
||||
:color="style.backgroundColor"
|
||||
@change="
|
||||
@@ -15,7 +15,7 @@
|
||||
"
|
||||
></Color>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图片" name="image">
|
||||
<el-tab-pane :label="$t('baseStyle.image')" name="image">
|
||||
<ImgUpload
|
||||
class="imgUpload"
|
||||
v-model="style.backgroundImage"
|
||||
@@ -26,7 +26,7 @@
|
||||
"
|
||||
></ImgUpload>
|
||||
<div class="rowItem">
|
||||
<span class="name">图片重复</span>
|
||||
<span class="name">{{ $t('baseStyle.imageRepeat') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 120px"
|
||||
@@ -51,10 +51,10 @@
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!-- 连线 -->
|
||||
<div class="title noTop">连线</div>
|
||||
<div class="title noTop">{{ $t('baseStyle.line') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">颜色</span>
|
||||
<span class="name">{{ $t('baseStyle.color') }}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover
|
||||
@@ -72,7 +72,7 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">粗细</span>
|
||||
<span class="name">{{ $t('baseStyle.width') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -96,7 +96,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">风格</span>
|
||||
<span class="name">{{ $t('baseStyle.style') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -119,10 +119,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 概要连线 -->
|
||||
<div class="title noTop">概要的连线</div>
|
||||
<div class="title noTop">{{ $t('baseStyle.lineOfOutline') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">颜色</span>
|
||||
<span class="name">{{ $t('baseStyle.color') }}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover2
|
||||
@@ -140,7 +140,7 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">粗细</span>
|
||||
<span class="name">{{ $t('baseStyle.width') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -163,10 +163,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内边距 -->
|
||||
<div class="title noTop">节点内边距</div>
|
||||
<div class="title noTop">{{ $t('baseStyle.nodePadding') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">水平</span>
|
||||
<span class="name">{{ $t('baseStyle.horizontal') }}</span>
|
||||
<el-slider
|
||||
style="width: 200px"
|
||||
v-model="style.paddingX"
|
||||
@@ -180,7 +180,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">垂直</span>
|
||||
<span class="name">{{ $t('baseStyle.vertical') }}</span>
|
||||
<el-slider
|
||||
style="width: 200px"
|
||||
v-model="style.paddingY"
|
||||
@@ -193,10 +193,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片 -->
|
||||
<div class="title noTop">图片</div>
|
||||
<div class="title noTop">{{ $t('baseStyle.image') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">显示的最大宽度</span>
|
||||
<span class="name">{{ $t('baseStyle.maximumWidth') }}</span>
|
||||
<el-slider
|
||||
style="width: 140px"
|
||||
v-model="style.imgMaxWidth"
|
||||
@@ -212,7 +212,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">显示的最大高度</span>
|
||||
<span class="name">{{ $t('baseStyle.maximumHeight') }}</span>
|
||||
<el-slider
|
||||
style="width: 140px"
|
||||
v-model="style.imgMaxHeight"
|
||||
@@ -227,10 +227,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图标 -->
|
||||
<div class="title noTop">图标</div>
|
||||
<div class="title noTop">{{ $t('baseStyle.icon') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">大小</span>
|
||||
<span class="name">{{ $t('baseStyle.size') }}</span>
|
||||
<el-slider
|
||||
style="width: 200px"
|
||||
v-model="style.iconSize"
|
||||
@@ -245,18 +245,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 二级节点外边距 -->
|
||||
<div class="title noTop">节点外边距</div>
|
||||
<div class="title noTop">{{ $t('baseStyle.nodeMargin') }}</div>
|
||||
<div class="row column">
|
||||
<el-tabs
|
||||
class="tab"
|
||||
v-model="marginActiveTab"
|
||||
@tab-click="initMarginStyle"
|
||||
>
|
||||
<el-tab-pane label="二级节点" name="second"></el-tab-pane>
|
||||
<el-tab-pane label="三级及以下节点" name="node"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="$t('baseStyle.level2Node')"
|
||||
name="second"
|
||||
></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="$t('baseStyle.belowLevel2Node')"
|
||||
name="node"
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="rowItem">
|
||||
<span class="name">水平</span>
|
||||
<span class="name">{{ $t('baseStyle.horizontal') }}</span>
|
||||
<el-slider
|
||||
:max="200"
|
||||
style="width: 200px"
|
||||
@@ -269,7 +275,7 @@
|
||||
></el-slider>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">垂直</span>
|
||||
<span class="name">{{ $t('baseStyle.vertical') }}</span>
|
||||
<el-slider
|
||||
:max="200"
|
||||
style="width: 200px"
|
||||
@@ -317,8 +323,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
lineWidthList,
|
||||
lineStyleList,
|
||||
backgroundRepeatList,
|
||||
activeTab: 'color',
|
||||
marginActiveTab: 'second',
|
||||
style: {
|
||||
@@ -340,6 +344,14 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lineStyleList() {
|
||||
return lineStyleList[this.$i18n.locale] || lineStyleList.zh
|
||||
},
|
||||
backgroundRepeatList() {
|
||||
return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('showBaseStyle', () => {
|
||||
this.$refs.sidebar.show = false
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
></span>
|
||||
</div>
|
||||
<div class="moreColor">
|
||||
<span>更多颜色</span>
|
||||
<span>{{ $t('color.moreColor') }}</span>
|
||||
<el-color-picker
|
||||
size="mini"
|
||||
v-model="selectColor"
|
||||
|
||||
@@ -10,11 +10,11 @@
|
||||
@click="exec('INSERT_NODE', insertNodeBtnDisabled)"
|
||||
:class="{ disabled: insertNodeBtnDisabled }"
|
||||
>
|
||||
插入同级节点
|
||||
{{ $t('contextmenu.insertSiblingNode') }}
|
||||
<span class="desc">Enter</span>
|
||||
</div>
|
||||
<div class="item" @click="exec('INSERT_CHILD_NODE')">
|
||||
插入子级节点
|
||||
{{ $t('contextmenu.insertChildNode') }}
|
||||
<span class="desc">Tab</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -22,7 +22,7 @@
|
||||
@click="exec('ADD_GENERALIZATION')"
|
||||
:class="{ disabled: insertNodeBtnDisabled }"
|
||||
>
|
||||
插入概要
|
||||
{{ $t('contextmenu.insertSummary') }}
|
||||
<span class="desc">Ctrl + S</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -30,7 +30,7 @@
|
||||
@click="exec('UP_NODE')"
|
||||
:class="{ disabled: upNodeBtnDisabled }"
|
||||
>
|
||||
上移节点
|
||||
{{ $t('contextmenu.moveUpNode') }}
|
||||
<span class="desc">Ctrl + ↑</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -38,19 +38,19 @@
|
||||
@click="exec('DOWN_NODE')"
|
||||
:class="{ disabled: downNodeBtnDisabled }"
|
||||
>
|
||||
下移节点
|
||||
{{ $t('contextmenu.moveDownNode') }}
|
||||
<span class="desc">Ctrl + ↓</span>
|
||||
</div>
|
||||
<div class="item danger" @click="exec('REMOVE_NODE')">
|
||||
删除节点
|
||||
{{ $t('contextmenu.deleteNode') }}
|
||||
<span class="desc">Delete</span>
|
||||
</div>
|
||||
<div class="item" @click="exec('COPY_NODE')">
|
||||
复制节点
|
||||
{{ $t('contextmenu.copyNode') }}
|
||||
<span class="desc">Ctrl + C</span>
|
||||
</div>
|
||||
<div class="item" @click="exec('CUT_NODE')">
|
||||
剪切节点
|
||||
{{ $t('contextmenu.cutNode') }}
|
||||
<span class="desc">Ctrl + X</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -58,16 +58,22 @@
|
||||
:class="{ disabled: copyData === null }"
|
||||
@click="exec('PASTE_NODE')"
|
||||
>
|
||||
粘贴节点
|
||||
{{ $t('contextmenu.pasteNode') }}
|
||||
<span class="desc">Ctrl + V</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="type === 'svg'">
|
||||
<div class="item" @click="exec('RETURN_CENTER')">回到中心</div>
|
||||
<div class="item" @click="exec('EXPAND_ALL')">展开所有</div>
|
||||
<div class="item" @click="exec('UNEXPAND_ALL')">收起所有</div>
|
||||
<div class="item" @click="exec('RETURN_CENTER')">
|
||||
{{ $t('contextmenu.backCenter') }}
|
||||
</div>
|
||||
<div class="item" @click="exec('EXPAND_ALL')">
|
||||
{{ $t('contextmenu.expandAll') }}
|
||||
</div>
|
||||
<div class="item" @click="exec('UNEXPAND_ALL')">
|
||||
{{ $t('contextmenu.unExpandAll') }}
|
||||
</div>
|
||||
<div class="item">
|
||||
展开到
|
||||
{{ $t('contextmenu.expandTo') }}
|
||||
<div class="subItems listBox">
|
||||
<div
|
||||
class="item"
|
||||
@@ -80,7 +86,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" @click="exec('RESET_LAYOUT')">
|
||||
一键整理布局
|
||||
{{ $t('contextmenu.arrangeLayout') }}
|
||||
<span class="desc">Ctrl + L</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -110,18 +116,20 @@ export default {
|
||||
type: '',
|
||||
isMousedown: false,
|
||||
mosuedownX: 0,
|
||||
mosuedownY: 0,
|
||||
expandList: [
|
||||
'一级主题',
|
||||
'二级主题',
|
||||
'三级主题',
|
||||
'四级主题',
|
||||
'五级主题',
|
||||
'六级主题'
|
||||
]
|
||||
mosuedownY: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
expandList() {
|
||||
return [
|
||||
this.$t('contextmenu.level1'),
|
||||
this.$t('contextmenu.level2'),
|
||||
this.$t('contextmenu.level3'),
|
||||
this.$t('contextmenu.level4'),
|
||||
this.$t('contextmenu.level5'),
|
||||
this.$t('contextmenu.level6')
|
||||
]
|
||||
},
|
||||
insertNodeBtnDisabled() {
|
||||
return !this.node || this.node.isRoot
|
||||
},
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="countContainer">
|
||||
<div class="item">
|
||||
<span class="name">字数</span>
|
||||
<span class="name">{{ $t('count.words') }}</span>
|
||||
<span class="value">{{ words }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="name">节点</span>
|
||||
<span class="name">{{ $t('count.nodes') }}</span>
|
||||
<span class="value">{{ num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeDialog"
|
||||
title="导出"
|
||||
:title="$t('export.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="700px"
|
||||
>
|
||||
<div>
|
||||
<div class="nameInputBox">
|
||||
<span class="name">导出文件名称</span>
|
||||
<span class="name">{{ $t('export.filename') }}</span>
|
||||
<el-input
|
||||
style="width: 300px"
|
||||
v-model="fileName"
|
||||
@@ -17,21 +17,33 @@
|
||||
v-show="['smm', 'json'].includes(exportType)"
|
||||
v-model="widthConfig"
|
||||
style="margin-left: 12px"
|
||||
>是否包含主题、结构等配置数据</el-checkbox
|
||||
>{{ $t('export.include') }}</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<el-radio-group v-model="exportType" size="mini">
|
||||
<el-radio-button label="smm">专有文件（.smm）</el-radio-button>
|
||||
<el-radio-button label="json">json文件（.json）</el-radio-button>
|
||||
<el-radio-button label="png">图片文件（.png）</el-radio-button>
|
||||
<el-radio-button label="svg">svg文件（.svg）</el-radio-button>
|
||||
<el-radio-button label="pdf">pdf文件（.pdf）</el-radio-button>
|
||||
<el-radio-button label="smm"
|
||||
>{{ $t('export.dedicatedFile') }}（.smm）</el-radio-button
|
||||
>
|
||||
<el-radio-button label="json"
|
||||
>{{ $t('export.jsonFile') }}（.json）</el-radio-button
|
||||
>
|
||||
<el-radio-button label="png"
|
||||
>{{ $t('export.imageFile') }}（.png）</el-radio-button
|
||||
>
|
||||
<el-radio-button label="svg"
|
||||
>{{ $t('export.svgFile') }}（.svg）</el-radio-button
|
||||
>
|
||||
<el-radio-button label="pdf"
|
||||
>{{ $t('export.pdfFile') }}（.pdf）</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
<div class="tip">tips：.smm和.json文件可用于导入</div>
|
||||
<div class="tip">{{ $t('export.tips') }}</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="fullscreenContainer">
|
||||
<el-tooltip class="item" effect="dark" content="全屏" placement="top">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('fullscreen.fullscreen')"
|
||||
placement="top"
|
||||
>
|
||||
<div class="btn iconfont iconquanping" @click="toFullscreen"></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeDialog"
|
||||
title="导入"
|
||||
:title="$t('import.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="300px"
|
||||
>
|
||||
@@ -15,14 +15,18 @@
|
||||
:limit="1"
|
||||
:on-exceed="onExceed"
|
||||
>
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
<el-button slot="trigger" size="small" type="primary">{{
|
||||
$t('import.selectFile')
|
||||
}}</el-button>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
支持.smm、.json、.xmind、.xlsx文件
|
||||
{{ $t('import.supportFile') }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,15 +1,30 @@
|
||||
<template>
|
||||
<div class="navigatorContainer">
|
||||
<div class="item">
|
||||
<el-checkbox v-model="openMiniMap" @change="toggleMiniMap"
|
||||
>开启小地图</el-checkbox
|
||||
<el-select
|
||||
v-model="lang"
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
@change="onLangChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in langList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-checkbox v-model="openMiniMap" @change="toggleMiniMap">{{
|
||||
$t('navigatorToolbar.openMiniMap')
|
||||
}}</el-checkbox>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-switch
|
||||
v-model="isReadonly"
|
||||
active-text="只读模式"
|
||||
inactive-text="编辑模式"
|
||||
:active-text="$t('navigatorToolbar.readonly')"
|
||||
:inactive-text="$t('navigatorToolbar.edit')"
|
||||
@change="readonlyChange"
|
||||
>
|
||||
</el-switch>
|
||||
@@ -26,6 +41,9 @@
|
||||
<script>
|
||||
import Scale from './Scale'
|
||||
import Fullscreen from './Fullscreen'
|
||||
import { langList } from '@/config'
|
||||
import i18n from '@/i18n'
|
||||
import { storeLang, getLang } from '@/api'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@@ -45,6 +63,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
langList,
|
||||
lang: getLang(),
|
||||
isReadonly: false,
|
||||
openMiniMap: false
|
||||
}
|
||||
@@ -59,6 +79,11 @@ export default {
|
||||
|
||||
toggleMiniMap(show) {
|
||||
this.$bus.$emit('toggle_mini_map', show)
|
||||
},
|
||||
|
||||
onLangChange(lang) {
|
||||
i18n.locale = lang
|
||||
storeLang(lang)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeDialog"
|
||||
title="超链接"
|
||||
:title="$t('nodeHyperlink.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
>
|
||||
<div class="item">
|
||||
<span class="name">链接</span>
|
||||
<span class="name">{{ $t('nodeHyperlink.link') }}</span>
|
||||
<el-input
|
||||
v-model="link"
|
||||
size="mini"
|
||||
@@ -14,12 +14,14 @@
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="name">名称</span>
|
||||
<span class="name">{{ $t('nodeHyperlink.name') }}</span>
|
||||
<el-input v-model="linkTitle" size="mini"></el-input>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeDialog"
|
||||
title="图标"
|
||||
:title="$t('nodeIcon.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
>
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeDialog"
|
||||
title="图片"
|
||||
:title="$t('nodeImage.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
>
|
||||
<ImgUpload ref="ImgUpload" v-model="img"></ImgUpload>
|
||||
<div class="imgTitleBox">
|
||||
<span class="title">图片标题</span>
|
||||
<span class="title">{{ $t('nodeImage.imgTitle') }}</span>
|
||||
<el-input v-model="imgTitle" size="mini"></el-input>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeDialog"
|
||||
title="备注"
|
||||
:title="$t('nodeNote.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
>
|
||||
@@ -15,8 +15,10 @@
|
||||
<div class="noteEditor" ref="noteEditor"></div>
|
||||
<!-- <div class="tip">换行请使用：Enter+Shift</div> -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="nodeDialog"
|
||||
title="标签"
|
||||
:title="$t('nodeTag.title')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500"
|
||||
>
|
||||
@@ -9,7 +9,7 @@
|
||||
v-model="tag"
|
||||
@keyup.native.enter="add"
|
||||
:disabled="tagArr.length >= max"
|
||||
placeholder="请按回车键添加"
|
||||
:placeholder="$t('nodeTag.addTip')"
|
||||
>
|
||||
</el-input>
|
||||
<div class="tagList">
|
||||
@@ -29,8 +29,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
<el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{
|
||||
$t('dialog.confirm')
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Sidebar ref="sidebar" title="大纲">
|
||||
<Sidebar ref="sidebar" :title="$t('outline.title')">
|
||||
<el-tree :data="data" :props="defaultProps" default-expand-all></el-tree>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,20 @@
|
||||
<template>
|
||||
<div class="scaleContainer">
|
||||
<el-tooltip class="item" effect="dark" content="缩小" placement="top">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('scale.zoomOut')"
|
||||
placement="top"
|
||||
>
|
||||
<div class="btn el-icon-minus" @click="narrow"></div>
|
||||
</el-tooltip>
|
||||
<div class="scaleInfo">{{ scaleNum }}%</div>
|
||||
<el-tooltip class="item" effect="dark" content="放大" placement="top">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('scale.zoomIn')"
|
||||
placement="top"
|
||||
>
|
||||
<div class="btn el-icon-plus" @click="enlarge"></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Sidebar ref="sidebar" title="快捷键">
|
||||
<Sidebar ref="sidebar" :title="$t('shortcutKey.title')">
|
||||
<div class="box">
|
||||
<div v-for="item in shortcutKeyList" :key="item.type">
|
||||
<div class="title">{{ item.type }}</div>
|
||||
@@ -34,8 +34,11 @@ export default {
|
||||
Sidebar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shortcutKeyList
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
shortcutKeyList() {
|
||||
return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Sidebar ref="sidebar" title="结构">
|
||||
<Sidebar ref="sidebar" :title="$t('strusture.title')">
|
||||
<div class="layoutList">
|
||||
<div
|
||||
class="layoutItem"
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<Sidebar ref="sidebar" title="节点样式">
|
||||
<Sidebar ref="sidebar" :title="$t('style.title')">
|
||||
<div class="styleBox">
|
||||
<el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick">
|
||||
<el-tab-pane label="常态" name="normal"></el-tab-pane>
|
||||
<el-tab-pane label="选中状态" name="active"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('style.normal')" name="normal"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('style.active')" name="active"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="sidebarContent" v-if="activeNodes.length > 0">
|
||||
<!-- 文字 -->
|
||||
<div class="title noTop">文字</div>
|
||||
<div class="title noTop">{{ $t('style.text') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">字体</span>
|
||||
<span class="name">{{ $t('style.fontFamily') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="style.fontFamily"
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">字号</span>
|
||||
<span class="name">{{ $t('style.fontSize') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -50,7 +50,7 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">行高</span>
|
||||
<span class="name">{{ $t('style.lineHeight') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -71,7 +71,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="btnGroup">
|
||||
<el-tooltip content="颜色" placement="bottom">
|
||||
<el-tooltip :content="$t('style.color')" placement="bottom">
|
||||
<div
|
||||
class="styleBtn"
|
||||
v-popover:popover
|
||||
@@ -84,7 +84,7 @@
|
||||
></span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="加粗" placement="bottom">
|
||||
<el-tooltip :content="$t('style.addFontWeight')" placement="bottom">
|
||||
<div
|
||||
class="styleBtn"
|
||||
:class="{
|
||||
@@ -96,7 +96,7 @@
|
||||
B
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="斜体" placement="bottom">
|
||||
<el-tooltip :content="$t('style.italic')" placement="bottom">
|
||||
<div
|
||||
class="styleBtn i"
|
||||
:class="{
|
||||
@@ -108,7 +108,10 @@
|
||||
I
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="划线" placement="bottom">
|
||||
<el-tooltip
|
||||
:content="$t('style.textDecoration')"
|
||||
placement="bottom"
|
||||
>
|
||||
<div
|
||||
class="styleBtn u"
|
||||
:style="{ textDecoration: style.textDecoration || 'none' }"
|
||||
@@ -138,17 +141,23 @@
|
||||
v-model="style.textDecoration"
|
||||
@change="update('textDecoration')"
|
||||
>
|
||||
<el-radio-button label="underline">下划线</el-radio-button>
|
||||
<el-radio-button label="line-through">中划线</el-radio-button>
|
||||
<el-radio-button label="overline">上划线</el-radio-button>
|
||||
<el-radio-button label="underline">{{
|
||||
$t('style.underline')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="line-through">{{
|
||||
$t('style.lineThrough')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="overline">{{
|
||||
$t('style.overline')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- 边框 -->
|
||||
<div class="title">边框</div>
|
||||
<div class="title">{{ $t('style.border') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">颜色</span>
|
||||
<span class="name">{{ $t('style.color') }}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover3
|
||||
@@ -168,7 +177,7 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">样式</span>
|
||||
<span class="name">{{ $t('style.style') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -189,7 +198,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">宽度</span>
|
||||
<span class="name">{{ $t('style.width') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -208,7 +217,7 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">圆角</span>
|
||||
<span class="name">{{ $t('style.borderRadius') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -228,10 +237,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 背景 -->
|
||||
<div class="title">背景</div>
|
||||
<div class="title">{{ $t('style.background') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">颜色</span>
|
||||
<span class="name">{{ $t('style.color') }}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover4
|
||||
@@ -249,10 +258,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 形状 -->
|
||||
<div class="title">形状</div>
|
||||
<div class="title">{{ $t('style.shape') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">形状</span>
|
||||
<span class="name">{{ $t('style.shape') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 120px"
|
||||
@@ -272,10 +281,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 线条 -->
|
||||
<div class="title">线条</div>
|
||||
<div class="title">{{ $t('style.line') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">颜色</span>
|
||||
<span class="name">{{ $t('style.color') }}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover5
|
||||
@@ -292,7 +301,7 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">样式</span>
|
||||
<span class="name">{{ $t('style.style') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -313,7 +322,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">宽度</span>
|
||||
<span class="name">{{ $t('style.width') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@@ -333,10 +342,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 节点内边距 -->
|
||||
<div class="title noTop">节点内边距</div>
|
||||
<div class="title noTop">{{ $t('style.nodePadding') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">水平</span>
|
||||
<span class="name">{{ $t('style.horizontal') }}</span>
|
||||
<el-slider
|
||||
style="width: 200px"
|
||||
v-model="style.paddingX"
|
||||
@@ -347,7 +356,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">垂直</span>
|
||||
<span class="name">{{ $t('style.vertical') }}</span>
|
||||
<el-slider
|
||||
style="width: 200px"
|
||||
v-model="style.paddingY"
|
||||
@@ -389,11 +398,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
supportActiveStyle,
|
||||
shapeList,
|
||||
fontFamilyList,
|
||||
|
||||
fontSizeList,
|
||||
borderWidthList,
|
||||
borderDasharrayList,
|
||||
|
||||
borderRadiusList,
|
||||
lineHeightList,
|
||||
activeNodes: [],
|
||||
@@ -420,6 +428,17 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fontFamilyList() {
|
||||
return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
|
||||
},
|
||||
borderDasharrayList() {
|
||||
return borderDasharrayList[this.$i18n.locale] || borderDasharrayList.zh
|
||||
},
|
||||
shapeList() {
|
||||
return shapeList[this.$i18n.locale] || shapeList.zh
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('node_active', (...args) => {
|
||||
if (this.$refs.sidebar) this.$refs.sidebar.show = false
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Sidebar ref="sidebar" title="主题">
|
||||
<Sidebar ref="sidebar" :title="$t('style.title')">
|
||||
<div class="themeList">
|
||||
<div
|
||||
class="themeItem"
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
@click="$bus.$emit('execCommand', 'BACK')"
|
||||
>
|
||||
<span class="icon iconfont iconhoutui-shi"></span>
|
||||
<span class="text">回退</span>
|
||||
<span class="text">{{ $t('toolbar.undo') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -21,7 +21,7 @@
|
||||
@click="$bus.$emit('execCommand', 'FORWARD')"
|
||||
>
|
||||
<span class="icon iconfont iconqianjin1"></span>
|
||||
<span class="text">前进</span>
|
||||
<span class="text">{{ $t('toolbar.redo') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -31,7 +31,7 @@
|
||||
@click="$bus.$emit('execCommand', 'INSERT_NODE')"
|
||||
>
|
||||
<span class="icon iconfont iconjiedian"></span>
|
||||
<span class="text">插入同级节点</span>
|
||||
<span class="text">{{ $t('toolbar.insertSiblingNode') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -41,7 +41,7 @@
|
||||
@click="$bus.$emit('execCommand', 'INSERT_CHILD_NODE')"
|
||||
>
|
||||
<span class="icon iconfont icontianjiazijiedian"></span>
|
||||
<span class="text">插入子节点</span>
|
||||
<span class="text">{{ $t('toolbar.insertChildNode') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -51,7 +51,7 @@
|
||||
@click="$bus.$emit('execCommand', 'REMOVE_NODE')"
|
||||
>
|
||||
<span class="icon iconfont iconshanchu"></span>
|
||||
<span class="text">删除节点</span>
|
||||
<span class="text">{{ $t('toolbar.deleteNode') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -61,7 +61,7 @@
|
||||
@click="$bus.$emit('showNodeImage')"
|
||||
>
|
||||
<span class="icon iconfont iconimage"></span>
|
||||
<span class="text">图片</span>
|
||||
<span class="text">{{ $t('toolbar.image') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -71,7 +71,7 @@
|
||||
@click="$bus.$emit('showNodeIcon')"
|
||||
>
|
||||
<span class="icon iconfont iconxiaolian"></span>
|
||||
<span class="text">图标</span>
|
||||
<span class="text">{{ $t('toolbar.icon') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -81,7 +81,7 @@
|
||||
@click="$bus.$emit('showNodeLink')"
|
||||
>
|
||||
<span class="icon iconfont iconchaolianjie"></span>
|
||||
<span class="text">超链接</span>
|
||||
<span class="text">{{ $t('toolbar.link') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -91,7 +91,7 @@
|
||||
@click="$bus.$emit('showNodeNote')"
|
||||
>
|
||||
<span class="icon iconfont iconflow-Mark"></span>
|
||||
<span class="text">备注</span>
|
||||
<span class="text">{{ $t('toolbar.note') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -101,7 +101,7 @@
|
||||
@click="$bus.$emit('showNodeTag')"
|
||||
>
|
||||
<span class="icon iconfont iconbiaoqian"></span>
|
||||
<span class="text">标签</span>
|
||||
<span class="text">{{ $t('toolbar.tag') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="toolbarBtn"
|
||||
@@ -111,53 +111,53 @@
|
||||
@click="$bus.$emit('execCommand', 'ADD_GENERALIZATION')"
|
||||
>
|
||||
<span class="icon iconfont icongaikuozonglan"></span>
|
||||
<span class="text">概要</span>
|
||||
<span class="text">{{ $t('toolbar.summary') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 通用操作 -->
|
||||
<div class="toolbarBlock">
|
||||
<div class="toolbarBtn" @click="$bus.$emit('showOutline')">
|
||||
<span class="icon iconfont iconfuhao-dagangshu"></span>
|
||||
<span class="text">显示大纲</span>
|
||||
<span class="text">{{ $t('toolbar.displayOutline') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="$bus.$emit('showBaseStyle')">
|
||||
<span class="icon iconfont iconyangshi"></span>
|
||||
<span class="text">基础样式</span>
|
||||
<span class="text">{{ $t('toolbar.baseStyle') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="$bus.$emit('showTheme')">
|
||||
<span class="icon iconfont iconjingzi"></span>
|
||||
<span class="text">主题</span>
|
||||
<span class="text">{{ $t('toolbar.theme') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="$bus.$emit('showStructure')">
|
||||
<span class="icon iconfont iconjiegou"></span>
|
||||
<span class="text">结构</span>
|
||||
<span class="text">{{ $t('toolbar.strusture') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导出 -->
|
||||
<div class="toolbarBlock">
|
||||
<div class="toolbarBtn" @click="createNewLocalFile">
|
||||
<span class="icon iconfont iconxinjian"></span>
|
||||
<span class="text">新建</span>
|
||||
<span class="text">{{ $t('toolbar.newFile') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="openLocalFile">
|
||||
<span class="icon iconfont icondakai"></span>
|
||||
<span class="text">打开</span>
|
||||
<span class="text">{{ $t('toolbar.openFile') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="saveLocalFile">
|
||||
<span class="icon iconfont iconlingcunwei"></span>
|
||||
<span class="text">另存为</span>
|
||||
<span class="text">{{ $t('toolbar.saveAs') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="$bus.$emit('showImport')">
|
||||
<span class="icon iconfont icondaoru"></span>
|
||||
<span class="text">导入</span>
|
||||
<span class="text">{{ $t('toolbar.import') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="$bus.$emit('showExport')">
|
||||
<span class="icon iconfont iconexport"></span>
|
||||
<span class="text">导出</span>
|
||||
<span class="text">{{ $t('toolbar.export') }}</span>
|
||||
</div>
|
||||
<div class="toolbarBtn" @click="$bus.$emit('showShortcutKey')">
|
||||
<span class="icon iconfont iconjianpan"></span>
|
||||
<span class="text">快捷键</span>
|
||||
<span class="text">{{ $t('toolbar.shortcutKey') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,11 +32,11 @@ export const fullScreen = element => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林25
|
||||
* @Date: 2022-10-24 14:16:18
|
||||
* @Desc: 文件转buffer
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林25
|
||||
* @Date: 2022-10-24 14:16:18
|
||||
* @Desc: 文件转buffer
|
||||
*/
|
||||
export const fileToBuffer = file => {
|
||||
return new Promise(r => {
|
||||
|
||||
Reference in New Issue
Block a user