feat: 优化菜单折叠按钮

master
绝弹 2024-01-11 22:28:13 +08:00
parent d70cd4688c
commit cdf9e3643a
5 changed files with 11 additions and 8 deletions

View File

@ -4,7 +4,7 @@ const arcoLevels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
export const arcoToUnoColor = (arcoColorName: string): { [id: string]: string } => { export const arcoToUnoColor = (arcoColorName: string): { [id: string]: string } => {
const colors = {}; const colors = {};
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
colors[unoLevels[i]] = `rgb(var(--${arcoColorName}-${arcoLevels[i]}))`; colors[unoLevels[i]] = `rgba(var(--${arcoColorName}-${arcoLevels[i]}), 1)`;
} }
return colors; return colors;
}; };

View File

@ -19,7 +19,6 @@ const menuStore = useMenuStore();
const hasAuth = computed(() => { const hasAuth = computed(() => {
return route.matched.every(item => { return route.matched.every(item => {
console.log('i', item);
const needAuth = item.meta.auth; const needAuth = item.meta.auth;
const userAuth = userStore.auth; const userAuth = userStore.auth;
if (needAuth?.includes('*')) { if (needAuth?.includes('*')) {

View File

@ -7,7 +7,7 @@
<a-link>需要帮助</a-link> <a-link>需要帮助</a-link>
<a-button size="mini" @click="router.push({ path: route.path, query: { s: Math.random() }, force: true })"> <a-button size="mini" @click="router.push({ path: route.path, query: { s: Math.random() }, force: true })">
<template #icon> <template #icon>
<i class="icon-park-outline-refresh"></i> <i class="icon-park-outline-redo"></i>
</template> </template>
</a-button> </a-button>
</div> </div>

View File

@ -57,10 +57,14 @@
<Menu /> <Menu />
</a-scrollbar> </a-scrollbar>
<template #trigger="{ collapsed }"> <template #trigger="{ collapsed }">
<i <div class="w-full h-full py-1 px-1" @click.stop>
:class="collapsed ? `icon-park-outline-expand-left` : 'icon-park-outline-expand-right'" <span
class="text-gray-400 text-base hover:text-gray-700" class="inline-block w-10 h-full rounded flex items-center justify-center hover:bg-gray-100 text-base text-gray-400"
></i> @click="() => (isCollapsed = !isCollapsed)"
>
<i :class="collapsed ? `icon-park-outline-expand-left` : 'icon-park-outline-expand-right'"></i>
</span>
</div>
</template> </template>
</a-layout-sider> </a-layout-sider>
<a-layout class="layout-content flex-1"> <a-layout class="layout-content flex-1">

View File

@ -32,7 +32,7 @@ const { component: PasswordModal, open } = useFormModal({
const usernameRender: TableColumnRender = ({ record }) => ( const usernameRender: TableColumnRender = ({ record }) => (
<div class="flex items-center gap-4 w-full overflow-hidden"> <div class="flex items-center gap-4 w-full overflow-hidden">
<a-avatar size={32}> <a-avatar size={32} class="bg-brand-500!">
{record.avatar?.startsWith('/') ? <img src={record.avatar} alt="" /> : record.nickname?.[0]} {record.avatar?.startsWith('/') ? <img src={record.avatar} alt="" /> : record.nickname?.[0]}
</a-avatar> </a-avatar>
<div class="w-full flex-1 overflow-hidden"> <div class="w-full flex-1 overflow-hidden">