fit2cloud-ui-plus 0.0.1-beta.3 → 0.0.1-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/fit2cloud-ui-plus.es.js +119 -114
- package/lib/fit2cloud-ui-plus.umd.js +1 -1
- package/package.json +6 -10
- package/src/components/filter-bar/FuFilter.vue +1 -1
- package/src/components/read-write-switch/FuInputRwSwitch.vue +9 -5
- package/src/components/read-write-switch/FuReadWriteSwitch.vue +38 -36
- package/src/components/read-write-switch/FuSelectRwSwitch.vue +11 -7
- package/src/components/read-write-switch/types.ts +4 -0
- package/src/components/split-pane/FuSplitPane.vue +1 -1
- package/src/components/table/FuTableBody.ts +32 -26
- package/src/components/table/table-column-dropdown/FuTableColumnDropdown.vue +5 -2
- package/src/components/table/table-column-select/FuTableColumnSelectDialog.vue +12 -11
- package/src/components/table/table-column-select/FuTableColumnSelectPopover.vue +9 -9
- package/src/components/table/table-column-select/utils.ts +10 -7
- package/src/components/table/table-operations/FuTableMoreButton.vue +4 -2
- package/src/components/table/table-operations/FuTableOperations.vue +5 -5
- package/src/components/tabs/FuTabs.vue +4 -2
- package/src/styles/common/variables.scss +0 -6
- package/src/styles/components/tabs.scss +1 -1
- package/src/tools/types.ts +9 -0
- package/src/tools/utils.ts +36 -36
- package/.editorconfig +0 -14
- package/BETA.MD +0 -6
- package/env.d.ts +0 -13
- package/examples/App.vue +0 -65
- package/examples/assets/github.png +0 -0
- package/examples/assets/hidden-code.png +0 -0
- package/examples/assets/iconfont/demo.css +0 -539
- package/examples/assets/iconfont/demo_index.html +0 -257
- package/examples/assets/iconfont/iconfont.css +0 -27
- package/examples/assets/iconfont/iconfont.js +0 -1
- package/examples/assets/iconfont/iconfont.json +0 -30
- package/examples/assets/iconfont/iconfont.ttf +0 -0
- package/examples/assets/iconfont/iconfont.woff +0 -0
- package/examples/assets/iconfont/iconfont.woff2 +0 -0
- package/examples/assets/logo.png +0 -0
- package/examples/components/CodeExample.vue +0 -209
- package/examples/components/DocumentTable.vue +0 -98
- package/examples/components/Markdown.vue +0 -30
- package/examples/layout/components/AppHeader.vue +0 -35
- package/examples/layout/components/Sidebar.vue +0 -73
- package/examples/layout/index.vue +0 -55
- package/examples/layout/layout.scss +0 -75
- package/examples/main.ts +0 -25
- package/examples/markdown/getting-started.md +0 -38
- package/examples/pages/filter-bar/demo/BaseFilterBar.vue +0 -70
- package/examples/pages/filter-bar/demo/SetConditionsDemo.vue +0 -66
- package/examples/pages/filter-bar/demo/SlotDemo.vue +0 -77
- package/examples/pages/filter-bar/index.vue +0 -56
- package/examples/pages/index.ts +0 -11
- package/examples/pages/read-write-switch/demo/BaseDemo.vue +0 -30
- package/examples/pages/read-write-switch/demo/CustomContentDemo.vue +0 -28
- package/examples/pages/read-write-switch/demo/InputRwSwitchDemo.vue +0 -16
- package/examples/pages/read-write-switch/demo/ReadSwitchDemo.vue +0 -54
- package/examples/pages/read-write-switch/demo/SelectRwSwitchDemo.vue +0 -23
- package/examples/pages/read-write-switch/demo/TableInnerEditDemo.vue +0 -73
- package/examples/pages/read-write-switch/demo/WriteSwitchDemo.vue +0 -39
- package/examples/pages/read-write-switch/index.vue +0 -81
- package/examples/pages/speed-dial/demo/BaseSpeedDial.vue +0 -51
- package/examples/pages/speed-dial/demo/SpeedDialCustom.vue +0 -109
- package/examples/pages/speed-dial/demo/SpeedDialPosition.vue +0 -66
- package/examples/pages/speed-dial/demo/SpeedDialTrigger.vue +0 -64
- package/examples/pages/speed-dial/index.vue +0 -61
- package/examples/pages/split-pane/demo/BaseSplit.vue +0 -36
- package/examples/pages/split-pane/demo/CustomResizer.vue +0 -47
- package/examples/pages/split-pane/demo/NestSplit.vue +0 -34
- package/examples/pages/split-pane/demo/ResizerType.vue +0 -60
- package/examples/pages/split-pane/index.vue +0 -61
- package/examples/pages/table/demo/BaseTable.vue +0 -35
- package/examples/pages/table/demo/DropdownColumn.vue +0 -89
- package/examples/pages/table/demo/DropdownColumnSlot.vue +0 -92
- package/examples/pages/table/demo/SaveSelectColumn.vue +0 -41
- package/examples/pages/table/demo/SelectColumn.vue +0 -47
- package/examples/pages/table/demo/TableOperations.vue +0 -95
- package/examples/pages/table/demo/TablePagination.vue +0 -100
- package/examples/pages/table/index.vue +0 -89
- package/examples/pages/tabs/demo/AddCloseTab.vue +0 -73
- package/examples/pages/tabs/index.vue +0 -42
- package/examples/router/doc-routes.ts +0 -52
- package/examples/router/index.ts +0 -56
- package/index.html +0 -13
- package/plugins/example-transform.ts +0 -30
- package/public/favicon.bmp +0 -0
- package/tsconfig.json +0 -24
- package/tsconfig.node.json +0 -9
- package/vite.config.ts +0 -56
|
@@ -1,257 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8"/>
|
|
5
|
-
<title>iconfont Demo</title>
|
|
6
|
-
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
|
|
7
|
-
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
|
|
8
|
-
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
|
9
|
-
<link rel="stylesheet" href="demo.css">
|
|
10
|
-
<link rel="stylesheet" href="iconfont.css">
|
|
11
|
-
<script src="iconfont.js"></script>
|
|
12
|
-
<!-- jQuery -->
|
|
13
|
-
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
|
14
|
-
<!-- 代码高亮 -->
|
|
15
|
-
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
|
16
|
-
<style>
|
|
17
|
-
.main .logo {
|
|
18
|
-
margin-top: 0;
|
|
19
|
-
height: auto;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.main .logo a {
|
|
23
|
-
display: flex;
|
|
24
|
-
align-items: center;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.main .logo .sub-title {
|
|
28
|
-
margin-left: 0.5em;
|
|
29
|
-
font-size: 22px;
|
|
30
|
-
color: #fff;
|
|
31
|
-
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
|
32
|
-
-webkit-background-clip: text;
|
|
33
|
-
-webkit-text-fill-color: transparent;
|
|
34
|
-
}
|
|
35
|
-
</style>
|
|
36
|
-
</head>
|
|
37
|
-
<body>
|
|
38
|
-
<div class="main">
|
|
39
|
-
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
|
40
|
-
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
|
41
|
-
|
|
42
|
-
</a></h1>
|
|
43
|
-
<div class="nav-tabs">
|
|
44
|
-
<ul id="tabs" class="dib-box">
|
|
45
|
-
<li class="dib active"><span>Unicode</span></li>
|
|
46
|
-
<li class="dib"><span>Font class</span></li>
|
|
47
|
-
<li class="dib"><span>Symbol</span></li>
|
|
48
|
-
</ul>
|
|
49
|
-
|
|
50
|
-
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2389754" target="_blank" class="nav-more">查看项目</a>
|
|
51
|
-
|
|
52
|
-
</div>
|
|
53
|
-
<div class="tab-container">
|
|
54
|
-
<div class="content unicode" style="display: block;">
|
|
55
|
-
<ul class="icon_lists dib-box">
|
|
56
|
-
|
|
57
|
-
<li class="dib">
|
|
58
|
-
<span class="icon iconfont"></span>
|
|
59
|
-
<div class="name">钱</div>
|
|
60
|
-
<div class="code-name">&#xe632;</div>
|
|
61
|
-
</li>
|
|
62
|
-
|
|
63
|
-
<li class="dib">
|
|
64
|
-
<span class="icon iconfont"></span>
|
|
65
|
-
<div class="name">会员-线性3-0</div>
|
|
66
|
-
<div class="code-name">&#xe68a;</div>
|
|
67
|
-
</li>
|
|
68
|
-
|
|
69
|
-
<li class="dib">
|
|
70
|
-
<span class="icon iconfont"></span>
|
|
71
|
-
<div class="name">github</div>
|
|
72
|
-
<div class="code-name">&#xe60e;</div>
|
|
73
|
-
</li>
|
|
74
|
-
|
|
75
|
-
</ul>
|
|
76
|
-
<div class="article markdown">
|
|
77
|
-
<h2 id="unicode-">Unicode 引用</h2>
|
|
78
|
-
<hr>
|
|
79
|
-
|
|
80
|
-
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
|
81
|
-
<ul>
|
|
82
|
-
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
|
83
|
-
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
|
84
|
-
</ul>
|
|
85
|
-
<blockquote>
|
|
86
|
-
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
|
87
|
-
</blockquote>
|
|
88
|
-
<p>Unicode 使用步骤如下：</p>
|
|
89
|
-
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
|
90
|
-
<pre><code class="language-css"
|
|
91
|
-
>@font-face {
|
|
92
|
-
font-family: 'iconfont';
|
|
93
|
-
src: url('iconfont.woff2?t=1624608444218') format('woff2'),
|
|
94
|
-
url('iconfont.woff?t=1624608444218') format('woff'),
|
|
95
|
-
url('iconfont.ttf?t=1624608444218') format('truetype');
|
|
96
|
-
}
|
|
97
|
-
</code></pre>
|
|
98
|
-
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
|
99
|
-
<pre><code class="language-css"
|
|
100
|
-
>.iconfont {
|
|
101
|
-
font-family: "iconfont" !important;
|
|
102
|
-
font-size: 16px;
|
|
103
|
-
font-style: normal;
|
|
104
|
-
-webkit-font-smoothing: antialiased;
|
|
105
|
-
-moz-osx-font-smoothing: grayscale;
|
|
106
|
-
}
|
|
107
|
-
</code></pre>
|
|
108
|
-
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
|
109
|
-
<pre>
|
|
110
|
-
<code class="language-html"
|
|
111
|
-
><span class="iconfont">&#x33;</span>
|
|
112
|
-
</code></pre>
|
|
113
|
-
<blockquote>
|
|
114
|
-
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
115
|
-
</blockquote>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<div class="content font-class">
|
|
119
|
-
<ul class="icon_lists dib-box">
|
|
120
|
-
|
|
121
|
-
<li class="dib">
|
|
122
|
-
<span class="icon iconfont icon-money"></span>
|
|
123
|
-
<div class="name">
|
|
124
|
-
钱
|
|
125
|
-
</div>
|
|
126
|
-
<div class="code-name">.icon-money
|
|
127
|
-
</div>
|
|
128
|
-
</li>
|
|
129
|
-
|
|
130
|
-
<li class="dib">
|
|
131
|
-
<span class="icon iconfont icon-huiyuan"></span>
|
|
132
|
-
<div class="name">
|
|
133
|
-
会员-线性3-0
|
|
134
|
-
</div>
|
|
135
|
-
<div class="code-name">.icon-huiyuan
|
|
136
|
-
</div>
|
|
137
|
-
</li>
|
|
138
|
-
|
|
139
|
-
<li class="dib">
|
|
140
|
-
<span class="icon iconfont icon-github"></span>
|
|
141
|
-
<div class="name">
|
|
142
|
-
github
|
|
143
|
-
</div>
|
|
144
|
-
<div class="code-name">.icon-github
|
|
145
|
-
</div>
|
|
146
|
-
</li>
|
|
147
|
-
|
|
148
|
-
</ul>
|
|
149
|
-
<div class="article markdown">
|
|
150
|
-
<h2 id="font-class-">font-class 引用</h2>
|
|
151
|
-
<hr>
|
|
152
|
-
|
|
153
|
-
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
|
154
|
-
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
|
155
|
-
<ul>
|
|
156
|
-
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
|
157
|
-
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
|
158
|
-
</ul>
|
|
159
|
-
<p>使用步骤如下：</p>
|
|
160
|
-
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
|
161
|
-
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
|
162
|
-
</code></pre>
|
|
163
|
-
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
164
|
-
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
|
165
|
-
</code></pre>
|
|
166
|
-
<blockquote>
|
|
167
|
-
<p>"
|
|
168
|
-
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
169
|
-
</blockquote>
|
|
170
|
-
</div>
|
|
171
|
-
</div>
|
|
172
|
-
<div class="content symbol">
|
|
173
|
-
<ul class="icon_lists dib-box">
|
|
174
|
-
|
|
175
|
-
<li class="dib">
|
|
176
|
-
<svg class="icon svg-icon" aria-hidden="true">
|
|
177
|
-
<use xlink:href="#icon-money"></use>
|
|
178
|
-
</svg>
|
|
179
|
-
<div class="name">钱</div>
|
|
180
|
-
<div class="code-name">#icon-money</div>
|
|
181
|
-
</li>
|
|
182
|
-
|
|
183
|
-
<li class="dib">
|
|
184
|
-
<svg class="icon svg-icon" aria-hidden="true">
|
|
185
|
-
<use xlink:href="#icon-huiyuan"></use>
|
|
186
|
-
</svg>
|
|
187
|
-
<div class="name">会员-线性3-0</div>
|
|
188
|
-
<div class="code-name">#icon-huiyuan</div>
|
|
189
|
-
</li>
|
|
190
|
-
|
|
191
|
-
<li class="dib">
|
|
192
|
-
<svg class="icon svg-icon" aria-hidden="true">
|
|
193
|
-
<use xlink:href="#icon-github"></use>
|
|
194
|
-
</svg>
|
|
195
|
-
<div class="name">github</div>
|
|
196
|
-
<div class="code-name">#icon-github</div>
|
|
197
|
-
</li>
|
|
198
|
-
|
|
199
|
-
</ul>
|
|
200
|
-
<div class="article markdown">
|
|
201
|
-
<h2 id="symbol-">Symbol 引用</h2>
|
|
202
|
-
<hr>
|
|
203
|
-
|
|
204
|
-
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
|
205
|
-
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
|
206
|
-
<ul>
|
|
207
|
-
<li>支持多色图标了，不再受单色限制。</li>
|
|
208
|
-
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
|
209
|
-
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
|
210
|
-
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
|
211
|
-
</ul>
|
|
212
|
-
<p>使用步骤如下：</p>
|
|
213
|
-
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
|
214
|
-
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
|
215
|
-
</code></pre>
|
|
216
|
-
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
|
217
|
-
<pre><code class="language-html"><style>
|
|
218
|
-
.icon {
|
|
219
|
-
width: 1em;
|
|
220
|
-
height: 1em;
|
|
221
|
-
vertical-align: -0.15em;
|
|
222
|
-
fill: currentColor;
|
|
223
|
-
overflow: hidden;
|
|
224
|
-
}
|
|
225
|
-
</style>
|
|
226
|
-
</code></pre>
|
|
227
|
-
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
228
|
-
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
229
|
-
<use xlink:href="#icon-xxx"></use>
|
|
230
|
-
</svg>
|
|
231
|
-
</code></pre>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
|
|
235
|
-
</div>
|
|
236
|
-
</div>
|
|
237
|
-
<script>
|
|
238
|
-
$(document).ready(function () {
|
|
239
|
-
$('.tab-container .content:first').show()
|
|
240
|
-
|
|
241
|
-
$('#tabs li').click(function (e) {
|
|
242
|
-
var tabContent = $('.tab-container .content')
|
|
243
|
-
var index = $(this).index()
|
|
244
|
-
|
|
245
|
-
if ($(this).hasClass('active')) {
|
|
246
|
-
return
|
|
247
|
-
} else {
|
|
248
|
-
$('#tabs li').removeClass('active')
|
|
249
|
-
$(this).addClass('active')
|
|
250
|
-
|
|
251
|
-
tabContent.hide().eq(index).fadeIn()
|
|
252
|
-
}
|
|
253
|
-
})
|
|
254
|
-
})
|
|
255
|
-
</script>
|
|
256
|
-
</body>
|
|
257
|
-
</html>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
@font-face {
|
|
2
|
-
font-family: "iconfont"; /* Project id 2389754 */
|
|
3
|
-
src: url('iconfont.woff2?t=1624608444218') format('woff2'),
|
|
4
|
-
url('iconfont.woff?t=1624608444218') format('woff'),
|
|
5
|
-
url('iconfont.ttf?t=1624608444218') format('truetype');
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.iconfont {
|
|
9
|
-
font-family: "iconfont" !important;
|
|
10
|
-
font-size: 16px;
|
|
11
|
-
font-style: normal;
|
|
12
|
-
-webkit-font-smoothing: antialiased;
|
|
13
|
-
-moz-osx-font-smoothing: grayscale;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.icon-money:before {
|
|
17
|
-
content: "\e632";
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.icon-huiyuan:before {
|
|
21
|
-
content: "\e68a";
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.icon-github:before {
|
|
25
|
-
content: "\e60e";
|
|
26
|
-
}
|
|
27
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
!function(t){var e,n,c,o,i,a,d='<svg><symbol id="icon-money" viewBox="0 0 1024 1024"><path d="M500.777913 467.73996c-10.756995 0-21.515013-4.105504-29.727045-12.310374L355.841939 340.232938c-16.424064-16.423041-16.424064-43.043329 0-59.46023 16.395412-16.423041 43.029002-16.415878 59.453067-0.00614l115.208928 115.196649c16.424064 16.423041 16.424064 43.042305 0 59.458183C522.306228 463.633433 511.535931 467.73996 500.777913 467.73996z" ></path><path d="M525.741467 467.73996c-10.756995 0-21.51399-4.105504-29.724998-12.310374-16.424064-16.415878-16.424064-43.036165 0-59.46023l115.182322-115.208928c16.395412-16.424064 43.029002-16.415878 59.453067-0.007163 16.423041 16.415878 16.423041 43.036165 0 59.459207l-115.183346 115.208928C547.270806 463.633433 536.498462 467.73996 525.741467 467.73996z" ></path><path d="M663.451876 522.252505 363.067504 522.252505c-23.224957 0-42.043558-18.825764-42.043558-42.044582 0-23.217794 18.818601-42.043558 42.043558-42.043558l300.383348 0c23.225981 0 42.044582 18.825764 42.044582 42.043558C705.496457 503.426741 686.677856 522.252505 663.451876 522.252505z" ></path><path d="M663.451876 662.398382 363.067504 662.398382c-23.224957 0-42.043558-18.825764-42.043558-42.043558 0-23.218818 18.818601-42.043558 42.043558-42.043558l300.383348 0c23.225981 0 42.044582 18.824741 42.044582 42.043558C705.496457 643.571594 686.677856 662.398382 663.451876 662.398382z" ></path><path d="M513.259178 779.141246c-23.224957 0-42.043558-18.824741-42.043558-42.044582L471.21562 484.161978c0-23.217794 18.818601-42.043558 42.043558-42.043558s42.044582 18.825764 42.044582 42.043558l0 252.933663C555.30376 760.315482 536.485159 779.141246 513.259178 779.141246z" ></path><path d="M513.136382 958.49817c-60.95835 0.007163-121.807207-12.585643-179.343621-37.712927C107.163183 821.807998 3.305791 556.925189 102.27792 330.309938c47.922453-109.776196 135.739521-194.322777 247.267617-238.050698 111.515816-43.7402 233.390561-41.407062 343.153454 6.528694 21.282722 9.293667 31.000038 34.07098 21.706371 55.353702-9.278317 21.268396-34.037211 31.025621-55.346539 21.699208-89.192392-38.957267-188.225919-40.818661-278.8141-5.302773C289.627888 206.074426 218.281957 274.764877 179.337993 363.957269c-80.413448 184.127578 3.968381 399.349337 188.109262 479.768925 89.151459 38.936801 188.212616 40.819684 278.815123 5.303796 90.602507-35.529191 161.948439-104.220666 200.898543-193.420221 56.673767-129.73783 32.546254-282.017048-61.492516-387.955846-15.410991-17.367553-13.821797-43.945885 3.545756-59.356876 17.380856-15.402805 43.932582-13.82282 59.356876 3.53143 115.703185 130.374326 145.402601 317.77239 75.643817 477.435787-47.928592 109.771079-135.739521 194.316637-247.254314 238.043534C623.898021 948.118775 568.468594 958.49817 513.136382 958.49817z" ></path></symbol><symbol id="icon-huiyuan" viewBox="0 0 1024 1024"><path d="M513.50154309 968.68360418c-15.58744727 0-30.35262094-7.07870311-40.09477548-19.26980291L35.22431927 401.69020973c-14.85455123-18.57265793-15.01543085-44.9390395-0.37538576-63.69045255l205.40751902-263.00242163a51.32059761 51.32059761 0 0 1 40.47016125-19.73456628h464.11981757c15.81982894 0 30.74588222 7.29320927 40.47016127 19.73456628l205.3896435 263.00242163c14.62216957 18.71566202 14.497041 45.04629259-0.32175925 63.61895051l-128.73944408 161.46950826c-17.66100678 22.16563603-49.96205861 25.86586721-72.16344566 8.13335838-22.18351153-17.67888227-25.83011618-49.99780966-8.13335839-72.1634457l103.48134432-129.79409932-165.04461083-211.32431382h-413.99687933l-164.99098428 211.27068727 372.6329424 465.83586683 140.60878468-176.32405951c17.67888227-22.18351153 49.97993414-25.81224066 72.16344568-8.13335839 22.18351153 17.67888227 25.83011618 49.99780966 8.13335837 72.16344568L553.64994512 949.3422992a51.29378433 51.29378433 0 0 1-40.11265101 19.34130498h-0.03575102z" ></path><path d="M524.65586316 629.6923771c-15.58744727 0-30.35262094-7.07870311-40.09477549-19.26980295L280.86961789 355.7143905c-17.71463329-22.1477605-14.12165522-54.46668787 8.02610528-72.18132119 22.20138704-17.69675779 54.4845634-14.08590419 72.18132121 8.02610531l163.54306773 204.51374336 163.25705955-204.47799235c17.71463329-22.16563603 50.03356067-25.77648962 72.18132117-8.09760733 22.16563603 17.69675779 25.77648962 50.01568514 8.09760736 72.18132118L564.78638967 610.36894764a51.33847314 51.33847314 0 0 1-40.13052651 19.32342946z" ></path></symbol><symbol id="icon-github" viewBox="0 0 1024 1024"><path d="M512 0.708923C229.139692 0.708923 0 235.441231 0 524.996923 0 756.657231 146.668308 953.107692 350.050462 1022.424615c25.6 4.883692 35.052308-11.264 35.052307-25.206153 0-12.524308-0.472615-45.449846-0.708923-89.16677-142.414769 31.665231-172.425846-70.340923-172.425846-70.340923-23.315692-60.494769-56.950154-76.642462-56.950154-76.642461-46.395077-32.531692 3.544615-31.901538 3.544616-31.901539 51.436308 3.702154 78.454154 54.035692 78.454153 54.035693 45.686154 80.187077 119.886769 57.028923 149.110154 43.559384 4.647385-33.870769 17.801846-56.950154 32.452923-70.104615-113.742769-13.075692-233.235692-58.210462-233.235692-259.072 0-57.265231 19.849846-103.975385 52.696615-140.681846-5.750154-13.233231-23.079385-66.56 4.489847-138.791385 0 0 42.850462-14.020923 140.760615 53.799385a480.019692 480.019692 0 0 1 128-17.723077 480.019692 480.019692 0 0 1 128 17.723077c97.28-67.820308 140.209231-53.799385 140.209231-53.799385 27.569231 72.231385 10.24 125.558154 5.12 138.791385 32.610462 36.706462 52.460308 83.495385 52.460307 140.681846 0 201.412923-119.729231 245.76-233.629538 258.678154 17.959385 15.753846 34.658462 47.891692 34.658461 96.886153 0 70.262154-0.708923 126.582154-0.708923 143.675077 0 13.705846 8.979692 30.089846 35.209847 24.891077C877.410462 952.950154 1024 756.184615 1024 524.996923 1024 235.441231 794.781538 0.708923 512 0.708923" ></path></symbol></svg>',l=(l=document.getElementsByTagName("script"))[l.length-1].getAttribute("data-injectcss");if(l&&!t.__iconfont__svg__cssinject__){t.__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)}}function s(){i||(i=!0,c())}e=function(){var t,e,n;(n=document.createElement("div")).innerHTML=d,d=null,(e=n.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",t=e,(n=document.body).firstChild?(e=n.firstChild).parentNode.insertBefore(t,e):n.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),e()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(c=e,o=t.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(a,50)}s()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}(window);
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"id": "2389754",
|
|
3
|
-
"name": "fit2cloud-ui",
|
|
4
|
-
"font_family": "iconfont",
|
|
5
|
-
"css_prefix_text": "icon-",
|
|
6
|
-
"description": "",
|
|
7
|
-
"glyphs": [
|
|
8
|
-
{
|
|
9
|
-
"icon_id": "436377",
|
|
10
|
-
"name": "钱",
|
|
11
|
-
"font_class": "money",
|
|
12
|
-
"unicode": "e632",
|
|
13
|
-
"unicode_decimal": 58930
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"icon_id": "22241530",
|
|
17
|
-
"name": "会员-线性3-0",
|
|
18
|
-
"font_class": "huiyuan",
|
|
19
|
-
"unicode": "e68a",
|
|
20
|
-
"unicode_decimal": 59018
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"icon_id": "4255936",
|
|
24
|
-
"name": "github",
|
|
25
|
-
"font_class": "github",
|
|
26
|
-
"unicode": "e60e",
|
|
27
|
-
"unicode_decimal": 58894
|
|
28
|
-
}
|
|
29
|
-
]
|
|
30
|
-
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/examples/assets/logo.png
DELETED
|
Binary file
|
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<template>
|
|
3
|
-
<div
|
|
4
|
-
class="code-example"
|
|
5
|
-
@mouseenter="hovering = true"
|
|
6
|
-
@mouseleave="hovering = false"
|
|
7
|
-
>
|
|
8
|
-
<div class="source" v-if="component">
|
|
9
|
-
<component :is="component" />
|
|
10
|
-
</div>
|
|
11
|
-
<div
|
|
12
|
-
class="meta"
|
|
13
|
-
ref="meta"
|
|
14
|
-
:style="{ height: childHeight }"
|
|
15
|
-
v-if="component"
|
|
16
|
-
>
|
|
17
|
-
<div class="demo-container-code">
|
|
18
|
-
<pre class="language-html" v-html="html" />
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
<!-- <div class="demo-block-control" ref="control" @click="showCode = !showCode" v-if="component.name">
|
|
22
|
-
<transition name="arrow-slide">
|
|
23
|
-
<i :class="[iconClass(), { hovering: hovering }]"></i>
|
|
24
|
-
</transition>
|
|
25
|
-
<transition name="text-slide">
|
|
26
|
-
<span v-show="hovering">{{ controlText() }}</span>
|
|
27
|
-
</transition>
|
|
28
|
-
</div>
|
|
29
|
-
<el-tooltip content="隐藏代码" placement="left" v-if="component">
|
|
30
|
-
<el-button v-show="fixedControl" class="is-fixed" @click="showCode = false" circle>
|
|
31
|
-
<img src="../assets/hidden-code.png" width="18" />
|
|
32
|
-
</el-button>
|
|
33
|
-
</el-tooltip> -->
|
|
34
|
-
</div>
|
|
35
|
-
</template>
|
|
36
|
-
|
|
37
|
-
<script setup lang="ts">
|
|
38
|
-
import "prismjs";
|
|
39
|
-
import "prismjs/themes/prism.css";
|
|
40
|
-
import { computed, ref, watch, nextTick, onBeforeUnmount } from "vue";
|
|
41
|
-
|
|
42
|
-
const Prism = (window as any).Prism;
|
|
43
|
-
|
|
44
|
-
const props = defineProps({
|
|
45
|
-
component: {
|
|
46
|
-
type: Object,
|
|
47
|
-
default: () => ({}),
|
|
48
|
-
},
|
|
49
|
-
description: String,
|
|
50
|
-
label: {
|
|
51
|
-
type: String,
|
|
52
|
-
default: "Vue",
|
|
53
|
-
},
|
|
54
|
-
lang: String,
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
const html = computed(() => {
|
|
58
|
-
return Prism.highlight(
|
|
59
|
-
props.component.__sourceCode,
|
|
60
|
-
Prism.languages.html,
|
|
61
|
-
"html"
|
|
62
|
-
);
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
const showCode = ref(false);
|
|
66
|
-
const hovering = ref(false);
|
|
67
|
-
const fixedControl = ref(false);
|
|
68
|
-
const scrollParent = ref<HTMLElement | null | undefined>();
|
|
69
|
-
const childHeight = ref("0");
|
|
70
|
-
|
|
71
|
-
// refs
|
|
72
|
-
const codeBlock = ref();
|
|
73
|
-
const control = ref();
|
|
74
|
-
const meta = ref();
|
|
75
|
-
watch(showCode, (val) => {
|
|
76
|
-
nextTick(() => {
|
|
77
|
-
childHeight.value = val ? `${codeBlock.value.$el.offsetHeight}px` : "0";
|
|
78
|
-
});
|
|
79
|
-
if (!val) {
|
|
80
|
-
fixedControl.value = false;
|
|
81
|
-
control.value.style.left = "0";
|
|
82
|
-
removeScrollHandler();
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
setTimeout(() => {
|
|
86
|
-
scrollParent.value = document.querySelector(
|
|
87
|
-
".page-component__scroll > .el-scrollbar__wrap"
|
|
88
|
-
) as HTMLElement;
|
|
89
|
-
scrollParent.value &&
|
|
90
|
-
scrollParent.value.addEventListener("scroll", scrollHandler);
|
|
91
|
-
scrollHandler();
|
|
92
|
-
}, 200);
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
onBeforeUnmount(() => {
|
|
96
|
-
removeScrollHandler();
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
function iconClass() {
|
|
100
|
-
return showCode ? "el-icon-caret-top" : "el-icon-caret-bottom";
|
|
101
|
-
}
|
|
102
|
-
function controlText() {
|
|
103
|
-
return showCode ? "隐藏代码" : "显示代码";
|
|
104
|
-
}
|
|
105
|
-
// function codeArea() {
|
|
106
|
-
// return codeBlock.value
|
|
107
|
-
// },
|
|
108
|
-
function scrollHandler() {
|
|
109
|
-
const { top, bottom, left } = meta.value.getBoundingClientRect();
|
|
110
|
-
fixedControl.value =
|
|
111
|
-
bottom > document.documentElement.clientHeight &&
|
|
112
|
-
top + 44 <= document.documentElement.clientHeight;
|
|
113
|
-
control.value.style.left = fixedControl.value ? `${left}px` : "0";
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
function removeScrollHandler() {
|
|
117
|
-
scrollParent.value &&
|
|
118
|
-
scrollParent.value.removeEventListener("scroll", scrollHandler);
|
|
119
|
-
}
|
|
120
|
-
</script>
|
|
121
|
-
|
|
122
|
-
<style lang="scss" scoped>
|
|
123
|
-
$themeColor: #2d61a2;
|
|
124
|
-
|
|
125
|
-
.code-example {
|
|
126
|
-
border: 1px solid #ebebeb;
|
|
127
|
-
border-radius: 3px;
|
|
128
|
-
transition: 0.2s;
|
|
129
|
-
|
|
130
|
-
&:hover {
|
|
131
|
-
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.source {
|
|
135
|
-
padding: 24px;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.meta {
|
|
139
|
-
background-color: #fafafa;
|
|
140
|
-
border-top: solid 1px #eaeefb;
|
|
141
|
-
overflow: hidden;
|
|
142
|
-
height: 0;
|
|
143
|
-
transition: height 0.2s;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.is-fixed {
|
|
147
|
-
position: fixed;
|
|
148
|
-
bottom: 150px;
|
|
149
|
-
margin-left: 795px;
|
|
150
|
-
// right: 150px;
|
|
151
|
-
color: #2d61a2;
|
|
152
|
-
font-size: 16px;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.demo-block-control {
|
|
156
|
-
border-top: solid 1px #eaeefb;
|
|
157
|
-
height: 44px;
|
|
158
|
-
box-sizing: border-box;
|
|
159
|
-
background-color: #fff;
|
|
160
|
-
border-bottom-left-radius: 4px;
|
|
161
|
-
border-bottom-right-radius: 4px;
|
|
162
|
-
text-align: center;
|
|
163
|
-
margin-top: -1px;
|
|
164
|
-
color: #d3dce6;
|
|
165
|
-
cursor: pointer;
|
|
166
|
-
position: relative;
|
|
167
|
-
|
|
168
|
-
i {
|
|
169
|
-
font-size: 16px;
|
|
170
|
-
line-height: 44px;
|
|
171
|
-
transition: 0.3s;
|
|
172
|
-
|
|
173
|
-
&.hovering {
|
|
174
|
-
transform: translateX(-40px);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
> span {
|
|
179
|
-
position: absolute;
|
|
180
|
-
transform: translateX(-30px);
|
|
181
|
-
font-size: 14px;
|
|
182
|
-
line-height: 44px;
|
|
183
|
-
transition: 0.3s;
|
|
184
|
-
display: inline-block;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
&:hover {
|
|
188
|
-
color: $themeColor;
|
|
189
|
-
background-color: #f9fafc;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
& .text-slide-enter,
|
|
193
|
-
& .text-slide-leave-active {
|
|
194
|
-
opacity: 0;
|
|
195
|
-
transform: translateX(10px);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.control-button {
|
|
199
|
-
line-height: 26px;
|
|
200
|
-
position: absolute;
|
|
201
|
-
top: 0;
|
|
202
|
-
right: 0;
|
|
203
|
-
font-size: 14px;
|
|
204
|
-
padding-left: 5px;
|
|
205
|
-
padding-right: 25px;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
</style>
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="document-table">
|
|
3
|
-
<el-tooltip content="属性说明" placement="left">
|
|
4
|
-
<el-button @click="drawer = true" class="attributesButton" icon="el-icon-reading" circle>
|
|
5
|
-
</el-button>
|
|
6
|
-
</el-tooltip>
|
|
7
|
-
<el-drawer :visible.sync="drawer" direction="rtl" size="60%">
|
|
8
|
-
<div class="drawer-container">
|
|
9
|
-
<div class="table" v-for="(item, index) in data" :key="index">
|
|
10
|
-
<!-- <el-scrollbar> -->
|
|
11
|
-
<h1>{{ item.name || 'Attributes'}}</h1>
|
|
12
|
-
<div v-if="item.children&&item.children.length>0">
|
|
13
|
-
<div v-for="(child, i) in item.children" :key="i">
|
|
14
|
-
<h4>{{ child.name || 'Attributes'}}</h4>
|
|
15
|
-
<el-table :data="child.table" style="width: 100%" border
|
|
16
|
-
header-row-class-name="attr-table-th">
|
|
17
|
-
<template>
|
|
18
|
-
<el-table-column v-for="(value,key) in child.header" :key="key" :prop="key"
|
|
19
|
-
:label="value">
|
|
20
|
-
<template slot-scope="scope">{{scope.row[key]}}</template>
|
|
21
|
-
</el-table-column>
|
|
22
|
-
</template>
|
|
23
|
-
</el-table>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
<el-table v-else :data="item.table" style="width: 100%" border
|
|
27
|
-
header-row-class-name="attr-table-th">
|
|
28
|
-
<template>
|
|
29
|
-
<el-table-column v-for="(value,key) in item.header" :key="key" :prop="key"
|
|
30
|
-
:label="value">
|
|
31
|
-
<template slot-scope="scope">{{scope.row[key]}}</template>
|
|
32
|
-
</el-table-column>
|
|
33
|
-
</template>
|
|
34
|
-
</el-table>
|
|
35
|
-
</div>
|
|
36
|
-
<!-- </el-scrollbar> -->
|
|
37
|
-
</div>
|
|
38
|
-
</el-drawer>
|
|
39
|
-
</div>
|
|
40
|
-
</template>
|
|
41
|
-
<script>
|
|
42
|
-
export default {
|
|
43
|
-
name: "DocumentTable",
|
|
44
|
-
components: {},
|
|
45
|
-
props: {
|
|
46
|
-
data: {
|
|
47
|
-
type: Array,
|
|
48
|
-
default: () => [],
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
watch: {},
|
|
52
|
-
data() {
|
|
53
|
-
return {
|
|
54
|
-
drawer: false,
|
|
55
|
-
height: 0,
|
|
56
|
-
};
|
|
57
|
-
},
|
|
58
|
-
computed: {},
|
|
59
|
-
methods: {},
|
|
60
|
-
created() {},
|
|
61
|
-
mounted() {
|
|
62
|
-
// this.height = document.documentElement.clientHeight - 100;
|
|
63
|
-
},
|
|
64
|
-
};
|
|
65
|
-
</script>
|
|
66
|
-
<style scoped lang="scss">
|
|
67
|
-
.attributesButton {
|
|
68
|
-
position: fixed;
|
|
69
|
-
margin-left: 840px;
|
|
70
|
-
// right: 0;
|
|
71
|
-
// top: 0;
|
|
72
|
-
z-index: 5;
|
|
73
|
-
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
|
|
74
|
-
}
|
|
75
|
-
.el-icon-s-flag {
|
|
76
|
-
color: #409eff;
|
|
77
|
-
}
|
|
78
|
-
:deep(.el-drawer__header) {
|
|
79
|
-
font-weight: 700;
|
|
80
|
-
font-size: 18px;
|
|
81
|
-
margin-bottom: 0;
|
|
82
|
-
}
|
|
83
|
-
.drawer-container {
|
|
84
|
-
height: calc(100vh - 55px);
|
|
85
|
-
overflow: auto;
|
|
86
|
-
padding: 0 20px;
|
|
87
|
-
}
|
|
88
|
-
.table {
|
|
89
|
-
margin-bottom: 40px;
|
|
90
|
-
h4 {
|
|
91
|
-
font-size: 18px;
|
|
92
|
-
color: #999999;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
:deep(.attr-table-th) th {
|
|
96
|
-
background: #f5f7fa;
|
|
97
|
-
}
|
|
98
|
-
</style>
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<article class="markdown-body" v-html="content"></article>
|
|
3
|
-
</template>
|
|
4
|
-
|
|
5
|
-
<script setup lang="ts">
|
|
6
|
-
const props = defineProps({
|
|
7
|
-
content: {
|
|
8
|
-
type: String,
|
|
9
|
-
required: true,
|
|
10
|
-
},
|
|
11
|
-
});
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<style lang="scss" scoped>
|
|
16
|
-
.component-block {
|
|
17
|
-
margin-top: 40px;
|
|
18
|
-
|
|
19
|
-
p {
|
|
20
|
-
font-size: 14px;
|
|
21
|
-
color: #5e6d82;
|
|
22
|
-
line-height: 1.5em;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
h2 {
|
|
26
|
-
font-weight: 400;
|
|
27
|
-
color: #1f2f3d;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
</style>
|