fix

2026-07-07 17:36:43 +03:30
parent b9ef684b51
commit 38a396ba21
89 changed files with 1815 additions and 478 deletions
@@ -13,31 +13,28 @@

        <template v-else-if="user">
          <div class="user-details__section">
-            <div v-if="isStudent && !user.profileCompleted" class="user-details__notice">
-              <SvgIcon name="warning" :size="20" color="var(--color-primary)" />
-              <span>اطلاعات ثبت نام این دانشجو کامل نیست.</span>
-            </div>
-
-            <div class="user-details__head">
-              <div class="user-details__avatar">
-                <img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="fullName" />
-                <SvgIcon v-else name="user" :size="48" color="#cbd5e1" />
-              </div>
-              <div class="user-details__identity">
-                <div class="user-details__status" :class="statusModifier">
-                  <span class="user-details__status-dot" />
-                  <span>{{ user.status === 'blocked' ? 'غیر فعال' : 'فعال' }}</span>
+            <div class="user-details__row user-details__row--main">
+              <div class="user-details__head">
+                <div class="user-details__avatar">
+                  <img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="fullName" />
+                  <SvgIcon v-else name="user" :size="48" color="#cbd5e1" />
+                </div>
+                <div class="user-details__identity">
+                  <div class="user-details__status" :class="statusModifier">
+                    <span class="user-details__status-dot" />
+                    <span>{{ user.status === 'blocked' ? 'غیر فعال' : 'فعال' }}</span>
+                  </div>
+                  <p class="user-details__label">نام و نام خانوادگی</p>
+                  <p class="user-details__name">{{ fullName || '—' }}</p>
+                  <Badge
+                    class="user-details__role"
+                    :variant="roleVariant"
+                    label="نقش:"
+                    :value="roleText"
+                    dot
+                  />
                </div>
-                <p class="user-details__label">نام و نام خانوادگی</p>
-                <p class="user-details__name">{{ fullName || '—' }}</p>
-                <p class="user-details__role">
-                  <span class="user-details__role-key">نقش:</span>
-                  <span class="user-details__role-val">{{ roleText }}</span>
-                </p>
              </div>
-            </div>
-
-            <div class="user-details__grid">
              <LineInfoBlock
                title="تاریخ تولد"
                :numeric-desc="formatJalaaliDate(user.birthday) || '—'"
@@ -49,11 +46,14 @@
                :desc="MARITAL_STATUS[user.marriageStatus] || '—'"
              />
              <LineInfoBlock title="جنسیت" :desc="GENDER[user.gender] || '—'" />
-              <LineInfoBlock title="استان" :desc="user?.province?.name || '—'" />
-              <LineInfoBlock title="شهر" :desc="user?.city?.name || '—'" />
            </div>

-            <LineInfoBlock title="آدرس" :desc="user?.address || '—'" />
+            <div class="user-details__row user-details__row--location">
+              <LineInfoBlock title="استان" :desc="user?.province?.name || '—'" />
+              <LineInfoBlock title="شهر" :desc="user?.city?.name || '—'" />
+              <LineInfoBlock title="آدرس" :desc="user?.address || '—'" />
+            </div>
+
            <LineInfoBlock title="بیوگرافی" :desc="user.bio || '—'" />
          </div>

@@ -95,6 +95,7 @@

 <script setup>
 import { computed } from 'vue'
+import Badge from '@/components/Badge.vue'
 import useModal from '@/composables/useModal'
 import BasicModal from '@/components/BasicModal.vue'
 import BaseButton from '@/components/BaseButton.vue'
@@ -137,6 +138,16 @@ const roleText = computed(() => {
  return name ? ROLE_LABELS[name] || name : 'بدون نقش'
 })

+const ROLE_BADGE_VARIANTS = {
+  student: 'danger',
+  teacher: 'warning',
+  counselor: 'blue',
+  missionary: 'info',
+  admin: 'neutral',
+}
+
+const roleVariant = computed(() => ROLE_BADGE_VARIANTS[roleName.value] || 'neutral')
+
 const isStudent = computed(() => roleName.value === 'student')

 const statusModifier = computed(() =>
@@ -172,7 +183,43 @@ const statusModifier = computed(() =>
    display: flex;
    align-items: center;
    gap: 0.875rem;
-    margin-bottom: 0.75rem;
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  &__row--main {
+    align-items: center;
+
+    @media (min-width: 640px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: auto repeat(5, 1fr);
+    }
+  }
+
+  &__row--main &__head {
+    grid-column: 1 / -1;
+
+    @media (min-width: 1024px) {
+      grid-column: auto;
+    }
+  }
+
+  &__row--location {
+    @media (min-width: 640px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
  }

  &__avatar {
@@ -245,23 +292,7 @@ const statusModifier = computed(() =>
  }

  &__role {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    margin: 0.25rem 0 0;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.375rem;
-    background-color: rgba(0, 0, 0, 4%);
-    font-family: var(--font-family-fa);
-    font-size: 0.75rem;
-  }
-
-  &__role-key {
-    color: #808080;
-  }
-
-  &__role-val {
-    font-weight: 500;
+    margin-top: 0.25rem;
  }

  &__grid {