Creating a control panel infrastructure
This commit is contained in:
+138
-12
@@ -10,25 +10,32 @@ import {
|
||||
import { message } from 'ant-design-vue'
|
||||
import api from '@/api/http'
|
||||
|
||||
type Tenant = { id: string; product: 'hamkar' | 'khanegi' }
|
||||
type BalanceLevel = 'healthy' | 'warning' | 'critical' | 'unknown'
|
||||
|
||||
type SmsSummary = {
|
||||
balanceRials: number | null
|
||||
balanceLabel: string
|
||||
balanceLevel: BalanceLevel
|
||||
}
|
||||
|
||||
type Tenant = {
|
||||
id: string
|
||||
product: 'hamkar' | 'khanegi'
|
||||
slug?: string
|
||||
nameFa?: string
|
||||
sms?: SmsSummary
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
const tenants = ref<Tenant[]>([])
|
||||
const smsTenants = ref<Tenant[]>([])
|
||||
|
||||
const hamkarCount = computed(() => tenants.value.filter((t) => t.product === 'hamkar').length)
|
||||
const khanegiCount = computed(() => tenants.value.filter((t) => t.product === 'khanegi').length)
|
||||
const lowestSmsTenants = computed(() => smsTenants.value.slice(0, 5))
|
||||
|
||||
const modules = computed(() => [
|
||||
{
|
||||
key: 'sms',
|
||||
className: 'sms',
|
||||
title: 'پنل پیامکی',
|
||||
desc: 'ارسال و مدیریت پیامک مشترک برای همکار و خانگی در یکجا',
|
||||
meta: 'مرکزی',
|
||||
icon: MessageOutlined,
|
||||
to: { name: 'sms-panel' as const },
|
||||
},
|
||||
{
|
||||
key: 'server',
|
||||
className: 'server',
|
||||
@@ -61,8 +68,12 @@ const modules = computed(() => [
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const { data } = await api.get('/tenants')
|
||||
tenants.value = data
|
||||
const [tenantsRes, lowestRes] = await Promise.all([
|
||||
api.get('/tenants'),
|
||||
api.get('/sms/lowest', { params: { limit: 5 } }),
|
||||
])
|
||||
tenants.value = tenantsRes.data
|
||||
smsTenants.value = lowestRes.data
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message || 'خطا در دریافت آمار')
|
||||
} finally {
|
||||
@@ -70,6 +81,27 @@ async function load() {
|
||||
}
|
||||
}
|
||||
|
||||
function openSmsPanel(tenantId?: string) {
|
||||
if (tenantId) {
|
||||
router.push({ name: 'sms-tenant', params: { tenantId } })
|
||||
return
|
||||
}
|
||||
router.push({ name: 'sms-panel' })
|
||||
}
|
||||
|
||||
function smsTone(level?: BalanceLevel) {
|
||||
switch (level) {
|
||||
case 'healthy':
|
||||
return 'healthy'
|
||||
case 'warning':
|
||||
return 'warning'
|
||||
case 'critical':
|
||||
return 'critical'
|
||||
default:
|
||||
return 'unknown'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
@@ -83,6 +115,40 @@ onMounted(load)
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<div class="dash-modules">
|
||||
<div class="module-card sms sms-dashboard-card" @click="openSmsPanel()">
|
||||
<div>
|
||||
<div class="icon-wrap">
|
||||
<MessageOutlined />
|
||||
</div>
|
||||
<h3>پنل پیامکی</h3>
|
||||
<p>۵ نسخه با کمترین موجودی برای پیگیری سریع شارژ و وضعیت پیامک</p>
|
||||
</div>
|
||||
<div class="sms-mini-grid">
|
||||
<button
|
||||
v-for="tenant in lowestSmsTenants"
|
||||
:key="tenant.id"
|
||||
type="button"
|
||||
class="sms-mini-card"
|
||||
:class="smsTone(tenant.sms?.balanceLevel)"
|
||||
@click.stop="openSmsPanel(tenant.id)"
|
||||
>
|
||||
<strong>{{ tenant.nameFa }}</strong>
|
||||
<span>{{ tenant.product === 'hamkar' ? 'همکار' : 'خانگی' }}</span>
|
||||
<small>{{ tenant.sms?.balanceLabel || 'نامشخص' }}</small>
|
||||
</button>
|
||||
<div v-if="!lowestSmsTenants.length" class="sms-mini-empty">
|
||||
هنوز نسخهای برای نمایش موجودی ثبت نشده است
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="progress"><span /></div>
|
||||
<div class="module-meta">
|
||||
<span>{{ lowestSmsTenants.length }} نسخه کمموجودی</span>
|
||||
<span>ورود ←</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-for="item in modules"
|
||||
:key="item.key"
|
||||
@@ -110,3 +176,63 @@ onMounted(load)
|
||||
</a-spin>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.sms-mini-card {
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
padding: 10px 12px;
|
||||
text-align: right;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
color: #17324d;
|
||||
}
|
||||
|
||||
.sms-mini-card strong {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.sms-mini-card span,
|
||||
.sms-mini-card small {
|
||||
color: inherit;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.sms-mini-card.healthy {
|
||||
background: linear-gradient(135deg, #dff8ea, #c3efd7);
|
||||
}
|
||||
|
||||
.sms-mini-card.warning {
|
||||
background: linear-gradient(135deg, #fff4c7, #ffe39a);
|
||||
}
|
||||
|
||||
.sms-mini-card.critical {
|
||||
background: linear-gradient(135deg, #ffd8d8, #ffb9b9);
|
||||
}
|
||||
|
||||
.sms-mini-card.unknown {
|
||||
background: linear-gradient(135deg, #eef2f7, #dde5ef);
|
||||
}
|
||||
|
||||
.sms-mini-empty {
|
||||
grid-column: 1 / -1;
|
||||
border-radius: 14px;
|
||||
background: #f5f7fb;
|
||||
padding: 14px;
|
||||
color: #7b8798;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,11 +10,14 @@ type Tenant = {
|
||||
product: 'hamkar' | 'khanegi'
|
||||
slug: string
|
||||
nameFa: string
|
||||
nameEn?: string | null
|
||||
domain: string
|
||||
avatarUrl?: string | null
|
||||
primaryColor?: string | null
|
||||
isActive: boolean
|
||||
nodeServer: string
|
||||
notes?: string | null
|
||||
hasAppUiConfig?: boolean
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
@@ -133,9 +136,14 @@ onMounted(load)
|
||||
<div class="domain">{{ item.domain }}</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'">
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+180
-13
@@ -1,8 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ArrowRightOutlined, MessageOutlined } from '@ant-design/icons-vue'
|
||||
import api from '@/api/http'
|
||||
|
||||
type BalanceLevel = 'healthy' | 'warning' | 'critical' | 'unknown'
|
||||
|
||||
type TenantRow = {
|
||||
id: string
|
||||
product: 'hamkar' | 'khanegi'
|
||||
slug: string
|
||||
nameFa: string
|
||||
domain: string
|
||||
isBlocked?: boolean
|
||||
sms: {
|
||||
balanceLabel: string
|
||||
balanceLevel: BalanceLevel
|
||||
}
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const loadingList = ref(false)
|
||||
const tenants = ref<TenantRow[]>([])
|
||||
|
||||
const groupedTenants = computed(() => ({
|
||||
hamkar: tenants.value.filter((t) => t.product === 'hamkar'),
|
||||
khanegi: tenants.value.filter((t) => t.product === 'khanegi'),
|
||||
}))
|
||||
|
||||
function toneClass(level?: BalanceLevel) {
|
||||
return level || 'unknown'
|
||||
}
|
||||
|
||||
function openTenant(id: string) {
|
||||
router.push({ name: 'sms-tenant', params: { tenantId: id } })
|
||||
}
|
||||
|
||||
async function loadTenants() {
|
||||
loadingList.value = true
|
||||
try {
|
||||
const { data } = await api.get('/sms/tenants')
|
||||
tenants.value = data
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message || 'خطا در دریافت نسخهها')
|
||||
} finally {
|
||||
loadingList.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadTenants)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -11,24 +58,144 @@ const router = useRouter()
|
||||
<a-button type="text" @click="router.push({ name: 'home' })">
|
||||
<ArrowRightOutlined />
|
||||
</a-button>
|
||||
<div>
|
||||
<div style="flex: 1">
|
||||
<h1 class="page-title">پنل پیامکی</h1>
|
||||
<p class="page-sub">مرکز مشترک پیامک برای همکار و خانگی</p>
|
||||
<p class="page-sub">یک نسخه را انتخاب کنید تا کیف پول و تنظیمات SMS همان نسخه باز شود</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="placeholder-hero sms">
|
||||
<div style="display: flex; align-items: center; gap: 12px; font-size: 28px">
|
||||
<MessageOutlined />
|
||||
<strong style="font-size: 1.2rem">بهزودی</strong>
|
||||
</div>
|
||||
<p style="margin: 12px 0 0; opacity: 0.92; line-height: 1.8">
|
||||
اینجا پنل پیامکی مرکزی میآید تا دیگر لازم نباشد در هر پروژه جداگانه مدیریت شود.
|
||||
</p>
|
||||
<a-alert
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 14px; border-radius: 14px"
|
||||
message="فعلاً پنل پیامکی همکار و خانگی دست نخورده میماند"
|
||||
description="بعد از تست سوپرادمین، اتصال به محصولات تصمیمگیری میشود."
|
||||
/>
|
||||
|
||||
<div class="legend">
|
||||
<span class="chip healthy">بالای ۱۰۰٬۰۰۰ — سبز</span>
|
||||
<span class="chip warning">۱۰٬۰۰۰ تا ۱۰۰٬۰۰۰ — زرد</span>
|
||||
<span class="chip critical">زیر ۱۰٬۰۰۰ — قرمز</span>
|
||||
</div>
|
||||
|
||||
<div class="hint-box">
|
||||
فعلاً اسکلت صفحه آماده است. در مرحله بعد اتصال به سرویس پیامک و تنظیمات هر نسخه را اضافه میکنیم.
|
||||
</div>
|
||||
<section class="sms-selector">
|
||||
<div class="sms-side-head"><MessageOutlined /> نسخهها</div>
|
||||
<a-spin :spinning="loadingList">
|
||||
<div class="tenant-groups">
|
||||
<section class="tenant-group">
|
||||
<div class="tenant-group-head">
|
||||
<h3>همکار</h3>
|
||||
<span>{{ groupedTenants.hamkar.length }} نسخه</span>
|
||||
</div>
|
||||
<div class="tenant-grid">
|
||||
<button
|
||||
v-for="t in groupedTenants.hamkar"
|
||||
:key="t.id"
|
||||
type="button"
|
||||
class="tenant-card"
|
||||
:class="toneClass(t.sms?.balanceLevel)"
|
||||
@click="openTenant(t.id)"
|
||||
>
|
||||
<strong>{{ t.nameFa }}</strong>
|
||||
<span>{{ t.sms?.balanceLabel }}</span>
|
||||
<small>{{ t.isBlocked ? 'مسدود' : t.domain }}</small>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tenant-group">
|
||||
<div class="tenant-group-head">
|
||||
<h3>خانگی</h3>
|
||||
<span>{{ groupedTenants.khanegi.length }} نسخه</span>
|
||||
</div>
|
||||
<div class="tenant-grid">
|
||||
<button
|
||||
v-for="t in groupedTenants.khanegi"
|
||||
:key="t.id"
|
||||
type="button"
|
||||
class="tenant-card"
|
||||
:class="toneClass(t.sms?.balanceLevel)"
|
||||
@click="openTenant(t.id)"
|
||||
>
|
||||
<strong>{{ t.nameFa }}</strong>
|
||||
<span>{{ t.sms?.balanceLabel }}</span>
|
||||
<small>{{ t.isBlocked ? 'مسدود' : t.domain }}</small>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a-empty
|
||||
v-if="!groupedTenants.hamkar.length && !groupedTenants.khanegi.length"
|
||||
description="نسخهای نیست"
|
||||
/>
|
||||
</a-spin>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.chip {
|
||||
border-radius: 999px;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.chip.healthy { background: #dff8ea; color: #0f6b3c; }
|
||||
.chip.warning { background: #fff4c7; color: #8a6200; }
|
||||
.chip.critical { background: #ffd8d8; color: #9d1f1f; }
|
||||
|
||||
.sms-selector {
|
||||
background: #f7f9fc;
|
||||
border-radius: 18px;
|
||||
padding: 14px;
|
||||
border: 1px solid #e8eef5;
|
||||
}
|
||||
.sms-side-head {
|
||||
font-weight: 800;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.tenant-groups { display: grid; gap: 16px; }
|
||||
.tenant-group-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tenant-group-head h3 { margin: 0; font-size: 1rem; }
|
||||
.tenant-group-head span { color: #8b95a8; font-size: 0.82rem; }
|
||||
.tenant-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.tenant-card {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
color: #17324d;
|
||||
}
|
||||
.tenant-card.healthy { background: linear-gradient(135deg, #dff8ea, #c3efd7); }
|
||||
.tenant-card.warning { background: linear-gradient(135deg, #fff4c7, #ffe39a); }
|
||||
.tenant-card.critical { background: linear-gradient(135deg, #ffd8d8, #ffb9b9); }
|
||||
.tenant-card.unknown { background: linear-gradient(135deg, #eef2f7, #dde5ef); }
|
||||
.tenant-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 22px rgba(23, 50, 77, 0.08);
|
||||
}
|
||||
.tenant-card small { direction: ltr; text-align: right; }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,380 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ArrowRightOutlined } from '@ant-design/icons-vue'
|
||||
import api from '@/api/http'
|
||||
|
||||
type BalanceLevel = 'healthy' | 'warning' | 'critical' | 'unknown'
|
||||
|
||||
type SmsSummary = {
|
||||
balanceRials: number
|
||||
balanceLabel: string
|
||||
balanceLevel: BalanceLevel
|
||||
perPartRials: number
|
||||
todayMessages: number
|
||||
todayParts: number
|
||||
todayCostRials: number
|
||||
monthMessages: number
|
||||
monthParts: number
|
||||
monthCostRials: number
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const charging = ref(false)
|
||||
const safeNote = ref('')
|
||||
const ledgers = ref<any[]>([])
|
||||
const summary = ref<SmsSummary | null>(null)
|
||||
const tenant = ref<{
|
||||
id: string
|
||||
product: 'hamkar' | 'khanegi'
|
||||
slug: string
|
||||
nameFa: string
|
||||
domain: string
|
||||
} | null>(null)
|
||||
|
||||
const form = reactive({
|
||||
pricePerPartRials: 2500,
|
||||
isBlocked: false,
|
||||
alertCriticalRials: 10000,
|
||||
alertWarningRials: 100000,
|
||||
gatewayProvider: 'melipayamak',
|
||||
melipayamakUser: '',
|
||||
melipayamakPassword: '',
|
||||
melipayamakFrom: '',
|
||||
panelUsername: '',
|
||||
panelPassword: '',
|
||||
panelFrom: '',
|
||||
})
|
||||
|
||||
const chargeForm = reactive({
|
||||
amountRials: 100000,
|
||||
note: '',
|
||||
})
|
||||
|
||||
const tenantId = computed(() => String(route.params.tenantId || ''))
|
||||
|
||||
function toneClass(level?: BalanceLevel) {
|
||||
return level || 'unknown'
|
||||
}
|
||||
|
||||
function formatMoney(value: number | null | undefined) {
|
||||
if (value == null) return '—'
|
||||
return `${new Intl.NumberFormat('fa-IR').format(value)} ریال`
|
||||
}
|
||||
|
||||
async function loadDetail() {
|
||||
if (!tenantId.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const { data } = await api.get(`/sms/tenants/${tenantId.value}`)
|
||||
tenant.value = data.tenant
|
||||
safeNote.value = data.safeNote || ''
|
||||
summary.value = data.summary
|
||||
ledgers.value = data.ledgers || []
|
||||
Object.assign(form, {
|
||||
pricePerPartRials: data.account.pricePerPartRials,
|
||||
isBlocked: data.account.isBlocked,
|
||||
alertCriticalRials: data.account.alertCriticalRials,
|
||||
alertWarningRials: data.account.alertWarningRials,
|
||||
gatewayProvider: data.account.gatewayProvider || 'melipayamak',
|
||||
melipayamakUser: data.account.melipayamakUser || '',
|
||||
melipayamakPassword: data.account.melipayamakPassword || '',
|
||||
melipayamakFrom: data.account.melipayamakFrom || '',
|
||||
panelUsername: data.account.panelUsername || '',
|
||||
panelPassword: data.account.panelPassword || '',
|
||||
panelFrom: data.account.panelFrom || '',
|
||||
})
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message || 'خطا در دریافت حساب پیامک')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveAccount() {
|
||||
saving.value = true
|
||||
try {
|
||||
await api.patch(`/sms/tenants/${tenantId.value}`, { ...form })
|
||||
message.success('تنظیمات ذخیره شد')
|
||||
await loadDetail()
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message || 'ذخیره ناموفق')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function chargeWallet() {
|
||||
charging.value = true
|
||||
try {
|
||||
await api.post(`/sms/tenants/${tenantId.value}/charge`, {
|
||||
amountRials: Number(chargeForm.amountRials),
|
||||
note: chargeForm.note || undefined,
|
||||
})
|
||||
message.success('موجودی بهروز شد')
|
||||
chargeForm.note = ''
|
||||
await loadDetail()
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message || 'شارژ ناموفق')
|
||||
} finally {
|
||||
charging.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleBlock() {
|
||||
const path = form.isBlocked ? 'unblock' : 'block'
|
||||
try {
|
||||
await api.post(`/sms/tenants/${tenantId.value}/${path}`)
|
||||
message.success(form.isBlocked ? 'پیامک آزاد شد' : 'پیامک مسدود شد')
|
||||
await loadDetail()
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message || 'عملیات ناموفق')
|
||||
}
|
||||
}
|
||||
|
||||
watch(tenantId, loadDetail)
|
||||
onMounted(loadDetail)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-shell">
|
||||
<div style="display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px">
|
||||
<a-button type="text" @click="router.push({ name: 'sms-panel' })">
|
||||
<ArrowRightOutlined />
|
||||
</a-button>
|
||||
<div style="flex: 1">
|
||||
<h1 class="page-title">{{ tenant?.nameFa || 'پنل پیامک نسخه' }}</h1>
|
||||
<p class="page-sub">مدیریت کیف پول، تعرفه و گلوگاه پیامک این نسخه</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-alert
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 14px; border-radius: 14px"
|
||||
message="پنل پیامکی همکار/خانگی فعلاً دست نخورده میماند"
|
||||
:description="safeNote"
|
||||
/>
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<section v-if="tenant" class="sms-main">
|
||||
<div class="selected-tenant-head">
|
||||
<div>
|
||||
<h2>{{ tenant.nameFa }}</h2>
|
||||
<div class="selected-tenant-meta">
|
||||
<a-tag :color="tenant.product === 'hamkar' ? 'cyan' : 'orange'">
|
||||
{{ tenant.product === 'hamkar' ? 'همکار' : 'خانگی' }}
|
||||
</a-tag>
|
||||
<span>{{ tenant.domain }}</span>
|
||||
<a-tag v-if="form.isBlocked" color="error">مسدود</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selected-balance" :class="toneClass(summary?.balanceLevel)">
|
||||
{{ summary?.balanceLabel || '—' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card">
|
||||
<span>موجودی کیف پول</span>
|
||||
<strong>{{ summary?.balanceLabel || '—' }}</strong>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<span>قیمت هر پارت</span>
|
||||
<strong>{{ formatMoney(summary?.perPartRials) }}</strong>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<span>امروز</span>
|
||||
<strong>
|
||||
{{ summary?.todayMessages ?? 0 }} پیامک
|
||||
<small>{{ summary?.todayParts ?? 0 }} پارت · {{ formatMoney(summary?.todayCostRials) }}</small>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<span>ماه جاری</span>
|
||||
<strong>
|
||||
{{ summary?.monthMessages ?? 0 }} پیامک
|
||||
<small>{{ summary?.monthParts ?? 0 }} پارت · {{ formatMoney(summary?.monthCostRials) }}</small>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels-grid">
|
||||
<div class="panel-card">
|
||||
<h3>شارژ / اصلاح موجودی</h3>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="مبلغ (ریال) — منفی = کاهش">
|
||||
<a-input-number v-model:value="chargeForm.amountRials" style="width: 100%" :step="10000" />
|
||||
</a-form-item>
|
||||
<a-form-item label="توضیح">
|
||||
<a-input v-model:value="chargeForm.note" placeholder="مثلاً واریز مشتری" />
|
||||
</a-form-item>
|
||||
<a-button type="primary" block :loading="charging" @click="chargeWallet">ثبت روی کیف پول</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<h3>تعرفه و هشدار و مسدودسازی</h3>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="قیمت هر پارت (ریال)">
|
||||
<a-input-number v-model:value="form.pricePerPartRials" style="width: 100%" :min="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="آستانه قرمز (ریال)">
|
||||
<a-input-number v-model:value="form.alertCriticalRials" style="width: 100%" :min="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="آستانه زرد (ریال)">
|
||||
<a-input-number v-model:value="form.alertWarningRials" style="width: 100%" :min="0" />
|
||||
</a-form-item>
|
||||
<a-button danger ghost block style="margin-bottom: 10px" @click="toggleBlock">
|
||||
{{ form.isBlocked ? 'آزاد کردن پیامک' : 'مسدود کردن پیامک' }}
|
||||
</a-button>
|
||||
<a-button type="primary" block :loading="saving" @click="saveAccount">ذخیره تنظیمات</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-card" style="margin-top: 12px">
|
||||
<h3>گلوگاه پیامک (سوپرادمین)</h3>
|
||||
<div class="fields-grid">
|
||||
<div class="field-card">
|
||||
<label>ارائهدهنده</label>
|
||||
<a-select
|
||||
v-model:value="form.gatewayProvider"
|
||||
style="width: 100%"
|
||||
:options="[
|
||||
{ label: 'ملیپیامک', value: 'melipayamak' },
|
||||
{ label: 'پنل ۰۰۹۸', value: 'panel0098' },
|
||||
{ label: 'مرکزی', value: 'central' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="field-card">
|
||||
<label>ملیپیامک — کاربر</label>
|
||||
<a-input v-model:value="form.melipayamakUser" dir="ltr" />
|
||||
</div>
|
||||
<div class="field-card">
|
||||
<label>ملیپیامک — رمز</label>
|
||||
<a-input-password v-model:value="form.melipayamakPassword" dir="ltr" />
|
||||
</div>
|
||||
<div class="field-card">
|
||||
<label>ملیپیامک — فرستنده</label>
|
||||
<a-input v-model:value="form.melipayamakFrom" dir="ltr" />
|
||||
</div>
|
||||
<div class="field-card">
|
||||
<label>۰۰۹۸ — کاربر</label>
|
||||
<a-input v-model:value="form.panelUsername" dir="ltr" />
|
||||
</div>
|
||||
<div class="field-card">
|
||||
<label>۰۰۹۸ — رمز</label>
|
||||
<a-input-password v-model:value="form.panelPassword" dir="ltr" />
|
||||
</div>
|
||||
<div class="field-card">
|
||||
<label>۰۰۹۸ — فرستنده</label>
|
||||
<a-input v-model:value="form.panelFrom" dir="ltr" />
|
||||
</div>
|
||||
</div>
|
||||
<a-button type="primary" style="margin-top: 12px" :loading="saving" @click="saveAccount">
|
||||
ذخیره گلوگاه
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="panel-card" style="margin-top: 12px">
|
||||
<h3>آخرین تراکنشها</h3>
|
||||
<a-empty v-if="!ledgers.length" description="هنوز تراکنشی نیست" />
|
||||
<div v-else class="ledger-list">
|
||||
<div v-for="item in ledgers" :key="item.id" class="ledger-item">
|
||||
<strong :class="item.amountRials >= 0 ? 'plus' : 'minus'">
|
||||
{{ formatMoney(item.amountRials) }}
|
||||
</strong>
|
||||
<span>{{ item.note || item.type }}</span>
|
||||
<small>{{ new Date(item.createdAt).toLocaleString('fa-IR') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<a-empty v-else-if="!loading" description="نسخه پیدا نشد" />
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sms-main {
|
||||
background: #f7f9fc;
|
||||
border-radius: 18px;
|
||||
padding: 14px;
|
||||
border: 1px solid #e8eef5;
|
||||
}
|
||||
.selected-tenant-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.selected-tenant-head h2 { margin: 0 0 6px; font-size: 1.1rem; }
|
||||
.selected-tenant-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
color: #8b95a8;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
.selected-balance {
|
||||
border-radius: 14px;
|
||||
padding: 10px 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.selected-balance.healthy { background: #dff8ea; color: #0f6b3c; }
|
||||
.selected-balance.warning { background: #fff4c7; color: #8a6200; }
|
||||
.selected-balance.critical { background: #ffd8d8; color: #9d1f1f; }
|
||||
.selected-balance.unknown { background: #eef2f7; color: #6a7789; }
|
||||
|
||||
.summary-grid,
|
||||
.panels-grid,
|
||||
.fields-grid { display: grid; gap: 10px; }
|
||||
.summary-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.panels-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
|
||||
.fields-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
|
||||
.summary-card,
|
||||
.panel-card,
|
||||
.field-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e8eef5;
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
}
|
||||
.summary-card span,
|
||||
.field-card label {
|
||||
color: #8b95a8;
|
||||
font-size: 0.82rem;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.summary-card strong { display: grid; gap: 4px; }
|
||||
.summary-card small { color: #6f7d90; font-size: 0.8rem; }
|
||||
.panel-card h3 { margin: 0 0 12px; font-size: 0.98rem; }
|
||||
.ledger-list { display: grid; gap: 8px; }
|
||||
.ledger-item {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
background: #f7f9fc;
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.ledger-item .plus { color: #0f6b3c; }
|
||||
.ledger-item .minus { color: #9d1f1f; }
|
||||
.ledger-item small { color: #8b95a8; }
|
||||
@media (max-width: 720px) {
|
||||
.selected-tenant-head { flex-direction: column; }
|
||||
.ledger-item { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
@@ -24,6 +24,11 @@ const router = createRouter({
|
||||
name: 'sms-panel',
|
||||
component: () => import('@/pages/SmsPanelPage.vue'),
|
||||
},
|
||||
{
|
||||
path: 'sms/:tenantId',
|
||||
name: 'sms-tenant',
|
||||
component: () => import('@/pages/SmsTenantPage.vue'),
|
||||
},
|
||||
{
|
||||
path: 'servers',
|
||||
name: 'server-panel',
|
||||
|
||||
@@ -21,8 +21,6 @@ export const saTheme: ThemeConfig = {
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
primaryShadow: '0 10px 24px rgba(32, 201, 151, 0.28)',
|
||||
fontWeight: 600,
|
||||
borderRadius: 14,
|
||||
},
|
||||
Card: {
|
||||
|
||||
+1
-2
@@ -2,9 +2,8 @@
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
|
||||
Reference in New Issue
Block a user