landing desktop

2026-06-12 20:16:14 +03:30
parent 820e80ac16
commit 5eec309b54
89 changed files with 4343 additions and 2309 deletions
@@ -0,0 +1,120 @@
+<template>
+  <div ref="rootRef" class="relative">
+    <button
+      type="button"
+      class="transition"
+      :class="triggerClass"
+      @click="profileMenu.toggle()"
+    >
+      <AppIcon
+        v-if="variant === 'desktop-cta' || variant === 'bottom-nav'"
+        name="user"
+        :size="variant === 'bottom-nav' ? 'lg' : 'sm'"
+      />
+      <span
+        class="max-w-[9rem] truncate"
+        :dir="labelIsMobile ? 'ltr' : undefined"
+      >
+        {{ triggerLabel }}
+      </span>
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-if="profileMenu.isOpen"
+        class="absolute z-50 max-h-[min(70dvh,32rem)] w-80 max-w-[calc(100vw-2rem)] overflow-y-auto rounded-2xl border border-border bg-surface p-4 shadow-xl dark:border-slate-700 dark:bg-[#121a24]"
+        :class="panelClass"
+      >
+        <ProfilePanel />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { onClickOutside, onKeyStroke } from '@vueuse/core';
+import ProfilePanel from '@/components/profile/ProfilePanel.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import { useAuthStore } from '@/stores/auth';
+import { useProfileModalStore } from '@/stores/profile-modal';
+import { userDisplayName, userDisplayNameIsMobile } from '@/utils/user-display';
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'header' | 'sidebar' | 'desktop-cta' | 'bottom-nav';
+  }>(),
+  { variant: 'header' },
+);
+
+const auth = useAuthStore();
+const profileMenu = useProfileModalStore();
+const rootRef = ref<HTMLElement | null>(null);
+
+const triggerLabel = computed(() => userDisplayName(auth.user));
+const labelIsMobile = computed(() => userDisplayNameIsMobile(auth.user));
+
+const triggerClass = computed(() => {
+  const active = profileMenu.isOpen;
+
+  if (props.variant === 'bottom-nav') {
+    return [
+      'flex w-full flex-col items-center gap-0.5 rounded-xl px-2 py-2 text-xs',
+      active
+        ? 'bg-brand-500/15 text-brand-700 dark:text-brand-500'
+        : 'text-muted hover:bg-surface-3 hover:text-text',
+    ];
+  }
+
+  if (props.variant === 'desktop-cta') {
+    return [
+      'inline-flex items-center gap-2 text-sm font-semibold',
+      active
+        ? 'rounded-lg border border-brand-600 px-5 py-2.5 text-[15px] text-brand-600 dark:border-brand-400 dark:text-brand-400'
+        : 'rounded-lg border border-slate-300 px-5 py-2.5 text-[15px] text-slate-700 hover:border-brand-600 hover:text-brand-600 dark:border-slate-600 dark:text-slate-200 dark:hover:border-brand-400 dark:hover:text-brand-400',
+    ];
+  }
+
+  if (props.variant === 'sidebar') {
+    return [
+      'inline-flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-semibold',
+      active
+        ? 'bg-brand-500/15 text-brand-700 dark:text-brand-500'
+        : 'text-muted hover:bg-surface-3 hover:text-text',
+    ];
+  }
+
+  return [
+    'inline-flex items-center rounded-xl px-3 py-2 text-sm font-semibold',
+    active
+      ? 'bg-brand-500/15 text-brand-700 dark:text-brand-500'
+      : 'text-muted hover:bg-surface-3 hover:text-text',
+  ];
+});
+
+const panelClass = computed(() => {
+  if (props.variant === 'bottom-nav') {
+    return 'bottom-full mb-2 left-1/2 -translate-x-1/2';
+  }
+  return 'top-full mt-2 end-0';
+});
+
+onClickOutside(rootRef, () => {
+  if (profileMenu.isOpen) {
+    profileMenu.close();
+  }
+});
+
+onKeyStroke('Escape', (event) => {
+  if (!profileMenu.isOpen) return;
+  event.preventDefault();
+  profileMenu.close();
+});
+</script>
@@ -0,0 +1,13 @@
+<template>
+  <AppModal :open="profileModal.isOpen" title="پروفایل" @close="profileModal.close()">
+    <ProfilePanel />
+  </AppModal>
+</template>
+
+<script setup lang="ts">
+import ProfilePanel from '@/components/profile/ProfilePanel.vue';
+import AppModal from '@/components/ui/AppModal.vue';
+import { useProfileModalStore } from '@/stores/profile-modal';
+
+const profileModal = useProfileModalStore();
+</script>
@@ -0,0 +1,158 @@
+<template>
+  <div v-if="auth.user" class="space-y-4">
+    <p
+      v-if="message"
+      class="rounded-xl border border-brand-500/40 bg-brand-500/10 px-4 py-3 text-sm text-brand-700 dark:text-brand-500"
+    >
+      {{ message }}
+    </p>
+    <p
+      v-if="error"
+      class="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
+    >
+      {{ error }}
+    </p>
+
+    <dl class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
+      <div class="flex items-center justify-between gap-4">
+        <dt class="shrink-0 text-xs text-muted">موبایل</dt>
+        <dd class="font-medium" dir="ltr">{{ auth.user.mobile }}</dd>
+      </div>
+      <div class="flex items-center justify-between gap-4">
+        <dt class="shrink-0 text-xs text-muted">نقش</dt>
+        <dd class="font-medium">{{ roleLabel }}</dd>
+      </div>
+    </dl>
+
+    <section
+      v-if="auth.isCustomer"
+      class="rounded-2xl border border-border bg-surface-2 p-4"
+    >
+      <h2 class="text-sm font-semibold text-text">کسب‌وکار من</h2>
+      <p class="mt-1 text-xs text-muted">
+        می‌توانید درخواست ثبت کسب‌وکار دهید تا پس از تأیید مدیریت، پنل صاحب کسب‌وکار فعال شود.
+      </p>
+      <RouterLink
+        to="/app/register-business"
+        class="mt-3 inline-flex w-full items-center justify-center rounded-xl bg-brand-600 px-4 py-3 text-sm font-semibold text-white"
+        @click="profileModal.close()"
+      >
+        ثبت کسب‌وکار من
+      </RouterLink>
+    </section>
+
+    <section
+      v-else-if="auth.isBusinessOwner"
+      class="rounded-2xl border border-border bg-surface-2 p-4"
+    >
+      <h2 class="text-sm font-semibold text-text">مدیریت کسب‌وکار</h2>
+      <RouterLink
+        to="/app/owner"
+        class="mt-3 inline-flex w-full items-center justify-center rounded-xl border border-border px-4 py-3 text-sm font-semibold text-text hover:bg-surface-3"
+        @click="profileModal.close()"
+      >
+        ورود به پنل کسب‌وکار
+      </RouterLink>
+    </section>
+
+    <section class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
+      <h2 class="text-sm font-semibold text-text">
+        {{ auth.user.hasPassword ? 'تغییر رمز عبور' : 'تنظیم رمز عبور' }}
+      </h2>
+      <p class="text-xs text-muted">
+        پس از تنظیم رمز، ورود با رمز عبور یا کد یکبارمصرف هر دو ممکن است.
+      </p>
+
+      <AppInput id="profileNewPassword" v-model="newPassword" label="رمز جدید" type="password" ltr />
+      <AppInput
+        id="profileConfirmPassword"
+        v-model="confirmPassword"
+        label="تکرار رمز جدید"
+        type="password"
+        ltr
+      />
+      <AppButton :loading="saving" @click="onSavePassword">
+        {{ auth.user.hasPassword ? 'به‌روزرسانی رمز' : 'ذخیره رمز' }}
+      </AppButton>
+    </section>
+
+    <section class="rounded-2xl border border-border bg-surface-2 p-4">
+      <h2 class="text-sm font-semibold text-text">خروج از حساب</h2>
+      <p class="mt-1 text-xs text-muted">
+        با خروج، برای رزرو مجدد باید دوباره وارد شوید.
+      </p>
+      <AppButton variant="danger" class="mt-3" @click="onLogout">
+        خروج
+      </AppButton>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { setPassword } from '@/api/auth';
+import { ApiError } from '@/api/client';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import { useAuthStore } from '@/stores/auth';
+import { useProfileModalStore } from '@/stores/profile-modal';
+
+const auth = useAuthStore();
+const profileModal = useProfileModalStore();
+const router = useRouter();
+
+const newPassword = ref('');
+const confirmPassword = ref('');
+const saving = ref(false);
+const error = ref('');
+const message = ref('');
+
+const roleLabel = computed(() => {
+  switch (auth.user?.role) {
+    case 'admin':
+      return 'مدیر سیستم';
+    case 'business_owner':
+      return 'صاحب کسب‌وکار';
+    default:
+      return 'مشتری';
+  }
+});
+
+function onLogout() {
+  profileModal.close();
+  auth.logout();
+  void router.push({ name: 'app-home' });
+}
+
+async function onSavePassword() {
+  if (!auth.user) return;
+  error.value = '';
+  message.value = '';
+
+  if (newPassword.value.length < 8) {
+    error.value = 'رمز باید حداقل ۸ کاراکتر باشد.';
+    return;
+  }
+  if (newPassword.value !== confirmPassword.value) {
+    error.value = 'تکرار رمز با رمز جدید یکسان نیست.';
+    return;
+  }
+
+  saving.value = true;
+  try {
+    const updated = await setPassword({
+      password: newPassword.value,
+      confirmPassword: confirmPassword.value,
+    });
+    auth.setUser(updated);
+    newPassword.value = '';
+    confirmPassword.value = '';
+    message.value = 'رمز عبور ذخیره شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره رمز';
+  } finally {
+    saving.value = false;
+  }
+}
+</script>