feat(ui): standardize design system, modals, sidebar, and form inputs
- Implement unified design system tokens, 10px radius, and IRANSans typography - Modernize sidebar with Gemini-style collapsed expander, square 1:1 items, and elevated profile flyout - Standardize all modal dialogs with 16px padding, fixed header/footer, 16px medium title, and sticky bottom actions - Refactor DealFormView and CustomFieldsSection with standard UiField, UiInput, and UiSelect components - Add draggable bottom-left QuickCreate floating action button
This commit is contained in:
s.esmaeili
@@ -4,6 +4,13 @@ import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { CURRENCY_OPTIONS, formatMoney } from '@/lib/money';
|
||||
import MoneyInput from '@/components/MoneyInput.vue';
|
||||
import {
|
||||
UiButton,
|
||||
UiCard,
|
||||
UiField,
|
||||
UiPageHeader,
|
||||
UiSelect,
|
||||
} from '@/components/ui';
|
||||
import type { OrganizationDto, UpdateOrgCurrenciesRequest } from '@mento/shared';
|
||||
|
||||
const loading = ref(false);
|
||||
@@ -82,7 +89,7 @@ async function save() {
|
||||
body,
|
||||
);
|
||||
org.value = data;
|
||||
ok.value = 'تنظیمات ارز ذخیره شد.';
|
||||
ok.value = 'تنظیمات ارز با موفقیت ذخیره شد.';
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
@@ -101,223 +108,201 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div class="head-copy">
|
||||
<h1>ارزها و نرخ تبدیل</h1>
|
||||
<p class="lead">
|
||||
ارز پایه برای جمع‌ها و پیش‌بینی استفاده می‌شود. نرخ یعنی چند واحد ارز پایه
|
||||
برابر با ۱ واحد ارز خارجی است.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<section class="crm-page currency-page" dir="rtl">
|
||||
<UiPageHeader
|
||||
title="ارزها و نرخ تبدیل"
|
||||
description="ارز پایه برای تجمیع مبالغ و پیش‌بینی‌ها استفاده می‌شود. نرخ یعنی چند واحد ارز پایه برابر با ۱ واحد ارز خارجی است."
|
||||
/>
|
||||
|
||||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||||
<div v-if="error" class="crm-alert crm-alert-danger">{{ error }}</div>
|
||||
<div v-if="ok" class="crm-alert crm-alert-success">{{ ok }}</div>
|
||||
|
||||
<form v-if="!loading" class="panel" @submit.prevent="save">
|
||||
<div class="field">
|
||||
<label>ارز پایه</label>
|
||||
<select v-model="baseCurrency" @change="onBaseChange">
|
||||
<option
|
||||
v-for="c in CURRENCY_OPTIONS"
|
||||
:key="c.code"
|
||||
:value="c.code"
|
||||
>
|
||||
{{ c.labelFa }} ({{ c.code }})
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<UiCard v-if="!loading" class="section-card">
|
||||
<form class="crm-form" @submit.prevent="save">
|
||||
<UiField label="ارز پایه سیستم" hint="همه فاکتورها، پیش‌بینی‌ها و آمار کل بر پایه این واحد ارزی محاسبه خواهند شد.">
|
||||
<UiSelect v-model="baseCurrency" @change="onBaseChange">
|
||||
<option
|
||||
v-for="c in CURRENCY_OPTIONS"
|
||||
:key="c.code"
|
||||
:value="c.code"
|
||||
>
|
||||
{{ c.labelFa }} ({{ c.code }})
|
||||
</option>
|
||||
</UiSelect>
|
||||
</UiField>
|
||||
|
||||
<div class="field">
|
||||
<label>ارزهای فعال</label>
|
||||
<div class="chips">
|
||||
<label
|
||||
v-for="c in CURRENCY_OPTIONS"
|
||||
:key="c.code"
|
||||
class="chip"
|
||||
:class="{ on: enabled.includes(c.code), locked: c.code === baseCurrency }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="enabled.includes(c.code)"
|
||||
:disabled="c.code === baseCurrency"
|
||||
@change="toggleCurrency(c.code)"
|
||||
/>
|
||||
{{ c.labelFa }}
|
||||
</label>
|
||||
<UiField label="ارزهای فعال در فاکتورها و معاملات">
|
||||
<div class="currency-chips">
|
||||
<label
|
||||
v-for="c in CURRENCY_OPTIONS"
|
||||
:key="c.code"
|
||||
class="currency-chip"
|
||||
:class="{ active: enabled.includes(c.code), locked: c.code === baseCurrency }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="enabled.includes(c.code)"
|
||||
:disabled="c.code === baseCurrency"
|
||||
@change="toggleCurrency(c.code)"
|
||||
/>
|
||||
<span class="chip-title">{{ c.labelFa }}</span>
|
||||
<span class="chip-code font-mono">{{ c.code }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</UiField>
|
||||
|
||||
<div v-if="rateCurrencies.length" class="rates-section">
|
||||
<h3 class="rates-title">نرخ برابری نسبت به {{ baseCurrency }}</h3>
|
||||
<div class="rates-list">
|
||||
<div v-for="code in rateCurrencies" :key="code" class="rate-row">
|
||||
<span class="rate-unit">۱ {{ code }} =</span>
|
||||
<div class="rate-input-wrap">
|
||||
<MoneyInput
|
||||
v-model="rates[code]"
|
||||
:decimals="6"
|
||||
:placeholder="`نرخ برابری به ${baseCurrency}`"
|
||||
/>
|
||||
</div>
|
||||
<span class="rate-target">{{ baseCurrency }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="rates.USD" class="example-note">
|
||||
نمونه محاسبه: ۱ دلار آمریکا ≈ <strong>{{ formatMoney(Number(rates.USD) || 0, baseCurrency) }}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="rateCurrencies.length" class="rates">
|
||||
<h2>نرخ به {{ baseCurrency }}</h2>
|
||||
<div v-for="code in rateCurrencies" :key="code" class="rate-row">
|
||||
<span>۱ {{ code }} =</span>
|
||||
<MoneyInput
|
||||
v-model="rates[code]"
|
||||
:decimals="6"
|
||||
:placeholder="`نرخ به ${baseCurrency}`"
|
||||
/>
|
||||
<span>{{ baseCurrency }}</span>
|
||||
<div class="form-submit-row">
|
||||
<UiButton type="submit" :loading="saving">
|
||||
ذخیره تنظیمات ارز
|
||||
</UiButton>
|
||||
</div>
|
||||
<p v-if="rates.USD" class="muted example">
|
||||
مثال: ۱ دلار ≈
|
||||
{{ formatMoney(Number(rates.USD) || 0, baseCurrency) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button class="btn primary" type="submit" :disabled="saving">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
|
||||
</button>
|
||||
</form>
|
||||
</form>
|
||||
</UiCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-width: 640px;
|
||||
min-width: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
.currency-page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.head-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.3rem;
|
||||
font-size: clamp(1.45rem, 2.5vw, 1.85rem);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
|
||||
padding: 1.1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type='number'] {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-6);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.chips {
|
||||
.section-card {
|
||||
padding: var(--sp-6);
|
||||
}
|
||||
|
||||
.currency-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.chip {
|
||||
.currency-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 999px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
user-select: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.chip.on {
|
||||
border-color: #99f6e4;
|
||||
background: #f0fdfa;
|
||||
color: #0f766e;
|
||||
.currency-chip:hover {
|
||||
border-color: var(--color-brand-400);
|
||||
}
|
||||
|
||||
.chip.locked {
|
||||
opacity: 0.85;
|
||||
.currency-chip.active {
|
||||
border-color: var(--color-brand-500);
|
||||
background: var(--color-brand-50, #f0fdfa);
|
||||
color: var(--color-brand-800, #115e59);
|
||||
}
|
||||
|
||||
.rates {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
.currency-chip.locked {
|
||||
opacity: 0.8;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.rates h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.rate-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.95rem;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 700;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.ok {
|
||||
margin: 0;
|
||||
color: #0f766e;
|
||||
.chip-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.rate-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.chip-code {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
|
||||
.rates-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4);
|
||||
background: var(--color-surface-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.rates-title {
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rates-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.rate-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.rate-unit {
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
min-width: 4.5rem;
|
||||
}
|
||||
|
||||
.rate-input-wrap {
|
||||
flex: 1;
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
.rate-target {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
|
||||
.example-note {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.example-note strong {
|
||||
color: var(--color-brand-700, #0f766e);
|
||||
}
|
||||
|
||||
.form-submit-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user