diff --git a/frontend/src/components/canvas/components/RectangleAttr.vue b/frontend/src/components/canvas/components/RectangleAttr.vue new file mode 100644 index 0000000000..b1eb53a695 --- /dev/null +++ b/frontend/src/components/canvas/components/RectangleAttr.vue @@ -0,0 +1,174 @@ + + + + + diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 5cc1c686aa..541ae75dbd 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -119,10 +119,10 @@ const list = [ style: { width: 200, height: 200, - borderColor: '#000', + borderStyle: 'solid', borderWidth: 1, - backgroundColor: '', - borderStyle: 'solid' + borderColor: '#000000', + backgroundColor: '#ffffff' } }, { diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index 229efa567a..ebca46335f 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -38,7 +38,7 @@

- +

    - + +
  • + +
    实线
    +
    
    +
  • + +
  • + +
    画笔
    +
    
    +
  • + +
  • + +
    点线
    +
    
    +
  • + +
  • + +
    虚线
    +
    
    +
  • + +
  • + +
    背景色‘
    +
    
    +
  • +
  • 矩形
    
  • - +
  • text
    
  • - +
  • picture
    
  • - +
  • 输入
    
  • - +
  • 
  • - +
  • 查询搜索
    
  • - +
  • 季度
    
  • - +
  • 数字顺序
    
  • - +
  • 树列表
    
  • - +
  • 日期
    
  • - +
  • 左侧-区间
    
  • - +
  • 列表
    
  • - +
  • 下拉框
    
  • - +
  • 下拉树
    
  • - +
  • 重置
    
  • - +
  • 
  • - +
  • 
  • - +
  • 
  • - +

Unicode 引用

@@ -180,9 +210,9 @@
@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');
+  src: url('iconfont.woff2?t=1625127498350') format('woff2'),
+       url('iconfont.woff?t=1625127498350') format('woff'),
+       url('iconfont.ttf?t=1625127498350') format('truetype');
 }
 

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

@@ -207,7 +237,52 @@
    - + +
  • + +
    + 实线 +
    +
    .icon-solid_line +
    +
  • + +
  • + +
    + 画笔 +
    +
    .icon-huabi +
    +
  • + +
  • + +
    + 点线 +
    +
    .icon-dianxian +
    +
  • + +
  • + +
    + 虚线 +
    +
    .icon-xuxian +
    +
  • + +
  • + +
    + 背景色‘ +
    +
    .icon-beijingse1 +
    +
  • +
  • @@ -216,7 +291,7 @@
    .icon-juxing
  • - +
  • @@ -225,7 +300,7 @@
    .icon-text
  • - +
  • @@ -234,7 +309,7 @@
    .icon-picture
  • - +
  • @@ -243,7 +318,7 @@
    .icon-shuru
  • - +
  • @@ -252,7 +327,7 @@
    .icon-tree
  • - +
  • @@ -261,7 +336,7 @@
    .icon-chaxunsousuo
  • - +
  • @@ -270,7 +345,7 @@
    .icon-jidu
  • - +
  • @@ -279,7 +354,7 @@
    .icon-shuzishunxu
  • - +
  • @@ -288,7 +363,7 @@
    .icon-Group-
  • - +
  • @@ -297,7 +372,7 @@
    .icon-riqi
  • - +
  • @@ -306,7 +381,7 @@
    .icon-zuoce-qujian
  • - +
  • @@ -315,7 +390,7 @@
    .icon-liebiao
  • - +
  • @@ -324,7 +399,7 @@
    .icon-xialakuang
  • - +
  • @@ -333,7 +408,7 @@
    .icon-xialashu
  • - +
  • @@ -342,7 +417,7 @@
    .icon-zhongzhi
  • - +
  • @@ -351,7 +426,7 @@
    .icon-ri
  • - +
  • @@ -360,7 +435,7 @@
    .icon-nian
  • - +
  • @@ -369,7 +444,7 @@
    .icon-yue
  • - +

font-class 引用

@@ -396,7 +471,47 @@
    - + +
  • + +
    实线
    +
    #icon-solid_line
    +
  • + +
  • + +
    画笔
    +
    #icon-huabi
    +
  • + +
  • + +
    点线
    +
    #icon-dianxian
    +
  • + +
  • + +
    虚线
    +
    #icon-xuxian
    +
  • + +
  • + +
    背景色‘
    +
    #icon-beijingse1
    +
  • +
  • 矩形
    #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 引用

diff --git a/frontend/src/styles/deicon/iconfont.css b/frontend/src/styles/deicon/iconfont.css index 800a45892e..fe7c6e0a7a 100644 --- a/frontend/src/styles/deicon/iconfont.css +++ b/frontend/src/styles/deicon/iconfont.css @@ -1,8 +1,8 @@ @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'); + src: url('iconfont.woff2?t=1625127498350') format('woff2'), + url('iconfont.woff?t=1625127498350') format('woff'), + url('iconfont.ttf?t=1625127498350') format('truetype'); } .iconfont { @@ -13,6 +13,26 @@ -moz-osx-font-smoothing: grayscale; } +.icon-solid_line:before { + content: "\e64a"; +} + +.icon-huabi:before { + content: "\e640"; +} + +.icon-dianxian:before { + content: "\e614"; +} + +.icon-xuxian:before { + content: "\e617"; +} + +.icon-beijingse1:before { + content: "\e600"; +} + .icon-juxing:before { content: "\e648"; } diff --git a/frontend/src/styles/deicon/iconfont.js b/frontend/src/styles/deicon/iconfont.js index 515bb2ce73..04fd68c805 100644 --- a/frontend/src/styles/deicon/iconfont.js +++ b/frontend/src/styles/deicon/iconfont.js @@ -1 +1 @@ -!(function(c) { var h; var a; var l; var v; var t; var o; var i = ''; var 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() { v.readyState == 'complete' && (v.onreadystatechange = null, z()) }) }(window)) +!function(c){var h,a,l,v,t,i,s='',o=(o=document.getElementsByTagName("script"))[o.length-1].getAttribute("data-injectcss");if(o&&!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=s,s=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,(i=function(){try{v.documentElement.doScroll("left")}catch(c){return void setTimeout(i,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 index e9ce984096..a9130d0baa 100644 --- a/frontend/src/styles/deicon/iconfont.json +++ b/frontend/src/styles/deicon/iconfont.json @@ -5,6 +5,41 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "20374711", + "name": "实线", + "font_class": "solid_line", + "unicode": "e64a", + "unicode_decimal": 58954 + }, + { + "icon_id": "930673", + "name": "画笔", + "font_class": "huabi", + "unicode": "e640", + "unicode_decimal": 58944 + }, + { + "icon_id": "15952264", + "name": "点线", + "font_class": "dianxian", + "unicode": "e614", + "unicode_decimal": 58900 + }, + { + "icon_id": "15952269", + "name": "虚线", + "font_class": "xuxian", + "unicode": "e617", + "unicode_decimal": 58903 + }, + { + "icon_id": "19990890", + "name": "背景色‘", + "font_class": "beijingse1", + "unicode": "e600", + "unicode_decimal": 58880 + }, { "icon_id": "2404485", "name": "矩形", diff --git a/frontend/src/styles/deicon/iconfont.ttf b/frontend/src/styles/deicon/iconfont.ttf index ecd3c9b6b1..6082b471a9 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 05fa75f07e..2ef2b9e353 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 ed0a74539d..88911189bc 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/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 64361eddad..09f85cc524 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -154,9 +154,12 @@ - + + test--------{{ curComponent&&curComponent.type }} + + @@ -195,6 +198,7 @@ import FilterDialog from '../filter/filterDialog' import toast from '@/components/canvas/utils/toast' import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list' import generateID from '@/components/canvas/utils/generateID' +import RectangleAttr from '@/components/canvas/components/RectangleAttr' export default { name: 'PanelEdit', @@ -213,7 +217,8 @@ export default { AttrList, AttrListExtend, AssistComponent, - PanelTextEditor + PanelTextEditor, + RectangleAttr }, data() { return { @@ -451,7 +456,7 @@ export default { this.clearCurrentInfo() // 文字组件 - if (component.type === 'v-text' || component.type === 'rect-shape') { + if (component.type === 'v-text') { this.$store.commit('setCurComponent', { component: component, index: this.componentData.length }) this.styleDialogVisible = true this.show = false