portfolio-apple

création d'un portfolio sous forme d'un system macos développé avec vue 3

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

Dépendances

Packages	Lien	Version
vue	https://vuejs.org/guide/introduction.html	^3.3.8
pinia	https://pinia.vuejs.org/core-concepts/	^2.1.7
@vueuse/core	https://vueuse.org/guide/	^10.6.1
mobile-detect	https://www.npmjs.com/package/mobile-detect	^1.4.5
uuid	https://www.npmjs.com/package/uuid	^9.0.1

Dépendances de développement

Packages	Lien	Version
vite	https://vitejs.dev/guide/	^5.0.0
sass	https://sass-lang.com/documentation/	^1.69.5
@vitejs/plugin-vue	https://www.npmjs.com/package/@vitejs/plugin-vue	^4.5.0
vite-plugin-pwa	https://www.npmjs.com/package/vite-plugin-pwa	^0.17.0

Objectifs

[ ? ] Mac OS :

[✓ ] Processus d'installation
- [✓] Parcour visuel
- [✓] Installation de l'arboraissence grâce à l'api javascript IndexedDB
[✓] Ecran de connection
[✓] Permettre à l'utilisateur d'installer le système après l'avoir passé
[✓] Dock macOS
[✓] Bureau macOS
[✓] Fonctionnalité "Secouer pour trouver le curseur"
[✓] Barre de menus du bureau
[✓] Design d'une application
[✓] Système de superposition des applications
[✓] Fonctionalité de fermeture / minification / maximisation d'une application
[✓] Fonctionnalité de déplacement d'une application
[✓] Fonctionnalité de redimentionnement d'une application
[✓] Animation d'ouverture / fermeture / minification d'une application :
- [✓] Animation d'ouverture d'une application
- [✓] Animation de fermeture d'une application
- [✓] Animation de minimification d'une application
- [✓] Animation de maximisation d'une application
[ ? ] Fonctionnalité Spotlight
- Ouvrir : ctrl+f / ctrl+F / loupe
- Fermer : clique à côté / touche Echape
[✓] Hub de Paramétrage
[✓] Dark / Light mode
[✗] Applications à développer :
- [✗] Paramètres
- [ ? ] Finder
  - [ ? ] Système d'arboraissence virtuelle pour pouvoir stocker des fichier sous forme base64 dans la base de données localDB du navigateur de sorte que les données des utilisateurs ne sortent pas de l'application
    - [✓] Création de répertoires imbriqués
    - [✓] Création de fichiers texte brute
    - [✗] Modification des fichiers texte brute
    - [✗] Importation d'images depuis l'ordinateur hôte
- [ ? ] Photos
- [✗] Mails
- [✗] Messages
- [✗] Terminal
  - [✗] Véritable interprétation de commandes bash
- [✗] Corbeille
- [✗] TextEdit
  - Edition de text brut
[ ? ] Customiser le menu contextuel
- [✓] Bureau
- [ ? ] Applications

[✗] IOS

[✗] Barre d'applications
[✗] Bureau IOS
[✗] Ouverture / fermeture / mise en arrière plan d'une application
[✗] Listing des applications en arrière plan
[✗] Sortie d'arrière plan d'une application

Legend

[✗] not works
[✓] works
[ ? ] in progress

Documentation

Terminal

Système de commandes

Dans : /src/commands/[command].ts

exporter :

Une constante name de type string pour définir le nom de la commande si il contient des tirets (Optionel).
Une constante command de type RegExp (Requis)
Une constante adminCommand de type RegExp (Optionel)
Une constante description de type string utilisé pour générer le help (Optionel)
Une constante usage de type string utilisé pour générer le help (Optionel)
Une constante flags de type TerminalCommandFlag[] (Optionel => dans le cas où votre commande gère des flags)

type TerminalCommandFlag = {
    long: string,
    short?: string,
    type: BooleanConstructor|StringConstructor|NumberConstructor|ArrayConstructor,
    value?: any,
    detectedFormat?: string
}

Une constante help de type () => string[] qui retourne la partie help de la commande (Optionel)
Une fonction / constante execute de type TerminalCommandExecute<Props, Flags, Setters> avec les types Props, Flags et Setters que vous pouvez définir pour préciser votre autocompletion, sinon ne précisez rien. (Requis)

type TerminalCommandExecute<
    G extends Record<string, string|null>|RegExpMatchArray =
            Record<string, string|null>|RegExpMatchArray,
    F extends {[K: string]: string|boolean|number|any[]} = {[K: string]: string|boolean|number|any[]},
    S extends Record<string, Setter<any>> = Record<string, Setter<any>>
> = (
    groups: G,
    isAdmin: boolean,
    flags: F,
    location: ComputedRef<string>,
    setters: S
) => string|string[]|void;

Pour créer une commande custom :

Où vous voulez :

Créer un fichier nommé avec le nom de la commande
Reproduisez la structure définie ci-dessus.
Dans un fichier importé dans le point d'entré, enregistrez vos commands avec les fonctions registerPlugin et/ou registerPlugins

type TerminalCommand = {
    command: RegExp;
    adminCommand?: RegExp;
    name?: string;
    flags?: TerminalCommandFlag[];
    execute: TerminalCommandExecute;
}

let registerPlugin: (command: TerminalCommand) => void;
let registerPlugins: (...commandList: TerminalCommand[]) => void;

Commandes en place dans le terminal

Commande	Help	Description
cat	cat --help/-h	Concaténer les fichiers vers la sortie standard
cd	-	Permet de se déplacer dans l'arboraissence depuis le terminal
clear	clear --help/-h	Nétoie l'historique de console
compgen	compgen --help/-h	Liste l'ensemble des commandes disponibles
cp	cp --help/-h	Copie une ou plusieurs sources vers DEST
exit	-	Ferme le terminal
ls	ls --help/-h	Liste les fichiers et répertoires contenus dans la source
mkdir	mkdir --help/-h	Crée un ou plusieurs répertoires
mv	mv --help/-h	Déplace ou renomme une fichier ou un répertoire
neofetch	-	Affiche des informations au sujet de Nicolas Choquet
pwd	pwd --help/-h	Affiche le nom du répertoire de travail courant

ANNEXES

About

création d'un portfolio sous forme d'un system macos développé avec vue 3

Languages

Language:Vue 68.1%Language:TypeScript 30.7%Language:JavaScript 0.9%Language:HTML 0.2%Language:Shell 0.0%