perf: 同步完整版分支代码

package.json

@@ -36,6 +36,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.25.0",
     "css-color-function": "^1.3.3",
+    "dayjs": "^1.10.7",
     "element-plus": "^2.0.2",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",

pnpm-lock.yaml

@@ -31,6 +31,7 @@ specifiers:
   axios: ^0.25.0
   cross-env: 7.0.3
   css-color-function: ^1.3.3
+  dayjs: ^1.10.7
   element-plus: ^2.0.2
   element-resize-detector: ^1.2.3
   eslint: ^8.8.0
@@ -89,6 +90,7 @@ dependencies:
   animate.css: 4.1.1
   axios: 0.25.0
   css-color-function: 1.3.3
+  dayjs: 1.10.7
   element-plus: 2.0[email protected]
   element-resize-detector: 1.2.4
   js-cookie: 3.0.1

src/components/ReIcon/src/hooks.ts

@@ -1,8 +1,14 @@
+import { iconType } from "./types";
 import { h, defineComponent, Component } from "vue";
 import { IconifyIconOffline, FontIcon } from "../index";
 
-// 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
-export function useRenderIcon(icon: string): Component {
+/**
+ * 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
+ * @param icon 必传 string 图标
+ * @param attrs 可选 iconType 属性
+ * @returns Component
+ */
+export function useRenderIcon(icon: string, attrs?: iconType): Component {
   // iconfont
   const ifReg = /^IF-/;
   // typeof icon === "function" 属于SVG
@@ -19,7 +25,8 @@ export function useRenderIcon(icon: string): Component {
       render() {
         return h(FontIcon, {
           icon: iconName,
-          iconType
+          iconType,
+          ...attrs
         });
       }
     });
@@ -31,7 +38,8 @@ export function useRenderIcon(icon: string): Component {
       name: "Icon",
       render() {
         return h(IconifyIconOffline, {
-          icon: icon
+          icon: icon,
+          ...attrs
         });
       }
     });

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -51,9 +51,11 @@ addIcon("notebook", Notebook);
 import arrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import arrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
 import logoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import nodeTree from "@iconify-icons/ri/node-tree";
 addIcon("arrow-right-s-line", arrowRightSLine);
 addIcon("arrow-left-s-line", arrowLeftSLine);
 addIcon("logout-circle-r-line", logoutCircleRLine);
+addIcon("node-tree", nodeTree);
 
 // Font Awesome 4
 import faUser from "@iconify-icons/fa/user";

src/components/ReIcon/src/types.ts

@@ -0,0 +1,18 @@
+export interface iconType {
+  // iconify (https://docs.iconify.design/icon-components/vue/#properties)
+  inline?: boolean;
+  width?: string | number;
+  height?: string | number;
+  horizontalFlip?: boolean;
+  verticalFlip?: boolean;
+  flip?: string;
+  rotate?: number | string;
+  color?: string;
+  horizontalAlign?: boolean;
+  verticalAlign?: boolean;
+  align?: string;
+  onLoad?: Function;
+
+  //  all icon
+  style?: object;
+}

src/style/element-plus.scss

@@ -46,6 +46,19 @@
   --el-button-active-border-color: var(--el-color-primary-active) !important;
 }
 
+/* button--primary plain */
+.el-button--primary.is-plain {
+  --el-button-bg-color: var(--el-color-primary-light-9) !important;
+  --el-button-border-color: var(--el-color-primary-light-6) !important;
+  --el-button-hover-bg-color: var(--el-color-primary-light-1) !important;
+  --el-button-hover-border-color: var(--el-color-primary) !important;
+  --el-button-active-bg-color: var(--el-color-primary) !important;
+  --el-button-active-border-color: var(--el-color-primary) !important;
+  --el-button-text-color: var(--el-color-primary) !important;
+  --el-button-hover-text-color: var(--el-color-white) !important;
+  --el-button-active-text-color: var(--el-color-white) !important;
+}
+
 /* nprogress适配ep的primary */
 #nprogress {
   & .bar {

src/style/sidebar.scss

@@ -23,16 +23,6 @@
     margin-left: $sideBarWidth;
     position: relative;
     background: #f0f2f5;
-    @media screen and (min-width: 150px) and (max-width: 420px) {
-      .app-main .el-scrollbar__view:first-child {
-        overflow-y: hidden;
-      }
-    }
-    @media screen and (min-width: 420px) {
-      .app-main .el-scrollbar__view:first-child {
-        overflow: hidden;
-      }
-    }
   }
 
   .fixed-header {

src/views/permission/page/index.vue

@@ -7,6 +7,7 @@ export default {
 <script setup lang="ts">
 import { ref, unref } from "vue";
 import { storageSession } from "/@/utils/storage";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 let purview = ref<string>(storageSession.getItem("info").username);
 
@@ -36,6 +37,11 @@ function changRole() {
         查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
       </p>
     </h4>
-    <el-button type="primary" @click="changRole">切换角色</el-button>
+    <el-button
+      type="primary"
+      @click="changRole"
+      :icon="useRenderIcon('user', { color: '#fff' })"
+      >切换角色</el-button
+    >
   </div>
 </template>