admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
162 lines
11 KiB
Markdown
162 lines
11 KiB
Markdown
# نظام تصميم مستوحى من GitHub
|
|
|
|
> Category: أدوات المطورين
|
|
> منصة تُقدّم الكود في المقام الأول. كثافة وظيفية، ودقة الأزرق على الأبيض، وأسس Primer.
|
|
|
|
## 1. الطابع البصري والأجواء العامة
|
|
|
|
سطح GitHub مُهندَس لا مُزيَّن. كل بكسل يُعلن موقفاً صريحاً: هذه أداة لمن يهتم بالفروقات والبنى وطلبات السحب. خلفية الصفحة هي `#ffffff` نظيفة (الوضع الفاتح) أو `#0d1117` (الوضع الداكن)، وتُرتَّب المحتويات على ألواح مستطيلة كثيفة تفصل بينها حدود رفيعة كالشعرة لا فراغات سلبية. كثافة المعلومات هي العلامة التجارية — صفوف القوائم وأسطر الكود ورؤوس المستودعات وبطاقات الإشعارات كلها متقاربة حتى يتمكن المستخدم المتمرس من مسح مئة عنصر دون تمرير.
|
|
|
|
النبرة البصرية المميزة هي **الأزرق Primer** (`#0969da`) للروابط والإجراءات الرئيسية، و**الأخضر GitHub** (`#1a7f37`) للحالات المدمجة والنجاح وزر الدمج ذاته. كلاهما يبدو خافتاً نسبياً مقارنةً بأزرق وأخضر منتجات المستهلكين — مشبعٌ بما يكفي للتمييز على خلفية النص الرمادي الكثيف، ومكبوحٌ بما يكفي ليختفي في الخلفية حين تظهر عدة نسخ في إطار عرض واحد.
|
|
|
|
تستخدم الطباعة مكدس **system-ui** عبر المنتج بأكمله لعرض النصوص بوضوح على كل نظام تشغيل، إلى جانب **SFMono / Menlo / Consolas** للكود. لا يوجد خط عرض تحريري؛ صوت GitHub هو صوت النظام الذي أنت عليه بالفعل.
|
|
|
|
**الخصائص الجوهرية:**
|
|
- لوحة بيضاء حقيقية (`#ffffff`) أو أسود-كحلي غامق (`#0d1117`) — بلا دفء ولا تدرج
|
|
- حدود رمادية رفيعة (`#d0d7de`) تُحدد كل لوح وحاوية
|
|
- الأزرق Primer (`#0969da`) للروابط والإجراءات الرئيسية؛ الأخضر GitHub (`#1a7f37`) للنجاح والدمج
|
|
- system-ui للنصوص؛ SFMono للكود — لا خط ويب مخصص
|
|
- صفوف قائمة كثيفة بحشو أدنى؛ المسافات البيضاء نادرة
|
|
- أيقونات Octicon بحجم 16px / 24px — أحادية الضربة، هندسية، متسقة
|
|
- شارات حالة على شكل حبة دواء ذات دلالات لونية قوية
|
|
|
|
## 2. لوحة الألوان والأدوار
|
|
|
|
### الألوان الأساسية
|
|
- **Canvas Default** (`#ffffff`): خلفية الصفحة الرئيسية، الوضع الفاتح.
|
|
- **Canvas Subtle** (`#f6f8fa`): السطح الثانوي، الشريط الجانبي، خلفية الإدخال، شريط الرأس.
|
|
- **Canvas Inset** (`#eaeef2`): خلفية كتلة الكود، السطح الغائر.
|
|
- **Fg Default** (`#1f2328`): النص الرئيسي، العناوين، الحبر.
|
|
- **Fg Muted** (`#656d76`): النص الثانوي، التعليقات التوضيحية، مسارات الملفات.
|
|
|
|
### لون العلامة التجارية المميز
|
|
- **Primer Blue** (`#0969da`): الروابط، الدعوات للإجراء الرئيسية، حلقة التركيز — اللون التفاعلي الشامل.
|
|
- **Primer Blue Hover** (`#0550ae`): حالة التمرير/الضغط للأزرق الرئيسي.
|
|
- **Accent Subtle** (`#ddf4ff`): سطح أزرق ناعم للتنبيهات وبانرات المعلومات.
|
|
|
|
### الألوان الدلالية
|
|
- **Success / Merge Green** (`#1a7f37`): طلبات السحب المدمجة، شارات النجاح، زر الدمج.
|
|
- **Success Subtle** (`#dafbe1`): تدرج سطح النجاح.
|
|
- **Open Green** (`#1a7f37`): حالة "مفتوح" للمشكلة/طلب السحب.
|
|
- **Closed / Danger Red** (`#cf222e`): طلبات السحب المغلقة، الإجراء التدميري، خطأ التحقق.
|
|
- **Danger Subtle** (`#ffebe9`): سطح بانر الخطأ.
|
|
- **Attention / Warning Yellow** (`#9a6700`): نص التحذير على سطح كهرماني.
|
|
- **Attention Subtle** (`#fff8c5`): سطح بانر التحذير.
|
|
- **Done Purple** (`#8250df`): مدمج ومؤرشف، حالة "منجز"، شارة مميزة.
|
|
- **Sponsor Pink** (`#bf3989`): قلب الرعاة، علامة GitHub Sponsors التجارية.
|
|
|
|
### الحدود والفواصل
|
|
- **Border Default** (`#d0d7de`): الحد الرفيع القياسي، محيط اللوح.
|
|
- **Border Muted** (`#d8dee4`): الفواصل الداخلية داخل اللوح.
|
|
- **Border Subtle** (`#eaeef2`): فواصل صفوف الجدول الخافتة.
|
|
|
|
### الوضع الداكن
|
|
- **Dark Canvas** (`#0d1117`): خلفية الصفحة الداكنة.
|
|
- **Dark Surface** (`#161b22`): الشريط الجانبي، الرأس، السطح الثانوي.
|
|
- **Dark Border** (`#30363d`): الحد القياسي في الوضع الداكن.
|
|
- **Dark Fg** (`#e6edf3`): النص الرئيسي على الداكن.
|
|
|
|
## 3. قواعد الطباعة
|
|
|
|
### عائلة الخطوط
|
|
- **النص الأساسي / الواجهة**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
|
- **الكود / أحادي العرض**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
|
- **الرموز التعبيرية**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
|
|
|
### التسلسل الهرمي
|
|
|
|
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|
|
|------|------|------|--------|-------------|----------------|-------|
|
|
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | رأس المستودع، عنوان التسويق الرئيسي |
|
|
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | عنوان الصفحة |
|
|
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | عنوان القسم |
|
|
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | عنوان القسم الفرعي، رأس اللوح |
|
|
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | حجم النص الافتراضي — ليس 16px |
|
|
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | التعليقات التوضيحية، بيانات الملف |
|
|
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | كتل الكود، الفروق |
|
|
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | امتدادات `code` المضمنة |
|
|
|
|
### المبادئ
|
|
- **النص الأساسي 14px لا 16px**: كثافة النثر في GitHub هي هويته. يُقرأ المنتج بـ14px لاحتواء مزيد من الصفوف في إطار العرض.
|
|
- **الوزن ثنائي**: 400 للكل افتراضياً؛ 600 للعناوين والتأكيد. لا 500، لا 700.
|
|
- **خطوط النظام دائماً**: لا تُحمّل خط ويب للواجهة — يجب أن يُعرض النص فورياً على الاتصالات البطيئة.
|
|
|
|
## 4. تنسيقات المكونات
|
|
|
|
### الأزرار
|
|
|
|
**الأساسي (أخضر)**
|
|
- الخلفية: `#1f883d`
|
|
- النص: `#ffffff`
|
|
- الحد: 1px solid `rgba(31, 35, 40, 0.15)`
|
|
- الحشو: 5px 16px
|
|
- نصف القطر: 6px
|
|
- الظل: `0 1px 0 rgba(31,35,40,0.1)`
|
|
- عند التمرير: خلفية `#1a7f37`
|
|
- الاستخدام: "إنشاء مستودع"، "دمج طلب السحب"
|
|
|
|
**الافتراضي**
|
|
- الخلفية: `#f6f8fa`
|
|
- النص: `#1f2328`
|
|
- الحد: 1px solid `#d0d7de`
|
|
- الحشو: 5px 16px
|
|
- نصف القطر: 6px
|
|
- عند التمرير: خلفية `#f3f4f6`، حد `#d0d7de`
|
|
|
|
**محدد الخطوط (نمط رابط أزرق)**
|
|
- الخلفية: `#ffffff`
|
|
- النص: `#0969da`
|
|
- الحد: 1px solid `#d0d7de`
|
|
- عند التمرير: خلفية `#0969da`، نص `#ffffff`
|
|
|
|
**الخطر**
|
|
- الخلفية: `#ffffff`
|
|
- النص: `#cf222e`
|
|
- الحد: 1px solid `#d0d7de`
|
|
- عند التمرير: خلفية `#a40e26`، نص `#ffffff`، حد `#a40e26`
|
|
|
|
### البطاقات / الصناديق
|
|
- الخلفية: `#ffffff`
|
|
- الحد: 1px solid `#d0d7de`
|
|
- نصف القطر: 6px
|
|
- الحشو: 16px (الرأس) + 16px (الجسم)
|
|
- للرأس شريط `#f6f8fa` مع حد سفلي.
|
|
|
|
### حقول الإدخال
|
|
- الخلفية: `#ffffff`
|
|
- الحد: 1px solid `#d0d7de`
|
|
- نصف القطر: 6px
|
|
- الحشو: 5px 12px
|
|
- عند التركيز: حد `#0969da`، حلقة `0 0 0 3px rgba(9,105,218,0.3)`
|
|
|
|
### شارات الحالة (مشكلة / طلب سحب)
|
|
- **مفتوح**: خلفية `#1a7f37`، نص أبيض، حشو 4px 10px، نصف قطر 9999px.
|
|
- **مغلق**: خلفية `#cf222e`، نص أبيض.
|
|
- **مدمج**: خلفية `#8250df`، نص أبيض.
|
|
- **مسودة**: خلفية `#6e7781`، نص أبيض.
|
|
|
|
### التسميات (وسوم على المشكلات/طلبات السحب)
|
|
- الحشو: 0 7px
|
|
- نصف القطر: 9999px
|
|
- الخط: 12px / 500
|
|
- الخلفية والنص برمجيان (لون التسمية ← نص محسوب للتباين).
|
|
|
|
## 5. التباعد والتخطيط
|
|
|
|
- **الوحدة الأساسية**: 4px. مقياس التباعد: 4، 8، 12، 16، 24، 32، 40، 48.
|
|
- **أقصى عرض للصفحة**: 1280px (`Container-xl`).
|
|
- **الشريط الجانبي**: 296px على سطح المكتب، ينهار أسفل 1012px.
|
|
- **حشو الصف**: 16px أفقي، 12px رأسي (القوائم كثيفة بالتصميم).
|
|
|
|
## 6. الحركة
|
|
|
|
- **المدة**: 80ms للتمرير؛ 200ms لفتح القائمة/المنبثق.
|
|
- **التخفيف**: `ease-out` للفتح، `ease-in` للإغلاق.
|
|
- **المتجنب**: تحريك تحميل الصفحة، التأثير المتوازي، التفاعلات الدقيقة الدائمة. الأشياء تظهر؛ لا تؤدي عروضاً.
|
|
|
|
## 7. قيود الاستخدام
|
|
|
|
- احتفظ بالقوائم الكثيفة والصناديق المحددة بالحدود وطباعة النظام معاً؛ الأزرار الخضراء المعزولة وحدها لا تكفي لإنشاء سطح منتج شبيه بـGitHub.
|
|
- استخدم الأخضر لإجراءات المستودع البنّاءة، والأزرق للروابط والتركيز، والأحمر/البنفسجي/الرمادي فقط لحالات المشكلات وطلبات السحب وسير العمل.
|
|
- فضّل الواجهة الهادئة والحدود الصريحة والتباعد المضغوط على الظلال الزخرفية أو البطاقات الكبيرة بأسلوب التسويق.
|