style: fix

package.json

@@ -54,6 +54,7 @@
     "path": "^0.12.7",
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.0.0-rc.14",
+    "remixicon": "^2.5.0",
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.11",
     "sortablejs": "1.13.0",

pnpm-lock.yaml

@@ -54,6 +54,7 @@ specifiers:
   postcss-import: 14.0.0
   prettier: 2.3.2
   pretty-quick: 3.1.1
+  remixicon: ^2.5.0
   resize-observer-polyfill: ^1.5.1
   responsive-storage: ^1.0.11
   rimraf: 3.0.2
@@ -112,6 +113,7 @@ dependencies:
   path: 0.12.7
   path-to-regexp: 6.2.0
   pinia: 2.0.2_typescript@4.4.2+vue@3.2.21
+  remixicon: 2.5.0
   resize-observer-polyfill: 1.5.1
   responsive-storage: 1.0.11_vue@3.2.21
   sortablejs: 1.13.0
@@ -5496,6 +5498,13 @@ packages:
       - supports-color
     dev: true
 
+  /remixicon/2.5.0:
+    resolution:
+      {
+        integrity: sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
+      }
+    dev: false
+
   /repeat-string/1.6.1:
     resolution: { integrity: sha1-jcrkcOHIirwtYA//Sndihtp15jc= }
     engines: { node: ">=0.10" }

src/assets/svg/arrow-left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="icon-left"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>

src/assets/svg/arrow-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="icon-right" ><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>

src/assets/svg/exit_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5l-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" color="#00000073" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5l-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"></path></g></svg>

src/assets/svg/full_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" color="#00000073" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"></path></g></svg>

src/layout/components/tag/index.scss

@@ -64,6 +64,8 @@
   display: flex;
   align-items: center;
   box-shadow: 0 0 1px #888;
+  color: var(--el-text-color-regular);
+  background: #fff;
 
   .scroll-item {
     border-radius: 3px 3px 0 0;
@@ -132,14 +134,14 @@
 
   .right-button {
     display: flex;
-    align-items: center;
     font-size: 16px;
 
     li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 40px;
       height: 38px;
-      line-height: 38px;
-      text-align: center;
       border-right: 1px solid #ccc;
       cursor: pointer;
     }
@@ -225,13 +227,30 @@
   }
 }
 
-.icon-left {
+.ri-arrow-left-s-line {
+  width: 40px;
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  font-size: 20px;
+  color: #00000073;
+  box-shadow: 5px 0 5px -6px #ccc;
+
   &:hover {
     cursor: w-resize;
   }
 }
 
-.icon-right {
+.ri-arrow-right-s-line {
+  width: 40px;
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  font-size: 20px;
+  border-right: 1px solid #ccc;
+  color: #00000073;
+  box-shadow: -5px 0 5px -6px #ccc;
+
   &:hover {
     cursor: e-resize;
   }

src/layout/components/tag/index.vue

@@ -29,8 +29,6 @@ import close from "/@/assets/svg/close.svg";
 import refresh from "/@/assets/svg/refresh.svg";
 import closeAll from "/@/assets/svg/close_all.svg";
 import closeLeft from "/@/assets/svg/close_left.svg";
-import arrowLeft from "/@/assets/svg/arrow-left.svg";
-import arrowRight from "/@/assets/svg/arrow-right.svg";
 import closeOther from "/@/assets/svg/close_other.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 
@@ -499,7 +497,7 @@ onBeforeMount(() => {
 
 <template>
   <div ref="containerDom" class="tags-view" v-if="!showTags">
-    <arrowLeft @click="handleScroll(200)" />
+    <i class="ri-arrow-left-s-line" @click="handleScroll(200)"></i>
     <el-scrollbar
       tag="span"
       ref="scrollbarDom"
@@ -547,7 +545,7 @@ onBeforeMount(() => {
         </div>
       </div>
     </el-scrollbar>
-    <arrowRight @click="handleScroll(-200)" />
+    <i class="ri-arrow-right-s-line" @click="handleScroll(-200)"></i>
     <!-- 右键菜单按钮 -->
     <transition name="el-zoom-in-top">
       <ul

src/plugins/fontawesome/index.ts

@@ -8,6 +8,8 @@ import "font-awesome/css/font-awesome.css";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+// github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5
+import "remixicon/fonts/remixicon.css";
 
 export function useFontawesome(app: App) {
   library.add(faUserSecret);