feat: подготовил дизайн (изменения из другого репозитория)

2026-05-08 01:06:22 +03:00
parent 655ab1b5c5
commit 047611fd24
54 changed files with 4497 additions and 28 deletions
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLecturesStore } from '@/stores/lectures'
+import GlassCard from '@/components/ui/GlassCard.vue'
+import LectureCard from '@/components/ui/LectureCard.vue'
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+
+const route = useRoute()
+const router = useRouter()
+const lecturesStore = useLecturesStore()
+
+const lecture = computed(() => lecturesStore.all.find(l => l.id === route.params.id) ?? lecturesStore.all[0]!)
+const isRegistered = computed(() => lecturesStore.isRegistered(lecture.value.id))
+const attendedLectures = ['1']
+const isAttended = computed(() => attendedLectures.includes(lecture.value.id))
+
+const similarLectures = computed(() => lecturesStore.all.filter(l => l.id !== lecture.value.id).slice(0, 3))
+</script>
+
+<template>
+  <div class="lecture-detail page-content">
+    <div class="header">
+      <div>
+        <div class="breadcrumb">Каталог / {{ lecture.title }}</div>
+        <h1 class="page-title">{{ lecture.title }}</h1>
+        <p class="text-secondary">{{ lecture.description }}</p>
+      </div>
+      <div class="actions">
+        <button
+          v-if="!isRegistered"
+          class="btn-primary"
+          :disabled="lecture.freeSeats === 0 || lecture.registrationClosed"
+          @click="lecturesStore.register(lecture.id)"
+        >
+          Записаться
+        </button>
+        <button v-else class="btn-secondary" @click="lecturesStore.unregister(lecture.id)">Отменить запись</button>
+        <button class="btn-secondary">Добавить в календарь</button>
+        <button v-if="isAttended" class="btn-primary" @click="router.push(`/review/${lecture.id}`)">Оставить отзыв</button>
+      </div>
+    </div>
+
+    <div class="info-grid">
+      <GlassCard>
+        <div class="info-section">
+          <h3>Преподаватель</h3>
+          <div class="info-value">{{ lecture.teacher }} · {{ lecture.teacherTitle }}</div>
+          <div class="info-sub">{{ lecture.department }}, {{ lecture.institute }}</div>
+        </div>
+        <div class="info-section">
+          <h3>Детали занятия</h3>
+          <div class="info-value">📅 {{ new Date(lecture.date).toLocaleDateString('ru-RU') }} · {{ lecture.time }}</div>
+          <div class="info-sub">Длительность: {{ lecture.duration }} мин</div>
+          <div class="info-sub">Локация: {{ lecture.building }} {{ lecture.room ? `· ауд. ${lecture.room}` : '' }}</div>
+        </div>
+        <div class="info-section">
+          <h3>Места</h3>
+          <div class="info-value">Свободно {{ lecture.freeSeats }} из {{ lecture.totalSeats }}</div>
+          <StatusBadge :status="lecture.registrationClosed ? 'closed' : lecture.freeSeats === 0 ? 'full' : 'open'" />
+        </div>
+        <div class="info-section">
+          <h3>Теги</h3>
+          <div class="tags">
+            <span class="tag-chip" v-for="tag in lecture.tags" :key="tag">{{ tag }}</span>
+          </div>
+        </div>
+      </GlassCard>
+
+      <GlassCard>
+        <div class="section-title">LLM-сводка отзывов</div>
+        <p class="summary">
+          Студенты отмечают «понятные примеры» и «много практики». Предлагается добавить больше времени на вопросы и
+          прикладные кейсы. Средняя оценка — 4.8/5.
+        </p>
+        <div class="reviews">
+          <div class="review">
+            <div class="review-head">Анонимный отзыв · 5 ⭐</div>
+            <div class="review-body">Очень структурно, понравились живые примеры и объяснение базовых концепций.</div>
+          </div>
+          <div class="review">
+            <div class="review-head">Анонимный отзыв · 4 ⭐</div>
+            <div class="review-body">Полезно, но хотелось больше времени на практику и разбор домашних заданий.</div>
+          </div>
+        </div>
+      </GlassCard>
+    </div>
+
+    <section>
+      <h2 class="section-title">Похожие лекции</h2>
+      <div class="cards-grid">
+        <LectureCard v-for="l in similarLectures" :key="l.id" :lecture="l" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.lecture-detail { display: flex; flex-direction: column; gap: 24px; }
+.breadcrumb { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.actions { display: flex; gap: 10px; flex-wrap: wrap; }
+.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
+.info-section { margin-bottom: 16px; }
+.info-section:last-child { margin-bottom: 0; }
+.info-section h3 { font-size: 14px; margin-bottom: 8px; }
+.info-value { font-weight: 700; }
+.info-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }
+.tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.summary { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
+.reviews { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
+.review { padding: 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.6); border: 1px solid var(--color-border-glass); }
+.review-head { font-weight: 600; margin-bottom: 4px; }
+.review-body { font-size: 13px; color: var(--color-text-secondary); }
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+</style>