vuejs os template

قالب موقع OS لـ Vue.js

موضوع مخطط	موضوع Windows	موضوع ماكوس

جدول المحتويات

1. نظرة عامة على المشروع
2. سمات
3. التقنيات
4. المتطلبات المسبقة
5. تعليمات الإعداد
6. سجل Windows مع فتحات (تسجيل سريع)
7. سجل Windows مخصص (التسجيل المتقدم)
8. WINDOW API
9. التعليمات

نظرة عامة على المشروع

يهدف هذا المشروع إلى إنشاء قالب OS تفاعلي لـ VUE. تضمنت القالب كلها منطق ضروري لمكونات النوافذ الفردية ، و Navbars وشبكات التطبيق. يمكن للمستخدمين تسجيل مكونات جديدة (مخصصة أو غير ذلك) بسهولة.

سمات

• النوافذ القابلة للتفاعل والقابلة للرسوم
• شريط التنقل المدمج (+ منطق)
• منطق النافذة (حالات ، ملء الشاشة ، التقليل إلى الحد الأدنى)
• السمات (مخطط ، ويندوز ، ماكوس)

التقنيات

• Vue 2
• Vuex
• التفاعل
• لحظة

المتطلبات المسبقة

• Vue 2 (مبتدئ)
• CSS (مبتدئ)
• الصبر مع CSS

تعليمات الإعداد

1. قم بتنزيل أحدث إصدار من SideBae لهذه الصفحة

2. تأكد من تثبيت Vue.js

الوثائق الرسمية من VUE

3. أعد تسمية المجلد إلى vuejs-os-template

4. قرص مضغوط في مجلد المشروع وتثبيت الحزم + التبعيات

$ cd vuejs-os-template && npm install

4. خدمة المشروع

$ npm run serve

سجل Windows (طريقة فتحات)

سيتيح لك تسجيل نافذة باستخدام طريقة فتحات الوصول السريع إلى قالب النافذة مسبقًا. هذه الطريقة هي الأنسب للمستخدمين الذين لا يحتاجون إلى أي تغيير في تصميم أو تخطيط النافذة نفسها.

1. اتجه إلى /src/store/index.js

2. قم بتسجيل نافذة جديدة عن طريق لصق المقتطف التالي داخل مجموعة Windows State

 {
     windowId : "UniqueWindowID" , 
     windowState : "close" ,
     displayName : "Unique Window" ,
     windowComponent : 'window' ,
     windowContent : 'Placeholder' ,
     windowContentPadding : {
         top : null ,
         right : null ,
         bottom : null ,
         left : null
     } ,
     position : "absolute" ,
     positionX : "10vw" ,
     positionY : "10vh" ,
     iconImage : "placeholder.png" ,
     altText : "Placeholder Icon" ,
     fullscreen : false
 } ,

3. قم بتغيير "WindowId" إلى معرف نافذة فريد و "DisplayName" إلى اسم مفضل للنافذة.

windowId: "MyNewWindow" 

displayName: "New Window"

4. يتم تسجيل المحتوى المعروض داخل النافذة في مكون "العنصر النائب". ما عليك سوى إنشاء مكون محتوى جديد ضمن /src/components/views Folder واستبدال "WindowContent" باسم مكون المحتوى الجديد الذي تم إنشاؤه.

windowContent: "MyNewWindowContent"

/src/components/views/mynewwindowcontent.vue

 < template >
  < p > this is my new window's content! </ p >
</ template >

5. توجه إلى /src/App.vue لاستيراد وتسجيل المكونات الجديدة ضمن قسم <script>.

  import MyNewWindowContent from './components/views/MyNewWindowContent' 

  components: {
    ... ,
    MyNewWindowContent
  }

6. احفظ كل الملفات التي تم تغييرها أو تم إنشاؤها وتوجه إلى LocalHost لعرض التغييرات.

سجل Windows (نافذة مخصصة)

يتم تسجيل نافذة مخصصة أيضًا بسيطة نسبيًا بسبب أن كل نافذة لها حالة كائن مخصصة تتبع النافذة لتقديمها. قد ترغب في تسجيل نافذة مخصصة إذا كان تخطيط أو تصميم النافذة نفسها بحاجة إلى تعديل (أي إزالة أو إضافة أزرار في الشريط العلوي للنوافذ).

1. اتجه إلى /src/store/index.js

2. قم بتسجيل نافذة جديدة عن طريق لصق المقتطف التالي داخل مجموعة Windows State

 {
     windowId : "UniqueWindowID" , 
     windowState : "close" ,
     displayName : "Unique Window" ,
     windowComponent : 'window' ,
     windowContent : 'Placeholder' ,
     windowContentPadding : {
         top : null ,
         right : null ,
         bottom : null ,
         left : null
     } ,
     position : "absolute" ,
     positionX : "10vw" ,
     positionY : "10vh" ,
     iconImage : "placeholder.png" ,
     altText : "Placeholder Icon" ,
     fullscreen : false
 } ,

3. قم بتغيير "WindowId" إلى معرف نافذة فريد و "DisplayName" إلى اسم مفضل للنافذة.

windowId: "MyCustomWindow" 

displayName: "Custom Window"

4. يتم تخزين Window UI نفسها تحت "WindowComponent" ويمكننا الآن تسجيل نافذة مخصصة خاصة بنا عن طريق تغيير المكونات المسجلة.

 windowComponent: 'SpecialWindow'

5. قم بإنشاء مكون نافذة جديد يسمى SpecialWindow.vue Under /src/components/template ونسخ محتويات Window.vue في هذا الملف الجديد .

6. لأغراض العرض التوضيحي ، سنقوم ببساطة بتغيير خلفية "الجزء العلوي" للنافذة وإضافة بعض المحتوى الذي يحل محل قسم الفتحة.

الصق هذا المقتطف CSS تحت قسم النمط.

. top-bar {
     background-color : green !important ;
}

استبدل علامات الفتحة مع هذا المقتطف من HTML.

 < p > This is my new custom window </ p >

6. توجه إلى /src/App.vue لاستيراد وتسجيل المكونات الجديدة ضمن قسم <script>.

  import SpecialWindow from './components/template/SpecialWindow' 

  components: {
    ... ,
    SpecialWindow
  }

7. احفظ كل الملفات التي تم تغييرها أو تم إنشاؤها وتوجه إلى LocalHost لعرض التغييرات.

تبديل الموضوعات

يوجد في القالب ثلاثة موضوعات مختلفة ، وهو موضوع المخطط الافتراضي وموضوع MacOS وموضوع Windows. يتم التبديل بين الموضوعات سهلة نسبيًا ، لكن بعض الموضوعات قد تتطلب بعض التغيير والتبديل البسيط.

موضوع مخطط

1. توجه إلى /src/App.vue ، ضمن قسم البرنامج النصي ، استيراد متغير Navbar Blueprint.

 import Navbar from './components/blueprint/Navbar'

2. ضمن قسم النمط من app.vue ، استيراد متغير المخطط CSS.

 @import './assets/css/blueprint/app.css' ;
@import './assets/css/blueprint/window.css' ;
@import './assets/css/blueprint/appgrid.css' ;

3. احفظ كل التغييرات وتوجه إلى مضيف محلي لعرض التغييرات.

موضوع Windows

1. توجه إلى /src/App.vue ، ضمن قسم البرنامج النصي ، استيراد متغير Windows Navbar.

 import Navbar from './components/windows/Navbar'

2. ضمن قسم النمط من app.vue ، استيراد متغير Windows CSS.

 @import './assets/css/windows/app.css' ;
@import './assets/css/windows/window.css' ;
@import './assets/css/windows/appgrid.css' ;

موضوع ماكوس

1. توجه إلى /src/App.vue ، ضمن قسم البرنامج النصي ، استيراد متغير MacOS Navbar و MacOS Top Navbar .

 import Navbar from './components/macos/Navbar'
import TopNavbar from './components/macos/TopNavbar.vue'

2. تسجيل الجزء العلوي من Navbar

components: {
     ... ,
     TopNavbar
} `` `
     
3. Under the style section of App.vue, import the MacOS CSS variant. 
` `` css
@ import './assets/css/macos/app.css' ;
@ import './assets/css/macos/window.css' ;
@ import './assets/css/macos/appgrid.css' ; 

WINDOW API

اسم	وصف	يكتب
Windowid	معرف فريد لتحديد نافذة	خيط
WindowState	يتتبع النافذة مفتوحة أو إغلاق أو تقليل الحالة	خيط
DisplayName	تسمية للنافذة في شبكة التطبيق وعنوان رأس النافذة	خيط
WindowComponent	يمكن تغيير واجهة المستخدم الخاصة بالنافذة لاستخدام نافذة مخصصة ، انظر قسم تسجيل النوافذ المخصصة	خيط
WindowContent	مكون محتوى النافذة ، سيتم إدراجه تحت فتحات إذا كان الاستفادة من النافذة القياسية ، انظر تسجيل Windows مع قسم فتحات	خيط
WindowContentPadding	يحدد حشوة المحتوى داخل النافذة	سلسلة أو خالية
موضع	يضبط موضع النافذة CSS	خيط
الموضع	يضبط الإزاحة الأولي X للنافذة	خيط
موضعي	يضع النزوح المميت للنافذة	خيط
أيقونة	اسم صورة أيقونة للنافذة ، يجب وضع الرموز في /assets/icons/	خيط
alttext	النص البديل للرمز	خيط
ملء الشاشة	يتتبع ما إذا كانت النافذة في ملء الشاشة أم لا	منطقية

التعليمات

هل يمكنني استخدام هذا لـ ...

• نعم.

أين يتم تخزين CSS؟

• /assets/css/ ، اذهب معها!

هل يمكنني المساهمة أو تقديم مشكلة؟

• بالتأكيد! لا تتردد في إنشاء مشكلة أو طلب سحب.

هل سمة Linux قادمة؟

• سيصل موضوع Linux في النهاية عندما أكون حرًا في إنشائها (وإذا كان المشروع يكسب ما يكفي من الجر).

لماذا هذا ليس في رد الفعل؟

• أنا على دراية بـ Vue في الغالب وأستمتع باستخدام Vue: D

هل يمكنني الاتصال بك؟

• بالطبع! أرسل لي بريدًا إلكترونيًا وتحقق من موقع الويب الخاص بي هنا.