openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化侧边栏显示和隐藏方式

Browse Source
This commit is contained in:
wanglin2 2022-11-15 20:00:03 +08:00
parent 3a723a15bf
commit aa56e53c4d
22 changed files with 1423 additions and 1192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
web/src/assets/icon-font/demo.css
View File

@ -1,19 +1,15 @@
/* Logo 字体 */ /* Logo 字体 */
@font-face { @font-face {
font-family: 'iconfont logo'; 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');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
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.woff?t=1545807318834') url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
format('woff'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
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 { .logo {
font-family: 'iconfont logo'; font-family: "iconfont logo";
font-size: 160px; font-size: 160px;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -52,6 +48,7 @@
color: #666; color: #666;
} }
#tabs .active { #tabs .active {
border-bottom-color: #f00; border-bottom-color: #f00;
color: #222; color: #222;
@ -218,35 +215,35 @@
margin: 1em 0; margin: 1em 0;
} }
.markdown > p, .markdown>p,
.markdown > blockquote, .markdown>blockquote,
.markdown > .highlight, .markdown>.highlight,
.markdown > ol, .markdown>ol,
.markdown > ul { .markdown>ul {
width: 80%; width: 80%;
} }
.markdown ul > li { .markdown ul>li {
list-style: circle; list-style: circle;
} }
.markdown > ul li, .markdown>ul li,
.markdown blockquote ul > li { .markdown blockquote ul>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
.markdown > ul li p, .markdown>ul li p,
.markdown > ol li p { .markdown>ol li p {
margin: 0.6em 0; margin: 0.6em 0;
} }
.markdown ol > li { .markdown ol>li {
list-style: decimal; list-style: decimal;
} }
.markdown > ol li, .markdown>ol li,
.markdown blockquote ol > li { .markdown blockquote ol>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
@ -263,7 +260,7 @@
font-weight: 600; font-weight: 600;
} }
.markdown > table { .markdown>table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0px; border-spacing: 0px;
empty-cells: show; empty-cells: show;
@ -272,21 +269,21 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.markdown > table th { .markdown>table th {
white-space: nowrap; white-space: nowrap;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
} }
.markdown > table th, .markdown>table th,
.markdown > table td { .markdown>table td {
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
padding: 8px 16px; padding: 8px 16px;
text-align: left; text-align: left;
} }
.markdown > table th { .markdown>table th {
background: #f7f7f7; background: #F7F7F7;
} }
.markdown blockquote { .markdown blockquote {
@ -321,11 +318,12 @@
display: inline-block; display: inline-block;
} }
.markdown > br, .markdown>br,
.markdown > p > br { .markdown>p>br {
clear: both; clear: both;
} }
.hljs { .hljs {
display: block; display: block;
background: white; background: white;
@ -401,8 +399,8 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
* Based on dabblet (http://dabblet.com) * Based on dabblet (http://dabblet.com)
* @author Lea Verou * @author Lea Verou
*/ */
code[class*='language-'], code[class*="language-"],
pre[class*='language-'] { pre[class*="language-"] {
color: black; color: black;
background: none; background: none;
text-shadow: 0 1px white; text-shadow: 0 1px white;
@ -424,45 +422,46 @@ pre[class*='language-'] {
hyphens: none; hyphens: none;
} }
pre[class*='language-']::-moz-selection, pre[class*="language-"]::-moz-selection,
pre[class*='language-'] ::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*='language-']::-moz-selection, code[class*="language-"]::-moz-selection,
code[class*='language-'] ::-moz-selection { code[class*="language-"] ::-moz-selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; background: #b3d4fc;
} }
pre[class*='language-']::selection, pre[class*="language-"]::selection,
pre[class*='language-'] ::selection, pre[class*="language-"] ::selection,
code[class*='language-']::selection, code[class*="language-"]::selection,
code[class*='language-'] ::selection { code[class*="language-"] ::selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; background: #b3d4fc;
} }
@media print { @media print {
code[class*='language-'],
pre[class*='language-'] { code[class*="language-"],
pre[class*="language-"] {
text-shadow: none; text-shadow: none;
} }
} }
/* Code blocks */ /* Code blocks */
pre[class*='language-'] { pre[class*="language-"] {
padding: 1em; padding: 1em;
margin: 0.5em 0; margin: .5em 0;
overflow: auto; overflow: auto;
} }
:not(pre) > code[class*='language-'], :not(pre)>code[class*="language-"],
pre[class*='language-'] { pre[class*="language-"] {
background: #f5f2f0; background: #f5f2f0;
} }
/* Inline code */ /* Inline code */
:not(pre) > code[class*='language-'] { :not(pre)>code[class*="language-"] {
padding: 0.1em; padding: .1em;
border-radius: 0.3em; border-radius: .3em;
white-space: normal; white-space: normal;
} }
@ -478,7 +477,7 @@ pre[class*='language-'] {
} }
.namespace { .namespace {
opacity: 0.7; opacity: .7;
} }
.token.property, .token.property,
@ -506,7 +505,7 @@ pre[class*='language-'] {
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #9a6e3a; color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5); background: hsla(0, 0%, 100%, .5);
} }
.token.atrule, .token.atrule,
@ -517,7 +516,7 @@ pre[class*='language-'] {
.token.function, .token.function,
.token.class-name { .token.class-name {
color: #dd4a68; color: #DD4A68;
} }
.token.regex, .token.regex,

329
web/src/assets/icon-font/demo_index.html
View File

@ -1,24 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<title>iconfont Demo</title> <title>iconfont Demo</title>
<link <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
rel="shortcut icon" <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
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">
type="image/x-icon" <link rel="stylesheet" href="demo.css">
/> <link rel="stylesheet" href="iconfont.css">
<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> <script src="iconfont.js"></script>
<!-- jQuery --> <!-- 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/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
@ -39,26 +28,18 @@
margin-left: 0.5em; margin-left: 0.5em;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
background: linear-gradient(-45deg, #3967ff, #b500fe); background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<h1 class="logo"> <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<a <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
href="https://www.iconfont.cn/"
title="iconfont 首页" </a></h1>
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"> <div class="nav-tabs">
<ul id="tabs" class="dib-box"> <ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li> <li class="dib active"><span>Unicode</span></li>
@ -66,16 +47,25 @@
<li class="dib"><span>Symbol</span></li> <li class="dib"><span>Symbol</span></li>
</ul> </ul>
<a <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2479351" target="_blank" class="nav-more">查看项目</a>
href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2479351"
target="_blank"
class="nav-more"
>查看项目</a
>
</div> </div>
<div class="tab-container"> <div class="tab-container">
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6c5;</span>
<div class="name">选择</div>
<div class="code-name">&amp;#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7aa;</span>
<div class="name">主题</div>
<div class="code-name">&amp;#xe7aa;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe63e;</span> <span class="icon iconfont">&#xe63e;</span>
<div class="name">导出</div> <div class="name">导出</div>
@ -333,10 +323,11 @@
<div class="name">HTSCIT_展开2</div> <div class="name">HTSCIT_展开2</div>
<div class="code-name">&amp;#xe673;</div> <div class="code-name">&amp;#xe673;</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2> <h2 id="unicode-">Unicode 引用</h2>
<hr /> <hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul> <ul>
@ -344,25 +335,20 @@
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul> </ul>
<blockquote> <blockquote>
<p> <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
</p>
</blockquote> </blockquote>
<p>Unicode 使用步骤如下：</p> <p>Unicode 使用步骤如下：</p>
<h3 id="-font-face"> <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
第一步：拷贝项目下面生成的 <code>@font-face</code> <pre><code class="language-css"
</h3>
<pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1664005697217') format('woff2'), src: url('iconfont.woff2?t=1668512547595') format('woff2'),
url('iconfont.woff?t=1664005697217') format('woff'), url('iconfont.woff?t=1668512547595') format('woff'),
url('iconfont.ttf?t=1664005697217') format('truetype'); url('iconfont.ttf?t=1668512547595') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css" <pre><code class="language-css"
>.iconfont { >.iconfont {
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-size: 16px; font-size: 16px;
@ -372,26 +358,43 @@
} }
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre> <pre>
<code class="language-html" <code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt; >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre> </code></pre>
<blockquote> <blockquote>
<p> <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
"iconfont" 是你项目下的
font-family。可以通过编辑项目查看，默认是 "iconfont"。
</p>
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconchoose1"></span>
<div class="name">
选择
</div>
<div class="code-name">.iconchoose1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhuti"></span>
<div class="name">
主题
</div>
<div class="code-name">.iconzhuti
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icondaochu1"></span> <span class="icon iconfont icondaochu1"></span>
<div class="name"> <div class="name">
导出 导出
</div> </div>
<div class="code-name">.icondaochu1</div> <div class="code-name">.icondaochu1
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -399,7 +402,8 @@
<div class="name"> <div class="name">
另存为 另存为
</div> </div>
<div class="code-name">.iconlingcunwei</div> <div class="code-name">.iconlingcunwei
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -407,7 +411,8 @@
<div class="name"> <div class="name">
export export
</div> </div>
<div class="code-name">.iconexport</div> <div class="code-name">.iconexport
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -415,7 +420,8 @@
<div class="name"> <div class="name">
打开 打开
</div> </div>
<div class="code-name">.icondakai</div> <div class="code-name">.icondakai
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -423,7 +429,8 @@
<div class="name"> <div class="name">
新建 新建
</div> </div>
<div class="code-name">.iconxinjian</div> <div class="code-name">.iconxinjian
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -431,7 +438,8 @@
<div class="name"> <div class="name">
剪切 剪切
</div> </div>
<div class="code-name">.iconjianqie</div> <div class="code-name">.iconjianqie
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -439,7 +447,8 @@
<div class="name"> <div class="name">
整理 整理
</div> </div>
<div class="code-name">.iconzhengli</div> <div class="code-name">.iconzhengli
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -447,7 +456,8 @@
<div class="name"> <div class="name">
复制 复制
</div> </div>
<div class="code-name">.iconfuzhi</div> <div class="code-name">.iconfuzhi
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -455,7 +465,8 @@
<div class="name"> <div class="name">
粘贴 粘贴
</div> </div>
<div class="code-name">.iconniantie</div> <div class="code-name">.iconniantie
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -463,7 +474,8 @@
<div class="name"> <div class="name">
上移 上移
</div> </div>
<div class="code-name">.iconshangyi</div> <div class="code-name">.iconshangyi
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -471,7 +483,8 @@
<div class="name"> <div class="name">
下移 下移
</div> </div>
<div class="code-name">.iconxiayi</div> <div class="code-name">.iconxiayi
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -479,7 +492,8 @@
<div class="name"> <div class="name">
概括总览 概括总览
</div> </div>
<div class="code-name">.icongaikuozonglan</div> <div class="code-name">.icongaikuozonglan
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -487,7 +501,8 @@
<div class="name"> <div class="name">
全选 全选
</div> </div>
<div class="code-name">.iconquanxuan</div> <div class="code-name">.iconquanxuan
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -495,7 +510,8 @@
<div class="name"> <div class="name">
导入 导入
</div> </div>
<div class="code-name">.icondaoru</div> <div class="code-name">.icondaoru
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -503,7 +519,8 @@
<div class="name"> <div class="name">
后退-实 后退-实
</div> </div>
<div class="code-name">.iconhoutui-shi</div> <div class="code-name">.iconhoutui-shi
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -511,7 +528,8 @@
<div class="name"> <div class="name">
前进 前进
</div> </div>
<div class="code-name">.iconqianjin1</div> <div class="code-name">.iconqianjin1
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -519,7 +537,8 @@
<div class="name"> <div class="name">
撤回 撤回
</div> </div>
<div class="code-name">.iconwithdraw</div> <div class="code-name">.iconwithdraw
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -527,7 +546,8 @@
<div class="name"> <div class="name">
前进 前进
</div> </div>
<div class="code-name">.iconqianjin</div> <div class="code-name">.iconqianjin
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -535,7 +555,8 @@
<div class="name"> <div class="name">
恢复默认 恢复默认
</div> </div>
<div class="code-name">.iconhuifumoren</div> <div class="code-name">.iconhuifumoren
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -543,7 +564,8 @@
<div class="name"> <div class="name">
换行 换行
</div> </div>
<div class="code-name">.iconhuanhang</div> <div class="code-name">.iconhuanhang
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -551,7 +573,8 @@
<div class="name"> <div class="name">
缩小 缩小
</div> </div>
<div class="code-name">.iconsuoxiao</div> <div class="code-name">.iconsuoxiao
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -559,7 +582,8 @@
<div class="name"> <div class="name">
编辑 编辑
</div> </div>
<div class="code-name">.iconbianji</div> <div class="code-name">.iconbianji
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -567,7 +591,8 @@
<div class="name"> <div class="name">
放大 放大
</div> </div>
<div class="code-name">.iconfangda</div> <div class="code-name">.iconfangda
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -575,7 +600,8 @@
<div class="name"> <div class="name">
全屏 全屏
</div> </div>
<div class="code-name">.iconquanping1</div> <div class="code-name">.iconquanping1
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -583,7 +609,8 @@
<div class="name"> <div class="name">
定位 定位
</div> </div>
<div class="code-name">.icondingwei</div> <div class="code-name">.icondingwei
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -591,7 +618,8 @@
<div class="name"> <div class="name">
导航 导航
</div> </div>
<div class="code-name">.icondaohang</div> <div class="code-name">.icondaohang
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -599,7 +627,8 @@
<div class="name"> <div class="name">
键盘 键盘
</div> </div>
<div class="code-name">.iconjianpan</div> <div class="code-name">.iconjianpan
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -607,7 +636,8 @@
<div class="name"> <div class="name">
全屏 全屏
</div> </div>
<div class="code-name">.iconquanping</div> <div class="code-name">.iconquanping
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -615,7 +645,8 @@
<div class="name"> <div class="name">
导出 导出
</div> </div>
<div class="code-name">.icondaochu</div> <div class="code-name">.icondaochu
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -623,7 +654,8 @@
<div class="name"> <div class="name">
标签 标签
</div> </div>
<div class="code-name">.iconbiaoqian</div> <div class="code-name">.iconbiaoqian
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -631,7 +663,8 @@
<div class="name"> <div class="name">
流程-备注 流程-备注
</div> </div>
<div class="code-name">.iconflow-Mark</div> <div class="code-name">.iconflow-Mark
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -639,7 +672,8 @@
<div class="name"> <div class="name">
超链接 超链接
</div> </div>
<div class="code-name">.iconchaolianjie</div> <div class="code-name">.iconchaolianjie
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -647,7 +681,8 @@
<div class="name"> <div class="name">
主题 主题
</div> </div>
<div class="code-name">.iconjingzi</div> <div class="code-name">.iconjingzi
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -655,7 +690,8 @@
<div class="name"> <div class="name">
笑脸 笑脸
</div> </div>
<div class="code-name">.iconxiaolian</div> <div class="code-name">.iconxiaolian
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -663,7 +699,8 @@
<div class="name"> <div class="name">
图 片 图 片
</div> </div>
<div class="code-name">.iconimage</div> <div class="code-name">.iconimage
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -671,7 +708,8 @@
<div class="name"> <div class="name">
结构 结构
</div> </div>
<div class="code-name">.iconjiegou</div> <div class="code-name">.iconjiegou
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -679,7 +717,8 @@
<div class="name"> <div class="name">
样式 样式
</div> </div>
<div class="code-name">.iconyangshi</div> <div class="code-name">.iconyangshi
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -687,7 +726,8 @@
<div class="name"> <div class="name">
符号-大纲树 符号-大纲树
</div> </div>
<div class="code-name">.iconfuhao-dagangshu</div> <div class="code-name">.iconfuhao-dagangshu
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -695,7 +735,8 @@
<div class="name"> <div class="name">
添加子节点 添加子节点
</div> </div>
<div class="code-name">.icontianjiazijiedian</div> <div class="code-name">.icontianjiazijiedian
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -703,7 +744,8 @@
<div class="name"> <div class="name">
节点 节点
</div> </div>
<div class="code-name">.iconjiedian</div> <div class="code-name">.iconjiedian
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -711,7 +753,8 @@
<div class="name"> <div class="name">
删 除 删 除
</div> </div>
<div class="code-name">.iconshanchu</div> <div class="code-name">.iconshanchu
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -719,7 +762,8 @@
<div class="name"> <div class="name">
HTSCIT_展开 HTSCIT_展开
</div> </div>
<div class="code-name">.iconzhankai</div> <div class="code-name">.iconzhankai
</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -727,47 +771,53 @@
<div class="name"> <div class="name">
HTSCIT_展开2 HTSCIT_展开2
</div> </div>
<div class="code-name">.iconzhankai1</div> <div class="code-name">.iconzhankai1
</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="font-class-">font-class 引用</h2> <h2 id="font-class-">font-class 引用</h2>
<hr /> <hr>
<p> <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
书写不直观，语意不明确的问题。
</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p> <p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul> <ul>
<li> <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
是什么。
</li>
<li>
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
里面的 Unicode 引用。
</li>
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-fontclass-"> <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
第一步：引入项目下面生成的 fontclass 代码： <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre> </code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt; <pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre> </code></pre>
<blockquote> <blockquote>
<p> <p>"
" iconfont" 是你项目下的 iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
font-family。可以通过编辑项目查看，默认是 "iconfont"。
</p>
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchoose1"></use>
</svg>
<div class="name">选择</div>
<div class="code-name">#iconchoose1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhuti"></use>
</svg>
<div class="name">主题</div>
<div class="code-name">#iconzhuti</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondaochu1"></use> <use xlink:href="#icondaochu1"></use>
@ -1111,33 +1161,26 @@
<div class="name">HTSCIT_展开2</div> <div class="name">HTSCIT_展开2</div>
<div class="code-name">#iconzhankai1</div> <div class="code-name">#iconzhankai1</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2> <h2 id="symbol-">Symbol 引用</h2>
<hr /> <hr>
<p> <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
href=""
>文章</a
>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
</p>
<ul> <ul>
<li>支持多色图标了，不再受单色限制。</li> <li>支持多色图标了，不再受单色限制。</li>
<li> <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
<code>color</code> 来调整样式。
</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt; <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt; <pre><code class="language-html">&lt;style&gt;
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1148,19 +1191,20 @@
&lt;/style&gt; &lt;/style&gt;
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt; <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt; &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt; &lt;/svg&gt;
</code></pre> </code></pre>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
$(document).ready(function() { $(document).ready(function () {
$('.tab-container .content:first').show() $('.tab-container .content:first').show()
$('#tabs li').click(function(e) { $('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content') var tabContent = $('.tab-container .content')
var index = $(this).index() var index = $(this).index()
@ -1170,13 +1214,10 @@
$('#tabs li').removeClass('active') $('#tabs li').removeClass('active')
$(this).addClass('active') $(this).addClass('active')
tabContent tabContent.hide().eq(index).fadeIn()
.hide()
.eq(index)
.fadeIn()
} }
}) })
}) })
</script> </script>
</body> </body>
</html> </html>

105
web/src/assets/icon-font/iconfont.css
View File

@ -1,186 +1,195 @@
@font-face { @font-face {
font-family: 'iconfont'; /* Project id 2479351 */ font-family: "iconfont"; /* Project id 2479351 */
src: url('iconfont.woff2?t=1664005697217') format('woff2'), src: url('iconfont.woff2?t=1668512547595') format('woff2'),
url('iconfont.woff?t=1664005697217') format('woff'), url('iconfont.woff?t=1668512547595') format('woff'),
url('iconfont.ttf?t=1664005697217') format('truetype'); url('iconfont.ttf?t=1668512547595') format('truetype');
} }
.iconfont { .iconfont {
font-family: 'iconfont' !important; font-family: "iconfont" !important;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.iconchoose1:before {
content: "\e6c5";
}
.iconzhuti:before {
content: "\e7aa";
}
.icondaochu1:before { .icondaochu1:before {
content: '\e63e'; content: "\e63e";
} }
.iconlingcunwei:before { .iconlingcunwei:before {
content: '\e657'; content: "\e657";
} }
.iconexport:before { .iconexport:before {
content: '\e642'; content: "\e642";
} }
.icondakai:before { .icondakai:before {
content: '\ebdf'; content: "\ebdf";
} }
.iconxinjian:before { .iconxinjian:before {
content: '\e64e'; content: "\e64e";
} }
.iconjianqie:before { .iconjianqie:before {
content: '\e601'; content: "\e601";
} }
.iconzhengli:before { .iconzhengli:before {
content: '\e83b'; content: "\e83b";
} }
.iconfuzhi:before { .iconfuzhi:before {
content: '\e604'; content: "\e604";
} }
.iconniantie:before { .iconniantie:before {
content: '\e63f'; content: "\e63f";
} }
.iconshangyi:before { .iconshangyi:before {
content: '\e6be'; content: "\e6be";
} }
.iconxiayi:before { .iconxiayi:before {
content: '\e6bf'; content: "\e6bf";
} }
.icongaikuozonglan:before { .icongaikuozonglan:before {
content: '\e609'; content: "\e609";
} }
.iconquanxuan:before { .iconquanxuan:before {
content: '\f199'; content: "\f199";
} }
.icondaoru:before { .icondaoru:before {
content: '\e6a3'; content: "\e6a3";
} }
.iconhoutui-shi:before { .iconhoutui-shi:before {
content: '\e656'; content: "\e656";
} }
.iconqianjin1:before { .iconqianjin1:before {
content: '\e654'; content: "\e654";
} }
.iconwithdraw:before { .iconwithdraw:before {
content: '\e603'; content: "\e603";
} }
.iconqianjin:before { .iconqianjin:before {
content: '\e600'; content: "\e600";
} }
.iconhuifumoren:before { .iconhuifumoren:before {
content: '\e60e'; content: "\e60e";
} }
.iconhuanhang:before { .iconhuanhang:before {
content: '\e61e'; content: "\e61e";
} }
.iconsuoxiao:before { .iconsuoxiao:before {
content: '\ec13'; content: "\ec13";
} }
.iconbianji:before { .iconbianji:before {
content: '\e626'; content: "\e626";
} }
.iconfangda:before { .iconfangda:before {
content: '\e663'; content: "\e663";
} }
.iconquanping1:before { .iconquanping1:before {
content: '\e664'; content: "\e664";
} }
.icondingwei:before { .icondingwei:before {
content: '\e616'; content: "\e616";
} }
.icondaohang:before { .icondaohang:before {
content: '\e611'; content: "\e611";
} }
.iconjianpan:before { .iconjianpan:before {
content: '\e64d'; content: "\e64d";
} }
.iconquanping:before { .iconquanping:before {
content: '\e602'; content: "\e602";
} }
.icondaochu:before { .icondaochu:before {
content: '\e63d'; content: "\e63d";
} }
.iconbiaoqian:before { .iconbiaoqian:before {
content: '\e63c'; content: "\e63c";
} }
.iconflow-Mark:before { .iconflow-Mark:before {
content: '\e65b'; content: "\e65b";
} }
.iconchaolianjie:before { .iconchaolianjie:before {
content: '\e6f4'; content: "\e6f4";
} }
.iconjingzi:before { .iconjingzi:before {
content: '\e610'; content: "\e610";
} }
.iconxiaolian:before { .iconxiaolian:before {
content: '\e60f'; content: "\e60f";
} }
.iconimage:before { .iconimage:before {
content: '\e629'; content: "\e629";
} }
.iconjiegou:before { .iconjiegou:before {
content: '\e61d'; content: "\e61d";
} }
.iconyangshi:before { .iconyangshi:before {
content: '\e631'; content: "\e631";
} }
.iconfuhao-dagangshu:before { .iconfuhao-dagangshu:before {
content: '\e71f'; content: "\e71f";
} }
.icontianjiazijiedian:before { .icontianjiazijiedian:before {
content: '\e622'; content: "\e622";
} }
.iconjiedian:before { .iconjiedian:before {
content: '\e655'; content: "\e655";
} }
.iconshanchu:before { .iconshanchu:before {
content: '\e696'; content: "\e696";
} }
.iconzhankai:before { .iconzhankai:before {
content: '\e64c'; content: "\e64c";
} }
.iconzhankai1:before { .iconzhankai1:before {
content: '\e673'; content: "\e673";
} }

69
web/src/assets/icon-font/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
web/src/assets/icon-font/iconfont.json
View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon", "css_prefix_text": "icon",
"description": "思维导图", "description": "思维导图",
"glyphs": [ "glyphs": [
{
"icon_id": "1009019",
"name": "选择",
"font_class": "choose1",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "493507",
"name": "主题",
"font_class": "zhuti",
"unicode": "e7aa",
"unicode_decimal": 59306
},
{ {
"icon_id": "1305460", "icon_id": "1305460",
"name": "导出", "name": "导出",

BIN
web/src/assets/icon-font/iconfont.ttf
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff2
View File

Binary file not shown.

34
web/src/config/en.js
View File

@ -319,3 +319,37 @@ export const shapeList = [
value: 'circle' value: 'circle'
} }
] ]
// 侧边栏列表
export const sidebarTriggerList = [
{
name: 'Node style',
value: 'nodeStyle',
icon: 'iconzhuti'
},
{
name: 'Base style',
value: 'baseStyle',
icon: 'iconyangshi'
},
{
name: 'Theme',
value: 'theme',
icon: 'iconjingzi'
},
{
name: 'Structure',
value: 'structure',
icon: 'iconjiegou'
},
{
name: 'Outline',
value: 'outline',
icon: 'iconfuhao-dagangshu'
},
{
name: 'ShortcutKey',
value: 'shortcutKey',
icon: 'iconjianpan'
}
]

14
web/src/config/index.js
View File

@ -13,7 +13,8 @@ import {
backgroundRepeatList as backgroundRepeatListZh, backgroundRepeatList as backgroundRepeatListZh,
backgroundPositionList as backgroundPositionListZh, backgroundPositionList as backgroundPositionListZh,
shortcutKeyList as shortcutKeyListZh, shortcutKeyList as shortcutKeyListZh,
shapeList as shapeListZh shapeList as shapeListZh,
sidebarTriggerList as sidebarTriggerListZh
} from './zh' } from './zh'
import { import {
fontFamilyList as fontFamilyListEn, fontFamilyList as fontFamilyListEn,
@ -22,7 +23,8 @@ import {
backgroundRepeatList as backgroundRepeatListEn, backgroundRepeatList as backgroundRepeatListEn,
backgroundPositionList as backgroundPositionListEn, backgroundPositionList as backgroundPositionListEn,
shortcutKeyList as shortcutKeyListEn, shortcutKeyList as shortcutKeyListEn,
shapeList as shapeListEn shapeList as shapeListEn,
sidebarTriggerList as sidebarTriggerListEn
} from './en' } from './en'
const fontFamilyList = { const fontFamilyList = {
@ -60,6 +62,11 @@ const shapeList = {
en: shapeListEn en: shapeListEn
} }
const sidebarTriggerList = {
zh: sidebarTriggerListZh,
en: sidebarTriggerListEn
}
export { export {
fontSizeList, fontSizeList,
lineHeightList, lineHeightList,
@ -75,5 +82,6 @@ export {
backgroundRepeatList, backgroundRepeatList,
backgroundPositionList, backgroundPositionList,
shortcutKeyList, shortcutKeyList,
shapeList shapeList,
sidebarTriggerList
} }

34
web/src/config/zh.js
View File

@ -391,3 +391,37 @@ export const langList = [
name: 'English' name: 'English'
} }
] ]
// 侧边栏列表
export const sidebarTriggerList = [
{
name: '节点样式',
value: 'nodeStyle',
icon: 'iconzhuti'
},
{
name: '基础样式',
value: 'baseStyle',
icon: 'iconyangshi'
},
{
name: '主题',
value: 'theme',
icon: 'iconjingzi'
},
{
name: '结构',
value: 'structure',
icon: 'iconjiegou'
},
{
name: '大纲',
value: 'outline',
icon: 'iconfuhao-dagangshu'
},
{
name: '快捷键',
value: 'shortcutKey',
icon: 'iconjianpan'
}
]

16
web/src/pages/Edit/components/BaseStyle.vue
View File

@ -298,6 +298,7 @@ import Color from './Color'
import { lineWidthList, lineStyleList, backgroundRepeatList } from '@/config' import { lineWidthList, lineStyleList, backgroundRepeatList } from '@/config'
import ImgUpload from '@/components/ImgUpload' import ImgUpload from '@/components/ImgUpload'
import { storeConfig } from '@/api' import { storeConfig } from '@/api'
import { mapState } from 'vuex'
/** /**
* @Author: 王林 * @Author: 王林
@ -345,6 +346,8 @@ export default {
} }
}, },
computed: { computed: {
...mapState(['activeSidebar']),
lineStyleList() { lineStyleList() {
return lineStyleList[this.$i18n.locale] || lineStyleList.zh return lineStyleList[this.$i18n.locale] || lineStyleList.zh
}, },
@ -352,14 +355,15 @@ export default {
return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh
} }
}, },
created() { watch: {
this.$bus.$on('showBaseStyle', () => { activeSidebar(val) {
this.$refs.sidebar.show = false if (val === 'baseStyle') {
this.$nextTick(() => {
this.$refs.sidebar.show = true this.$refs.sidebar.show = true
this.initStyle() this.initStyle()
}) } else {
}) this.$refs.sidebar.show = false
}
}
}, },
methods: { methods: {
/** /**

5
web/src/pages/Edit/components/Edit.vue
View File

@ -16,6 +16,7 @@
:mindMap="mindMap" :mindMap="mindMap"
></NodeNoteContentShow> ></NodeNoteContentShow>
<NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview> <NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
<SidebarTrigger v-if="!isZenMode"></SidebarTrigger>
</div> </div>
</template> </template>
@ -34,6 +35,7 @@ import NodeNoteContentShow from './NodeNoteContentShow.vue'
import { getData, storeData, storeConfig } from '@/api' import { getData, storeData, storeConfig } from '@/api'
import Navigator from './Navigator.vue' import Navigator from './Navigator.vue'
import NodeImgPreview from './NodeImgPreview.vue' import NodeImgPreview from './NodeImgPreview.vue'
import SidebarTrigger from './SidebarTrigger.vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
/** /**
@ -55,7 +57,8 @@ export default {
Contextmenu, Contextmenu,
NodeNoteContentShow, NodeNoteContentShow,
Navigator, Navigator,
NodeImgPreview NodeImgPreview,
SidebarTrigger
}, },
data() { data() {
return { return {

19
web/src/pages/Edit/components/Outline.vue
View File

@ -6,6 +6,7 @@
<script> <script>
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
import { mapState } from 'vuex'
/** /**
* @Author: 王林 * @Author: 王林
@ -27,16 +28,22 @@ export default {
} }
} }
}, },
computed: {
...mapState(['activeSidebar'])
},
watch: {
activeSidebar(val) {
if (val === 'outline') {
this.$refs.sidebar.show = true
} else {
this.$refs.sidebar.show = false
}
}
},
created() { created() {
this.$bus.$on('data_change', data => { this.$bus.$on('data_change', data => {
this.data = [data] this.data = [data]
}) })
this.$bus.$on('showOutline', () => {
this.$refs.sidebar.show = false
this.$nextTick(() => {
this.$refs.sidebar.show = true
})
})
} }
} }
</script> </script>

16
web/src/pages/Edit/components/ShortcutKey.vue
View File

@ -22,6 +22,7 @@
<script> <script>
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
import { shortcutKeyList } from '@/config' import { shortcutKeyList } from '@/config'
import { mapState } from 'vuex'
/** /**
* @Author: 王林 * @Author: 王林
@ -37,17 +38,20 @@ export default {
return {} return {}
}, },
computed: { computed: {
...mapState(['activeSidebar']),
shortcutKeyList() { shortcutKeyList() {
return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh
} }
}, },
created() { watch: {
this.$bus.$on('showShortcutKey', () => { activeSidebar(val) {
this.$refs.sidebar.show = false if (val === 'shortcutKey') {
this.$nextTick(() => {
this.$refs.sidebar.show = true this.$refs.sidebar.show = true
}) } else {
}) this.$refs.sidebar.show = false
}
}
} }
} }
</script> </script>

11
web/src/pages/Edit/components/Sidebar.vue
View File

@ -5,7 +5,7 @@
:class="{ show: show }" :class="{ show: show }"
:style="{ zIndex: zIndex }" :style="{ zIndex: zIndex }"
> >
<span class="closeBtn el-icon-close" @click="show = false"></span> <span class="closeBtn el-icon-close" @click="close"></span>
<div class="sidebarHeader" v-if="title"> <div class="sidebarHeader" v-if="title">
{{ title }} {{ title }}
</div> </div>
@ -17,6 +17,7 @@
<script> <script>
import { store } from '@/config' import { store } from '@/config'
import { mapState, mapMutations } from 'vuex'
/** /**
* @Author: 王林 * @Author: 王林
@ -43,6 +44,14 @@ export default {
this.zIndex = store.sidebarZIndex++ this.zIndex = store.sidebarZIndex++
} }
} }
},
methods: {
...mapMutations(['setActiveSidebar']),
close() {
this.show = false
this.setActiveSidebar('')
}
} }
} }
</script> </script>

107
web/src/pages/Edit/components/SidebarTrigger.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div
class="sidebarTriggerContainer"
@click.stop
:class="{ show: activeSidebar }"
>
<div class="trigger">
<div
class="triggerItem"
v-for="item in triggerList"
:key="item.value"
:class="{ active: activeSidebar === item.value }"
@click="trigger(item)"
>
<div class="triggerIcon iconfont" :class="[item.icon]"></div>
<div class="triggerName">{{ item.name }}</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { sidebarTriggerList } from '@/config'
/**
* @Author: 王林
* @Date: 2021-06-24 22:54:25
* @Desc: 侧边栏触发器
*/
export default {
name: 'SidebarTrigger',
data() {
return {
show: false
}
},
computed: {
...mapState(['activeSidebar']),
triggerList() {
return sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh
}
},
methods: {
...mapMutations(['setActiveSidebar']),
trigger(item) {
this.setActiveSidebar(item.value)
}
}
}
</script>
<style lang="less" scoped>
.sidebarTriggerContainer {
position: fixed;
right: 0px;
margin-top: 110px;
transition: all 0.3s;
top: 50%;
transform: translateY(-50%);
&.show {
right: 305px;
}
.trigger {
width: 60px;
border-color: #eee;
background-color: #fff;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
border-radius: 6px;
overflow: hidden;
.triggerItem {
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
color: #464646;
user-select: none;
white-space: nowrap;
&:hover {
background-color: #ededed;
}
&.active {
color: #409eff;
font-weight: bold;
}
.triggerIcon {
font-size: 18px;
margin-bottom: 5px;
}
.triggerName {
font-size: 13px;
}
}
}
}
</style>

17
web/src/pages/Edit/components/Structure.vue
View File

@ -21,6 +21,7 @@
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
import { layoutList } from 'simple-mind-map/src/utils/constant' import { layoutList } from 'simple-mind-map/src/utils/constant'
import { storeConfig } from '@/api' import { storeConfig } from '@/api'
import { mapState } from 'vuex'
/** /**
* @Author: 王林 * @Author: 王林
@ -43,14 +44,18 @@ export default {
layout: '' layout: ''
} }
}, },
created() { computed: {
this.$bus.$on('showStructure', () => { ...mapState(['activeSidebar'])
this.$refs.sidebar.show = false },
this.$nextTick(() => { watch: {
activeSidebar(val) {
if (val === 'structure') {
this.layout = this.mindMap.getLayout() this.layout = this.mindMap.getLayout()
this.$refs.sidebar.show = true this.$refs.sidebar.show = true
}) } else {
}) this.$refs.sidebar.show = false
}
}
}, },
methods: { methods: {
/** /**

35
web/src/pages/Edit/components/Style.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Sidebar ref="sidebar" :title="$t('style.title')"> <Sidebar ref="sidebar" :title="$t('style.title')">
<div class="styleBox"> <div class="styleBox" v-if="activeNodes.length > 0">
<el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick"> <el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane :label="$t('style.normal')" name="normal"></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-tab-pane :label="$t('style.active')" name="active"></el-tab-pane>
@ -367,6 +367,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tipBox" v-else>
<div class="tipIcon iconfont icontianjiazijiedian"></div>
<div class="tipText">请选择一个节点</div>
</div>
</Sidebar> </Sidebar>
</template> </template>
@ -383,6 +387,7 @@ import {
shapeList shapeList
} from '@/config' } from '@/config'
import { supportActiveStyle } from 'simple-mind-map/src/themes/default' import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
import { mapState } from 'vuex'
/** /**
* @Author: 王林 * @Author: 王林
@ -429,6 +434,8 @@ export default {
} }
}, },
computed: { computed: {
...mapState(['activeSidebar']),
fontFamilyList() { fontFamilyList() {
return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
}, },
@ -439,6 +446,15 @@ export default {
return shapeList[this.$i18n.locale] || shapeList.zh return shapeList[this.$i18n.locale] || shapeList.zh
} }
}, },
watch: {
activeSidebar(val) {
if (val === 'nodeStyle') {
this.$refs.sidebar.show = true
} else {
this.$refs.sidebar.show = false
}
}
},
created() { created() {
this.$bus.$on('node_active', this.onNodeActive) this.$bus.$on('node_active', this.onNodeActive)
}, },
@ -452,12 +468,9 @@ export default {
* @Desc: 监听节点激活事件 * @Desc: 监听节点激活事件
*/ */
onNodeActive(...args) { onNodeActive(...args) {
if (this.$refs.sidebar) this.$refs.sidebar.show = false
this.$nextTick(() => { this.$nextTick(() => {
this.activeTab = 'normal' this.activeTab = 'normal'
this.activeNodes = args[1] this.activeNodes = args[1]
if (this.$refs.sidebar)
this.$refs.sidebar.show = this.activeNodes.length > 0
this.initNodeStyle() this.initNodeStyle()
}) })
}, },
@ -616,6 +629,20 @@ export default {
} }
} }
.tipBox {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #666;
.tipIcon {
font-size: 100px;
}
}
.sidebarContent { .sidebarContent {
padding: 20px; padding: 20px;
padding-top: 10px; padding-top: 10px;

17
web/src/pages/Edit/components/Theme.vue
View File

@ -21,6 +21,7 @@
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
import { themeList } from 'simple-mind-map/src/utils/constant' import { themeList } from 'simple-mind-map/src/utils/constant'
import { storeConfig } from '@/api' import { storeConfig } from '@/api'
import { mapState } from 'vuex'
/** /**
* @Author: 王林 * @Author: 王林
@ -43,14 +44,18 @@ export default {
theme: '' theme: ''
} }
}, },
created() { computed: {
this.$bus.$on('showTheme', () => { ...mapState(['activeSidebar'])
this.$refs.sidebar.show = false },
this.$nextTick(() => { watch: {
activeSidebar(val) {
if (val === 'theme') {
this.theme = this.mindMap.getTheme() this.theme = this.mindMap.getTheme()
this.$refs.sidebar.show = true this.$refs.sidebar.show = true
}) } else {
}) this.$refs.sidebar.show = false
}
}
}, },
methods: { methods: {
/** /**

23
web/src/pages/Edit/components/Toolbar.vue
View File

@ -114,25 +114,6 @@
<span class="text">{{ $t('toolbar.summary') }}</span> <span class="text">{{ $t('toolbar.summary') }}</span>
</div> </div>
</div> </div>
<!-- 通用操作 -->
<div class="toolbarBlock">
<div class="toolbarBtn" @click="$bus.$emit('showOutline')">
<span class="icon iconfont iconfuhao-dagangshu"></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">{{ $t('toolbar.baseStyle') }}</span>
</div>
<div class="toolbarBtn" @click="$bus.$emit('showTheme')">
<span class="icon iconfont iconjingzi"></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">{{ $t('toolbar.strusture') }}</span>
</div>
</div>
<!-- 导出 --> <!-- 导出 -->
<div class="toolbarBlock"> <div class="toolbarBlock">
<div class="toolbarBtn" @click="createNewLocalFile"> <div class="toolbarBtn" @click="createNewLocalFile">
@ -155,10 +136,6 @@
<span class="icon iconfont iconexport"></span> <span class="icon iconfont iconexport"></span>
<span class="text">{{ $t('toolbar.export') }}</span> <span class="text">{{ $t('toolbar.export') }}</span>
</div> </div>
<div class="toolbarBtn" @click="$bus.$emit('showShortcutKey')">
<span class="icon iconfont iconjianpan"></span>
<span class="text">{{ $t('toolbar.shortcutKey') }}</span>
</div>
</div> </div>
</div> </div>
<NodeImage></NodeImage> <NodeImage></NodeImage>

13
web/src/store.js
View File

@ -12,7 +12,8 @@ const store = new Vuex.Store({
localConfig: { localConfig: {
// 本地配置 // 本地配置
isZenMode: false // 是否是禅模式 isZenMode: false // 是否是禅模式
} },
activeSidebar: '' // 当前显示的侧边栏
}, },
mutations: { mutations: {
/** /**
@ -46,6 +47,16 @@ const store = new Vuex.Store({
...data ...data
} }
storeLocalConfig(state.localConfig) storeLocalConfig(state.localConfig)
},
/**
* javascript comment
* @Author: 王林25
* @Date: 2022-11-15 19:25:26
* @Desc: 设置当前显示的侧边栏
*/
setActiveSidebar(state, data) {
state.activeSidebar = data
} }
}, },
actions: { actions: {