forked from morrning/hesabixCore
196 lines
6.4 KiB
Markdown
196 lines
6.4 KiB
Markdown
# راهنمای سیستم طراحی قالب فاکتور
|
|
|
|
## مقدمه
|
|
|
|
سیستم طراحی قالب فاکتور یک ابزار قدرتمند برای ایجاد قالب‌های سفارشی فاکتور است که شامل دو حالت اصلی می‌باشد:
|
|
|
|
1. **حالت کد نویسی**: ویرایشگر Monaco برای نوشتن کد HTML/Twig
|
|
2. **حالت طراحی**: رابط drag & drop برای طراحی بصری
|
|
|
|
## ویژگی‌های اصلی
|
|
|
|
### 🔧 حالت کد نویسی
|
|
- ویرایشگر Monaco با syntax highlighting
|
|
- پشتیبانی از HTML، CSS، و Twig
|
|
- Auto-completion و IntelliSense
|
|
- خطایابی کد
|
|
|
|
### 🎨 حالت طراحی
|
|
- **Toolbox**: مجموعه عناصر آماده
|
|
- **Canvas**: فضای طراحی با grid system
|
|
- **Properties Panel**: تنظیمات المان‌ها
|
|
- **Drag & Drop**: کشیدن و رها کردن المان‌ها
|
|
|
|
## عناصر موجود در Toolbox
|
|
|
|
### عناصر پایه
|
|
- **کانتینر**: برای گروه‌بندی المان‌ها
|
|
- **متن**: برای اضافه کردن متن ساده
|
|
- **عنوان**: برای عناوین مختلف
|
|
- **جدول**: برای نمایش داده‌ها
|
|
- **تصویر**: برای اضافه کردن لوگو یا تصاویر
|
|
- **خط جداکننده**: برای تفکیک بخش‌ها
|
|
|
|
### عناصر خاص فاکتور
|
|
- **اطلاعات کسب‌وکار**: نمایش اطلاعات فروشنده
|
|
- **اطلاعات مشتری**: نمایش اطلاعات خریدار
|
|
- **سربرگ فاکتور**: شامل لوگو، عنوان و شماره فاکتور
|
|
- **جدول اقلام**: برای نمایش محصولات/خدمات
|
|
- **جمع‌ها**: نمایش محاسبات نهایی
|
|
- **امضا**: بخش مهر و امضا
|
|
|
|
### متغیرها
|
|
- متغیرهای Twig برای نمایش داده‌های پویا
|
|
- قابلیت فرمت‌بندی اعداد
|
|
- پشتیبانی از شرط‌ها و حلقه‌ها
|
|
|
|
## نحوه استفاده
|
|
|
|
### شروع کار
|
|
1. روی دکمه "طراحی" کلیک کنید
|
|
2. از Toolbox المان مورد نظر را انتخاب کنید
|
|
3. آن را روی Canvas بکشید و رها کنید
|
|
4. روی المان کلیک کنید تا Properties Panel باز شود
|
|
|
|
### تنظیمات المان
|
|
- **ویژگی‌های پایه**: متن، کلاس CSS، شناسه
|
|
- **موقعیت و اندازه**: تنظیم grid position و span
|
|
- **استایل‌ها**: فونت، رنگ، تراز متن
|
|
- **تنظیمات خاص**: برای جداول و متغیرها
|
|
|
|
### کتابخانه قالب‌ها
|
|
- قالب‌های آماده برای فروش، خرید و برگشت
|
|
- قالب‌های سفارشی
|
|
- امکان import/export قالب‌ها
|
|
|
|
### پیش‌نمایش
|
|
- پیش‌نمایش زنده با داده‌های نمونه
|
|
- تنظیم اندازه کاغذ
|
|
- نمایش گرید و حاشیه‌ها
|
|
- چاپ و دانلود PDF
|
|
|
|
## متغیرهای در دسترس
|
|
|
|
### اطلاعات کسب‌وکار
|
|
- `{{ business.name }}`: نام کسب‌وکار
|
|
- `{{ business.tel }}`: تلفن
|
|
- `{{ business.address }}`: آدرس
|
|
|
|
### اطلاعات فاکتور
|
|
- `{{ doc.code }}`: شماره فاکتور
|
|
- `{{ doc.date }}`: تاریخ فاکتور
|
|
- `{{ doc.amount }}`: مبلغ کل
|
|
|
|
### اطلاعات مشتری
|
|
- `{{ person.name }}`: نام مشتری
|
|
- `{{ person.mobile }}`: موبایل
|
|
- `{{ person.address }}`: آدرس
|
|
|
|
### اقلام فاکتور
|
|
```twig
|
|
{% for item in rows %}
|
|
{{ item.commodity.name }} - {{ item.commodityCount }}
|
|
{{ item.bs | number_format(0, '.', ',') }}
|
|
{% endfor %}
|
|
```
|
|
|
|
### جمع‌ها
|
|
- `{{ discount }}`: تخفیف
|
|
- `{{ transfer }}`: هزینه ارسال
|
|
- `{{ note }}`: یادداشت
|
|
|
|
## نکات مهم
|
|
|
|
### همگام‌سازی
|
|
- تغییرات در حالت طراحی به صورت خودکار به کد تبدیل می‌شود
|
|
- تغییرات در کد نیز روی طراحی اعمال می‌شود
|
|
- همیشه آخرین تغییرات ذخیره می‌شود
|
|
|
|
### امنیت
|
|
- کدها در Sandbox اجرا می‌شوند
|
|
- فقط دستورات مجاز Twig قابل استفاده است
|
|
- از اجرای JavaScript جلوگیری می‌شود
|
|
|
|
### بهینه‌سازی
|
|
- از CSS ساده استفاده کنید
|
|
- اندازه‌های مناسب برای چاپ تنظیم کنید
|
|
- از فونت‌های استاندارد استفاده کنید
|
|
|
|
## عیب‌یابی
|
|
|
|
### مشکلات متداول
|
|
1. **عدم نمایش المان**: بررسی کنید که grid position درست تنظیم شده باشد
|
|
2. **به‌هم‌ریختگی چاپ**: از CSS سازگار با چاپ استفاده کنید
|
|
3. **خطای متغیر**: نام متغیر را با لیست بالا تطبیق دهید
|
|
|
|
### پشتیبانی
|
|
- برای مشکلات فنی با تیم توسعه تماس بگیرید
|
|
- مستندات کامل در بخش راهنما موجود است
|
|
- نمونه‌های آماده برای الهام گرفتن استفاده کنید
|
|
|
|
## نمونه‌های کاربردی
|
|
|
|
### قالب ساده فروش
|
|
```html
|
|
<div class="invoice">
|
|
<h1>{{ business.name }}</h1>
|
|
<p>شماره: {{ doc.code }} | تاریخ: {{ doc.date }}</p>
|
|
|
|
<table>
|
|
<tr><th>کالا</th><th>تعداد</th><th>قیمت</th></tr>
|
|
{% for item in rows %}
|
|
<tr>
|
|
<td>{{ item.commodity.name }}</td>
|
|
<td>{{ item.commodityCount }}</td>
|
|
<td>{{ item.bs | number_format(0, '.', ',') }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
<p>جمع کل: {{ doc.amount | number_format(0, '.', ',') }}</p>
|
|
</div>
|
|
```
|
|
|
|
### قالب پیشرفته
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fa" direction="rtl">
|
|
<head>
|
|
<style>
|
|
.invoice-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
border-bottom: 2px solid #333;
|
|
padding-bottom: 20px;
|
|
}
|
|
.info-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.items-table th,
|
|
.items-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="invoice-container">
|
|
<!-- محتوای قالب -->
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
این سیستم به شما امکان می‌دهد تا قالب‌های حرفه‌ای و سفارشی برای فاکتورهای خود ایجاد کنید. |