稍微调整components包

This commit is contained in:
valarchie
2022-11-21 23:02:05 +08:00
parent 44eda2f611
commit 8f02f67dd7
9 changed files with 60 additions and 25 deletions

View File

@@ -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;

View File

@@ -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');
};

View File

@@ -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 = []) {

View File

@@ -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) {

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;