lisang
/
vue-next-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'admin-23.03.27:同步vue-next-admin-template分支版本内容'

This commit is contained in:
lyt 2023-03-27 00:36:44 +08:00
parent 9fe10aa2c0
commit 7eb71d74d4
60 changed files with 913 additions and 1089 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env
View File

@ -4,5 +4,8 @@ VITE_PORT = 8888
# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false
# 打包是否开启 cdn（源文件 utils/build.js），可自行修改
VITE_OPEN_CDN = false
# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
VITE_PUBLIC_PATH = /vue-next-admin-preview/
VITE_PUBLIC_PATH =

8
CHANGELOG.md
View File

@ -1,6 +1,12 @@
# <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">vue-next-admin-template-js（不带国际化） 更新日志</a>
🎉🎉🔥 `vue-next-admin-template-js` 基于 （vue-next-admin-template v2.4.31 版本） vue3.x 、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
🎉🎉🔥 `vue-next-admin-template-js` 基于 （vue-next-admin-template v2.4.32 版本） vue3.x 、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
## 2.4.32
`2023.03.26`
- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.32 版本内容，具体查看 master 分支 CHANGELOG.md
## 2.4.31

9
README.md
View File

@ -1,5 +1,5 @@
<div align="center">
<img src="https://img-blog.csdnimg.cn/9efd5420327a46b7bd6d93524a97229d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_14,color_FFFFFF,t_70,g_se,x_16">
<img src="https://i.hd-r.cn/6ce52e5724fae609444b5b48bdc4accb.png">
<p align="center">
<a href="https://v3.vuejs.org/" target="_blank">
<img src="https://img.shields.io/badge/vue.js-vue3.x-green" alt="vue">
@ -26,7 +26,7 @@
<img src="./src/assets/ccflowRightNextAdmin.png" width="50%" height="70px">
</a>
#### 🌈 介绍 基础版 js（不带国际化，基于 vue-next-admin-template V2.4.31 版，setup 语法糖）
#### 🌈 介绍 基础版 js（不带国际化，基于 vue-next-admin-template V2.4.32 版，setup 语法糖）
基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。
@ -94,6 +94,7 @@ cnpm run build
#### 💒 集成后端
- <a target="_blank" href="https://gitee.com/zuohuaijun/Admin.NET">@zuohuaijun Admin.NET</a>
- <a target="_blank" href="https://github.com/PandaGoAdmin/PandaX">@熊猫 PandaGoAdmin</a>
- <a target="_blank" href="https://toscode.gitee.com/GionConnection/gopro_free">@甜蜜蜜 GoPro 平台</a>
- <a target="_blank" href="https://gitee.com/GionConnection/niupi-free">@甜蜜蜜 NiuPi 平台</a>
@ -122,6 +123,10 @@ cnpm run build
- <a href="https://github.com/microsoft/TypeScript" target="_blank">typescript</a>
- <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
- <a href="https://pinia.vuejs.org/" target="_blank">pinia</a>
- <a href="https://github.com/js-cookie/js-cookie" target="_blank">js-cookie</a>
- <a href="https://github.com/mmf-fe/vite-plugin-cdn-import" target="_blank">vite-plugin-cdn-import</a>
- <a href="https://github.com/vbenjs/vite-plugin-compression" target="_blank">vite-plugin-compression</a>
- <a href="https://github.com/chenxch/vite-plugin-vue-setup-extend-plus" target="_blank">vite-plugin-vue-setup-extend-plus</a>
#### 💕 特别感谢

1609
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json
View File

@ -1,6 +1,6 @@
{
"name": "vue-next-admin-template-js",
"version": "2.4.31",
"version": "2.4.32",
"description": "vue3 vite next admin template js setup",
"author": "lyt_20201208",
"license": "MIT",
@ -12,8 +12,8 @@
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"axios": "^1.3.4",
"echarts": "^5.4.1",
"element-plus": "^2.2.36",
"echarts": "^5.4.2",
"element-plus": "^2.3.1",
"js-cookie": "^3.0.1",
"mitt": "^3.0.0",
"nprogress": "^0.2.0",
@ -23,19 +23,21 @@
"sortablejs": "^1.15.0",
"vue": "^3.2.47",
"vue-clipboard3": "^2.0.0",
"vue-demi": "^0.13.11",
"qs": "^6.11.1",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue": "^4.1.0",
"@vue/compiler-sfc": "^3.2.47",
"eslint": "^8.35.0",
"eslint-plugin-vue": "^9.9.0",
"prettier": "^2.8.4",
"sass": "^1.58.3",
"unplugin-auto-import": "^0.15.1",
"vite": "^4.1.4",
"vite-plugin-vue-setup-extend": "^0.4.0",
"eslint": "^8.36.0",
"eslint-plugin-vue": "^9.10.0",
"prettier": "^2.8.7",
"sass": "^1.60.0",
"vite": "^4.2.1",
"vite-plugin-cdn-import": "^0.3.5",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
"vue-eslint-parser": "^9.1.0"
},
"browserslist": [

2
src/App.vue
View File

@ -10,6 +10,8 @@
</template>
<script setup name="app">
import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { useRoute } from 'vue-router';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';

BIN
src/assets/ccflowRightNextAdmin.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 153 KiB

After

Width:  |  Height:  |  Size: 58 KiB

1
src/components/iconSelector/index.vue
View File

@ -50,6 +50,7 @@
</template>
<script setup name="iconSelector">
import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
import initIconfont from '/@/utils/getStyleSheets';
import '/@/theme/iconSelector.scss';

2
src/components/svgIcon/index.vue
View File

@ -9,6 +9,8 @@
</template>
<script setup name="svgIcon">
import { computed } from 'vue';
// 定义父组件传过来的值
const props = defineProps({
// svg 图标组件名字

22
src/layout/component/aside.vue
View File

@ -10,8 +10,8 @@
</template>
<script setup name="layoutAside">
import { defineAsyncComponent, reactive, computed, watch, onBeforeMount, ref } from 'vue';
import { storeToRefs } from 'pinia';
import pinia from '/@/stores/index';
import { useRoutesList } from '/@/stores/routesList';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
@ -55,8 +55,8 @@ const setCollapseStyle = computed(() => {
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
}
} else {
if (layout === 'columns') {
// 分栏布局，菜单收起时宽度给 1px
if (layout === 'columns' || layout === 'classic') {
// 分栏布局、经典布局，菜单收起时宽度给 1px，防止切换动画消失
if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
else return [asideBrColor, 'layout-aside-pc-220'];
} else {
@ -122,6 +122,8 @@ onBeforeMount(() => {
mittBus.on('setSendClassicChildren', (res) => {
let { layout, isClassicSplitMenu } = themeConfig.value;
if (layout === 'classic' && isClassicSplitMenu) {
// 经典布局分割菜单只要一项子级时，收起左侧导航菜单
res.children.length <= 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false);
state.menuList = [];
state.menuList = res.children;
}
@ -136,17 +138,13 @@ onBeforeMount(() => {
closeLayoutAsideMobileMode();
});
});
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(themeConfig.value, (val) => {
if (val.isShowLogoChange !== val.isShowLogo) {
if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
}
});
// 监听 pinia 值的变化，动态赋值给菜单中
watch(
pinia.state,
(val) => {
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
() => [themeConfig.value.isShowLogoChange, themeConfig.value.isShowLogo, themeConfig.value.layout, themeConfig.value.isClassicSplitMenu],
([isShowLogoChange, isShowLogo, layout, isClassicSplitMenu]) => {
if (isShowLogoChange !== isShowLogo) {
if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
}
if (layout === 'classic' && isClassicSplitMenu) return false;
setFilterRoutes();
},

36
src/layout/component/columnsAside.vue
View File

@ -45,9 +45,9 @@
</template>
<script setup name="layoutColumnsAside">
import { onBeforeRouteUpdate } from 'vue-router';
import { reactive, ref, onMounted, nextTick, watch, onUnmounted } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import { storeToRefs } from 'pinia';
import pinia from '/@/stores/index';
import { useRoutesList } from '/@/stores/routesList';
import { useThemeConfig } from '/@/stores/themeConfig';
import mittBus from '/@/utils/mitt';
@ -79,9 +79,22 @@ const setColumnsAsideMove = (k) => {
};
// 菜单高亮点击事件
const onColumnsAsideMenuClick = (v) => {
let { path, redirect } = v;
if (redirect) router.push(redirect);
else router.push(path);
const { path, redirect } = v;
if (redirect) {
onColumnsAsideDown(v.k);
if (route.path.startsWith(redirect)) mittBus.emit('setSendColumnsChildren', setSendChildren(redirect));
else router.push(redirect);
} else {
if (!v.children) {
router.push(path);
} else {
// 显示子级菜单
const resData = setSendChildren(path);
if (Object.keys(resData).length <= 0) return false;
onColumnsAsideDown(resData.item?.k);
mittBus.emit('setSendColumnsChildren', resData);
}
}
// 一个路由设置自动收起菜单
// https://gitee.com/lyt-top/vue-next-admin/issues/I6HW7H
if (!v.children) themeConfig.value.isCollapse = true;
@ -122,7 +135,10 @@ const setFilterRoutes = () => {
// 刷新时，初始化一个路由设置自动收起菜单
// https://gitee.com/lyt-top/vue-next-admin/issues/I6HW7H
resData.children.length <= 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false);
mittBus.emit('setSendColumnsChildren', resData);
// 延迟 500 毫秒更新，防止 aside.vue 组件 setSendColumnsChildren 还没有注册
setTimeout(() => {
mittBus.emit('setSendColumnsChildren', resData);
}, 500);
};
// 传送当前子级数据到菜单中
const setSendChildren = (path) => {
@ -180,10 +196,10 @@ onBeforeRouteUpdate((to) => {
});
// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
watch(
pinia.state,
(val) => {
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
[() => themeConfig.value.columnsAsideStyle, isColumnsMenuHover, isColumnsNavHover],
() => {
themeConfig.value.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
if (!isColumnsMenuHover.value && !isColumnsNavHover.value) {
state.liHoverIndex = null;
mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
} else {

1
src/layout/component/header.vue
View File

@ -5,6 +5,7 @@
</template>
<script setup name="layoutHeader">
import { defineAsyncComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';

2
src/layout/component/main.vue
View File

@ -14,6 +14,8 @@
</template>
<script setup name="layoutMain">
import { defineAsyncComponent, onMounted, computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';

1
src/layout/index.vue
View File

@ -3,6 +3,7 @@
</template>
<script setup name="layout">
import { onBeforeMount, onUnmounted, defineAsyncComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { Local } from '/@/utils/storage';

3
src/layout/lockScreen/index.vue
View File

@ -60,6 +60,7 @@
</template>
<script setup name="layoutLockScreen">
import { nextTick, onMounted, reactive, ref, onUnmounted } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { Local } from '/@/utils/storage';
import { storeToRefs } from 'pinia';
@ -212,7 +213,7 @@ onUnmounted(() => {
}
.layout-lock-screen-img {
@extend .layout-lock-screen-fixed;
background-image: url('https://img-blog.csdnimg.cn/afa9c317667f47d5bea34b85af45979e.png#pic_center');
background-image: url('https://i.hd-r.cn/e4a19d84364f185266666765ac21a5db.jpg');
background-size: 100% 100%;
z-index: 9999991;
}

1
src/layout/logo/index.vue
View File

@ -9,6 +9,7 @@
</template>
<script setup name="layoutLogo">
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import logoMini from '/@/assets/logo-mini.svg';

10
src/layout/main/classic.vue
View File

@ -12,6 +12,8 @@
</template>
<script setup name="layoutClassic">
import { defineAsyncComponent, computed, ref, watch, nextTick, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
@ -55,11 +57,13 @@ watch(
initScrollBarHeight();
}
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
// 监听 themeConfig isTagsview 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
themeConfig,
() => themeConfig.value.isTagsview,
() => {
updateScrollbar();
nextTick(() => {
updateScrollbar();
});
},
{
deep: true,

8
src/layout/main/columns.vue
View File

@ -12,6 +12,8 @@
</template>
<script setup name="layoutColumns">
import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
@ -58,9 +60,11 @@ watch(
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
themeConfig,
() => [themeConfig.value.isTagsview, themeConfig.value.isFixedHeader],
() => {
updateScrollbar();
nextTick(() => {
updateScrollbar();
});
},
{
deep: true,

8
src/layout/main/defaults.vue
View File

@ -11,6 +11,8 @@
</template>
<script setup name="layoutDefaults">
import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
@ -58,9 +60,11 @@ watch(
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
themeConfig,
() => [themeConfig.value.isTagsview, themeConfig.value.isFixedHeader],
() => {
updateScrollbar();
nextTick(() => {
updateScrollbar();
});
},
{
deep: true,

8
src/layout/main/transverse.vue
View File

@ -6,6 +6,8 @@
</template>
<script setup name="layoutTransverse">
import { defineAsyncComponent, ref, watch, nextTick, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
@ -45,9 +47,11 @@ watch(
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
themeConfig,
() => themeConfig.value.isTagsview,
() => {
updateScrollbar();
nextTick(() => {
updateScrollbar();
});
},
{
deep: true,

3
src/layout/navBars/breadcrumb/breadcrumb.vue
View File

@ -24,7 +24,8 @@
</template>
<script setup name="layoutBreadcrumb">
import { onBeforeRouteUpdate } from 'vue-router';
import { reactive, computed, onMounted } from 'vue';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { Local } from '/@/utils/storage';
import other from '/@/utils/other';
import { storeToRefs } from 'pinia';

2
src/layout/navBars/breadcrumb/index.vue
View File

@ -8,6 +8,8 @@
</template>
<script setup name="layoutBreadcrumbIndex">
import { defineAsyncComponent, computed, reactive, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { useThemeConfig } from '/@/stores/themeConfig';

2
src/layout/navBars/breadcrumb/search.vue
View File

@ -28,6 +28,8 @@
</template>
<script setup name="layoutBreadcrumbSearch">
import { reactive, ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';

1
src/layout/navBars/breadcrumb/setings.vue
View File

@ -421,6 +421,7 @@
</template>
<script setup name="layoutBreadcrumbSeting">
import { nextTick, onUnmounted, onMounted, computed, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';

2
src/layout/navBars/breadcrumb/user.vue
View File

@ -64,6 +64,8 @@
</template>
<script setup name="layoutBreadcrumbUser">
import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import screenfull from 'screenfull';
import { storeToRefs } from 'pinia';

2
src/layout/navBars/breadcrumb/userNews.vue
View File

@ -21,6 +21,8 @@
</template>
<script setup name="layoutBreadcrumbUserNews">
import { reactive } from 'vue';
// 定义变量内容
const state = reactive({
newsList: [

1
src/layout/navBars/index.vue
View File

@ -6,6 +6,7 @@
</template>
<script setup name="layoutNavBars">
import { defineAsyncComponent, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';

2
src/layout/navBars/tagsView/contextmenu.vue
View File

@ -30,6 +30,8 @@
</template>
<script setup name="layoutTagsViewContextmenu">
import { computed, reactive, onMounted, onUnmounted, watch } from 'vue';
// 定义父组件传过来的值
const props = defineProps({
dropdown: {

8
src/layout/navBars/tagsView/tagsView.vue
View File

@ -47,11 +47,11 @@
</template>
<script setup name="layoutTagsView">
import { onBeforeRouteUpdate } from 'vue-router';
import { defineAsyncComponent, reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, watch } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import Sortable from 'sortablejs';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import pinia from '/@/stores/index';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
@ -585,9 +585,9 @@ onBeforeRouteUpdate(async (to) => {
});
// 监听路由的变化，动态赋值给 tagsView
watch(
pinia.state,
() => tagsViewRoutes.value,
(val) => {
if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
if (val.length === state.tagsViewRoutesList.length) return false;
getTagsViewRoutes();
},
{

3
src/layout/navMenu/horizontal.vue
View File

@ -29,7 +29,8 @@
</template>
<script setup name="navMenuHorizontal">
import { onBeforeRouteUpdate } from 'vue-router';
import { defineAsyncComponent, reactive, computed, onBeforeMount } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { useThemeConfig } from '/@/stores/themeConfig';

1
src/layout/navMenu/subItem.vue
View File

@ -25,6 +25,7 @@
</template>
<script setup name="navMenuSubItem">
import { computed } from 'vue';
import other from '/@/utils/other';
// 定义父组件传过来的值

9
src/layout/navMenu/vertical.vue
View File

@ -31,7 +31,8 @@
</template>
<script setup name="navMenuVertical">
import { onBeforeRouteUpdate } from 'vue-router';
import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';
@ -90,9 +91,9 @@ onBeforeRouteUpdate((to) => {
});
// 设置菜单的收起/展开
watch(
themeConfig.value,
() => {
document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
() => themeConfig.value.isCollapse,
(isCollapse) => {
document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = isCollapse);
},
{
immediate: true,

3
src/layout/routerView/iframes.vue
View File

@ -21,6 +21,9 @@
</template>
<script setup name="layoutIframeView">
import { computed, watch, ref, nextTick } from 'vue';
import { useRoute } from 'vue-router';
// 定义父组件传过来的值
const props = defineProps({
// 刷新 iframe

2
src/layout/routerView/link.vue
View File

@ -14,6 +14,8 @@
</template>
<script setup name="layoutLinkView">
import { reactive, watch } from 'vue';
import { useRoute } from 'vue-router';
import { verifyUrl } from '/@/utils/toolsValidate';
// 定义变量内容

2
src/layout/routerView/parent.vue
View File

@ -14,6 +14,8 @@
</template>
<script setup name="layoutParentView">
import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
import { useThemeConfig } from '/@/stores/themeConfig';

1
src/layout/upgrade/index.vue
View File

@ -32,6 +32,7 @@
</template>
<script setup name="layoutUpgrade">
import { reactive, computed, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { Local } from '/@/utils/storage';

2
src/main.js
View File

@ -1,5 +1,5 @@
import { createApp } from 'vue';
import pinia from './stores/index';
import pinia from '/@/stores/index';
import App from '/@/App.vue';
import router from '/@/router';
import { directive } from '/@/directive/index';

1
src/stores/userInfo.js
View File

@ -63,6 +63,7 @@ export const useUserInfo = defineStore('userInfo', {
roles: defaultRoles,
authBtnList: defaultAuthBtnList,
};
Session.set('userInfo', userInfos);
resolve(userInfos);
}, 0);
});

2
src/theme/app.scss
View File

@ -141,6 +141,8 @@ body,
.layout-aside-pc-1 {
width: 1px !important;
transition: width 0.3s ease;
position: relative;
left: -1px;
}
// 手机端左侧导航样式
.layout-aside-mobile {

4
src/theme/media/layout.scss
View File

@ -7,6 +7,10 @@
.el-message-box {
width: 80% !important;
}
// 锁屏页
.layout-lock-screen-date-top {
display: none;
}
}
/* 页面宽度小于768px

125
src/utils/build.js Normal file
View File

@ -0,0 +1,125 @@
import importToCDN from 'vite-plugin-cdn-import';
/**
* 打包相关
* 注意 prodUrl：使用的是 jsdelivr 还是 unpkg。它们的 path 可能不一致
* 文章链接：https://blog.csdn.net/qq_34450741/article/details/129766676，使用的是 jsdelivr
* @description importToCDN https://github.com/mmf-fe/vite-plugin-cdn-import
* @description cdn 在线引入的 cdn 地址配置。path：https://www.jsdelivr.com/ || https://unpkg.com/
* @description external 打包时，过滤包导入。参考：https://rollupjs.org/configuration-options/#external
*/
export const buildConfig = {
cdn() {
return importToCDN({
prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
modules: [
// autoComplete('vue'),
// autoComplete('axios'),
{
name: 'vue',
var: 'Vue',
path: 'dist/vue.global.js',
},
{
name: 'vue-demi',
var: 'VueDemi',
path: 'lib/index.iife.js',
},
{
name: 'vue-router',
var: 'VueRouter',
path: 'dist/vue-router.global.js',
},
{
name: 'element-plus',
var: 'ElementPlus',
path: 'dist/index.full.js',
},
// {
// name: '@element-plus/icons-vue',
// var: 'ElementPlusIconsVue',
// path: 'dist/index.iife.min.js',
// },
// {
// name: 'echarts',
// var: 'echarts',
// path: 'dist/echarts.min.js',
// },
// {
// name: 'echarts-gl',
// var: 'echarts-gl',
// path: 'dist/echarts-gl.min.js',
// },
// {
// name: 'echarts-wordcloud',
// var: 'echarts-wordcloud',
// path: 'dist/echarts-wordcloud.min.js',
// },
// {
// name: 'vue-i18n',
// var: 'VueI18n',
// path: 'dist/vue-i18n.global.min.js',
// },
// {
// name: 'jsplumb',
// var: 'jsPlumb',
// path: 'dist/js/jsplumb.min.js',
// },
// {
// name: 'cropperjs',
// var: 'Cropper',
// path: 'dist/cropper.min.js',
// },
// {
// name: 'sortablejs',
// var: 'Sortable',
// path: 'Sortable.min.js',
// },
// {
// name: 'qrcodejs2-fixes',
// var: 'QRCode',
// path: 'qrcode.min.js',
// },
// {
// name: 'print-js',
// var: 'printJS',
// path: 'dist/print.min.js',
// },
// {
// name: '@wangeditor/editor',
// var: 'wangEditor',
// path: 'dist/index.min.js',
// },
// {
// name: '@wangeditor/editor-for-vue',
// var: 'WangEditorForVue',
// path: 'dist/index.min.js',
// },
// {
// name: 'vue-grid-layout',
// var: 'VueGridLayout',
// path: 'https://cdn.jsdelivr.net/npm/vue-grid-layout@3.0.0-beta1/dist/vue-grid-layout.umd.min.js',
// },
],
});
},
external: [
'vue',
// 'axios',
'vue-router',
'element-plus',
// '@element-plus/icons-vue',
// 'echarts',
// 'echarts-gl',
// 'echarts-wordcloud',
// 'vue-i18n',
// 'jsplumb',
// 'cropperjs',
// 'sortablejs',
// 'qrcodejs2-fixes',
// 'print-js',
// '@wangeditor/editor',
// '@wangeditor/editor-for-vue',
// 'vue-grid-layout',
],
};

2
src/utils/request.js
View File

@ -46,7 +46,7 @@ service.interceptors.response.use(
}
return Promise.reject(service.interceptors.response);
} else {
return response.data;
return res;
}
},
(error) => {

4
src/views/error/401.vue
View File

@ -13,9 +13,7 @@
</div>
</div>
<div class="right">
<img
src="https://img-blog.csdnimg.cn/3333f265772a4fa89287993500ecbf96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
/>
<img src="https://i.hd-r.cn/2cf0d2e192660eec23eb9d0655753e7d.png" />
</div>
</div>
</div>

6
src/views/error/404.vue
View File

@ -13,9 +13,7 @@
</div>
</div>
<div class="right">
<img
src="https://img-blog.csdnimg.cn/9eb1d85a417f4ed1ba7107f149ce3da1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
/>
<img src="https://i.hd-r.cn/1a0d90a6c1e8b0184c7299dda713effd.png" />
</div>
</div>
</div>
@ -23,6 +21,8 @@
</template>
<script setup name="notFound">
import { useRouter } from 'vue-router';
// 定义变量内容
const router = useRouter();

1
src/views/home/index.vue
View File

@ -66,6 +66,7 @@
</template>
<script setup name="home">
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';

2
src/views/login/component/account.vue
View File

@ -44,6 +44,8 @@
</template>
<script setup name="loginAccount">
import { reactive, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import Cookies from 'js-cookie';
import { storeToRefs } from 'pinia';

2
src/views/login/component/mobile.vue
View File

@ -32,6 +32,8 @@
</template>
<script setup name="loginMobile">
import { reactive } from 'vue';
// 定义变量内容
const state = reactive({
ruleForm: {

1
src/views/login/component/scan.vue
View File

@ -9,6 +9,7 @@
</template>
<script setup name="loginScan">
import { ref, onMounted, nextTick } from 'vue';
import QRCode from 'qrcodejs2-fixes';
// 定义变量内容

1
src/views/login/index.vue
View File

@ -43,6 +43,7 @@
</template>
<script setup name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';

2
src/views/system/dept/dialog.vue
View File

@ -68,6 +68,8 @@
</template>
<script setup name="systemDeptDialog">
import { reactive, ref } from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

1
src/views/system/dept/index.vue
View File

@ -52,6 +52,7 @@
</template>
<script setup name="systemDept">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件

2
src/views/system/dic/dialog.vue
View File

@ -64,6 +64,8 @@
</template>
<script setup name="systemDicDialog">
import { reactive, ref } from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

1
src/views/system/dic/index.vue
View File

@ -54,6 +54,7 @@
</template>
<script setup name="systemDic">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件

1
src/views/system/menu/dialog.vue
View File

@ -146,6 +146,7 @@
</template>
<script setup name="systemMenuDialog">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";

1
src/views/system/menu/index.vue
View File

@ -64,6 +64,7 @@
</template>
<script setup name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';

2
src/views/system/role/dialog.vue
View File

@ -51,6 +51,8 @@
</template>
<script setup name="systemRoleDialog">
import { reactive, ref } from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

1
src/views/system/role/index.vue
View File

@ -57,6 +57,7 @@
</template>
<script setup name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件

2
src/views/system/user/dialog.vue
View File

@ -89,6 +89,8 @@
</template>
<script setup name="systemUserDialog">
import { reactive, ref } from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

1
src/views/system/user/index.vue
View File

@ -60,6 +60,7 @@
</template>
<script setup name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件

31
vite.config.js
View File

@ -1,8 +1,9 @@
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
import viteCompression from 'vite-plugin-compression';
import { buildConfig } from './src/utils/build';
const pathResolve = (dir) => {
return resolve(__dirname, '.', dir);
@ -15,16 +16,13 @@ const alias = {
const viteConfig = defineConfig((mode) => {
const env = loadEnv(mode.mode, process.cwd());
return {
plugins: [
vue(),
vueSetupExtend(),
AutoImport({
imports: ['vue', 'vue-router'],
}),
],
plugins: [vue(), vueSetupExtend(), viteCompression(), JSON.parse(env.VITE_OPEN_CDN) ? buildConfig.cdn() : null],
root: process.cwd(),
resolve: { alias },
base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
optimizeDeps: {
exclude: ['vue-demi'],
},
server: {
host: '0.0.0.0',
port: env.VITE_PORT,
@ -44,15 +42,16 @@ const viteConfig = defineConfig((mode) => {
chunkSizeWarningLimit: 1500,
rollupOptions: {
output: {
entryFileNames: `assets/[name].[hash].js`,
chunkFileNames: `assets/[name].[hash].js`,
assetFileNames: `assets/[name].[hash].[ext]`,
compact: true,
manualChunks: {
vue: ['vue', 'vue-router', 'pinia'],
echarts: ['echarts'],
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
},
external: JSON.parse(env.VITE_OPEN_CDN) ? buildConfig.external : [],
},
},
css: { preprocessorOptions: { css: { charset: false } } },