Browse Source

perf: 优化代码

i18n
xiaoxian521 2 years ago
parent
commit
3069785575
  1. 5
      README.en-US.md
  2. 5
      README.md
  3. 2
      src/layout/hooks/useDataThemeChange.ts
  4. 10
      src/layout/theme/index.ts
  5. 8
      src/style/sidebar.scss
  6. 5
      types/index.ts

5
README.en-US.md

@ -15,9 +15,8 @@ The Lite version is based on the shelf extracted from [vue-pure-admin](https://g
## Docs ## Docs
- [Click me to view the domestic documentation site](http://yiming_chang.gitee.io/pure-admin-doc)
- [Click me to view foreign document site 1](https://xiaoxian521.github.io/pure-admin-doc)
- [Click me to view foreign document site 2](https://pure-admin-doc.vercel.app)
- [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
- [Click me to view foreign document site](https://xiaoxian521.github.io/pure-admin-doc)
## Usage ## Usage

5
README.md

@ -15,9 +15,8 @@
## 配套文档 ## 配套文档
- [点我查看国内文档站](http://yiming_chang.gitee.io/pure-admin-doc)
- [点我查看国外文档站 1](https://xiaoxian521.github.io/pure-admin-doc)
- [点我查看国外文档站 2](https://pure-admin-doc.vercel.app)
- [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
- [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)
## 维护者 ## 维护者

2
src/layout/hooks/useDataThemeChange.ts

@ -69,7 +69,7 @@ export function useDataThemeChange() {
return new TinyColor(color).shade(10).toString(); return new TinyColor(color).shade(10).toString();
}; };
/** 设置ep主题色 */
/** 设置 `element-plus` 主题色 */
const setEpThemeColor = (color: string) => { const setEpThemeColor = (color: string) => {
useEpThemeStoreHook().setEpThemeColor(color); useEpThemeStoreHook().setEpThemeColor(color);
body.style.setProperty("--el-color-primary-active", shadeBgColor(color)); body.style.setProperty("--el-color-primary-active", shadeBgColor(color));

10
src/layout/theme/index.ts

@ -20,7 +20,6 @@ const themeColors = {
menuHover: "#4091f7", menuHover: "#4091f7",
subMenuBg: "#0f0303", subMenuBg: "#0f0303",
subMenuActiveBg: "#4091f7", subMenuActiveBg: "#4091f7",
navTextColor: "#fff",
menuText: "rgb(254 254 254 / 65%)", menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#002140", sidebarLogo: "#002140",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -33,7 +32,6 @@ const themeColors = {
menuHover: "#e0ebf6", menuHover: "#e0ebf6",
subMenuBg: "#fff", subMenuBg: "#fff",
subMenuActiveBg: "#e0ebf6", subMenuActiveBg: "#e0ebf6",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#fff", sidebarLogo: "#fff",
menuTitleHover: "#000", menuTitleHover: "#000",
@ -46,7 +44,6 @@ const themeColors = {
menuHover: "#e13c39", menuHover: "#e13c39",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#e13c39", subMenuActiveBg: "#e13c39",
navTextColor: "#red",
menuText: "rgb(254 254 254 / 65.1%)", menuText: "rgb(254 254 254 / 65.1%)",
sidebarLogo: "#42090c", sidebarLogo: "#42090c",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -59,7 +56,6 @@ const themeColors = {
menuHover: "#e85f33", menuHover: "#e85f33",
subMenuBg: "#0f0603", subMenuBg: "#0f0603",
subMenuActiveBg: "#e85f33", subMenuActiveBg: "#e85f33",
navTextColor: "#fff",
menuText: "rgb(254 254 254 / 65%)", menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#441708", sidebarLogo: "#441708",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -72,7 +68,6 @@ const themeColors = {
menuHover: "#f6da4d", menuHover: "#f6da4d",
subMenuBg: "#0f0603", subMenuBg: "#0f0603",
subMenuActiveBg: "#f6da4d", subMenuActiveBg: "#f6da4d",
navTextColor: "#fff",
menuText: "rgb(254 254 254 / 65%)", menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#443b05", sidebarLogo: "#443b05",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -85,7 +80,6 @@ const themeColors = {
menuHover: "#59bfc1", menuHover: "#59bfc1",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#59bfc1", subMenuActiveBg: "#59bfc1",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#053434", sidebarLogo: "#053434",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -98,7 +92,6 @@ const themeColors = {
menuHover: "#60ac80", menuHover: "#60ac80",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#60ac80", subMenuActiveBg: "#60ac80",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#112f21", sidebarLogo: "#112f21",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -111,7 +104,6 @@ const themeColors = {
menuHover: "#d84493", menuHover: "#d84493",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#d84493", subMenuActiveBg: "#d84493",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#3f0d29", sidebarLogo: "#3f0d29",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -124,7 +116,6 @@ const themeColors = {
menuHover: "#693ac9", menuHover: "#693ac9",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#693ac9", subMenuActiveBg: "#693ac9",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#1f0c38", sidebarLogo: "#1f0c38",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@ -147,7 +138,6 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
$menuHover: ${themeColors[key].menuHover} !default; $menuHover: ${themeColors[key].menuHover} !default;
$subMenuBg: ${themeColors[key].subMenuBg} !default; $subMenuBg: ${themeColors[key].subMenuBg} !default;
$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default; $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
$navTextColor: ${themeColors[key].navTextColor} !default;
$menuText: ${themeColors[key].menuText} !default; $menuText: ${themeColors[key].menuText} !default;
$sidebarLogo: ${themeColors[key].sidebarLogo} !default; $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
$menuTitleHover: ${themeColors[key].menuTitleHover} !default; $menuTitleHover: ${themeColors[key].menuTitleHover} !default;

8
src/style/sidebar.scss

@ -233,11 +233,9 @@
.search-container, .search-container,
/* 告警 */ /* 告警 */
.dropdown-badge, .dropdown-badge,
/* 全屏 */
.screen-full,
/* 国际化 */ /* 国际化 */
.globalization, .globalization,
/* 登录名 */
/* 用户名 */
.el-dropdown-link, .el-dropdown-link,
/* 设置 */ /* 设置 */
.set-icon { .set-icon {
@ -587,11 +585,9 @@ body[layout="vertical"] {
.search-container, .search-container,
/* 告警 */ /* 告警 */
.dropdown-badge, .dropdown-badge,
/* 全屏 */
.screen-full,
/* 国际化 */ /* 国际化 */
.globalization, .globalization,
/* 登录名 */
/* 用户名 */
.el-dropdown-link, .el-dropdown-link,
/* 设置 */ /* 设置 */
.set-icon { .set-icon {

5
types/index.ts

@ -1,3 +1,4 @@
import { type FunctionalComponent } from "vue";
import { type RouteComponent } from "vue-router"; import { type RouteComponent } from "vue-router";
export interface StorageConfigs { export interface StorageConfigs {
@ -64,7 +65,7 @@ export interface RouteChildrenConfigsTable {
/** 菜单名称(兼容国际化、非国际化,如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加) `必填` */ /** 菜单名称(兼容国际化、非国际化,如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加) `必填` */
title: string; title: string;
/** 菜单图标 `可选` */ /** 菜单图标 `可选` */
icon?: string;
icon?: string | FunctionalComponent;
/** 菜单名称右侧的额外图标,支持`fontawesome`、`iconfont`、`element-plus-icon` `可选` */ /** 菜单名称右侧的额外图标,支持`fontawesome`、`iconfont`、`element-plus-icon` `可选` */
extraIcon?: { extraIcon?: {
svg?: boolean; svg?: boolean;
@ -122,7 +123,7 @@ export interface RouteConfigsTable {
/** 菜单名称(兼容国际化、非国际化,如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加)`必填` */ /** 菜单名称(兼容国际化、非国际化,如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加)`必填` */
title: string; title: string;
/** 菜单图标 `可选` */ /** 菜单图标 `可选` */
icon?: string;
icon?: string | FunctionalComponent;
/** 是否在菜单中显示(默认`true`)`可选` */ /** 是否在菜单中显示(默认`true`)`可选` */
showLink?: boolean; showLink?: boolean;
/** 菜单升序排序,值越高排的越后(只针对顶级路由)`可选` */ /** 菜单升序排序,值越高排的越后(只针对顶级路由)`可选` */

Loading…
Cancel
Save