kailing
1 year ago
committed by
Gitee
40 changed files with 6462 additions and 7731 deletions
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,602 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>iconfont Demo</title> |
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> |
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
<style> |
||||
.main .logo { |
||||
margin-top: 0; |
||||
height: auto; |
||||
} |
||||
|
||||
.main .logo a { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.main .logo .sub-title { |
||||
margin-left: 0.5em; |
||||
font-size: 22px; |
||||
color: #fff; |
||||
background: linear-gradient(-45deg, #3967FF, #B500FE); |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> |
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> |
||||
|
||||
</a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3636363" 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">&#xe740;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">导入</div> |
||||
<div class="code-name">&#xe741;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">数据统计</div> |
||||
<div class="code-name">&#xe664;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">常规数据统计</div> |
||||
<div class="code-name">&#xe677;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">字体上标</div> |
||||
<div class="code-name">&#xec83;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">字体下标</div> |
||||
<div class="code-name">&#xec85;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">刷新</div> |
||||
<div class="code-name">&#xe782;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">refresh</div> |
||||
<div class="code-name">&#xe6b1;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">图层筛选</div> |
||||
<div class="code-name">&#xe606;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">图层</div> |
||||
<div class="code-name">&#xe63c;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">图层</div> |
||||
<div class="code-name">&#xe613;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">大数据、数据统计-02</div> |
||||
<div class="code-name">&#xe894;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">保存</div> |
||||
<div class="code-name">&#xe63b;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">保存_o</div> |
||||
<div class="code-name">&#xeb47;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">删除</div> |
||||
<div class="code-name">&#xe8b6;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">搜索</div> |
||||
<div class="code-name">&#xe8b9;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">眼睛</div> |
||||
<div class="code-name">&#xe8bf;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">导出-02</div> |
||||
<div class="code-name">&#xe62b;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||
<ul> |
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下：</p> |
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.woff2?t=1684982520381') format('woff2'), |
||||
url('iconfont.woff?t=1684982520381') format('woff'), |
||||
url('iconfont.ttf?t=1684982520381') format('truetype'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<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 icon-daochu1"></span> |
||||
<div class="name"> |
||||
导出 |
||||
</div> |
||||
<div class="code-name">.icon-daochu1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-daoru2"></span> |
||||
<div class="name"> |
||||
导入 |
||||
</div> |
||||
<div class="code-name">.icon-daoru2 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shujutongji"></span> |
||||
<div class="name"> |
||||
数据统计 |
||||
</div> |
||||
<div class="code-name">.icon-shujutongji |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-changguishujutongji"></span> |
||||
<div class="name"> |
||||
常规数据统计 |
||||
</div> |
||||
<div class="code-name">.icon-changguishujutongji |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-zitishangbiao"></span> |
||||
<div class="name"> |
||||
字体上标 |
||||
</div> |
||||
<div class="code-name">.icon-zitishangbiao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-zitixiabiao"></span> |
||||
<div class="name"> |
||||
字体下标 |
||||
</div> |
||||
<div class="code-name">.icon-zitixiabiao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shuaxin"></span> |
||||
<div class="name"> |
||||
刷新 |
||||
</div> |
||||
<div class="code-name">.icon-shuaxin |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-refresh"></span> |
||||
<div class="name"> |
||||
refresh |
||||
</div> |
||||
<div class="code-name">.icon-refresh |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-tucengshaixuan"></span> |
||||
<div class="name"> |
||||
图层筛选 |
||||
</div> |
||||
<div class="code-name">.icon-tucengshaixuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-tuceng1"></span> |
||||
<div class="name"> |
||||
图层 |
||||
</div> |
||||
<div class="code-name">.icon-tuceng1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-layer"></span> |
||||
<div class="name"> |
||||
图层 |
||||
</div> |
||||
<div class="code-name">.icon-layer |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-a-dashujushujutongji-02"></span> |
||||
<div class="name"> |
||||
大数据、数据统计-02 |
||||
</div> |
||||
<div class="code-name">.icon-a-dashujushujutongji-02 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-baocun"></span> |
||||
<div class="name"> |
||||
保存 |
||||
</div> |
||||
<div class="code-name">.icon-baocun |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-baocun_o"></span> |
||||
<div class="name"> |
||||
保存_o |
||||
</div> |
||||
<div class="code-name">.icon-baocun_o |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shanchu"></span> |
||||
<div class="name"> |
||||
删除 |
||||
</div> |
||||
<div class="code-name">.icon-shanchu |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-sousuo"></span> |
||||
<div class="name"> |
||||
搜索 |
||||
</div> |
||||
<div class="code-name">.icon-sousuo |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-yanjing"></span> |
||||
<div class="name"> |
||||
眼睛 |
||||
</div> |
||||
<div class="code-name">.icon-yanjing |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-daochuxlsx"></span> |
||||
<div class="name"> |
||||
导出-02 |
||||
</div> |
||||
<div class="code-name">.icon-daochuxlsx |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||
<ul> |
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<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="#icon-daochu1"></use> |
||||
</svg> |
||||
<div class="name">导出</div> |
||||
<div class="code-name">#icon-daochu1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-daoru2"></use> |
||||
</svg> |
||||
<div class="name">导入</div> |
||||
<div class="code-name">#icon-daoru2</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shujutongji"></use> |
||||
</svg> |
||||
<div class="name">数据统计</div> |
||||
<div class="code-name">#icon-shujutongji</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-changguishujutongji"></use> |
||||
</svg> |
||||
<div class="name">常规数据统计</div> |
||||
<div class="code-name">#icon-changguishujutongji</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-zitishangbiao"></use> |
||||
</svg> |
||||
<div class="name">字体上标</div> |
||||
<div class="code-name">#icon-zitishangbiao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-zitixiabiao"></use> |
||||
</svg> |
||||
<div class="name">字体下标</div> |
||||
<div class="code-name">#icon-zitixiabiao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shuaxin"></use> |
||||
</svg> |
||||
<div class="name">刷新</div> |
||||
<div class="code-name">#icon-shuaxin</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-refresh"></use> |
||||
</svg> |
||||
<div class="name">refresh</div> |
||||
<div class="code-name">#icon-refresh</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-tucengshaixuan"></use> |
||||
</svg> |
||||
<div class="name">图层筛选</div> |
||||
<div class="code-name">#icon-tucengshaixuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-tuceng1"></use> |
||||
</svg> |
||||
<div class="name">图层</div> |
||||
<div class="code-name">#icon-tuceng1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-layer"></use> |
||||
</svg> |
||||
<div class="name">图层</div> |
||||
<div class="code-name">#icon-layer</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-a-dashujushujutongji-02"></use> |
||||
</svg> |
||||
<div class="name">大数据、数据统计-02</div> |
||||
<div class="code-name">#icon-a-dashujushujutongji-02</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-baocun"></use> |
||||
</svg> |
||||
<div class="name">保存</div> |
||||
<div class="code-name">#icon-baocun</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-baocun_o"></use> |
||||
</svg> |
||||
<div class="name">保存_o</div> |
||||
<div class="code-name">#icon-baocun_o</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shanchu"></use> |
||||
</svg> |
||||
<div class="name">删除</div> |
||||
<div class="code-name">#icon-shanchu</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-sousuo"></use> |
||||
</svg> |
||||
<div class="name">搜索</div> |
||||
<div class="code-name">#icon-sousuo</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-yanjing"></use> |
||||
</svg> |
||||
<div class="name">眼睛</div> |
||||
<div class="code-name">#icon-yanjing</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-daochuxlsx"></use> |
||||
</svg> |
||||
<div class="name">导出-02</div> |
||||
<div class="code-name">#icon-daochuxlsx</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||
<ul> |
||||
<li>支持多色图标了，不再受单色限制。</li> |
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<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 () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,87 @@
|
||||
@font-face { |
||||
font-family: "iconfont"; /* Project id 3636363 */ |
||||
src: url('iconfont.woff2?t=1684982520381') format('woff2'), |
||||
url('iconfont.woff?t=1684982520381') format('woff'), |
||||
url('iconfont.ttf?t=1684982520381') format('truetype'); |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-daochu1:before { |
||||
content: "\e740"; |
||||
} |
||||
|
||||
.icon-daoru2:before { |
||||
content: "\e741"; |
||||
} |
||||
|
||||
.icon-shujutongji:before { |
||||
content: "\e664"; |
||||
} |
||||
|
||||
.icon-changguishujutongji:before { |
||||
content: "\e677"; |
||||
} |
||||
|
||||
.icon-zitishangbiao:before { |
||||
content: "\ec83"; |
||||
} |
||||
|
||||
.icon-zitixiabiao:before { |
||||
content: "\ec85"; |
||||
} |
||||
|
||||
.icon-shuaxin:before { |
||||
content: "\e782"; |
||||
} |
||||
|
||||
.icon-refresh:before { |
||||
content: "\e6b1"; |
||||
} |
||||
|
||||
.icon-tucengshaixuan:before { |
||||
content: "\e606"; |
||||
} |
||||
|
||||
.icon-tuceng1:before { |
||||
content: "\e63c"; |
||||
} |
||||
|
||||
.icon-layer:before { |
||||
content: "\e613"; |
||||
} |
||||
|
||||
.icon-a-dashujushujutongji-02:before { |
||||
content: "\e894"; |
||||
} |
||||
|
||||
.icon-baocun:before { |
||||
content: "\e63b"; |
||||
} |
||||
|
||||
.icon-baocun_o:before { |
||||
content: "\eb47"; |
||||
} |
||||
|
||||
.icon-shanchu:before { |
||||
content: "\e8b6"; |
||||
} |
||||
|
||||
.icon-sousuo:before { |
||||
content: "\e8b9"; |
||||
} |
||||
|
||||
.icon-yanjing:before { |
||||
content: "\e8bf"; |
||||
} |
||||
|
||||
.icon-daochuxlsx:before { |
||||
content: "\e62b"; |
||||
} |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,135 @@
|
||||
{ |
||||
"id": "3636363", |
||||
"name": "luckysheet", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "32414822", |
||||
"name": "导出", |
||||
"font_class": "daochu1", |
||||
"unicode": "e740", |
||||
"unicode_decimal": 59200 |
||||
}, |
||||
{ |
||||
"icon_id": "32414824", |
||||
"name": "导入", |
||||
"font_class": "daoru2", |
||||
"unicode": "e741", |
||||
"unicode_decimal": 59201 |
||||
}, |
||||
{ |
||||
"icon_id": "6554314", |
||||
"name": "数据统计", |
||||
"font_class": "shujutongji", |
||||
"unicode": "e664", |
||||
"unicode_decimal": 58980 |
||||
}, |
||||
{ |
||||
"icon_id": "8213846", |
||||
"name": "常规数据统计", |
||||
"font_class": "changguishujutongji", |
||||
"unicode": "e677", |
||||
"unicode_decimal": 58999 |
||||
}, |
||||
{ |
||||
"icon_id": "6337468", |
||||
"name": "字体上标", |
||||
"font_class": "zitishangbiao", |
||||
"unicode": "ec83", |
||||
"unicode_decimal": 60547 |
||||
}, |
||||
{ |
||||
"icon_id": "6337475", |
||||
"name": "字体下标", |
||||
"font_class": "zitixiabiao", |
||||
"unicode": "ec85", |
||||
"unicode_decimal": 60549 |
||||
}, |
||||
{ |
||||
"icon_id": "579551", |
||||
"name": "刷新", |
||||
"font_class": "shuaxin", |
||||
"unicode": "e782", |
||||
"unicode_decimal": 59266 |
||||
}, |
||||
{ |
||||
"icon_id": "15066952", |
||||
"name": "refresh", |
||||
"font_class": "refresh", |
||||
"unicode": "e6b1", |
||||
"unicode_decimal": 59057 |
||||
}, |
||||
{ |
||||
"icon_id": "6677531", |
||||
"name": "图层筛选", |
||||
"font_class": "tucengshaixuan", |
||||
"unicode": "e606", |
||||
"unicode_decimal": 58886 |
||||
}, |
||||
{ |
||||
"icon_id": "5650931", |
||||
"name": "图层", |
||||
"font_class": "tuceng1", |
||||
"unicode": "e63c", |
||||
"unicode_decimal": 58940 |
||||
}, |
||||
{ |
||||
"icon_id": "10904998", |
||||
"name": "图层", |
||||
"font_class": "layer", |
||||
"unicode": "e613", |
||||
"unicode_decimal": 58899 |
||||
}, |
||||
{ |
||||
"icon_id": "25885527", |
||||
"name": "大数据、数据统计-02", |
||||
"font_class": "a-dashujushujutongji-02", |
||||
"unicode": "e894", |
||||
"unicode_decimal": 59540 |
||||
}, |
||||
{ |
||||
"icon_id": "1305399", |
||||
"name": "保存", |
||||
"font_class": "baocun", |
||||
"unicode": "e63b", |
||||
"unicode_decimal": 58939 |
||||
}, |
||||
{ |
||||
"icon_id": "5387745", |
||||
"name": "保存_o", |
||||
"font_class": "baocun_o", |
||||
"unicode": "eb47", |
||||
"unicode_decimal": 60231 |
||||
}, |
||||
{ |
||||
"icon_id": "11372693", |
||||
"name": "删除", |
||||
"font_class": "shanchu", |
||||
"unicode": "e8b6", |
||||
"unicode_decimal": 59574 |
||||
}, |
||||
{ |
||||
"icon_id": "11372706", |
||||
"name": "搜索", |
||||
"font_class": "sousuo", |
||||
"unicode": "e8b9", |
||||
"unicode_decimal": 59577 |
||||
}, |
||||
{ |
||||
"icon_id": "11372728", |
||||
"name": "眼睛", |
||||
"font_class": "yanjing", |
||||
"unicode": "e8bf", |
||||
"unicode_decimal": 59583 |
||||
}, |
||||
{ |
||||
"icon_id": "26922840", |
||||
"name": "导出-02", |
||||
"font_class": "daochuxlsx", |
||||
"unicode": "e62b", |
||||
"unicode_decimal": 58923 |
||||
} |
||||
] |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
@ -0,0 +1,17 @@
|
||||
import { Plugin } from "../../types/options"; |
||||
export interface Config { |
||||
shorthand: boolean; |
||||
dateFormat: string; |
||||
altFormat: string; |
||||
theme: string; |
||||
_stubbedCurrentMonth?: number; |
||||
} |
||||
export interface ElementDate extends Element { |
||||
dateObj: Date; |
||||
} |
||||
export declare type MonthElement = HTMLSpanElement & { |
||||
dateObj: Date; |
||||
$i: number; |
||||
}; |
||||
declare function monthSelectPlugin(pluginConfig?: Partial<Config>): Plugin; |
||||
export default monthSelectPlugin; |
||||
@ -0,0 +1,301 @@
|
||||
(function (global, factory) { |
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : |
||||
typeof define === 'function' && define.amd ? define(factory) : |
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.monthSelectPlugin = factory()); |
||||
}(this, (function () { 'use strict'; |
||||
|
||||
/*! ***************************************************************************** |
||||
Copyright (c) Microsoft Corporation. |
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any |
||||
purpose with or without fee is hereby granted. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH |
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY |
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, |
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM |
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR |
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR |
||||
PERFORMANCE OF THIS SOFTWARE. |
||||
***************************************************************************** */ |
||||
|
||||
var __assign = function() { |
||||
__assign = Object.assign || function __assign(t) { |
||||
for (var s, i = 1, n = arguments.length; i < n; i++) { |
||||
s = arguments[i]; |
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; |
||||
} |
||||
return t; |
||||
}; |
||||
return __assign.apply(this, arguments); |
||||
}; |
||||
|
||||
var monthToStr = function (monthNumber, shorthand, locale) { return locale.months[shorthand ? "shorthand" : "longhand"][monthNumber]; }; |
||||
|
||||
function clearNode(node) { |
||||
while (node.firstChild) |
||||
node.removeChild(node.firstChild); |
||||
} |
||||
function getEventTarget(event) { |
||||
try { |
||||
if (typeof event.composedPath === "function") { |
||||
var path = event.composedPath(); |
||||
return path[0]; |
||||
} |
||||
return event.target; |
||||
} |
||||
catch (error) { |
||||
return event.target; |
||||
} |
||||
} |
||||
|
||||
var defaultConfig = { |
||||
shorthand: false, |
||||
dateFormat: "F Y", |
||||
altFormat: "F Y", |
||||
theme: "light", |
||||
}; |
||||
function monthSelectPlugin(pluginConfig) { |
||||
var config = __assign(__assign({}, defaultConfig), pluginConfig); |
||||
return function (fp) { |
||||
fp.config.dateFormat = config.dateFormat; |
||||
fp.config.altFormat = config.altFormat; |
||||
var self = { monthsContainer: null }; |
||||
function clearUnnecessaryDOMElements() { |
||||
if (!fp.rContainer) |
||||
return; |
||||
clearNode(fp.rContainer); |
||||
for (var index = 0; index < fp.monthElements.length; index++) { |
||||
var element = fp.monthElements[index]; |
||||
if (!element.parentNode) |
||||
continue; |
||||
element.parentNode.removeChild(element); |
||||
} |
||||
} |
||||
function build() { |
||||
if (!fp.rContainer) |
||||
return; |
||||
self.monthsContainer = fp._createElement("div", "flatpickr-monthSelect-months"); |
||||
self.monthsContainer.tabIndex = -1; |
||||
buildMonths(); |
||||
fp.rContainer.appendChild(self.monthsContainer); |
||||
fp.calendarContainer.classList.add("flatpickr-monthSelect-theme-" + config.theme); |
||||
} |
||||
function buildMonths() { |
||||
if (!self.monthsContainer) |
||||
return; |
||||
clearNode(self.monthsContainer); |
||||
var frag = document.createDocumentFragment(); |
||||
for (var i = 0; i < 12; i++) { |
||||
var month = fp.createDay("flatpickr-monthSelect-month", new Date(fp.currentYear, i), 0, i); |
||||
if (month.dateObj.getMonth() === new Date().getMonth() && |
||||
month.dateObj.getFullYear() === new Date().getFullYear()) |
||||
month.classList.add("today"); |
||||
month.textContent = monthToStr(i, config.shorthand, fp.l10n); |
||||
month.addEventListener("click", selectMonth); |
||||
frag.appendChild(month); |
||||
} |
||||
self.monthsContainer.appendChild(frag); |
||||
if (fp.config.minDate && |
||||
fp.currentYear === fp.config.minDate.getFullYear()) |
||||
fp.prevMonthNav.classList.add("flatpickr-disabled"); |
||||
else |
||||
fp.prevMonthNav.classList.remove("flatpickr-disabled"); |
||||
if (fp.config.maxDate && |
||||
fp.currentYear === fp.config.maxDate.getFullYear()) |
||||
fp.nextMonthNav.classList.add("flatpickr-disabled"); |
||||
else |
||||
fp.nextMonthNav.classList.remove("flatpickr-disabled"); |
||||
} |
||||
function bindEvents() { |
||||
fp._bind(fp.prevMonthNav, "click", function (e) { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
fp.changeYear(fp.currentYear - 1); |
||||
selectYear(); |
||||
buildMonths(); |
||||
}); |
||||
fp._bind(fp.nextMonthNav, "click", function (e) { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
fp.changeYear(fp.currentYear + 1); |
||||
selectYear(); |
||||
buildMonths(); |
||||
}); |
||||
fp._bind(self.monthsContainer, "mouseover", function (e) { |
||||
if (fp.config.mode === "range") |
||||
fp.onMouseOver(getEventTarget(e), "flatpickr-monthSelect-month"); |
||||
}); |
||||
} |
||||
function setCurrentlySelected() { |
||||
if (!fp.rContainer) |
||||
return; |
||||
if (!fp.selectedDates.length) |
||||
return; |
||||
var currentlySelected = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month.selected"); |
||||
for (var index = 0; index < currentlySelected.length; index++) { |
||||
currentlySelected[index].classList.remove("selected"); |
||||
} |
||||
var targetMonth = fp.selectedDates[0].getMonth(); |
||||
var month = fp.rContainer.querySelector(".flatpickr-monthSelect-month:nth-child(" + (targetMonth + 1) + ")"); |
||||
if (month) { |
||||
month.classList.add("selected"); |
||||
} |
||||
} |
||||
function selectYear() { |
||||
var selectedDate = fp.selectedDates[0]; |
||||
if (selectedDate) { |
||||
selectedDate = new Date(selectedDate); |
||||
selectedDate.setFullYear(fp.currentYear); |
||||
if (fp.config.minDate && selectedDate < fp.config.minDate) { |
||||
selectedDate = fp.config.minDate; |
||||
} |
||||
if (fp.config.maxDate && selectedDate > fp.config.maxDate) { |
||||
selectedDate = fp.config.maxDate; |
||||
} |
||||
fp.currentYear = selectedDate.getFullYear(); |
||||
} |
||||
fp.currentYearElement.value = String(fp.currentYear); |
||||
if (fp.rContainer) { |
||||
var months = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month"); |
||||
months.forEach(function (month) { |
||||
month.dateObj.setFullYear(fp.currentYear); |
||||
if ((fp.config.minDate && month.dateObj < fp.config.minDate) || |
||||
(fp.config.maxDate && month.dateObj > fp.config.maxDate)) { |
||||
month.classList.add("flatpickr-disabled"); |
||||
} |
||||
else { |
||||
month.classList.remove("flatpickr-disabled"); |
||||
} |
||||
}); |
||||
} |
||||
setCurrentlySelected(); |
||||
} |
||||
function selectMonth(e) { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
var eventTarget = getEventTarget(e); |
||||
if (!(eventTarget instanceof Element)) |
||||
return; |
||||
if (eventTarget.classList.contains("flatpickr-disabled")) |
||||
return; |
||||
if (eventTarget.classList.contains("notAllowed")) |
||||
return; // necessary??
|
||||
setMonth(eventTarget.dateObj); |
||||
if (fp.config.closeOnSelect) { |
||||
var single = fp.config.mode === "single"; |
||||
var range = fp.config.mode === "range" && fp.selectedDates.length === 2; |
||||
if (single || range) |
||||
fp.close(); |
||||
} |
||||
} |
||||
function setMonth(date) { |
||||
var selectedDate = new Date(fp.currentYear, date.getMonth(), date.getDate()); |
||||
var selectedDates = []; |
||||
switch (fp.config.mode) { |
||||
case "single": |
||||
selectedDates = [selectedDate]; |
||||
break; |
||||
case "multiple": |
||||
selectedDates.push(selectedDate); |
||||
break; |
||||
case "range": |
||||
if (fp.selectedDates.length === 2) { |
||||
selectedDates = [selectedDate]; |
||||
} |
||||
else { |
||||
selectedDates = fp.selectedDates.concat([selectedDate]); |
||||
selectedDates.sort(function (a, b) { return a.getTime() - b.getTime(); }); |
||||
} |
||||
break; |
||||
} |
||||
fp.setDate(selectedDates, true); |
||||
setCurrentlySelected(); |
||||
} |
||||
var shifts = { |
||||
37: -1, |
||||
39: 1, |
||||
40: 3, |
||||
38: -3, |
||||
}; |
||||
function onKeyDown(_, __, ___, e) { |
||||
var shouldMove = shifts[e.keyCode] !== undefined; |
||||
if (!shouldMove && e.keyCode !== 13) { |
||||
return; |
||||
} |
||||
if (!fp.rContainer || !self.monthsContainer) |
||||
return; |
||||
var currentlySelected = fp.rContainer.querySelector(".flatpickr-monthSelect-month.selected"); |
||||
var index = Array.prototype.indexOf.call(self.monthsContainer.children, document.activeElement); |
||||
if (index === -1) { |
||||
var target = currentlySelected || self.monthsContainer.firstElementChild; |
||||
target.focus(); |
||||
index = target.$i; |
||||
} |
||||
if (shouldMove) { |
||||
self.monthsContainer.children[(12 + index + shifts[e.keyCode]) % 12].focus(); |
||||
} |
||||
else if (e.keyCode === 13 && |
||||
self.monthsContainer.contains(document.activeElement)) { |
||||
setMonth(document.activeElement.dateObj); |
||||
} |
||||
} |
||||
function closeHook() { |
||||
var _a; |
||||
if (((_a = fp.config) === null || _a === void 0 ? void 0 : _a.mode) === "range" && fp.selectedDates.length === 1) |
||||
fp.clear(false); |
||||
if (!fp.selectedDates.length) |
||||
buildMonths(); |
||||
} |
||||
// Help the prev/next year nav honor config.minDate (see 3fa5a69)
|
||||
function stubCurrentMonth() { |
||||
config._stubbedCurrentMonth = fp._initialDate.getMonth(); |
||||
fp._initialDate.setMonth(config._stubbedCurrentMonth); |
||||
fp.currentMonth = config._stubbedCurrentMonth; |
||||
} |
||||
function unstubCurrentMonth() { |
||||
if (!config._stubbedCurrentMonth) |
||||
return; |
||||
fp._initialDate.setMonth(config._stubbedCurrentMonth); |
||||
fp.currentMonth = config._stubbedCurrentMonth; |
||||
delete config._stubbedCurrentMonth; |
||||
} |
||||
function destroyPluginInstance() { |
||||
if (self.monthsContainer !== null) { |
||||
var months = self.monthsContainer.querySelectorAll(".flatpickr-monthSelect-month"); |
||||
for (var index = 0; index < months.length; index++) { |
||||
months[index].removeEventListener("click", selectMonth); |
||||
} |
||||
} |
||||
} |
||||
return { |
||||
onParseConfig: function () { |
||||
fp.config.enableTime = false; |
||||
}, |
||||
onValueUpdate: setCurrentlySelected, |
||||
onKeyDown: onKeyDown, |
||||
onReady: [ |
||||
stubCurrentMonth, |
||||
clearUnnecessaryDOMElements, |
||||
build, |
||||
bindEvents, |
||||
setCurrentlySelected, |
||||
function () { |
||||
fp.config.onClose.push(closeHook); |
||||
fp.loadedPlugins.push("monthSelect"); |
||||
}, |
||||
], |
||||
onDestroy: [ |
||||
unstubCurrentMonth, |
||||
destroyPluginInstance, |
||||
function () { |
||||
fp.config.onClose = fp.config.onClose.filter(function (hook) { return hook !== closeHook; }); |
||||
}, |
||||
], |
||||
}; |
||||
}; |
||||
} |
||||
|
||||
return monthSelectPlugin; |
||||
|
||||
}))); |
||||
@ -0,0 +1,117 @@
|
||||
.flatpickr-monthSelect-months { |
||||
margin: 10px 1px 3px 1px; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month { |
||||
background: none; |
||||
border: 1px solid transparent; |
||||
border-radius: 4px; |
||||
-webkit-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
color: #393939; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
font-weight: 400; |
||||
margin: 0.5px; |
||||
justify-content: center; |
||||
padding: 10px; |
||||
position: relative; |
||||
-webkit-box-pack: center; |
||||
-webkit-justify-content: center; |
||||
-ms-flex-pack: center; |
||||
text-align: center; |
||||
width: 33%; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.flatpickr-disabled { |
||||
color: #eee; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.flatpickr-disabled:hover, |
||||
.flatpickr-monthSelect-month.flatpickr-disabled:focus { |
||||
cursor: not-allowed; |
||||
background: none !important; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-theme-dark { |
||||
background: #3f4458; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year { |
||||
color: #fff; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month, |
||||
.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month { |
||||
color: #fff; |
||||
fill: #fff; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month { |
||||
color: rgba(255, 255, 255, 0.95); |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.today { |
||||
border-color: #959ea9; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.inRange, |
||||
.flatpickr-monthSelect-month.inRange.today, |
||||
.flatpickr-monthSelect-month:hover, |
||||
.flatpickr-monthSelect-month:focus { |
||||
background: #e6e6e6; |
||||
cursor: pointer; |
||||
outline: 0; |
||||
border-color: #e6e6e6; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange, |
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover, |
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus { |
||||
background: #646c8c; |
||||
border-color: #646c8c; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.today:hover, |
||||
.flatpickr-monthSelect-month.today:focus { |
||||
background: #959ea9; |
||||
border-color: #959ea9; |
||||
color: #fff; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.selected, |
||||
.flatpickr-monthSelect-month.startRange, |
||||
.flatpickr-monthSelect-month.endRange { |
||||
background-color: #569ff7; |
||||
box-shadow: none; |
||||
color: #fff; |
||||
border-color: #569ff7; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.startRange { |
||||
border-radius: 50px 0 0 50px; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.endRange { |
||||
border-radius: 0 50px 50px 0; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.startRange.endRange { |
||||
border-radius: 50px; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-month.inRange { |
||||
border-radius: 0; |
||||
box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; |
||||
} |
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected, |
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange, |
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange { |
||||
background: #80cbc4; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
color: #fff; |
||||
border-color: #80cbc4; |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -1,410 +0,0 @@
|
||||
export function initChat() { |
||||
if (!isNeedChat()) { |
||||
return |
||||
} |
||||
|
||||
// Your CSS as text
|
||||
let styles = ` |
||||
body { |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
#chat-assistant-container { |
||||
position: fixed; |
||||
right: 40px; |
||||
bottom: 86px; |
||||
z-index:9990; |
||||
} |
||||
|
||||
#chat-assistant-button { |
||||
width: 50px; |
||||
height: 50px; |
||||
border-radius: 50%; |
||||
border: none; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
background: linear-gradient(135deg, rgb(215 98 150 / 55%),rgb(34 78 139 / 71%), rgb(114 222 172)); |
||||
box-shadow: 0px 0px 8px 1px rgb(0 0 0 / 22%); |
||||
color: #fff; |
||||
text-shadow: 1px 1px 3px rgb(0 0 0 / 56%); |
||||
} |
||||
|
||||
|
||||
#chat-container { |
||||
position: fixed; |
||||
padding: 10px; |
||||
top: 45%; |
||||
left: 50%; |
||||
z-index:9990; |
||||
transform: translate(-50%, -50%); |
||||
display: none; |
||||
border-radius: 5px; |
||||
width: 40%; |
||||
background: linear-gradient(135deg, rgb(215 98 150 / 92%),rgb(34 78 139 / 93%), rgb(114 222 172 / 94%)); |
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
|
||||
|
||||
#chat-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 10px 10px 0; |
||||
border-radius: 5px 5px 0 0; |
||||
cursor: move; |
||||
} |
||||
|
||||
#loading-indicator { |
||||
width: 14px; |
||||
height: 14px; |
||||
margin: 0 10px 0 10px; |
||||
border: 2px solid #ccc; |
||||
border-top-color: #4caf50; |
||||
border-radius: 50%; |
||||
animation: spin 2s linear infinite; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { |
||||
transform: rotate(0deg); |
||||
} |
||||
|
||||
100% { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
|
||||
#chat-header .show-loading { |
||||
visibility: visible; |
||||
} |
||||
|
||||
#chat-header .hide-loading { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
|
||||
#circle-button { |
||||
padding: 0; |
||||
border: none; |
||||
background-color: transparent; |
||||
font-size: 16px; |
||||
user-select: none; |
||||
display: flex; |
||||
align-items: center; |
||||
color: #fff; |
||||
text-shadow: 1px 1px 3px black; |
||||
} |
||||
|
||||
#close-button { |
||||
cursor: pointer; |
||||
padding: 0; |
||||
border: none; |
||||
background-color: transparent; |
||||
font-size: 24px; |
||||
color: #fff; |
||||
text-shadow: 1px 1px 3px black; |
||||
} |
||||
#send-button { |
||||
cursor: pointer; |
||||
padding: 0; |
||||
border: none; |
||||
background-color: transparent; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
#close-button:hover, |
||||
#send-button:hover { |
||||
color: #888; |
||||
} |
||||
|
||||
#chat-input-container, |
||||
#chat-input { |
||||
border: none; |
||||
} |
||||
|
||||
#chat-input-container { |
||||
display: flex; |
||||
align-items: center; |
||||
border-radius: 5px; |
||||
background-color: #fff; |
||||
padding: 10px; |
||||
} |
||||
|
||||
#chat-input { |
||||
flex: 1; |
||||
padding: 0; |
||||
margin-right: 5px; |
||||
border-radius: 5px; |
||||
overflow-y: auto; |
||||
height: 24px; |
||||
font-size: 1rem; |
||||
outline: none; |
||||
resize: none; |
||||
background: transparent; |
||||
} |
||||
|
||||
#send-button { |
||||
background-color: transparent; |
||||
border: none; |
||||
border-radius: 5px; |
||||
cursor: pointer; |
||||
padding: 5px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 32px; |
||||
width: 32px; |
||||
} |
||||
|
||||
#send-button>span { |
||||
height: 16px; |
||||
width: 16px; |
||||
} |
||||
|
||||
#send-button:enabled { |
||||
background-color: rgb(120,198,174); |
||||
} |
||||
|
||||
#send-button:enabled svg path { |
||||
fill: #fff; |
||||
} |
||||
` |
||||
|
||||
let styleSheet = document.createElement("style") |
||||
styleSheet.innerText = styles |
||||
document.head.appendChild(styleSheet) |
||||
|
||||
|
||||
const html = `<div id="chat-assistant-container"> |
||||
<button id="chat-assistant-button">🤖AI</button> |
||||
</div> |
||||
|
||||
<div id="chat-container"> |
||||
<div id="chat-header"> |
||||
<span id="circle-button">Univer AI 助手<div id="loading-indicator"></div></span> |
||||
|
||||
<button id="close-button">×</button> |
||||
</div> |
||||
<div id="chat-input-container"> |
||||
<textarea id="chat-input" placeholder="请输入问题"></textarea> |
||||
<!-- <textarea id="chat-input" placeholder="请输入问题"></textarea> --> |
||||
<button id="send-button" disabled> |
||||
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="h-4 w-4 m-1 md:m-0" |
||||
stroke-width="2"> |
||||
<path |
||||
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" |
||||
fill="currentColor"></path> |
||||
</svg></span> |
||||
</button> |
||||
</div> |
||||
|
||||
</div>`; |
||||
document.body.insertAdjacentHTML('beforeend', html) |
||||
|
||||
|
||||
const assistantButton = document.getElementById('chat-assistant-button'); |
||||
const chatContainer = document.getElementById('chat-container'); |
||||
const closeButton = document.getElementById('close-button'); |
||||
const chatInput = document.getElementById('chat-input'); |
||||
const sendButton = document.getElementById('send-button'); |
||||
const loadingIndicator = document.getElementById('loading-indicator'); |
||||
|
||||
assistantButton.addEventListener('click', function () { |
||||
chatContainer.style.display = 'block'; |
||||
}); |
||||
|
||||
closeButton.addEventListener('click', function () { |
||||
chatContainer.style.display = 'none'; |
||||
}); |
||||
|
||||
sendButton.addEventListener('click', function () { |
||||
const message = chatInput.value; |
||||
if (message.trim() !== '') { |
||||
// 处理发送消息的逻辑
|
||||
|
||||
chatInput.value = ''; |
||||
resetButton(chatInput) |
||||
|
||||
// 显示 Loading
|
||||
loadingIndicator.classList.add('show-loading'); |
||||
setTimeout(() => { |
||||
setFormuala(message); |
||||
// 隐藏 Loading
|
||||
loadingIndicator.classList.remove('show-loading'); |
||||
}, 1000); |
||||
} |
||||
|
||||
|
||||
}); |
||||
|
||||
chatInput.addEventListener('input', function () { |
||||
inputHandler(this) |
||||
}); |
||||
|
||||
function inputHandler(input) { |
||||
if (input.scrollHeight > 24) { |
||||
input.style.height = 'auto' |
||||
} |
||||
input.style.height = input.scrollHeight + 'px'; // 根据内容高度设置 textarea 高度
|
||||
if (input.scrollHeight > 200) { |
||||
input.style.overflowY = 'scroll' |
||||
} else { |
||||
input.style.overflowY = 'hidden' |
||||
} |
||||
|
||||
resetButton(input) |
||||
|
||||
} |
||||
|
||||
function resetButton(input) { |
||||
if (input.value.trim() !== '') { |
||||
sendButton.disabled = false; |
||||
sendButton.classList.add('enabled'); |
||||
} else { |
||||
input.style.height = '24px'; // 重置高度为一行
|
||||
sendButton.disabled = true; |
||||
sendButton.classList.remove('enabled'); |
||||
} |
||||
} |
||||
|
||||
// 快捷键
|
||||
let isComposing = false; |
||||
|
||||
chatInput.addEventListener('compositionstart', function () { |
||||
isComposing = true; |
||||
}); |
||||
|
||||
chatInput.addEventListener('compositionend', function () { |
||||
isComposing = false; |
||||
}); |
||||
|
||||
chatInput.addEventListener('keydown', function (event) { |
||||
const isWindows = navigator.platform.includes('Win'); |
||||
const isMac = navigator.platform.includes('Mac'); |
||||
|
||||
const key = event.key; |
||||
|
||||
if (isWindows && event.key === 'Enter' && !isComposing && !event.altKey) { |
||||
// Windows 上的 Enter 键触发发送
|
||||
event.preventDefault(); |
||||
sendButton.click(); |
||||
} else if (isWindows && event.key === 'Enter' && !isComposing && event.altKey) { |
||||
// Windows 上的 Alt+Enter 键触发换行
|
||||
event.preventDefault(); |
||||
this.value += '\n'; |
||||
} else if (isMac && event.key === 'Enter' && !isComposing && !event.metaKey) { |
||||
// Mac 上的 Enter 键触发发送
|
||||
event.preventDefault(); |
||||
sendButton.click(); |
||||
} else if (isMac && event.key === 'Enter' && !isComposing && event.metaKey) { |
||||
// Mac 上的 Command+Enter 键触发换行
|
||||
event.preventDefault(); |
||||
this.value += '\n'; |
||||
} else if (!isComposing && (key === "Backspace" || key === "Delete")) { |
||||
|
||||
} |
||||
|
||||
inputHandler(this) |
||||
}); |
||||
|
||||
|
||||
// 添加拖拽功能
|
||||
let isDragging = false; |
||||
let offset = { x: 0, y: 0 }; |
||||
|
||||
const chatHeader = document.getElementById('chat-header'); |
||||
|
||||
chatHeader.addEventListener('mousedown', function (event) { |
||||
isDragging = true; |
||||
offset.x = event.clientX - chatContainer.offsetLeft; |
||||
offset.y = event.clientY - chatContainer.offsetTop; |
||||
}); |
||||
|
||||
document.addEventListener('mousemove', function (event) { |
||||
if (isDragging) { |
||||
chatContainer.style.left = `${event.clientX - offset.x}px`; |
||||
chatContainer.style.top = `${event.clientY - offset.y}px`; |
||||
} |
||||
}); |
||||
|
||||
document.addEventListener('mouseup', function () { |
||||
isDragging = false; |
||||
}); |
||||
} |
||||
|
||||
const needChatHosts = [ |
||||
'crm.lashuju.com', |
||||
'localhost:3000' |
||||
] |
||||
function isNeedChat() { |
||||
const host = location.host; |
||||
if (needChatHosts.includes(host)) { |
||||
return true |
||||
} |
||||
|
||||
return false |
||||
} |
||||
|
||||
|
||||
function setFormuala(sentence = '') { |
||||
|
||||
let link = getLink(sentence) |
||||
|
||||
if (link !== '') { |
||||
setGET_AIRTABLE(link) |
||||
} else { |
||||
setASK_AI(sentence) |
||||
} |
||||
|
||||
} |
||||
|
||||
function setASK_AI(sentence = '') { |
||||
|
||||
let range = getRange(sentence); |
||||
|
||||
range = range === '' ? '' : ',' + range |
||||
const data = [ |
||||
[ |
||||
{ |
||||
"f": "=ASK_AI(\"" + sentence + "\"" + range + ")" |
||||
} |
||||
] |
||||
] |
||||
luckysheet.setRangeValue(data) |
||||
} |
||||
|
||||
function setGET_AIRTABLE(link) { |
||||
const data = [ |
||||
[ |
||||
{ |
||||
"f": "=GET_AIRTABLE_DATA(\"" + link + "\")" |
||||
} |
||||
] |
||||
] |
||||
luckysheet.setRangeValue(data) |
||||
} |
||||
|
||||
function getLink(sentence = '') { |
||||
const regex = /(https?:\/\/(?:www\.)?airtable\.com\/\S+)/gi; |
||||
const matches = sentence.match(regex); |
||||
|
||||
if (matches) { |
||||
return matches[0]; |
||||
} |
||||
|
||||
return '' |
||||
|
||||
} |
||||
|
||||
function getRange(text) { |
||||
const regex = /([A-Z]+[0-9]*):([A-Z]+[0-9]*)/g; |
||||
const matche = text.match(regex); |
||||
if (matche) { |
||||
return matche[0] |
||||
} |
||||
return '' |
||||
} |
||||
@ -1,42 +1,34 @@
|
||||
|
||||
// Features specially written for demo
|
||||
|
||||
(function () { |
||||
(function() { |
||||
|
||||
// language
|
||||
function language(params) { |
||||
|
||||
var lang = navigator.language || navigator.userLanguage;//常规浏览器语言和IE浏览器
|
||||
|
||||
var lang = navigator.language||navigator.userLanguage;//常规浏览器语言和IE浏览器
|
||||
lang = lang.substr(0, 2);//截取lang前2位字符
|
||||
|
||||
return lang; |
||||
|
||||
} |
||||
// Tencent Forum Link Button
|
||||
function supportButton() { |
||||
const text = language() === 'zh' ? '反馈' : 'Forum'; |
||||
const link = language() === 'zh' ? 'https://support.qq.com/product/288322' : 'https://groups.google.com/g/luckysheet';
|
||||
|
||||
document.querySelector("body").insertAdjacentHTML('beforeend', '<a id="container" href="' + link + '" target="_blank" style="z-index:2;width:50px;height:50px;line-height:50px;position:fixed;right:40px;bottom:86px;border-radius:50px;cursor:pointer;background:rgb(71,133,249);color:#fff;text-align:center;text-decoration:none;font-size: 12px;">' + text + '</a>'); |
||||
} |
||||
|
||||
supportButton() |
||||
|
||||
/** |
||||
* Get url parameters |
||||
*/ |
||||
function getRequest() { |
||||
var vars = {}; |
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, |
||||
function (m, key, value) { |
||||
vars[key] = value; |
||||
}); |
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, |
||||
function(m,key,value) { |
||||
vars[key] = value; |
||||
}); |
||||
|
||||
return vars; |
||||
} |
||||
|
||||
window.luckysheetDemoUtil = { |
||||
language: language, |
||||
getRequest: getRequest |
||||
language:language, |
||||
getRequest:getRequest |
||||
} |
||||
|
||||
|
||||
})() |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,46 +0,0 @@
|
||||
.luckysheet-print span[role="heading"] { |
||||
font-size: 30px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.luckysheet-print-suggest { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.luckysheet-print-title { |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.luckysheet-print-radio { |
||||
display: flex; |
||||
} |
||||
|
||||
.luckysheet-print-radio > div { |
||||
width: 50%; |
||||
} |
||||
|
||||
.luckysheet-print select { |
||||
height: 30px; |
||||
} |
||||
|
||||
.luckysheet-print .luckysheet-modal-dialog-buttons { |
||||
display: flex; |
||||
flex-direction: row-reverse; |
||||
} |
||||
|
||||
.luckysheet-print-box canvas { |
||||
display: block; |
||||
} |
||||
|
||||
@media print { |
||||
:not(html, head, body, .luckysheet-print-preview, .luckysheet-print-preview *) { |
||||
display: none; |
||||
} |
||||
.luckysheet-print-break { |
||||
page-break-after: always; |
||||
} |
||||
#print-layout-options { |
||||
display: none; |
||||
} |
||||
} |
||||
@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>iconfont Demo</title> |
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> |
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
<style> |
||||
.main .logo { |
||||
margin-top: 0; |
||||
height: auto; |
||||
} |
||||
|
||||
.main .logo a { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.main .logo .sub-title { |
||||
margin-left: 0.5em; |
||||
font-size: 22px; |
||||
color: #fff; |
||||
background: linear-gradient(-45deg, #3967FF, #B500FE); |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> |
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> |
||||
|
||||
</a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3859326" 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">&#xe6b0;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">复制</div> |
||||
<div class="code-name">&#xec7a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||
<ul> |
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下：</p> |
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.woff2?t=1673399426700') format('woff2'), |
||||
url('iconfont.woff?t=1673399426700') format('woff'), |
||||
url('iconfont.ttf?t=1673399426700') format('truetype'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<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 icon-zhantiepeizhi"></span> |
||||
<div class="name"> |
||||
粘贴配置 |
||||
</div> |
||||
<div class="code-name">.icon-zhantiepeizhi |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-fuzhi"></span> |
||||
<div class="name"> |
||||
复制 |
||||
</div> |
||||
<div class="code-name">.icon-fuzhi |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||
<ul> |
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<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="#icon-zhantiepeizhi"></use> |
||||
</svg> |
||||
<div class="name">粘贴配置</div> |
||||
<div class="code-name">#icon-zhantiepeizhi</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-fuzhi"></use> |
||||
</svg> |
||||
<div class="name">复制</div> |
||||
<div class="code-name">#icon-fuzhi</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||
<ul> |
||||
<li>支持多色图标了，不再受单色限制。</li> |
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<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 () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,23 @@
|
||||
@font-face { |
||||
font-family: "iconfont"; /* Project id 3859326 */ |
||||
src: url('./iconfont.woff2?t=1673399426700') format('woff2'), |
||||
url('./iconfont.woff?t=1673399426700') format('woff'), |
||||
url('./iconfont.ttf?t=1673399426700') format('truetype'); |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-zhantiepeizhi:before { |
||||
content: "\e6b0"; |
||||
} |
||||
|
||||
.icon-fuzhi:before { |
||||
content: "\ec7a"; |
||||
} |
||||
|
||||
@ -0,0 +1 @@
|
||||
window._iconfont_svg_string_3859326='<svg><symbol id="icon-zhantiepeizhi" viewBox="0 0 1025 1024"><path d="M873.2 448 534.8 448c-83.1 0-150.8 67.6-150.8 150.8L384 873.2c0 83.1 67.6 150.8 150.8 150.8l338.5 0c83.1 0 150.8-67.6 150.8-150.8L1024.1 598.7C1024 515.6 956.4 448 873.2 448zM960 873.2c0 47.8-38.9 86.8-86.8 86.8L534.8 960c-47.8 0-86.8-38.9-86.8-86.8L448 598.7c0-47.8 38.9-86.8 86.8-86.8l338.5 0c47.8 0 86.8 38.9 86.8 86.8L960.1 873.2z" ></path><path d="M285 832 129.2 832c-35.9 0-65.2-29.2-65.2-65.2L64 129.2c0-35.9 29.2-65.2 65.2-65.2l573.6 0c35.9 0 65.2 29.2 65.2 65.2l0 223.8c0 17.7 14.3 32 32 32s32-14.3 32-32L832 129.2c0-71.2-58-129.2-129.2-129.2L129.2 0C58 0 0 57.9 0 129.2l0 637.6c0 71.2 58 129.2 129.2 129.2L285 896c17.7 0 32-14.3 32-32S302.7 832 285 832z" ></path><path d="M672 192 160 192c-17.7 0-32 14.3-32 32s14.3 32 32 32l512 0c17.7 0 32-14.3 32-32S689.7 192 672 192z" ></path><path d="M352 384 160 384c-17.7 0-32 14.3-32 32s14.3 32 32 32l192 0c17.7 0 32-14.3 32-32S369.7 384 352 384z" ></path><path d="M288 576 160 576c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c17.7 0 32-14.3 32-32S305.7 576 288 576z" ></path></symbol><symbol id="icon-fuzhi" viewBox="0 0 1024 1024"><path d="M720 192h-544A80.096 80.096 0 0 0 96 272v608C96 924.128 131.904 960 176 960h544c44.128 0 80-35.872 80-80v-608C800 227.904 764.128 192 720 192z m16 688c0 8.8-7.2 16-16 16h-544a16 16 0 0 1-16-16v-608a16 16 0 0 1 16-16h544a16 16 0 0 1 16 16v608z" ></path><path d="M848 64h-544a32 32 0 0 0 0 64h544a16 16 0 0 1 16 16v608a32 32 0 1 0 64 0v-608C928 99.904 892.128 64 848 64z" ></path><path d="M608 360H288a32 32 0 0 0 0 64h320a32 32 0 1 0 0-64zM608 520H288a32 32 0 1 0 0 64h320a32 32 0 1 0 0-64zM480 678.656H288a32 32 0 1 0 0 64h192a32 32 0 1 0 0-64z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,a,i,o,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3859326,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),c()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(i=c,o=n.document,d=!1,h(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}function l(){d||(d=!0,i())}function h(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}l()}}(window); |
||||
@ -0,0 +1,23 @@
|
||||
{ |
||||
"id": "3859326", |
||||
"name": "luckysheet移动端", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "422435", |
||||
"name": "粘贴配置", |
||||
"font_class": "zhantiepeizhi", |
||||
"unicode": "e6b0", |
||||
"unicode_decimal": 59056 |
||||
}, |
||||
{ |
||||
"icon_id": "5993150", |
||||
"name": "复制", |
||||
"font_class": "fuzhi", |
||||
"unicode": "ec7a", |
||||
"unicode_decimal": 60538 |
||||
} |
||||
] |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue