From 885cbf2d9fed46a5fcc71ece006f383747a63884 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Fri, 18 Feb 2022 11:52:12 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E5=AE=8C=E6=95=B4?= =?UTF-8?q?=E7=89=88=E5=88=86=E6=94=AF=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 2 ++ src/components/ReIcon/src/hooks.ts | 16 ++++++++++++---- src/components/ReIcon/src/iconifyIconOffline.ts | 2 ++ src/components/ReIcon/src/types.ts | 18 ++++++++++++++++++ src/style/element-plus.scss | 13 +++++++++++++ src/style/sidebar.scss | 10 ---------- src/views/permission/page/index.vue | 8 +++++++- 8 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 src/components/ReIcon/src/types.ts diff --git a/package.json b/package.json index e448982..e27edc9 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bee26bb..e1d2af4 100644 --- a/pnpm-lock.yaml +++ b/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.2_vue@3.2.31 element-resize-detector: 1.2.4 js-cookie: 3.0.1 diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts index bc9529f..e1eb17f 100644 --- a/src/components/ReIcon/src/hooks.ts +++ b/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 }); } }); diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index 701b670..8af99e9 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/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"; diff --git a/src/components/ReIcon/src/types.ts b/src/components/ReIcon/src/types.ts new file mode 100644 index 0000000..0c06ea4 --- /dev/null +++ b/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; +} diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss index 2bbeeb1..bd1547b 100644 --- a/src/style/element-plus.scss +++ b/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 { diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index 353dd9c..026394a 100644 --- a/src/style/sidebar.scss +++ b/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 { diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue index a6e07df..001434f 100644 --- a/src/views/permission/page/index.vue +++ b/src/views/permission/page/index.vue @@ -7,6 +7,7 @@ export default {