Skip to content

C
coopwire-mindMap
Commit 340442d2 authored by 孙灵跃 Leon Sun's avatar 孙灵跃 Leon Sun
Browse files
Options

Merge branch 'dev-sly' into 'master' 

Dev sly

See merge request !1
parents f6142420 567a1975
Hide whitespace changes
Inline Side-by-side
Showing with 941 additions and 118 deletions
package.json
View file @ 340442d2
......@@ -5,12 +5,7 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"buildLibrary": "vue-cli-service build --mode library --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist && esbuild ../simple-mind-map/full.js --bundle --external:buffer --format=esm --outfile=../simple-mind-map/dist/simpleMindMap.esm.js && esbuild ../simple-mind-map/full.js --bundle --minify --external:buffer --format=esm --outfile=../simple-mind-map/dist/simpleMindMap.esm.min.js",
"format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
"buildDoc": "node ./scripts/buildDoc.js",
"autoBuildDoc": "node ./scripts/autoBuildDoc.js",
"createNodeImageList": "node ./scripts/createNodeImageList.js"
"lint": "vue-cli-service lint"
},
"dependencies": {
"@toast-ui/editor": "^3.1.5",
......
public/index.html
View file @ 340442d2
......@@ -8,9 +8,11 @@
<title>思绪思维导图</title>
<script>
// 自定义静态资源的路径
window.externalPublicPath = './'
// 接管应用
window.takeOverApp = false
window.externalPublicPath = '/mindmap/'
if(typeof window.takeOverApp !== 'boolean'){
// 如果是本地调试的话, 就不需要接管应用
window.takeOverApp = false
}
</script>
</head>
<body>
......@@ -20,7 +22,10 @@
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
const getDataFromBackend = () => {
// 如果外部没有传入思维导图的方法,则使用默认数据
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
......@@ -45,33 +50,37 @@
}, 200)
})
}
const setTakeOverAppMethods = (data) => {
window.takeOverAppMethods = {}
// 获取思维导图数据的函数
window.takeOverAppMethods.getMindMapData = () => {
return data.mindMapData
}
// 保存思维导图数据的函数
window.takeOverAppMethods.saveMindMapData = (data) => {
console.log(data)
window.takeOverAppMethods = window.takeOverAppMethods || {}
if(!window.takeOverAppMethods['getMindMapData']){
window.takeOverAppMethods['getMindMapData'] = ()=>{
return data.mindMapData
}
}
if(!window.takeOverAppMethods['saveManualMindMapData']){
window.takeOverAppMethods['saveManualMindMapData'] = void 0
}
if(!window.takeOverAppMethods['manualCancel']){
window.takeOverAppMethods['manualCancel'] = ()=>void 0
}
// 获取语言的函数
window.takeOverAppMethods.getLanguage = () => {
window.takeOverAppMethods['saveMindMapData'] = ()=>{
}
window.takeOverAppMethods['getLanguage'] = ()=>{
return data.lang
}
// 保存语言的函数
window.takeOverAppMethods.saveLanguage = (lang) => {
console.log(lang)
window.takeOverAppMethods['saveLanguage'] = ()=>{
}
// 获取本地配置的函数
window.takeOverAppMethods.getLocalConfig = () => {
window.takeOverAppMethods['getLocalConfig'] = ()=>{
return data.localConfig
}
// 保存本地配置的函数
window.takeOverAppMethods.saveLocalConfig = (config) => {
console.log(config)
window.takeOverAppMethods['saveLocalConfig'] = ()=>{
}
}
window.onload = async () => {
if (!window.takeOverApp) return
// 请求数据
......@@ -79,10 +88,9 @@
// 设置全局的方法
setTakeOverAppMethods(data)
// 思维导图实例创建完成事件
window.$bus.$on('app_inited', (mindMap) => {
console.log(mindMap)
})
// 可以通过window.$bus.$on()来监听应用的一些事件
// window.$bus.$on('app_inited', (mindMap) => {
// console.log('思维导图实例创建完成事件',mindMap)
// })
// 实例化页面
window.initApp()
}
......
src/api/index.js
View file @ 340442d2
......@@ -8,11 +8,7 @@ const SIMPLE_MIND_MAP_LOCAL_CONFIG = 'SIMPLE_MIND_MAP_LOCAL_CONFIG'
let mindMapData = null
/**
* @Author: 王林
* @Date: 2021-08-02 22:36:48
* @Desc: 克隆思维导图数据，去除激活状态
*/
const copyMindMapTreeData = (tree, root) => {
tree.data = simpleDeepClone(root.data)
// tree.data.isActive = false
......@@ -25,11 +21,7 @@ const copyMindMapTreeData = (tree, root) => {
return tree
}
/**
* @Author: 王林
* @Date: 2021-08-01 10:10:49
* @Desc: 获取缓存的思维导图数据
*/
export const getData = () => {
if (window.takeOverApp) {
mindMapData = window.takeOverAppMethods.getMindMapData()
......@@ -47,11 +39,7 @@ export const getData = () => {
}
}
/**
* @Author: 王林
* @Date: 2021-08-01 10:14:28
* @Desc: 存储思维导图数据
*/
export const storeData = data => {
try {
let originData = null
......@@ -74,11 +62,7 @@ export const storeData = data => {
}
}
/**
* @Author: 王林
* @Date: 2021-08-01 10:24:56
* @Desc: 存储思维导图配置数据
*/
export const storeConfig = config => {
try {
let originData = null
......@@ -104,12 +88,26 @@ export const storeConfig = config => {
}
}
/**
* javascript comment
* @Author: 王林
* @Date: 2022-11-05 14:36:50
* @Desc: 存储语言
*/
export const manualSaveConfig = config=>{
try {
config.data = Object.assign({}, mindMapData, config.data)
if(window.takeOverAppMethods?.saveManualMindMapData){
window.takeOverAppMethods.saveManualMindMapData(config)
}
} catch (error) {
console.log(error)
}
}
export const manualCancel= ()=>{
if(window.takeOverAppMethods?.manualCancel){
window.takeOverAppMethods.manualCancel()
}
}
export const storeLang = lang => {
if (window.takeOverApp) {
window.takeOverAppMethods.saveLanguage(lang)
......@@ -118,12 +116,7 @@ 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 = () => {
if (window.takeOverApp) {
return window.takeOverAppMethods.getLanguage() || 'zh'
......@@ -136,12 +129,7 @@ export const getLang = () => {
return 'zh'
}
/**
* javascript comment
* @Author: 王林25
* @Date: 2022-11-14 18:57:31
* @Desc: 存储本地配置
*/
export const storeLocalConfig = config => {
if (window.takeOverApp) {
return window.takeOverAppMethods.saveLocalConfig(config)
......@@ -149,12 +137,7 @@ export const storeLocalConfig = config => {
localStorage.setItem(SIMPLE_MIND_MAP_LOCAL_CONFIG, JSON.stringify(config))
}
/**
* javascript comment
* @Author: 王林25
* @Date: 2022-11-14 18:57:37
* @Desc: 获取本地配置
*/
export const getLocalConfig = () => {
if (window.takeOverApp) {
return window.takeOverAppMethods.getLocalConfig()
......
src/assets/coopwireIconfont/demo.css 0 → 100644
View file @ 340442d2
/* 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;
}
src/assets/coopwireIconfont/demo_index.html 0 → 100644
View file @ 340442d2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<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>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</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=4429628" 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 mindIconfont">&#xe84b;</span>
<div class="name">关闭</div>
<div class="code-name">&amp;#xe84b;</div>
</li>
<li class="dib">
<span class="icon mindIconfont">&#xe6e7;</span>
<div class="name">保存</div>
<div class="code-name">&amp;#xe6e7;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'mindIconfont';
src: url('iconfont.woff2?t=1706759297622') format('woff2'),
url('iconfont.woff?t=1706759297622') format('woff'),
url('iconfont.ttf?t=1706759297622') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.mindIconfont {
font-family: "mindIconfont" !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="mindIconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"mindIconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon mindIconfont mind-iconguanbi1"></span>
<div class="name">
关闭
</div>
<div class="code-name">.mind-iconguanbi1
</div>
</li>
<li class="dib">
<span class="icon mindIconfont mind-iconbaocun"></span>
<div class="name">
保存
</div>
<div class="code-name">.mind-iconbaocun
</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>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</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="mindIconfont mind-iconxxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
mindIconfont" 是你项目下的 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="#mind-iconguanbi1"></use>
</svg>
<div class="name">关闭</div>
<div class="code-name">#mind-iconguanbi1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#mind-iconbaocun"></use>
</svg>
<div class="name">保存</div>
<div class="code-name">#mind-iconbaocun</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>
src/assets/coopwireIconfont/iconfont.css 0 → 100644
View file @ 340442d2
@font-face {
font-family: "mindIconfont"; /* Project id 4429628 */
src: url('iconfont.woff2?t=1706759297622') format('woff2'),
url('iconfont.woff?t=1706759297622') format('woff'),
url('iconfont.ttf?t=1706759297622') format('truetype');
}
.mindIconfont {
font-family: "mindIconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mind-iconguanbi1:before {
content: "\e84b";
}
.mind-iconbaocun:before {
content: "\e6e7";
}
src/assets/coopwireIconfont/iconfont.js 0 → 100644
View file @ 340442d2
window._iconfont_svg_string_4429628='<svg><symbol id="mind-iconguanbi1" viewBox="0 0 1024 1024"><path d="M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448S64 759.424 64 512 264.576 64 512 64z m0 64c-212.08 0-384 171.92-384 384s171.92 384 384 384 384-171.92 384-384-171.92-384-384-384zM365.548 320l147.784 147.78 146.08-146.076 45.256 45.256-146.08 146.076 146.372 146.376-45.256 45.256-146.372-146.376-148.08 148.08L320 661.116l148.076-148.08-147.78-147.78L365.548 320z" fill="#23324A" ></path></symbol><symbol id="mind-iconbaocun" viewBox="0 0 1024 1024"><path d="M724.492 64L928 251.452V960H96V64h628.492zM256 128H160v768h96V448h512v448h96V279.512L699.508 128H692v180H256V128z m448 384H320v384h384v-384z m-76 224v64H396v-64h232z m0-144v64H396v-64h232z m0-464H320v116h308V128z" fill="#262626" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,d,c,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4429628,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(d=i,c=n.document,s=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,l())})}function l(){s||(s=!0,d())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
\ No newline at end of file
src/assets/coopwireIconfont/iconfont.json 0 → 100644
View file @ 340442d2
{
"id": "4429628",
"name": "my-test",
"font_family": "mindIconfont",
"css_prefix_text": "mind-icon",
"description": "",
"glyphs": [
{
"icon_id": "33539583",
"name": "关闭",
"font_class": "guanbi1",
"unicode": "e84b",
"unicode_decimal": 59467
},
{
"icon_id": "25940518",
"name": "保存",
"font_class": "baocun",
"unicode": "e6e7",
"unicode_decimal": 59111
}
]
}
src/config/zh.js
View file @ 340442d2
......@@ -475,11 +475,11 @@ export const sidebarTriggerList = [
value: 'baseStyle',
icon: 'iconyangshi'
},
{
name: '主题',
value: 'theme',
icon: 'iconjingzi'
},
// {
// name: '主题',
// value: 'theme',
// icon: 'iconjingzi'
// },
{
name: '结构',
value: 'structure',
......
src/lang/en_us.js
View file @ 340442d2
......@@ -244,7 +244,10 @@ export default {
fileContentError: 'File content error',
fileOpenFailed: 'File open failed',
defaultFileName: 'Mind map',
creatingTip: 'Creating file'
creatingTip: 'Creating file',
save: 'Save',
saveAndClose: 'Save and Close',
close:'Close'
},
edit: {
newFeatureNoticeTitle: 'New feature reminder',
......
src/lang/zh_cn.js
View file @ 340442d2
......@@ -240,7 +240,10 @@ export default {
fileContentError: '文件内容有误',
fileOpenFailed: '文件打开失败',
defaultFileName: '思维导图',
creatingTip: '正在创建文件'
creatingTip: '正在创建文件',
save:'保存',
close:'关闭',
saveAndClose: '保存并关闭'
},
edit: {
newFeatureNoticeTitle: '新特性提醒',
......
src/main.js
View file @ 340442d2
......@@ -4,7 +4,11 @@ import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/icon-font/iconfont.css'
import '@/assets/coopwireIconfont/iconfont.css'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import i18n from './i18n'
......
src/pages/Edit/components/Edit.vue
View file @ 340442d2
......@@ -57,7 +57,7 @@ import ShortcutKey from './ShortcutKey'
import Contextmenu from './Contextmenu'
import RichTextToolbar from './RichTextToolbar'
import NodeNoteContentShow from './NodeNoteContentShow.vue'
import { getData, storeData, storeConfig } from '@/api'
import { getData, storeData, storeConfig, manualSaveConfig ,manualCancel} from '@/api'
import Navigator from './Navigator.vue'
import NodeImgPreview from './NodeImgPreview.vue'
import SidebarTrigger from './SidebarTrigger.vue'
......@@ -174,6 +174,8 @@ export default {
this.$bus.$on('startPainter', this.handleStartPainter)
this.$bus.$on('node_tree_render_end', this.handleHideLoading)
this.$bus.$on('showLoading', this.handleShowLoading)
this.$bus.$on('SAVE', this.handleSaveData)
this.$bus.$on('CLOSE', this.handleClose)
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
......@@ -186,7 +188,8 @@ export default {
this.$bus.$off('createAssociativeLine', this.handleCreateLineFromActiveNode)
this.$bus.$off('startPainter', this.handleStartPainter)
this.$bus.$off('node_tree_render_end', this.handleHideLoading)
this.$bus.$off('showLoading', this.handleShowLoading)
this.$bus.$off('SAVE')
this.$bus.$off('CLOSE')
window.removeEventListener('resize', this.handleResize)
},
methods: {
......@@ -210,6 +213,20 @@ export default {
this.mindMap.resize()
},
async handleSaveData(){
const file = await this.mindMap.export('png', false);
const config = {
data: this.mindMap.getData(true),
file
}
manualSaveConfig(config)
},
handleClose(){
console.log('handleClose')
manualCancel()
},
// 显示loading
handleShowLoading() {
this.enableShowLoading = true
......@@ -361,6 +378,8 @@ export default {
// return el
// },
})
window['mindMap'] = this.mindMap;
if (this.openNodeRichText) this.addRichTextPlugin()
this.mindMap.keyCommand.addShortcut('Control+s', () => {
this.manualSave()
......
src/pages/Edit/components/Export.vue
View file @ 340442d2
......@@ -187,6 +187,8 @@ export default {
} else {
this.$bus.$emit('export', this.exportType, true, this.fileName)
}
this.$notify.info({
title: this.$t('export.notifyTitle'),
message: this.$t('export.notifyMessage')
......
src/pages/Edit/components/NavigatorToolbar.vue
View file @ 340442d2
......@@ -64,26 +64,6 @@
<div class="item">
<Scale :isDark="isDark" :mindMap="mindMap"></Scale>
</div>
<div class="item">
<div
class="btn iconfont"
:class="[isDark ? 'iconmoon_line' : 'iconlieri']"
@click="toggleDark"
></div>
</div>
<div class="item">
<el-dropdown @command="handleCommand">
<div class="btn iconfont iconbangzhu"></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="github">Github</el-dropdown-item>
<el-dropdown-item command="helpDoc">使用文档</el-dropdown-item>
<el-dropdown-item command="devDoc">开发文档</el-dropdown-item>
<el-dropdown-item command="site">官方网站</el-dropdown-item>
<el-dropdown-item command="issue">意见反馈</el-dropdown-item>
<el-dropdown-item disabled>当前：v{{ version }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
......
src/pages/Edit/components/Toolbar.vue
View file @ 340442d2
......@@ -24,8 +24,9 @@
</div>
</el-popover>
</div>
<!-- 导出 -->
<div class="toolbarBlock">
<!-- <div class="toolbarBlock">
<div class="toolbarBtn" @click="createNewLocalFile">
<span class="icon iconfont iconxinjian"></span>
<span class="text">{{ $t('toolbar.newFile') }}</span>
......@@ -46,7 +47,7 @@
<span class="icon iconfont iconexport"></span>
<span class="text">{{ $t('toolbar.export') }}</span>
</div>
</div>
</div> -->
</div>
<NodeImage></NodeImage>
<NodeHyperlink></NodeHyperlink>
......@@ -362,7 +363,7 @@ export default {
background-color: #fff;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
// box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.06);
margin-right: 20px;
flex-shrink: 0;
......
src/pages/Edit/components/ToolbarNodeBtnList.vue
View file @ 340442d2
<template>
<div class="toolbarNodeBtnList" :class="[dir, { isDark: isDark }]">
<template v-for="item in list">
<div v-for="item in list" :key="item">
<div
v-if="item === 'back'"
class="toolbarBtn"
......@@ -156,7 +156,16 @@
<span class="icon iconfont icongongshi"></span>
<span class="text">{{ $t('toolbar.formula') }}</span>
</div>
</template>
</div>
<div class="toolbarBtn" @click="$bus.$emit('SAVE')">
<span class="icon mindIconfont mind-iconbaocun"></span>
<span class="text">{{ $t('toolbar.saveAndClose') }}</span>
</div>
<div class="toolbarBtn" @click="$bus.$emit('CLOSE')">
<span class="icon mindIconfont mind-iconguanbi1"></span>
<span class="text">{{ $t('toolbar.close') }}</span>
</div>
</div>
</template>
......@@ -295,10 +304,6 @@ export default {
cursor: pointer;
margin-right: 20px;
&:last-of-type {
margin-right: 0;
}
&:hover {
&:not(.disabled) {
.icon {
......
src/pages/Index/components/Block2.vue
View file @ 340442d2
......@@ -58,11 +58,11 @@ export default {
}
],
functionList: [
{
icon: 'iconjingzi',
name: '主题',
value: '内置多种主题，允许高度自定义样式，支持注册新主题。'
},
// {
// icon: 'iconjingzi',
// name: '主题',
// value: '内置多种主题，允许高度自定义样式，支持注册新主题。'
// },
{
icon: 'iconjiegou',
name: '结构',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment