画面設計｜アカウント一覧・編集画面

{success} アカウント一覧・編集画面の画面設計を明記します。

基本情報

名称 定義 備考
ディレクトリ components vue.jsのディレクトリです。
component account.vue vue.jsのcomponennt名です。
route account

画面レイアウト図

基本設計時　アカウント一覧、表示・登録編集画面：

image

コーディング後：

項目名

一覧

No. 項目名 タイプ 必須 アクション有無 備考
1 新規作成 button - - -
2 検索（入力式） 入力 - ○ メールアドレス、名前@LIKE検索
3 名前 リンク - - -
4 メールアドレス リンク - - -

表示・登録編集

No. 項目名 タイプ 必須 アクション有無 備考
1 ユーザー名 表示 - - -
2 編集 button - ○ 登録・編集時のみ表示
3 閉じる button - ○ 登録・編集時のみ表示
4 メールアドレス 入力 ○ - -
5 名前 入力 ○ - -
6 パスワード 入力 ※ - ※新規登録時のみ必須
7 登録日時 表示 - - -
8 更新日時 表示 - - -
9 登録・更新 button - ○ -
10 削除 button - ○ 新規作成では表示されない

アクション

一覧

No. 項目名 処理内容
- - -

表示・登録編集

No. 項目名 処理内容
1 編集 背景が反転してコンテンツが入力モードに切り替わる
2 閉じる 入力から表示モードに切り替わる
3 登録・更新 作成・編集しているユーザー情報を更新する
4 削除 編集を行っているユーザーのアカウント情報を削除する

その他補足

警告文

No. 項目名 処理内容

詳細設計

アカウント一覧　 アカウント新規登録・編集