added some feature for plugin 2

src/pages/ProductVersionsPage.vue

@@ -155,6 +155,7 @@ 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-body">
             <div class="version-card-head">
               <img
                 v-if="item.avatarUrl"
@@ -180,33 +181,35 @@ onMounted(load)
                 <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>
+            <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="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'">
+              <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>

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; }