fix ui

src/pages/HomePage.vue

@@ -8,6 +8,7 @@ import {
   CustomerServiceOutlined,
   TeamOutlined,
   HomeOutlined,
+  LoginOutlined,
   UserOutlined,
 } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
@@ -263,11 +264,11 @@ onMounted(load)
               هنوز نسخه‌ای برای نمایش موجودی ثبت نشده است
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ lowestSmsTenants.length }} نسخه کم‌موجودی</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -302,11 +303,11 @@ onMounted(load)
               سرور نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringServers.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -336,11 +337,11 @@ onMounted(load)
               افزونه نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringPlugins.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -370,11 +371,11 @@ onMounted(load)
               پشتیبانی نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringSupports.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -394,11 +395,11 @@ onMounted(load)
             <h3>{{ item.title }}</h3>
             <p>{{ item.desc }}</p>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ item.meta }}</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </button>
@@ -408,31 +409,32 @@ onMounted(load)
 </template>
 
 <style scoped>
-.sms-dashboard-card {
-  min-height: 196px;
-}
-
 .sms-mini-grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  flex-wrap: wrap;
-  gap: 8px;
+  gap: 6px;
-  margin-top: 14px;
+  margin-top: 8px;
 }
 
 .sms-mini-card {
   border: none;
-  border-radius: 14px;
+  border-radius: 10px;
-  padding: 10px 12px;
+  padding: 7px 9px;
   text-align: right;
   font-family: inherit;
   cursor: pointer;
   display: grid;
-  gap: 2px;
+  gap: 1px;
   color: #17324d;
+  min-width: 0;
+  flex: 1 1 calc(50% - 6px);
 }
 
 .sms-mini-card strong {
-  font-size: 0.88rem;
+  font-size: 0.82rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sms-mini-card span,
@@ -462,11 +464,11 @@ onMounted(load)
 }
 
 .sms-mini-empty {
-  grid-column: 1 / -1;
+  flex: 1 1 100%;
-  border-radius: 14px;
+  border-radius: 10px;
   background: #f5f7fb;
-  padding: 14px;
+  padding: 10px 12px;
   color: #7b8798;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 </style>

src/pages/ProductVersionsPage.vue

@@ -2,7 +2,15 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { message, Modal } from 'ant-design-vue'
-import { ArrowRightOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
+import {
+  ArrowRightOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  SkinOutlined,
+  SlidersOutlined,
+} from '@ant-design/icons-vue'
 import api from '@/api/http'
 import { useAuthStore } from '@/stores/auth'
 import { formatIranDateTime } from '@/utils/datetime'
@@ -82,6 +90,22 @@ function edit(id: string) {
   router.push({ name: 'version-edit', params: { id } })
 }
 
+function goProgramSettings(id: string) {
+  router.push({ name: 'version-program-settings', params: { id } })
+}
+
+function goAppearance(item: Tenant) {
+  router.push({
+    name:
+      product.value === 'hamkar'
+        ? 'version-ui-hamkar'
+        : item.uiVariant === 'newTheme'
+          ? 'version-ui'
+          : 'version-ui-modular',
+    params: { id: item.id },
+  })
+}
+
 function remove(record: Tenant) {
   Modal.confirm({
     title: `حذف نسخه «${record.nameFa}»؟`,
@@ -146,69 +170,55 @@ onMounted(load)
               {{ item.nameFa.slice(0, 1) }}
             </div>
             <div class="version-meta">
-              <h3>{{ item.nameFa }}</h3>
+              <div class="version-title-row">
-              <div class="domain">{{ item.domain }}</div>
+                <h3>{{ item.nameFa }}</h3>
-              <div class="created-at">ایجاد: {{ formatIranDateTime(item.createdAt) }}</div>
+                <span class="version-status" :class="item.isActive ? 'is-on' : 'is-off'">
-              <div style="margin-top: 8px">
-                <a-tag>{{ item.slug }}</a-tag>
-                <a-tag v-if="item.nameEn" color="blue">{{ item.nameEn }}</a-tag>
-                <a-tag :color="item.isActive ? 'success' : 'default'">
                   {{ item.isActive ? 'فعال' : 'غیرفعال' }}
-                </a-tag>
+                </span>
-                <a-tag v-if="item.notes?.includes('classifyConfidence:low')" color="orange">
-                  بررسی محصول
-                </a-tag>
-                <a-tag v-if="item.hasAppUiConfig" color="purple">ظاهر اپ</a-tag>
-                <a-tag v-if="item.hasProgramSettings" color="cyan">تنظیمات برنامه</a-tag>
-                <a-tag v-if="product === 'khanegi'" :color="item.uiVariant === 'newTheme' ? 'geekblue' : 'cyan'">
-                  {{ item.uiVariant === 'newTheme' ? 'New theme' : 'Modular' }}
-                </a-tag>
               </div>
+              <div class="domain">{{ item.domain }}</div>
+              <div class="created-at">{{ formatIranDateTime(item.createdAt) }}</div>
             </div>
           </div>
+          <div class="version-tags">
+            <a-tag>{{ item.slug }}</a-tag>
+            <a-tag v-if="item.nameEn" color="blue">{{ item.nameEn }}</a-tag>
+            <a-tag v-if="item.notes?.includes('classifyConfidence:low')" color="orange">
+              بررسی محصول
+            </a-tag>
+            <a-tag v-if="item.hasAppUiConfig" color="purple">ظاهر اپ</a-tag>
+            <a-tag v-if="item.hasProgramSettings" color="cyan">تنظیمات برنامه</a-tag>
+            <a-tag v-if="product === 'khanegi'" :color="item.uiVariant === 'newTheme' ? 'geekblue' : 'cyan'">
+              {{ item.uiVariant === 'newTheme' ? 'New theme' : 'Modular' }}
+            </a-tag>
+          </div>
           <div class="version-actions">
-            <a-button type="primary" ghost block style="flex: 1" @click="edit(item.id)">
+            <a-button size="small" type="primary" ghost block @click="edit(item.id)">
+              <template #icon><SettingOutlined /></template>
               مدیریت
             </a-button>
             <a-button
               v-if="product === 'khanegi'"
-              type="default"
+              size="small"
               block
-              style="flex: 1"
+              @click="goProgramSettings(item.id)"
-              @click="
-                router.push({
-                  name: 'version-program-settings',
-                  params: { id: item.id },
-                })
-              "
             >
-              تنظیمات برنامه
+              <template #icon><SlidersOutlined /></template>
+              تنظیمات
             </a-button>
-            <a-button
+            <a-button size="small" block @click="goAppearance(item)">
-              type="default"
+              <template #icon><SkinOutlined /></template>
-              block
+              ظاهر
-              style="flex: 1"
-              @click="
-                router.push({
-                  name:
-                    product === 'hamkar'
-                      ? 'version-ui-hamkar'
-                      : item.uiVariant === 'newTheme'
-                        ? 'version-ui'
-                        : 'version-ui-modular',
-                  params: { id: item.id },
-                })
-              "
-            >
-              ظاهر اپ
             </a-button>
             <a-button
               v-if="canWrite"
+              size="small"
               danger
               ghost
-              style="flex: 0 0 auto"
+              block
               @click="remove(item)"
             >
+              <template #icon><DeleteOutlined /></template>
               حذف
             </a-button>
           </div>

src/styles.css

@@ -195,20 +195,21 @@ button, input, textarea, select,
 
 .dash-modules {
   display: grid;
-  gap: 14px;
+  grid-template-columns: 1fr;
+  gap: 12px;
   margin-top: 22px;
+  align-items: stretch;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   .dash-modules {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
   }
 }
 
-@media (min-width: 1100px) {
+@media (min-width: 1600px) {
   .dash-modules {
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
@@ -219,16 +220,22 @@ button, input, textarea, select,
   cursor: pointer;
   font-family: inherit;
   background: #fff;
-  border-radius: 22px;
+  border-radius: 16px;
-  padding: 18px;
+  padding: 14px;
   box-shadow: var(--shadow);
   transition: transform 0.18s ease, box-shadow 0.18s ease;
-  min-height: 168px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: 8px;
   position: relative;
   overflow: hidden;
+  min-width: 0;
+  height: 100%;
+}
+
+.module-card .module-foot {
+  margin-top: auto;
+  padding-top: 4px;
 }
 
 .module-card:hover {
@@ -237,14 +244,14 @@ button, input, textarea, select,
 }
 
 .module-card .icon-wrap {
-  width: 48px;
+  width: 40px;
-  height: 48px;
+  height: 40px;
-  border-radius: 16px;
+  border-radius: 12px;
   display: grid;
   place-items: center;
   color: #fff;
-  font-size: 22px;
+  font-size: 18px;
-  margin-bottom: 14px;
+  margin-bottom: 8px;
 }
 
 .module-card.sms .icon-wrap { background: linear-gradient(145deg, #9b7cff, #7c5cfc); }
@@ -270,7 +277,7 @@ button, input, textarea, select,
 }
 
 .module-card .module-meta {
-  margin-top: 16px;
+  margin-top: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -280,6 +287,12 @@ button, input, textarea, select,
   font-weight: 600;
 }
 
+.module-enter {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .module-card .progress {
   height: 6px;
   border-radius: 999px;
@@ -329,12 +342,31 @@ button, input, textarea, select,
   }
 }
 
-.version-list { display: grid; gap: 12px; }
+.version-list {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .version-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1600px) {
+  .version-list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
 
 .version-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 18px;
+  border-radius: 14px;
-  padding: 14px;
+  padding: 12px;
   background: #fff;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
@@ -346,14 +378,14 @@ button, input, textarea, select,
 
 .version-card-head {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: flex-start;
 }
 
 .version-avatar {
-  width: 52px;
+  width: 40px;
-  height: 52px;
+  height: 40px;
-  border-radius: 16px;
+  border-radius: 12px;
   object-fit: cover;
   background: #f1f5f9;
   flex-shrink: 0;
@@ -364,36 +396,79 @@ button, input, textarea, select,
   place-items: center;
   color: #fff;
   font-weight: 800;
-  font-size: 1.1rem;
+  font-size: 0.95rem;
 }
 
 .version-meta { flex: 1; min-width: 0; }
 
+.version-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
 .version-meta h3 {
   margin: 0;
-  font-size: 1.05rem;
+  min-width: 0;
+  flex: 1;
+  font-size: 0.95rem;
   color: var(--ink);
   font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version-status {
+  flex-shrink: 0;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1;
+  padding: 4px 7px;
+  border-radius: 999px;
+}
+
+.version-status.is-on {
+  color: #047857;
+  background: #ecfdf5;
+}
+
+.version-status.is-off {
+  color: #64748b;
+  background: #f1f5f9;
 }
 
 .version-meta .domain {
-  margin-top: 4px;
+  margin-top: 3px;
   color: var(--ink-soft);
-  font-size: 0.85rem;
+  font-size: 0.78rem;
   word-break: break-all;
 }
 
 .version-meta .created-at {
-  margin-top: 4px;
+  margin-top: 2px;
   color: #94a3b8;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
+}
+
+.version-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.version-tags .ant-tag {
+  margin: 0;
 }
 
 .version-actions {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+  gap: 6px;
-  margin-top: 12px;
+  margin-top: auto;
+  padding-top: 10px;
 }
 
 .audit-list { display: grid; gap: 10px; }