tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 代码规范检测问题修复

Browse Source 
Former-commit-id: 6e75bc91ce33ea9e7a17fbcb896f086f768896f4
This commit is contained in:
郝先瑞
2023-04-15 23:51:27 +08:00
parent 5b033246bc
commit 0605f89a67
24 changed files with 440 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/layout/components/AppMain.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { useTagsViewStore } from '@/store/modules/tagsView';
import { useTagsViewStore } from "@/store/modules/tagsView";
const tagsViewStore = useTagsViewStore();
</script>
@@ -18,10 +18,11 @@ const tagsViewStore = useTagsViewStore();
<style lang="scss" scoped>
.app-main {
position: relative;
width: 100%;
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;
background-color: var(--el-bg-color-page);
}
@@ -37,8 +38,8 @@ const tagsViewStore = useTagsViewStore();
}
.fixed-header + .app-main {
padding-top: 84px;
min-height: 100vh;
padding-top: 84px;
}
}
</style>

41
src/layout/components/Navbar.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';
import { useAppStore } from '@/store/modules/app';
import { useTagsViewStore } from '@/store/modules/tagsView';
import { useUserStore } from '@/store/modules/user';
import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "@/store/modules/app";
import { useTagsViewStore } from "@/store/modules/tagsView";
import { useUserStore } from "@/store/modules/user";
const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
@@ -20,10 +20,10 @@ function toggleSideBar() {
// 注销
function logout() {
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
userStore
.logout()
@@ -76,19 +76,19 @@ function logout() {
<template #dropdown>
<el-dropdown-menu>
<router-link to="/">
<el-dropdown-item>{{ $t('navbar.dashboard') }}</el-dropdown-item>
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/hxrui">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://gitee.com/haoxr">
<el-dropdown-item>{{ $t('navbar.gitee') }}</el-dropdown-item>
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
</a>
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
<el-dropdown-item>{{ $t('navbar.document') }}</el-dropdown-item>
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
</a>
<el-dropdown-item divided @click="logout">
{{ $t('navbar.logout') }}
{{ $t("navbar.logout") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
@@ -99,23 +99,24 @@ function logout() {
<style lang="scss" scoped>
.navbar {
background-color: #fff;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
background-color: #fff;
box-shadow: 0 0 1px #0003;
.navbar-setting-item {
display: inline-block;
width: 30px;
height: 50px;
line-height: 50px;
width: 30px;
display: inline-block;
cursor: pointer;
text-align: center;
color: #5a5e66;
text-align: center;
cursor: pointer;
&:hover {
background: rgba(249, 250, 251, 1);
background: rgb(249 250 251 / 100%);
}
}
}

111
src/layout/components/Settings/index.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { useSettingsStore } from '@/store/modules/settings';
import { useSettingsStore } from "@/store/modules/settings";
import IconEpSunny from '~icons/ep/sunny';
import IconEpMoon from '~icons/ep/moon';
import IconEpSunny from "~icons/ep/sunny";
import IconEpMoon from "~icons/ep/moon";
/**
* 暗黑模式
@@ -15,30 +15,30 @@ const toggleDark = () => useToggle(isDark);
* 切换布局
*/
function changeLayout(layout: string) {
settingsStore.changeSetting({ key: 'layout', value: layout });
window.document.body.setAttribute('layout', settingsStore.layout);
settingsStore.changeSetting({ key: "layout", value: layout });
window.document.body.setAttribute("layout", settingsStore.layout);
}
// 主题颜色
const themeColors = ref<string[]>([
'#409EFF',
'#304156',
'#11a983',
'#13c2c2',
'#6959CD',
'#f5222d'
"#409EFF",
"#304156",
"#11a983",
"#13c2c2",
"#6959CD",
"#f5222d",
]);
/**
* 切换主题颜色
*/
function changeThemeColor(color: string) {
document.documentElement.style.setProperty('--el-color-primary', color);
settingsStore.changeSetting({ key: 'layout', value: color });
document.documentElement.style.setProperty("--el-color-primary", color);
settingsStore.changeSetting({ key: "layout", value: color });
}
onMounted(() => {
window.document.body.setAttribute('layout', settingsStore.layout);
window.document.body.setAttribute("layout", settingsStore.layout);
});
</script>
@@ -133,6 +133,7 @@ onMounted(() => {
<style lang="scss" scoped>
.settings-container {
padding: 16px;
.layout {
display: flex;
flex-wrap: wrap;
@@ -141,67 +142,57 @@ onMounted(() => {
height: 50px;
&-item {
position: relative;
width: 18%;
height: 45px;
background: #f0f2f5;
position: relative;
overflow: hidden;
cursor: pointer;
background: #f0f2f5;
border-radius: 4px;
}
&-item.is-active {
border: 2px solid var(--el-color-primary);
}
&-left {
div {
&:nth-child(1) {
width: 30%;
height: 100%;
background: #1b2a47;
}
&:nth-child(2) {
width: 70%;
height: 30%;
top: 0;
right: 0;
background: #fff;
box-shadow: 0 0 1px #888;
position: absolute;
}
}
&-mix div:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&-top {
div {
&:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
}
&-mix div:nth-child(2) {
position: absolute;
bottom: 0;
left: 0;
width: 30%;
height: 70%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&-mix {
div {
&:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&-top div:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&:nth-child(2) {
width: 30%;
height: 70%;
bottom: 0;
left: 0;
background: #1b2a47;
box-shadow: 0 0 1px #888;
position: absolute;
}
}
&-left div:nth-child(1) {
width: 30%;
height: 100%;
background: #1b2a47;
}
&-left div:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 30%;
background: #fff;
box-shadow: 0 0 1px #888;
}
}
}

32
src/layout/components/TagsView/ScrollPane.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { useTagsViewStore, TagView } from '@/store/modules/tagsView';
import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
const tagAndTagSpacing = ref(4);
const { proxy } = getCurrentInstance() as any;
const emits = defineEmits(['scroll']);
const emits = defineEmits(["scroll"]);
const emitScroll = () => {
emits('scroll');
emits("scroll");
};
const tagsViewStore = useTagsViewStore();
@@ -16,10 +16,10 @@ const scrollWrapper = computed(
);
onMounted(() => {
scrollWrapper.value.addEventListener('scroll', emitScroll, true);
scrollWrapper.value.addEventListener("scroll", emitScroll, true);
});
onBeforeUnmount(() => {
scrollWrapper.value.removeEventListener('scroll', emitScroll);
scrollWrapper.value.removeEventListener("scroll", emitScroll);
});
function handleScroll(e: WheelEvent) {
@@ -47,14 +47,14 @@ function moveToTarget(currentTag: TagView) {
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
} else {
const tagListDom = document.getElementsByClassName('tags-item');
const tagListDom = document.getElementsByClassName("tags-item");
const currentIndex = tagsViewStore.visitedViews.findIndex(
item => item === currentTag
(item) => item === currentTag
);
let prevTag = null;
let nextTag = null;
for (const k in tagListDom) {
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
if (k !== "length" && Object.hasOwnProperty.call(tagListDom, k)) {
if (
(tagListDom[k] as any).dataset.path ===
tagsViewStore.visitedViews[currentIndex - 1].path
@@ -88,7 +88,7 @@ function moveToTarget(currentTag: TagView) {
}
defineExpose({
moveToTarget
moveToTarget,
});
</script>
@@ -105,19 +105,17 @@ defineExpose({
<style lang="scss" scoped>
.scroll-container {
position: relative;
width: 100%;
overflow: hidden;
white-space: nowrap;
.el-scrollbar__bar {
bottom: 0px;
bottom: 0;
}
.el-scrollbar__wrap {
height: 49px;
}
}
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
}
</style>

81
src/layout/components/TagsView/index.vue
View File

@@ -5,19 +5,19 @@ import {
ref,
watch,
onMounted,
ComponentInternalInstance
} from 'vue';
import { storeToRefs } from 'pinia';
ComponentInternalInstance,
} from "vue";
import { storeToRefs } from "pinia";
import path from 'path-browserify';
import path from "path-browserify";
import { useRoute, useRouter } from 'vue-router';
import { useRoute, useRouter } from "vue-router";
import { translateRouteTitleI18n } from '@/utils/i18n';
import { translateRouteTitleI18n } from "@/utils/i18n";
import { usePermissionStore } from '@/store/modules/permission';
import { useTagsViewStore, TagView } from '@/store/modules/tagsView';
import ScrollPane from './ScrollPane.vue';
import { usePermissionStore } from "@/store/modules/permission";
import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
import ScrollPane from "./ScrollPane.vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
@@ -42,30 +42,30 @@ watch(
},
{
//初始化立即执行
immediate: true
immediate: true,
}
);
const tagMenuVisible = ref(false); // 标签操作菜单显示状态
watch(tagMenuVisible, value => {
watch(tagMenuVisible, (value) => {
if (value) {
document.body.addEventListener('click', closeTagMenu);
document.body.addEventListener("click", closeTagMenu);
} else {
document.body.removeEventListener('click', closeTagMenu);
document.body.removeEventListener("click", closeTagMenu);
}
});
function filterAffixTags(routes: any[], basePath = '/') {
function filterAffixTags(routes: any[], basePath = "/") {
let tags: TagView[] = [];
routes.forEach(route => {
routes.forEach((route) => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path);
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta }
meta: { ...route.meta },
});
}
@@ -123,7 +123,7 @@ function isFirstView() {
return (
(selectedTag.value as TagView).fullPath ===
tagsViewStore.visitedViews[1].fullPath ||
(selectedTag.value as TagView).fullPath === '/index'
(selectedTag.value as TagView).fullPath === "/index"
);
} catch (err) {
return false;
@@ -145,7 +145,7 @@ function refreshSelectedTag(view: TagView) {
tagsViewStore.delCachedView(view);
const { fullPath } = view;
nextTick(() => {
router.replace({ path: '/redirect' + fullPath }).catch(err => {
router.replace({ path: "/redirect" + fullPath }).catch((err) => {
console.warn(err);
});
});
@@ -158,11 +158,11 @@ function toLastView(visitedViews: TagView[], view?: any) {
} else {
// now the default is to redirect to the home page if there is no tags-view,
// you can adjust it according to your needs.
if (view.name === 'Dashboard') {
if (view.name === "Dashboard") {
// to reload home page
router.replace({ path: '/redirect' + view.fullPath });
router.replace({ path: "/redirect" + view.fullPath });
} else {
router.push('/');
router.push("/");
}
}
}
@@ -210,7 +210,7 @@ function closeAllTags(view: TagView) {
function openTagMenu(tag: TagView, e: MouseEvent) {
const menuMinWidth = 105;
console.log('test', proxy?.$el);
console.log("test", proxy?.$el);
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = proxy?.$el.offsetWidth; // container width
@@ -300,18 +300,19 @@ onMounted(() => {
<style lang="scss" scoped>
.tags-container {
height: 34px;
width: 100%;
border: 1px solid var(--el-border-color-light);
box-shadow: 0px 1px 1px var(--el-box-shadow-light);
height: 34px;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
box-shadow: 0 1px 1px var(--el-box-shadow-light);
.tags-item {
display: inline-block;
padding: 3px 8px;
margin: 4px 0 0 5px;
font-size: 12px;
cursor: pointer;
border: 1px solid var(--el-border-color-light);
padding: 3px 8px;
font-size: 12px;
margin: 4px 0 0 5px;
&:first-of-type {
margin-left: 15px;
@@ -326,46 +327,44 @@ onMounted(() => {
}
&.active {
background-color: var(--el-color-primary);
color: #fff;
background-color: var(--el-color-primary);
border-color: var(--el-color-primary);
&::before {
content: '';
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
}
.tags-item-close {
&:hover {
background: rgb(0 0 0 / 0.16);
}
content: "";
background: #fff;
border-radius: 50%;
}
}
&-close {
border-radius: 100%;
&:hover {
color: #fff;
background: rgb(0 0 0 / 0.16);
background: rgb(0 0 0 / 16%);
}
}
}
}
.tag-menu {
background: var(--el-bg-color-overlay);
z-index: 99;
position: absolute;
border-radius: 4px;
z-index: 99;
font-size: 12px;
background: var(--el-bg-color-overlay);
border-radius: 4px;
box-shadow: var(--el-box-shadow-light);
li {
padding: 8px 16px;
cursor: pointer;
&:hover {
background: var(--el-fill-color-light);
}