YuInde​​x-オタクのためのブラウザホームページ

オタクのための最もクールなブラウザインデックス！

フロントエンドとバックエンドのフルスタックプロジェクトプログラマーによる魚の皮

オンライン体験：https ：//yuindex.com

YuInde​​xとは何ですか？

入力コマンドを使用して操作することをサポートする非常に特別なブラウザホームページ。目標は、Web端末ですべてを効率的に完了するのを支援することです。（オールインワン）

さらに、強力なWeb端末コンポーネントでもあります。開発者はそれに基づいて独自のWeb端末をカスタマイズでき、端末に任意のコンテンツを統合できます。

あなたがプログラマーなら、きっと気に入ると思います〜

音楽、ゲーム、そしてあなた自身のアイドルさえもホームページにカプセル化することができます〜

1分で始めましょう

ウェブサイトを開いてください：https ：//yuindex.com

次に、Webサイトで次のコマンドを順番に入力します。

baidu 程序员鱼皮
github yuindex
goto yupi.icu
todo
music 坤坤
moyu
按键 Ctrl + O 触发折叠, 再按可展开
history
按键 Ctrl + L 清屏

help 命令英文名

help search

shortcut

コマンドの完全な使用法については、コマンドマニュアルを参照してください。

探検しよう〜

プロジェクトのメリット

ユーザー

• マウスを必要とせずに、アクション（さまざまなプラットフォームからのコンテンツの検索など）をすばやく完了します
• ミニマリストでクールなオタクスタイル、Linuxテイスト〜
• ショートカットキー、ヘルプ、入力プロンプトをサポートして、使用コストを削減します
• カスタム背景などをサポートして、パーソナライズされたホームページを作成します
• Linuxコマンドに慣れ、プログラミングの楽しさを感じるのに役立ちます

デベロッパー

• 機能豊富なWeb端末コンポーネントを個別に使用することも、二次開発を使用することもできます
• 独自のコマンドを開発してシステムにアクセスできます

学習者

• Web端末の開発方法を学ぶことができます
• システム設計の知識を学び、抽象化と再利用を理解することができます
• より標準化されたコードディレクトリとフォーマットを学ぶことができます

機能と特徴

ウェブ端末

• コマンド履歴、履歴コマンドの迅速な実行
• ホットキー
• クリアスクリーン
• コマンド入力プロンプト
• 複数の形式で出力
• 5つの組み込み出力状態
• コマンドフォールディング
• 手動生成を支援する
• カスタム構成（背景の変更、プロンプトスイッチなど）
• サブコマンドのサポート

コマンドがサポートされています

コマンドの完全な使用法については、コマンドマニュアルを参照してください。

• マルチプラットフォーム検索検索
• Webページはすぐにジャンプします
• スペース管理（お気に入りと同様に、Webページ情報を保存できます）
• 日付を表示
• fanyiを翻訳する
• やること
• ネットワーク検出ping
• タイマーのタイミング
• 背景を変更する
• 音楽を聴く
• 釣りゲームmoyu
• くんくんイクン
• 他の。。。

テクノロジースタック

フロントエンド

主なテクニック：

• vue3
• Vite 2
• Ant DesignVue3コンポーネントライブラリ
• ピニア2状態管理
• TypeScriptタイプコントロール
• Eslintコード典拠コントロール
• よりきれいな美化コード

依存ライブラリ：

• axiosネットワークリクエスト
• dayjs時間処理
• lodashツールライブラリ
• getoptsコマンドパラメータの解析

ライブラリ：getopts

後部

主なテクニック：

• Node.js
• エクスプレス、エクスプレスセッション
• MySQL
• 続編（ORMフレームワーク）
• Redis

依存ライブラリ：

• アクシオス
• NeteaseCloudMusicApi

依存サービス：

• 百度翻訳API
• シーナ壁紙API

バックエンドの詳細については、ここをクリックしてください

ディレクトリ構造

• パブリックパブリック静的リソース
• サーバーバックエンド
• src
  • アセット静的リソース
  • コンポーネント
    • yu端子端子部品
  • 構成構成
    • ルートルート
  • コアコア
    • コマンドコマンドセット
    • commandRegisterコマンド登録
    • commandExecutorコマンドエグゼキュータ
  • ページページ
    • IndexPage.vueホームページ
  • プラグインサードパーティの依存関係
  • utilsツール
  • App.vueメインページ
  • env.d.ts環境定義
  • main.tsVueメインファイル
• .eslintrc.jsコード仕様
• components.d.ts自動生成されたコンポーネントは動的にインポートされます
• Dockerfileイメージビルド
• index.html静的ホームページ
• package.jsonプロジェクト管理
• tsconfig.jsonTS構成
• vite.config.tsパッケージツールの構成

システムデザイン

デザインのコンセプト

1. オープン：プラグインのようなデザインを採用しています。これは、開発者が新しいコマンドをカスタマイズするのに便利であり、構成を通じてヘルププロンプトを自動的に生成できます。
2. フロントエンドとバックエンドの強調：コアモジュールを除いて、実装のスケーラビリティ、セキュリティ、および利便性を考慮して、バックエンドを要求しないようにしてください

芯

システムは3つのコアモジュールに分割されており、各モジュールには明確な責任があります。

• マイクロターミナル：UIディスプレイとターミナルインタラクションロジック
• コマンドシステム：マイクロ端末とコマンドセット（メディエーター）を接続します。コマンドセット（メディエーター）は、コマンドの照合、解析、実行を担当し、端末が提供する操作インターフェイスを介してコマンドにフィードバックを提供します。
• コマンドセット：コマンドの定義とさまざまな機能の実装

フロントエンドアーキテクチャ図：

マイクロターミナル

次のモジュールを含む、0から実装されたWebターミナルコンソール：

• 端末入力：入力ボックスに常駐し、ユーザーコマンドの受信を担当します
• ターミナル出力：ユーザーのコマンドや実行結果などの表示を担当し、以下の3種類の出力に対応しています。
  • コマンドタイプ：入力コマンド+結果リスト
  • テキストタイプ：1行のテキスト表示、組み込みの5つの異なる表示状態（成功、エラー、警告、情報、システムなど）
  • カスタムコンポーネントタイプ：表示するコンテンツを自由にカスタマイズできます
• ショートカットキー：

  document.onkeydown

  グローバル
• オープンインターフェイス：画面のクリア、即時出力など、コマンドシステムコール用に端末を操作するための一連のAPIを提供します。
• コマンド履歴：ユーザーが入力したコマンド結果を記録し、Vue 3CompositionAPIを使用してロジックの一部をカプセル化します
• コマンドプロンプト：Vue 3 Composition APIを使用して個別にパッケージ化された、ユーザー入力に基づいたプロンプトを表示します

コマンドシステム

次のモジュールを含む、端末に依存しないコマンド解析および実行エンジンのセット：

• レジストラ：照合できる一連のコマンドを登録および管理するために使用されます
• マッチャー：入力テキストに従って、対応するコマンドを照合します
• パーサー：入力テキストからパラメーターとオプションを解析します
• エグゼキュータ：コマンドを実行し、操作を完了します
• サブコマンドメカニズム：サブコマンドの再帰解析をサポートします

コマンドセット

使用可能なコマンドのセット（プラグインと同様）、コマンドの定義はTSを通じて明確であり、開発者が拡張およびカスタマイズするのに便利な構成エイリアス、オプション、サブコマンドなどをサポートします。

コアコマンドは次のとおりです。

• 宇宙システム：Webリンクやその他のコンテンツを管理できる自己実装のファイルのようなシステム
• ユーザーシステム：ユーザーの管理、個人用にカスタマイズされたコンテンツの同期
• 端末制御：背景の変更、ヘルプの出力など、端末をカスタマイズまたは制御します。
• 検索：コンテンツはさまざまな検索エンジンからすばやく取得できます
• 他のモジュール。。。

なぜあなた自身の端末を書くのですか？

1. 当初は既製のxterm.jsを使用する予定でしたが、実際に使用すると、ドキュメントが比較的少なく、問題（漢字など）の解決が難しいことがわかりました。問題の解決にかかる時間は十分です。自分で新しいWeb端末を作成します。さらに、このプロジェクトの位置付けと矛盾するバックエンドサーバーとの強力な相互作用に適しています。
2. オープンソースのWeb端末は非常に少ないので、オープンソースに貢献してください。
3. Vueを確認し、パーソナルシステムの開発および設計機能の境界を突破するのを手伝ってください。

詳細説明

このプロジェクトの完全で詳細な説明が必要な場合は、 Yupiください。これはYupiのプログラミング学習サークルです。サークル内の全員がこのプロジェクトを0から1まで分析して解釈します。あなたが独立できること。1つ、プロジェクト経験+1を実行します。

貢献ガイドライン

友達はコードを投稿することを歓迎します。最初に次のガイドを読んでください。

新しいコマンドを開発する

1. コマンドの下に新しいディレクトリを作成します。ディレクトリ名はコマンドの英語名であり、コマンドに関連するすべてのコードをこのディレクトリに配置する必要があります
2. コマンド定義ファイルxxxCommand.ts（xxxはコマンドの英語名）を記述します。music、gotoなどの他のコマンドを参照できます。
3. コマンドにサブコマンドが含まれている場合は、サブコマンド関連ファイルをsubCommandsディレクトリに配置する必要があります。ユーザーコマンドを参照できます。
4. commandRegisterのcommandListに新しいコマンドを追加します
5. テスト検証に合格すると、PRやその他の魚の皮の合併を開始できます

ありがとう

moyuコマンドの実装はhttps://haiyong.site/moyuに依存しています。オープンソースの共有に感謝します。