اجعله بعلامتك التجارية

أين تغيّر اسم لوحة التحكم وبياناتها الوصفية وشعارها وأيقوناتها وألوانها وخطوطها وصورها.

لحزمة واجهة + خلفية

كل مسار أدناه داخل مجلد لوحة التحكم: front-end في الحزمة الكاملة، والمجلد نفسه في حزمة لوحة الإدارة. شغّل yarn dev أثناء التعديل: فتُعاد الصفحة كلما حفظت.

لتغيير	عدّل
الاسم والبيانات الوصفية للصفحة واسم التذييل وإصداره	`src/config/brand.config.ts`
الشعار	`public/assets/images/logo-for-lightmode.png` و`logo-for-darkmode.png`
الأيقونات	`src/app/favicon.ico` و`icon0.svg` و`icon1.png` و`apple-icon.png`، و`web-app-manifest-*.png` اللذان في `public/`
الألوان	`src/styles/theme-variables.css`
الخط العربي	`src/app/layout.tsx` و`src/styles/base.css`
الكلمات على الشاشة وعناوين علامات التبويب	`messages/<namespace>/en.json` و`ar.json`
عنوان الموقع	`NEXT_PUBLIC_BASE_URL` في `.env`، أو وسيط بناء في Docker

الاسم والبيانات الوصفية

كائن واحد، BRAND_CONFIG في src/config/brand.config.ts، يحمل العلامة بالإنجليزية والعربية حيث يقرؤها الناس. الاسم افتراضيًا هو Aniq Dashboard بالإنجليزية و«لوحة تحكم أنيق» بالعربية.

الحقل	الاستخدام
`name`	عناوين علامات تبويب المتصفح (`Users \| Aniq Dashboard`) وتذييل لوحة التحكم
`company`	تذييل لوحة التحكم، بعد كلمة "by"، وبيانات Organization المنظمة في رأس الصفحة
`version`	الإصدار في التذييل
`logo.icon`, `logo.alt`	الأيقونة في البيانات المنظمة وشعار الصورة في الشريط الجانبي
`meta.title`, `meta.description`, `meta.keywords`, `meta.author`	البيانات الوصفية للصفحة
`meta.ogImage`, `meta.twitterImage`	صورة المعاينة عند مشاركة رابط. ضع الملف في `public/` وأعطِ مساره.
`theme.light`, `theme.dark`	لون شريط عنوان المتصفح في كل وضع
`manifest`	اسم التطبيق المثبّت واسمه المختصر وألوانه وأيقوناته
`links`, `contact`	بيانات Organization المنظمة. احذف ما لا تملكه.

الشعار

الشعار في الشريط الجانبي والرأس صورة خلفية تتبع المظهر: public/assets/images/logo-for-lightmode.png في الوضع الفاتح وlogo-for-darkmode.png في الوضع الداكن. استبدل الملفين وأبقِ الاسمين، أو وجّه --logo-bg-image إلى ملفين آخرين في src/styles/theme-variables.css، مرة في الكتلة الفاتحة ومرة في الداكنة.

الأيقونات

الملف	ما هو
`src/app/favicon.ico`	أيقونة علامة تبويب المتصفح
`src/app/icon0.svg`, `src/app/icon1.png`	الأيقونات التي يربطها Next.js في رأس الصفحة
`src/app/apple-icon.png`	أيقونة الشاشة الرئيسية على iPhone أو iPad
`public/web-app-manifest-192x192.png`, `public/web-app-manifest-512x512.png`	أيقونات التطبيق المثبّت، المدرجة في `manifest.icons`

الألوان

كل لون متغير CSS في src/styles/theme-variables.css، يُعرَّف مرة للوضع الفاتح (:root) ومرة للوضع الداكن. لون العلامة هو --primaryColor، مع --primaryColorHover؛ وللأسطح والحدود والنصوص متغيراتها في الملف نفسه. غيّر قيمة هناك فتتبعها كل الشاشات.

src/styles/theme-variables.css

--primaryColor: #2c2c2c;
--primaryColorHover: #1a1a1a;

تستخدم المكونات المتغيرات بصيغة bg-[var(--surface)] وtext-[var(--text-muted)] وغيرها، فيحافظ أي مكوّن جديد على المظهرين إذا فعل الشيء نفسه.

الخطوط

يستخدم النص الإنجليزي حزمة خطوط النظام. وتستخدم الصفحات العربية الخط IBM Plex Sans Arabic، المحمّل من Google Fonts عبر next/font في src/app/layout.tsx والمطبّق في src/styles/base.css عندما تكون الصفحة بالعربية. ينزَّل الخط عند بناء التطبيق ثم يقدّمه التطبيق نفسه. لاستخدام خط آخر، استورده من next/font/google في layout.tsx بدلًا منه وأبقِ اسم المتغير variable، أي --font-sans-arabic.

الصور

الملف	أين يظهر
`public/assets/images/login/login.png`	الرسم التوضيحي في صفحة تسجيل الدخول
`public/assets/images/avatar/sphere-light.png`, `sphere-dark.png`	الصورة الرمزية للمساعد الذكي بجانب إجاباته
`public/assets/images/avatar/person/*.png`, `public/assets/images/project/project.png`	صور المشرفين والمستخدمين والمشاريع النموذجية

النصوص وعناوين الصفحات

كل كلمة على الشاشة تأتي من ملفات الرسائل في messages/<namespace>/en.json وar.json. وتأتي عناوين علامات تبويب المتصفح من messages/metadata/<locale>.json وتظهر عنوان الصفحة متبوعًا بالاسم. عدّل اللغتين معًا عند تغيير أي نص.

اللغات

قائمة التحقق

الأسماء والبيانات الوصفية والروابط في src/config/brand.config.ts.
ضبط NEXT_PUBLIC_BASE_URL على عنوانك.
ملفا الشعار.
الأيقونات في src/app/ وpublic/.
--primaryColor وبقية الألوان في src/styles/theme-variables.css.
النصوص في messages/، باللغتين.