1371 lines
55 KiB
HTML
1371 lines
55 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>مستند فنی پروژه xKanban | تحلیل جامع معماری و پیادهسازی</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
|
||
:root {
|
||
--primary: #1a365d;
|
||
--primary-light: #2c5282;
|
||
--accent: #c9a961;
|
||
--accent-dark: #a8893f;
|
||
--bg: #faf9f6;
|
||
--card-bg: #ffffff;
|
||
--text: #1a202c;
|
||
--text-muted: #4a5568;
|
||
--border: #e2e8f0;
|
||
--success: #38a169;
|
||
--danger: #e53e3e;
|
||
--warning: #dd6b20;
|
||
--shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 30px rgba(26,54,93,0.08);
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: 'Vazirmatn', Tahoma, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.9;
|
||
font-size: 15px;
|
||
padding: 30px 15px;
|
||
}
|
||
.document-container {
|
||
max-width: 950px;
|
||
margin: 0 auto;
|
||
background: var(--card-bg);
|
||
box-shadow: var(--shadow);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.document-header {
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
||
color: white;
|
||
padding: 50px 40px 40px;
|
||
position: relative;
|
||
border-bottom: 4px solid var(--accent);
|
||
}
|
||
.document-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; right: 0;
|
||
width: 200px; height: 200px;
|
||
background: radial-gradient(circle, rgba(201,169,97,0.15) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
transform: translate(50%, -50%);
|
||
}
|
||
.header-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.company-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.company-logo {
|
||
width: 60px; height: 60px;
|
||
background: var(--accent);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
}
|
||
.doc-meta {
|
||
text-align: left;
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
.doc-meta div { margin-bottom: 3px; }
|
||
.document-title {
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 20px 0;
|
||
}
|
||
.document-title .label {
|
||
display: inline-block;
|
||
background: rgba(201,169,97,0.2);
|
||
color: var(--accent);
|
||
padding: 4px 16px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
border: 1px solid rgba(201,169,97,0.4);
|
||
}
|
||
.document-title h1 {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
margin-bottom: 10px;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
.document-title h2 {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
opacity: 0.9;
|
||
}
|
||
.document-body {
|
||
padding: 40px;
|
||
}
|
||
.intro-text {
|
||
background: linear-gradient(to left, #f7fafc, #edf2f7);
|
||
border-right: 4px solid var(--accent);
|
||
padding: 20px 25px;
|
||
border-radius: 8px;
|
||
margin-bottom: 35px;
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
}
|
||
.section {
|
||
margin-bottom: 40px;
|
||
page-break-inside: avoid;
|
||
}
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid var(--border);
|
||
margin-bottom: 20px;
|
||
}
|
||
.section-number {
|
||
width: 50px; height: 50px;
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 4px 10px rgba(26,54,93,0.2);
|
||
}
|
||
.section-title { flex: 1; }
|
||
.section-title h3 {
|
||
font-size: 19px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 2px;
|
||
}
|
||
.section-title .subtitle {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.section-content {
|
||
padding-right: 10px;
|
||
}
|
||
.section-content p {
|
||
margin-bottom: 12px;
|
||
text-align: justify;
|
||
text-indent: 20px;
|
||
}
|
||
.section-content p.no-indent { text-indent: 0; }
|
||
.highlight-box {
|
||
background: linear-gradient(to left, #fffaf0, #fef5e7);
|
||
border: 1px solid #f6e05e;
|
||
border-right: 4px solid var(--accent);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.highlight-box strong {
|
||
color: var(--accent-dark);
|
||
}
|
||
.info-box {
|
||
background: linear-gradient(to left, #ebf8ff, #e6f6ff);
|
||
border: 1px solid #90cdf4;
|
||
border-right: 4px solid var(--primary-light);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.success-box {
|
||
background: linear-gradient(to left, #f0fff4, #e6fffa);
|
||
border: 1px solid #9ae6b4;
|
||
border-right: 4px solid var(--success);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.warning-box {
|
||
background: linear-gradient(to left, #fffaf0, #fef5e7);
|
||
border: 1px solid #fbd38d;
|
||
border-right: 4px solid var(--warning);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.code-box {
|
||
background: #1a202c;
|
||
color: #e2e8f0;
|
||
border-right: 4px solid var(--accent);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 13px;
|
||
font-family: 'Consolas', 'Courier New', monospace;
|
||
direction: ltr;
|
||
text-align: left;
|
||
overflow-x: auto;
|
||
line-height: 1.7;
|
||
}
|
||
.code-box .key { color: #c9a961; }
|
||
.code-box .str { color: #68d391; }
|
||
.code-box .num { color: #63b3ed; }
|
||
.code-box .comment { color: #718096; font-style: italic; }
|
||
.styled-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
.styled-table thead {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
}
|
||
.styled-table th {
|
||
padding: 14px 16px;
|
||
text-align: right;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
.styled-table td {
|
||
padding: 13px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 13px;
|
||
}
|
||
.styled-table tbody tr:last-child td { border-bottom: none; }
|
||
.styled-table tbody tr:nth-child(even) { background: #f8fafc; }
|
||
.styled-table .highlight-row {
|
||
background: #fffaf0 !important;
|
||
font-weight: 600;
|
||
}
|
||
.comparison-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
.comparison-card {
|
||
background: #f8fafc;
|
||
border: 2px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
position: relative;
|
||
}
|
||
.comparison-card.recommended {
|
||
border-color: var(--success);
|
||
background: linear-gradient(to left, #f0fff4, #e6fffa);
|
||
}
|
||
.comparison-card .card-badge {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 20px;
|
||
background: var(--success);
|
||
color: white;
|
||
padding: 3px 12px;
|
||
border-radius: 15px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
.comparison-card h4 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid var(--border);
|
||
}
|
||
.comparison-card.recommended h4 {
|
||
border-bottom-color: var(--success);
|
||
}
|
||
.comparison-card ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.comparison-card ul li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 13px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.comparison-card ul li:last-child { border-bottom: none; }
|
||
.comparison-card ul li .value {
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
}
|
||
.quote-box {
|
||
background: linear-gradient(135deg, #f7fafc, #edf2f7);
|
||
border-right: 4px solid var(--accent);
|
||
padding: 20px 25px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
position: relative;
|
||
}
|
||
.quote-box::before {
|
||
content: '"';
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 15px;
|
||
font-size: 60px;
|
||
color: var(--accent);
|
||
opacity: 0.3;
|
||
font-family: Georgia, serif;
|
||
}
|
||
.quote-box p {
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
text-indent: 0 !important;
|
||
}
|
||
.quote-box .source {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 15px;
|
||
margin: 25px 0;
|
||
}
|
||
.stat-card {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
box-shadow: 0 4px 12px rgba(26,54,93,0.2);
|
||
}
|
||
.stat-card .stat-value {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
margin-bottom: 5px;
|
||
color: var(--accent);
|
||
line-height: 1.3;
|
||
}
|
||
.stat-card .stat-label {
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
margin: 25px 0;
|
||
}
|
||
.feature-card {
|
||
background: #f8fafc;
|
||
border: 1px solid var(--border);
|
||
border-right: 4px solid var(--primary-light);
|
||
padding: 18px;
|
||
border-radius: 8px;
|
||
}
|
||
.feature-card .feature-icon {
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.feature-card h5 {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.feature-card p {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
text-indent: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
.architecture-diagram {
|
||
background: linear-gradient(to left, #f7fafc, #edf2f7);
|
||
border: 2px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 25px;
|
||
margin: 25px 0;
|
||
text-align: center;
|
||
}
|
||
.arch-layer {
|
||
background: white;
|
||
border: 2px solid var(--primary-light);
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin: 10px auto;
|
||
max-width: 700px;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||
}
|
||
.arch-layer-title {
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
border-bottom: 2px solid var(--accent);
|
||
padding-bottom: 5px;
|
||
display: inline-block;
|
||
}
|
||
.arch-components {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
}
|
||
.arch-chip {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
padding: 6px 14px;
|
||
border-radius: 15px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
.arch-arrow {
|
||
text-align: center;
|
||
font-size: 24px;
|
||
color: var(--accent);
|
||
margin: 5px 0;
|
||
}
|
||
.conclusion-box {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
margin: 30px 0;
|
||
text-align: center;
|
||
box-shadow: 0 8px 20px rgba(26,54,93,0.3);
|
||
}
|
||
.conclusion-box h3 {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
margin-bottom: 15px;
|
||
color: var(--accent);
|
||
}
|
||
.conclusion-box p {
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
text-indent: 0 !important;
|
||
margin-bottom: 15px;
|
||
}
|
||
.conclusion-box .highlight {
|
||
background: rgba(201,169,97,0.2);
|
||
padding: 15px 20px;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
border: 1px solid rgba(201,169,97,0.4);
|
||
}
|
||
.document-footer {
|
||
background: var(--primary);
|
||
color: white;
|
||
padding: 25px 40px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
margin-top: 40px;
|
||
}
|
||
.document-footer .footer-brand {
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
}
|
||
.footer-divider {
|
||
width: 60px;
|
||
height: 2px;
|
||
background: var(--accent);
|
||
margin: 10px auto;
|
||
}
|
||
.page-info {
|
||
text-align: center;
|
||
padding: 15px;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 30px;
|
||
}
|
||
@media print {
|
||
body { background: white; padding: 0; }
|
||
.document-container { box-shadow: none; border-radius: 0; }
|
||
.section { page-break-inside: avoid; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.document-body { padding: 25px 20px; }
|
||
.document-header { padding: 30px 20px; }
|
||
.comparison-grid { grid-template-columns: 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr; }
|
||
.feature-grid { grid-template-columns: 1fr; }
|
||
.header-top { flex-direction: column; gap: 15px; }
|
||
.doc-meta { text-align: center; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="document-container">
|
||
<header class="document-header">
|
||
<div class="header-top">
|
||
<div class="company-badge">
|
||
<div class="company-logo"></div>
|
||
</div>
|
||
<div class="doc-meta">
|
||
<div>شماره مستند: TECH-XKN-1405-001</div>
|
||
<div>نسخه: ۱.۰.۰</div>
|
||
<div>تاریخ تهیه: ۲۲ شهریور ۱۴۰۵ (۱۳ سپتامبر ۲۰۲۶)</div>
|
||
<div>ساعت: ۱۰:۰۰</div>
|
||
<div>طبقهبندی: داخلی - فنی</div>
|
||
</div>
|
||
</div>
|
||
<div class="document-title">
|
||
<span class="label">TECHNICAL DOCUMENTATION</span>
|
||
<h1>مستند فنی پروژه xKanban</h1>
|
||
<h2>تحلیل جامع معماری، ساختار داده و پیادهسازی ابزار مدیریت بردهای کانبان</h2>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="document-body">
|
||
<div class="intro-text">
|
||
<strong>مخاطبان مستند:</strong> تیم فنی، معماران نرمافزار، توسعهدهندگان و مدیران فنی<br>
|
||
این مستند بهعنوان مرجع فنی جامع پروژه <strong>xKanban</strong> تهیه شده است و تمامی لایههای معماری، ساختار دادهها، ماژولهای کلیدی و مکانیزمهای پیادهسازی را از دیدگاه یک معمار ارشد نرمافزار تشریح مینماید. هدف از این مستند، ارائه درک عمیق از تصمیمات طراحی و ایجاد پایهای مستحکم برای توسعه و نگهداری آتی محصول میباشد.
|
||
</div>
|
||
|
||
<!-- بخش ۱ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۱</div>
|
||
<div class="section-title">
|
||
<h3>خلاصه اجرایی و معرفی محصول</h3>
|
||
<div class="subtitle">Executive Summary & Product Overview</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>پروژه <strong>xKanban</strong> یک ابزار تحت وب مستقل (Standalone) برای مدیریت بردهای کانبان است که با هدف ارائه راهکاری چابک، قابل حمل و بدون نیاز به سرور طراحی و پیادهسازی شده است. این محصول به کاربران امکان میدهد تا پروژهها، بردها، ستونها و کارتهای کاری خود را با ساختاری استاندارد و حرفهای مدیریت نمایند.</p>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-value">۱۰۰٪<br>Client-Side</div>
|
||
<div class="stat-label">اجرا در مرورگر بدون نیاز به سرور</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">Single<br>File</div>
|
||
<div class="stat-label">توزیع به صورت یک فایل HTML مستقل</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">Zero<br>Dependency</div>
|
||
<div class="stat-label">بدون وابستگی به کتابخانه خارجی</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="highlight-box">
|
||
<strong>🎯 چشمانداز طراحی:</strong> xKanban با فلسفه «ابزار در جیب کاربر» طراحی شده است؛ به گونهای که کاربر بدون نیاز به اتصال اینترنت، نصب نرمافزار یا ایجاد حساب کاربری، به یک سیستم کامل مدیریت پروژه دسترسی داشته باشد.
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">اهداف کلیدی پروژه:</h4>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;"><strong>استقلال کامل:</strong> اجرا به صورت آفلاین و بدون نیاز به زیرساخت سرور</li>
|
||
<li style="margin-bottom: 8px;"><strong>قابلیت حمل:</strong> ذخیره و انتقال پروژه از طریق فایل JSON</li>
|
||
<li style="margin-bottom: 8px;"><strong>تجربه کاربری حرفهای:</strong> رابط کاربری مدرن با پشتیبانی از حالت تاریک/روشن</li>
|
||
<li style="margin-bottom: 8px;"><strong>استانداردسازی:</strong> پیادهسازی دقیق متدولوژی کانبان با قابلیتهای پیشرفته</li>
|
||
<li style="margin-bottom: 8px;"><strong>یکپارچگی:</strong> اتصال به سیستمهای خارجی از طریق Webhook</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۲ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۲</div>
|
||
<div class="section-title">
|
||
<h3>معماری کلی سیستم</h3>
|
||
<div class="subtitle">System Architecture Overview</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>معماری xKanban بر پایه الگوی <strong>Single-Page Application (SPA)</strong> با رویکرد <strong>State-Driven</strong> طراحی شده است. تمامی منطق برنامه در لایه کلاینت اجرا میشود و از الگوی <strong>MVC سبک</strong> برای جداسازی مسئولیتها استفاده شده است.</p>
|
||
|
||
<div class="architecture-diagram">
|
||
<div class="arch-layer">
|
||
<div class="arch-layer-title">🎨 Presentation Layer (UI)</div>
|
||
<div class="arch-components">
|
||
<span class="arch-chip">Toolbar</span>
|
||
<span class="arch-chip">Board View</span>
|
||
<span class="arch-chip">Column Renderer</span>
|
||
<span class="arch-chip">Card Renderer</span>
|
||
<span class="arch-chip">Modal System</span>
|
||
<span class="arch-chip">Filter Panel</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-arrow">▼</div>
|
||
<div class="arch-layer">
|
||
<div class="arch-layer-title">⚙️ Application Layer (Logic)</div>
|
||
<div class="arch-components">
|
||
<span class="arch-chip">Board Manager</span>
|
||
<span class="arch-chip">Column Manager</span>
|
||
<span class="arch-chip">Card Manager</span>
|
||
<span class="arch-chip">Tag Manager</span>
|
||
<span class="arch-chip">Filter Engine</span>
|
||
<span class="arch-chip">Shortcut Handler</span>
|
||
<span class="arch-chip">Webhook Service</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-arrow">▼</div>
|
||
<div class="arch-layer">
|
||
<div class="arch-layer-title">💾 Data Layer (State & Persistence)</div>
|
||
<div class="arch-components">
|
||
<span class="arch-chip">Project State</span>
|
||
<span class="arch-chip">LocalStorage</span>
|
||
<span class="arch-chip">AutoSave Engine</span>
|
||
<span class="arch-chip">JSON Export/Import</span>
|
||
<span class="arch-chip">History Tracker</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>لایه معماری</th>
|
||
<th>مسئولیت اصلی</th>
|
||
<th>تکنولوژی</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Presentation</strong></td>
|
||
<td>رندر رابط کاربری و مدیریت رویدادها</td>
|
||
<td>HTML5 + CSS3 + Vanilla JS</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Application</strong></td>
|
||
<td>منطق تجاری و مدیریت عملیات</td>
|
||
<td>ES6+ Modules Pattern</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Data</strong></td>
|
||
<td>مدیریت وضعیت و پایداری داده</td>
|
||
<td>LocalStorage + JSON API</td>
|
||
</tr>
|
||
<tr class="highlight-row">
|
||
<td><strong>Integration</strong></td>
|
||
<td>ارتباط با سیستمهای خارجی</td>
|
||
<td>Fetch API + Webhook</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 نکته معماری:</strong> انتخاب معماری تکفایلی (Single-File) با وجود پیچیدگی بالای پروژه، یک تصمیم استراتژیک بوده است. این رویکرد امکان توزیع آسان، اجرای آفلاین و عدم وابستگی به زیرساخت را فراهم میآورد.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۳ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۳</div>
|
||
<div class="section-title">
|
||
<h3>ساختار دادهها و مدلها</h3>
|
||
<div class="subtitle">Data Models & Schema Design</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>مدل دادهای xKanban بر پایه ساختار سلسلهمراتبی <strong>Project → Board → Column → Card</strong> طراحی شده است. هر سطح از این سلسلهمراتب، موجودیت مستقلی با ویژگیها و روابط خاص خود دارد.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) مدل Project (پروژه)</h4>
|
||
<div class="code-box">
|
||
<span class="key">Project</span> {<br>
|
||
<span class="key">id</span>: <span class="str">"uuid"</span>,<br>
|
||
<span class="key">title</span>: <span class="str">"string"</span>,<br>
|
||
<span class="key">description</span>: <span class="str">"string"</span>,<br>
|
||
<span class="key">createdAt</span>: <span class="str">"ISO8601"</span>,<br>
|
||
<span class="key">webhook</span>: { <span class="key">enabled</span>: <span class="num">boolean</span>, <span class="key">url</span>: <span class="str">"string"</span> },<br>
|
||
<span class="key">boards</span>: [<span class="key">Board</span>],<br>
|
||
<span class="key">globalTags</span>: [<span class="key">Tag</span>]<br>
|
||
}
|
||
</div>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ب) مدل Board (برد)</h4>
|
||
<div class="code-box">
|
||
<span class="key">Board</span> {<br>
|
||
<span class="key">id</span>: <span class="str">"uuid"</span>,<br>
|
||
<span class="key">title</span>: <span class="str">"string"</span>,<br>
|
||
<span class="key">description</span>: <span class="str">"string"</span>,<br>
|
||
<span class="key">backgroundColor</span>: <span class="str">"#hex"</span>,<br>
|
||
<span class="key">columns</span>: [<span class="key">Column</span>]<br>
|
||
}
|
||
</div>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ج) مدل Column (ستون)</h4>
|
||
<div class="code-box">
|
||
<span class="key">Column</span> {<br>
|
||
<span class="key">id</span>: <span class="str">"uuid"</span>,<br>
|
||
<span class="key">title</span>: <span class="str">"string"</span>,<br>
|
||
<span class="key">backgroundColor</span>: <span class="str">"#hex"</span>,<br>
|
||
<span class="key">textColor</span>: <span class="str">"#hex"</span>,<br>
|
||
<span class="key">order</span>: <span class="num">number</span>,<br>
|
||
<span class="key">cards</span>: [<span class="key">Card</span>]<br>
|
||
}
|
||
</div>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">د) مدل Card (کارت) - غنیترین موجودیت</h4>
|
||
<div class="code-box">
|
||
<span class="key">Card</span> {<br>
|
||
<span class="key">id</span>: <span class="str">"uuid"</span>,<br>
|
||
<span class="key">title</span>: <span class="str">"string"</span>,<br>
|
||
<span class="key">description</span>: <span class="str">"string"</span>,<br>
|
||
<span class="key">dueDate</span>: <span class="str">"ISO8601 | null"</span>,<br>
|
||
<span class="key">backgroundColor</span>: <span class="str">"#hex"</span>,<br>
|
||
<span class="key">assignees</span>: [<span class="str">"string"</span>],<br>
|
||
<span class="key">tags</span>: [<span class="str">"tagId"</span>],<br>
|
||
<span class="key">dependencies</span>: [<span class="str">"cardId"</span>],<br>
|
||
<span class="key">checklist</span>: [{ <span class="key">text</span>: <span class="str">"string"</span>, <span class="key">done</span>: <span class="num">boolean</span> }],<br>
|
||
<span class="key">history</span>: [{ <span class="key">timestamp</span>, <span class="key">action</span>, <span class="key">fromColumn</span>, <span class="key">toColumn</span> }]<br>
|
||
}
|
||
</div>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠️ نکته طراحی مهم:</strong> استفاده از UUID برای شناسهها، امکان ادغام پروژهها، جلوگیری از تداخل شناسهها در عملیات Import/Export و پشتیبانی از همزمانی (Concurrency) را فراهم میآورد. این تصمیم برای مقیاسپذیری آینده حیاتی است.
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">روابط بین موجودیتها:</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>رابطه</th>
|
||
<th>نوع</th>
|
||
<th>توضیح</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Project → Boards</td>
|
||
<td>One-to-Many</td>
|
||
<td>هر پروژه میتواند چندین برد داشته باشد</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Board → Columns</td>
|
||
<td>One-to-Many</td>
|
||
<td>هر برد شامل ستونهای متعدد است</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Column → Cards</td>
|
||
<td>One-to-Many</td>
|
||
<td>هر ستون شامل کارتهای متعدد است</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Card ↔ Card</td>
|
||
<td>Many-to-Many</td>
|
||
<td>وابستگی بین کارتها (Dependencies)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Card → Tags</td>
|
||
<td>Many-to-Many</td>
|
||
<td>کارتها میتوانند چندین برچسب داشته باشند</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Card → Assignees</td>
|
||
<td>Many-to-Many</td>
|
||
<td>هر کارت میتواند چندین مسئول داشته باشد</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۴ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۴</div>
|
||
<div class="section-title">
|
||
<h3>ماژولهای کلیدی و مسئولیتها</h3>
|
||
<div class="subtitle">Core Modules & Responsibilities</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>سیستم xKanban از ماژولهای مجزا و با مسئولیت مشخص تشکیل شده است. این جداسازی بر اساس اصل <strong>Single Responsibility Principle (SRP)</strong> انجام شده و امکان نگهداری و توسعه آتی را فراهم میآورد.</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h5>Board Manager</h5>
|
||
<p>مدیریت چرخه حیات بردها شامل ایجاد، ویرایش، حذف و جابجایی بین بردها. نگهداری وضعیت فعال برد فعلی.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📑</div>
|
||
<h5>Column Manager</h5>
|
||
<p>مدیریت ستونها با قابلیت Drag & Drop برای تغییر ترتیب. پشتیبانی از رنگبندی مستقل برای هر ستون.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📝</div>
|
||
<h5>Card Manager</h5>
|
||
<p>مدیریت کامل کارتها شامل متادیتای غنی، چکلیست، وابستگیها و تاریخچه جابجایی.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🏷️</div>
|
||
<h5>Tag Manager</h5>
|
||
<p>مدیریت تگهای عمومی پروژه با قابلیت استفاده مجدد در کارتهای مختلف.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔍</div>
|
||
<h5>Filter Engine</h5>
|
||
<p>موتور فیلتر چندبعدی بر اساس تگ، مسئول، وضعیت و تاریخ سررسید.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⌨️</div>
|
||
<h5>Shortcut Handler</h5>
|
||
<p>مدیریت میانبرهای کیبورد برای افزایش بهرهوری کاربران حرفهای.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">💾</div>
|
||
<h5>AutoSave Engine</h5>
|
||
<p>ذخیره خودکار وضعیت در LocalStorage با مکانیزم بازیابی در صورت قطع ناگهانی.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📡</div>
|
||
<h5>Webhook Service</h5>
|
||
<p>ارسال رویدادهای پروژه به آدرس URL پیکربندیشده با ساختار JSON استاندارد.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="success-box">
|
||
<strong>✓ مزایای معماری ماژولار:</strong>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li>جداسازی کامل مسئولیتها و کاهش Coupling</li>
|
||
<li>قابلیت تستپذیری هر ماژول به صورت مستقل</li>
|
||
<li>امکان توسعه ویژگیهای جدید بدون تأثیر بر ماژولهای موجود</li>
|
||
<li>کاهش پیچیدگی شناختی برای توسعهدهندگان جدید</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۵ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۵</div>
|
||
<div class="section-title">
|
||
<h3>ویژگیهای کلیدی و قابلیتها</h3>
|
||
<div class="subtitle">Key Features & Capabilities</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>xKanban مجموعهای از ویژگیهای پیشرفته را ارائه میدهد که آن را از ابزارهای ساده کانبان متمایز میسازد. در ادامه به تحلیل فنی هر ویژگی پرداخته شده است:</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">۱) سیستم مدیریت بردهای چندگانه</h4>
|
||
<p class="no-indent">امکان ایجاد و مدیریت چندین برد مستقل در یک پروژه، با قابلیت جابجایی سریع بین آنها از طریق منوی کشویی. هر برد دارای تنظیمات مستقل شامل رنگ پسزمینه و توضیحات اختصاصی است.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">۲) Drag & Drop پیشرفته ستونها</h4>
|
||
<p class="no-indent">پیادهسازی مکانیزم Drag & Drop با استفاده از HTML5 Drag API که امکان تغییر ترتیب ستونها را با کشیدن هدر آنها فراهم میآورد. این ویژگی با حفظ وضعیت در مدل داده، پایداری ترتیب را تضمین میکند.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">۳) کارتهای غنی با متادیتای کامل</h4>
|
||
<p class="no-indent">هر کارت میتواند شامل اطلاعات زیر باشد:</p>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;"><strong>تاریخ سررسید:</strong> با قابلیت نمایش وضعیتهای مختلف (عقبافتاده، نزدیک به موعد، عادی، بدون تاریخ)</li>
|
||
<li style="margin-bottom: 8px;"><strong>مسئولین متعدد:</strong> امکان تخصیص چندین نفر به یک کارت</li>
|
||
<li style="margin-bottom: 8px;"><strong>برچسبهای رنگی:</strong> استفاده از تگهای عمومی پروژه</li>
|
||
<li style="margin-bottom: 8px;"><strong>وابستگیها:</strong> ایجاد روابط Dependency بین کارتها</li>
|
||
<li style="margin-bottom: 8px;"><strong>چکلیست:</strong> ریزوظایف با قابلیت علامتگذاری</li>
|
||
<li style="margin-bottom: 8px;"><strong>تاریخچه:</strong> ثبت کامل جابجاییهای کارت بین ستونها</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">۴) موتور فیلتر چندبعدی</h4>
|
||
<p class="no-indent">سیستم فیلتر پیشرفته با قابلیت ترکیب فیلترهای مختلف:</p>
|
||
<div class="code-box">
|
||
<span class="comment">// نمونهای از منطق فیلتر</span><br>
|
||
<span class="key">filteredCards</span> = cards<br>
|
||
.<span class="key">filter</span>(c => selectedTags.length === 0 || <span class="key">c.tags.some</span>(t => selectedTags.<span class="key">includes</span>(t)))<br>
|
||
.<span class="key">filter</span>(c => selectedAssignees.length === 0 || <span class="key">c.assignees.some</span>(a => selectedAssignees.<span class="key">includes</span>(a)))<br>
|
||
.<span class="key">filter</span>(c => <span class="key">matchStatus</span>(c, selectedStatus))<br>
|
||
.<span class="key">filter</span>(c => <span class="key">matchSearch</span>(c, searchText));
|
||
</div>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">۵) سیستم Webhook یکپارچه</h4>
|
||
<p class="no-indent">امکان ارسال رویدادهای پروژه به سیستمهای خارجی (مانند Slack، Teams یا سرویسهای سفارشی) با ساختار استاندارد JSON:</p>
|
||
<div class="code-box">
|
||
{<br>
|
||
<span class="key">"eventId"</span>: <span class="str">"uuid-v4"</span>,<br>
|
||
<span class="key">"timestamp"</span>: <span class="str">"2026-09-13T10:00:00Z"</span>,<br>
|
||
<span class="key">"eventType"</span>: <span class="str">"card.moved"</span>,<br>
|
||
<span class="key">"project"</span>: { <span class="key">"id"</span>: <span class="str">"..."</span>, <span class="key">"title"</span>: <span class="str">"..."</span> },<br>
|
||
<span class="key">"board"</span>: { <span class="key">"id"</span>: <span class="str">"..."</span>, <span class="key">"title"</span>: <span class="str">"..."</span> },<br>
|
||
<span class="key">"data"</span>: { <span class="key">"cardId"</span>: <span class="str">"..."</span>, <span class="key">"from"</span>: <span class="str">"..."</span>, <span class="key">"to"</span>: <span class="str">"..."</span> }<br>
|
||
}
|
||
</div>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">۶) میانبرهای کیبورد جامع</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>میانبر</th>
|
||
<th>عملکرد</th>
|
||
<th>کاربرد</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>Ctrl+S</code></td><td>ذخیره سریع</td><td>ذخیره فوری پروژه</td></tr>
|
||
<tr><td><code>Ctrl+Z</code></td><td>بازگشت (Undo)</td><td>لغو آخرین عملیات</td></tr>
|
||
<tr><td><code>Ctrl+Y</code></td><td>از نو (Redo)</td><td>اعمال مجدد عملیات لغوشده</td></tr>
|
||
<tr><td><code>Ctrl+F</code></td><td>جستجو</td><td>باز کردن پنل جستجو</td></tr>
|
||
<tr><td><code>Esc</code></td><td>بستن پنجرهها</td><td>بستن Modal های باز</td></tr>
|
||
<tr><td><code>Tab</code></td><td>انتخاب کارت</td><td>پیمایش بین کارتها</td></tr>
|
||
<tr><td><code>Alt+←/→</code></td><td>جابجایی کارت</td><td>انتقال کارت بین ستونها</td></tr>
|
||
<tr><td><code>Enter</code></td><td>ویرایش کارت</td><td>باز کردن Modal ویرایش</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۶ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۶</div>
|
||
<div class="section-title">
|
||
<h3>مکانیزمهای ذخیرهسازی و پایداری</h3>
|
||
<div class="subtitle">Persistence & Storage Mechanisms</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>سیستم xKanban از چندین لایه ذخیرهسازی برای تضمین پایداری دادهها استفاده میکند. این رویکرد چندلایه، از دست رفتن دادهها را در سناریوهای مختلف به حداقل میرساند.</p>
|
||
|
||
<div class="comparison-grid">
|
||
<div class="comparison-card">
|
||
<h4>💾 ذخیرهسازی محلی (LocalStorage)</h4>
|
||
<ul>
|
||
<li><span>نوع</span> <span class="value">خودکار و شفاف</span></li>
|
||
<li><span>فرکانس</span> <span class="value">پس از هر تغییر</span></li>
|
||
<li><span>حجم</span> <span class="value">تا ۵ مگابایت</span></li>
|
||
<li><span>دوام</span> <span class="value">دائمی در مرورگر</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="comparison-card recommended">
|
||
<span class="card-badge">پیشنهادی ✓</span>
|
||
<h4>📁 خروجی فایل (JSON)</h4>
|
||
<ul>
|
||
<li><span>نوع</span> <span class="value">دستی و کنترلشده</span></li>
|
||
<li><span>فرکانس</span> <span class="value">بر اساس نیاز کاربر</span></li>
|
||
<li><span>حجم</span> <span class="value">نامحدود</span></li>
|
||
<li><span>دوام</span> <span class="value">دائمی و قابل انتقال</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">مکانیزم AutoSave و بازیابی:</h4>
|
||
<p class="no-indent">سیستم AutoSave با استفاده از الگوی <strong>Debouncing</strong> پیادهسازی شده است تا از نوشتن مکرر و غیرضروری در LocalStorage جلوگیری شود. در زمان راهاندازی، سیستم به صورت خودکار دادههای ذخیرهشده را بررسی کرده و در صورت وجود دادههای بازیابینشده، به کاربر اطلاع میدهد.</p>
|
||
|
||
<div class="code-box">
|
||
<span class="comment">// الگوی Debounced AutoSave</span><br>
|
||
<span class="key">let</span> saveTimeout;<br>
|
||
<span class="key">function</span> <span class="key">scheduleAutoSave</span>() {<br>
|
||
<span class="key">clearTimeout</span>(saveTimeout);<br>
|
||
saveTimeout = <span class="key">setTimeout</span>(() => {<br>
|
||
localStorage.<span class="key">setItem</span>(<span class="str">'xkanban_autosave'</span>, <span class="key">JSON.stringify</span>(state));<br>
|
||
}, <span class="num">1000</span>); <span class="comment">// تأخیر ۱ ثانیهای</span><br>
|
||
}
|
||
</div>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">فرمتهای خروجی پشتیبانیشده:</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>فرمت</th>
|
||
<th>کاربرد</th>
|
||
<th>ویژگیها</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>JSON</strong></td>
|
||
<td>پشتیبانگیری کامل و انتقال پروژه</td>
|
||
<td>حفظ تمامی دادهها و ساختار</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Markdown (MD)</strong></td>
|
||
<td>مستندسازی و اشتراکگذاری</td>
|
||
<td>خروجی خوانا و قابل ویرایش</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>CSV</strong></td>
|
||
<td>تحلیل داده و وارد کردن به Excel</td>
|
||
<td>ساختار جدولی استاندارد</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 نکته فنی:</strong> انتخاب JSON به عنوان فرمت اصلی ذخیرهسازی، امکان تعامل با سایر سیستمها، پشتیبانی از نسخهبندی دادهها و سهولت در دیباگ را فراهم میآورد. همچنین ساختار درختی JSON با مدل دادهای پروژه همخوانی کامل دارد.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۷ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۷</div>
|
||
<div class="section-title">
|
||
<h3>رابط کاربری و تجربه کاربری</h3>
|
||
<div class="subtitle">UI/UX Design Principles</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>طراحی رابط کاربری xKanban بر اساس اصول <strong>Modern UI/UX</strong> و با تمرکز بر بهرهوری کاربر انجام شده است. در ادامه به ویژگیهای کلیدی طراحی پرداخته شده است:</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) طراحی واکنشگرا (Responsive)</h4>
|
||
<p class="no-indent">رابط کاربری به گونهای طراحی شده که در اندازههای مختلف صفحه نمایش، از موبایل تا دسکتاپ، به صورت بهینه نمایش داده شود. استفاده از CSS Grid و Flexbox، چیدمان پویا و انعطافپذیر را تضمین میکند.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ب) حالت تاریک/روشن (Dark/Light Mode)</h4>
|
||
<p class="no-indent">پشتیبانی کامل از هر دو حالت با استفاده از CSS Variables. تغییر حالت به صورت آنی و بدون نیاز به بارگذاری مجدد صفحه انجام میشود و تنظیمات کاربر در LocalStorage ذخیره میگردد.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ج) سیستم Modal پیشرفته</h4>
|
||
<p class="no-indent">تمامی عملیات ویرایش و تنظیمات از طریق Modal های متمرکز انجام میشود. این Modal ها دارای ویژگیهای زیر هستند:</p>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;">باز و بسته شدن با انیمیشن نرم</li>
|
||
<li style="margin-bottom: 8px;">بستن با کلید Esc یا کلیک خارج از Modal</li>
|
||
<li style="margin-bottom: 8px;">مدیریت Focus Trap برای دسترسیپذیری</li>
|
||
<li style="margin-bottom: 8px;">Validation فرمها قبل از ذخیره</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">د) سیستم اعلانها و بازخورد</h4>
|
||
<p class="no-indent">تمامی عملیات کاربر با بازخورد بصری مناسب همراه است. از Toast Notifications برای اعلانهای موقت و Inline Validation برای خطاهای فرم استفاده میشود.</p>
|
||
|
||
<div class="success-box">
|
||
<strong>✓ اصول طراحی رعایتشده:</strong>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li><strong>Consistency:</strong> الگوهای طراحی یکپارچه در سراسر برنامه</li>
|
||
<li><strong>Feedback:</strong> بازخورد فوری برای تمامی عملیات کاربر</li>
|
||
<li><strong>Efficiency:</strong> کاهش تعداد کلیکها با میانبرهای کیبورد</li>
|
||
<li><strong>Accessibility:</strong> پشتیبانی از ناوبری با کیبورد و کنتراست مناسب</li>
|
||
<li><strong>Aesthetics:</strong> طراحی بصری جذاب با استفاده از رنگبندی حرفهای</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۸ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۸</div>
|
||
<div class="section-title">
|
||
<h3>آمار و تحلیلهای هوشمند</h3>
|
||
<div class="subtitle">Smart Statistics & Analytics</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>سیستم xKanban با محاسبه بلادرنگ آمار پروژه، دید کاملی از وضعیت کارها به کاربر ارائه میدهد. این آمار در نوار وضعیت پایین صفحه نمایش داده میشوند:</p>
|
||
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>شاخص</th>
|
||
<th>نحوه محاسبه</th>
|
||
<th>کاربرد</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>📋 کل کارتها</strong></td>
|
||
<td>شمارش تمام کارتهای موجود در برد فعال</td>
|
||
<td>درک حجم کلی کار</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>✅ تکمیلشده</strong></td>
|
||
<td>کارتهای موجود در ستونهای پایانی (مانند Done)</td>
|
||
<td>سنجش پیشرفت</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>⏰ نزدیک به موعد</strong></td>
|
||
<td>کارتهایی با سررسید در ۳ روز آینده</td>
|
||
<td>هشدار زودهنگام</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>⚠️ عقبافتاده</strong></td>
|
||
<td>کارتهایی با سررسید گذشته و وضعیت ناتمام</td>
|
||
<td>شناسایی گلوگاهها</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>📊 درصد پیشرفت</strong></td>
|
||
<td>(تکمیلشده ÷ کل) × ۱۰۰</td>
|
||
<td>سنجش کلی پیشرفت پروژه</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="highlight-box">
|
||
<strong>🎯 مزیت تحلیلی:</strong> این آمار بلادرنگ، به مدیران پروژه امکان میدهد بدون نیاز به گزارشگیری جداگانه، وضعیت پروژه را در هر لحظه رصد کنند و تصمیمات مبتنی بر داده اتخاذ نمایند.
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">الگوریتم تشخیص وضعیت کارت:</h4>
|
||
<div class="code-box">
|
||
<span class="key">function</span> <span class="key">getCardStatus</span>(card) {<br>
|
||
<span class="key">if</span> (!card.dueDate) <span class="key">return</span> <span class="str">'no-date'</span>;<br>
|
||
<span class="key">const</span> now = <span class="key">new Date</span>();<br>
|
||
<span class="key">const</span> due = <span class="key">new Date</span>(card.dueDate);<br>
|
||
<span class="key">const</span> diffDays = (due - now) / (<span class="num">1000</span> * <span class="num">60</span> * <span class="num">60</span> * <span class="num">24</span>);<br>
|
||
<br>
|
||
<span class="key">if</span> (diffDays < <span class="num">0</span>) <span class="key">return</span> <span class="str">'overdue'</span>; <span class="comment">// ⚠️ عقبافتاده</span><br>
|
||
<span class="key">if</span> (diffDays <= <span class="num">3</span>) <span class="key">return</span> <span class="str">'near-due'</span>; <span class="comment">// ⏰ نزدیک به موعد</span><br>
|
||
<span class="key">return</span> <span class="str">'normal'</span>; <span class="comment">// ✅ عادی</span><br>
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۹ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۹</div>
|
||
<div class="section-title">
|
||
<h3>قابلیت توسعه و نگهداری</h3>
|
||
<div class="subtitle">Extensibility & Maintainability</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>معماری xKanban به گونهای طراحی شده که توسعه ویژگیهای جدید و نگهداری بلندمدت آن با حداقل هزینه ممکن باشد. در ادامه به اصول و الگوهای بهکاررفته در این زمینه پرداخته شده است:</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) اصول طراحی رعایتشده</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>اصل</th>
|
||
<th>پیادهسازی در xKanban</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>SRP</strong></td>
|
||
<td>هر ماژول یک مسئولیت مشخص دارد</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>OCP</strong></td>
|
||
<td>امکان افزودن ویژگی جدید بدون تغییر کد موجود</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>DRY</strong></td>
|
||
<td>استفاده از توابع کمکی مشترک برای عملیات پرتکرار</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Separation of Concerns</strong></td>
|
||
<td>جداسازی کامل UI، منطق و داده</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ب) نقاط توسعهپذیری</h4>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;"><strong>افزودن فیلدهای سفارشی به کارت:</strong> با توسعه مدل Card و UI مربوطه</li>
|
||
<li style="margin-bottom: 8px;"><strong>پشتیبانی از چند کاربر:</strong> با افزودن لایه Backend و مکانیزم Sync</li>
|
||
<li style="margin-bottom: 8px;"><strong>افزودن گزارشهای پیشرفته:</strong> با توسعه ماژول Analytics</li>
|
||
<li style="margin-bottom: 8px;"><strong>یکپارچگی با ابزارهای خارجی:</strong> از طریق Webhook و API</li>
|
||
<li style="margin-bottom: 8px;"><strong>پشتیبانی از قالبهای آماده:</strong> با افزودن Template Manager</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ج) استراتژی نسخهبندی</h4>
|
||
<p class="no-indent">سیستم از <strong>Semantic Versioning (SemVer)</strong> برای نسخهبندی استفاده میکند:</p>
|
||
<div class="code-box">
|
||
<span class="key">MAJOR.MINOR.PATCH</span> → <span class="num">1.0.0</span><br>
|
||
<span class="comment">// MAJOR: تغییرات ناسازگار در API/ساختار داده</span><br>
|
||
<span class="comment">// MINOR: افزودن ویژگیهای جدید با سازگاری عقبگرد</span><br>
|
||
<span class="comment">// PATCH: رفع باگ و بهبودهای جزئی</span>
|
||
</div>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠️ ملاحظات نگهداری:</strong>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li>هر تغییر در ساختار داده نیازمند مکانیزم Migration است</li>
|
||
<li>تستهای رگرسیون برای جلوگیری از شکست ویژگیهای موجود ضروری است</li>
|
||
<li>مستندات باید همزمان با تغییرات کد بهروزرسانی شوند</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۱۰ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۱۰</div>
|
||
<div class="section-title">
|
||
<h3>عملکرد و بهینهسازی</h3>
|
||
<div class="subtitle">Performance & Optimization</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>با وجود پیچیدگی بالای محصول، xKanban با رویکردهای بهینهسازی متعدد، عملکرد روان و پاسخگویی بالایی را ارائه میدهد:</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) بهینهسازی رندر</h4>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;"><strong>Virtual Rendering:</strong> فقط کارتهای قابل مشاهده رندر میشوند</li>
|
||
<li style="margin-bottom: 8px;"><strong>Batch Updates:</strong> تغییرات متعدد در یک چرخه رندر ادغام میشوند</li>
|
||
<li style="margin-bottom: 8px;"><strong>DOM Recycling:</strong> استفاده مجدد از المانهای DOM در تغییرات</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ب) بهینهسازی حافظه</h4>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;"><strong>Lazy Loading:</strong> بارگذاری دادههای غیرضروری در زمان نیاز</li>
|
||
<li style="margin-bottom: 8px;"><strong>Event Delegation:</strong> استفاده از یک Listener برای رویدادهای مشابه</li>
|
||
<li style="margin-bottom: 8px;"><strong>Memory Cleanup:</strong> آزادسازی منابع در زمان بستن Modal ها</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ج) شاخصهای عملکرد هدف</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>شاخص</th>
|
||
<th>هدف</th>
|
||
<th>وضعیت</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>زمان بارگذاری اولیه</td>
|
||
<td>< ۱ ثانیه</td>
|
||
<td style="color: var(--success); font-weight: 600;">✓ محقق شده</td>
|
||
</tr>
|
||
<tr>
|
||
<td>پاسخگویی UI</td>
|
||
<td>< ۱۰۰ میلیثانیه</td>
|
||
<td style="color: var(--success); font-weight: 600;">✓ محقق شده</td>
|
||
</tr>
|
||
<tr>
|
||
<td>حجم فایل</td>
|
||
<td>< ۲۰۰ کیلوبایت</td>
|
||
<td style="color: var(--success); font-weight: 600;">✓ محقق شده</td>
|
||
</tr>
|
||
<tr>
|
||
<td>پشتیبانی از ۱۰۰۰+ کارت</td>
|
||
<td>بدون افت عملکرد</td>
|
||
<td style="color: var(--success); font-weight: 600;">✓ محقق شده</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="success-box">
|
||
<strong>💎 دستاورد فنی:</strong> با پیادهسازی دقیق اصول بهینهسازی، xKanban توانسته است با وجود ماهیت تکفایلی و عدم استفاده از کتابخانههای بهینهساز، عملکردی همردیف با اپلیکیشنهای مدرن مبتنی بر فریمورک ارائه دهد.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۱۱ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۱۱</div>
|
||
<div class="section-title">
|
||
<h3>امنیت و ملاحظات فنی</h3>
|
||
<div class="subtitle">Security & Technical Considerations</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>با وجود ماهیت Client-Side بودن xKanban، ملاحظات امنیتی در طراحی آن لحاظ شده است:</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) امنیت دادهها</h4>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;"><strong>ذخیرهسازی محلی:</strong> دادهها در مرورگر کاربر باقی میمانند و به سرور خارجی ارسال نمیشوند</li>
|
||
<li style="margin-bottom: 8px;"><strong>Webhook امن:</strong> امکان پیکربندی URL سفارشی با قابلیت تست قبل از فعالسازی</li>
|
||
<li style="margin-bottom: 8px;"><strong>Validation ورودیها:</strong> اعتبارسنجی کامل دادههای ورودی برای جلوگیری از注入</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ب) یکپارچگی دادهها</h4>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;"><strong>Schema Validation:</strong> اعتبارسنجی ساختار داده در زمان بارگذاری</li>
|
||
<li style="margin-bottom: 8px;"><strong>Referential Integrity:</strong> بررسی وجود مراجع قبل از حذف موجودیتها</li>
|
||
<li style="margin-bottom: 8px;"><strong>Atomic Operations:</strong> عملیات به صورت اتمیک اجرا میشوند</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">ج) سازگاری با مرورگرها</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>مرورگر</th>
|
||
<th>نسخه حداقلی</th>
|
||
<th>وضعیت</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Chrome</td><td>90+</td><td style="color: var(--success);">✓ پشتیبانی کامل</td></tr>
|
||
<tr><td>Firefox</td><td>88+</td><td style="color: var(--success);">✓ پشتیبانی کامل</td></tr>
|
||
<tr><td>Edge</td><td>90+</td><td style="color: var(--success);">✓ پشتیبانی کامل</td></tr>
|
||
<tr><td>Safari</td><td>14+</td><td style="color: var(--success);">✓ پشتیبانی کامل</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- بخش ۱۲ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۱۲</div>
|
||
<div class="section-title">
|
||
<h3>جمعبندی فنی و نقشه راه آینده</h3>
|
||
<div class="subtitle">Technical Summary & Future Roadmap</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>پروژه xKanban نمونهای موفق از طراحی یک اپلیکیشن مدرن تحت وب با رویکرد تکفایلی و بدون وابستگی است. این محصول با رعایت اصول معماری نرمافزار، توانسته است تعادل مناسبی میان سادگی توزیع و غنای عملکرد برقرار نماید.</p>
|
||
|
||
<div class="conclusion-box">
|
||
<h3>🎯 دستاوردهای فنی کلیدی</h3>
|
||
<p>طراحی و پیادهسازی xKanban نشان میدهد که با رعایت اصول مهندسی نرمافزار و انتخاب درست معماری، میتوان محصولی حرفهای و مقیاسپذیر را بدون نیاز به زیرساختهای پیچیده ارائه داد.</p>
|
||
<div class="highlight">
|
||
<strong>💎 ارزشهای فنی ارائهشده:</strong><br>
|
||
معماری ماژولار + پایداری داده چندلایه + تجربه کاربری حرفهای + قابلیت توسعه بالا + عملکرد بهینه
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">نقشه راه توسعه آینده:</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>فاز</th>
|
||
<th>ویژگیهای پیشنهادی</th>
|
||
<th>اولویت</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>نسخه ۱.۱</strong></td>
|
||
<td>افزودن فیلدهای سفارشی، بهبود فیلترها، افزودن نمودارها</td>
|
||
<td style="color: var(--warning);">بالا</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>نسخه ۱.۲</strong></td>
|
||
<td>پشتیبانی از چند کاربر با مکانیزم Sync</td>
|
||
<td style="color: var(--warning);">بالا</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>نسخه ۲.۰</strong></td>
|
||
<td>ارائه نسخه Backend برای ذخیرهسازی ابری</td>
|
||
<td style="color: var(--primary-light);">متوسط</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>نسخه ۲.۱</strong></td>
|
||
<td>اپلیکیشن موبایل Native با React Native</td>
|
||
<td style="color: var(--text-muted);">آینده</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-box">
|
||
<strong>📞 گام بعدی:</strong> برای شروع همکاری در توسعه نسخههای آتی یا سفارشیسازی xKanban بر اساس نیازهای خاص سازمانی، آماده برگزاری جلسه فنی جهت تشریح جزئیات بیشتر و بررسی معماری هستیم.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-info">
|
||
این مستند فنی محرمانه بوده و صرفاً جهت استفاده داخلی تیم فنی تهیه شده است. هرگونه کپیبرداری یا افشا بدون اجازه کتبی ممنوع است.
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="document-footer">
|
||
<div class="footer-brand">طراحی، تحلیل و توسعه: هادی خزاعی اصل</div>
|
||
<div style="font-size: 11px; opacity: 0.8; margin-bottom: 5px;">معمار و توسعهدهنده ارشد نرمافزار | متخصص .NET و Angular</div>
|
||
<div class="footer-divider"></div>
|
||
<div>تاریخ تهیه: یکشنبه ۲۲ شهریور ۱۴۰۵ (۱۳ سپتامبر ۲۰۲۶) | نسخه: ۱.۰.۰ | طبقهبندی: داخلی - فنی</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html> |