hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.03.03:新增自动载入element-plus图标、优化主layout样式'

Browse Source
This commit is contained in:
lyt-Top 2021-03-03 20:41:08 +08:00
parent f614724d4c
commit 14f99cdb73
9 changed files with 34 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -114,6 +114,8 @@ 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://lyt-top.gitee.io/vue-admin-wonderful-next-preview/#/login" target="_blank">vue3.x vue-admin-wonderful-next 版本</a>，基于 vue3.x + CompositionAPI + typescript + vite + element plus。

6
src/api/menu/index.ts
View File

@ -1,13 +1,13 @@
import request from '/@/utils/request.ts'
/**
* 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-admin-wonderful-images/tree/master/next/menu
* 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-admin-wonderful-images/tree/master/next-admin/menu
* 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
*/
// 获取后端动态路由菜单(admin)
export function getMenuAdmin(params?: object) {
return request({
url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next/menu/adminMenu.json',
url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next-admin/menu/adminMenu.json',
method: 'get',
params,
});
@ -16,7 +16,7 @@ export function getMenuAdmin(params?: object) {
// 获取后端动态路由菜单(test)
export function getMenuTest(params?: object) {
return request({
url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next/menu/testMenu.json',
url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next-admin/menu/testMenu.json',
method: 'get',
params,
});

2
src/router/index.ts
View File

@ -384,7 +384,7 @@ export const dynamicRoutes = [
name: 'filtering',
component: () => import('/@/views/pages/filtering/index.vue'),
meta: {
title: '过滤筛选',
title: '过滤筛选组件',
isLink: '',
isHide: false,
isKeepAlive: true,

6
src/theme/app.scss
View File

@ -29,7 +29,7 @@ body,
.layout-container {
width: 100%;
height: 100%;
.el-aside {
.layout-aside {
background: var(--bg-menuBar);
box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
height: inherit;
@ -42,11 +42,11 @@ body,
overflow: hidden;
}
}
.el-header {
.layout-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
padding: 0 !important;
}
.el-main {
.layout-main {
padding: 0 !important;
overflow: hidden;
width: 100%;

4
src/views/layout/component/aside.vue
View File

@ -1,12 +1,12 @@
<template>
<el-aside :class="setCollapseWidth" v-if="clientWidth > 1000">
<el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" :class="setCollapseWidth" />
</el-scrollbar>
</el-aside>
<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
<el-aside class="w100 h100">
<el-aside class="layout-aside w100 h100">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" />

2
src/views/layout/component/header.vue
View File

@ -1,5 +1,5 @@
<template>
<el-header :height="setHeaderHeight">
<el-header class="layout-header" :height="setHeaderHeight">
<NavBarsIndex />
</el-header>
</template>

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

@ -1,5 +1,5 @@
<template>
<el-main>
<el-main class="layout-main">
<el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
v-show="!currentRouteMeta.isLink && !currentRouteMeta.isIframe"
:style="{minHeight: `calc(100vh - ${headerHeight}`}">

31
src/views/pages/element/index.vue
View File

@ -1,17 +1,19 @@
<template>
<div class="element-container">
<el-card shadow="hover" header="element 字体图标(自动载入)">
<el-card shadow="hover" header="element plus 字体图标(自动载入)">
<el-row class="iconfont-row">
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v,k) in sheetsIconList" :key="k">
<template v-for="(v,k) in sheetsIconList" :key="k">
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2">
<div class="iconfont-warp">
<div class="flex-margin">
<div class="iconfont-warp-value">
<i :class="v" class="iconfont"></i>
<i :class="v"></i>
</div>
<div class="iconfont-warp-label mt10">{{v}}</div>
</div>
</div>
</el-col>
</template>
</el-row>
</el-card>
</div>
@ -29,24 +31,15 @@ export default {
const initGetStyleSheets = () => {
nextTick(() => {
const styles = document.styleSheets;
let sheetsList = [];
for (let i = 0; i < styles.length; i++) {
for (let j = 0; j < styles[i].cssRules.length; j++) {
if (
styles[i].href &&
styles[i].href.indexOf("http://at.alicdn.com") > -1
) {
sheetsList.push(styles[i]);
}
}
for (let i = 0; i < sheetsList.length; i++) {
for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
if (
sheetsList[i].cssRules[j].selectorText &&
sheetsList[i].cssRules[j].selectorText.indexOf(".icon-") > -1
styles[i].cssRules[j].selectorText &&
styles[i].cssRules[j].selectorText.indexOf(".el-icon-") === 0
) {
state.sheetsIconList.push(
`${sheetsList[i].cssRules[j].selectorText
.substring(1, sheetsList[i].cssRules[j].selectorText.length)
`${styles[i].cssRules[j].selectorText
.substring(1, styles[i].cssRules[j].selectorText.length)
.replace(/\:\:before/gi, "")}`
);
}
@ -70,6 +63,10 @@ export default {
.iconfont-row {
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
.el-col:nth-last-child(1),
.el-col:nth-last-child(2) {
display: none;
}
.iconfont-warp {
text-align: center;
border-right: 1px solid #ebeef5;

5
src/views/pages/iocnfont/index.vue
View File

@ -31,10 +31,7 @@ export default {
const styles = document.styleSheets;
let sheetsList = [];
for (let i = 0; i < styles.length; i++) {
if (
styles[i].href &&
styles[i].href.indexOf("http://at.alicdn.com") > -1
) {
if (styles[i].href && styles[i].href.indexOf("at.alicdn.com") > -1) {
sheetsList.push(styles[i]);
}
}