Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
885cbf2d9f
  1. 1
      package.json
  2. 2
      pnpm-lock.yaml
  3. 16
      src/components/ReIcon/src/hooks.ts
  4. 2
      src/components/ReIcon/src/iconifyIconOffline.ts
  5. 18
      src/components/ReIcon/src/types.ts
  6. 13
      src/style/element-plus.scss
  7. 10
      src/style/sidebar.scss
  8. 8
      src/views/permission/page/index.vue

1
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",

2
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

16
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 {
/**
* fontawesome45+iconfontremixiconelement-plus的iconssvg
* @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
});
}
});

2
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";

18
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;
}

13
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 {

10
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 {

8
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>
Loading…
Cancel
Save