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

Simplify message template page layout

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 16:01:01 +07:00
parent 372626e2ed
commit 0380c54d60
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/pages/messages.vue
View File

@@ -29,13 +29,7 @@ function channelLabel(channel: TemplateChannel['channel']) {
<template> <template>
<section class="space-y-6"> <section class="space-y-6">
<div class="manager-hero"> <h1 class="text-3xl font-extrabold text-[#0f2f20]">Сообщения</h1>
<p class="manager-eyebrow">Настройки</p>
<h1 class="manager-title">Сообщения</h1>
<p class="manager-copy">
Здесь менеджер видит реальные шаблоны из backend-кода и может быстро проверить, что именно получает клиент в каждом канале.
</p>
</div>
<div v-if="templatesQuery.loading.value" class="manager-empty-state"> <div v-if="templatesQuery.loading.value" class="manager-empty-state">
Загружаем шаблоны... Загружаем шаблоны...
@@ -45,13 +39,12 @@ function channelLabel(channel: TemplateChannel['channel']) {
Шаблонов пока нет. Шаблонов пока нет.
</div> </div>
<div v-else class="space-y-4"> <div v-else class="space-y-6">
<article <section
v-for="template in templates" v-for="template in templates"
:key="template.id" :key="template.id"
class="surface-card rounded-3xl p-5"
> >
<h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]"> <h2 class="text-xl font-bold text-[#123824]">
{{ template.title }} {{ template.title }}
</h2> </h2>
@@ -59,13 +52,13 @@ function channelLabel(channel: TemplateChannel['channel']) {
<section <section
v-for="channel in template.channels" v-for="channel in template.channels"
:key="`${template.id}-${channel.channel}`" :key="`${template.id}-${channel.channel}`"
class="rounded-[24px] border border-[#deebe4] bg-[#fbfdfb] p-4" class="surface-card rounded-[24px] bg-white p-4"
> >
<h3 class="text-sm font-extrabold uppercase tracking-[0.14em] text-[#355947]"> <h3 class="text-sm font-extrabold uppercase tracking-[0.14em] text-[#355947]">
{{ channelLabel(channel.channel) }} {{ channelLabel(channel.channel) }}
</h3> </h3>
<div class="mt-3 rounded-[20px] bg-white p-4"> <div class="mt-3 rounded-[20px] bg-[#f8fbf9] p-4">
<p <p
v-if="channel.subject" v-if="channel.subject"
class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]" class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]"
@@ -83,18 +76,25 @@ function channelLabel(channel: TemplateChannel['channel']) {
</p> </p>
</div> </div>
<div v-if="channel.buttonText" class="mt-4 space-y-1 text-sm leading-6 text-[#355947]"> <div v-if="channel.buttonText" class="mt-4">
<p class="font-semibold text-[#123824]"> <a
v-if="channel.buttonUrl"
:href="channel.buttonUrl"
class="btn h-11 rounded-full border-0 bg-[#123824] px-5 text-white hover:bg-[#0f2f20]"
>
{{ channel.buttonText }} {{ channel.buttonText }}
</p> </a>
<p v-if="channel.buttonUrl" class="break-all text-xs text-[#5c7b69]"> <span
{{ channel.buttonUrl }} v-else
</p> class="inline-flex h-11 items-center rounded-full bg-[#123824] px-5 text-sm font-semibold text-white"
>
{{ channel.buttonText }}
</span>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</article> </section>
</div> </div>
</section> </section>
</template> </template>