feat(sprint-5.5): add block version snapshots with switching between versions
- Add BlockSnapshot Prisma model (html, css, version, changelog) + migration - Add API endpoints: POST/GET /blocks/snapshots, GET /blocks/snapshots/:id - BlockMetaBar: version dropdown, HTML capture on save, onSnapshotSelect prop - "Сохранить версию" now captures innerHTML snapshot + CSS and stores in DB - Selecting archived version shows stored HTML snapshot instead of live component - Yellow banner "Архивная версия" with link to return to current - Split all 8 block pages into Server Component (metadata) + Client Component - Add data-block-capture attribute for snapshot capture targeting Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -0,0 +1,204 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||
import { FooterBlock } from "@/components/blocks/FooterBlock";
|
||||
|
||||
const BLOCK_PATH = "/blocks/contact";
|
||||
|
||||
const FOOTER_COLUMNS = [
|
||||
{
|
||||
title: "О клинике",
|
||||
links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
|
||||
},
|
||||
{
|
||||
title: "Заболевания",
|
||||
links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
|
||||
},
|
||||
{
|
||||
title: "Вопрос-ответ",
|
||||
links: [
|
||||
"Что нужно знать до операции на ухо",
|
||||
"Что нужно знать до операции на нос",
|
||||
"Отзывы до и после лечения у детей",
|
||||
"Что нужно знать при лечении у детей",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Операции",
|
||||
links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_FOOTER_TEXT = `
|
||||
БЛОК: Подвал сайта (Footer)
|
||||
Источник: perm.oclinica.ru/lor — нижняя часть страницы
|
||||
Версия: v1.1
|
||||
|
||||
СТРУКТУРА ПОДВАЛА:
|
||||
|
||||
1. ОСНОВНАЯ ЧАСТЬ — 4 колонки ссылок:
|
||||
Колонка 1 «О клинике»: Лицензия, Миссия, Врачи, Вакансии, История, Образовательная деятельность
|
||||
Колонка 2 «Заболевания»: Ринит, Отит, Гайморит, Тонзиллит, Полипы носа, Искривление перегородки
|
||||
Колонка 3 «Вопрос-ответ»: 4 вопроса об операциях и лечении
|
||||
Колонка 4 «Операции»: Септопластика, Турбинопластика, Тонзиллэктомия, Аденотомия и др.
|
||||
|
||||
2. НИЖНЯЯ ПОЛОСА:
|
||||
Левая: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»
|
||||
Центр:
|
||||
— «Мы находимся по адресу: Пермь, ул. Г. Звезда...»
|
||||
— Иконки соцсетей: VK, OK, YouTube, Telegram и другие
|
||||
Правая: Часы работы:
|
||||
— Пн-пт: 9:00–21:00
|
||||
— Сб: 9:00–18:00
|
||||
— Вс: выходной
|
||||
— Вторая клиника часы отдельно
|
||||
|
||||
ЦВЕТА:
|
||||
Фон подвала: #fff или светло-серый (#f8f9fa)
|
||||
Заголовки колонок: #111827, font-weight 600
|
||||
Ссылки: #53514e (--brand-073m), hover: #0089c3
|
||||
Разделитель: border-top 1px solid #e5e7eb
|
||||
Часы работы: #374151
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ 4 колонки ссылок в основной части
|
||||
✓ Логотип в нижней полосе слева
|
||||
✓ Адрес + соцсети в центре нижней полосы
|
||||
✓ Часы работы справа
|
||||
✕ Не менять структуру 4 колонок
|
||||
`.trim();
|
||||
|
||||
const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "v1.1",
|
||||
date: "24.03.2026",
|
||||
changes: [
|
||||
"Колонка «О клинике»: обновлены все ссылки по реальному сайту (13 ссылок)",
|
||||
"Колонка «Заболевания»: обновлены ссылки (5 категорий)",
|
||||
"Колонка «Вопрос-ответ»: обновлены ссылки (6 пунктов)",
|
||||
"Колонка «Операции»: обновлены ссылки (11 операций, было 6)",
|
||||
"Два адреса: Клары Цеткин, 9 + Газеты Звезда, 31А",
|
||||
"Два графика работы по филиалам",
|
||||
"Соцсети: добавлен Дзен",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ContactPageClient() {
|
||||
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Подвал (Footer)
|
||||
</h1>
|
||||
<BlockMetaBar
|
||||
path={BLOCK_PATH}
|
||||
defaultVersion="v1.1"
|
||||
defaultIsInPreview={false}
|
||||
defaultChangelog={CHANGELOG}
|
||||
onSnapshotSelect={setSnapshot}
|
||||
/>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
{snapshot ? (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||
</>
|
||||
) : (
|
||||
<div data-block-capture={BLOCK_PATH}>
|
||||
<FooterBlock />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Колонки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Четыре колонки ссылок
|
||||
</h2>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{FOOTER_COLUMNS.map((col) => (
|
||||
<div
|
||||
key={col.title}
|
||||
className="rounded-xl p-3 space-y-1"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<p className="font-semibold text-xs" style={{ color: "var(--bb-text)" }}>
|
||||
{col.title}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{col.links.length} ссылок
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact" version="v1.1" specText={LLM_FOOTER_TEXT}>
|
||||
<LlmSection title="Структура подвала" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Содержимое", "Фон"]}
|
||||
rows={[
|
||||
["4 колонки ссылок", "О клинике / Заболевания / Вопрос-ответ / Операции", "#f8f9fa"],
|
||||
["Нижняя полоса — лево", "Логотип клиники (иконка + текст)", "#fff"],
|
||||
["Нижняя полоса — центр", "Адрес + иконки соцсетей (VK, OK, YT, TG)", "#fff"],
|
||||
["Нижняя полоса — право", "Часы работы Пн–пт / Сб / Вс", "#fff"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Часы работы" />
|
||||
<LlmTable
|
||||
headers={["День", "Часы"]}
|
||||
rows={[
|
||||
["Пн–пт", "9:00–21:00"],
|
||||
["Сб", "9:00–18:00"],
|
||||
["Вс", "выходной"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Заголовки колонок", "#111827, font-weight 600", "—"],
|
||||
["Ссылки (default)", "#53514e", "--brand-073m"],
|
||||
["Ссылки (hover)", "#0089c3", "--brand-053m"],
|
||||
["Фон основной части", "#f8f9fa", "—"],
|
||||
["Фон нижней полосы", "#ffffff", "—"],
|
||||
["Разделитель", "1px solid #e5e7eb", "—"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "4 колонки: О клинике / Заболевания / Вопрос-ответ / Операции" },
|
||||
{ ok: true, text: "Логотип в нижней полосе слева" },
|
||||
{ ok: true, text: "Адрес и соцсети в центре" },
|
||||
{ ok: true, text: "Часы работы справа" },
|
||||
{ ok: false, text: "Не менять структуру и порядок 4 колонок" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,187 +1,10 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||
import { FooterBlock } from "@/components/blocks/FooterBlock";
|
||||
import ContactPageClient from "./ContactPageClient";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Подвал (Footer). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const FOOTER_COLUMNS = [
|
||||
{
|
||||
title: "О клинике",
|
||||
links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
|
||||
},
|
||||
{
|
||||
title: "Заболевания",
|
||||
links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
|
||||
},
|
||||
{
|
||||
title: "Вопрос-ответ",
|
||||
links: [
|
||||
"Что нужно знать до операции на ухо",
|
||||
"Что нужно знать до операции на нос",
|
||||
"Отзывы до и после лечения у детей",
|
||||
"Что нужно знать при лечении у детей",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Операции",
|
||||
links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_FOOTER_TEXT = `
|
||||
БЛОК: Подвал сайта (Footer)
|
||||
Источник: perm.oclinica.ru/lor — нижняя часть страницы
|
||||
Версия: v1.1
|
||||
|
||||
СТРУКТУРА ПОДВАЛА:
|
||||
|
||||
1. ОСНОВНАЯ ЧАСТЬ — 4 колонки ссылок:
|
||||
Колонка 1 «О клинике»: Лицензия, Миссия, Врачи, Вакансии, История, Образовательная деятельность
|
||||
Колонка 2 «Заболевания»: Ринит, Отит, Гайморит, Тонзиллит, Полипы носа, Искривление перегородки
|
||||
Колонка 3 «Вопрос-ответ»: 4 вопроса об операциях и лечении
|
||||
Колонка 4 «Операции»: Септопластика, Турбинопластика, Тонзиллэктомия, Аденотомия и др.
|
||||
|
||||
2. НИЖНЯЯ ПОЛОСА:
|
||||
Левая: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»
|
||||
Центр:
|
||||
— «Мы находимся по адресу: Пермь, ул. Г. Звезда...»
|
||||
— Иконки соцсетей: VK, OK, YouTube, Telegram и другие
|
||||
Правая: Часы работы:
|
||||
— Пн-пт: 9:00–21:00
|
||||
— Сб: 9:00–18:00
|
||||
— Вс: выходной
|
||||
— Вторая клиника часы отдельно
|
||||
|
||||
ЦВЕТА:
|
||||
Фон подвала: #fff или светло-серый (#f8f9fa)
|
||||
Заголовки колонок: #111827, font-weight 600
|
||||
Ссылки: #53514e (--brand-073m), hover: #0089c3
|
||||
Разделитель: border-top 1px solid #e5e7eb
|
||||
Часы работы: #374151
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ 4 колонки ссылок в основной части
|
||||
✓ Логотип в нижней полосе слева
|
||||
✓ Адрес + соцсети в центре нижней полосы
|
||||
✓ Часы работы справа
|
||||
✕ Не менять структуру 4 колонок
|
||||
`.trim();
|
||||
|
||||
const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "v1.1",
|
||||
date: "24.03.2026",
|
||||
changes: [
|
||||
"Колонка «О клинике»: обновлены все ссылки по реальному сайту (13 ссылок)",
|
||||
"Колонка «Заболевания»: обновлены ссылки (5 категорий)",
|
||||
"Колонка «Вопрос-ответ»: обновлены ссылки (6 пунктов)",
|
||||
"Колонка «Операции»: обновлены ссылки (11 операций, было 6)",
|
||||
"Два адреса: Клары Цеткин, 9 + Газеты Звезда, 31А",
|
||||
"Два графика работы по филиалам",
|
||||
"Соцсети: добавлен Дзен",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ContactFooterPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Подвал (Footer)
|
||||
</h1>
|
||||
<BlockMetaBar path="/blocks/contact" defaultVersion="v1.1" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<FooterBlock />
|
||||
</section>
|
||||
|
||||
{/* Колонки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Четыре колонки ссылок
|
||||
</h2>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{FOOTER_COLUMNS.map((col) => (
|
||||
<div
|
||||
key={col.title}
|
||||
className="rounded-xl p-3 space-y-1"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<p className="font-semibold text-xs" style={{ color: "var(--bb-text)" }}>
|
||||
{col.title}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{col.links.length} ссылок
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact" version="v1.1" specText={LLM_FOOTER_TEXT}>
|
||||
<LlmSection title="Структура подвала" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Содержимое", "Фон"]}
|
||||
rows={[
|
||||
["4 колонки ссылок", "О клинике / Заболевания / Вопрос-ответ / Операции", "#f8f9fa"],
|
||||
["Нижняя полоса — лево", "Логотип клиники (иконка + текст)", "#fff"],
|
||||
["Нижняя полоса — центр", "Адрес + иконки соцсетей (VK, OK, YT, TG)", "#fff"],
|
||||
["Нижняя полоса — право", "Часы работы Пн–пт / Сб / Вс", "#fff"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Часы работы" />
|
||||
<LlmTable
|
||||
headers={["День", "Часы"]}
|
||||
rows={[
|
||||
["Пн–пт", "9:00–21:00"],
|
||||
["Сб", "9:00–18:00"],
|
||||
["Вс", "выходной"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Заголовки колонок", "#111827, font-weight 600", "—"],
|
||||
["Ссылки (default)", "#53514e", "--brand-073m"],
|
||||
["Ссылки (hover)", "#0089c3", "--brand-053m"],
|
||||
["Фон основной части", "#f8f9fa", "—"],
|
||||
["Фон нижней полосы", "#ffffff", "—"],
|
||||
["Разделитель", "1px solid #e5e7eb", "—"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "4 колонки: О клинике / Заболевания / Вопрос-ответ / Операции" },
|
||||
{ ok: true, text: "Логотип в нижней полосе слева" },
|
||||
{ ok: true, text: "Адрес и соцсети в центре" },
|
||||
{ ok: true, text: "Часы работы справа" },
|
||||
{ ok: false, text: "Не менять структуру и порядок 4 колонок" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
return <ContactPageClient />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user