稍微调整components包
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
|
||||
item.meta.title
|
||||
}}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
@@ -25,6 +27,7 @@ function getBreadcrumb() {
|
||||
|
||||
levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
|
||||
}
|
||||
|
||||
function isDashboard(route) {
|
||||
const name = route && route.name;
|
||||
if (!name) {
|
||||
@@ -32,6 +35,7 @@ function isDashboard(route) {
|
||||
}
|
||||
return name.trim() === 'Index';
|
||||
}
|
||||
|
||||
function handleLink(item) {
|
||||
const { redirect, path } = item;
|
||||
if (redirect) {
|
||||
@@ -48,10 +52,11 @@ watchEffect(() => {
|
||||
}
|
||||
getBreadcrumb();
|
||||
});
|
||||
|
||||
getBreadcrumb();
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<div style="padding: 0 15px" @click="toggleClick">
|
||||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
:class="{ 'is-active': isActive }"
|
||||
class="hamburger"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
>
|
||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
<path
|
||||
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
@@ -22,6 +24,7 @@ defineProps({
|
||||
});
|
||||
|
||||
const emit = defineEmits();
|
||||
|
||||
const toggleClick = () => {
|
||||
emit('toggleClick');
|
||||
};
|
||||
|
||||
@@ -43,11 +43,13 @@ function click() {
|
||||
headerSearchSelectRef.value && headerSearchSelectRef.value.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
headerSearchSelectRef.value && headerSearchSelectRef.value.blur();
|
||||
options.value = [];
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
function change(val) {
|
||||
const { path } = val;
|
||||
if (isHttp(path)) {
|
||||
@@ -64,6 +66,7 @@ function change(val) {
|
||||
show.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function initFuse(list) {
|
||||
fuse.value = new Fuse(list, {
|
||||
shouldSort: true,
|
||||
@@ -84,6 +87,7 @@ function initFuse(list) {
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Filter out the routes that can be displayed in the sidebar
|
||||
// And generate the internationalized title
|
||||
function generateRoutes(routes, basePath = '', prefixTitle = []) {
|
||||
|
||||
@@ -60,6 +60,7 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const emit = defineEmits();
|
||||
|
||||
const currentPage = computed({
|
||||
get() {
|
||||
return props.page;
|
||||
@@ -68,6 +69,7 @@ const currentPage = computed({
|
||||
emit('update:page', val);
|
||||
},
|
||||
});
|
||||
|
||||
const pageSize = computed({
|
||||
get() {
|
||||
return props.limit;
|
||||
@@ -76,6 +78,7 @@ const pageSize = computed({
|
||||
emit('update:limit', val);
|
||||
},
|
||||
});
|
||||
|
||||
function handleSizeChange(val) {
|
||||
if (currentPage.value * val > props.total) {
|
||||
currentPage.value = 1;
|
||||
@@ -85,6 +88,7 @@ function handleSizeChange(val) {
|
||||
scrollTo(0, 800);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCurrentChange(val) {
|
||||
emit('pagination', { page: val, limit: pageSize.value });
|
||||
if (props.autoScroll) {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const url = ref('http://doc.ruoyi.vip/ruoyi-vue');
|
||||
const url = ref('https://juejin.cn/column/7159946528827080734');
|
||||
|
||||
function goto() {
|
||||
window.open(url.value);
|
||||
@@ -5,7 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const url = ref('https://gitee.com/y_project/RuoYi-Vue');
|
||||
const url = ref('https://github.com/valarchie/AgileBoot-Back-End');
|
||||
|
||||
function goto() {
|
||||
window.open(url.value);
|
||||
@@ -6,7 +6,12 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
|
||||
<el-dropdown-item
|
||||
v-for="item of sizeOptions"
|
||||
:key="item.value"
|
||||
:disabled="size === item.value"
|
||||
:command="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
@@ -23,6 +28,7 @@ const size = computed(() => store.getters.size);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const sizeOptions = ref([
|
||||
{ label: '较大', value: 'large' },
|
||||
{ label: '默认', value: 'default' },
|
||||
@@ -41,6 +47,7 @@ function refreshView() {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleSetSize(size) {
|
||||
proxy.$modal.loading('正在设置布局大小,请稍候...');
|
||||
store.dispatch('app/setSize', size);
|
||||
@@ -48,7 +55,7 @@ function handleSetSize(size) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.size-icon--style {
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
|
||||
@@ -29,7 +29,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const props = defineProps({
|
||||
@@ -72,13 +71,14 @@ const valueId = computed({
|
||||
emit('update:value', val);
|
||||
},
|
||||
});
|
||||
|
||||
const valueTitle = ref('');
|
||||
const defaultExpandedKey = ref([]);
|
||||
|
||||
function initHandle() {
|
||||
nextTick(() => {
|
||||
const selectedValue = valueId.value;
|
||||
if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
|
||||
if (selectedValue !== null && typeof selectedValue !== 'undefined') {
|
||||
const node = proxy.$refs.selectTree.getNode(selectedValue);
|
||||
if (node) {
|
||||
valueTitle.value = node.data[props.objMap.label];
|
||||
@@ -90,6 +90,7 @@ function initHandle() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleNodeClick(node) {
|
||||
valueTitle.value = node[props.objMap.label];
|
||||
valueId.value = node[props.objMap.value];
|
||||
@@ -97,19 +98,23 @@ function handleNodeClick(node) {
|
||||
proxy.$refs.treeSelect.blur();
|
||||
selectFilterData('');
|
||||
}
|
||||
|
||||
function selectFilterData(val) {
|
||||
proxy.$refs.selectTree.filter(val);
|
||||
}
|
||||
|
||||
function filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data[props.objMap.label].indexOf(value) !== -1;
|
||||
}
|
||||
|
||||
function clearHandle() {
|
||||
valueTitle.value = '';
|
||||
valueId.value = '';
|
||||
defaultExpandedKey.value = [];
|
||||
clearSelected();
|
||||
}
|
||||
|
||||
function clearSelected() {
|
||||
const allNode = document.querySelectorAll('#tree-option .el-tree-node');
|
||||
allNode.forEach((element) => element.classList.remove('is-current'));
|
||||
@@ -124,8 +129,8 @@ watch(valueId, () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "@/assets/styles/variables.module.scss";
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<hamburger
|
||||
id="hamburger-container"
|
||||
:is-active="getters.sidebar.opened"
|
||||
class="hamburger-container"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
|
||||
|
||||
@@ -9,11 +14,11 @@
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
|
||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
||||
<project-git id="project-git" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
||||
<project-doc id="project-doc" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
@@ -55,8 +60,8 @@ import Hamburger from '@/components/Hamburger';
|
||||
import Screenfull from '@/components/Screenfull';
|
||||
import SizeSelect from '@/components/SizeSelect';
|
||||
import HeaderSearch from '@/components/HeaderSearch';
|
||||
import RuoYiGit from '@/components/RuoYi/Git';
|
||||
import RuoYiDoc from '@/components/RuoYi/Doc';
|
||||
import ProjectGit from '@/components/Project/Git';
|
||||
import ProjectDoc from '@/components/Project/Doc';
|
||||
|
||||
const store = useStore();
|
||||
const getters = computed(() => store.getters);
|
||||
@@ -83,11 +88,13 @@ function logout() {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index';
|
||||
});
|
||||
}).catch(() => { });
|
||||
})
|
||||
.then(() => {
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index';
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
const emits = defineEmits(['setLayout']);
|
||||
@@ -96,7 +103,7 @@ function setLayout() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
|
||||
Reference in New Issue
Block a user