From ef979dbd72018407537ecf9e0c4e2fb399ec6011 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 11 Aug 2021 14:08:46 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=E5=A2=9E=E5=8A=A0=E9=92=BB=E5=8F=96?= =?UTF-8?q?=E7=AD=89=E5=9B=BE=E6=A0=87=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Editor/ComponentWrapper.vue | 4 +- .../canvas/components/Editor/ViewTrackBar.vue | 124 +++++++++++++ frontend/src/styles/deicon/demo.css | 50 +++--- frontend/src/styles/deicon/demo_index.html | 167 +++++++++++++++++- frontend/src/styles/deicon/iconfont.css | 34 +++- frontend/src/styles/deicon/iconfont.js | 2 +- frontend/src/styles/deicon/iconfont.json | 49 +++++ frontend/src/styles/deicon/iconfont.ttf | Bin 12276 -> 13916 bytes frontend/src/styles/deicon/iconfont.woff | Bin 7520 -> 8544 bytes frontend/src/styles/deicon/iconfont.woff2 | Bin 6336 -> 7160 bytes 10 files changed, 397 insertions(+), 33 deletions(-) create mode 100644 frontend/src/components/canvas/components/Editor/ViewTrackBar.vue diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 88216e9e1a..80992dfe8f 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -7,6 +7,7 @@ @mousedown="elementMouseDown" > + +
+
+ + + + + + +
+ +
+ + + + + diff --git a/frontend/src/styles/deicon/demo.css b/frontend/src/styles/deicon/demo.css index b7af3aa35d..a67054a0a0 100644 --- a/frontend/src/styles/deicon/demo.css +++ b/frontend/src/styles/deicon/demo.css @@ -3,9 +3,9 @@ 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'); + 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 { @@ -215,35 +215,35 @@ margin: 1em 0; } -.markdown > p, -.markdown > blockquote, -.markdown > .highlight, -.markdown > ol, -.markdown > ul { +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { width: 80%; } -.markdown ul > li { +.markdown ul>li { list-style: circle; } -.markdown > ul li, -.markdown blockquote ul > li { +.markdown>ul li, +.markdown blockquote ul>li { margin-left: 20px; padding-left: 4px; } -.markdown > ul li p, -.markdown > ol li p { +.markdown>ul li p, +.markdown>ol li p { margin: 0.6em 0; } -.markdown ol > li { +.markdown ol>li { list-style: decimal; } -.markdown > ol li, -.markdown blockquote ol > li { +.markdown>ol li, +.markdown blockquote ol>li { margin-left: 20px; padding-left: 4px; } @@ -260,7 +260,7 @@ font-weight: 600; } -.markdown > table { +.markdown>table { border-collapse: collapse; border-spacing: 0px; empty-cells: show; @@ -269,20 +269,20 @@ margin-bottom: 24px; } -.markdown > table th { +.markdown>table th { white-space: nowrap; color: #333; font-weight: 600; } -.markdown > table th, -.markdown > table td { +.markdown>table th, +.markdown>table td { border: 1px solid #e9e9e9; padding: 8px 16px; text-align: left; } -.markdown > table th { +.markdown>table th { background: #F7F7F7; } @@ -318,8 +318,8 @@ display: inline-block; } -.markdown > br, -.markdown > p > br { +.markdown>br, +.markdown>p>br { clear: both; } @@ -453,13 +453,13 @@ pre[class*="language-"] { overflow: auto; } -:not(pre) > code[class*="language-"], +:not(pre)>code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } /* Inline code */ -:not(pre) > code[class*="language-"] { +:not(pre)>code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index e01657bfe5..e997334f0c 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,48 @@
    +
  • + +
    线性图标-取消下钻
    +
    &#xe973;
    +
    • + +
  • + +
    线性图标-取消下钻
    +
    &#xe6ed;
    +
    • + +
  • + +
    联动
    +
    &#xe6f7;
    +
    • + +
  • + +
    下钻
    +
    &#xe613;
    +
    • + +
  • + +
    上钻
    +
    &#xe61f;
    +
    • + +
  • + +
    取消联动
    +
    &#xe637;
    +
    • + +
  • + +
    edit-2
    +
    &#xe604;
    +
    • +
  • edit-2
    @@ -318,9 +360,9 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1627282547459') format('woff2'),
-       url('iconfont.woff?t=1627282547459') format('woff'),
-       url('iconfont.ttf?t=1627282547459') format('truetype');
+  src: url('iconfont.woff2?t=1628652979833') format('woff2'),
+       url('iconfont.woff?t=1628652979833') format('woff'),
+       url('iconfont.ttf?t=1628652979833') format('truetype');
 }

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

    @@ -346,6 +388,69 @@
      +
    • + +
      + 线性图标-取消下钻 +
      +
      .icon-quxiaoshangzuan +
      +
      • + +
    • + +
      + 线性图标-取消下钻 +
      +
      .icon-quxiaoxiazuan +
      +
      • + +
    • + +
      + 联动 +
      +
      .icon-linkage +
      +
      • + +
    • + +
      + 下钻 +
      +
      .icon-xiazuan +
      +
      • + +
    • + +
      + 上钻 +
      +
      .icon-shangzuan +
      +
      • + +
    • + +
      + 取消联动 +
      +
      .icon-quxiaoliandong +
      +
      • + +
    • + +
      + edit-2 +
      +
      .icon-edit-outline +
      +
      • +
    • @@ -742,6 +847,62 @@
        +
      • + +
        线性图标-取消下钻
        +
        #icon-quxiaoshangzuan
        +
        • + +
      • + +
        线性图标-取消下钻
        +
        #icon-quxiaoxiazuan
        +
        • + +
      • + +
        联动
        +
        #icon-linkage
        +
        • + +
      • + +
        下钻
        +
        #icon-xiazuan
        +
        • + +
      • + +
        上钻
        +
        #icon-shangzuan
        +
        • + +
      • + +
        取消联动
        +
        #icon-quxiaoliandong
        +
        • + +
      • + +
        edit-2
        +
        #icon-edit-outline
        +
        • +
      • RV6qxl7L13?M600#=-EPuy?$Z^(J@GZOM`0f!*Tn9 zsbjR;3^`h0^$MkMt?Tw}A2bM(&tdjDPM>Iq2md%q2qYY5j7Tuf!V<1=7D+<;mu?K& z2Y<{O7U#nZc5ksPVQ+#;NP2%84K=$$xISdFX>DOIkFniFTF2?JcVicaZOY8&IJVQi zfRPTG4LuU6Ky=sPuS|29fcfq76W7GT)k5Yt-ec$zi<^-AI#`qT z$p>5`lz$*w@gehAFU#UY{%1KH`dcWP%_lU9Rcn$T7fl~%w91d^=AH*%)%S30DrJ&@ z@5l!Uc4sK1D6F*;hweb~;eMU0^mgvfApM{J()O8XAQ=q?QkwS=vL{Gvf-VOHI(A4K zWfg-9#*WwIJ#7`>W!X2tu6Nh^ZREv=cPS&^Usvto%7X{YD1OZ2%8NCP;&@3Fj`ru_ zgI(!q&K>*G;|C<^;SHihiVOl9ZHt07qUEzkke5S0g9q#sPxx?6x~&c}whyb+?QBk* z9Zx57LtjXoK&0lB3z=|5;tD($N)<3{LudK}~sk1-wMfC?#*rIK0C&pMg z4}hNjOt8_mfd%U>MZ>CpzMLJv|M)fgwSlkB`}+&yQ0a^ ztS9Ds)R~%FHsDjTR4i|TNYeF7OEXGsQZGV4H0Cn?gqD*N+f3&`Y=%gmlRG;)7iDuf z)TZBEvH3Cj{Hm;xudft1esh{0=nFH4`Anb-HKSe7{}78{K`b6YsvQNeo1kuXlTY%^ zNrwPRxNeJuUcwMt+|7&{>C#+MbI zY+C+RxN9Q497(L+*NT+WCz=xX)oa~Xomh@cq?@GHSm3WaEi^k4Y;i9@?6fSCuu56r zwglS|3oSDXH7RUsVPNEzwnCVcMFW%WxDvSI9|>s##>&AT=|@CNXt)m}wV@KX5r_Z& zfO^KNnz&+pL4m$Fu4Yx`fyNp`Wm;OLp{DTwc$!x)Y8W2w!lRf}{HJ4|Or4)=ix+*$ zf;yFceK&7ykajn{%kSGRjgsh>6>LxQ)?&@wzJZVsdt&L{(nKqXm0~=Ge=0iPRNA?i zJuxKY(q$FD)`W=}<({8a9VlzQJN@ov^zHHgIS{)+8$R2xw{3Of+imraXQxlh86MYf zZG2~OKi{P-4)2kCOtK-)s6_)von_WmKe_RZrSI{q^p#14Pa0-eV~ER-j?S+Z?r=4p zIW|qTQ)-g#G|@K&7BbuY+P7_+;cp-*_-U%}9Aogd;DY z1rv_@2N-0W6H-s(6w=^7W81cNzc0R?*^X3-b=PxH1MNVpB$xA31ZZy7rb$afHjdD= zArn`Axg%G;Q=FI6?(9jZ+`Zn9nm9FK(pNvf&t@EgI&S{^ugxtnCe6L~6G&f&M_!+J zD0HbbahJ{s`IjwT^lr_RC&7Q;p7O?Z!bNXgUiY`>Xlq&SX?j{z8sl1Kn>_>1Y_;cJ zL&V7S+|x7@2S%7A0coTHY7i1g?$N(|dg-uWhJeQiPo2qPiwuu)WiP0)gURpfv_TwT= z$-zmEzbNZX#y)$b*{BZNoX-q+%8Z_p+b6x5O zl-)6FCVvVjfiXkNhfXZFuCSh1I<$i0umEswc5P4XrwyOgeRi~A#d?k+Bao<^*z{$S z5duw$d@*_;5=eNXvyaC*VnIUAZ>Iib6_Y1Fd^lyYHe}{hh(V+pK9_X@JekjtA?{EE?jVvh9x+aVa+q1H=+LR$tzapj zb>eYu1mdQWp2*1&5tAbuPrR0o6wV#d+OHVRiUii}%EY9PD#E1KU_$$We(wAHO2K~0Yl=8P9eL~iLQ?d2((7?b;%|XH$vxCQT z63l;cw){M_xl@nVGcz}JS=&U{4<9xyLXQ0h6gJNZCod{AbB7bxbMynqhTkOeTx=1Vjc{T^o^+P(j^;uag%+9b?w^XVmPm0Vtv3o z-uI{Od-N0k`uZ3B2D*OXQ$tfzW!TW9+F zn3YZc2Ua6C&bYW$Zp!-KBKOFN*#UupW8zpiW{x2NOIAGbU#^Wio&);VKaQcS=~9nT zD)2}_3=b0o;BrT^61&rNN}UeqD*x+jx6jB6wT32Vr%cjZl9Y&x4dc@-C$r1wrSzOg ztFCqzvy53HE0PzRO`A3ta^7WwmFdNc6kY0d_IVvC-AMCz+j4$a#A@^Th0$PRjszm^ z#wm<3H0n$xdW8sE846v&PO=#s(OAStA1MtKoJ=S$1Oqoh7x-;!V+V4^b5xwRjsRCV zmG2ap8lF*|T%E2R4ql)|Vp`h(-(GPT>ZuSXMCn zVK)ZmnJ&e*KE`gw%0D7zMVDx32vcXn^fBvY!XLdq2wB;I=7Aj7&1)PHE@52>-@|REV5}nq*sgf$ z^Wx$5bfe?%(w_k(FWu^w(u*ep`ixUf<79|&l-W3C|9EA8$?p9ttMkY2ah;dRnnAP^ zb)>>yytq?mGDJ6uEu2I<51r+}?w|$O2=*xc8Y@8GJgN{8o4iIV(8>;ssL;rsymR@j zwh>5*Ij7##d8M<%Qf3V-LQ1e2IyYNfIj5V|a(`cn&wpT(z!TiB?GN@e@dty4(vgEn z6Eu)dA9_7Y!`6(y9_phTpPKOFWPuUE@=&9|4YckVg6SD2aIS>FPp}{fz~ct~b~x5b zvqQ!j>*~^*6SvsHGZ?GQmVV)Id>{higKYqGKQKzwx}2z}X)}Z+mLob^Ej8X7mU?Q$ z#iic6{owq81tbvuBTh)TOh;cFC`<#S?)=uB>5lt|rG2K2`$X%W_B8z1Py3m6RatS7 z&1R04v7g0#77w*UOOU!N&CPPhy?>_NsjWG(%Qb3h;!Exvh#z3>JQ{zLR5)@ZIX>=b z{Lc6tXz0!z219Eyc%)&d-dYU^=2rzdf)1`zr2Wi#Ai}^7(V%kjr^*o##@Q+AKB&=* zrO_iryTK@OH-4>HTzn1RU807kiX{_ZkxUhRG5yP3WQy&V)yuqZy|Q+hXXic`=&KHV z5vc0)@BHh#7cDO$UbtSUPsvr;hq6Qhp6s@IGBOc;g&amNkoo}#ea#=HY&&`zIg6er zULoKN`lbyX6n6=A^ag}qDMN>m@<$4f{IcAmuqrmO=iH>YU5Z{%evOtFmSS&u_S^#4 zE6FwN4jD&6*lTR?6hva@173+^3iC+}3!v)Pj=ieA)vD^(swp3= znMnE`)QpeYSY6|&0ShZ`F$%613zTDNWJ<8Mg7F^MNBH>FsaG#w&Al4b9Lexy&QVwN zj=GS+Fo{}vU4qB9?Did8m%5P(!7Tug$5CDmGCLN3MmzoFHr3k%5M_6&beRO1`8n(AP_qI7&duWAUsRY=B(j&6}1n_I!`X=+pY%F+G1{3-*mU3ROX>R)IH3WRXxWRZoR&HU0-n`#2QY1 zCT!60i_NtB%H}$LqnQ1NEgAX8mUaAR3-1JzUfn5}%!PI zsbe74@-nT+wH`7ZWhyvm#j{zuB4;X1mmeHXszabKxcv>5g*?Pi3gu7<)lmC5$9>i$ z-!}Y1g-*BE9}Gw1$#gbfELZEzcDFwqPv@)a8~c&a5?}8Kl3!Eui<>P{N06B&3(B+$ z&N8T?S56D;33e}S|Al`@o~4p#3|xK+jcqH`-sd~SFM0)d8V@`f56#+ z27xD+>j1pci>A`MTvub`{a%SrF*x(#FBXGU9wE zBkj6F>OE-<7w3I0jpR=mcYIOEuv9#2p`6PpSHxQrU?-_%X_8NSvT{=pJ<0000u C<27ag