Update global styles.

public/stylesheets/style.css

@@ -23,6 +23,24 @@ a:active,
   color: #3d8b3d;
 }
 
+.btn {
+  border-radius: 0;
+}
+
+.btn-outline-success {
+  color: #5cb85c;
+  border-color: #5cb85c;
+}
+
+.btn-outline-success:focus,
+.btn-outline-success:hover,
+.btn-outline-success:active,
+.btn-outline-success.active {
+  color: #fff;
+  border-color: #3d8b3d;
+  background-color: #3d8b3d;
+}
+
 .form-check-input {
   margin-top: 3px;
 }
@@ -32,6 +50,11 @@ a:active,
   background-color: #5cb85c;
 }
 
+.form-control,
+.form-select {
+  border-radius: 0 !important;
+}
+
 .form-control:focus,
 .form-select:focus {
   border-color: #5cb85c;
@@ -79,6 +102,8 @@ a:active,
 
 .header .navbar-light .login .dropdown-toggle {
   color: #666;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .header .navbar-light .login .dropdown-toggle.show,
@@ -90,6 +115,8 @@ a:active,
 
 .header .navbar-dark .login .dropdown-toggle {
   color: #fff;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .header .navbar-dark .login .dropdown-toggle.show,
@@ -109,7 +136,7 @@ a:active,
 }
 
 .header .login .avatar {
-  border-radius: 5px;
+  border-radius: 2.5px;
   margin-top: -4px;
   margin-right: 6px;
 }
@@ -126,19 +153,44 @@ a:active,
   font-size: 22px;
 }
 
+.content .nav-tabs .nav-link {
+  color: #6c757d;
+  border-width: 0;
+  border-bottom-width: 2px;
+}
+
+.content .nav-tabs .nav-link:focus,
+.content .nav-tabs .nav-link:hover,
+.content .nav-tabs .nav-link:active {
+  color: #373a3c;
+  border-color: transparent;
+}
+
+.content .nav-tabs .nav-link.active {
+  color: #5cb85c;
+  border-color: #5cb85c;
+}
+
 .topicList a {
   color: #373a3c;
   text-decoration: none;
 }
 
 .topicList .list-group-item {
   word-break: break-all;
-  padding-top: 16px;
-  padding-bottom: 16px;
+  border-radius: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+  background-color: transparent;
+  padding: 24px 0;
+}
+
+.topicList .list-group-item:first-child {
+  border-top-width: 0;
 }
 
 .topicList .avatar {
-  border-radius: 8px;
+  border-radius: 4px;
 }
 
 .topicList a.topicSummary {
@@ -147,12 +199,24 @@ a:active,
   min-width: 0;
 }
 
-.topicList .updateTime {
+.topicList .favorite {
   min-width: 96px;
   text-align: right;
+}
+
+.topicList .favorite .btn svg {
+  margin-top: -2px;
+}
+
+.topicList .updateTime {
+  min-width: 96px;
   white-space: nowrap;
 }
 
+.noTopic {
+  padding: 24px 0;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0 !important;
 }
@@ -172,7 +236,7 @@ a:active,
 
 .profile .avatar,
 .newTopic .avatar {
-  border-radius: 12px;
+  border-radius: 6px;
 }
 
 .profile .form-label,
@@ -216,7 +280,7 @@ a:active,
 }
 
 .topicHeader .card .avatar {
-  border-radius: 8px;
+  border-radius: 4px;
 }
 
 .topicHeader .card-body {
@@ -256,19 +320,35 @@ a:active,
   }
 }
 
+.topicComment .card {
+  border-radius: 0;
+}
+
 .topicComment .card + .card {
-  margin-top: 24px;
+  margin-top: 12px;
 }
 
 .topicComment .card pre {
+  white-space: normal;
+  word-break: break-all;
   margin-bottom: 0;
 }
 
+.topicComment .card-footer {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.topicComment .card-footer .btn-sm {
+  height: 31px;
+}
+
 .commentOwner {
-  line-height: 39px;
+  line-height: 31px;
 }
 
 .commentOwner img {
+  border-radius: 3px;
   margin-top: -4px;
   margin-right: 8px;
 }

src/controllers/user.ts

@@ -221,21 +221,20 @@ export default class UserCtrl {
         return
       }
 
-      const topics = await TopicModel.find({ user: user._id }).sort('-updateTime')
+      const topics = await TopicModel.find({ user: user._id })
+        .populate('user').sort('-updateTime')
       const formatTopics = format(topics)
 
       ctx.status = 200
-      await ctx.render('myTopics', {
+      await ctx.render('index', {
         msg: 'These are all my topics.',
         title: 'My Topics',
         formatTopics,
         user
       })
 
     } catch (err) {
-
       render500(err as Error, ctx)
-
     }
   }
 

src/models/topic.ts

@@ -21,7 +21,7 @@ const TopicSchema = new mongoose.Schema({
     type: Number,
     default: 0,
   },
-  like: {
+  favorite: {
     type: Number,
     default: 0
   },

src/models/user.ts

@@ -1,3 +1,4 @@
+import { Types } from 'mongoose'
 import mongoose from './db.js'
 
 const UserSchema = new mongoose.Schema({
@@ -57,6 +58,10 @@ const UserSchema = new mongoose.Schema({
     default: 1,
     enum: [-1, 0, 1, 2] // Ban, Mute，Normal, Admin
   },
+  favorite: {
+    type: [Types.ObjectId],
+    default: []
+  },
   createTime: {
     type: Date,
     default: Date.now

src/types/comment/index.d.ts

@@ -1,5 +1,3 @@
-import { Types } from 'mongoose'
-
 declare type Comment = {
   _id: string
   content: string

src/types/topic/index.d.ts

@@ -2,7 +2,7 @@ declare type Topic = {
   _id: string
   comment?: number
   content: string
-  like?: number
+  favorite?: number
   status?: number
   title: string
   updateTime: Date

src/types/user/index.d.ts

@@ -1,13 +1,15 @@
 declare type User = {
   _id: string
-  avatar: string
-  bio: string
-  birthday: string
+  avatar?: string
+  bio?: string
+  birthday?: string
   email: string
-  gender: number
+  favorite?: [Types.ObjectId]
+  gender?: number
+  nickname?: string
   password: string
-  phone: number
-  position: string
+  phone?: number
+  position?: string
   username: string
 }
 

src/views/index.html

@@ -1,30 +1,6 @@
 {{extend 'layout.html'}}
 
 {{block 'content'}}
-
-{{include 'tabs.html'}}
-
-{{if formatTopics?.length}}
-<div class="topicList list-group">
-  {{each formatTopics}}
-  <div class="d-flex list-group-item list-group-item-action gap-3">
-    <img src="{{ $value.user.avatar }}" alt="avatar" title="{{ $value.user.nickname }}" width="32" height="32" class="avatar flex-shrink-0">
-    <div class="d-flex w-100 justify-content-between">
-      <a href="/topicDetail/{{ $value._id }}" class="topicSummary">
-        <h5 class="mb-1">{{ $value.title }}</h5>
-        <p class="mb-3 text-muted">{{ $value.content }}</p>
-        <small class="text-muted">
-          {{ $value.comment }} comment{{if $value.comment > 1}}s{{/if}}.
-        </small>
-      </a>
-      <small class="updateTime text-muted">{{ $value.updateTimeStr }}</small>
-    </div>
-  </div>
-  {{/each}}
-</div>
-{{else}}
-<p class="text-muted">
-  Nothing yet... You can initiate a new topic <a href="/topic/initiate">HERE</a>.
-</p>
-{{/if}}
+  {{include 'tabs.html'}}
+  {{include 'topicList.html'}}
 {{/block}}

src/views/myTopics.html

@@ -1,18 +1,22 @@
+<!-- 此文件目前没有用到，待删 -->
+<!-- 此文件目前没有用到，待删 -->
+<!-- 此文件目前没有用到，待删 -->
+
 {{extend 'layout.html'}}
 
 {{block 'content'}}
-
 {{include 'tabs.html'}}
+{{include 'topicList.html'}}
 
-{{if formatTopics?.length}}
+<!-- {{if formatTopics?.length}}
 <div class="topicList list-group">
   {{each formatTopics}}
   <div class="d-flex list-group-item list-group-item-action gap-3">
     <img src="{{ user.avatar }}" alt="avatar" title="{{ user.nickname }}" width="32" height="32" class="avatar flex-shrink-0">
     <div class="d-flex w-100 justify-content-between">
       <a href="/topicDetail/{{ $value._id }}" class="topicSummary">
         <h5 class="mb-1">{{ $value.title }}</h5>
-        <p class="mb-3 text-muted">{{ $value.content }}</p>
+        <p class="mb-4 text-muted">{{ $value.content }}</p>
         <small class="text-muted">
           {{ $value.comment }} comment{{if $value.comment > 1}}s{{/if}}.
         </small>
@@ -26,5 +30,5 @@ <h5 class="mb-1">{{ $value.title }}</h5>
 <p class="text-muted">
   Nothing yet... You can initiate a new topic <a href="/topic/initiate">HERE</a>.
 </p>
-{{/if}}
+{{/if}} -->
 {{/block}}

src/views/tabs.html

@@ -4,7 +4,7 @@
 </div>
 {{/if}}
 
-<ul class="nav nav-tabs mb-3">
+<ul class="nav nav-tabs">
   <li class="nav-item">
     <a
       href="/"

src/views/topicDetail.html

@@ -52,13 +52,13 @@ <h5 class="card-title">{{ topic?.user?.nickname }}</h5>
         <img
           alt="avatar"
           class="avatar"
-          src="{{ topic?.user?.avatar }}"
-          title="{{ topic?.user?.username }}"
+          src="{{ user?.avatar }}"
+          title="{{ user?.username }}"
           width="24"
           height="24"
-        >{{ topic?.user?.nickname }}
+        >{{ user?.nickname }}
       </div>
-      <button class="btn btn-sm btn-dark" type="submit">Post comment</button>
+      <button class="btn btn-sm btn-dark" type="submit">Post Comment</button>
     </div>
   </form>
   {{/if}}