Simple Twitter - 分析設計稿的資料與元件
===
1.註冊頁 - /regist
---
- Views
- Regist

- 頁面資料 Data

| Data | variable | Type | Components |
| -------------- | ------------- | ------ | ---------- |
| 使用者帳號 | id | String | - |
| 使用者姓名 | name | String | - |
| 使用者信箱 | email | String | - |
| 使用者密碼 | password | String | - |
| 使用者密碼確認 | passwordCheck | String | - |

export default {
  data () {
    return {
      id: '',
      name: '',
      email: '',
      password: '',
      passwordCheck: '',
    }
  },

---
2.個人資料設定 - /setting
===

- Views
- UserSetting
- Components
- UserSettingForm
- Navbar

| Data | variable | Type | Components |
| -------------------------- | ------------- | ------ | --------------- |
| 使用者帳號,e.g. @wonderman | id | String | UserSettingForm |
| 使用者姓名,e.g. John Doe | name | String | UserSettingForm |
| 使用者信箱 | email | String | UserSettingForm |
| 使用者密碼 | password | String | UserSettingForm |
| 使用者密碼確認 | passwordCheck | String | UserSettingForm |

export default {
  components: {
    Navbar,
    UserSettingForm
  },
  data () {
    return {
      id: '',
      name: '',
      email: '',
      password: '',
      passwordCheck: '',
    }
  },

---
3.前台登入頁 - /login
===

- Views
- UserLogin

| Data | variable | Type | Components |
| ---------- | -------- | ------ | ---------- |
| 使用者帳號 | id | String | - |
| 使用者密碼 | password | String | - |

export default {
  data () {
    return {
      id: '',
      password: '',
    }
  },

---
4.首頁 tweets 總表- /main
===
- Views
- UserMainPage
- Components
- Navbar
- CreateComment
- UserTweets
- RelateUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| ---------- | ------------- | ------ | --------------- |
| 使用者帳號 | id | Number | CreateComment |
| 使用者姓名 | name | String | CreateComment |
| 使用者信箱 | email | String | CreateComment |
| 使用者照片 | image | String | CreateComment |
| 使用者評論 | userComments | Array | UserTweets |
| 追蹤者名單 | userfollowers | Array | RelateUsers |

export default {
  components: {
    Navbar,
    CreateComment,
    UserTweets,
    RelateUsers
  },
data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
      },
      userComments: [],
      RelatedUsers: [],
      isLoading: true
    }
  },

---
5.單一 tweet 詳情頁 - /reply_list
===
- Views
- ReplyList
- Components
- Navbar
- UserTweet
- RelateUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| --------------------- | ------------- | ------ | --------------- |
| 使用者帳號e.g. @apple | id | Number | UserTweet |
| 使用者姓名e.g. Apple | name | String | UserTweet |
| 使用者信箱 | email | String | UserTweet |
| 使用者照片 | image | String | UserTweet |
| 使用者評論 | userComment | Object | UserTweet |
| 追蹤者名單 | userfollowers | Array | RelateUsers |

export default {
  components: {
    Navbar,
    UserTweet,
    RelateUsers
  },
data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
      },
      userComment: [],
      RelatedUsers: [],
      isLoading: true
    }
  },

---
6.新增 tweet - /tweet
===
- 直接使用Modal
- Views : (None)

- Components : (None)

- 頁面資料 Data

| Data | variable | Type | Components |
| ---------- | ------------- | ------ | --------------- |
| 使用者帳號 | id | Number | |
| 使用者姓名 | name | String | |
| 使用者照片 | image | String | |
| 發布內容 | text | String | |
| 追蹤者名單 | userfollowers | Array | |

export default {

data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
        text:''
      },
      userComment: [],
      RelatedUsers: [],
      isLoading: true
    }
  },

---
7.回覆 - /replied
===
- Views
- ReplyTweetModal
- Components

- 頁面資料 Data

| Data | variable | Type | Components |
| ---------- | ------------- | ------ | --------------- |
| 使用者帳號 | id | Number | |
| 使用者姓名 | name | String | |
| 使用者照片 | image | String | |
| 回覆內容 | text | String | |
| 追蹤者名單 | userfollowers | Array | |

export default {

data () {
    return {
      User: {
        id: -1,
        name: '',
        image: '',
        text:''
      },
      userComment: [],
      RelatedUsers: [],
      isLoading: true
    }
  },

---
8.自己的 user profile (推文清單) - /user/self
===
- Views
- User
- Components
- Navbar
- UserProfile
- UserNavtabs
- UserTweets
- RelatedUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| -------------- | -------------------- | ------ | --------------- |
| 使用者帳號 | id | Number | UserProfile |
| 使用者姓名 | name | String | UserProfile |
| 使用者照片 | image | String | UserProfile |
| 使用者自我介紹 | UserSelfIntroduction | String | UserProfile |
| 追蹤者數量 | followers | Array | UserProfile |
| 追蹤中數量 | following | Array | UserProfile |
| 使用者推文 | userComments | Array | UserTweets |
| 追蹤者名單 | userfollowers | Array | RelatedUsers |

export default {
  components: {
    Navbar,
    UserProfile,
    UserTweets,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      followings: [],
      followers: [],
      RelatedUsers:[]
    }
  },

---
9.自己的 user profile (喜歡的內容) - /user/self/like
===
- Views
- User
- Components
- Navbar
- UserProfile
- *UserLikeTweets
- RelatedUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| -------------- | ----------------- | ------ | --------------------- |
| 使用者帳號 | id | Number | UserProfile |
| 使用者姓名 | name | String | UserProfile |
| 使用者照片 | image | String | UserProfile |
| 使用者自我介紹 | selfIntroduction | String | UserProfile |
| 追蹤者數量 | followers | Array | UserProfile |
| 追蹤中數量 | following | Array | UserProfile |
| 喜歡的內容 | favoritedComments | Array | UserLikeTweets |
| 追蹤者名單 | userfollowers | Array | RelatedUsers |

export default {
  components: {
    Navbar,
    UserProfile,
    UserLikeTweets,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      followings: [],
      followers: [],
      UserLikeTweets: [],
      RelatedUsers: [],
    }
  },

---
10.自己的 user profile - 編輯資料 - /user/self/edit
===
- Views : Modal跳出
- Components : (None)

- 頁面資料 Data

| Data | variable | Type | Components |
| ---------- | ---------------- | ------ | ---------- |
| 使用者帳號 | id | Number | - |
| 使用者姓名 | name | String | - |
| 使用者照片 | image | String | - |
| 封面照片 | pageImage | String | - |
| 自我介紹 | selfIntroduction | String | - |

export default {
  data () {
    return {
      id: 0,
      image: '',
      pageImage:'',
      name: '',
      selfIntroduction:'',
      RelatedUsers:[]
    }
  },

---
11.user 的跟隨者清單 - /user/self/follower
===

- Views
- UserSelfFollower
- Components
- Navbar
- UserFollowerList
- RelatedUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| ---------- | ------------- | ------ | ---------------- |
| 使用者id | id | Number | UserFollowerList |
| 跟隨者清單 | follower | Array | UserFollowerList |
| 追蹤者名單 | userfollowers | Array | RelatedUsers |

export default {
  components: {
    Navbar,
    UserFollowerList,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: -1,
      },
      follower: [],
      relatedUsers: [],
    }
  },

---
12.user 的正在跟隨清單 - /user/self/following
===
- Views
- UserSelfFollowing
- Components
- Navbar
- UserFollowingList
- RelatedUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| ---------- | ------------- | ------ | ---------------- |
| 使用者id | id | Number | UserFollowingList |
| 跟隨者清單 | following | Array | UserFollowingList |
| 追蹤者名單 | userfollowers | Array | RelatedUsers |

export default {
  components: {
    Navbar,
    UserFollowingList,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
      },
      following: [],
      relatedUsers: [],
    }
  },

---
13.別人的 user profile - /user/other
===
- Views
- OtherUser
- Components
- Navbar
- UserProfile
- UserTweets
- RelatedUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| -------------- | ---------------- | ------ | ---------------- |
| 使用者帳號 | id | Number | UserProfile |
| 使用者姓名 | name | String | UserProfile |
| 使用者照片 | image | String | UserProfile |
| 使用者自我介紹 | selfIntroduction | String | UserProfile |
| 追蹤者數量 | follower | Array | UserProfile |
| 追蹤中數量 | following | Array | UserProfile |
| 使用者推文 | userComments | Array | UserTweets |
| 追蹤者名單 | userfollowers | Array | RelatedUsers |

export default {
  components: {
    Navbar,
    UserProfile,
    UserTweets,
    RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      following: [],
      follower: [],
      UserTweets: [],
      favoritedComments: [],
      relatedUsers: [],
    }
  },

---
14.別人的 user profile (已訂閱/開啟小鈴鐺) - /user/other/noti
===
- Views
- OtherUserTweetsNotify
- Components
- Navbar
- UserProfile
- UserTweets
- RelatedUsers

- 頁面資料 Data

| Data | variable | Type | Components |
| ---------------- | ----------------- | ------- | ----------------- |
| 使用者帳號 | id | Number | UserProfile |
| 使用者姓名 | name | String | UserProfile |
| 使用者照片 | image | String | UserProfile |
| 使用者自我介紹 | selfIntroduction | String | UserProfile |
| 追蹤者數量 | followers | Array | UserProfile |
| 追蹤中數量 | following | Array | UserProfile |
| 使用者推文 | userComments | Array | UserTweets |
| 使用者推文與回覆 | replyComments | Array | UserReplyTweets |
| 喜歡的內容 | favoritedComments | Array | UserFollowsCard |
| 追蹤者名單 | userfollowers | Array | UserFollowsCard |
| 是否開啟通知 | isNoticed | boolean | OtherUserProfile |

export default {
  components: {
     Navbar
     UserProfile
     UserTweets
     RelatedUsers
  },
  data () {
    return {
      user: {
        id: 0,
        image: '',
        name: '',
        followingsLength: 0,
        followersLength: 0,
        commentsLength: 0,
      },
      following: [],
      follower: [],
      userComments: [],
      favoritedComments: [],
      relatedUsers: [],
      isFollowed:true,
    }
  },

---
15.後台登入頁 - /admin
===
- Views
- AdminLogin
- 頁面資料 Data

| Data | variable | Type | Components |
| ---------- | -------- | ------- | ---------- |
| 帳號 | id | String | - |
| 密碼 | password | String | - |
| 管理員權限 | isAdmin | boolean | - |

export default {
  data () {
    return {
      id: '',
      password: '',
      isAdmin: false,
    }
  },

---
16.後台推文清單 - /admin_main
===
- Views
- AdminMain
- Components
- AdminTweetsList
- AdminNavbar
- 頁面資料 Data

| Data | variable | Type | Components |
| -------- | ------------ | ----- | ---------- |
| 推文清單 | UserComments | Array | AdminTweetsList |

export default {
  components: {
    AdminNavbar,
    AdminTweetsList
  },
  data () {
    return {
      UserComments:[]
    }
  },

---
17.後台使用者列表 - /admin_users
===
- Views
- AdminUsers
- Components
- AdminNavbar
- AdminUserCard
- 頁面資料 Data

| Data | variable | Type | Components |
| ------------------ | --------- | ------ | ---------- |
| 名稱 e.g. John | name | String | AdminUserCard |
| 帳號 e.g. @heyJohn | id | String | AdminUserCard |
| 推文數 | comments | Array | AdminUserCard |
| Like數 | favorited | Array | AdminUserCard |
| 跟隨中人數 | following | Array | AdminUserCard |
| 跟隨者人數 | follower | Array | AdminUserCard |

export default {
  components: {
    AdminNavbar,
    AdminUserCard
  },
  data () {
    return {
      Users:[],
    }
  },