CRM_Montzar/antd-strict-governance.mdc.md

description, globs, alwaysApply

description	globs	alwaysApply
حاکمیت مطلق معماری رابط کاربری بر پایه Ant Design Vue v4، قفل مهاجرت صفحه به صفحه، ممنوعیت کامل CSS دستی و استاندارد ریاضی چیدمان	apps/web/src/**/*.{vue,ts,tsx,css}	true

قرارداد حاکمیتی و غیرقابل‌مذاکرهٔ رابط کاربری (Ant Design Vue v4 Strict Contract)

تنها منبع مجاز برای ساخت و بازنویسی عناصر رابط کاربری در این پروژه ant-design-vue (نسخه ۴) است. هرگونه تخطی از قوانین زیر خطای معماری محسوب می‌شود:

۱. قفل ایزولاسیون و مهاجرت صفحه به صفحه (Single-Page Blast Radius Lock)

1. ممنوعیت ویرایش دسته‌جمعی: تو فقط و فقط مجاز به ویرایش صفحه (View) یا کامپوننتی هستی که کاربر صراحتاً در همان نوبت نام برده است. دست زدن به سایر صفحات پروژه مطلقاً ممنوع است.
2. حفظ لایهٔ قدیمی برای صفحات مهاجرت‌نکرده: فایل‌های داخل apps/web/src/components/ui/Ui*.vue و استایل‌های سراسری main.css / tokens.css نباید حذف یا ویرایش شوند تا صفحات قدیمی پروژه بدون خطا به کار خود ادامه دهند.
3. قطع کامل وابستگی در صفحهٔ هدف: در صفحه‌ای که کاربر دستور بازنویسی آن را می‌دهد، تمام ایمپورت‌های @/components/ui و کلاس‌های قدیمی باید از آن فایل حذف شوند و ۱۰۰٪ با کامپوننت‌های رسمی <a-...> جایگزین گردند.
4. کامپوننت‌های تخصصی تاریخ شمسی و مبالغ: در صفحات بازنویسی‌شده، اگر از JalaliDateInput یا MoneyInput استفاده شده است، منطق آن‌ها را حفظ کن اما مطمئن شو ظاهر ورودی آن‌ها با ارتفاع 40px، ردیوس 10px و عرض style="width: 100%" کاملاً هم‌تراز با فیلدهای Ant Design نمایش داده می‌شود.

۲. لیست سیاه سینتکس و تگ‌های ممنوعه در صفحات بازنویسی‌شده (Banned Syntax)

در هر فایلی که بازنویسی یا ایجاد می‌کنی، وجود موارد زیر خطای بحرانی است و باید فوراً حذف شوند:

• تگ‌های خام HTML برای فرم و جدول: <button>, <input>, <select>, <textarea>, <label>, <form>, <table>, <thead>, <tbody>, <tr>, <td>.
• کلاس‌های لگسی پروژه: .btn, .btn-primary, .btn-ghost, .btn-danger, .btn-save, .field, .crm-page, .crm-page-header, .crm-card, .crm-table, .crm-empty-state.
• کلاس‌های Tailwind (پروژه فاقد Tailwind است): استفاده از کلاس‌های ناموجود مانند w-full, flex, gap-4, p-4, mb-4 مطلقاً ممنوع است. برای عرض کامل کنترل‌ها فقط از style="width: 100%" یا پراپ block استفاده کن.

۳. قوانین ریاضی چیدمان، گرید و ریتم فضایی (Spatial & Layout Mathematics)

1. ممنوعیت تکه‌تکه کردن فرم به کارت‌های متعدد (Anti-Card-Fragmentation):
   • خرد کردن یک فرم به چندین باکس یا کارت مجزا زیر هم ممنوع است.
   • کل فیلدهای یک فرم اصلی باید در حداکثر ۱ <a-card :bordered="false"> تجمیع شوند.
   • برای تفکیک بخش‌های منطقی در داخل آن کارت واحد، فقط از <a-divider orientation="right">عنوان بخش</a-divider> استفاده کن.
2. چیدمان استاندارد دو ستونه (فرم اصلی + پنل خلاصه):
   • ردیف اصلی صفحه: <a-row :gutter="[24, 24]">
   • ستون اصلی (فرم/محتوا): <a-col :xs="24" :lg="17" :xl="18">
   • ستون کناری (خلاصه وضعیت): <a-col :xs="24" :lg="7" :xl="6"> همراه با <a-affix :offset-top="24">.
   • محتوای پنل خلاصه باید الزاماً با <a-descriptions :column="1" size="small" bordered> داخل <a-card title="..." :bordered="false"> پیاده‌سازی شود، نه با div و span دستی.
3. قانون عرض فیلدها در فرم (Form Grid Allocation):
   • تمام فرم‌ها باید <a-form layout="vertical" :model="..."> باشند و تمام فیلدها بدون استثنا داخل <a-form-item label="..." name="..."> قرار گیرند.
   • رها کردن فیلدهای کوتاه در عرض ۱۰۰٪ (span="24") ممنوع است. چیدمان درون فرم باید با <a-row :gutter="[16, 0]"> به شکل زیر باشد:
     • فیلدهای کوتاه (تاریخ، ساعت، مدت زمان، مبلغ، وضعیت، نوع، کد): <a-col :xs="24" :sm="12" :md="8"> (۳ ستونه).
     • فیلدهای متوسط (انتخاب مشتری، مسئول انجام، فرصت مرتبط، دسته‌بندی، عنوان): <a-col :xs="24" :md="12"> (۲ ستونه).
     • فیلدهای تمام‌عرض (توضیحات، یادداشت، چک‌لیست، برچسب‌ها): <a-col :span="24">.
     • سوییچ‌ها و چک‌باکس‌های هم‌خانواده: قرارگیری در یک ردیف با <a-space :size="24" wrap>.
4. مدیریت Margin و Padding بدون CSS دستی:
   • فاصلهٔ عمودی فیلدها فقط توسط itemMarginBottom در کانفیگ تم <a-form-item> کنترل می‌شود.
   • فاصلهٔ افقی/عمودی دکمه‌ها و المان‌ها فقط با <a-space :size="8 | 12 | 16"> یا <a-flex gap="small | middle | large" align="center" justify="space-between"> کنترل می‌شود.

۴. قفل سینتکس اختصاصی Ant Design Vue v4

• بایندینگ مقدار (v-model): استفاده از v-model="..." بدون آرگومان روی کامپوننت‌های Ant Design Vue خطاست:
  • برای a-input, a-textarea, a-input-number, a-select, a-radio-group, a-segmented, a-date-picker, a-time-picker: الزاماً v-model:value="...".
  • برای a-checkbox, a-switch: الزاماً v-model:checked="...".
  • برای a-modal, a-drawer, a-dropdown, a-popover, a-tooltip: الزاماً v-model:open="..." (پراپ :visible منسوخ و ممنوع است).
• الزام عرض ۱۰۰٪ روی کنترل‌های خاص: کامپوننت‌های <a-input-number>, <a-date-picker>, <a-time-picker> و <a-select> در داخل <a-form-item> باید دارای style="width: 100%" باشند.
• فیدبک و پیام‌ها: برای نمایش پیام از import { message, notification, Modal } from 'ant-design-vue' استفاده کن.

۵. حاکمیت مطلق توکن‌ها و ممنوعیت CSS دستی (Zero Manual Styling & RTL Lock)

1. نوشتن کد رنگ (#hex, rgb, rgba, hsl)، سایه (box-shadow)، ردیوس (border-radius) و فاصله‌های دستی (margin, padding با px/rem) در <style scoped> ممنوع است.
2. تمام تنظیمات ظاهری (ردیوس، شدو، ارتفاع کنترل‌ها، پدینگ و رنگ‌ها) فقط در فایل مرکزی apps/web/src/theme/antdTheme.ts تعریف می‌شوند.
3. در صورت نیاز ضروری به خواندن توکن در یک کانتینر، فقط از هوک const { token } = theme.useToken() در ant-design-vue استفاده کن.
4. استفاده از :deep(.ant-...) برای دست‌کاری ظاهر کامپوننت‌های انت ممنوع است.
5. در RTL، استفاده از left, right, margin-left, margin-right, padding-left, padding-right ممنوع است؛ فقط از خواص منطقی (inset-inline-start, inset-inline-end, margin-inline, padding-inline) استفاده شود.

۶. گیت خودارزیابی پیش از تحویل کد (Self-Verification Gate)

قبل از اتمام کار روی فایلِ درخواستی، این ۵ شرط را بررسی کن:

• آیا فقط فایل درخواستی کاربر ویرایش شده و سایر صفحات دست‌نخورده مانده‌اند؟
• آیا تمام تگ‌های خام فرم، کامپوننت‌های Ui*، کلاس‌های .btn/.field/.crm-* و کلاس‌های ناموجود مثل w-full از این صفحه حذف شده‌اند؟
• آیا فرم در ۱ کارت واحد با <a-divider> و گرید <a-row :gutter="[16, 0]"> چیده شده و فیلدهای کوتاه از حالت تمام‌عرض خارج شده‌اند؟
• آیا تمام بایندینگ‌ها از v-model:value، v-model:checked و v-model:open به همراه style="width: 100%" روی سلکت‌ها و شمارنده‌ها استفاده می‌کنند؟
• آیا <style scoped> کاملاً از رنگ‌های Hex، مارجین/پدینگ دستی، ردیوس، شدو و :deep(.ant-*) پاک‌سازی شده است؟