分析Twitter設計稿

--- tags: Front-End --- # 分析Twitter設計稿 ## 頁面資料及Components ### 註冊頁 - /regist * **Views**: Regist.vue * **Components** | Components | Description | |:----------:|:-----------:| | - | - | * **Regist.vue** * 頁面資料 newUser ```json 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 ```json user:{ account: "", name: "", email: "", password: "", passwordConfirm: "" } ``` | Variables | Variable type | Description | |:--------------- |:-------------:|:----------- | | account | String | 帳號 | | name | String | 名稱 | | email | String | 信箱 | | password | String | 密碼 | | passwordConfirm | String | 密碼確認 | --- ### 前台登入頁 - /login * **Views**: Login.vue * **Components** | Components | Description | |:----------:|:-----------:| | - | - | * **Login.vue** * 頁面資料 user ```json 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 ```json user:{ image: "", text: "" } ``` | Variables | Variable type | Description | |:--------- |:-------------:|:------------ | | image | String | 使用者的圖片 | | text | String | 推文內容 | * **MainTweetsCard.vue** * 頁面資料 user ```json 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 ```json 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 ```json 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 ```json replyList:[ { account: "", name: "", image: "", createdAt: "", text:"", } ], ``` | Variables | Variable type | Description | |:--------- |:-------------:|:-------------------------- | | image | String | 關注者的圖片 | | account | String | 使用者或關注者帳號 | | name | String | 關注者名字 | | createdAt | Date | 關注者推文創立時間 | | text | Array | 關注者的回文 | * **FollowingsCard.vue** * followings ```json 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 | 新增推文 | * **NewTweetModal.vue** * newTweet ```json newTweet:{ image: "", text: "", } ``` | Variables | Variable type | Description | |:--------- |:-------------:|:------------ | | image | String | 使用者的圖片 | | text | String | 推文內容 | --- ### 回覆 - /replied * **Views**: Replied.vue * **Components** | Components | Description | | ------------ |:----------- | | RepliedModal | 回文內容 | * **RepliedModal.vue** * newReplied ```json 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 ```json profile:{ name: "", tweetsLength: 0 } ``` | Variables | Variable type | Description | |:------------ |:-------------:|:----------- | | name | String | 使用者姓名 | | tweetsLength | Int | 推文數量 | * **UserProfileInfo.vue** * 頁面資料 profile ```json 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 ```json 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 ```json 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 ```json profile:{ name: "", tweetsLength: 0 } ``` | Variables | Variable type | Description | |:------------ |:-------------:|:----------- | | name | String | 使用者姓名 | | tweetsLength | Int | 推文數量 | * **UserProfileInfo.vue** * 頁面資料 profile ```json 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 ```json 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 ```json 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 頁面資料 ```json user:{ coverImage: "", image: "", name: "", intro: "", } ``` | Variables | Variable type | Description | |:---------- |:-------------:|:-------------- | | image | String | 使用者的圖片 | | coverImage | String | 使用者封面照片 | | name | String | 使用者名字 | | intro | String | 使用者自我介紹 | --- ### user 的跟隨者清單 - /user/self/follower * **Views**: UserFollowers.vue * **Components** | Components | Description | |:----------------- |:-------------- | | SideNavBar | 側主選單 | | UserFollowersCard | 使用者跟隨清單 | | FollowingsCard | 跟隨人清單 | * **UserFollowers.vue** * 頁面資料 UserFollowers ```json UserFollowers:{ name: "", commentsLength: 0 } ``` | Variables | Variable type | Description | |:-------------- |:-------------:|:----------- | | name | String | 使用者姓名 | | commentsLength | Int | 回文數量 | * **UserFollowersCard.vue** * 頁面資料 UserFollowers ```json UserFollowers:[ { account: "", name: "", image: "", intro: "", isFollowed: false } ] ``` | Variables | Variable type | Description | |:---------- |:-------------:|:------------ | | image | String | 關注者的圖片 | | account | String | 關注者帳號 | | name | String | 關注者名字 | | intro | String | 關注者自介 | | isFollowed | Boolean | 是否關注 | * **FollowingsCard.vue** * followings ```json 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 ```json UserFollowers:{ name: "", tweetsLength: 0 } ``` | Variables | Variable type | Description | |:------------ |:-------------:|:----------- | | name | String | 使用者姓名 | | tweetsLength | Int | 推文數量 | * **UserFollowingsCard.vue** * 頁面資料 UserFollowings ```json UserFollowings:[ { account: "", name: "", image: "", intro: "", isFollowed: true } ] ``` | Variables | Variable type | Description | |:---------- |:-------------:|:------------ | | image | String | 關注者的圖片 | | account | String | 關注者帳號 | | name | String | 關注者名字 | | intro | String | 關注者自介 | | isFollowed | Boolean | 是否關注 | * **FollowingsCard.vue** * followings ```json 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 ```json UserOther:{ name: "", tweetsLength: 0 } ``` | Variables | Variable type | Description | |:------------ |:-------------:|:----------- | | name | String | 姓名 | | tweetsLength | Int | 推文數量 | * **UserOtherInfo.vue** * 頁面資料 UserOtherInfo ```json 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 ```json 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 ```json 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 ```json UserOther:{ name: "", tweetsLength: 0 } ``` | Variables | Variable type | Description | |:------------ |:-------------:|:----------- | | name | String | 姓名 | | tweetsLength | Int | 推文數量 | * **UserOtherInfo.vue** * 頁面資料 UserOtherInfo ```json 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 ```json 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 ```json 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 | |:----------:|:-----------:| | - | - | * **AdminLogin.vue** * 頁面資料 admin ```json admin:{ account: "", password: "", } ``` | Variables | Variable type | Description | |:--------------- |:-------------:|:------------ | | account | String | 登入帳號 | | password | String | 登入密碼 | --- ### 後台推文清單 - /admin_main * **Views**: AdminMain.vue * **Components** | Components | Description | |:--------------- |:------------ | | SideNavBar | 管理側主選單 | | AdminTweetsList | 管理推文清單 | * **AdminTweetsList.vue** * 頁面資料 user ```json 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 ```json 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.