Browse Source

perf: 同步完整版代码

i18n
xiaoxian521 3 years ago
parent
commit
73e98814e2
  1. 14
      .env.staging
  2. 12
      build/plugins.ts
  3. 17
      package.json
  4. 542
      pnpm-lock.yaml
  5. 7
      src/layout/components/sidebar/sidebarItem.vue
  6. 5
      src/main.ts
  7. 6
      src/style/element-plus.scss
  8. 43
      src/style/sidebar.scss
  9. 35
      src/utils/debounce/index.ts
  10. 12
      vite.config.ts

14
.env.staging

@ -0,0 +1,14 @@
# 预发布也需要生产环境的行为
# https://cn.vitejs.dev/guide/env-and-mode.html#modes
NODE_ENV=production
VITE_PUBLIC_PATH = /
# 线上环境路由历史模式
VITE_ROUTER_HISTORY = "hash"
# 线上环境后端地址
VITE_PROXY_DOMAIN_REAL = ""
# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
VITE_LEGACY = false

12
build/plugins.ts

@ -7,7 +7,7 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
import WindiCSS from "vite-plugin-windicss";
import { viteMockServe } from "vite-plugin-mock";
import VueI18n from "@intlify/vite-plugin-vue-i18n";
import ElementPlus from "unplugin-element-plus/vite";
// import ElementPlus from "unplugin-element-plus/vite";
import { visualizer } from "rollup-plugin-visualizer";
import removeConsole from "vite-plugin-remove-console";
import themePreprocessorPlugin from "@pureadmin/theme";
@ -34,25 +34,19 @@ export function getPluginsList(command, VITE_LEGACY) {
themePreprocessorPlugin({
scss: {
multipleScopeVars: genScssMultipleScopeVars(),
// 默认取 multipleScopeVars[0].scopeName
defaultScopeName: "",
// 在生产模式是否抽取独立的主题css文件,extract为true以下属性有效
extract: true,
// 独立主题css文件的输出路径,默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
outputDir: "",
// 会选取defaultScopeName对应的主题css文件在html添加link
themeLinkTagId: "head",
// "head"||"head-prepend" || "body" ||"body-prepend"
themeLinkTagInjectTo: "head",
// 是否对抽取的css文件内对应scopeName的权重类名移除
removeCssScopeName: false,
// 可以自定义css文件名称的函数
customThemeCssFileName: scopeName => scopeName
removeCssScopeName: false
}
}),
// svg组件化支持
svgLoader(),
ElementPlus({}),
// ElementPlus({}),
// mock支持
viteMockServe({
mockPath: "mock",

17
package.json

@ -6,6 +6,7 @@
"dev": "cross-env --max_old_space_size=4096 vite",
"serve": "pnpm dev",
"build": "rimraf dist && cross-env vite build",
"build:staging": "rimraf dist && cross-env vite build --mode staging",
"report": "rimraf dist && cross-env vite build",
"preview": "vite preview",
"preview:build": "pnpm build && vite preview",
@ -27,14 +28,14 @@
"dependencies": {
"@ctrl/tinycolor": "^3.4.0",
"@pureadmin/components": "^1.0.6",
"@vueuse/core": "^8.2.6",
"@vueuse/core": "^8.3.1",
"@vueuse/motion": "^2.0.0-beta.12",
"@vueuse/shared": "^8.2.6",
"@vueuse/shared": "^8.3.1",
"animate.css": "^4.1.1",
"axios": "^0.26.1",
"css-color-function": "^1.3.3",
"dayjs": "^1.11.0",
"element-plus": "^2.1.9",
"element-plus": "^2.1.10",
"element-resize-detector": "^1.2.3",
"js-cookie": "^3.0.1",
"lodash": "^4.17.21",
@ -62,8 +63,8 @@
"@iconify-icons/fa-solid": "^1.2.2",
"@iconify-icons/ri": "^1.2.1",
"@iconify/vue": "^3.2.0",
"@intlify/vite-plugin-vue-i18n": "^3.3.1",
"@pureadmin/theme": "^0.0.1",
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
"@pureadmin/theme": "^1.1.0",
"@types/element-resize-detector": "1.1.3",
"@types/js-cookie": "^3.0.1",
"@types/lodash": "^4.14.180",
@ -79,7 +80,7 @@
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"autoprefixer": "^10.4.2",
"autoprefixer": "^10.4.5",
"cross-env": "7.0.3",
"eslint": "^8.8.0",
"eslint-plugin-prettier": "^4.0.0",
@ -96,7 +97,7 @@
"rimraf": "3.0.2",
"rollup": "^2.70.1",
"rollup-plugin-visualizer": "^5.6.0",
"sass": "^1.49.9",
"sass": "^1.50.1",
"stylelint": "^14.3.0",
"stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3",
@ -104,11 +105,9 @@
"stylelint-config-standard": "^24.0.0",
"stylelint-order": "^5.0.0",
"typescript": "^4.6.3",
"unplugin-element-plus": "^0.4.0",
"vite": "^2.9.5",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^0.0.7",
"vite-plugin-style-import": "1.4.1",
"vite-plugin-windicss": "^1.8.4",
"vite-svg-loader": "2.2.0",
"vue-eslint-parser": "^8.2.0",

542
pnpm-lock.yaml
File diff suppressed because it is too large
View File

7
src/layout/components/sidebar/sidebarItem.vue

@ -148,7 +148,7 @@ function resolvePath(routePath) {
:class="{ 'submenu-title-noDropdown': !isNest }"
:style="getNoDropdownStyle"
>
<div class="el-icon" v-show="props.item.meta.icon">
<div class="sub-menu-icon" v-show="props.item.meta.icon">
<component
:is="
useRenderIcon(
@ -216,10 +216,7 @@ function resolvePath(routePath) {
popper-append-to-body
>
<template #title>
<div
v-show="props.item.meta.icon"
:class="['el-icon', props.item.meta.icon]"
>
<div v-show="props.item.meta.icon" class="sub-menu-icon">
<component
:is="useRenderIcon(props.item.meta && props.item.meta.icon)"
/>

5
src/main.ts

@ -1,15 +1,16 @@
import App from "./App.vue";
import router from "./router";
import { setupStore } from "/@/store";
import ElementPlus from "element-plus";
import { getServerConfig } from "./config";
import { createApp, Directive } from "vue";
import { useI18n } from "../src/plugins/i18n";
import { MotionPlugin } from "@vueuse/motion";
import { useElementPlus } from "../src/plugins/element-plus";
import { injectResponsiveStorage } from "/@/utils/storage/responsive";
import "animate.css";
import "virtual:windi.css";
import "element-plus/dist/index.css";
// 导入公共样式
import "./style/index.scss";
import "@pureadmin/components/dist/index.css";
@ -41,6 +42,6 @@ getServerConfig(app).then(async config => {
await router.isReady();
injectResponsiveStorage(app, config);
setupStore(app);
app.use(MotionPlugin).use(useI18n).use(useElementPlus);
app.use(MotionPlugin).use(useI18n).use(ElementPlus);
app.mount("#app");
});

6
src/style/element-plus.scss

@ -53,12 +53,6 @@
--el-button-active-border-color: var(--el-color-primary) !important;
}
/* button--primary plain */
.el-button--primary.is-plain {
--el-button-active-bg-color: var(--el-color-primary) !important;
--el-button-active-border-color: var(--el-color-primary) !important;
}
/* nprogress适配ep的primary */
#nprogress {
& .bar {

43
src/style/sidebar.scss

@ -14,10 +14,19 @@
}
}
.sub-menu-icon {
vertical-align: middle;
margin-right: 5px;
font-size: 18px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.main-container {
height: 100vh;
min-height: 100%;
transition: margin-left 0.28s;
transition: margin-left 0.1s;
margin-left: $sideBarWidth;
position: relative;
background: #f0f2f5;
@ -29,7 +38,7 @@
right: 0;
z-index: 998;
width: calc(100% - 210px);
transition: width 0.28s;
transition: width 0.1s;
}
.main-hidden {
@ -49,7 +58,7 @@
}
.sidebar-container {
transition: width 0.28s;
transition: width 0.1s;
width: $sideBarWidth !important;
background: $menuBg;
height: 100%;
@ -489,8 +498,8 @@
> .el-sub-menu__title::before {
position: absolute;
top: 0;
left: 0;
width: 3px;
left: 2px;
width: 2px;
height: 100%;
background-color: $menuActiveBefore;
content: "";
@ -503,7 +512,7 @@
.el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
position: absolute;
top: 0;
width: 3px;
width: 2px;
height: 100%;
background-color: $menuActiveBefore;
content: "";
@ -527,7 +536,7 @@
.mobile {
.fixed-header {
width: 100% !important;
transition: width 0.28s;
transition: width 0.1s;
}
.main-container {
@ -535,7 +544,7 @@
}
.sidebar-container {
transition: transform 0.28s;
transition: transform 0.1s;
width: $sideBarWidth;
}
@ -572,7 +581,7 @@ body[layout="vertical"] {
.hideSidebar {
.fixed-header {
width: calc(100% - 54px);
transition: width 0.28s;
transition: width 0.1s;
}
.sidebar-container {
@ -606,17 +615,25 @@ body[layout="vertical"] {
}
}
.submenu-title-noDropdown {
background: transparent !important;
}
/* 有无子菜单 */
.el-sub-menu__title,
.el-menu-item [class^="el-icon"] {
right: 5px;
right: 2px;
}
.submenu-title-noDropdown {
background: transparent !important;
.el-menu-tooltip__trigger {
padding: 0 18px;
}
}
}
.sub-menu-icon {
width: 24px;
}
}
body[layout="horizontal"] {
@ -640,7 +657,7 @@ body[layout="mix"] {
.hideSidebar {
.fixed-header {
width: calc(100% - 54px);
transition: width 0.28s;
transition: width 0.1s;
}
.sidebar-container {

35
src/utils/debounce/index.ts

@ -1,12 +1,39 @@
import { unref } from "vue";
import type { Ref } from "vue";
type FunctionArgs<Args extends any[] = any[], Return = void> = (
...args: Args
) => Return;
type MaybeRef<T> = T | Ref<T>;
// 延迟函数
export const delay = (timeout: number) =>
new Promise(resolve => setTimeout(resolve, timeout));
// 防抖函数
export const debounce = (fn: () => Fn, timeout: number) => {
/**
*
* @param fn
* @param timeout
* @param immediate
* @returns
*/
export const debounce = <T extends FunctionArgs>(
fn: T,
timeout: MaybeRef<number> = 200,
immediate = false
) => {
let timmer: TimeoutHandle;
const wait = unref(timeout);
return () => {
timmer ? clearTimeout(timmer) : null;
timmer = setTimeout(fn, timeout);
timmer && clearTimeout(timmer);
if (immediate) {
if (!timmer) {
fn();
}
timmer = setTimeout(() => (timmer = null), wait);
} else {
timmer = setTimeout(fn, wait);
}
};
};

12
vite.config.ts

@ -78,22 +78,14 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
},
plugins: getPluginsList(command, VITE_LEGACY),
optimizeDeps: {
include: [
"pinia",
"vue-i18n",
"lodash-es",
"@vueuse/core",
"@iconify/vue",
"element-plus/lib/locale/lang/en",
"element-plus/lib/locale/lang/zh-cn"
],
include: ["pinia", "vue-i18n", "lodash-es", "@vueuse/core"],
exclude: ["@pureadmin/theme/dist/browser-utils"]
},
build: {
sourcemap: false,
brotliSize: false,
// 消除打包大小超过500kb警告
chunkSizeWarningLimit: 2000
chunkSizeWarningLimit: 4000
},
define: {
__INTLIFY_PROD_DEVTOOLS__: false,

Loading…
Cancel
Save