controlPanel/web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
mohmdsdg
2026-09-09 12:14:03 +03:30
parent 08a90f0074
commit c2f2b23afe
3 changed files with 191 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/HomePage.vue
+28 -26
View File
@@ -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;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.sms-mini-card {
border: none;
border-radius: 14px;
padding: 10px 12px;
border-radius: 10px;
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;
border-radius: 14px;
flex: 1 1 100%;
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
+55 -45
View File
@@ -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="domain">{{ item.domain }}</div>
<div class="created-at">ایجاد: {{ formatIranDateTime(item.createdAt) }}</div>
<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'">
<div class="version-title-row">
<h3>{{ item.nameFa }}</h3>
<span class="version-status" :class="item.isActive ? 'is-on' : 'is-off'">
{{ item.isActive ? 'فعال' : 'غیرفعال' }}
</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>
</span>
</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="
router.push({
name: 'version-program-settings',
params: { id: item.id },
})
"
@click="goProgramSettings(item.id)"
>
تنظیمات برنامه
<template #icon><SlidersOutlined /></template>
تنظیمات
</a-button>
<a-button
type="default"
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 size="small" block @click="goAppearance(item)">
<template #icon><SkinOutlined /></template>
ظاهر
</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
+108 -33
View File
@@ -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;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@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;
padding: 18px;
border-radius: 16px;
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;
height: 48px;
border-radius: 16px;
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
font-size: 22px;
margin-bottom: 14px;
font-size: 18px;
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;
padding: 14px;
border-radius: 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;
height: 52px;
border-radius: 16px;
width: 40px;
height: 40px;
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;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin-top: auto;
padding-top: 10px;
}
.audit-list { display: grid; gap: 10px; }