优化侧边栏显示和隐藏方式
This commit is contained in:
wanglin2
parent
3a723a15bf
commit
aa56e53c4d
@ -1,19 +1,15 @@
|
||||
/* Logo 字体 */
|
||||
@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#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');
|
||||
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-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -52,6 +48,7 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
@ -218,35 +215,35 @@
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown > p,
|
||||
.markdown > blockquote,
|
||||
.markdown > .highlight,
|
||||
.markdown > ol,
|
||||
.markdown > ul {
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown > ul li,
|
||||
.markdown blockquote ul > li {
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown > ul li p,
|
||||
.markdown > ol li p {
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol > li {
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown > ol li,
|
||||
.markdown blockquote ol > li {
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
@ -263,7 +260,7 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown > table {
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
@ -272,21 +269,21 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown > table th,
|
||||
.markdown > table td {
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
background: #f7f7f7;
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
@ -321,11 +318,12 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown > br,
|
||||
.markdown > p > br {
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
@ -401,8 +399,8 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
@ -424,45 +422,46 @@ pre[class*='language-'] {
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection {
|
||||
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 {
|
||||
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-'] {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@ -478,7 +477,7 @@ pre[class*='language-'] {
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@ -506,7 +505,7 @@ pre[class*='language-'] {
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
@ -517,7 +516,7 @@ pre[class*='language-'] {
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #dd4a68;
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
|
||||
@ -1,24 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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" />
|
||||
<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>
|
||||
@ -39,26 +28,18 @@
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967ff, #b500fe);
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</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>
|
||||
<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>
|
||||
@ -66,16 +47,25 @@
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a
|
||||
href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2479351"
|
||||
target="_blank"
|
||||
class="nav-more"
|
||||
>查看项目</a
|
||||
>
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2479351" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">选择</div>
|
||||
<div class="code-name">&#xe6c5;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">主题</div>
|
||||
<div class="code-name">&#xe7aa;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">导出</div>
|
||||
@ -333,10 +323,11 @@
|
||||
<div class="name">HTSCIT_展开2</div>
|
||||
<div class="code-name">&#xe673;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr />
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
@ -344,25 +335,20 @@
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>
|
||||
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
|
||||
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
|
||||
</p>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">
|
||||
第一步：拷贝项目下面生成的 <code>@font-face</code>
|
||||
</h3>
|
||||
<pre><code class="language-css"
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1664005697217') format('woff2'),
|
||||
url('iconfont.woff?t=1664005697217') format('woff'),
|
||||
url('iconfont.ttf?t=1664005697217') format('truetype');
|
||||
src: url('iconfont.woff2?t=1668512547595') format('woff2'),
|
||||
url('iconfont.woff?t=1668512547595') format('woff'),
|
||||
url('iconfont.ttf?t=1668512547595') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
@ -372,26 +358,43 @@
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>
|
||||
"iconfont" 是你项目下的
|
||||
font-family。可以通过编辑项目查看，默认是 "iconfont"。
|
||||
</p>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont 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">
|
||||
<span class="icon iconfont icondaochu1"></span>
|
||||
<div class="name">
|
||||
导出
|
||||
</div>
|
||||
<div class="code-name">.icondaochu1</div>
|
||||
<div class="code-name">.icondaochu1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -399,7 +402,8 @@
|
||||
<div class="name">
|
||||
另存为
|
||||
</div>
|
||||
<div class="code-name">.iconlingcunwei</div>
|
||||
<div class="code-name">.iconlingcunwei
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -407,7 +411,8 @@
|
||||
<div class="name">
|
||||
export
|
||||
</div>
|
||||
<div class="code-name">.iconexport</div>
|
||||
<div class="code-name">.iconexport
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -415,7 +420,8 @@
|
||||
<div class="name">
|
||||
打开
|
||||
</div>
|
||||
<div class="code-name">.icondakai</div>
|
||||
<div class="code-name">.icondakai
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -423,7 +429,8 @@
|
||||
<div class="name">
|
||||
新建
|
||||
</div>
|
||||
<div class="code-name">.iconxinjian</div>
|
||||
<div class="code-name">.iconxinjian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -431,7 +438,8 @@
|
||||
<div class="name">
|
||||
剪切
|
||||
</div>
|
||||
<div class="code-name">.iconjianqie</div>
|
||||
<div class="code-name">.iconjianqie
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -439,7 +447,8 @@
|
||||
<div class="name">
|
||||
整理
|
||||
</div>
|
||||
<div class="code-name">.iconzhengli</div>
|
||||
<div class="code-name">.iconzhengli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -447,7 +456,8 @@
|
||||
<div class="name">
|
||||
复制
|
||||
</div>
|
||||
<div class="code-name">.iconfuzhi</div>
|
||||
<div class="code-name">.iconfuzhi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -455,7 +465,8 @@
|
||||
<div class="name">
|
||||
粘贴
|
||||
</div>
|
||||
<div class="code-name">.iconniantie</div>
|
||||
<div class="code-name">.iconniantie
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -463,7 +474,8 @@
|
||||
<div class="name">
|
||||
上移
|
||||
</div>
|
||||
<div class="code-name">.iconshangyi</div>
|
||||
<div class="code-name">.iconshangyi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -471,7 +483,8 @@
|
||||
<div class="name">
|
||||
下移
|
||||
</div>
|
||||
<div class="code-name">.iconxiayi</div>
|
||||
<div class="code-name">.iconxiayi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -479,7 +492,8 @@
|
||||
<div class="name">
|
||||
概括总览
|
||||
</div>
|
||||
<div class="code-name">.icongaikuozonglan</div>
|
||||
<div class="code-name">.icongaikuozonglan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -487,7 +501,8 @@
|
||||
<div class="name">
|
||||
全选
|
||||
</div>
|
||||
<div class="code-name">.iconquanxuan</div>
|
||||
<div class="code-name">.iconquanxuan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -495,7 +510,8 @@
|
||||
<div class="name">
|
||||
导入
|
||||
</div>
|
||||
<div class="code-name">.icondaoru</div>
|
||||
<div class="code-name">.icondaoru
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -503,7 +519,8 @@
|
||||
<div class="name">
|
||||
后退-实
|
||||
</div>
|
||||
<div class="code-name">.iconhoutui-shi</div>
|
||||
<div class="code-name">.iconhoutui-shi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -511,7 +528,8 @@
|
||||
<div class="name">
|
||||
前进
|
||||
</div>
|
||||
<div class="code-name">.iconqianjin1</div>
|
||||
<div class="code-name">.iconqianjin1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -519,7 +537,8 @@
|
||||
<div class="name">
|
||||
撤回
|
||||
</div>
|
||||
<div class="code-name">.iconwithdraw</div>
|
||||
<div class="code-name">.iconwithdraw
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -527,7 +546,8 @@
|
||||
<div class="name">
|
||||
前进
|
||||
</div>
|
||||
<div class="code-name">.iconqianjin</div>
|
||||
<div class="code-name">.iconqianjin
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -535,7 +555,8 @@
|
||||
<div class="name">
|
||||
恢复默认
|
||||
</div>
|
||||
<div class="code-name">.iconhuifumoren</div>
|
||||
<div class="code-name">.iconhuifumoren
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -543,7 +564,8 @@
|
||||
<div class="name">
|
||||
换行
|
||||
</div>
|
||||
<div class="code-name">.iconhuanhang</div>
|
||||
<div class="code-name">.iconhuanhang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -551,7 +573,8 @@
|
||||
<div class="name">
|
||||
缩小
|
||||
</div>
|
||||
<div class="code-name">.iconsuoxiao</div>
|
||||
<div class="code-name">.iconsuoxiao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -559,7 +582,8 @@
|
||||
<div class="name">
|
||||
编辑
|
||||
</div>
|
||||
<div class="code-name">.iconbianji</div>
|
||||
<div class="code-name">.iconbianji
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -567,7 +591,8 @@
|
||||
<div class="name">
|
||||
放大
|
||||
</div>
|
||||
<div class="code-name">.iconfangda</div>
|
||||
<div class="code-name">.iconfangda
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -575,7 +600,8 @@
|
||||
<div class="name">
|
||||
全屏
|
||||
</div>
|
||||
<div class="code-name">.iconquanping1</div>
|
||||
<div class="code-name">.iconquanping1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -583,7 +609,8 @@
|
||||
<div class="name">
|
||||
定位
|
||||
</div>
|
||||
<div class="code-name">.icondingwei</div>
|
||||
<div class="code-name">.icondingwei
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -591,7 +618,8 @@
|
||||
<div class="name">
|
||||
导航
|
||||
</div>
|
||||
<div class="code-name">.icondaohang</div>
|
||||
<div class="code-name">.icondaohang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -599,7 +627,8 @@
|
||||
<div class="name">
|
||||
键盘
|
||||
</div>
|
||||
<div class="code-name">.iconjianpan</div>
|
||||
<div class="code-name">.iconjianpan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -607,7 +636,8 @@
|
||||
<div class="name">
|
||||
全屏
|
||||
</div>
|
||||
<div class="code-name">.iconquanping</div>
|
||||
<div class="code-name">.iconquanping
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -615,7 +645,8 @@
|
||||
<div class="name">
|
||||
导出
|
||||
</div>
|
||||
<div class="code-name">.icondaochu</div>
|
||||
<div class="code-name">.icondaochu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -623,7 +654,8 @@
|
||||
<div class="name">
|
||||
标签
|
||||
</div>
|
||||
<div class="code-name">.iconbiaoqian</div>
|
||||
<div class="code-name">.iconbiaoqian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -631,7 +663,8 @@
|
||||
<div class="name">
|
||||
流程-备注
|
||||
</div>
|
||||
<div class="code-name">.iconflow-Mark</div>
|
||||
<div class="code-name">.iconflow-Mark
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -639,7 +672,8 @@
|
||||
<div class="name">
|
||||
超链接
|
||||
</div>
|
||||
<div class="code-name">.iconchaolianjie</div>
|
||||
<div class="code-name">.iconchaolianjie
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -647,7 +681,8 @@
|
||||
<div class="name">
|
||||
主题
|
||||
</div>
|
||||
<div class="code-name">.iconjingzi</div>
|
||||
<div class="code-name">.iconjingzi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -655,7 +690,8 @@
|
||||
<div class="name">
|
||||
笑脸
|
||||
</div>
|
||||
<div class="code-name">.iconxiaolian</div>
|
||||
<div class="code-name">.iconxiaolian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -663,7 +699,8 @@
|
||||
<div class="name">
|
||||
图 片
|
||||
</div>
|
||||
<div class="code-name">.iconimage</div>
|
||||
<div class="code-name">.iconimage
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -671,7 +708,8 @@
|
||||
<div class="name">
|
||||
结构
|
||||
</div>
|
||||
<div class="code-name">.iconjiegou</div>
|
||||
<div class="code-name">.iconjiegou
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -679,7 +717,8 @@
|
||||
<div class="name">
|
||||
样式
|
||||
</div>
|
||||
<div class="code-name">.iconyangshi</div>
|
||||
<div class="code-name">.iconyangshi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -687,7 +726,8 @@
|
||||
<div class="name">
|
||||
符号-大纲树
|
||||
</div>
|
||||
<div class="code-name">.iconfuhao-dagangshu</div>
|
||||
<div class="code-name">.iconfuhao-dagangshu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -695,7 +735,8 @@
|
||||
<div class="name">
|
||||
添加子节点
|
||||
</div>
|
||||
<div class="code-name">.icontianjiazijiedian</div>
|
||||
<div class="code-name">.icontianjiazijiedian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -703,7 +744,8 @@
|
||||
<div class="name">
|
||||
节点
|
||||
</div>
|
||||
<div class="code-name">.iconjiedian</div>
|
||||
<div class="code-name">.iconjiedian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -711,7 +753,8 @@
|
||||
<div class="name">
|
||||
删 除
|
||||
</div>
|
||||
<div class="code-name">.iconshanchu</div>
|
||||
<div class="code-name">.iconshanchu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -719,7 +762,8 @@
|
||||
<div class="name">
|
||||
HTSCIT_展开
|
||||
</div>
|
||||
<div class="code-name">.iconzhankai</div>
|
||||
<div class="code-name">.iconzhankai
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -727,47 +771,53 @@
|
||||
<div class="name">
|
||||
HTSCIT_展开2
|
||||
</div>
|
||||
<div class="code-name">.iconzhankai1</div>
|
||||
<div class="code-name">.iconzhankai1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr />
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
|
||||
书写不直观，语意不明确的问题。
|
||||
</p>
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>
|
||||
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
|
||||
是什么。
|
||||
</li>
|
||||
<li>
|
||||
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
|
||||
里面的 Unicode 引用。
|
||||
</li>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">
|
||||
第一步：引入项目下面生成的 fontclass 代码：
|
||||
</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont iconxxx"></span>
|
||||
<pre><code class="language-html"><span class="iconfont iconxxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>
|
||||
" iconfont" 是你项目下的
|
||||
font-family。可以通过编辑项目查看，默认是 "iconfont"。
|
||||
</p>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#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">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icondaochu1"></use>
|
||||
@ -1111,33 +1161,26 @@
|
||||
<div class="name">HTSCIT_展开2</div>
|
||||
<div class="code-name">#iconzhankai1</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr />
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
|
||||
href=""
|
||||
>文章</a
|
||||
>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
|
||||
</p>
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>
|
||||
通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
|
||||
<code>color</code> 来调整样式。
|
||||
</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"><script src="./iconfont.js"></script>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@ -1148,19 +1191,20 @@
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function(e) {
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
@ -1170,13 +1214,10 @@
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent
|
||||
.hide()
|
||||
.eq(index)
|
||||
.fadeIn()
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,186 +1,195 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 2479351 */
|
||||
src: url('iconfont.woff2?t=1664005697217') format('woff2'),
|
||||
url('iconfont.woff?t=1664005697217') format('woff'),
|
||||
url('iconfont.ttf?t=1664005697217') format('truetype');
|
||||
font-family: "iconfont"; /* Project id 2479351 */
|
||||
src: url('iconfont.woff2?t=1668512547595') format('woff2'),
|
||||
url('iconfont.woff?t=1668512547595') format('woff'),
|
||||
url('iconfont.ttf?t=1668512547595') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: 'iconfont' !important;
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.iconchoose1:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.iconzhuti:before {
|
||||
content: "\e7aa";
|
||||
}
|
||||
|
||||
.icondaochu1:before {
|
||||
content: '\e63e';
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.iconlingcunwei:before {
|
||||
content: '\e657';
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.iconexport:before {
|
||||
content: '\e642';
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icondakai:before {
|
||||
content: '\ebdf';
|
||||
content: "\ebdf";
|
||||
}
|
||||
|
||||
.iconxinjian:before {
|
||||
content: '\e64e';
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.iconjianqie:before {
|
||||
content: '\e601';
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.iconzhengli:before {
|
||||
content: '\e83b';
|
||||
content: "\e83b";
|
||||
}
|
||||
|
||||
.iconfuzhi:before {
|
||||
content: '\e604';
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.iconniantie:before {
|
||||
content: '\e63f';
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.iconshangyi:before {
|
||||
content: '\e6be';
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.iconxiayi:before {
|
||||
content: '\e6bf';
|
||||
content: "\e6bf";
|
||||
}
|
||||
|
||||
.icongaikuozonglan:before {
|
||||
content: '\e609';
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.iconquanxuan:before {
|
||||
content: '\f199';
|
||||
content: "\f199";
|
||||
}
|
||||
|
||||
.icondaoru:before {
|
||||
content: '\e6a3';
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.iconhoutui-shi:before {
|
||||
content: '\e656';
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.iconqianjin1:before {
|
||||
content: '\e654';
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.iconwithdraw:before {
|
||||
content: '\e603';
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.iconqianjin:before {
|
||||
content: '\e600';
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.iconhuifumoren:before {
|
||||
content: '\e60e';
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.iconhuanhang:before {
|
||||
content: '\e61e';
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.iconsuoxiao:before {
|
||||
content: '\ec13';
|
||||
content: "\ec13";
|
||||
}
|
||||
|
||||
.iconbianji:before {
|
||||
content: '\e626';
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.iconfangda:before {
|
||||
content: '\e663';
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.iconquanping1:before {
|
||||
content: '\e664';
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.icondingwei:before {
|
||||
content: '\e616';
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icondaohang:before {
|
||||
content: '\e611';
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.iconjianpan:before {
|
||||
content: '\e64d';
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.iconquanping:before {
|
||||
content: '\e602';
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icondaochu:before {
|
||||
content: '\e63d';
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.iconbiaoqian:before {
|
||||
content: '\e63c';
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.iconflow-Mark:before {
|
||||
content: '\e65b';
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.iconchaolianjie:before {
|
||||
content: '\e6f4';
|
||||
content: "\e6f4";
|
||||
}
|
||||
|
||||
.iconjingzi:before {
|
||||
content: '\e610';
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.iconxiaolian:before {
|
||||
content: '\e60f';
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.iconimage:before {
|
||||
content: '\e629';
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.iconjiegou:before {
|
||||
content: '\e61d';
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.iconyangshi:before {
|
||||
content: '\e631';
|
||||
content: "\e631";
|
||||
}
|
||||
|
||||
.iconfuhao-dagangshu:before {
|
||||
content: '\e71f';
|
||||
content: "\e71f";
|
||||
}
|
||||
|
||||
.icontianjiazijiedian:before {
|
||||
content: '\e622';
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.iconjiedian:before {
|
||||
content: '\e655';
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.iconshanchu:before {
|
||||
content: '\e696';
|
||||
content: "\e696";
|
||||
}
|
||||
|
||||
.iconzhankai:before {
|
||||
content: '\e64c';
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.iconzhankai1:before {
|
||||
content: '\e673';
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "icon",
|
||||
"description": "思维导图",
|
||||
"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",
|
||||
"name": "导出",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -319,3 +319,37 @@ export const shapeList = [
|
||||
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'
|
||||
}
|
||||
]
|
||||
|
||||
@ -13,7 +13,8 @@ import {
|
||||
backgroundRepeatList as backgroundRepeatListZh,
|
||||
backgroundPositionList as backgroundPositionListZh,
|
||||
shortcutKeyList as shortcutKeyListZh,
|
||||
shapeList as shapeListZh
|
||||
shapeList as shapeListZh,
|
||||
sidebarTriggerList as sidebarTriggerListZh
|
||||
} from './zh'
|
||||
import {
|
||||
fontFamilyList as fontFamilyListEn,
|
||||
@ -22,7 +23,8 @@ import {
|
||||
backgroundRepeatList as backgroundRepeatListEn,
|
||||
backgroundPositionList as backgroundPositionListEn,
|
||||
shortcutKeyList as shortcutKeyListEn,
|
||||
shapeList as shapeListEn
|
||||
shapeList as shapeListEn,
|
||||
sidebarTriggerList as sidebarTriggerListEn
|
||||
} from './en'
|
||||
|
||||
const fontFamilyList = {
|
||||
@ -60,6 +62,11 @@ const shapeList = {
|
||||
en: shapeListEn
|
||||
}
|
||||
|
||||
const sidebarTriggerList = {
|
||||
zh: sidebarTriggerListZh,
|
||||
en: sidebarTriggerListEn
|
||||
}
|
||||
|
||||
export {
|
||||
fontSizeList,
|
||||
lineHeightList,
|
||||
@ -75,5 +82,6 @@ export {
|
||||
backgroundRepeatList,
|
||||
backgroundPositionList,
|
||||
shortcutKeyList,
|
||||
shapeList
|
||||
shapeList,
|
||||
sidebarTriggerList
|
||||
}
|
||||
|
||||
@ -391,3 +391,37 @@ export const langList = [
|
||||
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'
|
||||
}
|
||||
]
|
||||
|
||||
@ -298,6 +298,7 @@ import Color from './Color'
|
||||
import { lineWidthList, lineStyleList, backgroundRepeatList } from '@/config'
|
||||
import ImgUpload from '@/components/ImgUpload'
|
||||
import { storeConfig } from '@/api'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -345,6 +346,8 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['activeSidebar']),
|
||||
|
||||
lineStyleList() {
|
||||
return lineStyleList[this.$i18n.locale] || lineStyleList.zh
|
||||
},
|
||||
@ -352,14 +355,15 @@ export default {
|
||||
return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('showBaseStyle', () => {
|
||||
this.$refs.sidebar.show = false
|
||||
this.$nextTick(() => {
|
||||
watch: {
|
||||
activeSidebar(val) {
|
||||
if (val === 'baseStyle') {
|
||||
this.$refs.sidebar.show = true
|
||||
this.initStyle()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$refs.sidebar.show = false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
:mindMap="mindMap"
|
||||
></NodeNoteContentShow>
|
||||
<NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
|
||||
<SidebarTrigger v-if="!isZenMode"></SidebarTrigger>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -34,6 +35,7 @@ import NodeNoteContentShow from './NodeNoteContentShow.vue'
|
||||
import { getData, storeData, storeConfig } from '@/api'
|
||||
import Navigator from './Navigator.vue'
|
||||
import NodeImgPreview from './NodeImgPreview.vue'
|
||||
import SidebarTrigger from './SidebarTrigger.vue'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
/**
|
||||
@ -55,7 +57,8 @@ export default {
|
||||
Contextmenu,
|
||||
NodeNoteContentShow,
|
||||
Navigator,
|
||||
NodeImgPreview
|
||||
NodeImgPreview,
|
||||
SidebarTrigger
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
<script>
|
||||
import Sidebar from './Sidebar'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
/**
|
||||
* @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() {
|
||||
this.$bus.$on('data_change', data => {
|
||||
this.data = [data]
|
||||
})
|
||||
this.$bus.$on('showOutline', () => {
|
||||
this.$refs.sidebar.show = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.sidebar.show = true
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
<script>
|
||||
import Sidebar from './Sidebar'
|
||||
import { shortcutKeyList } from '@/config'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -37,17 +38,20 @@ export default {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['activeSidebar']),
|
||||
|
||||
shortcutKeyList() {
|
||||
return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('showShortcutKey', () => {
|
||||
this.$refs.sidebar.show = false
|
||||
this.$nextTick(() => {
|
||||
watch: {
|
||||
activeSidebar(val) {
|
||||
if (val === 'shortcutKey') {
|
||||
this.$refs.sidebar.show = true
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$refs.sidebar.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
:class="{ show: show }"
|
||||
: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">
|
||||
{{ title }}
|
||||
</div>
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
<script>
|
||||
import { store } from '@/config'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -43,6 +44,14 @@ export default {
|
||||
this.zIndex = store.sidebarZIndex++
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setActiveSidebar']),
|
||||
|
||||
close() {
|
||||
this.show = false
|
||||
this.setActiveSidebar('')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
107
web/src/pages/Edit/components/SidebarTrigger.vue
Normal file
107
web/src/pages/Edit/components/SidebarTrigger.vue
Normal 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>
|
||||
@ -21,6 +21,7 @@
|
||||
import Sidebar from './Sidebar'
|
||||
import { layoutList } from 'simple-mind-map/src/utils/constant'
|
||||
import { storeConfig } from '@/api'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -43,14 +44,18 @@ export default {
|
||||
layout: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('showStructure', () => {
|
||||
this.$refs.sidebar.show = false
|
||||
this.$nextTick(() => {
|
||||
computed: {
|
||||
...mapState(['activeSidebar'])
|
||||
},
|
||||
watch: {
|
||||
activeSidebar(val) {
|
||||
if (val === 'structure') {
|
||||
this.layout = this.mindMap.getLayout()
|
||||
this.$refs.sidebar.show = true
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$refs.sidebar.show = false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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-tab-pane :label="$t('style.normal')" name="normal"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('style.active')" name="active"></el-tab-pane>
|
||||
@ -367,6 +367,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tipBox" v-else>
|
||||
<div class="tipIcon iconfont icontianjiazijiedian"></div>
|
||||
<div class="tipText">请选择一个节点</div>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
@ -383,6 +387,7 @@ import {
|
||||
shapeList
|
||||
} from '@/config'
|
||||
import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -429,6 +434,8 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['activeSidebar']),
|
||||
|
||||
fontFamilyList() {
|
||||
return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
|
||||
},
|
||||
@ -439,6 +446,15 @@ export default {
|
||||
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() {
|
||||
this.$bus.$on('node_active', this.onNodeActive)
|
||||
},
|
||||
@ -452,12 +468,9 @@ export default {
|
||||
* @Desc: 监听节点激活事件
|
||||
*/
|
||||
onNodeActive(...args) {
|
||||
if (this.$refs.sidebar) this.$refs.sidebar.show = false
|
||||
this.$nextTick(() => {
|
||||
this.activeTab = 'normal'
|
||||
this.activeNodes = args[1]
|
||||
if (this.$refs.sidebar)
|
||||
this.$refs.sidebar.show = this.activeNodes.length > 0
|
||||
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 {
|
||||
padding: 20px;
|
||||
padding-top: 10px;
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
import Sidebar from './Sidebar'
|
||||
import { themeList } from 'simple-mind-map/src/utils/constant'
|
||||
import { storeConfig } from '@/api'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -43,14 +44,18 @@ export default {
|
||||
theme: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('showTheme', () => {
|
||||
this.$refs.sidebar.show = false
|
||||
this.$nextTick(() => {
|
||||
computed: {
|
||||
...mapState(['activeSidebar'])
|
||||
},
|
||||
watch: {
|
||||
activeSidebar(val) {
|
||||
if (val === 'theme') {
|
||||
this.theme = this.mindMap.getTheme()
|
||||
this.$refs.sidebar.show = true
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$refs.sidebar.show = false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
||||
@ -114,25 +114,6 @@
|
||||
<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">{{ $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="toolbarBtn" @click="createNewLocalFile">
|
||||
@ -155,10 +136,6 @@
|
||||
<span class="icon iconfont iconexport"></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">{{ $t('toolbar.shortcutKey') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NodeImage></NodeImage>
|
||||
|
||||
@ -12,7 +12,8 @@ const store = new Vuex.Store({
|
||||
localConfig: {
|
||||
// 本地配置
|
||||
isZenMode: false // 是否是禅模式
|
||||
}
|
||||
},
|
||||
activeSidebar: '' // 当前显示的侧边栏
|
||||
},
|
||||
mutations: {
|
||||
/**
|
||||
@ -46,6 +47,16 @@ const store = new Vuex.Store({
|
||||
...data
|
||||
}
|
||||
storeLocalConfig(state.localConfig)
|
||||
},
|
||||
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林25
|
||||
* @Date: 2022-11-15 19:25:26
|
||||
* @Desc: 设置当前显示的侧边栏
|
||||
*/
|
||||
setActiveSidebar(state, data) {
|
||||
state.activeSidebar = data
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user