diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index a10a64e971..b30a605ff2 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -64,16 +64,6 @@ :element="item" :out-style="getShapeStyleInt(item.style)" /> - diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue index 430c970e6f..5f58da1044 100644 --- a/frontend/src/components/canvas/components/Toolbar.vue +++ b/frontend/src/components/canvas/components/Toolbar.vue @@ -41,9 +41,9 @@ - - - + + + diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index afd70add33..6d30085a98 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -17,7 +17,7 @@ export const assistList = [ component: 'v-text', type: 'v-text', label: '文字', - icon: 'iconfont icon-shuru', + icon: 'iconfont icon-text', defaultClass: 'text-filter' }, { @@ -25,7 +25,18 @@ export const assistList = [ component: 'rect-shape', type: 'rect-shape', label: '矩形', - icon: 'iconfont icon-xialakuang', + icon: 'iconfont icon-juxing', + defaultClass: 'text-filter' + } +] + +export const pictureList = [ + { + id: '20001', + component: 'picture', + type: 'picture', + label: '点击上传', + icon: 'iconfont icon-picture', defaultClass: 'text-filter' } ] diff --git a/frontend/src/styles/deicon/demo.css b/frontend/src/styles/deicon/demo.css new file mode 100644 index 0000000000..a67054a0a0 --- /dev/null +++ b/frontend/src/styles/deicon/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html new file mode 100644 index 0000000000..0185d772da --- /dev/null +++ b/frontend/src/styles/deicon/demo_index.html @@ -0,0 +1,602 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    矩形
    +
    
    +
    • + +
  • + +
    text
    +
    
    +
    • + +
  • + +
    picture
    +
    
    +
    • + +
  • + +
    输入
    +
    
    +
    • + +
  • + +
    树
    +
    
    +
    • + +
  • + +
    查询搜索
    +
    
    +
    • + +
  • + +
    季度
    +
    
    +
    • + +
  • + +
    数字顺序
    +
    
    +
    • + +
  • + +
    树列表
    +
    
    +
    • + +
  • + +
    日期
    +
    
    +
    • + +
  • + +
    左侧-区间
    +
    
    +
    • + +
  • + +
    列表
    +
    
    +
    • + +
  • + +
    下拉框
    +
    
    +
    • + +
  • + +
    下拉树
    +
    
    +
    • + +
  • + +
    重置
    +
    
    +
    • + +
  • + +
    日
    +
    
    +
    • + +
  • + +
    年
    +
    
    +
    • + +
  • + +
    月
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

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

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    + 矩形 +
    +
    .icon-juxing +
    +
    • + +
  • + +
    + text +
    +
    .icon-text +
    +
    • + +
  • + +
    + picture +
    +
    .icon-picture +
    +
    • + +
  • + +
    + 输入 +
    +
    .icon-shuru +
    +
    • + +
  • + +
    + 树 +
    +
    .icon-tree +
    +
    • + +
  • + +
    + 查询搜索 +
    +
    .icon-chaxunsousuo +
    +
    • + +
  • + +
    + 季度 +
    +
    .icon-jidu +
    +
    • + +
  • + +
    + 数字顺序 +
    +
    .icon-shuzishunxu +
    +
    • + +
  • + +
    + 树列表 +
    +
    .icon-Group- +
    +
    • + +
  • + +
    + 日期 +
    +
    .icon-riqi +
    +
    • + +
  • + +
    + 左侧-区间 +
    +
    .icon-zuoce-qujian +
    +
    • + +
  • + +
    + 列表 +
    +
    .icon-liebiao +
    +
    • + +
  • + +
    + 下拉框 +
    +
    .icon-xialakuang +
    +
    • + +
  • + +
    + 下拉树 +
    +
    .icon-xialashu +
    +
    • + +
  • + +
    + 重置 +
    +
    .icon-zhongzhi +
    +
    • + +
  • + +
    + 日 +
    +
    .icon-ri +
    +
    • + +
  • + +
    + 年 +
    +
    .icon-nian +
    +
    • + +
  • + +
    + 月 +
    +
    .icon-yue +
    +
    • + +
+
+

font-class 引用

+
+ +

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

+

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

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

使用步骤如下：

+

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    矩形
    +
    #icon-juxing
    +
    • + +
  • + +
    text
    +
    #icon-text
    +
    • + +
  • + +
    picture
    +
    #icon-picture
    +
    • + +
  • + +
    输入
    +
    #icon-shuru
    +
    • + +
  • + +
    树
    +
    #icon-tree
    +
    • + +
  • + +
    查询搜索
    +
    #icon-chaxunsousuo
    +
    • + +
  • + +
    季度
    +
    #icon-jidu
    +
    • + +
  • + +
    数字顺序
    +
    #icon-shuzishunxu
    +
    • + +
  • + +
    树列表
    +
    #icon-Group-
    +
    • + +
  • + +
    日期
    +
    #icon-riqi
    +
    • + +
  • + +
    左侧-区间
    +
    #icon-zuoce-qujian
    +
    • + +
  • + +
    列表
    +
    #icon-liebiao
    +
    • + +
  • + +
    下拉框
    +
    #icon-xialakuang
    +
    • + +
  • + +
    下拉树
    +
    #icon-xialashu
    +
    • + +
  • + +
    重置
    +
    #icon-zhongzhi
    +
    • + +
  • + +
    日
    +
    #icon-ri
    +
    • + +
  • + +
    年
    +
    #icon-nian
    +
    • + +
  • + +
    月
    +
    #icon-yue
    +
    • + +
+
+

Symbol 引用

+
+ +

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

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

使用步骤如下：

+

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

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

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

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

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

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/frontend/src/styles/deicon/iconfont.css b/frontend/src/styles/deicon/iconfont.css index 4388484f5b..800a45892e 100644 --- a/frontend/src/styles/deicon/iconfont.css +++ b/frontend/src/styles/deicon/iconfont.css @@ -1,10 +1,8 @@ -@font-face {font-family: "iconfont"; - src: url('iconfont.eot?t=1617248036081'); /* IE9 */ - src: url('iconfont.eot?t=1617248036081#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), - url('iconfont.woff?t=1617248036081') format('woff'), - url('iconfont.ttf?t=1617248036081') format('truetype') /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ - /*url('/@/icons/svg/iconfont.svg?t=1617248036081#iconfont') format('svg'); !* iOS 4.1- *!*/ +@font-face { + font-family: "iconfont"; /* Project id 2459092 */ + src: url('iconfont.woff2?t=1623984849135') format('woff2'), + url('iconfont.woff?t=1623984849135') format('woff'), + url('iconfont.ttf?t=1623984849135') format('truetype'); } .iconfont { @@ -15,6 +13,18 @@ -moz-osx-font-smoothing: grayscale; } +.icon-juxing:before { + content: "\e648"; +} + +.icon-text:before { + content: "\e959"; +} + +.icon-picture:before { + content: "\e643"; +} + .icon-shuru:before { content: "\e6ab"; } diff --git a/frontend/src/styles/deicon/iconfont.eot b/frontend/src/styles/deicon/iconfont.eot deleted file mode 100644 index 1f8b8d072d..0000000000 Binary files a/frontend/src/styles/deicon/iconfont.eot and /dev/null differ diff --git a/frontend/src/styles/deicon/iconfont.js b/frontend/src/styles/deicon/iconfont.js new file mode 100644 index 0000000000..c5ccd4d7c0 --- /dev/null +++ b/frontend/src/styles/deicon/iconfont.js @@ -0,0 +1 @@ +!function(c){var h,a,l,v,t,o,i='',e=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(e&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function z(){t||(t=!0,l())}h=function(){var c,h,a;(a=document.createElement("div")).innerHTML=i,i=null,(h=a.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",c=h,(a=document.body).firstChild?(h=a.firstChild).parentNode.insertBefore(c,h):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),h()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(l=h,v=c.document,t=!1,(o=function(){try{v.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}z()})(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,z())})}(window); \ No newline at end of file diff --git a/frontend/src/styles/deicon/iconfont.json b/frontend/src/styles/deicon/iconfont.json new file mode 100644 index 0000000000..e9ce984096 --- /dev/null +++ b/frontend/src/styles/deicon/iconfont.json @@ -0,0 +1,135 @@ +{ + "id": "2459092", + "name": "DataEase", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "2404485", + "name": "矩形", + "font_class": "juxing", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "924549", + "name": "text", + "font_class": "text", + "unicode": "e959", + "unicode_decimal": 59737 + }, + { + "icon_id": "5994104", + "name": "picture", + "font_class": "picture", + "unicode": "e643", + "unicode_decimal": 58947 + }, + { + "icon_id": "4016505", + "name": "输入", + "font_class": "shuru", + "unicode": "e6ab", + "unicode_decimal": 59051 + }, + { + "icon_id": "16852593", + "name": "树", + "font_class": "tree", + "unicode": "e628", + "unicode_decimal": 58920 + }, + { + "icon_id": "17407748", + "name": "查询搜索", + "font_class": "chaxunsousuo", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "1281301", + "name": "季度", + "font_class": "jidu", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "4553739", + "name": "数字顺序", + "font_class": "shuzishunxu", + "unicode": "e7de", + "unicode_decimal": 59358 + }, + { + "icon_id": "4685765", + "name": "树列表", + "font_class": "Group-", + "unicode": "e6a6", + "unicode_decimal": 59046 + }, + { + "icon_id": "4770736", + "name": "日期", + "font_class": "riqi", + "unicode": "e639", + "unicode_decimal": 58937 + }, + { + "icon_id": "4878484", + "name": "左侧-区间", + "font_class": "zuoce-qujian", + "unicode": "e6dd", + "unicode_decimal": 59101 + }, + { + "icon_id": "6056156", + "name": "列表", + "font_class": "liebiao", + "unicode": "e66f", + "unicode_decimal": 58991 + }, + { + "icon_id": "10907065", + "name": "下拉框", + "font_class": "xialakuang", + "unicode": "e8ca", + "unicode_decimal": 59594 + }, + { + "icon_id": "10908304", + "name": "下拉树", + "font_class": "xialashu", + "unicode": "e8d0", + "unicode_decimal": 59600 + }, + { + "icon_id": "12978136", + "name": "重置", + "font_class": "zhongzhi", + "unicode": "e611", + "unicode_decimal": 58897 + }, + { + "icon_id": "16197990", + "name": "日", + "font_class": "ri", + "unicode": "e691", + "unicode_decimal": 59025 + }, + { + "icon_id": "16197997", + "name": "年", + "font_class": "nian", + "unicode": "e692", + "unicode_decimal": 59026 + }, + { + "icon_id": "16198002", + "name": "月", + "font_class": "yue", + "unicode": "e695", + "unicode_decimal": 59029 + } + ] +} diff --git a/frontend/src/styles/deicon/iconfont.ttf b/frontend/src/styles/deicon/iconfont.ttf index a5fbbee4bb..ecd3c9b6b1 100644 Binary files a/frontend/src/styles/deicon/iconfont.ttf and b/frontend/src/styles/deicon/iconfont.ttf differ diff --git a/frontend/src/styles/deicon/iconfont.woff b/frontend/src/styles/deicon/iconfont.woff index 30a8ef7868..05fa75f07e 100644 Binary files a/frontend/src/styles/deicon/iconfont.woff and b/frontend/src/styles/deicon/iconfont.woff differ diff --git a/frontend/src/styles/deicon/iconfont.woff2 b/frontend/src/styles/deicon/iconfont.woff2 index 06b9a5132b..ed0a74539d 100644 Binary files a/frontend/src/styles/deicon/iconfont.woff2 and b/frontend/src/styles/deicon/iconfont.woff2 differ diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue index 99f37df962..647953d849 100644 --- a/frontend/src/views/panel/AssistComponent/index.vue +++ b/frontend/src/views/panel/AssistComponent/index.vue @@ -4,7 +4,7 @@
-
样式组件
+
样式
@@ -24,17 +24,48 @@
+
+
+
+ 图片 +
+
+ +
+
+
+ +
+
{{ item.label }}
+
+
+
+ + +