MrRezai/hesabixCore
1
0
Fork 0
forked from morrning/hesabixCore
Code Pull requests Activity
hesabixCore/webUI/src/components/TemplateDesigner-README.md

6.4 KiB
Raw Blame History

راهنمای سیستم طراحی قالب فاکتور

مقدمه

سیستم طراحی قالب فاکتور یک ابزار قدرتمند برای ایجاد قالب‌های سفارشی فاکتور است که شامل دو حالت اصلی می‌باشد:

  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 }}: آدرس

اقلام فاکتور

{% 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. خطای متغیر: نام متغیر را با لیست بالا تطبیق دهید

پشتیبانی

  • برای مشکلات فنی با تیم توسعه تماس بگیرید
  • مستندات کامل در بخش راهنما موجود است
  • نمونه‌های آماده برای الهام گرفتن استفاده کنید

نمونه‌های کاربردی

قالب ساده فروش

<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>

قالب پیشرفته

<!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>

این سیستم به شما امکان می‌دهد تا قالب‌های حرفه‌ای و سفارشی برای فاکتورهای خود ایجاد کنید.