From 005ee8c1e7f160693a9dda5ddd3ad92889ed593b Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Wed, 9 Sep 2026 17:59:10 +0330
Subject: [PATCH] added some feature for plugin 2

---
 src/pages/ProductVersionsPage.vue | 78 ++++++++++++++++---------------
 src/styles.css                    | 51 ++++++++++++++++----
 2 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/src/pages/ProductVersionsPage.vue b/src/pages/ProductVersionsPage.vue
index a81ac58..3df1c47 100644
--- a/src/pages/ProductVersionsPage.vue
+++ b/src/pages/ProductVersionsPage.vue
@@ -155,58 +155,61 @@ onMounted(load)
     <a-spin :spinning="loading">
       <div v-if="filtered.length" class="version-list">
         <article v-for="item in filtered" :key="item.id" class="version-card">
-          <div class="version-card-head">
-            <img
-              v-if="item.avatarUrl"
-              class="version-avatar"
-              :src="rewriteLegacyUploadUrl(item.avatarUrl)"
-              :alt="item.nameFa"
-            />
-            <div
-              v-else
-              class="version-avatar fallback"
-              :style="{ background: item.primaryColor || '#1d4ed8' }"
-            >
-              {{ item.nameFa.slice(0, 1) }}
-            </div>
-            <div class="version-meta">
-              <div class="version-title-row">
-                <h3>{{ item.nameFa }}</h3>
-                <span class="version-status" :class="item.isActive ? 'is-on' : 'is-off'">
-                  {{ item.isActive ? 'فعال' : 'غیرفعال' }}
-                </span>
+          <div class="version-card-body">
+            <div class="version-card-head">
+              <img
+                v-if="item.avatarUrl"
+                class="version-avatar"
+                :src="rewriteLegacyUploadUrl(item.avatarUrl)"
+                :alt="item.nameFa"
+              />
+              <div
+                v-else
+                class="version-avatar fallback"
+                :style="{ background: item.primaryColor || '#1d4ed8' }"
+              >
+                {{ item.nameFa.slice(0, 1) }}
+              </div>
+              <div class="version-meta">
+                <div class="version-title-row">
+                  <h3>{{ item.nameFa }}</h3>
+                  <span class="version-status" :class="item.isActive ? 'is-on' : 'is-off'">
+                    {{ item.isActive ? 'فعال' : 'غیرفعال' }}
+                  </span>
+                </div>
+                <div class="domain">{{ item.domain }}</div>
+                <div class="created-at">{{ formatIranDateTime(item.createdAt) }}</div>
               </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
+              v-if="item.notes?.includes('classifyConfidence:low') || product === 'khanegi'"
+              class="version-tags"
+            >
+              <a-tag v-if="item.notes?.includes('classifyConfidence:low')" color="orange">
+                بررسی محصول
+              </a-tag>
+              <a-tag
+                v-if="product === 'khanegi'"
+                :color="item.uiVariant === 'newTheme' ? 'geekblue' : 'cyan'"
+              >
+                {{ item.uiVariant === 'newTheme' ? 'New theme' : 'Modular' }}
+              </a-tag>
+            </div>
           </div>
           <div class="version-actions">
-            <a-button size="small" type="primary" ghost block @click="edit(item.id)">
+            <a-button size="small" type="primary" ghost @click="edit(item.id)">
               <template #icon><SettingOutlined /></template>
               مدیریت
             </a-button>
             <a-button
               v-if="product === 'khanegi'"
               size="small"
-              block
               @click="goProgramSettings(item.id)"
             >
               <template #icon><SlidersOutlined /></template>
               تنظیمات
             </a-button>
-            <a-button size="small" block @click="goAppearance(item)">
+            <a-button size="small" @click="goAppearance(item)">
               <template #icon><SkinOutlined /></template>
               ظاهر
             </a-button>
@@ -215,7 +218,6 @@ onMounted(load)
               size="small"
               danger
               ghost
-              block
               @click="remove(item)"
             >
               <template #icon><DeleteOutlined /></template>
diff --git a/src/styles.css b/src/styles.css
index d3599c1..25314a0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -344,8 +344,11 @@ button, input, textarea, select,
 
 .version-list {
   display: grid;
-  gap: 10px;
+  gap: 12px;
   grid-template-columns: 1fr;
+  padding: 12px;
+  background: var(--bg);
+  border-radius: 16px;
 }
 
 @media (min-width: 768px) {
@@ -364,18 +367,28 @@ button, input, textarea, select,
   display: flex;
   flex-direction: column;
   min-width: 0;
+  overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 12px;
+  border-radius: 16px;
+  padding: 0;
   background: #fff;
+  box-shadow: 0 1px 2px rgba(45, 55, 72, 0.05);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
 .version-card:hover {
-  border-color: rgba(32, 201, 151, 0.35);
+  border-color: rgba(32, 201, 151, 0.28);
   box-shadow: var(--shadow);
 }
 
+.version-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 12px 10px;
+  min-width: 0;
+}
+
 .version-card-head {
   display: flex;
   gap: 10px;
@@ -383,12 +396,13 @@ button, input, textarea, select,
 }
 
 .version-avatar {
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   border-radius: 12px;
   object-fit: cover;
   background: #f1f5f9;
   flex-shrink: 0;
+  border: 1px solid var(--line);
 }
 
 .version-avatar.fallback {
@@ -456,7 +470,6 @@ button, input, textarea, select,
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-top: 8px;
 }
 
 .version-tags .ant-tag {
@@ -464,11 +477,29 @@ button, input, textarea, select,
 }
 
 .version-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: nowrap;
   gap: 6px;
   margin-top: auto;
-  padding-top: 10px;
+  padding: 8px;
+  background: #f4f7fb;
+  border-top: 1px solid var(--line);
+}
+
+.version-actions .ant-btn {
+  flex: 1 1 0;
+  min-width: 0;
+  padding-inline: 6px;
+}
+
+@media (max-width: 479px) {
+  .version-actions {
+    flex-wrap: wrap;
+  }
+
+  .version-actions .ant-btn {
+    flex: 1 1 calc(50% - 3px);
+  }
 }
 
 .audit-list { display: grid; gap: 10px; }