refactor: натравил форматтер на весь фронт
This commit is contained in:
@@ -18,7 +18,9 @@ const lectures = useLecturesStore()
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
const enrollmentLimitModalOpen = ref(false)
|
||||
const addToast = inject('addToast') as ((message: string, type?: 'success' | 'error' | 'info') => void) | undefined
|
||||
const addToast = inject('addToast') as
|
||||
| ((message: string, type?: 'success' | 'error' | 'info') => void)
|
||||
| undefined
|
||||
|
||||
const user = computed(() => auth.user!)
|
||||
|
||||
@@ -26,21 +28,26 @@ const userMetaLine = computed(() => {
|
||||
const parts: string[] = []
|
||||
if (user.value.institute) parts.push(user.value.institute)
|
||||
if (user.value.direction) parts.push(user.value.direction)
|
||||
if (Number.isFinite(user.value.year) && (user.value.year as number) > 0) parts.push(`${user.value.year} курс`)
|
||||
if (Number.isFinite(user.value.year) && (user.value.year as number) > 0)
|
||||
parts.push(`${user.value.year} курс`)
|
||||
return parts.join(' · ')
|
||||
})
|
||||
const nextLecture = computed(() => lectures.registeredLectures[0] ?? lectures.all[0])
|
||||
const recommended = computed(() =>
|
||||
lectures.all.filter(l => !lectures.registeredIds.includes(l.id)).slice(0, 3)
|
||||
lectures.all.filter((l) => !lectures.registeredIds.includes(l.id)).slice(0, 3),
|
||||
)
|
||||
const achievements = computed(() => userStore.achievements.filter(a => a.unlocked).slice(0, 3))
|
||||
const achievements = computed(() => userStore.achievements.filter((a) => a.unlocked).slice(0, 3))
|
||||
const reminders = computed(() => userStore.notifications.slice(0, 3))
|
||||
const currentLevelXp = computed(() => user.value.currentLevelXp ?? 0)
|
||||
const nextLevelXp = computed(() => user.value.nextLevelXp)
|
||||
const userXp = computed(() => user.value.xp ?? 0)
|
||||
const hasLevelProgress = computed(() => nextLevelXp.value !== undefined)
|
||||
const hasNextLevel = computed(() => typeof nextLevelXp.value === 'number' && nextLevelXp.value > currentLevelXp.value)
|
||||
const levelProgressMax = computed(() => hasNextLevel.value ? nextLevelXp.value! - currentLevelXp.value : 1)
|
||||
const hasNextLevel = computed(
|
||||
() => typeof nextLevelXp.value === 'number' && nextLevelXp.value > currentLevelXp.value,
|
||||
)
|
||||
const levelProgressMax = computed(() =>
|
||||
hasNextLevel.value ? nextLevelXp.value! - currentLevelXp.value : 1,
|
||||
)
|
||||
const levelProgress = computed(() => {
|
||||
if (!hasLevelProgress.value) return 0
|
||||
if (!hasNextLevel.value) return 1
|
||||
@@ -49,10 +56,14 @@ const levelProgress = computed(() => {
|
||||
const levelProgressLabel = computed(() =>
|
||||
!hasLevelProgress.value
|
||||
? `Уровень ${user.value.level}`
|
||||
: hasNextLevel.value ? `Прогресс до уровня ${user.value.level + 1}` : 'Максимальный уровень'
|
||||
: hasNextLevel.value
|
||||
? `Прогресс до уровня ${user.value.level + 1}`
|
||||
: 'Максимальный уровень',
|
||||
)
|
||||
const levelProgressText = computed(() =>
|
||||
hasNextLevel.value ? `${levelProgress.value} / ${levelProgressMax.value} XP` : `${userXp.value} XP`
|
||||
hasNextLevel.value
|
||||
? `${levelProgress.value} / ${levelProgressMax.value} XP`
|
||||
: `${userXp.value} XP`,
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -81,9 +92,7 @@ async function registerLecture(id: string) {
|
||||
<div class="dashboard page-content">
|
||||
<div class="dashboard-welcome">
|
||||
<div>
|
||||
<h1 class="page-title">
|
||||
Добрый день, {{ formatUserName(user.name) }}!
|
||||
</h1>
|
||||
<h1 class="page-title">Добрый день, {{ formatUserName(user.name) }}!</h1>
|
||||
<p v-if="userMetaLine" class="text-secondary">{{ userMetaLine }}</p>
|
||||
</div>
|
||||
<div class="quick-actions">
|
||||
@@ -113,12 +122,18 @@ async function registerLecture(id: string) {
|
||||
</div>
|
||||
</div>
|
||||
<div class="next-actions">
|
||||
<button class="btn-primary" @click="router.push(`/lecture/${nextLecture.id}`)">Открыть</button>
|
||||
<button class="btn-primary" @click="router.push(`/lecture/${nextLecture.id}`)">
|
||||
Открыть
|
||||
</button>
|
||||
<button class="btn-secondary">Добавить в календарь</button>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
<EmptyState v-else-if="!lectures.loading" title="Пока нет лекций" subtitle="Каталог пуст или данные ещё не синхронизированы." />
|
||||
<EmptyState
|
||||
v-else-if="!lectures.loading"
|
||||
title="Пока нет лекций"
|
||||
subtitle="Каталог пуст или данные ещё не синхронизированы."
|
||||
/>
|
||||
|
||||
<GlassCard>
|
||||
<div class="xp-section">
|
||||
@@ -140,7 +155,11 @@ async function registerLecture(id: string) {
|
||||
</h2>
|
||||
<button class="link-btn" @click="router.push('/catalog')">Все лекции →</button>
|
||||
</div>
|
||||
<EmptyState v-if="lectures.loading" title="Загружаем рекомендации" subtitle="Получаем данные с backend." />
|
||||
<EmptyState
|
||||
v-if="lectures.loading"
|
||||
title="Загружаем рекомендации"
|
||||
subtitle="Получаем данные с backend."
|
||||
/>
|
||||
<div v-else class="cards-grid">
|
||||
<LectureCard
|
||||
v-for="l in recommended"
|
||||
@@ -195,7 +214,11 @@ async function registerLecture(id: string) {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard { display: flex; flex-direction: column; gap: 24px; }
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.dashboard-welcome {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -203,25 +226,78 @@ async function registerLecture(id: string) {
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.next-lecture { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
||||
.next-title { font-size: 18px; font-weight: 700; margin: 6px 0; }
|
||||
.next-meta { display: flex; flex-direction: column; gap: 4px; color: var(--color-text-secondary); font-size: 13px; }
|
||||
.meta-line { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.meta-icon { color: var(--color-text-secondary); }
|
||||
.next-actions { display: flex; gap: 10px; align-items: flex-start; }
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.next-lecture {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.next-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.next-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.meta-line {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.meta-icon {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.next-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.xp-section { display: flex; flex-direction: column; gap: 10px; }
|
||||
.xp-header { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
|
||||
.xp-val { color: var(--color-text-secondary); }
|
||||
.section-header { display: flex; align-items: center; justify-content: space-between; }
|
||||
.title-with-icon { display: inline-flex; align-items: center; gap: 8px; }
|
||||
.title-icon { color: var(--color-text); }
|
||||
.inline-icon { color: var(--color-text); vertical-align: middle; }
|
||||
.xp-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.xp-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.xp-val {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.title-with-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.title-icon {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.inline-icon {
|
||||
color: var(--color-text);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
@@ -236,15 +312,42 @@ async function registerLecture(id: string) {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.two-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
|
||||
.achievements { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
|
||||
.reminders { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
|
||||
.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.achievements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.reminders {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.reminder-item {
|
||||
border-bottom: 1px solid var(--color-border-glass);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.reminder-item:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.reminder-title { font-weight: 700; margin-bottom: 4px; }
|
||||
.reminder-body { font-size: 13px; color: var(--color-text-secondary); }
|
||||
.reminder-date { font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; }
|
||||
.reminder-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.reminder-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.reminder-body {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.reminder-date {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user