商縁 Shouen — システム全体構成図

商縁 Shouenシステム全体構成図Mirai Core Platform™　React 19 + Spring Boot（RuoYi-Vue-Plus）v4.4.0

総機能数（本部26 + 店舗31）

業務ドメイン

対応言語（日/中/英/韓/越）

ユーザー役割 × 3層権限制御

① ユーザー層 — 4役割

本部管理者

26画面
全機能アクセス

店長

25画面
店舗全権限

仕入担当

5画面
仕入業務専任

ピッキング担当

3画面
出荷業務専任

↓

② 管理画面層 — フロントエンド/バックエンド分離 React SPA

本部管理画面Merchant Admin26機能 / 7モジュール

店舗・組織管理4

支社管理・店舗管理・従業員管理・役割管理

商品管理5

3階層ツリー分類・商品・管理コード・分類変更・一括取込

価格管理4

内部価格・価格協定・仕入先価格（仮想）・変動履歴

購買先管理4

目録・アプリ招待・配送設定管理・外部目録

仕入先管理4

目録・新規申請・店舗別管理・仕入申請審査

仕入管理2

申請テンプレート・原材料構成（BOM）管理

ツール・設定3+

カレンダー・外部API同期（7カテゴリー）・システム設定・請求/入金管理

店舗管理画面Shop Admin31機能 / 7業務域

データダッシュボード1

4KPIカード・4EChartsグラフ・4レポート入口

受注業務12

販売集計・見積・卸売・協定・購買先管理・推奨・小売・販促・バラ商品・販売実績・分類管理

出荷業務2

ピッキング管理（受注別/商品別/保管場所別 3方式）・検品管理（RFID/バーコード）

請求業務3

レポート統計・入金管理（消込3状態）・請求管理（納品書/請求書2ビュー）

仕入業務6

仕入管理・協定・仕入先管理・受入管理・検品入庫・BOM構成

在庫業務6

店舗商品・在庫管理（3ビュー）・棚卸・廃棄・ラベル印刷・公告管理

システム設定1

個人情報・パスワード変更・通知設定

↓

③ 共通機能層 — 全画面共有

認証・セッション

ID/メール 2方式ログイン
Bearer Token管理
401自動ログアウト

ナビゲーション

動的サイドバー（役割別）
TagsViewマルチタブ
レスポンシブ自動切替

国際化（5言語）

日・中・英・韓・越
バックエンドAPI取得
localStorageキャッシュ

共通コンポーネント

検索フォーム/DictTag
hiprint PDF印刷
Excelエクスポート・列設定

3層権限制御

ルートレベル
コンポーネントレベル
APIレベル

↓

④ フロントエンド技術スタック — React 19 + TypeScript + Vite 8 + Tailwind 4

UI層

pages/ + layouts/
components/ui/
@base-ui/react + Tailwind 4

業務層

hooks/ + components/
business/ + common/
react-hook-form + zod

データ層（Zustand）

6 Store / store/
sessionStorage / localStorage
メモリキャッシュ

ネットワーク層

api/ + utils/request.ts
Axiosインターセプター
重複リクエスト制御

Zustand 6 Store 構成

useUserStore　sessionStorage　トークン/権限/ユーザー情報usePermissionStore　メモリ　動的ルート生成/サイドバーuseAppStore　sessionStorage　サイドバー開閉/デバイス判定useSettingsStore　localStorage　テーマ/レイアウトuseDictStore　メモリ　辞書データキャッシュuseTagsViewStore　メモリ　マルチタブ管理

コアフック

useTable　テーブル/ページング/検索useCrud　削除確認/ExcelエクスポートuseFormModal　新規/編集ダイアログuseDict　辞書データ取得・キャッシュuseAuth　hasPermission() 権限判定useECharts　グラフインスタンス管理useLocale　t(key, fallback) 翻訳

↕ HTTP /dev-api/* — Bearer Token — Vite Dev Proxy — Axiosインターセプター

⑤ バックエンド — Spring Boot（RuoYi-Vue-Plus v4.4.0）

Spring Security

APIレベル権限制御
401（期限切れ）/ 403（権限なし）レスポンス管理
JWT認証・セッション統合

動的ルーティングAPI

getRouters エンドポイント
トークン身分に応じた可視メニューを動的返却
多級ネストルート対応

国際化・辞書サーバー

/business/i18nLang/getallbylang
5言語翻訳データの動的返却
辞書・マスタデータ管理

↓

⑥ 業務ドメイン層 — 7ドメイン

仕入管理

申請・受入
検品・BOM

販売管理

受注・見積
出荷・返品

在庫管理

在庫・棚卸
廃棄・ロット

店舗管理

支社・店舗
従業員・役割

ECモール

商品・クーポン
販促・カート

会員管理

会員・等級
購買先・仕入先

システム管理

権限・辞書
国際化・設定

↓

⑦ 横断機能・外部連携

外部API同期

7カテゴリー対応
（店舗/商品/仕入先/得意先
/会員/受注/在庫）
フィールドマッピング・手動同期

帳票出力

hiprintテンプレート選択
請求書・納品書 PDF出力
Excelエクスポート
ラベル印刷

スキャン・IoT連携

RFIDスキャン対応
バーコードスキャン
検品→入庫自動連携
ピッキング票PDF出力

決済・配送連携

段階送料設定
都度締め・月次締め対応
入金消込（3状態管理）
本部代払い設定

🇯🇵 日本語🇨🇳 中文🇺🇸 English🇰🇷 한국어🇻🇳 Tiếng Việt