From 9e5f37ed03efdde3db951a6fa71aa9864a95c063 Mon Sep 17 00:00:00 2001 From: "du.meimei" Date: Wed, 23 Apr 2025 15:34:33 +0800 Subject: [PATCH] =?UTF-8?q?feat):(src=20=E6=B7=BB=E5=8A=A0=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=AD=97=E4=BD=93=E5=BC=95=E7=94=A8=E5=92=8C=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 App.vue 中添加 iconfont.css 的引用 - 新增 demo.css 文件，包含图标字体的详细样式定义 - 添加 demo_index.html 文件，用于展示图标字体的使用示例 - 新增 iconfont.css 文件，定义图标字体的基本样式和字符映射 --- src/App.vue | 1 + src/fonts/demo.css | 536 ++++++++++++++++++ src/fonts/demo_index.html | 320 +++++++++++ src/fonts/iconfont.css | 37 ++ src/fonts/iconfont.js | 63 ++ src/fonts/iconfont.json | 51 ++ src/fonts/iconfont.ttf | Bin 0 -> 4028 bytes src/fonts/iconfont.woff | Bin 0 -> 2780 bytes src/fonts/iconfont.woff2 | Bin 0 -> 2288 bytes src/router/generatedRouter/index.js | 16 +- .../app/layout/components/Sidebar/Sidebar.vue | 38 +- 11 files changed, 1027 insertions(+), 35 deletions(-) create mode 100644 src/fonts/demo.css create mode 100644 src/fonts/demo_index.html create mode 100644 src/fonts/iconfont.css create mode 100644 src/fonts/iconfont.js create mode 100644 src/fonts/iconfont.json create mode 100644 src/fonts/iconfont.ttf create mode 100644 src/fonts/iconfont.woff create mode 100644 src/fonts/iconfont.woff2 diff --git a/src/App.vue b/src/App.vue index 7bcc919..9af76c8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,4 +13,5 @@ export default { diff --git a/src/fonts/demo.css b/src/fonts/demo.css new file mode 100644 index 0000000..a42a51f --- /dev/null +++ b/src/fonts/demo.css @@ -0,0 +1,536 @@ +/* Logo 字体 */ +@font-face { + font-family: 'iconfont logo'; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: 'iconfont logo'; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown > p, +.markdown > blockquote, +.markdown > .highlight, +.markdown > ol, +.markdown > ul { + width: 80%; +} + +.markdown ul > li { + list-style: circle; +} + +.markdown > ul li, +.markdown blockquote ul > li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown > ul li p, +.markdown > ol li p { + margin: 0.6em 0; +} + +.markdown ol > li { + list-style: decimal; +} + +.markdown > ol li, +.markdown blockquote ol > li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown > table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown > table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown > table th, +.markdown > table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown > table th { + background: #f7f7f7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown > br, +.markdown > p > br { + clear: both; +} + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*='language-'], +pre[class*='language-'] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*='language-'], +pre[class*='language-'] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: 0.7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, 0.5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #dd4a68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/fonts/demo_index.html b/src/fonts/demo_index.html new file mode 100644 index 0000000..f3e7c31 --- /dev/null +++ b/src/fonts/demo_index.html @@ -0,0 +1,320 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 +
+
+
+
    +
  • + +
    主页
    +
    
    +
    • + +
  • + +
    定位
    +
    
    +
    • + +
  • + +
    技术支持
    +
    
    +
    • + +
  • + +
    灯泡
    +
    
    +
    • + +
  • + +
    规则设置
    +
    
    +
    • + +
  • + +
    笔记本电脑
    +
    
    +
    • +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

+ 
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1745388823017') format('woff2'),
+       url('iconfont.woff?t=1745388823017') format('woff'),
+       url('iconfont.ttf?t=1745388823017') format('truetype');
+}
+
+

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

+ 
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

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

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

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

+
+
+
+
+
    +
  • + +
    + 主页 +
    +
    .icon-zhuye
    +
    • + +
  • + +
    + 定位 +
    +
    .icon-dingwei
    +
    • + +
  • + +
    + 技术支持 +
    +
    .icon-dengpao
    +
    • + +
  • + +
    + 灯泡 +
    +
    .icon-dengpao1
    +
    • + +
  • + +
    + 规则设置 +
    +
    .icon-guizeshezhi
    +
    • + +
  • + +
    + 笔记本电脑 +
    +
    .icon-notebook
    +
    • +
+
+

font-class 引用

+
+ +

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

+

与 Unicode 使用方式相比，具有如下特点：

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

使用步骤如下：

+

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

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

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

+ 
<span class="iconfont icon-xxx"></span>
+
+
+

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

+
+
+
+
+
    +
  • + +
    主页
    +
    #icon-zhuye
    +
    • + +
  • + +
    定位
    +
    #icon-dingwei
    +
    • + +
  • + +
    技术支持
    +
    #icon-dengpao
    +
    • + +
  • + +
    灯泡
    +
    #icon-dengpao1
    +
    • + +
  • + +
    规则设置
    +
    #icon-guizeshezhi
    +
    • + +
  • + +
    笔记本电脑
    +
    #icon-notebook
    +
    • +
+
+

Symbol 引用

+
+ +

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

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

使用步骤如下：

+

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

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

第二步：加入通用 CSS 代码（引入一次就行）：

+ 
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

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

+ 
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+
+
+ + + diff --git a/src/fonts/iconfont.css b/src/fonts/iconfont.css new file mode 100644 index 0000000..6f36aa4 --- /dev/null +++ b/src/fonts/iconfont.css @@ -0,0 +1,37 @@ +@font-face { + font-family: 'iconfont'; /* Project id 4902894 */ + src: url('iconfont.woff2?t=1742281383675') format('woff2'), url('iconfont.woff?t=1742281383675') format('woff'), + url('iconfont.ttf?t=1742281383675') format('truetype'); +} + +.iconfont { + font-family: 'iconfont' !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-zhuye:before { + content: '\e65e'; +} + +.icon-dingwei:before { + content: '\e629'; +} + +.icon-dengpao:before { + content: '\e69c'; +} + +.icon-dengpao1:before { + content: '\e67f'; +} + +.icon-guizeshezhi:before { + content: '\e6dc'; +} + +.icon-notebook:before { + content: '\e923'; +} diff --git a/src/fonts/iconfont.js b/src/fonts/iconfont.js new file mode 100644 index 0000000..56689c7 --- /dev/null +++ b/src/fonts/iconfont.js @@ -0,0 +1,63 @@ +;(window._iconfont_svg_string_4902894 = + ''), + (e => { + var c = (t = (t = document.getElementsByTagName('script'))[t.length - 1]).getAttribute('data-injectcss'), + t = t.getAttribute('data-disable-injectsvg') + if (!t) { + var l, + i, + o, + n, + a, + h = function(c, t) { + t.parentNode.insertBefore(c, t) + } + if (c && !e.__iconfont__svg__cssinject__) { + e.__iconfont__svg__cssinject__ = !0 + try { + document.write('') + } catch (c) { + console && console.log(c) + } + } + ;(l = function() { + var c, + t = document.createElement('div') + ;(t.innerHTML = e._iconfont_svg_string_4902894), + (t = t.getElementsByTagName('svg')[0]) && + (t.setAttribute('aria-hidden', 'true'), + (t.style.position = 'absolute'), + (t.style.width = 0), + (t.style.height = 0), + (t.style.overflow = 'hidden'), + (t = t), + (c = document.body).firstChild ? h(t, c.firstChild) : c.appendChild(t)) + }), + document.addEventListener + ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) + ? setTimeout(l, 0) + : ((i = function() { + document.removeEventListener('DOMContentLoaded', i, !1), l() + }), + document.addEventListener('DOMContentLoaded', i, !1)) + : document.attachEvent && + ((o = l), + (n = e.document), + (a = !1), + d(), + (n.onreadystatechange = function() { + 'complete' == n.readyState && ((n.onreadystatechange = null), s()) + })) + } + function s() { + a || ((a = !0), o()) + } + function d() { + try { + n.documentElement.doScroll('left') + } catch (c) { + return void setTimeout(d, 50) + } + s() + } + })(window) diff --git a/src/fonts/iconfont.json b/src/fonts/iconfont.json new file mode 100644 index 0000000..34fd659 --- /dev/null +++ b/src/fonts/iconfont.json @@ -0,0 +1,51 @@ +{ + "id": "4902894", + "name": "knowledge", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "4320362", + "name": "主页", + "font_class": "zhuye", + "unicode": "e65e", + "unicode_decimal": 58974 + }, + { + "icon_id": "8765144", + "name": "定位", + "font_class": "dingwei", + "unicode": "e629", + "unicode_decimal": 58921 + }, + { + "icon_id": "9652678", + "name": "技术支持", + "font_class": "dengpao", + "unicode": "e69c", + "unicode_decimal": 59036 + }, + { + "icon_id": "13277451", + "name": "灯泡", + "font_class": "dengpao1", + "unicode": "e67f", + "unicode_decimal": 59007 + }, + { + "icon_id": "13584358", + "name": "规则设置", + "font_class": "guizeshezhi", + "unicode": "e6dc", + "unicode_decimal": 59100 + }, + { + "icon_id": "18169542", + "name": "笔记本电脑", + "font_class": "notebook", + "unicode": "e923", + "unicode_decimal": 59683 + } + ] +} diff --git a/src/fonts/iconfont.ttf b/src/fonts/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..128c524600fcd05e54b504f57acdb0578c4a3427 GIT binary patch literal 4028 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 KAP~c10RRAl import('@/views/dify/views/workflow/index.vue'), meta: { title: 'Dify', - icon: 'el-icon-home' + icon: 'icon-notebook' } } ] diff --git a/src/views/app/layout/components/Sidebar/Sidebar.vue b/src/views/app/layout/components/Sidebar/Sidebar.vue index 28d8276..337f8df 100644 --- a/src/views/app/layout/components/Sidebar/Sidebar.vue +++ b/src/views/app/layout/components/Sidebar/Sidebar.vue @@ -11,29 +11,7 @@ :class="{ active: activeParent === route.path }" @click="selectParentMenu(route)" > - - - - - - - + {{ route.meta ? route.meta.title : '' }} @@ -53,7 +31,7 @@ :class="{ active: activeMenu === subItem.path }" @click="navigateTo(subItem.path)" > - + {{ subItem.meta ? subItem.meta.title : subItem.name || 'Unnamed Item' }} @@ -270,9 +248,12 @@ export default { &:hover, &.active { + color: #4d64ff; + background-color: #f8f8fa; + } + &.active span { color: #000; font-weight: bold; - background-color: #f8f8fa; } .svg-icon { @@ -313,7 +294,7 @@ export default { padding: 0 20px; display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; cursor: pointer; color: #000; margin-bottom: 5px; @@ -322,9 +303,12 @@ export default { &:hover, &.active { + color: #4d64ff; + background-color: #f8f8fa; + } + &.active span { color: #000; font-weight: bold; - background-color: #f8f8fa; } .svg-icon {