# 分析設計稿的資料與元件

###### tags: `twitter_pj`

## Simple Twit
### /regist
- 會用到的資料
- user {account, name, password,}
- Users {account} //確認是否已為User
- 會用到的UI元件
- Register.vue

### /setting
- 會用到的資料
- user {account, name, email, password,}
- Users {account} //確認是否有重複
- 會用到的UI元件
- Setting.vue
- @ SideBar.vue

### /login
- 會用到的資料
- currentUser {email, password,}
- User {email, password, isAdmin} //確認是否為管理者
- 會用到的UI元件
- Login.vue
- InputForm.vue
---
## main
### /main
- 會用到的資料
- twits[ twit{ id, user{account, name }, creatAt, description, comments[], liked[] }]
- currentUser {id, image, description}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- Main.vue
- @ SideBar.vue
- @ MainTimeLine.vue
- TwitCard.vue
- @ TwitInput.vue
- @ Popular.vue

### /replay_list
- 會用到的資料
- twit{ id, user{account, name }, creatAt, description, comments[{user{account,name, image},comment, creatAt}], liked[times]
- currentUser {id, image, description}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- MainRelpy.vue
- TwitReplyCard.vue
- @ SideBar.vue
- @ Popular.vue

### /main/twit_modal
- 會用到的資料
- twit{ description,creatAt}
- currentUser {id, image, description}

- 會用到的UI元件
- MainTwitModal.vue

### /reply_list/ replay_modal
- 會用到的資料
- twit{id, user, image, description}
- currentUser {id, image, description replay{ description,creatAt}}

- 會用到的UI元件
- MainTwitReplyModal.vue
- TwitCard.vue
- TwitReplyForm.vue

---
## User
UserSelf.vue
### /user/self
- 會用到的資料
- user {twit{ description,creatAt}}
- currentUser {id, image, description}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- UserDetail.vue
- TwitCard.vue
- @ SideBar.vue
- @ Popular.vue

### /user/self/
- 會用到的資料
- user {replay{ description,creatAt}}
- currentUser {id, image, description}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- UserReplay.vue
- TwitReplyCard.vue
- @ SideBar.vue
- @ Popular.vue

### /user/self/like
- 會用到的資料
- twit
- user {islike}
- currentUser {id, image, description}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- UserLike.vue
- TwitCard.vue
- @ SideBar.vue
- @ Popular.vue

### /user/self/edit
- 會用到的資料
- user { original data}
- edit data

- 會用到的UI元件
- UserEdit.vue

### /user/self/follower
- 會用到的資料
- follower{ id, name...}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- UserFollower.vue
- TwitCard.vue
- @ SideBar.vue
- @ Popular.vue

### /user/self/following
- 會用到的資料
- following{ id, name...}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- UserFollowing.vue
- TwitCard.vue
- @ SideBar.vue
- @ Popular.vue

### user/other
UserOther.vue
- 會用到的資料
- user {twit{ description,creatAt}}
- currentUser {id, image, description}
- popularUser { user{account, name isfollwed}}

- 會用到的UI元件
- UserDetail.vue
- TwitCard.vue
- @ SideBar.vue
- @ Popular.vue

### user/other/noti
- 會用到的資料
- user {twit{ description,creatAt}}
- currentUser {id, image, description}
- popularUser { user{account, name isfollwed}}
- isnoted

- 會用到的UI元件
- UserDetail.vue
- TwitCard.vue
- @ SideBar.vue
- @ Popular.vue

---

## Admin
### admin
- 會用到的資料
- currentUser {email, password,}
- User {email, password, isAdmin} //確認是否為管理者
- 會用到的UI元件
- Admin.vue
- InputForm.vue
### admin/main
- 會用到的資料
- twits
- 會用到的UI元件
- AdminTwits.vue
- TwitCard.vue
- AdminSideBar.

### admin/usrs
- 會用到的資料
- users
- 會用到的UI元件
- AdminUsers.vue
- TwitUser.vue
- AdminSideBar.vue