fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render technical diagrams with mermaid

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-05-01 14:41:02 +07:00
parent fc6117c8f5
commit 3a3bd09a8c
20 changed files with 1191 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
docs/.vitepress/theme/components/MermaidDiagram.vue Normal file
View File

@@ -0,0 +1,94 @@
<script setup lang="ts">
import mermaid from 'mermaid';
import { computed, onMounted, ref, watch } from 'vue';
const props = defineProps<{
chart: string;
}>();
const svg = ref('');
const error = ref('');
let initialized = false;
let diagramId = 0;
function initMermaid() {
if (initialized) {
return;
}
mermaid.initialize({
startOnLoad: false,
theme: 'neutral',
securityLevel: 'strict',
fontFamily: 'Inter, Arial, sans-serif',
flowchart: {
useMaxWidth: true,
htmlLabels: true,
},
});
initialized = true;
}
const source = computed(() => props.chart.trim());
async function renderDiagram() {
if (!import.meta.client) {
return;
}
try {
initMermaid();
error.value = '';
diagramId += 1;
const { svg: result } = await mermaid.render(`mermaid-diagram-${diagramId}`, source.value);
svg.value = result;
} catch (cause) {
svg.value = '';
error.value = cause instanceof Error ? cause.message : 'Failed to render Mermaid diagram.';
}
}
onMounted(() => {
void renderDiagram();
});
watch(source, () => {
void renderDiagram();
});
</script>
<template>
<div class="mermaid-diagram">
<div v-if="error" class="mermaid-diagram__error">{{ error }}</div>
<div v-else class="mermaid-diagram__canvas" v-html="svg" />
</div>
</template>
<style scoped>
.mermaid-diagram {
margin: 1.25rem 0 1.75rem;
border: 1px solid #d9dee7;
border-radius: 20px;
background: #fff;
overflow: hidden;
}
.mermaid-diagram__canvas {
padding: 1rem;
}
.mermaid-diagram__canvas :deep(svg) {
display: block;
width: 100%;
height: auto;
}
.mermaid-diagram__error {
padding: 1rem 1.25rem;
color: #b42318;
background: #fef3f2;
font-size: 0.95rem;
}
</style>

12
docs/.vitepress/theme/components/NamedMermaidDiagram.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import MermaidDiagram from './MermaidDiagram.vue';
import { diagramSources } from './diagramSources';
const props = defineProps<{
name: string;
}>();
</script>
<template>
<MermaidDiagram :chart="diagramSources[props.name] || 'flowchart TB\\nA[Diagram not found]'" />
</template>

187
docs/.vitepress/theme/components/diagramSources.ts Normal file
View File

@@ -0,0 +1,187 @@
export const diagramSources: Record<string, string> = {
'architecture-overview': `flowchart LR
Browser[Браузер клиента]
Frontend[web-frontend<br/>Nuxt 4 + Vue 3]
Proxy[/api/graphql proxy]
Backend[apollo-backend<br/>Apollo Server + Express]
Prisma[Prisma ORM]
Db[(PostgreSQL)]
Vault[Vault]
OneC[1С]
Bots[Telegram / MAX / email]
Dokploy[Dokploy]
Browser --> Frontend
Frontend --> Proxy
Proxy --> Backend
Backend --> Prisma
Prisma --> Db
Backend -.bootstrap env.-> Vault
Backend -.sync / events.-> OneC
Backend -.notifications.-> Bots
Frontend -.deploy.-> Dokploy
Backend -.deploy.-> Dokploy`,
'component-map': `flowchart LR
subgraph UI[UI и маршруты]
Pages[app/pages]
Components[app/components]
Composables[app/composables]
Middleware[middleware / plugins]
end
subgraph Transport[Контракт и transport]
Ops[graphql/operations]
Generated[generated.ts]
Apollo[Apollo client]
Api[server/api/graphql]
end
subgraph Server[Backend logic]
Schema[schema.graphql]
Resolvers[resolvers.js]
Auth[auth.js / access.js]
Context[context.js]
Messenger[messenger / telegram / max]
end
subgraph Data[Data layer]
Prisma[prisma-client.js]
PrismaSchema[schema.prisma]
Db[(PostgreSQL)]
end
Pages --> Components
Pages --> Composables
Components --> Composables
Composables --> Apollo
Middleware --> Pages
Ops --> Generated
Generated --> Apollo
Apollo --> Api
Api --> Schema
Schema --> Resolvers
Resolvers --> Auth
Resolvers --> Context
Resolvers --> Messenger
Resolvers --> Prisma
Prisma --> PrismaSchema
Prisma --> Db`,
'database-model': `classDiagram
direction LR
class Company
class User
class CounterpartyProfile
class DeliveryAddress
class RegistrationRequest
class Invitation
class MessengerConnection
class Product
class Warehouse
class ProductStock
class CatalogProductTypeSetting
class Cart
class CartItem
class Order
class OrderItem
class OrderStatusEvent
class ReferralLink
class BonusTransaction
class RewardWithdrawalRequest
Company "1" --> "*" User : users
User "1" --> "0..1" CounterpartyProfile : profile
User "1" --> "*" DeliveryAddress : addresses
User "1" --> "*" MessengerConnection : channels
User "1" --> "0..1" Cart : cart
User "1" --> "*" Order : orders
User "1" --> "*" RegistrationRequest : requests
User "1" --> "*" Invitation : invitations
Product "1" --> "*" ProductStock : balances
Warehouse "1" --> "*" ProductStock : inventory
Product "1" --> "*" CartItem : cartItems
Product "1" --> "*" OrderItem : orderItems
Cart "1" --> "*" CartItem : items
Order "1" --> "*" OrderItem : items
Order "1" --> "*" OrderStatusEvent : history
User "1" --> "*" BonusTransaction : bonus
User "1" --> "*" RewardWithdrawalRequest : withdrawals
User "1" --> "*" ReferralLink : referrals
CatalogProductTypeSetting --> Product : productType`,
dashboard: `flowchart TB
subgraph Page[Главная страница клиента]
Header[Header / навигация]
Quick[Быстрые действия]
Active[Актуальные заказы и заявки]
Notes[Последние уведомления]
Bonus[Бонусный блок]
end
Header --> Quick --> Active --> Notes --> Bonus`,
'catalog-grid': `flowchart TB
subgraph Catalog[Каталог продукции]
Title[Заголовок раздела]
Search[Поиск]
Grid[Сетка карточек товарных направлений]
Cards[Упаковочный скотч | Алюминиевый скотч | Крепп | Вспененный | Двусторонний ПП | Двусторонний PVC]
end
Title --> Search --> Grid --> Cards`,
'product-card': `flowchart TB
subgraph ProductPage[Карточка товара]
Title[Заголовок товара и навигация]
subgraph TopRow[Верхний блок]
Image[Изображение товара]
Params[Параметры выбора]
Action[SKU / действие В корзину]
end
Help[Пояснения по параметрам]
Table[Таблица доступных вариантов]
end
Title --> TopRow --> Help --> Table`,
cart: `flowchart TB
subgraph CartPage[Корзина]
Items[Список выбранных позиций]
Delivery[Адрес доставки]
Comment[Комментарий клиента]
Submit[Отправить заявку]
end
Items --> Delivery --> Comment --> Submit`,
'client-order': `flowchart TB
subgraph ClientOrder[Карточка заявки / заказа]
Summary[Номер документа и статус]
Composition[Состав позиций]
Terms[Стоимость и условия поставки]
History[История изменений]
end
Summary --> Composition --> Terms --> History`,
'bonus-cabinet': `flowchart TB
subgraph BonusPage[Бонусный кабинет]
Balance[Текущий бонусный баланс]
History[История операций]
Referrals[Реферальные связи]
Action[Подача заявки на использование или вывод]
end
Balance --> History --> Referrals --> Action`,
'manager-order': `flowchart TB
subgraph ManagerOrder[Карточка обработки заявки]
Summary[Клиент / контрагент / менеджер]
Payload[Состав заявки или расчетный payload]
Terms[Стоимость и условия поставки]
Actions[Опубликовать условия / перевести в работу / отменить]
end
Summary --> Payload --> Terms --> Actions`,
'manager-orders': `flowchart TB
subgraph ManagerOrders[Список заказов менеджера]
Header[Заголовок раздела]
Filters[Фильтры: статус / клиент / период]
Table[Таблица заказов]
end
Header --> Filters --> Table`,
};

16
docs/.vitepress/theme/index.ts Normal file
View File

@@ -0,0 +1,16 @@
import DefaultTheme from 'vitepress/theme';
import type { Theme } from 'vitepress';
import MermaidDiagram from './components/MermaidDiagram.vue';
import NamedMermaidDiagram from './components/NamedMermaidDiagram.vue';
const theme: Theme = {
...DefaultTheme,
enhanceApp({ app }) {
DefaultTheme.enhanceApp?.({ app });
app.component('MermaidDiagram', MermaidDiagram);
app.component('NamedMermaidDiagram', NamedMermaidDiagram);
},
};
export default theme;

75
docs/public/diagrams/component-map.svg
View File

@@ -1,75 +0,0 @@
<svg width="1400" height="920" viewBox="0 0 1400 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="920" fill="#F6F7F9"/>
<rect x="40" y="32" width="1320" height="856" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<text x="80" y="88" fill="#111827" font-family="Arial, sans-serif" font-size="30" font-weight="700">Карта компонентов и слоев приложения</text>
<rect x="84" y="140" width="300" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
<text x="234" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">UI и маршруты</text>
<rect x="116" y="216" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
<text x="234" y="250" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">app/pages</text>
<text x="234" y="276" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">маршруты клиентского и менеджерского контура</text>
<rect x="116" y="324" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
<text x="234" y="358" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">app/components</text>
<text x="234" y="384" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">catalog / orders / ui / bonus</text>
<rect x="116" y="432" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
<text x="234" y="466" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">app/composables</text>
<text x="234" y="492" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">presentation + client-side state</text>
<rect x="116" y="540" width="236" height="78" rx="16" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
<text x="234" y="574" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">middleware / plugins</text>
<text x="234" y="600" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">auth, mini-app, sentry</text>
<rect x="444" y="140" width="300" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
<text x="594" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">Контракт и transport</text>
<rect x="476" y="216" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="594" y="250" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">graphql/operations</text>
<text x="594" y="276" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">отдельный файл на документ</text>
<rect x="476" y="324" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="594" y="358" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">generated.ts</text>
<text x="594" y="384" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">typed documents + types</text>
<rect x="476" y="432" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="594" y="466" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Apollo client</text>
<text x="594" y="492" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">typed query / mutation execution</text>
<rect x="476" y="540" width="236" height="78" rx="16" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="594" y="574" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">server/api/graphql</text>
<text x="594" y="600" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">SSR-safe proxy to backend</text>
<rect x="804" y="140" width="260" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
<text x="934" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">Backend logic</text>
<rect x="836" y="216" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
<text x="934" y="250" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">schema.graphql</text>
<text x="934" y="276" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">контракт API</text>
<rect x="836" y="324" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
<text x="934" y="358" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">resolvers.js</text>
<text x="934" y="384" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">основные сценарии</text>
<rect x="836" y="432" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
<text x="934" y="466" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">auth / access</text>
<text x="934" y="492" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">токены, роли, guard logic</text>
<rect x="836" y="540" width="196" height="78" rx="16" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
<text x="934" y="574" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">messenger layer</text>
<text x="934" y="600" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">Telegram / MAX / mail</text>
<rect x="1124" y="140" width="200" height="660" rx="24" fill="#F9FAFB" stroke="#CBD5E1" stroke-width="2"/>
<text x="1224" y="184" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">Data</text>
<rect x="1152" y="250" width="144" height="78" rx="16" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
<text x="1224" y="284" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Prisma</text>
<text x="1224" y="310" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">ORM</text>
<rect x="1152" y="390" width="144" height="78" rx="16" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
<text x="1224" y="424" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">schema.prisma</text>
<text x="1224" y="450" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">модель БД</text>
<rect x="1152" y="530" width="144" height="78" rx="16" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
<text x="1224" y="564" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">PostgreSQL</text>
<text x="1224" y="590" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">persistent data</text>
<line x1="384" y1="255" x2="476" y2="255" stroke="#6B7280" stroke-width="3"/>
<polygon points="476,255 462,247 462,263" fill="#6B7280"/>
<line x1="384" y1="471" x2="476" y2="471" stroke="#6B7280" stroke-width="3"/>
<polygon points="476,471 462,463 462,479" fill="#6B7280"/>
<line x1="744" y1="471" x2="836" y2="471" stroke="#6B7280" stroke-width="3"/>
<polygon points="836,471 822,463 822,479" fill="#6B7280"/>
<line x1="1032" y1="430" x2="1152" y2="429" stroke="#6B7280" stroke-width="3"/>
<polygon points="1152,429 1138,421 1138,437" fill="#6B7280"/>
<line x1="1224" y1="328" x2="1224" y2="390" stroke="#6B7280" stroke-width="3"/>
<polygon points="1224,390 1216,376 1232,376" fill="#6B7280"/>
<line x1="1224" y1="468" x2="1224" y2="530" stroke="#6B7280" stroke-width="3"/>
<polygon points="1224,530 1216,516 1232,516" fill="#6B7280"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

85
docs/public/diagrams/database-overview.svg
View File

@@ -1,85 +0,0 @@
<svg width="1400" height="980" viewBox="0 0 1400 980" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="980" fill="#F6F7F9"/>
<rect x="40" y="32" width="1320" height="916" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<text x="80" y="88" fill="#111827" font-family="Arial, sans-serif" font-size="30" font-weight="700">Схема логической модели данных</text>
<rect x="86" y="136" width="360" height="250" rx="24" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
<text x="266" y="182" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="27" font-weight="700">Пользователи и компании</text>
<rect x="116" y="208" width="136" height="70" rx="14" fill="white" stroke="#8FB3E8" stroke-width="2"/>
<text x="184" y="248" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">User</text>
<rect x="280" y="208" width="136" height="70" rx="14" fill="white" stroke="#8FB3E8" stroke-width="2"/>
<text x="348" y="248" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Company</text>
<rect x="116" y="296" width="136" height="70" rx="14" fill="white" stroke="#8FB3E8" stroke-width="2"/>
<text x="184" y="336" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="18" font-weight="700">Counterparty</text>
<rect x="280" y="296" width="136" height="70" rx="14" fill="white" stroke="#8FB3E8" stroke-width="2"/>
<text x="348" y="336" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="18" font-weight="700">DeliveryAddress</text>
<rect x="520" y="136" width="360" height="250" rx="24" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
<text x="700" y="182" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="27" font-weight="700">Каталог и остатки</text>
<rect x="550" y="208" width="136" height="70" rx="14" fill="white" stroke="#84D5A4" stroke-width="2"/>
<text x="618" y="248" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Product</text>
<rect x="714" y="208" width="136" height="70" rx="14" fill="white" stroke="#84D5A4" stroke-width="2"/>
<text x="782" y="248" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="20" font-weight="700">Warehouse</text>
<rect x="550" y="296" width="136" height="70" rx="14" fill="white" stroke="#84D5A4" stroke-width="2"/>
<text x="618" y="336" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="19" font-weight="700">ProductStock</text>
<rect x="714" y="296" width="136" height="70" rx="14" fill="white" stroke="#84D5A4" stroke-width="2"/>
<text x="782" y="328" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="16" font-weight="700">CatalogProduct</text>
<text x="782" y="348" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="16" font-weight="700">TypeSetting</text>
<rect x="954" y="136" width="320" height="250" rx="24" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
<text x="1114" y="182" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="27" font-weight="700">Заказный контур</text>
<rect x="984" y="208" width="124" height="70" rx="14" fill="white" stroke="#F0C36B" stroke-width="2"/>
<text x="1046" y="248" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Cart</text>
<rect x="1136" y="208" width="108" height="70" rx="14" fill="white" stroke="#F0C36B" stroke-width="2"/>
<text x="1190" y="248" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="20" font-weight="700">Order</text>
<rect x="984" y="296" width="124" height="70" rx="14" fill="white" stroke="#F0C36B" stroke-width="2"/>
<text x="1046" y="336" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="19" font-weight="700">CartItem</text>
<rect x="1136" y="296" width="108" height="70" rx="14" fill="white" stroke="#F0C36B" stroke-width="2"/>
<text x="1190" y="328" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="18" font-weight="700">OrderItem</text>
<text x="1190" y="348" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="18" font-weight="700">&amp; StatusEvent</text>
<rect x="86" y="448" width="360" height="200" rx="24" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="266" y="494" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="27" font-weight="700">Регистрация и доступ</text>
<rect x="116" y="532" width="136" height="70" rx="14" fill="white" stroke="#C8A6E5" stroke-width="2"/>
<text x="184" y="572" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="17" font-weight="700">Registration</text>
<rect x="280" y="532" width="136" height="70" rx="14" fill="white" stroke="#C8A6E5" stroke-width="2"/>
<text x="348" y="572" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="18" font-weight="700">Invitation</text>
<rect x="520" y="448" width="360" height="200" rx="24" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="700" y="494" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="27" font-weight="700">Уведомления и мессенджеры</text>
<rect x="550" y="532" width="136" height="70" rx="14" fill="white" stroke="#C8A6E5" stroke-width="2"/>
<text x="618" y="572" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="19" font-weight="700">Messenger</text>
<rect x="714" y="532" width="136" height="70" rx="14" fill="white" stroke="#C8A6E5" stroke-width="2"/>
<text x="782" y="572" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="18" font-weight="700">Notification</text>
<rect x="954" y="448" width="320" height="300" rx="24" fill="#FDEFF2" stroke="#EAA1B3" stroke-width="2"/>
<text x="1114" y="494" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="27" font-weight="700">Бонусный контур</text>
<rect x="984" y="532" width="124" height="70" rx="14" fill="white" stroke="#EAA1B3" stroke-width="2"/>
<text x="1046" y="572" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="18" font-weight="700">ReferralLink</text>
<rect x="1136" y="532" width="108" height="70" rx="14" fill="white" stroke="#EAA1B3" stroke-width="2"/>
<text x="1190" y="572" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="16" font-weight="700">BonusTransaction</text>
<rect x="1060" y="620" width="136" height="70" rx="14" fill="white" stroke="#EAA1B3" stroke-width="2"/>
<text x="1128" y="660" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="16" font-weight="700">RewardWithdrawal</text>
<line x1="252" y1="243" x2="280" y2="243" stroke="#64748B" stroke-width="3"/>
<line x1="184" y1="278" x2="184" y2="296" stroke="#64748B" stroke-width="3"/>
<line x1="348" y1="278" x2="348" y2="296" stroke="#64748B" stroke-width="3"/>
<line x1="686" y1="243" x2="714" y2="243" stroke="#64748B" stroke-width="3"/>
<line x1="618" y1="278" x2="618" y2="296" stroke="#64748B" stroke-width="3"/>
<line x1="782" y1="278" x2="782" y2="296" stroke="#64748B" stroke-width="3"/>
<line x1="1108" y1="243" x2="1136" y2="243" stroke="#64748B" stroke-width="3"/>
<line x1="1046" y1="278" x2="1046" y2="296" stroke="#64748B" stroke-width="3"/>
<line x1="1190" y1="278" x2="1190" y2="296" stroke="#64748B" stroke-width="3"/>
<line x1="252" y1="243" x2="550" y2="243" stroke="#94A3B8" stroke-width="3" stroke-dasharray="8 8"/>
<line x1="686" y1="243" x2="984" y2="243" stroke="#94A3B8" stroke-width="3" stroke-dasharray="8 8"/>
<line x1="184" y1="602" x2="184" y2="744" stroke="#94A3B8" stroke-width="3" stroke-dasharray="8 8"/>
<line x1="618" y1="602" x2="618" y2="744" stroke="#94A3B8" stroke-width="3" stroke-dasharray="8 8"/>
<line x1="1046" y1="602" x2="1046" y2="744" stroke="#94A3B8" stroke-width="3" stroke-dasharray="8 8"/>
<text x="84" y="840" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Ключевые связи</text>
<text x="84" y="876" fill="#4B5563" font-family="Arial, sans-serif" font-size="18">User связан с Company, CounterpartyProfile, DeliveryAddress, Cart, Order, MessengerConnection и бонусными сущностями.</text>
<text x="84" y="906" fill="#4B5563" font-family="Arial, sans-serif" font-size="18">Product связан с ProductStock и используется в CartItem / OrderItem. Настройки параметров хранятся отдельно по типу товара.</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

85
docs/public/diagrams/system-architecture.svg
View File

@@ -1,85 +0,0 @@
<svg width="1400" height="860" viewBox="0 0 1400 860" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="860" fill="#F6F7F9"/>
<rect x="40" y="32" width="1320" height="796" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<text x="80" y="88" fill="#111827" font-family="Arial, sans-serif" font-size="30" font-weight="700">Схема архитектуры программного продукта</text>
<rect x="84" y="150" width="220" height="96" rx="20" fill="#F9FAFB" stroke="#C7D2E0" stroke-width="2"/>
<text x="194" y="190" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Браузер клиента</text>
<text x="194" y="220" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="18">desktop / mobile</text>
<rect x="372" y="130" width="280" height="140" rx="22" fill="#EEF5FF" stroke="#8FB3E8" stroke-width="2"/>
<text x="512" y="180" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="26" font-weight="700">web-frontend</text>
<text x="512" y="212" text-anchor="middle" fill="#374151" font-family="Arial, sans-serif" font-size="18">Nuxt 4 + Vue 3</text>
<text x="512" y="238" text-anchor="middle" fill="#6B7280" font-family="Arial, sans-serif" font-size="16">страницы, компоненты, composables</text>
<rect x="720" y="154" width="220" height="92" rx="20" fill="#F9FAFB" stroke="#C7D2E0" stroke-width="2"/>
<text x="830" y="194" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="23" font-weight="700">/api/graphql</text>
<text x="830" y="222" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="17">server proxy</text>
<rect x="1008" y="130" width="292" height="140" rx="22" fill="#EFFBF5" stroke="#84D5A4" stroke-width="2"/>
<text x="1154" y="180" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="26" font-weight="700">apollo-backend</text>
<text x="1154" y="212" text-anchor="middle" fill="#374151" font-family="Arial, sans-serif" font-size="18">Apollo Server + Express</text>
<text x="1154" y="238" text-anchor="middle" fill="#6B7280" font-family="Arial, sans-serif" font-size="16">GraphQL, auth, business logic</text>
<rect x="1010" y="348" width="134" height="86" rx="18" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
<text x="1077" y="386" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">Prisma</text>
<text x="1077" y="410" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">ORM</text>
<rect x="1170" y="348" width="150" height="86" rx="18" fill="#FFF8E8" stroke="#F0C36B" stroke-width="2"/>
<text x="1245" y="386" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="22" font-weight="700">PostgreSQL</text>
<text x="1245" y="410" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="16">основная БД</text>
<rect x="372" y="350" width="300" height="120" rx="22" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="522" y="394" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="26" font-weight="700">GraphQL документы</text>
<text x="522" y="424" text-anchor="middle" fill="#374151" font-family="Arial, sans-serif" font-size="18">graphql/operations</text>
<text x="522" y="448" text-anchor="middle" fill="#6B7280" font-family="Arial, sans-serif" font-size="16">typed generated documents</text>
<rect x="84" y="350" width="220" height="120" rx="22" fill="#FCF5FF" stroke="#C8A6E5" stroke-width="2"/>
<text x="194" y="394" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="25" font-weight="700">UI-компоненты</text>
<text x="194" y="424" text-anchor="middle" fill="#374151" font-family="Arial, sans-serif" font-size="18">catalog, orders, profile</text>
<text x="194" y="448" text-anchor="middle" fill="#6B7280" font-family="Arial, sans-serif" font-size="16">daisyUI / Tailwind</text>
<rect x="80" y="560" width="240" height="96" rx="20" fill="#F9FAFB" stroke="#C7D2E0" stroke-width="2"/>
<text x="200" y="600" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Telegram / MAX</text>
<text x="200" y="628" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="17">каналы уведомлений</text>
<rect x="412" y="560" width="220" height="96" rx="20" fill="#F9FAFB" stroke="#C7D2E0" stroke-width="2"/>
<text x="522" y="600" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Vault</text>
<text x="522" y="628" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="17">секреты и bootstrap env</text>
<rect x="760" y="560" width="220" height="96" rx="20" fill="#F9FAFB" stroke="#C7D2E0" stroke-width="2"/>
<text x="870" y="600" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">1С</text>
<text x="870" y="628" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="17">заказы, статусы, остатки</text>
<rect x="1080" y="560" width="220" height="96" rx="20" fill="#F9FAFB" stroke="#C7D2E0" stroke-width="2"/>
<text x="1190" y="600" text-anchor="middle" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Dokploy</text>
<text x="1190" y="628" text-anchor="middle" fill="#4B5563" font-family="Arial, sans-serif" font-size="17">deploy + rollout</text>
<line x1="304" y1="198" x2="372" y2="198" stroke="#6B7280" stroke-width="3"/>
<polygon points="372,198 358,190 358,206" fill="#6B7280"/>
<line x1="652" y1="198" x2="720" y2="198" stroke="#6B7280" stroke-width="3"/>
<polygon points="720,198 706,190 706,206" fill="#6B7280"/>
<line x1="940" y1="198" x2="1008" y2="198" stroke="#6B7280" stroke-width="3"/>
<polygon points="1008,198 994,190 994,206" fill="#6B7280"/>
<line x1="1154" y1="270" x2="1154" y2="348" stroke="#6B7280" stroke-width="3"/>
<polygon points="1154,348 1146,334 1162,334" fill="#6B7280"/>
<line x1="1144" y1="391" x2="1170" y2="391" stroke="#6B7280" stroke-width="3"/>
<polygon points="1170,391 1156,383 1156,399" fill="#6B7280"/>
<line x1="522" y1="270" x2="522" y2="350" stroke="#6B7280" stroke-width="3"/>
<polygon points="522,350 514,336 530,336" fill="#6B7280"/>
<line x1="372" y1="410" x2="304" y2="410" stroke="#6B7280" stroke-width="3"/>
<polygon points="304,410 318,402 318,418" fill="#6B7280"/>
<line x1="200" y1="560" x2="200" y2="470" stroke="#6B7280" stroke-width="3" stroke-dasharray="8 8"/>
<polygon points="200,470 192,484 208,484" fill="#6B7280"/>
<line x1="522" y1="560" x2="522" y2="470" stroke="#6B7280" stroke-width="3" stroke-dasharray="8 8"/>
<polygon points="522,470 514,484 530,484" fill="#6B7280"/>
<line x1="870" y1="560" x2="1060" y2="270" stroke="#6B7280" stroke-width="3" stroke-dasharray="8 8"/>
<polygon points="1060,270 1047,279 1061,287" fill="#6B7280"/>
<line x1="1190" y1="560" x2="1190" y2="270" stroke="#6B7280" stroke-width="3" stroke-dasharray="8 8"/>
<polygon points="1190,270 1182,284 1198,284" fill="#6B7280"/>
<text x="84" y="742" fill="#6B7280" font-family="Arial, sans-serif" font-size="18">Сплошные линии — основной runtime-контур. Пунктир — внешние и инфраструктурные зависимости.</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

8
docs/public/prototypes/bonus-cabinet.svg
View File

@@ -1,8 +0,0 @@
<svg width="1400" height="900" viewBox="0 0 1400 900" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="900" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="820" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<rect x="134" y="150" width="1132" height="110" rx="22" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="294" width="1132" height="200" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="528" width="1132" height="154" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="998" y="724" width="268" height="64" rx="32" fill="#D9E9D4"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 665 B

12
docs/public/prototypes/cart.svg
View File

@@ -1,12 +0,0 @@
<svg width="1400" height="860" viewBox="0 0 1400 860" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="860" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="780" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<text x="134" y="116" fill="#111827" font-family="Arial, sans-serif" font-size="34" font-weight="700">Корзина</text>
<rect x="134" y="150" width="1132" height="64" rx="18" fill="#EAF1F8"/>
<rect x="134" y="230" width="1132" height="74" rx="18" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="320" width="1132" height="74" rx="18" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="430" width="1132" height="90" rx="20" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="546" width="1132" height="128" rx="20" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="1032" y="706" width="234" height="64" rx="32" fill="#CFE6D7"/>
<text x="1149" y="746" text-anchor="middle" fill="#1F3B2B" font-family="Arial, sans-serif" font-size="24" font-weight="700">Отправить заявку</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

37
docs/public/prototypes/catalog-grid.svg
View File

@@ -1,37 +0,0 @@
<svg width="1400" height="860" viewBox="0 0 1400 860" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="860" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="780" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<rect x="132" y="86" width="1136" height="70" rx="18" fill="#F9FAFB" stroke="#D9DEE7" stroke-width="2"/>
<text x="182" y="130" fill="#111827" font-family="Arial, sans-serif" font-size="28" font-weight="700">Каталог</text>
<rect x="132" y="196" width="216" height="220" rx="22" fill="#FCFCFD" stroke="#CAD5E2" stroke-width="2"/>
<rect x="156" y="220" width="168" height="104" rx="16" fill="#E7EDF5"/>
<rect x="156" y="348" width="140" height="18" rx="9" fill="#D6DEE9"/>
<rect x="156" y="378" width="112" height="14" rx="7" fill="#E5EAF1"/>
<rect x="374" y="196" width="216" height="220" rx="22" fill="#FCFCFD" stroke="#CAD5E2" stroke-width="2"/>
<rect x="398" y="220" width="168" height="104" rx="16" fill="#E7EDF5"/>
<rect x="398" y="348" width="140" height="18" rx="9" fill="#D6DEE9"/>
<rect x="398" y="378" width="112" height="14" rx="7" fill="#E5EAF1"/>
<rect x="616" y="196" width="216" height="220" rx="22" fill="#FCFCFD" stroke="#CAD5E2" stroke-width="2"/>
<rect x="640" y="220" width="168" height="104" rx="16" fill="#E7EDF5"/>
<rect x="640" y="348" width="140" height="18" rx="9" fill="#D6DEE9"/>
<rect x="640" y="378" width="112" height="14" rx="7" fill="#E5EAF1"/>
<rect x="858" y="196" width="216" height="220" rx="22" fill="#FCFCFD" stroke="#CAD5E2" stroke-width="2"/>
<rect x="882" y="220" width="168" height="104" rx="16" fill="#E7EDF5"/>
<rect x="882" y="348" width="140" height="18" rx="9" fill="#D6DEE9"/>
<rect x="882" y="378" width="112" height="14" rx="7" fill="#E5EAF1"/>
<rect x="1100" y="196" width="168" height="220" rx="22" fill="#FCFCFD" stroke="#CAD5E2" stroke-width="2"/>
<rect x="1124" y="220" width="120" height="104" rx="16" fill="#E7EDF5"/>
<rect x="1124" y="348" width="104" height="18" rx="9" fill="#D6DEE9"/>
<rect x="1124" y="378" width="88" height="14" rx="7" fill="#E5EAF1"/>
<rect x="132" y="450" width="216" height="220" rx="22" fill="#FCFCFD" stroke="#CAD5E2" stroke-width="2"/>
<rect x="156" y="474" width="168" height="104" rx="16" fill="#E7EDF5"/>
<rect x="156" y="602" width="140" height="18" rx="9" fill="#D6DEE9"/>
<rect x="156" y="632" width="112" height="14" rx="7" fill="#E5EAF1"/>
<rect x="374" y="450" width="216" height="220" rx="22" fill="#FCFCFD" stroke="#CAD5E2" stroke-width="2"/>
<rect x="398" y="474" width="168" height="104" rx="16" fill="#E7EDF5"/>
<rect x="398" y="602" width="140" height="18" rx="9" fill="#D6DEE9"/>
<rect x="398" y="632" width="112" height="14" rx="7" fill="#E5EAF1"/>
<text x="132" y="746" fill="#6B7280" font-family="Arial, sans-serif" font-size="18">Схема: на странице отображается только сетка карточек товарных направлений.</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

9
docs/public/prototypes/client-order.svg
View File

@@ -1,9 +0,0 @@
<svg width="1400" height="900" viewBox="0 0 1400 900" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="900" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="820" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<text x="134" y="116" fill="#111827" font-family="Arial, sans-serif" font-size="34" font-weight="700">Карточка заявки / заказа</text>
<rect x="134" y="150" width="1132" height="82" rx="20" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="260" width="1132" height="200" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="490" width="1132" height="128" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="648" width="1132" height="164" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 856 B

10
docs/public/prototypes/dashboard.svg
View File

@@ -1,10 +0,0 @@
<svg width="1400" height="860" viewBox="0 0 1400 860" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="860" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="780" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<rect x="132" y="86" width="1136" height="70" rx="18" fill="#F9FAFB" stroke="#D9DEE7" stroke-width="2"/>
<rect x="132" y="190" width="360" height="150" rx="22" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="520" y="190" width="360" height="150" rx="22" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="908" y="190" width="360" height="150" rx="22" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="132" y="378" width="736" height="314" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="896" y="378" width="372" height="314" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 912 B

11
docs/public/prototypes/manager-order.svg
View File

@@ -1,11 +0,0 @@
<svg width="1400" height="920" viewBox="0 0 1400 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="920" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="840" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<text x="134" y="116" fill="#111827" font-family="Arial, sans-serif" font-size="34" font-weight="700">Карточка обработки заявки менеджером</text>
<rect x="134" y="150" width="1132" height="92" rx="22" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="274" width="1132" height="196" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="500" width="548" height="210" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="718" y="500" width="548" height="210" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="880" y="760" width="386" height="64" rx="32" fill="#D5E5FA"/>
<text x="1073" y="800" text-anchor="middle" fill="#1B3658" font-family="Arial, sans-serif" font-size="23" font-weight="700">Опубликовать условия / перевести в работу</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

9
docs/public/prototypes/manager-orders.svg
View File

@@ -1,9 +0,0 @@
<svg width="1400" height="860" viewBox="0 0 1400 860" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="860" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="780" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<rect x="134" y="150" width="1132" height="80" rx="20" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="264" width="1132" height="60" rx="18" fill="#EAF1F8"/>
<rect x="134" y="344" width="1132" height="78" rx="18" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="438" width="1132" height="78" rx="18" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="134" y="532" width="1132" height="78" rx="18" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 771 B

39
docs/public/prototypes/product-card.svg
View File

@@ -1,39 +0,0 @@
<svg width="1400" height="980" viewBox="0 0 1400 980" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1400" height="980" fill="#F5F6F8"/>
<rect x="90" y="40" width="1220" height="900" rx="28" fill="white" stroke="#D9DEE7" stroke-width="2"/>
<rect x="134" y="82" width="220" height="36" rx="18" fill="#EEF2F7"/>
<text x="134" y="150" fill="#111827" font-family="Arial, sans-serif" font-size="34" font-weight="700">Карточка товара</text>
<rect x="134" y="190" width="330" height="300" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<rect x="174" y="230" width="250" height="190" rx="18" fill="#E7EDF5"/>
<rect x="500" y="190" width="470" height="300" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<text x="536" y="236" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Параметры выбора</text>
<rect x="536" y="266" width="120" height="42" rx="21" fill="#EAF1F8"/>
<rect x="668" y="266" width="120" height="42" rx="21" fill="#EAF1F8"/>
<rect x="800" y="266" width="120" height="42" rx="21" fill="#EAF1F8"/>
<rect x="536" y="328" width="120" height="42" rx="21" fill="#EAF1F8"/>
<rect x="668" y="328" width="120" height="42" rx="21" fill="#EAF1F8"/>
<rect x="800" y="328" width="120" height="42" rx="21" fill="#EAF1F8"/>
<rect x="536" y="390" width="180" height="14" rx="7" fill="#D5DDE8"/>
<rect x="536" y="416" width="360" height="14" rx="7" fill="#E4EAF1"/>
<rect x="536" y="442" width="300" height="14" rx="7" fill="#E4EAF1"/>
<rect x="1006" y="190" width="260" height="300" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<text x="1042" y="236" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Действие</text>
<rect x="1042" y="276" width="188" height="14" rx="7" fill="#D5DDE8"/>
<rect x="1042" y="302" width="150" height="14" rx="7" fill="#E4EAF1"/>
<rect x="1042" y="382" width="188" height="54" rx="27" fill="#CFE6D7"/>
<text x="1136" y="416" text-anchor="middle" fill="#1F3B2B" font-family="Arial, sans-serif" font-size="22" font-weight="700">В корзину</text>
<rect x="134" y="530" width="1132" height="120" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<text x="170" y="576" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Пояснение по параметрам</text>
<rect x="170" y="606" width="700" height="14" rx="7" fill="#D5DDE8"/>
<rect x="170" y="632" width="980" height="14" rx="7" fill="#E4EAF1"/>
<rect x="134" y="690" width="1132" height="210" rx="24" fill="#F9FAFB" stroke="#CAD5E2" stroke-width="2"/>
<text x="170" y="736" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">Таблица доступных вариантов</text>
<rect x="170" y="760" width="1060" height="44" rx="12" fill="#EAF1F8"/>
<rect x="170" y="820" width="1060" height="1" fill="#D8E0EB"/>
<rect x="170" y="850" width="1060" height="1" fill="#D8E0EB"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

2
docs/tz/database-model.md
View File

@@ -4,7 +4,7 @@
Основное хранилище данных программного продукта реализуется на `PostgreSQL`. Прикладной доступ к данным осуществляется через `Prisma ORM`. Основное хранилище данных программного продукта реализуется на `PostgreSQL`. Прикладной доступ к данным осуществляется через `Prisma ORM`.
![Схема модели данных](/diagrams/database-overview.svg) <NamedMermaidDiagram name="database-model" />
Модель данных должна обеспечивать хранение: Модель данных должна обеспечивать хранение:

16
docs/tz/stage-1/index.md
View File

@@ -62,7 +62,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип главной страницы клиента](/prototypes/dashboard.svg) <NamedMermaidDiagram name="dashboard" />
### 9.3.2 Каталог продукции ### 9.3.2 Каталог продукции
@@ -81,7 +81,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип каталога](/prototypes/catalog-grid.svg) <NamedMermaidDiagram name="catalog-grid" />
### 9.3.3 Карточка товара ### 9.3.3 Карточка товара
@@ -105,7 +105,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип карточки товара](/prototypes/product-card.svg) <NamedMermaidDiagram name="product-card" />
Состав блока выбора параметров: Состав блока выбора параметров:
@@ -144,7 +144,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип корзины](/prototypes/cart.svg) <NamedMermaidDiagram name="cart" />
### 9.3.5 Карточка заявки или заказа ### 9.3.5 Карточка заявки или заказа
@@ -157,7 +157,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип бонусного кабинета](/prototypes/bonus-cabinet.svg) <NamedMermaidDiagram name="client-order" />
Состав страницы: Состав страницы:
@@ -221,7 +221,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип карточки заказа](/prototypes/client-order.svg) <NamedMermaidDiagram name="bonus-cabinet" />
## 9.4 Менеджерские экранные формы ## 9.4 Менеджерские экранные формы
@@ -266,7 +266,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип списка заказов менеджера](/prototypes/manager-orders.svg) <NamedMermaidDiagram name="manager-order" />
Состав страницы: Состав страницы:
@@ -288,7 +288,7 @@
Схематичный прототип: Схематичный прототип:
![Прототип менеджерской обработки заявки](/prototypes/manager-order.svg) <NamedMermaidDiagram name="manager-orders" />
### 9.4.5 Настройки каталога ### 9.4.5 Настройки каталога

4
docs/tz/technical-architecture.md
View File

@@ -4,7 +4,7 @@
Программный продукт реализуется по клиент-серверной модели и включает веб-клиент, сервер бизнес-логики, базу данных, модуль интеграции и вспомогательные сервисы уведомлений. Программный продукт реализуется по клиент-серверной модели и включает веб-клиент, сервер бизнес-логики, базу данных, модуль интеграции и вспомогательные сервисы уведомлений.
![Схема архитектуры](/diagrams/system-architecture.svg) <NamedMermaidDiagram name="architecture-overview" />
## 6.2 Состав прикладных сервисов ## 6.2 Состав прикладных сервисов
@@ -66,7 +66,7 @@
## 6.6 Карта слоев и компонентов ## 6.6 Карта слоев и компонентов
![Карта компонентов](/diagrams/component-map.svg) <NamedMermaidDiagram name="component-map" />
## 6.7 Архитектура серверной части ## 6.7 Архитектура серверной части

1
package.json
View File

@@ -27,6 +27,7 @@
"@vue/apollo-composable": "^4.2.2", "@vue/apollo-composable": "^4.2.2",
"daisyui": "^5.5.19", "daisyui": "^5.5.19",
"graphql": "^16.13.2", "graphql": "^16.13.2",
"mermaid": "^11.14.0",
"nuxt": "^4.4.2", "nuxt": "^4.4.2",
"vue": "^3.5.30", "vue": "^3.5.30",
"vue-router": "^5.0.4" "vue-router": "^5.0.4"

870
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff