npm - sun-form-v3 - Versions diffs - 1.0.65 → 1.0.67 - Mend

sun-form-v3 1.0.65 → 1.0.67

Files changed (157) hide show

package/package.json +8 -5
package/src/App.vue +9 -0
package/src/assets/font/YouSheBiaoTiHei-2.ttf +0 -0
package/src/assets/font/demo.css +539 -0
package/src/assets/font/demo_index.html +1200 -0
package/src/assets/font/iconfont.css +191 -0
package/src/assets/font/iconfont.js +1 -0
package/src/assets/font/iconfont.json +317 -0
package/src/assets/font/iconfont.ttf +0 -0
package/src/assets/font/iconfont.woff +0 -0
package/src/assets/font/iconfont.woff2 +0 -0
package/src/assets/img/bg_footer.png +0 -0
package/src/assets/img/bg_title.png +0 -0
package/src/assets/img/file.png +0 -0
package/src/assets/img/logo.png +0 -0
package/src/assets/img/logo2.png +0 -0
package/src/assets/img/logo22.png +0 -0
package/src/assets/img/logo23.png +0 -0
package/src/assets/img/logo3.png +0 -0
package/src/assets/img//347/237/251/345/275/242@2x.png +0 -0
package/src/assets/logo.svg +1 -0
package/src/assets/styles/element/index.scss +15 -0
package/src/assets/styles/index.css +3 -0
package/src/components/a.js +14 -0
package/src/components/aDesigner/config.vue +127 -0
package/src/components/aDesigner/design.vue +20 -0
package/src/components/aDesigner/designer.js +342 -0
package/src/components/aDesigner/http.js +292 -0
package/src/components/aDesigner/index.vue +144 -0
package/src/components/aDesigner/panel.vue +144 -0
package/src/components/aDesigner/show.vue +24 -0
package/src/components/widgetCommonComps/commonApiConfig/index.vue +194 -0
package/src/components/widgetCommonComps/commonCard/index.vue +36 -0
package/src/components/widgetCommonComps/commonCodeEditor/editor.vue +219 -0
package/src/components/widgetCommonComps/commonCodeEditor/modalEditor.vue +68 -0
package/src/components/widgetCommonComps/commonCollapseCard/index.vue +10 -0
package/src/components/widgetCommonComps/commonContainer/index.vue +95 -0
package/src/components/widgetCommonComps/commonJsonInput/index.vue +59 -0
package/src/components/widgetCommonComps/commonLabelContainer/index.vue +39 -0
package/src/components/widgetCommonComps/commonSidetree/index.vue +61 -0
package/src/components/widgetCommonComps/commonTypeInput/index.vue +75 -0
package/src/components/widgetCommonComps/commonWidgetLabelContainer/index.vue +55 -0
package/src/components/widgetCommonComps/index copy.js +17 -0
package/src/components/widgetCommonComps/index.js +17 -0
package/src/components/widgetConfigComps/config-input/index.vue +60 -0
package/src/components/widgetConfigComps/index copy.js +13 -0
package/src/components/widgetConfigComps/index.js +17 -0
package/src/components/widgetShowComps/index.js +29 -0
package/src/components/widgetShowComps/widget-form/index.vue +43 -0
package/src/components/widgetShowComps/widget-homepage/index.vue +41 -0
package/src/components/widgetShowComps/widget-input/index.vue +85 -0
package/src/components/widgetShowComps/widget-select/index.vue +31 -0
package/src/designer.js +342 -0
package/src/http.js +292 -0
package/src/index.js +24 -0
package/src/index2.js +23 -0
package/src/main.js +19 -0
package/src/remark.js +708 -0
package/src/testBtn.vue +11 -0
package/src/testInput.vue +12 -0
package/src/util/jsformat.js +568 -0
package/src/widgetConfig.js +1112 -0
package/dist/abap-DfvySaIJ.js +0 -1404
package/dist/apex-B__0irD3.js +0 -332
package/dist/assets/css.worker-OK053IOu.js +0 -84
package/dist/assets/editor.worker-D9iUZyMP.js +0 -11
package/dist/assets/html.worker-CL40hqKM.js +0 -458
package/dist/assets/json.worker-6f9bhSHY.js +0 -42
package/dist/assets/ts.worker-B6g3wjaE.js +0 -37021
package/dist/azcli-CDMGhRmx.js +0 -74
package/dist/bat-0Mk8aqzx.js +0 -106
package/dist/bicep-BBi_I06Z.js +0 -108
package/dist/cameligo-D0G_Zm6X.js +0 -180
package/dist/clojure-o2ZKLeMp.js +0 -767
package/dist/coffee-DOQff5VC.js +0 -238
package/dist/cpp-CQGJnWhD.js +0 -395
package/dist/csharp-C1jLsHl8.js +0 -332
package/dist/csp-C_ttMQaW.js +0 -59
package/dist/css-BC202kVV.js +0 -193
package/dist/cssMode-B2c4O0YS.js +0 -1541
package/dist/cypher-DwtEH7Fi.js +0 -269
package/dist/dart-D9XknsP2.js +0 -287
package/dist/dockerfile-DgsNjqqa.js +0 -136
package/dist/ecl-BAMCHBl6.js +0 -462
package/dist/elixir-CegIttP8.js +0 -575
package/dist/favicon.ico +0 -0
package/dist/flow9-9608t7UV.js +0 -148
package/dist/freemarker2-C0V-2C6A.js +0 -995
package/dist/fsharp-CCtt9-1_.js +0 -223
package/dist/go-CGUIPbct.js +0 -224
package/dist/graphql-BNRIFFIn.js +0 -157
package/dist/handlebars-Dq-D2gGP.js +0 -425
package/dist/hcl-C__KLIXe.js +0 -189
package/dist/html-CHe4dRTt.js +0 -314
package/dist/htmlMode-DmZav6BJ.js +0 -1551
package/dist/index2-CDdAhO0H.js +0 -124690
package/dist/ini-CeKYn_zA.js +0 -77
package/dist/java-Dm24deQl.js +0 -238
package/dist/javascript-e6NjSQC6.js +0 -76
package/dist/jsonMode-pOauncTt.js +0 -1957
package/dist/julia-BImNW7VE.js +0 -517
package/dist/kotlin-BfE79GEb.js +0 -259
package/dist/less-DglNOcaC.js +0 -168
package/dist/lexon-BA0dRz9Q.js +0 -163
package/dist/liquid-DGCC4WOg.js +0 -246
package/dist/lua-DMkWzJcm.js +0 -168
package/dist/m3-sA-5shO8.js +0 -216
package/dist/markdown-OYRB1igA.js +0 -235
package/dist/mdx-GitjX2xy.js +0 -171
package/dist/mips-rRzkJ_7G.js +0 -204
package/dist/msdax-DoVJdUhd.js +0 -381
package/dist/mysql-Ty44IHXo.js +0 -884
package/dist/objective-c-VUfyhYrA.js +0 -189
package/dist/pascal-DkASiYyw.js +0 -257
package/dist/pascaligo-p-ELPlVO.js +0 -170
package/dist/perl-Cjl1FxLZ.js +0 -632
package/dist/pgsql-DjVenF7s.js +0 -857
package/dist/php-CwvGzZOO.js +0 -506
package/dist/pla-Br1iaBIV.js +0 -143
package/dist/postiats-BaeP8zZY.js +0 -913
package/dist/powerquery-CLCshuo8.js +0 -896
package/dist/powershell-CZV50w5N.js +0 -245
package/dist/protobuf-MV3XTewJ.js +0 -426
package/dist/pug-DkDg4c4l.js +0 -408
package/dist/python-BxUPejAm.js +0 -282
package/dist/qsharp-BAtiKA97.js +0 -291
package/dist/r-8ocrd-h-.js +0 -249
package/dist/razor-B0zHeS7k.js +0 -556
package/dist/redis-9sZiddxc.js +0 -308
package/dist/redshift-DQfTOGC0.js +0 -815
package/dist/restructuredtext-DXU-vkgr.js +0 -180
package/dist/ruby-DotfqwMf.js +0 -517
package/dist/rust-BIauJ5KN.js +0 -349
package/dist/sb-CmWMvDEV.js +0 -121
package/dist/scala-C81brEbk.js +0 -376
package/dist/scheme-D0pcFz2x.js +0 -114
package/dist/scss-BOdN2fGG.js +0 -268
package/dist/shell-6E09eAkU.js +0 -227
package/dist/solidity-CWStzA1K.js +0 -1373
package/dist/sophia-76Sb6CWe.js +0 -205
package/dist/sparql-BmZTkOWT.js +0 -207
package/dist/sql-Cs9TBAW5.js +0 -859
package/dist/st-B-rqE1Bu.js +0 -422
package/dist/style.css +0 -1
package/dist/sun-form-v3.es.js +0 -4
package/dist/sun-form-v3.umd.js +0 -1908
package/dist/swift-Btsj6YxQ.js +0 -318
package/dist/systemverilog-B3RHBRa2.js +0 -582
package/dist/tcl-Dpj776pn.js +0 -238
package/dist/tsMode-AhR0apFR.js +0 -886
package/dist/twig-Bb9JmBsE.js +0 -398
package/dist/typescript-DW_IjlW5.js +0 -349
package/dist/typespec-CDWeg3SU.js +0 -123
package/dist/vb-DEXnYwEI.js +0 -378
package/dist/wgsl-D602c1lx.js +0 -445
package/dist/xml-CraN90Vi.js +0 -101
package/dist/yaml-D6yA8dTm.js +0 -212

package/src/assets/font/demo_index.html ADDED Viewed

@@ -0,0 +1,1200 @@
+<!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=3876170" 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">&#xe600;</span>
+                <div class="name">撤销</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">重做</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">D-component3</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">大纲</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe7d4;</span>
+                <div class="name">软件源码</div>
+                <div class="code-name">&amp;#xe7d4;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">form</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe83f;</span>
+                <div class="name">验证码</div>
+                <div class="code-name">&amp;#xe83f;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe67f;</span>
+                <div class="name">图片</div>
+                <div class="code-name">&amp;#xe67f;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xec72;</span>
+                <div class="name">告警实心</div>
+                <div class="code-name">&amp;#xec72;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">容器</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe74e;</span>
+                <div class="name">html5</div>
+                <div class="code-name">&amp;#xe74e;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe891;</span>
+                <div class="name">transfer</div>
+                <div class="code-name">&amp;#xe891;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe73b;</span>
+                <div class="name">line-file word（word文档）-02</div>
+                <div class="code-name">&amp;#xe73b;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe648;</span>
+                <div class="name">地图</div>
+                <div class="code-name">&amp;#xe648;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">tree-table</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe70f;</span>
+                <div class="name">Timeline-1</div>
+                <div class="code-name">&amp;#xe70f;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe746;</span>
+                <div class="name">find-in-page</div>
+                <div class="code-name">&amp;#xe746;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">星星</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe76d;</span>
+                <div class="name">card</div>
+                <div class="code-name">&amp;#xe76d;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe81c;</span>
+                <div class="name">radio-checked</div>
+                <div class="code-name">&amp;#xe81c;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b3;</span>
+                <div class="name">radio-checked</div>
+                <div class="code-name">&amp;#xe7b3;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">select</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe63b;</span>
+                <div class="name">institue_time</div>
+                <div class="code-name">&amp;#xe63b;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">时钟</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe6df;</span>
+                <div class="name">tab</div>
+                <div class="code-name">&amp;#xe6df;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe628;</span>
+                <div class="name">开关</div>
+                <div class="code-name">&amp;#xe628;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">checkbox-f</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xea04;</span>
+                <div class="name">地图,手指,点击,触摸</div>
+                <div class="code-name">&amp;#xea04;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">daterange-outlined</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">标题</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe671;</span>
+                <div class="name">符号-日期区间</div>
+                <div class="code-name">&amp;#xe671;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe74a;</span>
+                <div class="name">接口</div>
+                <div class="code-name">&amp;#xe74a;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e4;</span>
+                <div class="name">大标题</div>
+                <div class="code-name">&amp;#xe6e4;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">上传</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe6a6;</span>
+                <div class="name">综测表单设置</div>
+                <div class="code-name">&amp;#xe6a6;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">分割线</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">单行文本</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">多选框</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">多行文本</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">表格</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe63c;</span>
+                <div class="name">弹窗</div>
+                <div class="code-name">&amp;#xe63c;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe64e;</span>
+                <div class="name">date</div>
+                <div class="code-name">&amp;#xe64e;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe655;</span>
+                <div class="name">富文本编辑器_缩进</div>
+                <div class="code-name">&amp;#xe655;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xeb94;</span>
+                <div class="name">表单组件-表格</div>
+                <div class="code-name">&amp;#xeb94;</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=1717897229422') format('woff2'),
+       url('iconfont.woff?t=1717897229422') format('woff'),
+       url('iconfont.ttf?t=1717897229422') 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"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</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-xianghou"></span>
+            <div class="name">
+              撤销
+            </div>
+            <div class="code-name">.icon-xianghou
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-xiangqian"></span>
+            <div class="name">
+              重做
+            </div>
+            <div class="code-name">.icon-xiangqian
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-zujian"></span>
+            <div class="name">
+              D-component3
+            </div>
+            <div class="code-name">.icon-zujian
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-dagang"></span>
+            <div class="name">
+              大纲
+            </div>
+            <div class="code-name">.icon-dagang
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-yuanma"></span>
+            <div class="name">
+              软件源码
+            </div>
+            <div class="code-name">.icon-yuanma
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-form"></span>
+            <div class="name">
+              form
+            </div>
+            <div class="code-name">.icon-form
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-checkCode"></span>
+            <div class="name">
+              验证码
+            </div>
+            <div class="code-name">.icon-checkCode
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-image"></span>
+            <div class="name">
+              图片
+            </div>
+            <div class="code-name">.icon-image
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-alert"></span>
+            <div class="name">
+              告警实心
+            </div>
+            <div class="code-name">.icon-alert
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-div"></span>
+            <div class="name">
+              容器
+            </div>
+            <div class="code-name">.icon-div
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-html"></span>
+            <div class="name">
+              html5
+            </div>
+            <div class="code-name">.icon-html
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-transfer"></span>
+            <div class="name">
+              transfer
+            </div>
+            <div class="code-name">.icon-transfer
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-editor"></span>
+            <div class="name">
+              line-file word（word文档）-02
+            </div>
+            <div class="code-name">.icon-editor
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-location"></span>
+            <div class="name">
+              地图
+            </div>
+            <div class="code-name">.icon-location
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-tree"></span>
+            <div class="name">
+              tree-table
+            </div>
+            <div class="code-name">.icon-tree
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-timeline"></span>
+            <div class="name">
+              Timeline-1
+            </div>
+            <div class="code-name">.icon-timeline
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-iframe"></span>
+            <div class="name">
+              find-in-page
+            </div>
+            <div class="code-name">.icon-iframe
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-rate"></span>
+            <div class="name">
+              星星
+            </div>
+            <div class="code-name">.icon-rate
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-card"></span>
+            <div class="name">
+              card
+            </div>
+            <div class="code-name">.icon-card
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-radio"></span>
+            <div class="name">
+              radio-checked
+            </div>
+            <div class="code-name">.icon-radio
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-radiochecked1"></span>
+            <div class="name">
+              radio-checked
+            </div>
+            <div class="code-name">.icon-radiochecked1
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-select"></span>
+            <div class="name">
+              select
+            </div>
+            <div class="code-name">.icon-select
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-time"></span>
+            <div class="name">
+              institue_time
+            </div>
+            <div class="code-name">.icon-time
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-timerange"></span>
+            <div class="name">
+              时钟
+            </div>
+            <div class="code-name">.icon-timerange
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-tabs"></span>
+            <div class="name">
+              tab
+            </div>
+            <div class="code-name">.icon-tabs
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-switch"></span>
+            <div class="name">
+              开关
+            </div>
+            <div class="code-name">.icon-switch
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-checkbox"></span>
+            <div class="name">
+              checkbox-f
+            </div>
+            <div class="code-name">.icon-checkbox
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-button"></span>
+            <div class="name">
+              地图,手指,点击,触摸
+            </div>
+            <div class="code-name">.icon-button
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-daterange"></span>
+            <div class="name">
+              daterange-outlined
+            </div>
+            <div class="code-name">.icon-daterange
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-title"></span>
+            <div class="name">
+              标题
+            </div>
+            <div class="code-name">.icon-title
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-riqiqujian"></span>
+            <div class="name">
+              符号-日期区间
+            </div>
+            <div class="code-name">.icon-riqiqujian
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-service"></span>
+            <div class="name">
+              接口
+            </div>
+            <div class="code-name">.icon-service
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-biaoti2"></span>
+            <div class="name">
+              大标题
+            </div>
+            <div class="code-name">.icon-biaoti2
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-file"></span>
+            <div class="name">
+              上传
+            </div>
+            <div class="code-name">.icon-file
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-grid"></span>
+            <div class="name">
+              综测表单设置
+            </div>
+            <div class="code-name">.icon-grid
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-divider"></span>
+            <div class="name">
+              分割线
+            </div>
+            <div class="code-name">.icon-divider
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-input"></span>
+            <div class="name">
+              单行文本
+            </div>
+            <div class="code-name">.icon-input
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-selects"></span>
+            <div class="name">
+              多选框
+            </div>
+            <div class="code-name">.icon-selects
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-textarea"></span>
+            <div class="name">
+              多行文本
+            </div>
+            <div class="code-name">.icon-textarea
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-datatable"></span>
+            <div class="name">
+              表格
+            </div>
+            <div class="code-name">.icon-datatable
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-modal"></span>
+            <div class="name">
+              弹窗
+            </div>
+            <div class="code-name">.icon-modal
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-date"></span>
+            <div class="name">
+              date
+            </div>
+            <div class="code-name">.icon-date
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-codeEditor"></span>
+            <div class="name">
+              富文本编辑器_缩进
+            </div>
+            <div class="code-name">.icon-codeEditor
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-biaodanzujian-biaoge"></span>
+            <div class="name">
+              表单组件-表格
+            </div>
+            <div class="code-name">.icon-biaodanzujian-biaoge
+            </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">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</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-xianghou"></use>
+                </svg>
+                <div class="name">撤销</div>
+                <div class="code-name">#icon-xianghou</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangqian"></use>
+                </svg>
+                <div class="name">重做</div>
+                <div class="code-name">#icon-xiangqian</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zujian"></use>
+                </svg>
+                <div class="name">D-component3</div>
+                <div class="code-name">#icon-zujian</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dagang"></use>
+                </svg>
+                <div class="name">大纲</div>
+                <div class="code-name">#icon-dagang</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuanma"></use>
+                </svg>
+                <div class="name">软件源码</div>
+                <div class="code-name">#icon-yuanma</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-form"></use>
+                </svg>
+                <div class="name">form</div>
+                <div class="code-name">#icon-form</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-checkCode"></use>
+                </svg>
+                <div class="name">验证码</div>
+                <div class="code-name">#icon-checkCode</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-image"></use>
+                </svg>
+                <div class="name">图片</div>
+                <div class="code-name">#icon-image</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-alert"></use>
+                </svg>
+                <div class="name">告警实心</div>
+                <div class="code-name">#icon-alert</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-div"></use>
+                </svg>
+                <div class="name">容器</div>
+                <div class="code-name">#icon-div</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-html"></use>
+                </svg>
+                <div class="name">html5</div>
+                <div class="code-name">#icon-html</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-transfer"></use>
+                </svg>
+                <div class="name">transfer</div>
+                <div class="code-name">#icon-transfer</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-editor"></use>
+                </svg>
+                <div class="name">line-file word（word文档）-02</div>
+                <div class="code-name">#icon-editor</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-location"></use>
+                </svg>
+                <div class="name">地图</div>
+                <div class="code-name">#icon-location</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tree"></use>
+                </svg>
+                <div class="name">tree-table</div>
+                <div class="code-name">#icon-tree</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-timeline"></use>
+                </svg>
+                <div class="name">Timeline-1</div>
+                <div class="code-name">#icon-timeline</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-iframe"></use>
+                </svg>
+                <div class="name">find-in-page</div>
+                <div class="code-name">#icon-iframe</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rate"></use>
+                </svg>
+                <div class="name">星星</div>
+                <div class="code-name">#icon-rate</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-card"></use>
+                </svg>
+                <div class="name">card</div>
+                <div class="code-name">#icon-card</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-radio"></use>
+                </svg>
+                <div class="name">radio-checked</div>
+                <div class="code-name">#icon-radio</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-radiochecked1"></use>
+                </svg>
+                <div class="name">radio-checked</div>
+                <div class="code-name">#icon-radiochecked1</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-select"></use>
+                </svg>
+                <div class="name">select</div>
+                <div class="code-name">#icon-select</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-time"></use>
+                </svg>
+                <div class="name">institue_time</div>
+                <div class="code-name">#icon-time</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-timerange"></use>
+                </svg>
+                <div class="name">时钟</div>
+                <div class="code-name">#icon-timerange</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tabs"></use>
+                </svg>
+                <div class="name">tab</div>
+                <div class="code-name">#icon-tabs</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-switch"></use>
+                </svg>
+                <div class="name">开关</div>
+                <div class="code-name">#icon-switch</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-checkbox"></use>
+                </svg>
+                <div class="name">checkbox-f</div>
+                <div class="code-name">#icon-checkbox</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-button"></use>
+                </svg>
+                <div class="name">地图,手指,点击,触摸</div>
+                <div class="code-name">#icon-button</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daterange"></use>
+                </svg>
+                <div class="name">daterange-outlined</div>
+                <div class="code-name">#icon-daterange</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-title"></use>
+                </svg>
+                <div class="name">标题</div>
+                <div class="code-name">#icon-title</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-riqiqujian"></use>
+                </svg>
+                <div class="name">符号-日期区间</div>
+                <div class="code-name">#icon-riqiqujian</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-service"></use>
+                </svg>
+                <div class="name">接口</div>
+                <div class="code-name">#icon-service</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaoti2"></use>
+                </svg>
+                <div class="name">大标题</div>
+                <div class="code-name">#icon-biaoti2</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-file"></use>
+                </svg>
+                <div class="name">上传</div>
+                <div class="code-name">#icon-file</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-grid"></use>
+                </svg>
+                <div class="name">综测表单设置</div>
+                <div class="code-name">#icon-grid</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-divider"></use>
+                </svg>
+                <div class="name">分割线</div>
+                <div class="code-name">#icon-divider</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-input"></use>
+                </svg>
+                <div class="name">单行文本</div>
+                <div class="code-name">#icon-input</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-selects"></use>
+                </svg>
+                <div class="name">多选框</div>
+                <div class="code-name">#icon-selects</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-textarea"></use>
+                </svg>
+                <div class="name">多行文本</div>
+                <div class="code-name">#icon-textarea</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-datatable"></use>
+                </svg>
+                <div class="name">表格</div>
+                <div class="code-name">#icon-datatable</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-modal"></use>
+                </svg>
+                <div class="name">弹窗</div>
+                <div class="code-name">#icon-modal</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-date"></use>
+                </svg>
+                <div class="name">date</div>
+                <div class="code-name">#icon-date</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-codeEditor"></use>
+                </svg>
+                <div class="name">富文本编辑器_缩进</div>
+                <div class="code-name">#icon-codeEditor</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaodanzujian-biaoge"></use>
+                </svg>
+                <div class="name">表单组件-表格</div>
+                <div class="code-name">#icon-biaodanzujian-biaoge</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">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</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>