purple admin uiダウンロード - purple admin uiソースコードダウンロード

purple admin ui

AI ソースコード

1.0.0

ダウンロード

パープル管理UI

next.jsとtailwindを使用したMO-DUNN管理テンプレート

導入

next.js + tailwind + Antデザインベースの管理テンプレートで人気のあるライブラリを収集して、誰でも簡単かつ迅速に開発できるようにします。~~管理者の開発は10年しか経っていません...~~

デスクトップデモ

警告これはプログラムでの作業です。必要な説明または機能/バグがある場合は、この問題に登録してください。レビュー後に更新します。

これらの人々に推奨されますか？

管理ページを作成するために設計に悩まされているバックエンドプログラマー
next.js/Reactに基づいて頻繁に使用されるライブラリを結ぶテンプレートが必要な場合
の

デモ

https://admin-ui.purple.io/login

OAuth（Google/Github）またはID/Password（admin/admin）でログインします。

プロジェクトの作成

Deployボタンをクリックしてソースを複製し、vercelに展開できます。

ソースをダウンロードするか、次のコマンドを入力してプロジェクトを開始できます。

 # npm
npx create-next-app --example " https://github.com/purpleio/purple-admin-ui "
# yarn
yarn create next-app --example " https://github.com/purpleio/purple-admin-ui "
# pnpm
pnpm create next-app --example " https://github.com/purpleio/purple-admin-ui "

デフォルト

.env.exampleファイルをコピーして、 .envファイルを作成します。

cp .env.example .env

鍵	説明	例
nextauth_url	サービスURL	http：// localhost：3000
nextauth_secret	ランダムシークレットキー	ランダムクリエイティブの発行
github_client_id	github oauthクライアントID
github_client_secret	github oauthクライアントシークレット
Google_client_id	Google OAuthクライアントID
Google_client_secret	Google Oauth Client Secret
next_public_api_endpoint	APIサーバーエンドポイント	http：// localhost：3000
next_public_codenbutter_site_id	ポップアッププラグイン	コード＆バターサイトID

サンプル

サンプルコードを使用すると、基本的な使用法を確認できます。

APIサーバー（モックデータ）

一般に、バックエンドサーバーはしばしば分離されますが、簡単なテスト用のサンプルコードです。

src/pages/api/sample/dashboard.ts：統計照会
src/pages/api/sample/products/index.ts：製品リスト
src/pages/api/sample/products/[id] .ts：Product crud api

APIクライアント

これは、フロントエンドでAPIを呼び出すための関数を収集するサンプルコードです。
APIに関連するコードとタイプを管理します。

src/client/sample/dashboard.ts：統計調査API
src/client/sample/product.ts：製品Crud/Type

ページ

ダッシュボードと製品のCRUDサンプルページ。
詳細は、コンポーネントにsrc/components/page/[동일한 페이지 경로]に分割されます。

src/pages/index.tsx：ダッシュボード
src/pages/sample/product/list.tsx：製品のリスト
src/pages/sample/product/new.tsx：製品登録
src/pages/sample/product/edit/[id] .tsx：製品の変更

成分

これは、さまざまなライブラリをミックスするサンプルコードです。
統計、検索、リスト、入力フォームなどの基本的な機能を確認できます。

SRC/Components/Page/Index/Calendar-Sample.tsx：カレンダーサンプルコンポーネント
SRC/コンポーネント/ページ/index/statistic-sample.tsx：統計サンプルコンポーネント
SRC/コンポーネント/ページ/SAMPLE/PRODUCT/PRODUCT.TSX：製品入力フォーム（作成/変更共通使用）コンポーネント
SRC/コンポーネント/ページ/SAMPLE/PRODUCT/PRODUCTLIST.TSX：製品リストコンポーネント
SRC/コンポーネント/ページ/サンプル/Product/Product/Product-Search.TSX：製品検索コンポーネント

サンプル画像

パブリック/サンプル：サンプル画像

テクノロジースタックと機能

フレームワーク

next.js -race.jsベースのフレームワークがvercelによって作成されました
auth.js -oauth（Google/github）またはID/パスワードライブラリ

プラットフォーム

Vercel -next.jsアプリケーション配布サービス

ui

Tailwind CSS-Utility-First CSSフレームワーク
ANTデザイン -さまざまな管理者コンポーネントをサポートするUIライブラリ
Lucide -SVGアイコンコレクション
フレーマーモーション - アニメーションライブラリ
countupカウントアニメーションを反応します
次/Font -Webfont Optimization Library

フォームコントロール

Quill -Wijiwick Text Editor
Codemror -Code Editor

コード品質

タイプスクリプト - javascriptに構築される強力に型付けされたプログラミング言語
きれい - 意見のあるコードフォーマッタ
ESLINT -JavaScriptとJSXのプラグ可能な糸くずユーティリティ

その他

任意のプラットフォームで利用可能なPretendard-System-UI代替フォント
day.js-日付/時刻ライブラリ
SWR -Hooks for Data Inquiry
Ky -smallとエレガントなHTTPクライアント
数字 - 数のフォーミットライブラリ
codenbutter -notice pop -up

プロジェクト構成

建築

認定を除くすべてのページは、静的ページとして提供されます。（SSR使用x） ~~APIが死んだとしても、ページが表示されます。~~
ビジネスロジックはバックエンドAPIとして提供され、フロントエンドは十分に表現および配信されます。
フォームに関連する部分は、ANTデザインのフォームコンポーネントを積極的に使用します。

ディレクトリ

効率的な管理のために、ディレクトリ構造は次のように定義されます。

 ┌─ src
│  ├─ client # API 호출 코드
│  ├─ components
│  │  ├─ layout # 기본 레이아웃
│  │  ├─ page # 페이지별 세부 컴포넌트
│  │  └─ shared # 공통 컴포넌트
│  ├─ fonts # 웹폰트
│  ├─ lib
│  │  ├─ auth # 인증 관련 코드
│  │  └─ hooks # react hooks
│  ├─ pages # 페이지
│  ├─ styles # 기본 스타일
│  └─ types # 타입 정의
└─ public # 이미지등 정적 파일

SRC/クライアント