pages

src/main/webapp/assets/css/feeds.css

@@ -214,7 +214,6 @@
   display: inline-block;
   padding: 6px 10px 6px 26px;
   padding-right: 0;
-  color: #888;
 }
 
 .feeds-list .actions li>a:hover,
@@ -226,12 +225,31 @@
   left: 6px;
 }
 
+.feeds-pages {
+  margin-top: 10px;
+}
+
+.feeds-pages .float-left>p {
+  margin: 0;
+  margin-top: 9px;
+}
+
+.feeds-pages .pagination {
+  margin-bottom: 0;
+}
+
 .comments {
   margin-left: 56px;
   margin-top: 4px;
   margin-bottom: 10px;
 }
 
+.comments .comment-reply {
+  background-color: #f5f5f5;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
 .comments .rich-input {
   margin-top: 0;
 }
@@ -244,11 +262,10 @@
   border: 1px solid #eee;
   border-radius: 2px;
   background-color: #fff;
-  height: 40px;
+  height: 39px;
   color: #aaa;
   padding: 9px 10px;
   cursor: text;
-  margin-bottom: 15px;
 }
 
 .comments .reply-mask:hover {
@@ -257,7 +274,9 @@
 
 .comment-list>div {
   padding: 8px 0;
-  border-bottom: 1px dotted #ddd;
+  border-bottom: 1px dotted #eee;
+  margin: 0;
+  margin-top: 5px;
 }
 
 .comment-list .feeds>.content .rich {
@@ -290,6 +309,10 @@
   right: 0;
 }
 
+.comments .feeds-pages .float-left>p {
+  margin-top: 3px;
+}
+
 .side-wrapper {
   position: sticky;
   top: 60px;
@@ -300,7 +323,7 @@
 .fixed-icon {
   position: relative;
   padding-left: 17px;
-  color: #888;
+  color: #777;
 }
 
 .fixed-icon>.zmdi {

src/main/webapp/assets/css/rb-base.css

@@ -5541,6 +5541,11 @@ input[type=submit].btn-block {
 
 .page-link .icon {
     font-size: 1.2rem;
+    transform: translateY(1px);
+}
+
+.pagination-sm .page-link .icon {
+    transform: translateY(2px);
 }
 
 .page-link:hover {

src/main/webapp/assets/css/rb-page.css

@@ -100,6 +100,10 @@ html.admin .admin-show.row {
     transform: rotate(45deg);
 }
 
+.pagination.pagination-sm .page-link {
+    min-width: 28px;
+}
+
 .text-disabled {
     color: #aaa;
     font-style: italic;
@@ -194,6 +198,10 @@ a.btn {
     text-decoration: none !important;
 }
 
+.btn.btn-link.btn-sm {
+    line-height: 30px;
+}
+
 .btn.btn-link:hover {
     color: #0d5bdd !important;
 }

src/main/webapp/assets/js/feeds/feeds-list.jsx

@@ -30,7 +30,7 @@ class FeedsList extends React.Component {
               <div className="dropdown-menu dropdown-menu-right">
                 <a className="dropdown-item" data-sort="newer" onClick={this._sortFeeds}>最近发布</a>
                 <a className="dropdown-item" data-sort="modified" onClick={this._sortFeeds}>最近修改</a>
-                <a className="dropdown-item" data-sort="older" onClick={this._sortFeeds}>较早发布</a>
+                <a className="dropdown-item" data-sort="older" onClick={this._sortFeeds}>最早发布</a>
               </div>
             </div>
           </span>
@@ -84,18 +84,7 @@ class FeedsList extends React.Component {
           </div>
         })}
       </div>
-      <div className="mt-2">
-        <div className="float-left">
-          <p className="m-0 text-muted mt-1">共 0 条数据</p>
-        </div>
-        <div className="float-right">
-          <ul className="pagination mb-0">
-            <li className="paginate_button page-item active"><a className="page-link">1</a></li>
-            <li className="paginate_button page-item"><a className="page-link">2</a></li>
-            <li className="paginate_button page-item"><a className="page-link">3</a></li>
-          </ul>
-        </div>
-      </div>
+      <Pagination rowsTotal={1} call={this.gotoPage} />
     </div>)
   }
 
@@ -106,7 +95,7 @@ class FeedsList extends React.Component {
    */
   fetchFeeds(filter) {
     this._lastFilter = filter = filter || this._lastFilter
-    $.post(`${rb.baseUrl}/feeds/feeds-list?pageNo=${this.state.page}&sort=${this.state.sort}`, JSON.stringify(filter), (res) => {
+    $.post(`${rb.baseUrl}/feeds/feeds-list?pageNo=${this.state.pageNo}&sort=${this.state.sort}`, JSON.stringify(filter), (res) => {
       this.setState({ list: res.data })
     })
   }
@@ -138,6 +127,10 @@ class FeedsList extends React.Component {
     })
     this.setState({ list: list })
   }
+
+  gotoPage = (pageNo) => {
+    this.setState({ pageNo: pageNo }, () => this.fetchFeeds())
+  }
 }
 
 // ~ 评论
@@ -145,7 +138,7 @@ class FeedsComments extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = { ...props, openReply: false, page: 1 }
+    this.state = { ...props, openReply: false, pageNo: 1 }
   }
 
   render() {
@@ -188,12 +181,13 @@ class FeedsComments extends React.Component {
           </div>
         })}
       </div>
+      <Pagination rowsTotal={1} call={this.gotoPage} comment={true} />
     </div>)
   }
 
   componentDidMount = () => this._fetchComments()
   _fetchComments() {
-    $.get(`${rb.baseUrl}/feeds/comments-list?feeds=${this.props.feeds}&pageNo=${this.state.page}`, (res) => {
+    $.get(`${rb.baseUrl}/feeds/comments-list?feeds=${this.props.feeds}&pageNo=${this.state.pageNo}`, (res) => {
       this.setState({ comments: res.data })
     })
   }
@@ -215,4 +209,58 @@ class FeedsComments extends React.Component {
       this._fetchComments()
     })
   }
+
+  gotoPage = (pageNo) => {
+    this.setState({ pageNo: pageNo }, () => this._fetchComments())
+  }
+}
+
+// ~ 分页
+class Pagination extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = { ...props, pageSize: props.pageSize || 40, pageNo: props.pageNo || 1 }
+  }
+
+  render() {
+    if (!this.state.rowsTotal) return null
+
+    this.__pageTotal = Math.ceil(this.state.rowsTotal / this.state.pageSize)
+    if (this.__pageTotal <= 0) this.__pageTotal = 1
+    let pages = this.__pageTotal <= 1 ? [1] : $pages(this.__pageTotal, this.state.pageNo)
+
+    return <div className="feeds-pages">
+      <div className="float-left">
+        <p className="text-muted">共 {this.state.rowsTotal} 条数据</p>
+      </div>
+      <div className="float-right">
+        <ul className={`pagination ${this.props.comment && 'pagination-sm'}`}>
+          {this.state.pageNo > 1
+            && <li className="paginate_button page-item"><a className="page-link" onClick={this._prev}><span className="icon zmdi zmdi-chevron-left"></span></a></li>}
+          {pages.map((item) => {
+            if (item === '.') return <li key={'page-' + item} className="paginate_button page-item disabled"><a className="page-link">...</a></li>
+            else return <li key={'page-' + item} className={'paginate_button page-item ' + (this.state.pageNo === item && 'active')}><a className="page-link" onClick={() => this._goto(item)}>{item}</a></li>
+          })}
+          {this.state.pageNo !== this.__pageTotal
+            && <li className="paginate_button page-item"><a className="page-link" onClick={this._next}><span className="icon zmdi zmdi-chevron-right"></span></a></li>}
+        </ul>
+      </div>
+      <div className="clearfix"></div>
+    </div>
+  }
+
+  _prev = () => {
+    if (this.state.pageNo === 1) return
+    this._goto(this.state.pageNo - 1)
+  }
+  _next = () => {
+    if (this.state.pageNo === this.__pageTotal) return
+    this._goto(this.state.pageNo + 1)
+  }
+  _goto = (pageNo) => {
+    this.setState({ pageNo: pageNo }, () => {
+      typeof this.props.call === 'function' && this.props.call(pageNo)
+    })
+  }
 }