diff --git a/web/src/assets/icon-font/demo.css b/web/src/assets/icon-font/demo.css index 54f3c06c..a67054a0 100644 --- a/web/src/assets/icon-font/demo.css +++ b/web/src/assets/icon-font/demo.css @@ -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, diff --git a/web/src/assets/icon-font/demo_index.html b/web/src/assets/icon-font/demo_index.html index d1d52fef..90c0ab8d 100644 --- a/web/src/assets/icon-font/demo_index.html +++ b/web/src/assets/icon-font/demo_index.html @@ -1,368 +1,354 @@ - - - iconfont Demo - - - - - - - - - - - - - -
-

- - - -

- -
-
+ .main .logo .sub-title { + margin-left: 0.5em; + font-size: 22px; + color: #fff; + background: linear-gradient(-45deg, #3967FF, #B500FE); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + + +
+

+ + +

+ +
+
    + +
  • + +
    选择
    +
    
    +
  • + +
  • + +
    主题
    +
    
    +
  • +
  • -
    导出
    -
    
    -
  • - +
    导出
    +
    
    + +
  • -
    另存为
    -
    
    -
  • - +
    另存为
    +
    
    + +
  • -
    export
    -
    
    -
  • - +
    export
    +
    
    + +
  • -
    打开
    -
    
    -
  • - +
    打开
    +
    
    + +
  • -
    新建
    -
    
    -
  • - +
    新建
    +
    
    + +
  • -
    剪切
    -
    
    -
  • - +
    剪切
    +
    
    + +
  • -
    整理
    -
    
    -
  • - +
    整理
    +
    
    + +
  • -
    复制
    -
    
    -
  • - +
    复制
    +
    
    + +
  • -
    粘贴
    -
    
    -
  • - +
    粘贴
    +
    
    + +
  • -
    上移
    -
    
    -
  • - +
    上移
    +
    
    + +
  • -
    下移
    -
    
    -
  • - +
    下移
    +
    
    + +
  • -
    概括总览
    -
    
    -
  • - +
    概括总览
    +
    
    + +
  • -
    全选
    -
    
    -
  • - +
    全选
    +
    
    + +
  • -
    导入
    -
    
    -
  • - +
    导入
    +
    
    + +
  • -
    后退-实
    -
    
    -
  • - +
    后退-实
    +
    
    + +
  • -
    前进
    -
    
    -
  • - +
    前进
    +
    
    + +
  • -
    撤回
    -
    
    -
  • - +
    撤回
    +
    
    + +
  • -
    前进
    -
    
    -
  • - +
    前进
    +
    
    + +
  • -
    恢复默认
    -
    
    -
  • - +
    恢复默认
    +
    
    + +
  • -
    换行
    -
    
    -
  • - +
    换行
    +
    
    + +
  • -
    缩小
    -
    
    -
  • - +
    缩小
    +
    
    + +
  • -
    编辑
    -
    
    -
  • - +
    编辑
    +
    
    + +
  • -
    放大
    -
    
    -
  • - +
    放大
    +
    
    + +
  • -
    全屏
    -
    
    -
  • - +
    全屏
    +
    
    + +
  • -
    定位
    -
    
    -
  • - +
    定位
    +
    
    + +
  • -
    导航
    -
    
    -
  • - +
    导航
    +
    
    + +
  • -
    键盘
    -
    
    -
  • - +
    键盘
    +
    
    + +
  • -
    全屏
    -
    
    -
  • - +
    全屏
    +
    
    + +
  • -
    导出
    -
    
    -
  • - +
    导出
    +
    
    + +
  • -
    标签
    -
    
    -
  • - +
    标签
    +
    
    + +
  • -
    流程-备注
    -
    
    -
  • - +
    流程-备注
    +
    
    + +
  • -
    超链接
    -
    
    -
  • - +
    超链接
    +
    
    + +
  • -
    主题
    -
    
    -
  • - +
    主题
    +
    
    + +
  • -
    笑脸
    -
    
    -
  • - +
    笑脸
    +
    
    + +
  • -
    图 片
    -
    
    -
  • - +
    图 片
    +
    
    + +
  • -
    结构
    -
    
    -
  • - +
    结构
    +
    
    + +
  • -
    样式
    -
    
    -
  • - +
    样式
    +
    
    + +
  • -
    符号-大纲树
    -
    
    -
  • - +
    符号-大纲树
    +
    
    + +
  • -
    添加子节点
    -
    
    -
  • - +
    添加子节点
    +
    
    + +
  • -
    节点
    -
    
    -
  • - +
    节点
    +
    
    + +
  • -
    删 除
    -
    
    -
  • - +
    删 除
    +
    
    + +
  • -
    HTSCIT_展开
    -
    
    -
  • - +
    HTSCIT_展开
    +
    
    + +
  • -
    HTSCIT_展开2
    -
    
    -
  • +
    HTSCIT_展开2
    +
    
    + +
-

Unicode 引用

-
+

Unicode 引用

+
-

Unicode 是字体在网页端最原始的应用方式,特点是:

-
    -
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • -
  • 默认情况下不支持多色,直接添加多色图标会自动去色。
  • -
-
-

- 注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol - 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。) -

-
-

Unicode 使用步骤如下:

-

- 第一步:拷贝项目下面生成的 @font-face -

-
Unicode 是字体在网页端最原始的应用方式,特点是:

+
    +
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • +
  • 默认情况下不支持多色,直接添加多色图标会自动去色。
  • +
+
+

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

+
+

Unicode 使用步骤如下:

+

第一步:拷贝项目下面生成的 @font-face

+
@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');
 }
 
-

第二步:定义使用 iconfont 的样式

-
第二步:定义使用 iconfont 的样式
+
.iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -371,773 +357,830 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-

第三步:挑选相应图标并获取字体编码,应用于页面

-
+          

第三步:挑选相应图标并获取字体编码,应用于页面

+
 <span class="iconfont">&#x33;</span>
 
-
-

- "iconfont" 是你项目下的 - font-family。可以通过编辑项目查看,默认是 "iconfont"。 -

-
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
-
-
+
+
+
    + +
  • + +
    + 选择 +
    +
    .iconchoose1 +
    +
  • + +
  • + +
    + 主题 +
    +
    .iconzhuti +
    +
  • + +
  • + +
    + 导出 +
    +
    .icondaochu1 +
    +
  • + +
  • + +
    + 另存为 +
    +
    .iconlingcunwei +
    +
  • + +
  • + +
    + export +
    +
    .iconexport +
    +
  • + +
  • + +
    + 打开 +
    +
    .icondakai +
    +
  • + +
  • + +
    + 新建 +
    +
    .iconxinjian +
    +
  • + +
  • + +
    + 剪切 +
    +
    .iconjianqie +
    +
  • + +
  • + +
    + 整理 +
    +
    .iconzhengli +
    +
  • + +
  • + +
    + 复制 +
    +
    .iconfuzhi +
    +
  • + +
  • + +
    + 粘贴 +
    +
    .iconniantie +
    +
  • + +
  • + +
    + 上移 +
    +
    .iconshangyi +
    +
  • + +
  • + +
    + 下移 +
    +
    .iconxiayi +
    +
  • + +
  • + +
    + 概括总览 +
    +
    .icongaikuozonglan +
    +
  • + +
  • + +
    + 全选 +
    +
    .iconquanxuan +
    +
  • + +
  • + +
    + 导入 +
    +
    .icondaoru +
    +
  • + +
  • + +
    + 后退-实 +
    +
    .iconhoutui-shi +
    +
  • + +
  • + +
    + 前进 +
    +
    .iconqianjin1 +
    +
  • + +
  • + +
    + 撤回 +
    +
    .iconwithdraw +
    +
  • + +
  • + +
    + 前进 +
    +
    .iconqianjin +
    +
  • + +
  • + +
    + 恢复默认 +
    +
    .iconhuifumoren +
    +
  • + +
  • + +
    + 换行 +
    +
    .iconhuanhang +
    +
  • + +
  • + +
    + 缩小 +
    +
    .iconsuoxiao +
    +
  • + +
  • + +
    + 编辑 +
    +
    .iconbianji +
    +
  • + +
  • + +
    + 放大 +
    +
    .iconfangda +
    +
  • + +
  • + +
    + 全屏 +
    +
    .iconquanping1 +
    +
  • + +
  • + +
    + 定位 +
    +
    .icondingwei +
    +
  • + +
  • + +
    + 导航 +
    +
    .icondaohang +
    +
  • + +
  • + +
    + 键盘 +
    +
    .iconjianpan +
    +
  • + +
  • + +
    + 全屏 +
    +
    .iconquanping +
    +
  • + +
  • + +
    + 导出 +
    +
    .icondaochu +
    +
  • + +
  • + +
    + 标签 +
    +
    .iconbiaoqian +
    +
  • + +
  • + +
    + 流程-备注 +
    +
    .iconflow-Mark +
    +
  • + +
  • + +
    + 超链接 +
    +
    .iconchaolianjie +
    +
  • + +
  • + +
    + 主题 +
    +
    .iconjingzi +
    +
  • + +
  • + +
    + 笑脸 +
    +
    .iconxiaolian +
    +
  • + +
  • + +
    + 图 片 +
    +
    .iconimage +
    +
  • + +
  • + +
    + 结构 +
    +
    .iconjiegou +
    +
  • + +
  • + +
    + 样式 +
    +
    .iconyangshi +
    +
  • + +
  • + +
    + 符号-大纲树 +
    +
    .iconfuhao-dagangshu +
    +
  • + +
  • + +
    + 添加子节点 +
    +
    .icontianjiazijiedian +
    +
  • + +
  • + +
    + 节点 +
    +
    .iconjiedian +
    +
  • + +
  • + +
    + 删 除 +
    +
    .iconshanchu +
    +
  • + +
  • + +
    + HTSCIT_展开 +
    +
    .iconzhankai +
    +
  • + +
  • + +
    + HTSCIT_展开2 +
    +
    .iconzhankai1 +
    +
  • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

+

与 Unicode 使用方式相比,具有如下特点:

+
    +
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • +
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 fontclass 代码:

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步:挑选相应图标并获取类名,应用于页面:

+
<span class="iconfont iconxxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
    +
  • - -
    - 导出 -
    -
    .icondaochu1
    + +
    选择
    +
    #iconchoose1
  • - +
  • - -
    - 另存为 -
    -
    .iconlingcunwei
    + +
    主题
    +
    #iconzhuti
  • - +
  • - -
    - export -
    -
    .iconexport
    + +
    导出
    +
    #icondaochu1
  • - +
  • - -
    - 打开 -
    -
    .icondakai
    + +
    另存为
    +
    #iconlingcunwei
  • - +
  • - -
    - 新建 -
    -
    .iconxinjian
    + +
    export
    +
    #iconexport
  • - +
  • - -
    - 剪切 -
    -
    .iconjianqie
    + +
    打开
    +
    #icondakai
  • - +
  • - -
    - 整理 -
    -
    .iconzhengli
    + +
    新建
    +
    #iconxinjian
  • - +
  • - -
    - 复制 -
    -
    .iconfuzhi
    + +
    剪切
    +
    #iconjianqie
  • - +
  • - -
    - 粘贴 -
    -
    .iconniantie
    + +
    整理
    +
    #iconzhengli
  • - +
  • - -
    - 上移 -
    -
    .iconshangyi
    + +
    复制
    +
    #iconfuzhi
  • - +
  • - -
    - 下移 -
    -
    .iconxiayi
    + +
    粘贴
    +
    #iconniantie
  • - +
  • - -
    - 概括总览 -
    -
    .icongaikuozonglan
    + +
    上移
    +
    #iconshangyi
  • - +
  • - -
    - 全选 -
    -
    .iconquanxuan
    + +
    下移
    +
    #iconxiayi
  • - +
  • - -
    - 导入 -
    -
    .icondaoru
    + +
    概括总览
    +
    #icongaikuozonglan
  • - +
  • - -
    - 后退-实 -
    -
    .iconhoutui-shi
    + +
    全选
    +
    #iconquanxuan
  • - +
  • - -
    - 前进 -
    -
    .iconqianjin1
    + +
    导入
    +
    #icondaoru
  • - +
  • - -
    - 撤回 -
    -
    .iconwithdraw
    + +
    后退-实
    +
    #iconhoutui-shi
  • - +
  • - -
    - 前进 -
    -
    .iconqianjin
    + +
    前进
    +
    #iconqianjin1
  • - +
  • - -
    - 恢复默认 -
    -
    .iconhuifumoren
    + +
    撤回
    +
    #iconwithdraw
  • - +
  • - -
    - 换行 -
    -
    .iconhuanhang
    + +
    前进
    +
    #iconqianjin
  • - +
  • - -
    - 缩小 -
    -
    .iconsuoxiao
    + +
    恢复默认
    +
    #iconhuifumoren
  • - +
  • - -
    - 编辑 -
    -
    .iconbianji
    + +
    换行
    +
    #iconhuanhang
  • - +
  • - -
    - 放大 -
    -
    .iconfangda
    + +
    缩小
    +
    #iconsuoxiao
  • - +
  • - -
    - 全屏 -
    -
    .iconquanping1
    + +
    编辑
    +
    #iconbianji
  • - +
  • - -
    - 定位 -
    -
    .icondingwei
    + +
    放大
    +
    #iconfangda
  • - +
  • - -
    - 导航 -
    -
    .icondaohang
    + +
    全屏
    +
    #iconquanping1
  • - +
  • - -
    - 键盘 -
    -
    .iconjianpan
    + +
    定位
    +
    #icondingwei
  • - +
  • - -
    - 全屏 -
    -
    .iconquanping
    + +
    导航
    +
    #icondaohang
  • - +
  • - -
    - 导出 -
    -
    .icondaochu
    + +
    键盘
    +
    #iconjianpan
  • - +
  • - -
    - 标签 -
    -
    .iconbiaoqian
    + +
    全屏
    +
    #iconquanping
  • - +
  • - -
    - 流程-备注 -
    -
    .iconflow-Mark
    + +
    导出
    +
    #icondaochu
  • - +
  • - -
    - 超链接 -
    -
    .iconchaolianjie
    + +
    标签
    +
    #iconbiaoqian
  • - +
  • - -
    - 主题 -
    -
    .iconjingzi
    + +
    流程-备注
    +
    #iconflow-Mark
  • - +
  • - -
    - 笑脸 -
    -
    .iconxiaolian
    + +
    超链接
    +
    #iconchaolianjie
  • - +
  • - -
    - 图 片 -
    -
    .iconimage
    + +
    主题
    +
    #iconjingzi
  • - +
  • - -
    - 结构 -
    -
    .iconjiegou
    + +
    笑脸
    +
    #iconxiaolian
  • - +
  • - -
    - 样式 -
    -
    .iconyangshi
    + +
    图 片
    +
    #iconimage
  • - +
  • - -
    - 符号-大纲树 -
    -
    .iconfuhao-dagangshu
    + +
    结构
    +
    #iconjiegou
  • - +
  • - -
    - 添加子节点 -
    -
    .icontianjiazijiedian
    + +
    样式
    +
    #iconyangshi
  • - +
  • - -
    - 节点 -
    -
    .iconjiedian
    + +
    符号-大纲树
    +
    #iconfuhao-dagangshu
  • - +
  • - -
    - 删 除 -
    -
    .iconshanchu
    + +
    添加子节点
    +
    #icontianjiazijiedian
  • - +
  • - -
    - HTSCIT_展开 -
    -
    .iconzhankai
    + +
    节点
    +
    #iconjiedian
  • - +
  • - -
    - HTSCIT_展开2 -
    -
    .iconzhankai1
    + +
    删 除
    +
    #iconshanchu
  • + +
  • + +
    HTSCIT_展开
    +
    #iconzhankai
    +
  • + +
  • + +
    HTSCIT_展开2
    +
    #iconzhankai1
    +
  • +
-

font-class 引用

-
+

Symbol 引用

+
-

- font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode - 书写不直观,语意不明确的问题。 -

-

与 Unicode 使用方式相比,具有如下特点:

-
    -
  • - 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon - 是什么。 -
  • -
  • - 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class - 里面的 Unicode 引用。 -
  • -
-

使用步骤如下:

-

- 第一步:引入项目下面生成的 fontclass 代码: -

-
<link rel="stylesheet" href="./iconfont.css">
-
-

第二步:挑选相应图标并获取类名,应用于页面:

-
<span class="iconfont iconxxx"></span>
-
-
-

- " iconfont" 是你项目下的 - font-family。可以通过编辑项目查看,默认是 "iconfont"。 -

-
-
-
-
-
    -
  • - -
    导出
    -
    #icondaochu1
    -
  • - -
  • - -
    另存为
    -
    #iconlingcunwei
    -
  • - -
  • - -
    export
    -
    #iconexport
    -
  • - -
  • - -
    打开
    -
    #icondakai
    -
  • - -
  • - -
    新建
    -
    #iconxinjian
    -
  • - -
  • - -
    剪切
    -
    #iconjianqie
    -
  • - -
  • - -
    整理
    -
    #iconzhengli
    -
  • - -
  • - -
    复制
    -
    #iconfuzhi
    -
  • - -
  • - -
    粘贴
    -
    #iconniantie
    -
  • - -
  • - -
    上移
    -
    #iconshangyi
    -
  • - -
  • - -
    下移
    -
    #iconxiayi
    -
  • - -
  • - -
    概括总览
    -
    #icongaikuozonglan
    -
  • - -
  • - -
    全选
    -
    #iconquanxuan
    -
  • - -
  • - -
    导入
    -
    #icondaoru
    -
  • - -
  • - -
    后退-实
    -
    #iconhoutui-shi
    -
  • - -
  • - -
    前进
    -
    #iconqianjin1
    -
  • - -
  • - -
    撤回
    -
    #iconwithdraw
    -
  • - -
  • - -
    前进
    -
    #iconqianjin
    -
  • - -
  • - -
    恢复默认
    -
    #iconhuifumoren
    -
  • - -
  • - -
    换行
    -
    #iconhuanhang
    -
  • - -
  • - -
    缩小
    -
    #iconsuoxiao
    -
  • - -
  • - -
    编辑
    -
    #iconbianji
    -
  • - -
  • - -
    放大
    -
    #iconfangda
    -
  • - -
  • - -
    全屏
    -
    #iconquanping1
    -
  • - -
  • - -
    定位
    -
    #icondingwei
    -
  • - -
  • - -
    导航
    -
    #icondaohang
    -
  • - -
  • - -
    键盘
    -
    #iconjianpan
    -
  • - -
  • - -
    全屏
    -
    #iconquanping
    -
  • - -
  • - -
    导出
    -
    #icondaochu
    -
  • - -
  • - -
    标签
    -
    #iconbiaoqian
    -
  • - -
  • - -
    流程-备注
    -
    #iconflow-Mark
    -
  • - -
  • - -
    超链接
    -
    #iconchaolianjie
    -
  • - -
  • - -
    主题
    -
    #iconjingzi
    -
  • - -
  • - -
    笑脸
    -
    #iconxiaolian
    -
  • - -
  • - -
    图 片
    -
    #iconimage
    -
  • - -
  • - -
    结构
    -
    #iconjiegou
    -
  • - -
  • - -
    样式
    -
    #iconyangshi
    -
  • - -
  • - -
    符号-大纲树
    -
    #iconfuhao-dagangshu
    -
  • - -
  • - -
    添加子节点
    -
    #icontianjiazijiedian
    -
  • - -
  • - -
    节点
    -
    #iconjiedian
    -
  • - -
  • - -
    删 除
    -
    #iconshanchu
    -
  • - -
  • - -
    HTSCIT_展开
    -
    #iconzhankai
    -
  • - -
  • - -
    HTSCIT_展开2
    -
    #iconzhankai1
    -
  • +

    这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

    +
      +
    • 支持多色图标了,不再受单色限制。
    • +
    • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
    • +
    • 兼容性较差,支持 IE9+,及现代浏览器。
    • +
    • 浏览器渲染 SVG 的性能一般,还不如 png。
    -
    -

    Symbol 引用

    -
    - -

    - 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 - 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点: -

    -
      -
    • 支持多色图标了,不再受单色限制。
    • -
    • - 通过一些技巧,支持像字体那样,通过 font-size, - color 来调整样式。 -
    • -
    • 兼容性较差,支持 IE9+,及现代浏览器。
    • -
    • 浏览器渲染 SVG 的性能一般,还不如 png。
    • -
    -

    使用步骤如下:

    -

    第一步:引入项目下面生成的 symbol 代码:

    -
    <script src="./iconfont.js"></script>
    +          

    使用步骤如下:

    +

    第一步:引入项目下面生成的 symbol 代码:

    +
    <script src="./iconfont.js"></script>
     
    -

    第二步:加入通用 CSS 代码(引入一次就行):

    -
    <style>
    +          

    第二步:加入通用 CSS 代码(引入一次就行):

    +
    <style>
     .icon {
       width: 1em;
       height: 1em;
    @@ -1147,36 +1190,34 @@
     }
     </style>
     
    -

    第三步:挑选相应图标并获取类名,应用于页面:

    -
    <svg class="icon" aria-hidden="true">
    +          

    第三步:挑选相应图标并获取类名,应用于页面:

    +
    <svg class="icon" aria-hidden="true">
       <use xlink:href="#icon-xxx"></use>
     </svg>
     
    -
+
- - + }) + + diff --git a/web/src/assets/icon-font/iconfont.css b/web/src/assets/icon-font/iconfont.css index 4461587d..eddeb889 100644 --- a/web/src/assets/icon-font/iconfont.css +++ b/web/src/assets/icon-font/iconfont.css @@ -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"; } + diff --git a/web/src/assets/icon-font/iconfont.js b/web/src/assets/icon-font/iconfont.js index 894d6ff8..b6dfda68 100644 --- a/web/src/assets/icon-font/iconfont.js +++ b/web/src/assets/icon-font/iconfont.js @@ -1,68 +1 @@ -(window._iconfont_svg_string_2479351 = - ''), - (function(l) { - var c = (c = document.getElementsByTagName('script'))[c.length - 1], - a = c.getAttribute('data-injectcss'), - c = c.getAttribute('data-disable-injectsvg') - if (!c) { - var h, - t, - i, - o, - s, - z = function(c, a) { - a.parentNode.insertBefore(c, a) - } - if (a && !l.__iconfont__svg__cssinject__) { - l.__iconfont__svg__cssinject__ = !0 - try { - document.write( - '' - ) - } catch (c) { - console && console.log(c) - } - } - (h = function() { - var c, - a = document.createElement('div') - ;(a.innerHTML = l._iconfont_svg_string_2479351), - (a = a.getElementsByTagName('svg')[0]) && - (a.setAttribute('aria-hidden', 'true'), - (a.style.position = 'absolute'), - (a.style.width = 0), - (a.style.height = 0), - (a.style.overflow = 'hidden'), - (a = a), - (c = document.body).firstChild - ? z(a, c.firstChild) - : c.appendChild(a)) - }), - document.addEventListener - ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) - ? setTimeout(h, 0) - : ((t = function() { - document.removeEventListener('DOMContentLoaded', t, !1), h() - }), - document.addEventListener('DOMContentLoaded', t, !1)) - : document.attachEvent && - ((i = h), - (o = l.document), - (s = !1), - d(), - (o.onreadystatechange = function() { - 'complete' == o.readyState && ((o.onreadystatechange = null), v()) - })) - } - function v() { - s || ((s = !0), i()) - } - function d() { - try { - o.documentElement.doScroll('left') - } catch (c) { - return void setTimeout(d, 50) - } - v() - } - })(window) +window._iconfont_svg_string_2479351='',function(l){var c=(c=document.getElementsByTagName("script"))[c.length-1],a=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var h,t,i,o,s,z=function(c,a){a.parentNode.insertBefore(c,a)};if(a&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}h=function(){var c,a=document.createElement("div");a.innerHTML=l._iconfont_svg_string_2479351,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?z(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),h()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(i=h,o=l.document,s=!1,d(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,v())})}function v(){s||(s=!0,i())}function d(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}v()}}(window); \ No newline at end of file diff --git a/web/src/assets/icon-font/iconfont.json b/web/src/assets/icon-font/iconfont.json index 79d5f75f..f39f2aee 100644 --- a/web/src/assets/icon-font/iconfont.json +++ b/web/src/assets/icon-font/iconfont.json @@ -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": "导出", diff --git a/web/src/assets/icon-font/iconfont.ttf b/web/src/assets/icon-font/iconfont.ttf index e1c04654..2d1e5659 100644 Binary files a/web/src/assets/icon-font/iconfont.ttf and b/web/src/assets/icon-font/iconfont.ttf differ diff --git a/web/src/assets/icon-font/iconfont.woff b/web/src/assets/icon-font/iconfont.woff index a68c4bfb..ab09adb3 100644 Binary files a/web/src/assets/icon-font/iconfont.woff and b/web/src/assets/icon-font/iconfont.woff differ diff --git a/web/src/assets/icon-font/iconfont.woff2 b/web/src/assets/icon-font/iconfont.woff2 index bea05a0c..8f420e00 100644 Binary files a/web/src/assets/icon-font/iconfont.woff2 and b/web/src/assets/icon-font/iconfont.woff2 differ diff --git a/web/src/config/en.js b/web/src/config/en.js index 53305ff6..bece8c4e 100644 --- a/web/src/config/en.js +++ b/web/src/config/en.js @@ -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' + } +] diff --git a/web/src/config/index.js b/web/src/config/index.js index cf506c98..20e4549b 100644 --- a/web/src/config/index.js +++ b/web/src/config/index.js @@ -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 } diff --git a/web/src/config/zh.js b/web/src/config/zh.js index b38e164f..1a919f7d 100644 --- a/web/src/config/zh.js +++ b/web/src/config/zh.js @@ -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' + } +] diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 13765843..14b0f8ee 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -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: { /** diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index faf3b1ae..8abb204c 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -16,6 +16,7 @@ :mindMap="mindMap" > +
@@ -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 { diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue index 724a1c50..14d26731 100644 --- a/web/src/pages/Edit/components/Outline.vue +++ b/web/src/pages/Edit/components/Outline.vue @@ -6,6 +6,7 @@ diff --git a/web/src/pages/Edit/components/ShortcutKey.vue b/web/src/pages/Edit/components/ShortcutKey.vue index 3fe30186..247c5d7e 100644 --- a/web/src/pages/Edit/components/ShortcutKey.vue +++ b/web/src/pages/Edit/components/ShortcutKey.vue @@ -22,6 +22,7 @@ diff --git a/web/src/pages/Edit/components/Sidebar.vue b/web/src/pages/Edit/components/Sidebar.vue index e753b4b4..97968017 100644 --- a/web/src/pages/Edit/components/Sidebar.vue +++ b/web/src/pages/Edit/components/Sidebar.vue @@ -5,7 +5,7 @@ :class="{ show: show }" :style="{ zIndex: zIndex }" > - +
{{ title }}
@@ -17,6 +17,7 @@ diff --git a/web/src/pages/Edit/components/SidebarTrigger.vue b/web/src/pages/Edit/components/SidebarTrigger.vue new file mode 100644 index 00000000..e2676f73 --- /dev/null +++ b/web/src/pages/Edit/components/SidebarTrigger.vue @@ -0,0 +1,107 @@ + + + + + diff --git a/web/src/pages/Edit/components/Structure.vue b/web/src/pages/Edit/components/Structure.vue index fb2fee16..aa8bfa45 100644 --- a/web/src/pages/Edit/components/Structure.vue +++ b/web/src/pages/Edit/components/Structure.vue @@ -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: { /** diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue index a10f2861..70fb3a8d 100644 --- a/web/src/pages/Edit/components/Style.vue +++ b/web/src/pages/Edit/components/Style.vue @@ -1,6 +1,6 @@ @@ -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; diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue index 682298da..1c091621 100644 --- a/web/src/pages/Edit/components/Theme.vue +++ b/web/src/pages/Edit/components/Theme.vue @@ -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: { /** diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue index abb08640..fc7759cf 100644 --- a/web/src/pages/Edit/components/Toolbar.vue +++ b/web/src/pages/Edit/components/Toolbar.vue @@ -114,25 +114,6 @@ {{ $t('toolbar.summary') }}
- -
-
- - {{ $t('toolbar.displayOutline') }} -
-
- - {{ $t('toolbar.baseStyle') }} -
-
- - {{ $t('toolbar.theme') }} -
-
- - {{ $t('toolbar.strusture') }} -
-
@@ -155,10 +136,6 @@ {{ $t('toolbar.export') }}
-
- - {{ $t('toolbar.shortcutKey') }} -
diff --git a/web/src/store.js b/web/src/store.js index 1444ac2b..ad4f748d 100644 --- a/web/src/store.js +++ b/web/src/store.js @@ -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: {