style: revision style

src/assets/iconfont/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1618822116404'); /* IE9 */
+  src: url('iconfont.eot?t=1619360751585'); /* IE9 */
-  src: url('iconfont.eot?t=1618822116404#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  src: url('iconfont.eot?t=1619360751585#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQkAAsAAAAACWAAAAPWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqFXIRAATYCJAMUCwwABCAFhG0HdBvwByMRJnztRfZfEuS6lrOvYNUWLBYrKHuUFPQcqdIW23Ll3d/JYMdZJG0ywiQE2XibeOB/7dt9Nn92ZlFNoklck5hG8QQJTud0QvS4hLZsQyzkjzg4gYMfJMARR4FqiZ5Qv7nUxxktKhcgP2GOJ7yLe0h+e5+srP9bW5jUlU4kMovHteofSLoSClKhShx579qwZ1MiUVu+eGkhN9tVZaKjkibzPwC6wOKi2f+/36x4/pCg6W00erHHR00ShxBJGhKRNBGvSyt1HhdSn4V5ZXpPRi73jLsJaEw2R1i/cft+tYwfFBAunT97XF2Y5RF6UOuqnjOz8EpRxxexDy/dx4e/5oaaqCT8yN1nNpyy+scsD9L97n2HDAHa3/2gIGEOMuFCr/uUFNJzJM2iOFuMWmwX+THbPQ+63YY2S3Yt29UaDZLM/vEiocLVvaCuNmb3DCmn5E4iBGSAICDw60FGxHM6gwYjMUDYIyrVRqWiIFdVp5OlyCpHcnXQV+vUI7rXm1ptaTRp0Hm9oRXMpAmqQSOaIBI1qVN9nqAO5KJ7TSUHFIblUEH0NoQp0wBj2Q2AEXWiYHAwugaLKd4Eo1KgwDj+QGY+owqccO4AIaofYhlTYN6hW+7Dd6SN/U6MDzpzZvmgbx5r60OOaeZD09L3JEsc7b/PZS7X23TI3ef0CxrUrZmkfm3xJkO+8xhXHsctAM5NNHJurk5K9fjJ3SPN4BygE8ZXbqAMt2z918loI1PRgoKDpDcU3gQmajswlr/cWWUz2Q6bc9/7n0bOs+6t1GfZ/ldEG5O9TNajSIjEyBT1USyPdo/RXgiA3oVDIopCACvZkvDYFst63Sb6FTsjq0wOUp6dnghX/LXsUMRY0H2fviR0P6SgXfVX+Ru7rs1tjg5Zft1m0P/21LuO7v0s3ef7RmT0x0DEsbzEuaXk+bCSzr3FnrfVG/kf4H+IPMMN7Ec7ilxNUBuVIOqYBEltCjFT50DRmh+p1K6xmsZsm3B+a4QbkpB7MMsTBsFQ7yAa7D0kQ30lZuo3KEb7D5WhIUHjYBhxxdagBn/AqAQt6Dd4UwtJmxx87Te6e1Kc4479j9x9DNZpqXM3LMj7OKY/3CZCQFwzXNn9MKUKjWtAI9Mu0i7zTH2vNJmahwOMStAC/Qbe1EJmuhxa7/+N7p4Uj4xcCP8jd78+WE0WAvGmLqSR57J9f7iNCM32I64ZXOHEJNIVtP7dAhqZ7Fsk28XcTCKqejq+Nr/GK9Dg1y0hhhRyKKGSm3t9jln5Mj4CpbjNkL92by2Wnt997svLSPeUumHEcoimYQAAAA==') format('woff2'),
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARMAAsAAAAACbwAAAP9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDQAqGEIRiATYCJAMYCw4ABCAFhG0Hfhs2CMgOJS2d2ECiAwlgBN+vlf0+zE5mg6wAXeJZIjpmuSejwkZFpjyxij57rCLU/p9b+c8NWt6VZsJElIM/LOtvdta6uELEuI1RpSiTq877eC1W5aXc/38/V+f5b2lrettv68Xkvj8zA0+cJTJJQyKSxKSSKBWPlNixsM5M+mTE89a4m0BnrRop+8ZmViBbIQ4KxE1DVyC7cisjwtDamp4zi3ihatOz9BfAc//xMQNNkU1SM3Hk4cujGgyMi5MjaYPhCecti35/94OKjG1AIR72hm9Li+Vt0nSLYro9YHl8K0nj4vjWyaffTiaTMMEW0xUVO53ZUn8t//CqJBMNgbPB31+pjC/TNMH4FprC+FaayuRTmsTkiFuGvdnj1KXAOIiV4K+OJFWaiyg0Ta9XlNpZFnNMMU87Fu6JpEd7eVb2opxYflpfv3a6POca5EdfirMurHNGCE8kd+I1Aga56YZpli8QTd2pkM13zTZ3LWH/yp07FYsroO6K+8wWApapQmIJS/sos3zFfAfHn7h7YNkyBXLpDpx4e1dclrGWJZBjHTZlH7GTZu5+x+JBl122Uu7Dnneswsb7GzdAYdAeAQNsuPCgpUXf26No0Vtakrt6EdLv73FsGfVc+stJczdJknB3izcB36+MxPaRNRuxkhDbHm3uWlgXdtH0nPRZONzVMmLbhDTJuGaPNCfq0vWC2f87RVXNo+ZKmG1whgeqbK2MNlctwFnlMtis7d3MsMNhGBuNtnQt7IjdW4k7NbE3+trR+Ch7WcWwpjkOHUkI4nbFjG3xcHdz1HEIabtS38eCpsmEOO2WrO1tMUMd5tprJzKSyJyclDN2xNNTI/96bFx+DY/OZ1M/Agzf5q9pwwDDd2mR2fk3+hv//gtHjxX1/Gv7BYy+e/TXTxieKPKA/wJB1v9p9MQFZWkUnqbM59f7CDSOyHhvg3RyEX+W+EJf98UsIXcTWksyJD1rIGutYxf+Nqj6dmQarevsprPVOM7vW4RJE2UWtjjLIMz3BpK5PkA23x678L9AtdRvaMyPNOicjLIr9m0II3eYocJRk1bjkqEG/FT5eG7oXUI97FVYafRSgixk5KTGuoZmbRz9yPZxTCiiN3FOJcoCPmmM3Q+93oAUZAE3qrzOxXmwq76e9r1SnRrwQa69GKTgkEayKk5iUAX4Ubs0l9t6/yVIF+alYCPzLlQJxIQYG5c0qtNAYI+jnzTvuWwfEqFrwnF0th/FBPhIxhBEXlkOkAT7d3NDKq6Oa4tiUJd6Po5Sse74jO9VXgcdcdUmUuQoUaOJnt4Dl+JXXeEyPxSI1voUw1/7MCwcm0NW4TI0Df09vyvCmMFradjrDakM0Z+bXAAAAAA=') format('woff2'),
-  url('iconfont.woff?t=1618822116404') format('woff'),
+  url('iconfont.woff?t=1619360751585') format('woff'),
-  url('iconfont.ttf?t=1618822116404') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.ttf?t=1619360751585') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1618822116404#iconfont') format('svg'); /* iOS 4.1- */
+  url('iconfont.svg?t=1619360751585#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -15,6 +15,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.team-iconshanchu:before {
+  content: "\e617";
+}
+
 .team-iconshow-main-container:before {
   content: "\e878";
 }

src/assets/iconfont/iconfont.js

@@ -1 +1 @@
-!function(e){var t,c,l,n,o,i,d='<svg><symbol id="team-iconshow-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z"  ></path></symbol><symbol id="team-iconhidden-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 716.8v204.8H307.2v-204.8H102.4v-102.4h307.2z m0-409.6v102.4H102.4V307.2h204.8V102.4h102.4z m512 409.6h-204.8v204.8h-102.4v-307.2h307.2z m0-307.2h-307.2V102.4h102.4v204.8h204.8z"  ></path></symbol><symbol id="team-iconexit-fullscreen" viewBox="0 0 1024 1024"><path d="M366.2 181.8c-1-8-10.8-11.4-16.5-5.7l-53.1 53.1L134.2 67c-3.8-3.8-10-3.8-13.7 0L69 118.3c-3.8 3.8-3.8 10 0 13.7l162.4 162.4-53.3 53.3c-5.7 5.7-2.3 15.5 5.7 16.5l194.6 23c6.2 0.7 11.5-4.5 10.8-10.8l-23-194.6z m12.3 453.3l-194.7 23c-8 1-11.4 10.8-5.7 16.5l53.3 53.3L69 890.1c-3.8 3.8-3.8 10 0 13.7l51.5 51.4c3.8 3.8 10 3.8 13.7 0l162.4-162.3 53.1 53.1c5.7 5.7 15.5 2.3 16.5-5.7l23-194.4c0.7-6.3-4.5-11.5-10.7-10.8z m269.4-248l194.7-23c8-1 11.4-10.8 5.7-16.5L795 294.4l162.4-162.3c3.8-3.8 3.8-10 0-13.7L905.9 67c-3.8-3.8-10-3.8-13.7 0L729.7 229.2l-53.1-53.1c-5.7-5.7-15.6-2.3-16.5 5.7l-23 194.5c-0.6 6.3 4.6 11.5 10.8 10.8zM795 727.8l53.3-53.3c5.7-5.7 2.3-15.5-5.7-16.5L648 635c-6.2-0.7-11.5 4.5-10.8 10.8l23 194.6c1 8 10.8 11.4 16.5 5.7l53.1-53.1 162.4 162.3c3.8 3.8 10 3.8 13.7 0l51.5-51.4c3.8-3.8 3.8-10 0-13.7L795 727.8z m0 0" fill="#515151" ></path></symbol><symbol id="team-iconfullscreen" viewBox="0 0 1024 1024"><path d="M229.8 163l55.7-55.7c6-6 2.4-16.2-6-17.2l-203.2-24c-6.5-0.8-12 4.7-11.3 11.3l24 203.2c1 8.4 11.3 11.9 17.2 6l55.4-55.4 169.6 169.4c3.9 3.9 10.4 3.9 14.3 0l53.8-53.6c3.9-3.9 3.9-10.4 0-14.3L229.8 163z m447.3 237.6c3.9 3.9 10.4 3.9 14.3 0L861 231.1l55.4 55.4c6 6 16.2 2.4 17.2-6l24-203c0.8-6.5-4.7-12-11.3-11.3l-203.2 24c-8.4 1-11.9 11.3-6 17.2l55.7 55.7-169.5 169.4c-3.9 3.9-3.9 10.4 0 14.3l53.8 53.8z m256.6 343.9c-1-8.4-11.3-11.9-17.2-6L861 794 691.4 624.5c-3.9-3.9-10.4-3.9-14.3 0l-53.8 53.6c-3.9 3.9-3.9 10.4 0 14.3L792.9 862l-55.7 55.7c-6 6-2.4 16.2 6 17.2l203.2 24c6.5 0.8 12-4.7 11.3-11.3l-24-203.1z m-588.1-120c-3.9-3.9-10.4-3.9-14.3 0L161.7 794l-55.4-55.4c-6-6-16.2-2.4-17.2 6l-24 203c-0.8 6.5 4.7 12.1 11.3 11.3l203.2-24c8.4-1 11.9-11.3 6-17.2l-55.7-55.5 169.6-169.4c3.9-3.9 3.9-10.4 0-14.3l-53.9-54z m0 0" fill="#515151" ></path></symbol></svg>',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss");if(a&&!e.__iconfont__svg__cssinject__){e.__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(e){console&&console.log(e)}}function m(){o||(o=!0,l())}t=function(){var e,t,c,l;(l=document.createElement("div")).innerHTML=d,d=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(t=document.body).firstChild?(l=e,(c=t.firstChild).parentNode.insertBefore(l,c)):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(l=t,n=e.document,o=!1,(i=function(){try{n.documentElement.doScroll("left")}catch(e){return void setTimeout(i,50)}m()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,m())})}(window);
+!function(e){var t,c,l,n,o,i,a='<svg><symbol id="team-iconshanchu" viewBox="0 0 1024 1024"><path d="M200.0896 166.675692l657.250462 657.218954-33.429662 33.429662-657.250462-657.250462z"  ></path><path d="M166.675692 823.9104l657.218954-657.250462 33.429662 33.429662-657.250462 657.250462z"  ></path></symbol><symbol id="team-iconshow-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z"  ></path></symbol><symbol id="team-iconhidden-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 716.8v204.8H307.2v-204.8H102.4v-102.4h307.2z m0-409.6v102.4H102.4V307.2h204.8V102.4h102.4z m512 409.6h-204.8v204.8h-102.4v-307.2h307.2z m0-307.2h-307.2V102.4h102.4v204.8h204.8z"  ></path></symbol><symbol id="team-iconexit-fullscreen" viewBox="0 0 1024 1024"><path d="M366.2 181.8c-1-8-10.8-11.4-16.5-5.7l-53.1 53.1L134.2 67c-3.8-3.8-10-3.8-13.7 0L69 118.3c-3.8 3.8-3.8 10 0 13.7l162.4 162.4-53.3 53.3c-5.7 5.7-2.3 15.5 5.7 16.5l194.6 23c6.2 0.7 11.5-4.5 10.8-10.8l-23-194.6z m12.3 453.3l-194.7 23c-8 1-11.4 10.8-5.7 16.5l53.3 53.3L69 890.1c-3.8 3.8-3.8 10 0 13.7l51.5 51.4c3.8 3.8 10 3.8 13.7 0l162.4-162.3 53.1 53.1c5.7 5.7 15.5 2.3 16.5-5.7l23-194.4c0.7-6.3-4.5-11.5-10.7-10.8z m269.4-248l194.7-23c8-1 11.4-10.8 5.7-16.5L795 294.4l162.4-162.3c3.8-3.8 3.8-10 0-13.7L905.9 67c-3.8-3.8-10-3.8-13.7 0L729.7 229.2l-53.1-53.1c-5.7-5.7-15.6-2.3-16.5 5.7l-23 194.5c-0.6 6.3 4.6 11.5 10.8 10.8zM795 727.8l53.3-53.3c5.7-5.7 2.3-15.5-5.7-16.5L648 635c-6.2-0.7-11.5 4.5-10.8 10.8l23 194.6c1 8 10.8 11.4 16.5 5.7l53.1-53.1 162.4 162.3c3.8 3.8 10 3.8 13.7 0l51.5-51.4c3.8-3.8 3.8-10 0-13.7L795 727.8z m0 0" fill="#515151" ></path></symbol><symbol id="team-iconfullscreen" viewBox="0 0 1024 1024"><path d="M229.8 163l55.7-55.7c6-6 2.4-16.2-6-17.2l-203.2-24c-6.5-0.8-12 4.7-11.3 11.3l24 203.2c1 8.4 11.3 11.9 17.2 6l55.4-55.4 169.6 169.4c3.9 3.9 10.4 3.9 14.3 0l53.8-53.6c3.9-3.9 3.9-10.4 0-14.3L229.8 163z m447.3 237.6c3.9 3.9 10.4 3.9 14.3 0L861 231.1l55.4 55.4c6 6 16.2 2.4 17.2-6l24-203c0.8-6.5-4.7-12-11.3-11.3l-203.2 24c-8.4 1-11.9 11.3-6 17.2l55.7 55.7-169.5 169.4c-3.9 3.9-3.9 10.4 0 14.3l53.8 53.8z m256.6 343.9c-1-8.4-11.3-11.9-17.2-6L861 794 691.4 624.5c-3.9-3.9-10.4-3.9-14.3 0l-53.8 53.6c-3.9 3.9-3.9 10.4 0 14.3L792.9 862l-55.7 55.7c-6 6-2.4 16.2 6 17.2l203.2 24c6.5 0.8 12-4.7 11.3-11.3l-24-203.1z m-588.1-120c-3.9-3.9-10.4-3.9-14.3 0L161.7 794l-55.4-55.4c-6-6-16.2-2.4-17.2 6l-24 203c-0.8 6.5 4.7 12.1 11.3 11.3l203.2-24c8.4-1 11.9-11.3 6-17.2l-55.7-55.5 169.6-169.4c3.9-3.9 3.9-10.4 0-14.3l-53.9-54z m0 0" fill="#515151" ></path></symbol></svg>',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss");if(d&&!e.__iconfont__svg__cssinject__){e.__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(e){console&&console.log(e)}}function m(){o||(o=!0,l())}t=function(){var e,t,c,l;(l=document.createElement("div")).innerHTML=a,a=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(t=document.body).firstChild?(l=e,(c=t.firstChild).parentNode.insertBefore(l,c)):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(l=t,n=e.document,o=!1,(i=function(){try{n.documentElement.doScroll("left")}catch(e){return void setTimeout(i,50)}m()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,m())})}(window);

src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "team-icon",
   "description": "增删查改xi't",
   "glyphs": [
+    {
+      "icon_id": "6184565",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
     {
       "icon_id": "9626913",
       "name": "全屏",

src/assets/iconfont/iconfont.svg

@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="shanchu" unicode="&#58903;" d="M200.0896 729.324308l657.250462-657.218954-33.429662-33.429662-657.250462 657.250462zM166.675692 72.0896l657.218954 657.250462 33.429662-33.429662-657.250462-657.250462z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="show-main-container" unicode="&#59512;" d="M0 896v-1024h1024V896z m409.6-921.6H102.4v307.2h102.4v-204.8h204.8zM409.6 691.2H204.8v-204.8H102.4V793.6h307.2z m512-614.4v-102.4h-307.2v102.4h204.8v204.8h102.4z m0 614.4v-204.8h-102.4V691.2h-204.8V793.6h307.2z"  horiz-adv-x="1024" />
 
     

src/layout/components/setting/index.vue

@@ -14,6 +14,14 @@
         <span>隐藏标签页</span>
         <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
       </li>
+
+      <li>
+        <span>标签风格</span>
+        <vxe-radio-group v-model="markValue" @change="onChange">
+          <vxe-radio label="card" content="卡片"></vxe-radio>
+          <vxe-radio label="smart" content="灵动"></vxe-radio>
+        </vxe-radio-group>
+      </li>
     </ul>
     <el-divider />
     <vxe-button
@@ -28,7 +36,7 @@
 
 <script lang='ts'>
 import panel from "../panel/index.vue";
-import { onMounted, reactive, toRefs } from "vue";
+import { onMounted, reactive, toRefs, ref, unref } from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { toggleClass } from "/@/utils/operate";
 import { emitter } from "/@/utils/mitt";
@@ -40,6 +48,9 @@ export default {
   setup() {
     const router = useRouter();
 
+    // 默认卡片模式
+    const markValue = ref(storageLocal.getItem("showModel") || "card");
+
     function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
       const targetEl = target || document.body;
       let { className } = targetEl;
@@ -104,13 +115,20 @@ export default {
       router.push("/login");
     }
 
+    function onChange({ label }) {
+      storageLocal.setItem("showModel", label);
+      emitter.emit("tagViewsShowModel", label);
+    }
+
     return {
       ...toRefs(settings),
       localOperate,
       greyChange,
       weekChange,
       tagsChange,
-      onReset
+      onReset,
+      markValue,
+      onChange
     };
   }
 };

src/layout/components/sidebar/index.vue

@@ -3,10 +3,10 @@
     <el-menu
       :default-active="activeMenu"
       :collapse="isCollapse"
-      background-color="#1b2a47"
+      background-color="#fff"
-      text-color="#7a80b4"
+      unique-opened
-      :unique-opened="false"
+      text-color="#000"
-      active-text-color="#fff"
+      active-text-color="#409eff"
       :collapse-transition="false"
       mode="vertical"
       @select="menuSelect"

src/layout/components/tag/index.vue

@@ -4,11 +4,23 @@
       <div
         v-for="(item, index) in dynamicTagList"
         :key="index"
-        :class="['scroll-item', $route.path === item.path ? 'active' : '']"
+        :ref="'dynamic' + index"
+        :class="['scroll-item', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card'  ? 'card-active' : '' ]"
         @contextmenu.prevent.native="openMenu(item, $event)"
+        @mouseenter.prevent="onMouseenter(item, index)"
+        @mouseleave.prevent="onMouseleave(item, index)"
       >
         <router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
-        <span v-if="index !== 0 " class="el-icon-close" @click="deleteMenu(item)"></span>
+        <i
+          v-if="$route.path === item.path && index !== 0 || index === activeIndex && index !== 0"
+          class="iconfont team-iconshanchu"
+          @click="deleteMenu(item)"
+        ></i>
+        <div
+          :ref="'schedule' + index"
+          v-if="showModel !=='card'"
+          :class="[$route.path === item.path ? 'schedule-active' : '']"
+        ></div>
       </div>
     </el-scrollbar>
     <!-- 右键菜单按钮 -->
@@ -62,16 +74,25 @@
 <script lang='ts'>
 import { useDynamicRoutesHook } from "./tagsHook";
 import { useRoute, useRouter } from "vue-router";
-import { ref, watchEffect, watch, onBeforeMount, unref, nextTick } from "vue";
+import {
+  ref,
+  watchEffect,
+  watch,
+  onBeforeMount,
+  unref,
+  nextTick,
+  getCurrentInstance
+} from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { emitter } from "/@/utils/mitt";
-import { toggleClass, removeClass } from "/@/utils/operate";
+import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { templateRef } from "@vueuse/core";
 import { homeRoute } from "./type";
-let refreshDiv = "refresh-div";
+let refreshButton = "refresh-button";
 
 export default {
   setup() {
+    let vm: any;
     const {
       deleteDynamicTag,
       dynamicRouteTags,
@@ -82,7 +103,7 @@ export default {
     const router = useRouter();
     const showTags = ref(storageLocal.getItem("tagsVal") || false);
     const containerDom = templateRef<HTMLElement | null>("containerDom", null);
-
+    const activeIndex = ref(-1);
     const tagsViews = ref([
       {
         icon: "el-icon-refresh-right",
@@ -114,6 +135,12 @@ export default {
       }
     ]);
 
+    // 显示模式，默认卡片模式显示
+    const showModel = ref(storageLocal.getItem("showModel") || "card");
+    if (!showModel) {
+      storageLocal.setItem("showModel", "card");
+    }
+
     let visible = ref(false);
     let buttonLeft = ref(0);
     let buttonTop = ref(0);
@@ -146,13 +173,13 @@ export default {
     });
 
     function onFresh() {
-      toggleClass(true, refreshDiv, document.querySelector(".rotate"));
+      toggleClass(true, refreshButton, document.querySelector(".rotate"));
       const { path, fullPath } = unref(route);
       router.replace({
         path: "/redirect" + fullPath
       });
       setTimeout(() => {
-        removeClass(document.querySelector(".rotate"), refreshDiv);
+        removeClass(document.querySelector(".rotate"), refreshButton);
       }, 600);
     }
 
@@ -225,7 +252,7 @@ export default {
       } else {
         buttonLeft.value = left;
       }
-      buttonTop.value = e.offsetY * 2;
+      buttonTop.value = e.clientY;
       visible.value = true;
     }
 
@@ -244,12 +271,46 @@ export default {
       }
     );
 
+    // 鼠标移入
+    function onMouseenter(item, index) {
+      if (index) activeIndex.value = index;
+      if (unref(showModel) === "smart") {
+        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
+        toggleClass(true, "schedule-in", vm.refs["schedule" + index]);
+        toggleClass(false, "schedule-out", vm.refs["schedule" + index]);
+      } else {
+        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
+        toggleClass(true, "card-in", vm.refs["dynamic" + index]);
+        toggleClass(false, "card-out", vm.refs["dynamic" + index]);
+      }
+    }
+
+    // 鼠标移出
+    function onMouseleave(item, index) {
+      activeIndex.value = -1;
+      if (unref(showModel) === "smart") {
+        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
+        toggleClass(false, "schedule-in", vm.refs["schedule" + index]);
+        toggleClass(true, "schedule-out", vm.refs["schedule" + index]);
+      } else {
+        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
+        toggleClass(false, "card-in", vm.refs["dynamic" + index]);
+        toggleClass(true, "card-out", vm.refs["dynamic" + index]);
+      }
+    }
+
     onBeforeMount(() => {
+      vm = getCurrentInstance();
+
       emitter.on("tagViewsChange", key => {
         if (unref(showTags) === key) return;
         showTags.value = key;
       });
 
+      emitter.on("tagViewsShowModel", key => {
+        showModel.value = key;
+      });
+
       emitter.on("changLayoutRoute", indexPath => {
         let currentLen = storageLocal.getItem("routesInStorage").length;
         if (currentLen === 1) {
@@ -278,7 +339,11 @@ export default {
       openMenu,
       closeMenu,
       selectTag,
-      currentSelect
+      currentSelect,
+      onMouseenter,
+      onMouseleave,
+      activeIndex,
+      showModel
     };
   }
 };
@@ -287,16 +352,20 @@ export default {
 <style lang="scss" scoped>
 .tags-view {
   width: 100%;
-  height: 34px;
+  height: 40px;
   font-size: 14px;
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
   .scroll-item {
-    border-radius: 3px;
+    border-radius: 3px 3px 0 0;
     padding: 2px 8px;
     display: inline-block;
+    position: relative;
+    margin-right: 5px;
+    height: 28px;
+    line-height: 25px;
+    &:hover {
+      background-color: #eaf4fe;
+    }
   }
   a {
     text-decoration: none;
@@ -309,7 +378,6 @@ export default {
     padding: 5px 0;
     white-space: nowrap;
     position: relative;
-    overflow: hidden;
     width: 100%;
     background: #fff;
     border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
@@ -343,22 +411,6 @@ export default {
   }
 }
 
-.el-icon-close {
-  cursor: pointer;
-  border-radius: 50%;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.el-icon-close:hover {
-  background: #b4bccc;
-}
-.active {
-  background: #409eff;
-  position: relative;
-  color: #fff;
-  a {
-    color: #fff;
-  }
-}
 :deep(.el-scrollbar__wrap) {
   height: 100vh;
 }
@@ -379,7 +431,112 @@ export default {
   }
 }
 
-.refresh-div {
+.el-dropdown-menu {
+  padding: 0;
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  color: #606266;
+  background: #f0f0f0;
+}
+.el-dropdown-menu__item,
+.el-menu-item {
+  padding: 0 14px;
+  overflow: hidden;
+}
+:deep(.el-dropdown-menu__item) i {
+  margin-right: 10px;
+}
+
+.is-active {
+  background-color: #eaf4fe;
+  position: relative;
+  color: #fff;
+  a {
+    color: #1890ff;
+  }
+}
+
+// 关闭图标
+.team-iconshanchu {
+  color: #1890ff;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.team-iconshanchu:hover {
+  border-radius: 50%;
+  color: #fff;
+  background: #b4bccc;
+}
+
+// 卡片模式
+.card-active {
+  border: 1px solid #1890ff;
+}
+// 卡片模式下鼠标移入显示蓝色边框
+.card-in {
+  border: 1px solid #1890ff;
+  color: #1890ff;
+  a {
+    color: #1890ff;
+  }
+}
+// 卡片模式下鼠标移出隐藏蓝色边框
+.card-out {
+  border: none;
+  color: #666;
+  a {
+    color: #666;
+  }
+}
+
+// 灵动模式
+.schedule-active {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #1890ff;
+}
+// 灵动模式下鼠标移入显示蓝色进度条
+.schedule-in {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #1890ff;
+  animation: scheduleInWidth 400ms ease-in;
+}
+@keyframes scheduleInWidth {
+  from {
+    width: 0px;
+  }
+  to {
+    width: 100%;
+  }
+}
+// 灵动模式下鼠标移出隐藏蓝色进度条
+.schedule-out {
+  width: 0;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #1890ff;
+  animation: scheduleOutWidth 400ms ease-in;
+}
+@keyframes scheduleOutWidth {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+// 刷新按钮动画效果
+.refresh-button {
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 600ms;
   -moz-transition-property: -moz-transform;
@@ -421,19 +578,4 @@ export default {
     transform: rotate(360deg);
   }
 }
-.el-dropdown-menu {
-  padding: 0;
-}
-.el-dropdown-menu__item:not(.is-disabled):hover {
-  color: #606266;
-  background: #f0f0f0;
-}
-.el-dropdown-menu__item,
-.el-menu-item {
-  padding: 0 14px;
-  overflow: hidden;
-}
-:deep(.el-dropdown-menu__item) i {
-  margin-right: 10px;
-}
 </style>

src/style/sidebar.scss

@@ -18,6 +18,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    box-shadow: 0 0 1px #888888;
 
     // reset element-plus css
     .horizontal-collapse-transition {
@@ -76,6 +77,7 @@
 
     & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
+      font-size: 12px;
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
 

src/style/variables.scss

@@ -1,17 +1,29 @@
 // sidebar
 $menuText: #7a80b4;
 $menuActiveText: #7a80b4;
-$subMenuActiveText: #f4f4f5;
+$subMenuActiveText: #409eff;
 
+// dark样式
 //菜单背景
-$menuBg: #1b2a47;
+// $menuBg: #1b2a47;
-// 鼠标覆盖菜单时的背景
+// // 鼠标覆盖菜单时的背景
-$menuHover: #2a395b;
+// $menuHover: #2a395b;
 
 // 子菜单背景
-$subMenuBg: #1f2d3d;
+// $subMenuBg: #1f2d3d;
+// // 鼠标覆盖子菜单时的背景
+// $subMenuHover: #001528;
+
+// night样式
+//菜单背景
+$menuBg: #fff;
+// 鼠标覆盖菜单时的背景
+$menuHover: #e0ebf6;
+
+// 子菜单背景
+$subMenuBg: #fff;
 // 鼠标覆盖子菜单时的背景
-$subMenuHover: #001528;
+$subMenuHover: #e0ebf6;
 
 $sideBarWidth: 210px;
 

src/views/system/dict.vue

@@ -29,10 +29,11 @@
       resizable
       :tree-config="{children: 'children', iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}"
       :data="demo1.tableData"
+      @cell-dblclick="cellDBLClickEvent"
     >
       <vxe-table-column tree-node field="name" title="字典名称"></vxe-table-column>
       <vxe-table-column field="model" title="字典类型"></vxe-table-column>
-      <vxe-table-column title="操作" width="330">
+      <vxe-table-column title="操作" width="330" fixed="right">
         <template #default="{ row }">
           <vxe-button type="text" icon="el-icon-edit" @click="demo1.value8 = true">编辑</vxe-button>
           <vxe-button type="text" icon="el-icon-circle-plus-outline">新增子类型</vxe-button>
@@ -43,6 +44,27 @@
     </vxe-table>
 
     <vxe-modal
+      v-model="demo1.showEdit"
+      :title="demo1.selectRow ? '编辑&保存' : '新增&保存'"
+      width="800"
+      min-width="600"
+      min-height="300"
+      :loading="demo1.submitLoading"
+      resize
+      destroy-on-close
+    >
+      <template #default>
+        <vxe-form
+          :data="demo1.formData"
+          :items="demo1.formItems"
+          :rules="demo1.formRules"
+          title-align="right"
+          title-width="100"
+          @submit="demo1.submitEvent"
+        ></vxe-form>
+      </template>
+    </vxe-modal>
+    <!-- <vxe-modal
       v-model="demo1.value8"
       title="记忆功能的窗口"
       width="440"
@@ -84,7 +106,7 @@
           </vxe-form-item>
         </vxe-form>
       </template>
-    </vxe-modal>
+    </vxe-modal>-->
   </div>
 </template>
 <script  lang="ts">
@@ -92,11 +114,17 @@ import { reactive, ref, nextTick } from "vue";
 import XEUtils from "xe-utils";
 import { cloneDeep } from "lodash-es";
 import { templateRef } from "@vueuse/core";
-import { VxeTablePropTypes, VxeTableInstance, VXETable } from "vxe-table";
+import {
+  VxeTablePropTypes,
+  VxeTableInstance,
+  VXETable,
+  VxeTableEvents
+} from "vxe-table";
 
 export default {
   setup() {
     const demo1 = reactive({
+      showEdit: false,
       filterName: "",
       tableData: [
         {
@@ -181,12 +209,21 @@ export default {
       });
     }
 
+    const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
+      console.log(
+        "%crow===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        row
+      );
+    };
+
     return {
       demo1,
       formatDate,
       searchEvent,
       confirmEvent,
-      onEdit
+      onEdit,
+      cellDBLClickEvent
     };
   }
 };