分析Twitter設計稿

頁面資料及Components

註冊頁 - /regist

Views: Regist.vue
Components

Components Description

- -

Components	Description
-	-

Regist.vue

頁面資料

newUser

newUser:{
    account: "",
    name: "",
    email: "",
    password: "",
    passwordConfirm: ""
}

Variables	Variable type	Description
account	String	註冊帳號
name	String	註冊名稱
email	String	註冊信箱
password	String	註冊密碼
passwordConfirm	String	註冊密碼確認

個人資料設定 - /setting

Views: UserSetting.vue
Components

Components Description

SideNavBar 側主選單

UserSettingForm 帳戶設定

UserSettingForm.vue

頁面資料

user

user:{
    account: "",
    name: "",
    email: "",
    password: "",
    passwordConfirm: ""
}

Variables	Variable type	Description
account	String	帳號
name	String	名稱
email	String	信箱
password	String	密碼
passwordConfirm	String	密碼確認

Views: Login.vue
Components

Components Description

- -

Components	Description
-	-

Login.vue

頁面資料

user

user:{
    account: "",
    password: "",
}

Variables	Variable type	Description
account	String	登入帳號
password	String	登入密碼

首頁 tweets 總表- /main

Views: Main.vue
Components

Components Description

SideNavBar 側主選單

MainTweetsCard 推文

FollowingsCard 跟隨人清單

Main.vue

頁面資料

user

user:{
        image: "",
        text: ""
}

Variables	Variable type	Description
image	String	使用者的圖片
text	String	推文內容

MainTweetsCard.vue

頁面資料

user

tweets:[
        {
            account: "",
            name: "",
            image: "",
            createdAt: "",
            replies:[],
            likes: [],
            isLike: false
        }
]

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
createdAt	Date	推文創立時間
replies	Array	推文留言
likes	Array	推文喜歡數
isLike	Boolean	使用者對這則推文是否喜歡

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

單一 tweet 詳情頁 - /reply_list

Views: ReplyList.vue
Components

Components Description

SideNavBar 側主選單

ReplyContent 推文內容

ReplyListCard 回應清單

FollowingsCard 跟隨人清單

ReplyContent.vue

頁面資料

userReply

userReply:{
    image: "",
    account: "",
    name: "",
    text: "",
    createdAt: "",
    replies:[],
    likes: 0
}

Variables	Variable type	Description
image	String	使用者的圖片
account	String	使用者帳號
name	String	使用者名字
createdAt	Date	使用者推文創立時間
replies	Array	推文回應
text	Array	使用者的回文
likes	Int	文章喜歡數

ReplyListCard.vue

頁面資料

replyList

replyList:[
    {
        account: "",
        name: "",
        image: "",
        createdAt: "",
        text:"",
    }
],

Variables	Variable type	Description
image	String	關注者的圖片
account	String	使用者或關注者帳號
name	String	關注者名字
createdAt	Date	關注者推文創立時間
text	Array	關注者的回文

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

新增 tweet - /tweet

Views: NewTweet.vue
Components

Components Description

NewTweetModal 新增推文

Components	Description
NewTweetModal	新增推文

NewTweetModal.vue

newTweet

newTweet:{
    image: "",
    text: "",
}

Variables	Variable type	Description
image	String	使用者的圖片
text	String	推文內容

回覆 - /replied

Views: Replied.vue
Components

Components Description

RepliedModal 回文內容

Components	Description
RepliedModal	回文內容

RepliedModal.vue

newReplied

newReplied:{
    followings:{
        image: "",
        account: "",
        name: "",
        createdAt: "",
        text: ""
    },
    text: "",
    name: "",
    image: ""
}

Variables	Variable type	Description
followings	Array	關注者內容
image	String	使用者或關注者的圖片
account	String	使用者或關注者的帳號
name	String	使用者或關注者的姓名
createdAt	Date	關注者的推文創力時間
text	String	使用者或關注者的推文

自己的 user profile (推文清單) - /user/self

Views: UserProfile.vue

Components

Components	Description
SideNavBar	側主選單
UserProfileInfo	個人頁面
UserProfileNav	個人頁面推文導覽列
UserProfileCard	個人頁面推文
FollowingsCard	跟隨人清單

UserProfile.vue

頁面資料

profile

profile:{
    name: "",
    tweetsLength: 0
}

Variables	Variable type	Description
name	String	使用者姓名
tweetsLength	Int	推文數量

UserProfileInfo.vue

頁面資料

profile

profile:{
    coverImage: "",
    image: "",
    name: "",
    account: "",
    intro: "",
    followings:[],
    followers:[]
}

Variables	Variable type	Description
coverImage	String	封面照片
image	String	使用者照片
name	String	使用者姓名
account	String	使用者帳號
intro	String	使用者簡介
followings	Array	使用者的關注者
followers	Array	使用者追隨者

UserProfileCard.vue

頁面資料

tweets

tweets:[
    {
        account: "",
        name: "",
        image: "",
        createdAt: "",
        replies:[],
        likes: [],
        isLike: false
    }
]

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
createdAt	Date	推文創立時間
replies	Array	推文留言
likes	Array	推文喜歡數
isLike	Boolean	使用者對這則推文是否喜歡

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

自己的 user profile (喜歡的內容) - /user/self/like

Views: UserLike.vue

Components

Components	Description
SideNavBar	側主選單
UserProfileInfo	個人頁面
UserProfileNav	個人頁面推文導覽列
UserProfileCard	個人頁面推文
FollowingsCard	跟隨人清單

UserLike.vue

頁面資料

profile

profile:{
    name: "",
    tweetsLength: 0
}

Variables	Variable type	Description
name	String	使用者姓名
tweetsLength	Int	推文數量

UserProfileInfo.vue

頁面資料

profile

profile:{
    coverImage: "",
    image: "",
    name: "",
    account: "",
    intro: "",
    followings:[],
    followers:[]
}

Variables	Variable type	Description
coverImage	String	封面照片
image	String	使用者照片
name	String	使用者姓名
account	String	使用者帳號
intro	String	使用者簡介
followings	Array	使用者的關注者
followers	Array	使用者追隨者

UserProfileCard.vue

頁面資料

tweets

tweets:[
    {
        account: "",
        name: "",
        image: "",
        createdAt: "",
        comments:[],
        likes: [],
        isLike: true
    }
]

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
createdAt	Date	推文創立時間
comments	Array	推文留言
likes	Array	推文喜歡數
isLike	Boolean	使用者對這則推文是否喜歡

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

自己的 user profile - 編輯資料 - /user/self/edit

Views: UserEdit.vue
Components

Components Description

UserEditModal 個人資料編輯
- UserEditModal.vue
  
  頁面資料
```
user:{
    coverImage: "",
    image: "",
    name: "",
    intro: "",
}
```
  Variables Variable type Description
  
  image String 使用者的圖片
  
  coverImage String 使用者封面照片
  
  name String 使用者名字
  
  intro String 使用者自我介紹

Components	Description
UserEditModal	個人資料編輯

user 的跟隨者清單 - /user/self/follower

Views: UserFollowers.vue
Components

Components Description

SideNavBar 側主選單

UserFollowersCard 使用者跟隨清單

FollowingsCard 跟隨人清單

UserFollowers.vue

頁面資料

UserFollowers

UserFollowers:{
    name: "",
    commentsLength: 0
}

Variables	Variable type	Description
name	String	使用者姓名
commentsLength	Int	回文數量

UserFollowersCard.vue

頁面資料

UserFollowers

UserFollowers:[
    {
        account: "",
        name: "",
        image: "",
        intro: "",
        isFollowed: false
    }
]

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
intro	String	關注者自介
isFollowed	Boolean	是否關注

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

user 的正在跟隨清單 - /user/self/following

Views: UserFollowings.vue
Components

Components Description

SideNavBar 側主選單

UserFollowingsCard 正在跟隨清單

FollowingsCard 跟隨人清單

UserFollowings.vue

頁面資料

UserFollowers

UserFollowers:{
    name: "",
    tweetsLength: 0
}

Variables	Variable type	Description
name	String	使用者姓名
tweetsLength	Int	推文數量

UserFollowingsCard.vue

頁面資料

UserFollowings

UserFollowings:[
    {
        account: "",
        name: "",
        image: "",
        intro: "",
        isFollowed: true
    }
]

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
intro	String	關注者自介
isFollowed	Boolean	是否關注

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

別人的 user profile - /user/other

Views: UserOther.vue
Components

Components Description

SideNavBar 側主選單

UserOtherInfo 他人資訊

UserOtherCard 他人推文卡片

FollowingsCard 跟隨人清單

UserOther.vue

頁面資料

UserOther

UserOther:{
    name: "",
    tweetsLength: 0
}

Variables	Variable type	Description
name	String	姓名
tweetsLength	Int	推文數量

UserOtherInfo.vue

頁面資料

UserOtherInfo

userOtherInfo:[
    {
        account: "",
        name: "",
        image: "",
        intro: "",
        coverImage: "",
        followers: [],
        followings: [],
        isFollowed: false,
        isNotified: false,
        
    }
]

Variables	Variable type	Description
image	String	他人的圖片
account	String	他人帳號
name	String	他人名字
intro	String	他人自介
coverImage	String	他人封面照片
followers	Array	他人的追隨者
followings	Array	他人的關注者
isFollowed	Boolean	是否關注
isNotified	Boolean	是否開啟提醒

UserOtherCard.vue

頁面資料

UserOtherCard

userOtherCard:[
    {
        account: "",
        name: "",
        image: "",
        intro: "",
        createdAt: "",
        likes: [],
        isLike: false
    }
]

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
createdAt	Date	推文創立時間
likes	Array	推文喜歡數
isLike	Boolean	使用者對這則推文是否喜歡
intro	String	自介

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

別人的 user profile (已訂閱/開啟小鈴鐺) - /user/other/noti

Views: UserOtherNoti.vue
Components

Components Description

SideNavBar 側主選單

UserOtherInfo 他人資訊

UserOtherCard 他人推文卡片

FollowingsCard 跟隨人清單

UserOtherNoti.vue

頁面資料

UserOther

UserOther:{
    name: "",
    tweetsLength: 0
}

Variables	Variable type	Description
name	String	姓名
tweetsLength	Int	推文數量

UserOtherInfo.vue

頁面資料

UserOtherInfo

userOtherInfo:[
    {
        account: "",
        name: "",
        image: "",
        intro: "",
        coverImage: "",
        followers: [],
        followings: [],
        isFollowed: false,
        isNotified: true,
        
    }
]

Variables	Variable type	Description
image	String	他人的圖片
account	String	他人帳號
name	String	他人名字
intro	String	他人自介
coverImage	String	他人封面照片
followers	Array	他人的追隨者
followings	Array	他人的關注者
isFollowed	Boolean	是否關注
isNotified	Boolean	是否開啟提醒

UserOtherCard.vue

頁面資料

UserOtherCard

userOtherCard:[
    {
        account: "",
        name: "",
        image: "",
        intro: "",
        createdAt: "",
        likes: [],
        isLike: false
    }
]

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
createdAt	Date	推文創立時間
likes	Array	推文喜歡數
isLike	Boolean	使用者對這則推文是否喜歡
intro	String	自介

FollowingsCard.vue

followings

followings:{
    image: "",
    account: "",
    name: "",
    isFollowed: false,
}

Variables	Variable type	Description
image	String	關注者的圖片
account	String	關注者帳號
name	String	關注者名字
isFollowed	Boolean	使用者對關注者是否關注

後台登入頁 - /admin

Views: AdminLogin.vue
Components

Components Description

- -

Components	Description
-	-

AdminLogin.vue

頁面資料

admin

admin:{
    account: "",
    password: "",
}

Variables	Variable type	Description
account	String	登入帳號
password	String	登入密碼

後台推文清單 - /admin_main

Views: AdminMain.vue
Components

Components Description

SideNavBar 管理側主選單

AdminTweetsList 管理推文清單

AdminTweetsList.vue

頁面資料

user

user:{
    account: "",
    name: "",
    image: "",
    text: "",
    createdAt: ""
}

Variables	Variable type	Description
account	String	帳號
name	String	名稱
image	String	用戶圖片
text	String	用戶圖片
createdAt	Date	用戶推文創立時間

後台使用者列表 - /admin_users

Views: AdminUsers.vue
Components

Components Description

SideNavBar 管理側主選單

AdminUsersCard 管理用戶清單

AdminUsersCard.vue

頁面資料

user

user:{
    account: "",
    name: "",
    image: "",
    coverImage: "",
    comments: [],
    favorites: [],
    followers: [],
    followings: []
}

Variables	Variable type	Description
account	String	帳號
name	String	名稱
image	String	用戶圖片
coverImage	String	用戶背景圖片
comments	Array	用戶回應
favorites	Array	用戶喜愛人數
followers	Array	用戶追隨者人數
followings	Array	用戶追蹤中人數

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

Components	Description
SideNavBar	側主選單
MainTweetsCard	推文
FollowingsCard	跟隨人清單

Components	Description
SideNavBar	側主選單
ReplyContent	推文內容
ReplyListCard	回應清單
FollowingsCard	跟隨人清單

Components	Description
SideNavBar	側主選單
UserFollowersCard	使用者跟隨清單
FollowingsCard	跟隨人清單

Components	Description
SideNavBar	側主選單
UserFollowingsCard	正在跟隨清單
FollowingsCard	跟隨人清單

Components	Description
SideNavBar	管理側主選單
AdminTweetsList	管理推文清單

Components	Description
SideNavBar	管理側主選單
AdminUsersCard	管理用戶清單

分析Twitter設計稿

頁面資料及Components

註冊頁 - /regist

個人資料設定 - /setting

前台登入頁 - /login

首頁 tweets 總表- /main

單一 tweet 詳情頁 - /reply_list

新增 tweet - /tweet

回覆 - /replied

自己的 user profile (推文清單) - /user/self

自己的 user profile (喜歡的內容) - /user/self/like

自己的 user profile - 編輯資料 - /user/self/edit

user 的跟隨者清單 - /user/self/follower

user 的正在跟隨清單 - /user/self/following

別人的 user profile - /user/other

別人的 user profile (已訂閱/開啟小鈴鐺) - /user/other/noti

後台登入頁 - /admin

後台推文清單 - /admin_main

後台使用者列表 - /admin_users