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

Add Hamkar UI reset-to-default snapshot and restore button.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mahdi
2026-08-03 20:51:33 +03:30
co-authored by Cursor
parent 8630040b90
commit d5f0bf84ef
2 changed files with 236 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config/defaultHamkarUiConfig.ts
+109 -39
View File
@@ -2,6 +2,28 @@ export type HamkarPricingBoxTheme = '1' | '2' | '3' | '4'
export type HamkarOrderUi = 'new' | 'old'
export type HamkarPriceFontSize = 'کوچک' | 'متوسط' | 'بزرگ' | 'بزرگ‌تر'
export type HamkarBrandColors = {
/** Registry `color` → CSS `--bg2` (only when mode=dynamicMode) */
primaryColor: string
/** Registry `secondary_color` → CSS `--colorPrimary` (dynamicMode) */
secondaryColor: string
/** Registry `background_color` → CSS `--bg` (dynamicMode) */
backgroundColor: string
}
export type HamkarUiSettings = {
pricing_box_theme: HamkarPricingBoxTheme
price_font_size: HamkarPriceFontSize
orderUI: HamkarOrderUi
}
/** Immutable factory look — set once, never overwritten on normal save */
export type HamkarAppearanceSnapshot = {
registryMode: string
brand: HamkarBrandColors
settings: HamkarUiSettings
}
export type HamkarUiConfig = {
kind: 'hamkar'
/**
@@ -11,19 +33,10 @@ export type HamkarUiConfig = {
settingsManaged: boolean
/** Named CSS mode from live registry (Montpar, limangold, …) or dynamicMode */
registryMode: string
brand: {
/** Registry `color` → CSS `--bg2` (only when mode=dynamicMode) */
primaryColor: string
/** Registry `secondary_color` → CSS `--colorPrimary` (dynamicMode) */
secondaryColor: string
/** Registry `background_color` → CSS `--bg` (dynamicMode) */
backgroundColor: string
}
settings: {
pricing_box_theme: HamkarPricingBoxTheme
price_font_size: HamkarPriceFontSize
orderUI: HamkarOrderUi
}
brand: HamkarBrandColors
settings: HamkarUiSettings
/** Original appearance before SuperAdmin color edits (reset target) */
defaultSnapshot?: HamkarAppearanceSnapshot
}
export const HAMKAR_PRICING_BOX_THEME_OPTIONS: {
@@ -58,6 +71,34 @@ function asColor(value: unknown): string {
return s
}
function normalizeSettings(raw: unknown): HamkarUiSettings {
const base = createDefaultHamkarUiConfig().settings
const settings = raw && typeof raw === 'object' ? (raw as Record<string, any>) : {}
const theme = String(settings.pricing_box_theme ?? base.pricing_box_theme)
const orderUI = String(settings.orderUI ?? base.orderUI)
const font = String(settings.price_font_size ?? base.price_font_size)
return {
pricing_box_theme: (['1', '2', '3', '4'].includes(theme)
? theme
: base.pricing_box_theme) as HamkarPricingBoxTheme,
orderUI: (orderUI === 'old' || orderUI === 'new'
? orderUI
: base.orderUI) as HamkarOrderUi,
price_font_size: (HAMKAR_PRICE_FONT_SIZE_OPTIONS.some((o) => o.value === font)
? font
: base.price_font_size) as HamkarPriceFontSize,
}
}
function normalizeBrand(raw: unknown): HamkarBrandColors {
const brand = raw && typeof raw === 'object' ? (raw as Record<string, any>) : {}
return {
primaryColor: asColor(brand.primaryColor),
secondaryColor: asColor(brand.secondaryColor),
backgroundColor: asColor(brand.backgroundColor),
}
}
export function createDefaultHamkarUiConfig(): HamkarUiConfig {
return {
kind: 'hamkar',
@@ -76,55 +117,74 @@ export function createDefaultHamkarUiConfig(): HamkarUiConfig {
}
}
export function cloneHamkarSnapshot(config: {
registryMode: string
brand: HamkarBrandColors
settings: HamkarUiSettings
}): HamkarAppearanceSnapshot {
return {
registryMode: String(config.registryMode || 'dynamicMode').trim() || 'dynamicMode',
brand: { ...config.brand },
settings: { ...config.settings },
}
}
export function normalizeHamkarUiConfig(raw: unknown): HamkarUiConfig {
const base = createDefaultHamkarUiConfig()
if (!raw || typeof raw !== 'object') return base
const input = raw as Record<string, any>
const brand = input.brand && typeof input.brand === 'object' ? input.brand : {}
const settings =
input.settings && typeof input.settings === 'object' ? input.settings : {}
const theme = String(settings.pricing_box_theme ?? base.settings.pricing_box_theme)
const orderUI = String(settings.orderUI ?? base.settings.orderUI)
const font = String(settings.price_font_size ?? base.settings.price_font_size)
const registryMode = String(input.registryMode || base.registryMode).trim() || 'dynamicMode'
const settings = normalizeSettings(input.settings)
const brand = normalizeBrand(input.brand)
let defaultSnapshot: HamkarAppearanceSnapshot | undefined
if (input.defaultSnapshot && typeof input.defaultSnapshot === 'object') {
const snap = input.defaultSnapshot as Record<string, any>
defaultSnapshot = {
registryMode: String(snap.registryMode || registryMode).trim() || 'dynamicMode',
brand: normalizeBrand(snap.brand),
settings: normalizeSettings(snap.settings ?? settings),
}
}
return {
kind: 'hamkar',
settingsManaged: Boolean(input.settingsManaged),
registryMode,
brand: {
// Do not invent colors — empty means null in registry/get_user
primaryColor: asColor(brand.primaryColor),
secondaryColor: asColor(brand.secondaryColor),
backgroundColor: asColor(brand.backgroundColor),
},
settings: {
pricing_box_theme: (['1', '2', '3', '4'].includes(theme)
? theme
: base.settings.pricing_box_theme) as HamkarPricingBoxTheme,
orderUI: (orderUI === 'old' || orderUI === 'new'
? orderUI
: base.settings.orderUI) as HamkarOrderUi,
price_font_size: (HAMKAR_PRICE_FONT_SIZE_OPTIONS.some((o) => o.value === font)
? font
: base.settings.price_font_size) as HamkarPriceFontSize,
},
brand,
settings,
defaultSnapshot,
}
}
/** Payload for API: empty color strings → null */
/** Payload for API: empty color strings → null; always keep defaultSnapshot if present */
export function hamkarUiToApiPayload(config: HamkarUiConfig) {
const normalized = normalizeHamkarUiConfig(config)
const emptyToNull = (v: string) => (v.trim() ? v.trim() : null)
const snap = normalized.defaultSnapshot
? {
registryMode: normalized.defaultSnapshot.registryMode,
brand: {
primaryColor: emptyToNull(normalized.defaultSnapshot.brand.primaryColor),
secondaryColor: emptyToNull(normalized.defaultSnapshot.brand.secondaryColor),
backgroundColor: emptyToNull(normalized.defaultSnapshot.brand.backgroundColor),
},
settings: { ...normalized.defaultSnapshot.settings },
}
: undefined
return {
...normalized,
kind: 'hamkar' as const,
settingsManaged: normalized.settingsManaged,
registryMode: normalized.registryMode,
brand: {
primaryColor: emptyToNull(normalized.brand.primaryColor),
secondaryColor: emptyToNull(normalized.brand.secondaryColor),
backgroundColor: emptyToNull(normalized.brand.backgroundColor),
},
settings: { ...normalized.settings },
...(snap ? { defaultSnapshot: snap } : {}),
}
}
@@ -137,3 +197,13 @@ export function hamkarUiToSettingsList(config: HamkarUiConfig) {
{ key: 'orderUI', value: config.settings.orderUI },
]
}
/** Resolve original mode from tenant notes (`registryMode:X` or `mode:X`). */
export function registryModeFromNotes(notes?: string | null): string | null {
if (!notes) return null
return (
notes.match(/registryMode:([^\s|]+)/)?.[1] ||
notes.match(/(?:^|\|)\s*mode:([^\s|]+)/)?.[1] ||
null
)
}
src/pages/HamkarUiConfigPage.vue
+127 -13
View File
@@ -1,16 +1,18 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { Modal, message } from 'ant-design-vue'
import { ArrowRightOutlined } from '@ant-design/icons-vue'
import api from '@/api/http'
import {
cloneHamkarSnapshot,
createDefaultHamkarUiConfig,
HAMKAR_ORDER_UI_OPTIONS,
HAMKAR_PRICE_FONT_SIZE_OPTIONS,
HAMKAR_PRICING_BOX_THEME_OPTIONS,
hamkarUiToApiPayload,
normalizeHamkarUiConfig,
registryModeFromNotes,
type HamkarUiConfig,
} from '@/config/defaultHamkarUiConfig'
import { resolveHamkarEffectiveTheme } from '@/config/hamkarEffectiveTheme'
@@ -19,6 +21,7 @@ const route = useRoute()
const router = useRouter()
const loading = ref(true)
const saving = ref(false)
const resetting = ref(false)
const tenantName = ref('')
const domain = ref('')
@@ -40,6 +43,9 @@ const fontOptions = computed(() =>
HAMKAR_PRICE_FONT_SIZE_OPTIONS.map((o) => ({ value: o.value, label: o.label })),
)
const hasDefaultSnapshot = computed(() => Boolean(config.defaultSnapshot))
const defaultModeLabel = computed(() => config.defaultSnapshot?.registryMode || '—')
const NAV_ITEMS = ['معامله', 'دارایی', 'سفارشات', 'گزارش‌دهی', 'مشتریان']
function swatchHex(value: string, fallback = '#cbd5e1') {
@@ -62,7 +68,6 @@ function textOn(bg: string) {
return (r * 299 + g * 587 + b * 114) / 1000 > 128 ? '#0f172a' : '#ffffff'
}
/** Live palette driving the preview (= what save will apply via dynamicMode) */
const palette = computed(() => ({
header: swatchHex(config.brand.primaryColor, '#ffffff'),
accent: swatchHex(config.brand.secondaryColor, '#2563EB'),
@@ -96,7 +101,6 @@ function seedEditableColors(normalized: HamkarUiConfig) {
secondaryColor: normalized.brand.secondaryColor,
backgroundColor: normalized.brand.backgroundColor,
})
// Named CSS modes ignore registry colors — seed pickers with what the app actually paints
if (!effective.isDynamic) {
normalized.brand.primaryColor = effective.headerBg
normalized.brand.secondaryColor = effective.accent
@@ -108,6 +112,47 @@ function seedEditableColors(normalized: HamkarUiConfig) {
}
}
function ensureDefaultSnapshot(
normalized: HamkarUiConfig,
opts: {
notes?: string | null
primaryColor?: string | null
secondaryColor?: string | null
backgroundColor?: string | null
},
) {
if (normalized.defaultSnapshot) return
const noteMode = registryModeFromNotes(opts.notes)
const currentMode = String(normalized.registryMode || '').trim()
const registryMode =
(noteMode && noteMode !== 'dynamicMode' ? noteMode : null) ||
(currentMode && currentMode !== 'dynamicMode' ? currentMode : null) ||
noteMode ||
currentMode ||
'dynamicMode'
normalized.defaultSnapshot = cloneHamkarSnapshot({
registryMode,
brand: {
primaryColor: String(opts.primaryColor || normalized.brand.primaryColor || ''),
secondaryColor: String(opts.secondaryColor || normalized.brand.secondaryColor || ''),
backgroundColor: String(opts.backgroundColor || normalized.brand.backgroundColor || ''),
},
settings: { ...normalized.settings },
})
}
async function persist(payload: ReturnType<typeof hamkarUiToApiPayload>) {
await api.patch(`/tenants/${route.params.id}`, {
appUiConfig: payload,
primaryColor: payload.brand.primaryColor,
secondaryColor: payload.brand.secondaryColor,
backgroundColor: payload.brand.backgroundColor,
})
Object.assign(config, normalizeHamkarUiConfig(payload))
}
async function load() {
loading.value = true
try {
@@ -128,7 +173,7 @@ async function load() {
settingsManaged: false,
registryMode:
data.appUiConfig?.registryMode ||
data.notes?.match(/registryMode:([^\s|]+)/)?.[1] ||
registryModeFromNotes(data.notes) ||
'dynamicMode',
brand: {
primaryColor: data.primaryColor,
@@ -148,8 +193,20 @@ async function load() {
if (!normalized.brand.backgroundColor && data.backgroundColor) {
normalized.brand.backgroundColor = String(data.backgroundColor)
}
ensureDefaultSnapshot(normalized, {
notes: data.notes,
primaryColor: data.primaryColor,
secondaryColor: data.secondaryColor,
backgroundColor: data.backgroundColor,
})
seedEditableColors(normalized)
Object.assign(config, normalized)
if (!rawUi.defaultSnapshot && normalized.defaultSnapshot) {
await persist(hamkarUiToApiPayload(normalized))
}
} catch (e: any) {
message.error(e?.response?.data?.message || 'خطا در بارگذاری ظاهر همکار')
} finally {
@@ -160,16 +217,16 @@ async function load() {
async function save() {
saving.value = true
try {
// Colors only paint the app in dynamicMode (Hamkar apply-theme)
config.registryMode = 'dynamicMode'
const payload = hamkarUiToApiPayload(config)
await api.patch(`/tenants/${route.params.id}`, {
appUiConfig: payload,
primaryColor: payload.brand.primaryColor,
secondaryColor: payload.brand.secondaryColor,
backgroundColor: payload.brand.backgroundColor,
})
Object.assign(config, normalizeHamkarUiConfig(payload))
if (!config.defaultSnapshot) {
ensureDefaultSnapshot(config, {
notes: null,
primaryColor: config.brand.primaryColor,
secondaryColor: config.brand.secondaryColor,
backgroundColor: config.brand.backgroundColor,
})
}
await persist(hamkarUiToApiPayload(config))
message.success('ظاهر همکار ذخیره شد')
} catch (e: any) {
const msg = e?.response?.data?.message
@@ -179,6 +236,40 @@ async function save() {
}
}
function resetToDefault() {
if (!config.defaultSnapshot) {
message.warning('ظاهر پیش‌فرض برای این نسخه ثبت نشده است')
return
}
Modal.confirm({
title: 'بازگشت به ظاهر اولیه؟',
content: `حالت پیش‌فرض «${config.defaultSnapshot.registryMode}» اعمال و ذخیره می‌شود.`,
okText: 'بازگشت به پیش‌فرض',
cancelText: 'انصراف',
okButtonProps: { danger: true },
async onOk() {
resetting.value = true
try {
const snap = config.defaultSnapshot!
config.registryMode = snap.registryMode
config.brand.primaryColor = snap.brand.primaryColor
config.brand.secondaryColor = snap.brand.secondaryColor
config.brand.backgroundColor = snap.brand.backgroundColor
config.settings = { ...snap.settings }
await persist(hamkarUiToApiPayload(config))
seedEditableColors(config)
message.success('ظاهر اولیه بازیابی شد')
} catch (e: any) {
const msg = e?.response?.data?.message
message.error(Array.isArray(msg) ? msg.join('، ') : msg || 'بازیابی ناموفق')
throw e
} finally {
resetting.value = false
}
},
})
}
onMounted(load)
</script>
@@ -232,6 +323,9 @@ onMounted(load)
<section class="form-section">
<h3>رنگ‌ها</h3>
<p v-if="hasDefaultSnapshot" class="hint">
ظاهر پیش‌فرض ثبت‌شده: <strong>{{ defaultModeLabel }}</strong>
</p>
<div class="palette-grid">
<label class="palette-card">
<span class="palette-title">هدر</span>
@@ -325,6 +419,15 @@ onMounted(load)
</section>
<div class="sticky-actions">
<a-button
size="large"
block
:loading="resetting"
:disabled="!hasDefaultSnapshot"
@click="resetToDefault"
>
بازگشت به ظاهر اولیه
</a-button>
<a-button type="primary" size="large" block :loading="saving" @click="save">
ذخیره ظاهر همکار
</a-button>
@@ -340,6 +443,12 @@ onMounted(load)
gap: 14px;
}
.hint {
margin: 0 0 10px;
color: #64748b;
font-size: 13px;
}
.preview {
padding: 16px;
}
@@ -466,4 +575,9 @@ onMounted(load)
.palette-hex {
font-family: ui-monospace, monospace;
}
.sticky-actions {
display: grid;
gap: 8px;
}
</style>