mws/mws.frontend.vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update UI

Browse Source
This commit is contained in:
namdh
2026-08-24 08:07:23 +07:00
parent d7e0d81462
commit 8fe5e44f52
41 changed files with 3117 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/MainLayout.vue
+113 -45
View File
@@ -1,27 +1,40 @@
<template>
<div
class="flex h-dvh flex-col lg:grid"
:class="sidebarOpen ? 'lg:grid-cols-[250px_1fr]' : 'lg:grid-cols-1'"
>
<div
class="flex h-dvh flex-col lg:grid"
:class="sidebarOpen ? 'lg:grid-cols-[236px_1fr]' : 'lg:grid-cols-1'"
>
<div
v-if="sidebarOpen"
class="fixed inset-0 z-30 bg-black/40 lg:hidden"
class="fixed inset-0 z-30 bg-slate-950/60 backdrop-blur-sm lg:hidden"
@click="sidebarOpen = false"
></div>
<aside
class="fixed inset-y-0 left-0 z-40 flex w-[250px] transform flex-col gap-2 bg-slate-800 p-4 text-slate-200 transition-transform duration-200 lg:static"
class="fixed inset-y-0 left-0 z-40 flex w-[236px] transform flex-col border-r px-3 py-4 transition-transform duration-200 lg:static"
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
style="background: var(--panel); border-color: var(--hairline)"
>
<div class="mb-4 flex items-center justify-between text-xl font-bold text-white">
<div class="flex items-center gap-2">
<i class="pi pi-briefcase"></i>
MWS
</div>
<button class="lg:hidden" aria-label="Close menu" @click="sidebarOpen = false">
<i class="pi pi-times text-lg"></i>
<div class="mb-5 flex items-center justify-between px-2">
<router-link to="/dashboard" class="flex items-center gap-2.5">
<span
class="grid h-8 w-8 place-items-center rounded-[10px] font-display text-[15px] font-extrabold text-white"
style="background: var(--primary)"
>M</span
>
<span class="font-display text-[15px] font-extrabold tracking-[-0.01em]" style="color: var(--ink)">
Workspace
</span>
</router-link>
<button
class="text-slate-400 transition-colors hover:text-slate-900 dark:hover:text-white lg:hidden"
aria-label="Close menu"
@click="sidebarOpen = false"
>
<i class="pi pi-times text-base"></i>
</button>
</div>
<nav class="flex flex-col gap-1">
<nav class="flex flex-col gap-0.5">
<router-link
v-for="item in visibleNavItems"
:key="item.key"
@@ -35,45 +48,76 @@
<i class="pi pi-cog"></i> Settings
</router-link>
</nav>
<div class="flex-1"></div>
<div class="flex items-center gap-2 text-slate-300">
<Avatar :label="initials" style="background: #3b82f6; color: #fff" size="normal" />
<span>{{ auth.user?.displayName ?? auth.user?.username }}</span>
</div>
</aside>
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
<div class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-2.5 dark:border-slate-800 dark:bg-slate-900 lg:px-6">
<div class="flex items-center gap-2">
<header
class="flex items-center justify-between gap-3 border-b px-4 py-2.5 lg:px-6"
style="background: var(--panel); border-color: var(--hairline)"
>
<div class="flex min-w-0 items-center gap-2">
<Button
icon="pi pi-bars"
rounded
text
severity="secondary"
:aria-label="sidebarOpen ? 'Close menu' : 'Open menu'"
@click="sidebarOpen = !sidebarOpen"
/>
<span class="truncate text-slate-500 dark:text-slate-400">{{ currentProject?.name ?? 'My Workspace' }}</span>
<nav class="flex min-w-0 items-center gap-1.5 text-[13px]" aria-label="Breadcrumb">
<span class="shrink-0 font-medium" style="color: var(--ink-muted)">
{{ pageTitle }}
</span>
<template v-if="currentProject">
<span style="color: var(--ink-muted)">/</span>
<router-link
:to="{ name: 'project-overview', params: { id: currentProject.id } }"
class="truncate font-medium transition-colors hover:text-slate-900 dark:hover:text-white"
style="color: var(--ink-muted)"
>
{{ currentProject.name }}
</router-link>
</template>
</nav>
</div>
<div class="flex items-center gap-1">
<div class="flex min-w-0 items-center gap-2">
<span class="hidden shrink-0 text-[13px] font-semibold sm:block" style="color: var(--ink)">
Welcome back, {{ auth.user?.displayName ?? auth.user?.username }}
</span>
<Button
:icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
rounded
text
severity="secondary"
:aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
@click="theme.toggle"
/>
<Menu ref="menu" :model="menuItems" popup />
<Button
icon="pi pi-ellipsis-v"
rounded
text
aria-label="Options"
<button
class="flex w-auto items-center gap-2.5 rounded-xl border px-2.5 py-1.5 text-left transition-colors hover:bg-slate-50 dark:hover:bg-white/5"
style="border-color: var(--hairline)"
aria-haspopup="true"
@click="toggleMenu"
/>
</div>
</div>
<main class="flex-1 overflow-auto p-4 lg:p-6">
<router-view />
>
<Avatar :label="initials" :style="{ background: 'var(--primary)', color: '#fff' }" size="normal" />
<span class="hidden min-w-0 sm:block">
<span class="block truncate text-[13px] font-semibold" style="color: var(--ink)">
{{ auth.user?.displayName ?? auth.user?.username }}
</span>
<span class="block truncate text-[11px]" style="color: var(--ink-muted)">
@{{ auth.user?.username }}
</span>
</span>
</button>
</div>
<Menu ref="menu" :model="menuItems" popup />
</header>
<main class="flex-1 overflow-auto">
<div class="mx-auto h-full w-full max-w-[1280px] p-4 sm:p-6 lg:px-8 lg:py-7">
<router-view />
</div>
</main>
</div>
</div>
@@ -88,11 +132,11 @@ import type { Project } from '../types'
const auth = useAuthStore()
const route = useRoute()
const menu = ref()
const sidebarOpen = ref(false)
const theme = useTheme()
const desktopMq = window.matchMedia('(min-width: 1024px)')
const isDesktop = ref(desktopMq.matches)
const sidebarOpen = ref(isDesktop.value)
desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
function handleNavClick() {
@@ -102,11 +146,12 @@ function handleNavClick() {
const navItems = [
{ key: 'dashboard', label: 'Dashboard', icon: 'pi pi-home', to: '/dashboard' },
{ key: 'projects', label: 'Projects', icon: 'pi pi-folder-open', to: '/projects' },
{ key: 'accounts', label: 'Accounts', icon: 'pi pi-users', to: '/accounts' },
{ key: 'roles', label: 'Roles', icon: 'pi pi-shield', to: '/roles' },
{ key: 'users', label: 'Users', icon: 'pi pi-users', to: '/users' },
]
const visibleNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
const pageTitle = computed(() => (route.meta.title as string | undefined) ?? 'Projects')
const currentProject = ref<Project | null>(null)
async function loadCurrentProject(id: string | string[]) {
@@ -142,6 +187,7 @@ const menuItems = computed(() => [
{
label: auth.user?.displayName ?? auth.user?.username,
items: [
{ label: 'Profile', icon: 'pi pi-user', command: () => router.push('/profile') },
{
label: 'Logout',
icon: 'pi pi-sign-out',
@@ -154,6 +200,8 @@ const menuItems = computed(() => [
},
])
const router = useRouter()
function toggleMenu(event: Event) {
menu.value?.toggle(event)
}
@@ -161,22 +209,42 @@ function toggleMenu(event: Event) {
<style scoped>
.nav-link {
position: relative;
display: flex;
cursor: pointer;
align-items: center;
gap: 0.625rem;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
gap: 0.65rem;
border-radius: 12px;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
color: #cbd5e1;
color: var(--ink-muted);
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link i {
font-size: 0.9rem;
}
.nav-link:hover {
background-color: #334155;
color: #fff;
background-color: var(--primary-soft);
color: var(--ink);
}
.nav-link.router-link-active {
background-color: #3b82f6;
color: #fff;
background-color: var(--primary-soft);
color: var(--primary);
font-weight: 600;
}
.app-dark .nav-link.router-link-active {
color: #9ba6f8;
}
/* Active marker: a magenta rail, the one place the second accent shows in the shell */
.nav-link.router-link-active::before {
content: '';
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 3px;
border-radius: 999px;
background: var(--magenta);
}
</style>
src/layouts/ProjectLayout.vue
+44 -20
View File
@@ -1,24 +1,48 @@
<template>
<div class="project-layout">
<div class="mb-5 flex gap-1 overflow-x-auto border-b border-slate-200 dark:border-slate-700">
<router-link
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-exact-active]:border-blue-500 [&.router-link-exact-active]:text-blue-500"
:to="{ name: 'project-overview' }"
>Overview</router-link>
<router-link
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
:to="{ name: 'documents' }"
>Documents</router-link>
<router-link
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
:to="{ name: 'tasks' }"
>Tasks</router-link>
<router-link
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
:to="{ name: 'members' }"
>Members</router-link>
</div>
<div class="flex h-full min-h-0 flex-col">
<nav class="mb-5 flex shrink-0 gap-1 overflow-x-auto border-b pb-px" style="border-color: var(--hairline)">
<router-link class="tab tab-exact" :to="{ name: 'project-overview' }">Overview</router-link>
<router-link class="tab" :to="{ name: 'documents' }">Documents</router-link>
<router-link class="tab" :to="{ name: 'tasks' }">Tasks</router-link>
<router-link class="tab" :to="{ name: 'members' }">Members</router-link>
</nav>
<router-view />
<div class="min-h-0 flex-1">
<router-view />
</div>
</div>
</template>
<style scoped>
.tab {
position: relative;
white-space: nowrap;
padding: 0.5rem 0.9rem 0.7rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-muted);
transition: color 0.15s ease;
}
.tab:hover {
color: var(--ink);
}
.tab.router-link-active:not(.tab-exact),
.tab-exact.router-link-exact-active {
color: var(--primary);
font-weight: 600;
}
.app-dark .tab.router-link-active:not(.tab-exact),
.app-dark .tab-exact.router-link-exact-active {
color: #9ba6f8;
}
.tab.router-link-active:not(.tab-exact)::after,
.tab-exact.router-link-exact-active::after {
content: '';
position: absolute;
inset-inline: 0.4rem;
bottom: -1px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
</style>