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/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>