@vyr/service-graph 0.0.1

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.
@@ -0,0 +1,326 @@
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/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
+ <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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=4957342" 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 graphfont">&#xe7e7;</span>
59
+ <div class="name">branch</div>
60
+ <div class="code-name">&amp;#xe7e7;</div>
61
+ </li>
62
+
63
+ <li class="dib">
64
+ <span class="icon graphfont">&#xe676;</span>
65
+ <div class="name">loading</div>
66
+ <div class="code-name">&amp;#xe676;</div>
67
+ </li>
68
+
69
+ <li class="dib">
70
+ <span class="icon graphfont">&#xe67f;</span>
71
+ <div class="name">success</div>
72
+ <div class="code-name">&amp;#xe67f;</div>
73
+ </li>
74
+
75
+ <li class="dib">
76
+ <span class="icon graphfont">&#xe682;</span>
77
+ <div class="name">warning</div>
78
+ <div class="code-name">&amp;#xe682;</div>
79
+ </li>
80
+
81
+ <li class="dib">
82
+ <span class="icon graphfont">&#xe729;</span>
83
+ <div class="name">condition</div>
84
+ <div class="code-name">&amp;#xe729;</div>
85
+ </li>
86
+
87
+ <li class="dib">
88
+ <span class="icon graphfont">&#xe9412;</span>
89
+ <div class="name">execute</div>
90
+ <div class="code-name">&amp;#xe9412;</div>
91
+ </li>
92
+
93
+ </ul>
94
+ <div class="article markdown">
95
+ <h2 id="unicode-">Unicode 引用</h2>
96
+ <hr>
97
+
98
+ <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
99
+ <ul>
100
+ <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
101
+ <li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
102
+ </ul>
103
+ <blockquote>
104
+ <p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
105
+ </blockquote>
106
+ <p>Unicode 使用步骤如下:</p>
107
+ <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
108
+ <pre><code class="language-css"
109
+ >@font-face {
110
+ font-family: 'graphfont';
111
+ src: url('iconfont.woff2?t=1750705126841') format('woff2'),
112
+ url('iconfont.woff?t=1750705126841') format('woff'),
113
+ url('iconfont.ttf?t=1750705126841') format('truetype');
114
+ }
115
+ </code></pre>
116
+ <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
117
+ <pre><code class="language-css"
118
+ >.graphfont {
119
+ font-family: "graphfont" !important;
120
+ font-size: 16px;
121
+ font-style: normal;
122
+ -webkit-font-smoothing: antialiased;
123
+ -moz-osx-font-smoothing: grayscale;
124
+ }
125
+ </code></pre>
126
+ <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
127
+ <pre>
128
+ <code class="language-html"
129
+ >&lt;span class="graphfont"&gt;&amp;#x33;&lt;/span&gt;
130
+ </code></pre>
131
+ <blockquote>
132
+ <p>"graphfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
133
+ </blockquote>
134
+ </div>
135
+ </div>
136
+ <div class="content font-class">
137
+ <ul class="icon_lists dib-box">
138
+
139
+ <li class="dib">
140
+ <span class="icon graphfont graph-branch"></span>
141
+ <div class="name">
142
+ branch
143
+ </div>
144
+ <div class="code-name">.graph-branch
145
+ </div>
146
+ </li>
147
+
148
+ <li class="dib">
149
+ <span class="icon graphfont graph-loading"></span>
150
+ <div class="name">
151
+ loading
152
+ </div>
153
+ <div class="code-name">.graph-loading
154
+ </div>
155
+ </li>
156
+
157
+ <li class="dib">
158
+ <span class="icon graphfont graph-success"></span>
159
+ <div class="name">
160
+ success
161
+ </div>
162
+ <div class="code-name">.graph-success
163
+ </div>
164
+ </li>
165
+
166
+ <li class="dib">
167
+ <span class="icon graphfont graph-warning"></span>
168
+ <div class="name">
169
+ warning
170
+ </div>
171
+ <div class="code-name">.graph-warning
172
+ </div>
173
+ </li>
174
+
175
+ <li class="dib">
176
+ <span class="icon graphfont graph-condition"></span>
177
+ <div class="name">
178
+ condition
179
+ </div>
180
+ <div class="code-name">.graph-condition
181
+ </div>
182
+ </li>
183
+
184
+ <li class="dib">
185
+ <span class="icon graphfont graph-execute"></span>
186
+ <div class="name">
187
+ execute
188
+ </div>
189
+ <div class="code-name">.graph-execute
190
+ </div>
191
+ </li>
192
+
193
+ </ul>
194
+ <div class="article markdown">
195
+ <h2 id="font-class-">font-class 引用</h2>
196
+ <hr>
197
+
198
+ <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
199
+ <p>与 Unicode 使用方式相比,具有如下特点:</p>
200
+ <ul>
201
+ <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
202
+ <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
203
+ </ul>
204
+ <p>使用步骤如下:</p>
205
+ <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
206
+ <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
207
+ </code></pre>
208
+ <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
209
+ <pre><code class="language-html">&lt;span class="graphfont graph-xxx"&gt;&lt;/span&gt;
210
+ </code></pre>
211
+ <blockquote>
212
+ <p>"
213
+ graphfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
214
+ </blockquote>
215
+ </div>
216
+ </div>
217
+ <div class="content symbol">
218
+ <ul class="icon_lists dib-box">
219
+
220
+ <li class="dib">
221
+ <svg class="icon svg-icon" aria-hidden="true">
222
+ <use xlink:href="#graph-branch"></use>
223
+ </svg>
224
+ <div class="name">branch</div>
225
+ <div class="code-name">#graph-branch</div>
226
+ </li>
227
+
228
+ <li class="dib">
229
+ <svg class="icon svg-icon" aria-hidden="true">
230
+ <use xlink:href="#graph-loading"></use>
231
+ </svg>
232
+ <div class="name">loading</div>
233
+ <div class="code-name">#graph-loading</div>
234
+ </li>
235
+
236
+ <li class="dib">
237
+ <svg class="icon svg-icon" aria-hidden="true">
238
+ <use xlink:href="#graph-success"></use>
239
+ </svg>
240
+ <div class="name">success</div>
241
+ <div class="code-name">#graph-success</div>
242
+ </li>
243
+
244
+ <li class="dib">
245
+ <svg class="icon svg-icon" aria-hidden="true">
246
+ <use xlink:href="#graph-warning"></use>
247
+ </svg>
248
+ <div class="name">warning</div>
249
+ <div class="code-name">#graph-warning</div>
250
+ </li>
251
+
252
+ <li class="dib">
253
+ <svg class="icon svg-icon" aria-hidden="true">
254
+ <use xlink:href="#graph-condition"></use>
255
+ </svg>
256
+ <div class="name">condition</div>
257
+ <div class="code-name">#graph-condition</div>
258
+ </li>
259
+
260
+ <li class="dib">
261
+ <svg class="icon svg-icon" aria-hidden="true">
262
+ <use xlink:href="#graph-execute"></use>
263
+ </svg>
264
+ <div class="name">execute</div>
265
+ <div class="code-name">#graph-execute</div>
266
+ </li>
267
+
268
+ </ul>
269
+ <div class="article markdown">
270
+ <h2 id="symbol-">Symbol 引用</h2>
271
+ <hr>
272
+
273
+ <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
274
+ 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
275
+ <ul>
276
+ <li>支持多色图标了,不再受单色限制。</li>
277
+ <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
278
+ <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
279
+ <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
280
+ </ul>
281
+ <p>使用步骤如下:</p>
282
+ <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
283
+ <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
284
+ </code></pre>
285
+ <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
286
+ <pre><code class="language-html">&lt;style&gt;
287
+ .icon {
288
+ width: 1em;
289
+ height: 1em;
290
+ vertical-align: -0.15em;
291
+ fill: currentColor;
292
+ overflow: hidden;
293
+ }
294
+ &lt;/style&gt;
295
+ </code></pre>
296
+ <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
297
+ <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
298
+ &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
299
+ &lt;/svg&gt;
300
+ </code></pre>
301
+ </div>
302
+ </div>
303
+
304
+ </div>
305
+ </div>
306
+ <script>
307
+ $(document).ready(function () {
308
+ $('.tab-container .content:first').show()
309
+
310
+ $('#tabs li').click(function (e) {
311
+ var tabContent = $('.tab-container .content')
312
+ var index = $(this).index()
313
+
314
+ if ($(this).hasClass('active')) {
315
+ return
316
+ } else {
317
+ $('#tabs li').removeClass('active')
318
+ $(this).addClass('active')
319
+
320
+ tabContent.hide().eq(index).fadeIn()
321
+ }
322
+ })
323
+ })
324
+ </script>
325
+ </body>
326
+ </html>
@@ -0,0 +1,39 @@
1
+ @font-face {
2
+ font-family: "graphfont"; /* Project id 4957342 */
3
+ src: url('iconfont.woff2?t=1750705126841') format('woff2'),
4
+ url('iconfont.woff?t=1750705126841') format('woff'),
5
+ url('iconfont.ttf?t=1750705126841') format('truetype');
6
+ }
7
+
8
+ .graphfont {
9
+ font-family: "graphfont" !important;
10
+ font-size: 16px;
11
+ font-style: normal;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ .graph-branch:before {
17
+ content: "\e7e7";
18
+ }
19
+
20
+ .graph-loading:before {
21
+ content: "\e676";
22
+ }
23
+
24
+ .graph-success:before {
25
+ content: "\e67f";
26
+ }
27
+
28
+ .graph-warning:before {
29
+ content: "\e682";
30
+ }
31
+
32
+ .graph-condition:before {
33
+ content: "\e729";
34
+ }
35
+
36
+ .graph-execute:before {
37
+ content: "\e9412";
38
+ }
39
+
@@ -0,0 +1 @@
1
+ window._iconfont_svg_string_4957342='<svg><symbol id="graph-branch" viewBox="0 0 1024 1024"><path d="M688.12457276 240.8608551c-47.73902893 0-86.51733398 38.77830505-86.51733399 86.51733399 0 38.70105743 25.56896211 71.53129578 60.63938141 82.57770539v74.08046721L363.68457031 581.83184815V362.21686554c34.14344787-11.58714294 58.70819092-43.95389558 58.70819092-81.95972442 0-47.73902893-38.77830505-86.51733398-86.51733399-86.51733399s-86.51733398 38.77830505-86.51733398 86.51733399c0 38.00582886 24.56474304 70.29533386 58.70819092 81.95972443V661.86038208c-34.14344787 11.58714294-58.70819092 43.95389558-58.70819092 81.95972443 0 47.73902893 38.77830505 86.51733398 86.51733398 86.51733398s86.51733398-38.77830505 86.51733399-86.51733399c0-38.00582886-24.56474304-70.29533386-58.70819092-81.95972442v-21.47483826l327.14366913-107.14244843c16.14475251-5.25283813 26.95941925-20.23887635 26.95941925-37.23335266V408.64268494c33.13922883-12.2051239 56.85424805-44.03114318 56.85424805-81.26449585 0-47.73902893-38.77830505-86.51733398-86.51733398-86.51733399z m-389.32800294 39.39628602c0-20.4706192 16.60823823-37.07885742 37.07885742-37.07885743s37.07885742 16.60823823 37.07885743 37.07885743-16.60823823 37.07885742-37.07885743 37.07885742-37.07885742-16.60823823-37.07885742-37.07885742z m74.15771485 463.48571776c0 20.4706192-16.60823823 37.07885742-37.07885743 37.07885743s-37.07885742-16.60823823-37.07885742-37.07885743 16.60823823-37.07885742 37.07885742-37.07885742 37.07885742 16.60823823 37.07885743 37.07885742z m315.17028809-379.28581237c-20.4706192 0-37.07885742-16.60823823-37.07885743-37.07885742s16.60823823-37.07885742 37.07885743-37.07885742 37.07885742 16.60823823 37.07885742 37.07885742-16.60823823 37.07885742-37.07885742 37.07885742z" fill="#515151" ></path></symbol><symbol id="graph-loading" viewBox="0 0 1024 1024"><path d="M512 195.28475976c-12.35961937 0-23.17428589 10.81466651-23.17428589 23.17428589v108.14666724c0 12.35961937 10.81466651 23.17428589 23.17428589 23.17428589s23.17428589-10.81466651 23.17428589-23.17428589V218.45904565c0-12.35961937-10.81466651-23.17428589-23.17428589-23.17428589zM643.32095313 403.85333276c6.17980933 0 12.35961937-1.54495216 16.99447656-6.17981005l75.702667-75.702667c9.26971435-9.26971435 9.26971435-23.17428589 0-32.44400024-9.26971435-9.26971435-23.17428589-9.26971435-32.44400025 0l-75.70266699 75.702667c-9.26971435 9.26971435-9.26971435 23.17428589 0 32.44400024 3.08990502 4.63485718 9.26971435 6.17980933 15.44952368 6.17981005zM805.54095435 488.82571411h-108.14666724c-12.35961937 0-23.17428589 10.81466651-23.17428589 23.17428589s10.81466651 23.17428589 23.17428589 23.17428589h108.14666724c12.35961937 0 23.17428589-10.81466651 23.17428589-23.17428589s-10.81466651-23.17428589-23.17428589-23.17428589zM658.77047753 626.32647729c-9.26971435-9.26971435-23.17428589-9.26971435-32.44400024 0s-9.26971435 23.17428589 0 32.44400024l75.702667 75.702667c4.63485718 4.63485718 10.81466651 6.17980933 16.99447656 6.17980933s12.35961937-1.54495216 16.99447584-6.17980933c9.26971435-9.26971435 9.26971435-23.17428589 0-32.44400024l-77.24761916-75.702667zM512 674.22000122c-12.35961937 0-23.17428589 10.81466651-23.17428589 23.17428589v108.14666724c0 12.35961937 10.81466651 23.17428589 23.17428589 23.17428589s23.17428589-10.81466651 23.17428589-23.17428589v-108.14666724c0-12.35961937-10.81466651-23.17428589-23.17428589-23.17428589zM365.22952247 626.32647729l-75.702667 75.702667c-9.26971435 9.26971435-9.26971435 23.17428589 0 32.44400024 4.63485718 4.63485718 10.81466651 6.17980933 16.99447655 6.17980933s12.35961937-1.54495216 16.99447585-6.17980933l75.7026677-75.702667c9.26971435-9.26971435 9.26971435-23.17428589 0-32.44400024s-26.26419091-9.26971435-33.9889531 0zM349.77999878 512c0-12.35961937-10.81466651-23.17428589-23.17428589-23.17428589H218.45904565c-12.35961937 0-23.17428589 10.81466651-23.17428589 23.17428589s10.81466651 23.17428589 23.17428589 23.17428589h108.14666724c12.35961937 0 23.17428589-10.81466651 23.17428589-23.17428589zM320.42590356 287.98190331c-9.26971435-9.26971435-23.17428589-9.26971435-32.44400025 0-9.26971435 9.26971435-9.26971435 23.17428589 0 32.44400025l75.702667 75.70266699c4.63485718 4.63485718 10.81466651 6.17980933 16.99447656 6.17980934s12.35961937-1.54495216 16.99447584-6.17980934c9.26971435-9.26971435 9.26971435-23.17428589 0-32.44400024l-77.24761915-75.702667z" fill="#515151" ></path></symbol><symbol id="graph-success" viewBox="0 0 1024 1024"><path d="M512 195.28475976C337.4203794 195.28475976 195.28475976 337.4203794 195.28475976 512S337.4203794 828.71524024 512 828.71524024 828.71524024 686.5796206 828.71524024 512 686.5796206 195.28475976 512 195.28475976z m0 587.08190871c-148.31542969 0-270.36666847-122.05123878-270.36666847-270.36666847S363.68457031 241.63333153 512 241.63333153 782.36666847 363.68457031 782.36666847 512 660.31542969 782.36666847 512 782.36666847z" fill="#515151" ></path><path d="M649.50076317 417.75790429L465.65142823 603.1521914 374.49923683 512c-9.26971435-9.26971435-23.17428589-9.26971435-32.44400025 0-9.26971435 9.26971435-9.26971435 23.17428589 0 32.44400024l108.14666795 108.14666724c4.63485718 4.63485718 10.81466651 6.17980933 16.99447585 6.17981005s12.35961937-1.54495216 16.99447655-6.17981005l200.8438108-200.84381079c9.26971435-9.26971435 9.26971435-23.17428589 0-32.44400024-10.81466651-9.26971435-26.26419091-9.26971435-35.53390455-1.54495216z" fill="#515151" ></path></symbol><symbol id="graph-warning" viewBox="0 0 1024 1024"><path d="M817.90057373 698.93923927L579.97790551 272.53237891C566.07333398 247.81314087 539.80914307 233.90856933 512 233.90856933c-27.80914307 0-54.07333398 15.44952368-67.97790551 38.62380958L206.09942627 698.93923927c-13.90457153 24.71923805-13.90457153 55.61828614 0 80.33752489S246.26818872 820.99047875 274.07733178 820.99047875h475.84533644c27.80914307 0 54.07333398-15.44952368 67.97790551-41.71371459 13.90457153-24.71923805 13.90457153-55.61828614 0-80.33752489z m-40.16876245 58.70819115c-6.17980933 10.81466651-16.99447656 16.99447656-27.80914306 16.99447655H274.07733178c-10.81466651 0-21.62933374-6.17980933-27.80914306-16.99447655-6.17980933-10.81466651-6.17980933-24.71923805 0-35.53390526L484.19085693 295.7066648c6.17980933-9.26971435 16.99447656-15.44952368 27.80914307-15.44952368s21.62933374 6.17980933 27.80914307 15.44952368l237.92266821 426.40686036c6.17980933 10.81466651 6.17980933 23.17428589 0 35.53390526z" fill="#515151" ></path><path d="M512 681.94476343m-30.89904809 0a30.89904809 30.89904809 0 1 0 61.79809618 0 30.89904809 30.89904809 0 1 0-61.79809618 0Z" fill="#515151" ></path><path d="M512 596.97238136c12.35961937 0 23.17428589-10.81466651 23.17428589-23.17428589v-139.04571534c0-12.35961937-10.81466651-23.17428589-23.17428589-23.17428588s-23.17428589 10.81466651-23.17428589 23.17428588v139.04571534c0 12.35961937 10.81466651 23.17428589 23.17428589 23.17428589z" fill="#515151" ></path></symbol><symbol id="graph-condition" viewBox="0 0 1024 1024"><path d="M605.73535156 552.73730469h-25.3125c-10.28320313 0-21.35742188-8.30566406-24.52148437-18.19335938l-13.05175781-31.640625c-4.74609375-9.09667969-2.76855469-22.93945313 4.35058593-30.05859375l17.79785156-17.79785155c3.1640625-3.1640625 4.74609375-7.11914063 4.74609376-11.8652344s-1.97753905-8.70117188-4.74609376-11.86523436l-30.45410156-30.45410156c-3.1640625-3.1640625-7.11914063-4.74609375-11.86523437-4.74609374s-8.70117188 1.97753905-11.86523439 4.74609374l-17.79785156 17.79785156c-7.51464844 7.51464844-20.96191406 9.4921875-30.05859374 4.35058595l-31.640625-13.05175783c-9.8876953-2.76855469-18.19335938-13.84277344-18.19335938-24.52148437v-25.3125c0-4.35058595-1.58203125-8.30566406-4.74609374-11.86523438-3.1640625-3.1640625-7.51464844-4.74609375-11.86523438-4.74609374H353.796875c-4.35058595 0-8.30566406 1.58203125-11.86523438 4.74609375-3.1640625 3.1640625-4.74609375 7.51464844-4.74609375 11.86523437V385.4375c0 10.28320313-8.30566406 21.35742188-18.19335937 24.52148438l-31.64062499 13.0517578c-9.09667969 5.14160156-22.93945313 2.76855469-30.05859376-4.35058593L239.09960935 400.86230469c-3.1640625-3.1640625-7.11914063-4.74609375-11.86523434-4.74609377s-8.70117188 1.97753905-11.86523437 4.74609377l-30.45410158 30.45410156c-3.1640625 3.1640625-4.74609375 7.11914063-4.74609375 11.86523436s1.97753905 8.70117188 4.74609375 11.86523438L203.50390625 472.44921875c7.51464844 7.51464844 9.4921875 20.96191406 4.35058594 30.05859375l-13.05175782 32.03613281c-3.1640625 9.8876953-14.23828125 18.19335938-24.52148436 18.19335938H144.96875001c-4.35058595 0-8.30566406 1.58203125-11.86523439 4.74609375-3.1640625 3.1640625-4.74609375 7.51464844-4.74609374 11.86523437v43.11035157c0 4.35058595 1.58203125 8.30566406 4.74609375 11.86523437 3.1640625 3.1640625 7.51464844 4.74609375 11.86523438 4.74609375h25.3125c10.28320313 0 21.35742188 8.30566406 24.52148437 18.19335938l13.05175781 31.64062498c4.74609375 9.09667969 2.76855469 22.93945313-4.35058594 30.05859379l-17.79785156 17.79785154c-3.1640625 3.1640625-4.74609375 7.11914063-4.74609375 11.86523436s1.97753905 8.70117188 4.74609375 11.86523439l30.45410157 30.45410156c3.1640625 3.1640625 7.11914063 4.74609375 11.86523437 4.74609376s8.70117188-1.97753905 11.86523437-4.74609376l17.79785157-17.79785156c7.51464844-7.51464844 20.96191406-9.4921875 30.05859374-4.35058592l32.03613282 13.05175779c9.8876953 3.1640625 18.19335938 14.23828125 18.19335937 24.52148438v25.3125c0 4.35058595 1.58203125 8.30566406 4.74609375 11.86523437 3.1640625 3.1640625 7.51464844 4.74609375 11.86523438 4.74609375h43.11035156c4.35058595 0 8.30566406-1.58203125 11.86523439-4.74609375 3.1640625-3.1640625 4.74609375-7.51464844 4.74609373-11.86523437v-25.3125c0-10.28320313 8.30566406-21.35742188 18.19335938-24.52148438l32.03613281-13.05175779c9.09667969-5.14160156 22.93945313-2.76855469 30.05859375 4.35058592l17.79785156 17.79785156c3.1640625 3.1640625 7.11914063 4.74609375 11.86523438 4.74609376s8.70117188-1.97753905 11.86523438-4.74609376l30.45410156-30.45410156c3.1640625-3.1640625 4.74609375-7.11914063 4.74609375-11.86523439s-1.97753905-8.70117188-4.74609375-11.86523436l-17.79785157-17.79785157c-7.51464844-7.51464844-9.4921875-20.96191406-4.35058593-30.05859376l13.05175781-31.64062498c3.1640625-9.8876953 14.23828125-18.19335938 24.52148437-18.19335938h25.3125c4.35058595 0 8.30566406-1.58203125 11.86523438-4.74609375 3.1640625-3.1640625 4.74609375-7.51464844 4.74609376-11.86523437v-43.11035157c0-4.35058595-1.58203125-8.30566406-4.74609376-11.86523437-4.74609375-3.1640625-9.09667969-4.74609375-13.44726563-4.74609375z m-230.18554687 132.89062498c-52.60253906 0-94.92187501-42.31933594-94.92187502-94.92187498s42.71484375-94.92187501 94.92187502-94.921875c52.60253906 0 94.92187501 42.71484375 94.921875 94.921875 0 52.60253906-42.71484375 94.92187501-94.921875 94.92187498z m520.48828125-344.48730466c-2.37304688-2.37304688-5.53710938-3.55957031-8.30566406-3.55957032h-18.19335938c-7.51464844 0-15.42480469-5.93261719-17.79785157-13.05175782l-9.4921875-22.93945312c-3.55957031-6.72363281-1.97753905-16.61132813 3.16406251-21.75292969l13.05175781-13.05175781c1.97753905-1.97753905 3.55957031-5.14160156 3.55957031-8.30566406s-1.18652345-6.328125-3.55957031-8.30566407l-22.1484375-22.1484375c-1.97753905-1.97753905-5.14160156-3.55957031-8.30566405-3.55957031s-6.328125 1.18652345-8.30566407 3.55957031l-13.05175782 13.05175782c-5.14160156 5.53710938-15.02929689 6.72363281-21.75292969 3.1640625l-22.93945312-9.49218749c-7.11914063-2.37304688-13.05175781-10.28320313-13.05175781-17.79785158v-18.19335937c0-3.1640625-1.18652345-5.93261719-3.55957031-8.30566406-2.37304688-2.37304688-5.53710938-3.55957031-8.30566407-3.55957032H705.79882813c-3.1640625 0-6.328125 1.18652345-8.30566407 3.55957032-2.37304688 2.37304688-3.55957031 5.53710938-3.55957031 8.30566406v18.19335937c0 7.51464844-5.93261719 15.42480469-13.05175781 17.79785158l-22.93945313 9.49218749c-6.72363281 3.55957031-16.61132813 1.97753905-21.75292969-3.1640625l-13.05175781-13.05175782c-1.97753905-1.97753905-5.14160156-3.55957031-8.30566406-3.55957031s-6.328125 1.18652345-8.30566406 3.55957031l-22.1484375 22.1484375c-1.97753905 1.97753905-3.55957031 5.14160156-3.55957032 8.30566407s1.18652345 6.328125 3.55957032 8.30566406l13.05175781 13.05175781c5.53710938 5.53710938 6.72363281 15.02929689 3.16406251 21.75292969l-9.49218751 22.93945312c-2.37304688 7.11914063-10.28320313 13.05175781-17.79785156 13.05175782h-18.19335938c-3.1640625 0-6.328125 1.18652345-8.30566406 3.55957032-2.37304688 2.37304688-3.55957031 5.53710938-3.55957031 8.30566405v31.2451172c0 3.1640625 1.18652345 6.328125 3.55957031 8.30566405 2.37304688 2.37304688 5.53710938 3.55957031 8.30566406 3.55957031h18.19335938c7.51464844 0 15.42480469 5.93261719 17.79785156 13.05175782l9.49218751 22.93945312c3.55957031 6.72363281 1.97753905 16.61132813-3.16406251 21.75292969l-13.05175781 13.05175781c-1.97753905 1.97753905-3.55957031 5.14160156-3.55957032 8.30566407s1.18652345 6.328125 3.55957032 8.30566406l22.1484375 22.14843751c1.97753905 1.97753905 5.14160156 3.55957031 8.30566406 3.5595703s6.328125-1.18652345 8.30566406-3.5595703l13.05175781-13.05175783c5.14160156-5.53710938 15.02929689-6.72363281 21.75292969-3.1640625l22.93945313 9.4921875c7.11914063 2.37304688 13.05175781 10.28320313 13.05175781 17.79785158v18.19335936c0 3.1640625 1.18652345 6.328125 3.55957031 8.30566406 2.37304688 2.37304688 5.53710938 3.55957031 8.30566405 3.55957032h31.2451172c3.1640625 0 6.328125-1.18652345 8.30566406-3.55957032 2.37304688-2.37304688 3.55957031-5.53710938 3.55957032-8.30566406v-18.19335936c0-7.51464844 5.93261719-15.42480469 13.05175781-17.79785158l22.93945315-9.4921875c6.72363281-3.55957031 16.61132813-1.97753905 21.75292966 3.1640625l13.05175781 13.05175783c1.97753905 2.37304688 5.14160156 3.55957031 8.30566406 3.5595703s6.328125-1.18652345 8.30566407-3.5595703l22.1484375-22.14843751c2.37304688-2.37304688 3.55957031-5.14160156 3.55957031-8.30566406s-1.18652345-6.328125-3.55957031-8.30566407l-13.05175781-13.05175781c-5.14160156-5.14160156-6.72363281-15.02929689-3.16406249-21.75292969l9.4921875-22.93945312c2.37304688-7.11914063 10.28320313-13.05175781 17.79785155-13.05175782h18.19335937c3.1640625 0 5.93261719-1.18652345 8.30566407-3.55957031 2.37304688-2.37304688 3.55957031-5.53710938 3.55957031-8.30566405V349.84179687c0-3.1640625-1.18652345-6.328125-3.55957031-8.70117188z m-175.20996095 92.94433594c-37.96875001 0-68.81835937-30.84960938-68.81835935-68.81835938 0-37.96875001 30.84960938-68.81835937 68.81835935-68.81835938 37.96875001 0 68.81835937 30.84960938 68.81835939 68.81835938 0 37.96875001-30.84960938 68.81835937-68.81835939 68.81835938z" ></path></symbol><symbol id="graph-execute" viewBox="0 0 1024 1024"><path d="M746.27 641.105c-4.5-4.5-11.205-8.955-17.91-6.75a24.84 24.84 0 0 0-24.66 24.66c0 6.705 4.5 13.41 9 17.865l29.115 29.07c-31.41-4.5-60.525-15.66-85.185-35.775-2.25 0-2.25-2.25-4.5-4.5l-264.6-277.29c-44.82-49.185-98.595-76.05-163.62-76.05a24.84 24.84 0 0 0-24.66 24.615c0 13.455 11.205 22.365 24.66 22.365 51.57 0 94.14 22.365 127.8 60.39l269.01 279.54 4.5 4.5a232.92 232.92 0 0 0 121.05 49.185l-33.615 31.275c-6.75 4.5-11.25 13.455-11.25 20.16 0 13.41 13.5 24.57 26.955 22.365 6.75 0 13.455-4.5 17.91-9l69.525-64.8a28.305 28.305 0 0 0 0-40.275l-69.525-71.55z m-2.25-389.115c-8.955-11.16-22.41-13.41-33.615-4.5-6.75 4.5-8.955 11.25-8.955 17.91 0 8.955 2.25 15.66 11.25 20.16l29.115 29.025c-51.57 6.75-98.64 26.865-134.55 62.64l-80.685 82.755a21.6 21.6 0 0 0 0 31.275c4.5 4.5 11.205 6.75 17.91 6.75 6.75 0 13.5-2.25 17.955-6.75l78.48-82.71c29.115-26.865 65.025-44.73 103.14-49.23l-31.41 31.32c-4.5 4.5-9 11.205-9 17.91 0 13.41 11.25 24.57 22.455 24.57 6.75 0 13.455-2.25 20.16-6.705l74.025-71.55a24.3 24.3 0 0 0 0-33.525l-76.23-69.345M436.85 565.055c-6.75 0-13.455 2.25-17.955 6.75L336.05 656.72c-33.615 31.32-67.275 46.935-112.095 46.935h-2.25a24.84 24.84 0 0 0-24.66 24.615c0 13.41 11.25 22.365 24.66 22.365h2.25c58.275 0 103.14-22.365 147.96-60.39l85.185-87.21c4.5-4.5 6.75-8.955 6.75-15.66a20.25 20.25 0 0 0-6.75-15.66 36.225 36.225 0 0 0-20.16-6.705z" fill="#515151" ></path></symbol></svg>',(t=>{var c=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var e,s,n,i,o,a=function(c,l){l.parentNode.insertBefore(c,l)};if(c&&!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(c){console&&console.log(c)}}e=function(){var c,l=document.createElement("div");l.innerHTML=t._iconfont_svg_string_4957342,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?a(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(s=function(){document.removeEventListener("DOMContentLoaded",s,!1),e()},document.addEventListener("DOMContentLoaded",s,!1)):document.attachEvent&&(n=e,i=t.document,o=!1,h(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,d())})}function d(){o||(o=!0,n())}function h(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(h,50)}d()}})(window);
@@ -0,0 +1,51 @@
1
+ {
2
+ "id": "4957342",
3
+ "name": "graph",
4
+ "font_family": "graphfont",
5
+ "css_prefix_text": "graph-",
6
+ "description": "",
7
+ "glyphs": [
8
+ {
9
+ "icon_id": "4766986",
10
+ "name": "branch",
11
+ "font_class": "branch",
12
+ "unicode": "e7e7",
13
+ "unicode_decimal": 59367
14
+ },
15
+ {
16
+ "icon_id": "15838502",
17
+ "name": "loading",
18
+ "font_class": "loading",
19
+ "unicode": "e676",
20
+ "unicode_decimal": 58998
21
+ },
22
+ {
23
+ "icon_id": "15838532",
24
+ "name": "success",
25
+ "font_class": "success",
26
+ "unicode": "e67f",
27
+ "unicode_decimal": 59007
28
+ },
29
+ {
30
+ "icon_id": "15838551",
31
+ "name": "warning",
32
+ "font_class": "warning",
33
+ "unicode": "e682",
34
+ "unicode_decimal": 59010
35
+ },
36
+ {
37
+ "icon_id": "6177631",
38
+ "name": "condition",
39
+ "font_class": "condition",
40
+ "unicode": "e729",
41
+ "unicode_decimal": 59177
42
+ },
43
+ {
44
+ "icon_id": "44689233",
45
+ "name": "execute",
46
+ "font_class": "execute",
47
+ "unicode": "e9412",
48
+ "unicode_decimal": 955410
49
+ }
50
+ ]
51
+ }
Binary file
Binary file
Binary file
@@ -0,0 +1,108 @@
1
+ .x6-widget-selection-inner,
2
+ .x6-widget-selection-box {
3
+ box-shadow: none;
4
+ }
5
+
6
+ .x6-widget-stencil {
7
+ background-color: var(--vyr-dialog-header-background-color);
8
+ border-right: 1px solid var(--vyr-border-color);
9
+
10
+ .x6-graph {
11
+ width: 100% !important;
12
+ }
13
+
14
+ .x6-widget-stencil-group-title,
15
+ .x6-widget-stencil-title {
16
+ display: none;
17
+ }
18
+
19
+ .x6-widget-stencil-content {
20
+ @scroll-color: rgba(0, 0, 0, 0);
21
+
22
+ scrollbar-arrow-color: @scroll-color;
23
+ scrollbar-face-color: @scroll-color;
24
+ scrollbar-3dlight-color: @scroll-color;
25
+ scrollbar-highlight-color: @scroll-color;
26
+ scrollbar-shadow-color: @scroll-color;
27
+ scrollbar-darkshadow-color: @scroll-color;
28
+ scrollbar-track-color: @scroll-color;
29
+ scrollbar-base-color: @scroll-color;
30
+ scrollbar-width: none;
31
+ -ms-overflow-style: none;
32
+
33
+ &::-webkit-scrollbar {
34
+ display: none;
35
+ }
36
+ }
37
+ }
38
+
39
+ @icon-width: 40px;
40
+
41
+ @keyframes graph-service-unit {
42
+
43
+ 0% {
44
+ transform: rotate(0);
45
+ }
46
+
47
+ 100% {
48
+ transform: rotate(360deg);
49
+ }
50
+ }
51
+
52
+ .graph-service-unit {
53
+ width: 100%;
54
+ height: 100%;
55
+ display: flex;
56
+ flex-wrap: nowrap;
57
+ flex-direction: row;
58
+ color: var(--vyr-white-color);
59
+ border: 1px solid var(--vyr-blue-color);
60
+ background-color: var(--vyr-active-topic-color);
61
+
62
+ .unit-icon {
63
+ width: @icon-width;
64
+ height: 100%;
65
+ font-size: 24px;
66
+ display: flex;
67
+ flex-wrap: nowrap;
68
+ flex-direction: row;
69
+ justify-content: center;
70
+ align-items: center;
71
+ align-content: center;
72
+ }
73
+
74
+ @unit-width: @icon-width * 2;
75
+
76
+ .unit-wrapper {
77
+ width: calc(~'100% - @{unit-width}');
78
+ height: 100%;
79
+ padding: 4px 6px;
80
+ display: flex;
81
+ flex-wrap: nowrap;
82
+ flex-direction: row;
83
+ justify-content: flex-start;
84
+ align-items: center;
85
+ align-content: center;
86
+ box-sizing: border-box;
87
+ white-space: nowrap;
88
+ overflow: hidden;
89
+ text-overflow: ellipsis;
90
+ display: -webkit-box;
91
+ /* (行数) */
92
+ -webkit-line-clamp: 1; //n
93
+ -webkit-box-orient: vertical;
94
+ }
95
+
96
+ .graph-success {
97
+ color: var(--vyr-success-color);
98
+ }
99
+
100
+ .graph-warning {
101
+ color: var(--vyr-warning-color);
102
+ }
103
+
104
+ .graph-loading {
105
+ color: --vyr-white-color;
106
+ animation: graph-service-unit 3s linear infinite;
107
+ }
108
+ }
@@ -0,0 +1,65 @@
1
+ import { Cell } from "@antv/x6";
2
+ import { Descriptor } from "@vyr/engine";
3
+ import { Unit, UnitMeta, UnitPartial, } from "./Unit";
4
+
5
+ interface RoutineUnitMeta extends UnitMeta {
6
+ url: string
7
+ routine: string
8
+ input: { [param: string]: any }
9
+ }
10
+
11
+ class RoutineUnit extends Unit {
12
+ declare vMeta: RoutineUnitMeta
13
+
14
+ constructor(vMeta: UnitPartial<RoutineUnitMeta>) {
15
+ super(vMeta)
16
+ this.vMeta.input = vMeta.input ? Descriptor.deepClone(vMeta.input) : {}
17
+ }
18
+ }
19
+
20
+ class ExecuteUnit extends RoutineUnit {
21
+ constructor(vMeta: UnitPartial<RoutineUnitMeta>) {
22
+ super({ ...vMeta, maxInCount: Infinity, icon: 'graphfont graph-execute' })
23
+ this.vMeta.routine = 'Execute'
24
+ this.vMeta.url = vMeta.url ?? ''
25
+ }
26
+
27
+ isConnection(e: Element, source: Cell) {
28
+ if (Unit.instanceOf(source, [ExecuteUnit, ConditionUnit]) === false) return false
29
+ return super.isConnection(e, source)
30
+ }
31
+ }
32
+
33
+ class BranchUnit extends RoutineUnit {
34
+
35
+ constructor(vMeta: UnitPartial<RoutineUnitMeta>) {
36
+ super({ ...vMeta, maxOutCount: Infinity, icon: 'graphfont graph-branch' })
37
+ this.vMeta.routine = 'Branch'
38
+ this.vMeta.url = vMeta.url ?? ''
39
+ }
40
+
41
+ isConnection(e: Element, source: Cell) {
42
+ if (Unit.instanceOf(source, [ExecuteUnit, ConditionUnit]) === false) return false
43
+ return super.isConnection(e, source)
44
+ }
45
+ }
46
+
47
+ class ConditionUnit extends RoutineUnit {
48
+ constructor(vMeta: UnitPartial<RoutineUnitMeta>) {
49
+ super({ input: { value: { type: 'string', value: '' } }, ...vMeta, icon: 'graphfont graph-condition' })
50
+ this.vMeta.routine = 'Condition'
51
+ this.vMeta.url = vMeta.url ?? ''
52
+ }
53
+
54
+ isConnection(e: Element, source: Cell) {
55
+ if (Unit.instanceOf(source, [BranchUnit]) === false) return false
56
+ return super.isConnection(e, source)
57
+ }
58
+ }
59
+
60
+ export {
61
+ RoutineUnit,
62
+ ExecuteUnit,
63
+ BranchUnit,
64
+ ConditionUnit,
65
+ }