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

Redesign client cabinet UI with capsule nav and card layouts

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-01 18:59:20 +07:00
parent 5b5f6250d3
commit b4537c1483
9 changed files with 598 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/pages/profile.vue
View File

@@ -13,8 +13,30 @@ const registerMutation = useMutation(RegisterSelfDocument);
const messengerMutation = useMutation(ConnectMessengerDocument);
const message = ref('');
const messageTone = ref<'success' | 'error'>('success');
registerMutation.onDone(() => {
message.value = 'Заявка на регистрацию отправлена менеджеру';
messageTone.value = 'success';
});
registerMutation.onError((error) => {
message.value = error.message;
messageTone.value = 'error';
});
messengerMutation.onDone(() => {
message.value = 'Канал уведомлений подключен';
messageTone.value = 'success';
});
messengerMutation.onError((error) => {
message.value = error.message;
messageTone.value = 'error';
});
function register() {
message.value = '';
registerMutation.mutate({
input: {
companyName: companyName.value,
@@ -22,50 +44,62 @@ function register() {
contactName: contactName.value,
email: email.value,
},
}).then(() => {
message.value = 'Заявка на регистрацию отправлена менеджеру';
});
}
function connectMessenger() {
message.value = '';
messengerMutation.mutate({
input: {
type: channelType.value,
channelId: channelId.value,
},
}).then(() => {
message.value = 'Канал уведомлений подключен';
});
}
</script>
<template>
<section class="space-y-6 max-w-2xl">
<h1 class="text-2xl font-bold">Профиль и каналы уведомлений</h1>
<section class="space-y-6">
<div>
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Профиль</h1>
<p class="mt-1 text-sm text-[#28543f]/80">Регистрация компании и подключение каналов уведомлений.</p>
</div>
<div class="card bg-base-100 border border-base-300">
<div class="card-body space-y-3">
<h2 class="card-title">Самостоятельная регистрация</h2>
<input v-model="companyName" type="text" placeholder="Компания" class="input input-bordered" />
<input v-model="inn" type="text" placeholder="ИНН" class="input input-bordered" />
<input v-model="contactName" type="text" placeholder="Контактное лицо" class="input input-bordered" />
<input v-model="email" type="email" placeholder="Email" class="input input-bordered" />
<button class="btn btn-primary" @click="register">Отправить заявку</button>
<div class="grid gap-4 lg:grid-cols-2">
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Самостоятельная регистрация</h2>
<div class="mt-4 space-y-3">
<input v-model="companyName" type="text" placeholder="Компания" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
<input v-model="inn" type="text" placeholder="ИНН" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
<input v-model="contactName" type="text" placeholder="Контактное лицо" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
<input v-model="email" type="email" placeholder="Email" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
<button class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]" :disabled="registerMutation.loading.value" @click="register">
{{ registerMutation.loading.value ? 'Отправляем…' : 'Отправить заявку' }}
</button>
</div>
</div>
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Каналы уведомлений</h2>
<div class="mt-4 space-y-3">
<select v-model="channelType" class="select select-bordered w-full border-[#d0e8d8] bg-white/80">
<option value="TELEGRAM">Telegram</option>
<option value="MAX">Max</option>
</select>
<input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
<button class="btn w-full border-0 bg-[#ff5600] text-white hover:bg-[#e24e00]" :disabled="messengerMutation.loading.value" @click="connectMessenger">
{{ messengerMutation.loading.value ? 'Подключаем…' : 'Подключить канал' }}
</button>
</div>
</div>
</div>
<div class="card bg-base-100 border border-base-300">
<div class="card-body space-y-3">
<h2 class="card-title">Подключение мессенджера</h2>
<select v-model="channelType" class="select select-bordered">
<option value="TELEGRAM">Telegram</option>
<option value="MAX">Max</option>
</select>
<input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered" />
<button class="btn btn-secondary" @click="connectMessenger">Подключить канал</button>
</div>
<div
v-if="message"
class="alert"
:class="messageTone === 'success' ? 'alert-success' : 'alert-error'"
>
{{ message }}
</div>
<div v-if="message" class="alert alert-success">{{ message }}</div>
</section>
</template>