This commit is contained in:
marzban-dev
2025-04-16 23:27:43 +03:30
21 changed files with 201 additions and 142 deletions
@@ -10,11 +10,14 @@ import { QUERY_KEYS } from "~/constants";
type Props = {
address?: Address;
isSelected?: boolean;
selectable?: boolean;
};
// props
defineProps<Props>();
withDefaults(defineProps<Props>(), {
selectable: true,
});
// emit
@@ -63,7 +66,9 @@ const handleDeleteAddress = (id: number) => {
<template>
<button
@click.prevent="!!address ? emit('select', address) : null"
@click.prevent="
!!address && selectable ? emit('select', address) : null
"
:class="
isSelected
? 'border-transparent ring-2 ring-offset-2 ring-blue-500'
@@ -76,7 +81,7 @@ const handleDeleteAddress = (id: number) => {
</div>
<span class="flex items-center justify-between w-full gap-3">
<div
class="flex items-center gap-3 lg:text-[1.125rem] font-semibold text-slate-900"
class="flex items-center gap-3 max-lg:text-sm font-semibold text-slate-900"
>
{{ !!address ? address.name : "آدرس" }}
<span
@@ -101,7 +106,7 @@ const handleDeleteAddress = (id: number) => {
>
<div class="w-full lg:w-9/12 overflow-hidden">
<div
class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-sm text-slate-700"
class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-xs lg:text-sm text-slate-700"
>
{{
!!address
@@ -138,7 +138,7 @@ watch(
:variant="!!address ? 'ghost' : 'solid'"
:class="!!address ? '!bg-transparent !underline' : ''"
>
<span class="whitespace-pre">
<span class="whitespace-pre max-lg:text-xs">
{{ !!address ? "ویرایش" : "افزودن آدرس" }}
</span>
</Button>
+1 -2
View File
@@ -44,8 +44,7 @@ const { isLoading } = useImage({ src: src.value ?? "" });
<div class="size-full rounded-full flex-center">
<Icon
name="ci:profile"
size="16"
class="**:stroke-black"
class="**:stroke-black text-lg"
:class="iconClass"
/>
</div>
+1 -1
View File
@@ -77,7 +77,7 @@ const isShow = computed({
/>
</DialogClose>
<DialogTitle
class="typo-sub-h-xl font-semibold flex items-center gap-3"
class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3"
>
{{ title }}
<Icon
@@ -53,18 +53,20 @@ const handleSubmit = () => {
<template #content>
<div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
<p class="leading-[175%]">
<p class="leading-[175%] text-xs lg:text-sm">
با خارج شدن از حساب کاربری، دسترسی شما به برخی از امکانات
محدود خواهد شد. اگر قصد دارید دوباره وارد شوید، میتوانید از
همان اطلاعات حساب خود استفاده کنید.
</p>
<p>ما همیشه منتظر بازگشت شما هستیم! 😊</p>
<p class="text-xs lg:text-sm">
ما همیشه منتظر بازگشت شما هستیم! 😊
</p>
</div>
<div class="py-6 border-t border-slate-200 flex gap-3">
<Button
@click="handleSubmit"
class="rounded-full px-10"
class="rounded-full px-5 lg:px-10"
size="md"
>
<Icon
@@ -76,7 +78,7 @@ const handleSubmit = () => {
<DialogClose aria-label="Close">
<Button
variant="outlined"
class="rounded-full px-10"
class="rounded-full px-5 lg:px-10"
size="md"
>
نه فعلا هستم
@@ -23,7 +23,7 @@ const toggleSidebar = inject("toggleSidebar");
<button class="flex-center lg:hidden" @click="toggleSidebar">
<Icon name="bi:chevron-right" size="18" class="**:fill-black" />
</button>
<p class="font-semibold lg:text-lg text-black">
<p class="font-semibold text-sm lg:text-lg text-black">
{{ title }}
</p>
</div>
@@ -22,9 +22,9 @@ withDefaults(defineProps<Props>(), {
}"
>
<div
class="w-full flex items-center justify-between h-[2rem] lg:h-[3rem] px-5"
class="w-full flex items-center justify-between h-[2rem] lg:h-[3rem] lg:px-5"
>
<span class="typo-sub-h-md lg:typo-sub-h-lg">{{ title }}</span>
<span class="text-sm lg:text-lg">{{ title }}</span>
<slot name="button" />
</div>
</div>
@@ -116,14 +116,14 @@ const toggleSidebar = inject("toggleSidebar");
? 'bg-black text-slate-100 **:fill-slate-100'
: '**:fill-black hover:bg-gray-200'
"
class="flex items-center justify-between transition-all rounded-lg py-4 px-3"
class="flex items-center justify-between transition-all rounded-lg py-3.5 lg:py-4 px-3"
@click="toggleSidebar"
>
<span class="flex-center gap-3">
<div class="size-5 flex-center">
<Icon :name="link.icon" />
</div>
<span class="text-sm">{{ link.title }}</span>
<span class="text-xs lg:text-sm">{{ link.title }}</span>
</span>
<Icon name="bi:chevron-left" class="transition-all" />
@@ -141,7 +141,9 @@ const toggleSidebar = inject("toggleSidebar");
class="**:fill-danger-500"
/>
</div>
<span class="text-sm"> خروج از حساب </span>
<span class="text-xs lg:text-sm">
خروج از حساب
</span>
</span>
<Icon
@@ -84,7 +84,13 @@ onFileDialogChange((files: any) => {
</script>
<template>
<Modal v-model="visible" title="عکس پروفایل" icon="bi:image" iconSize="20">
<Modal
v-model="visible"
title="عکس پروفایل"
icon="bi:image"
iconSize="20"
contectClass="w-full max-lg:container lg:!w-[30vw]"
>
<template #trigger>
<button
class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
@@ -93,61 +99,62 @@ onFileDialogChange((files: any) => {
</button>
</template>
<template #content>
<div class="w-max">
<div
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
>
<div
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
>
<div
class="flex items-center justify-between w-full flex-wrap gap-4 max-w-[500px]"
<button
v-for="(avatar, index) in avatars"
:key="index"
class="size-16 lg:size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
>
<button
v-for="(avatar, index) in avatars"
:key="index"
class="size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
>
<Avatar
:src="avatar"
:alt="`avatar-${index}`"
class="size-full"
/>
</button>
</div>
<Avatar
:src="avatar"
:alt="`avatar-${index}`"
class="size-full"
/>
</button>
</div>
<div
class="w-full flex-center gap-4 max-w-[500px] flex-wrap"
<div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
<button
class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
</div>
<div class="w-full flex-col-center gap-5">
<Avatar
:src="currentProfile"
alt=""
class="!size-24 lg:!size-32"
iconClass="!text-xl lg:!text-2xl"
/>
<Button
class="rounded-full w-[8rem]"
@click="openFileDialog"
:loading="updateAccountIsPending"
size="md"
>
<button
class="size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
<Icon
v-if="updateAccountIsPending"
name="svg-spinners:3-dots-bounce"
/>
<button
class="size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
</div>
<div class="w-full flex-col-center gap-5">
<Avatar :src="currentProfile" alt="" class="!size-32" />
<Button
class="rounded-full w-[8rem]"
@click="openFileDialog"
:loading="updateAccountIsPending"
size="md"
>
<Icon
v-if="updateAccountIsPending"
name="svg-spinners:3-dots-bounce"
/>
<span v-else>آپلود عکس شما</span>
</Button>
</div>
<span v-else>آپلود عکس شما</span>
</Button>
</div>
</div>
</template>
@@ -6,14 +6,16 @@
>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3">
<Icon name="bi:info-circle" size="20" />
<h3 class="typo-sub-h-md font-semibold">تغییر وضعیت سفارش</h3>
<Icon name="bi:info-circle" class="lg:text-lg" />
<h3 class="max-lg:text-sm font-semibold">تغییر وضعیت سفارش</h3>
|
<span class="typo-p-xs text-cyan-500 font-semibold">
<span class="text-xs text-cyan-500 font-semibold">
۲۳ تیر
</span>
</div>
<p class="typo-p-sm text-slate-700 text-justify">
<p
class="text-xs lg:text-sm leading-[175%] text-slate-700 text-justify"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
@@ -26,21 +26,23 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
>
<td
scope="row"
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap"
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
:class="data.order_id ? 'text-cyan-500' : 'text-black'"
>
{{ data.order_id ? `${data.order_id}#` : "--" }}
</td>
<td class="w-3/12 px-6 py-6">
<td
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
>
{{ data.created_at ? createdTimeAgo : "--" }}
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
{{ data.count ? data.count : "--" }}
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
{{ data.final_price ? data.final_price : "--" }}
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 whitespace-pre shrink-0">
<div
class="w-max rounded-full py-1.5 px-3 text-xs border"
:class="{
@@ -61,7 +63,7 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
{{ data.verbose_status ? data.verbose_status : "--" }}
</div>
</td>
<td class="w-1/12 px-6 py-6">
<td class="w-1/12 px-6 py-6 shrink-0">
<NuxtLink
:to="{
name: 'profile-purchases-and-orders-id',
@@ -69,7 +71,7 @@ const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
}"
>
<button
class="size-10 flex-center border border-slate-200 rounded-md"
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
>
<Icon
name="ci:eye-open"
@@ -6,23 +6,23 @@
>
<td
scope="row"
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
class="w-3/12 px-6 py-6 shrink-0 font-medium whitespace-nowrap text-black"
>
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-3/12 px-6 py-6">
<td class="w-3/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 shrink-0">
<Skeleton class="w-full !h-10 !rounded-sm" />
</td>
<td class="w-1/12 px-6 py-6">
<td class="w-1/12 px-6 py-6 shrink-0">
<Skeleton class="!size-10 !rounded-sm" />
</td>
</tr>
@@ -27,14 +27,16 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
>
<td
scope="row"
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
>
{{ data.ticket_category ? data.ticket_category : "--" }}
</td>
<td class="w-3/12 px-6 py-6">
{{ data.subject ? data.subject : "--" }}
</td>
<td class="w-3/12 px-6 py-6 flex flex-col gap-3 text-sm">
<td
class="w-3/12 px-6 py-6 flex flex-col gap-3 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
>
<span class="w-full whitespace-pre">
ایجاد : {{ data.created_at ? createdTimeAgo : "--" }}
</span>
@@ -42,7 +44,7 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
بروزرسانی : {{ data.updated_at ? updatedTimeAgo : "--" }}
</span>
</td>
<td class="w-2/12 px-6 py-6">
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
<div
class="w-max rounded-full py-1.5 px-3 text-xs border"
:class="{
@@ -57,12 +59,12 @@ const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
{{ data.status ? data.status : "--" }}
</div>
</td>
<td class="w-1/12 px-6 py-6">
<td class="w-1/12 px-6 py-6 shrink-0">
<NuxtLink
:to="{ name: 'profile-tickets-id', params: { id: data.id } }"
>
<button
class="size-10 flex-center border border-slate-200 rounded-md"
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
>
<Icon
name="ci:eye-open"