From 2bd93602f6dcb56b20aafd02f3822e471f6e8aa2 Mon Sep 17 00:00:00 2001
From: xiongxiaoyang <1179705413@qq.com>
Date: Tue, 20 Oct 2026 17:26:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BD=9C=E5=AE=B6?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/static/css/author.css  |  87 ++++++++
 .../resources/templates/author/index.html     | 178 ++++++---------
 .../templates/author/index_list.html          | 209 +++++++-----------
 3 files changed, 228 insertions(+), 246 deletions(-)
 create mode 100644 novel-front/src/main/resources/static/css/author.css

diff --git a/novel-front/src/main/resources/static/css/author.css b/novel-front/src/main/resources/static/css/author.css
new file mode 100644
index 0000000..12e7a0d
--- /dev/null
+++ b/novel-front/src/main/resources/static/css/author.css
@@ -0,0 +1,87 @@
+@charset "utf-8";
+/* ===================== 作家专区公共样式（小说管理 / 章节管理） ===================== */
+/* 主题色 #3eaf7c；深化 #2c8a61；浅化背景 #f2faf6；边框 #e6f0ea；投影 rgba(62,175,124,.12)；正文灰 #5c6b64 */
+
+/* ---------- 区块标题 ---------- */
+.author_zone .my_bookshelf .title h2 { font-size:17px; color:#333; font-weight:600; padding-left:10px; border-left:4px solid #3eaf7c }
+.author_zone .my_bookshelf .title .sub { font-size:13px; color:#5c6b64; font-weight:normal; margin-left:12px }
+
+/* ---------- 按钮 ---------- */
+.author_zone .btn_main, .author_zone .btn_ghost { display:inline-block; border-radius:20px; font-size:13px; line-height:1; text-decoration:none; vertical-align:middle; box-sizing:border-box; transition:all .2s }
+.author_zone .btn_main { padding:9px 22px; background:#3eaf7c; border:1px solid #3eaf7c; color:#fff }
+.author_zone .btn_main:hover { background:#2c8a61; border-color:#2c8a61; color:#fff }
+.author_zone .btn_ghost { padding:8px 20px; background:#fff; border:1px solid #3eaf7c; color:#2c8a61 }
+.author_zone .btn_ghost:hover { background:#f2faf6; border-color:#3eaf7c; color:#2c8a61 }
+.author_zone .btn_sm { padding:5px 13px; font-size:12px }
+.author_zone .btn_del { border-color:#f56c6c; color:#f56c6c }
+.author_zone .btn_del:hover { background:#fef0f0; border-color:#f56c6c; color:#f56c6c }
+
+/* ---------- 表格卡片 ---------- */
+.author_zone .updateTable { width:100%; border:1px solid #e6f0ea; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(62,175,124,.08); margin-top:15px }
+.author_zone .updateTable table { margin-bottom:0; table-layout:fixed }
+.author_zone .updateTable th { background:#f2faf6; color:#2c8a61; font-size:13px; height:44px; line-height:44px; border-top:0; white-space:nowrap; overflow:hidden }
+.author_zone .updateTable td { border-top:1px solid #eef4f0; color:#5c6b64; font-size:13px; height:52px; line-height:52px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
+.author_zone .updateTable tr:nth-child(2n) td { background:#fbfdfc }
+.author_zone .updateTable tbody tr:hover td { background:#f2faf6 }
+.author_zone .updateTable th.name { width:auto }
+.author_zone .updateTable .goread { padding:0 8px }
+.author_zone .pageBox { padding:14px 10px 4px; border-top:1px solid #eef4f0 }
+.author_zone .layui-laypage a:hover { color:#3eaf7c }
+
+/* ---------- 列宽控制（table-layout:fixed 以表头宽度为准） ---------- */
+.author_zone .updateTable th.col_idx { width:9% }
+.author_zone .updateTable th.col_visit { width:10% }
+.author_zone .updateTable th.col_buy { width:10% }
+.author_zone .updateTable th.col_time { width:12% }
+.author_zone .updateTable th.col_word { width:10% }
+.author_zone .updateTable th.col_status { width:11% }
+.author_zone .updateTable th.col_vip { width:10% }
+.author_zone .updateTable th.col_opt { width:16% }
+
+/* ---------- 时间单元格：日期/时刻两行 ---------- */
+.author_zone .updateTable td.time_cell { line-height:1.5; padding:8px 0; font-size:12px; color:#7d8a83 }
+
+/* ---------- 操作单元格：文字链接竖排 ---------- */
+.author_zone .updateTable td.opt { padding:6px 0; line-height:1 }
+.author_zone .updateTable td.opt a { display:block; height:auto; line-height:23px; font-size:12px; color:#2c8a61; overflow:visible }
+.author_zone .updateTable td.opt a:hover { color:#3eaf7c }
+.author_zone .updateTable td.opt a.opt_del { color:#f56c6c }
+.author_zone .updateTable td.opt a.opt_del:hover { color:#e05a5a }
+
+/* ---------- 状态徽章 ---------- */
+.author_zone .tag { display:inline-block; padding:3px 10px; border-radius:10px; font-size:12px; line-height:1; border:1px solid transparent }
+.author_zone .tag_serial { background:#f2faf6; color:#2c8a61; border-color:#c8ead9 }
+.author_zone .tag_done { background:#f5f5f5; color:#8a8a8a; border-color:#e5e5e5 }
+.author_zone .tag_vip { background:#fdf6ec; color:#e6a23c; border-color:#f5e1c0 }
+.author_zone .tag_free { background:#f2faf6; color:#2c8a61; border-color:#c8ead9 }
+
+/* ---------- 数字强调 ---------- */
+.author_zone .num { color:#333; font-weight:600 }
+
+/* ---------- 作品单元格（封面+信息） ---------- */
+.author_zone .book_cell { display:flex; align-items:center; text-align:left; white-space:normal }
+.author_zone .cover_wrap { position:relative; width:60px; height:80px; flex:none; margin-right:12px; border-radius:6px; overflow:hidden; background:#f6f6f6 }
+.author_zone .cover_wrap img { width:100%; height:100%; display:block; object-fit:cover }
+.author_zone .cover_wrap input[type="file"] { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3 }
+.author_zone .cover_mask { position:absolute; left:0; bottom:0; width:100%; padding:4px 0; text-align:center; font-size:12px; color:#fff; background:rgba(0,0,0,.45); z-index:2; opacity:0; transition:opacity .2s }
+.author_zone .cover_wrap:hover .cover_mask { opacity:1 }
+.author_zone .book_info { overflow:hidden; min-width:0; flex:1 }
+.author_zone .book_info .book_name { display:block; height:auto; line-height:1.4; font-size:14px; color:#333; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
+.author_zone .book_info .book_name:hover { color:#3eaf7c }
+.author_zone .book_info .book_cat { font-size:12px; color:#99a59e; margin-top:4px; line-height:1 }
+
+/* ---------- 章节序号 ---------- */
+.author_zone .idx_no { display:inline-block; min-width:28px; padding:2px 6px; border-radius:10px; background:#f2faf6; color:#2c8a61; font-size:12px; text-align:center }
+
+/* ---------- 空状态 ---------- */
+.author_zone .empty_box { padding:80px 0 100px; text-align:center; color:#99a59e }
+.author_zone .empty_box svg { opacity:.6 }
+.author_zone .empty_box p { margin:18px 0 22px; font-size:14px }
+
+/* ---------- 章节页顶部作品信息栏 ---------- */
+.author_zone .book_brief { display:none; margin-top:20px; padding:16px 20px; border-radius:10px; background:linear-gradient(135deg, #f2faf6, #e9f6ef); border:1px solid #e6f0ea; overflow:hidden }
+.author_zone .book_brief img { width:48px; height:64px; border-radius:6px; object-fit:cover; float:left; margin-right:14px; background:#fff }
+.author_zone .book_brief .back_link { float:right; font-size:13px; color:#2c8a61 }
+.author_zone .book_brief .back_link:hover { text-decoration:underline }
+.author_zone .book_brief h3 { font-size:16px; color:#2c8a61; font-weight:600; line-height:1.4 }
+.author_zone .book_brief p { font-size:12px; color:#5c6b64; margin-top:8px }
diff --git a/novel-front/src/main/resources/templates/author/index.html b/novel-front/src/main/resources/templates/author/index.html
index 2fa1422..5ff7543 100644
--- a/novel-front/src/main/resources/templates/author/index.html
+++ b/novel-front/src/main/resources/templates/author/index.html
@@ -8,27 +8,10 @@
         <title>作家管理系统-小说精品屋</title>
         <link rel="stylesheet" href="/css/base.css?v=1"/>
         <link rel="stylesheet" href="/css/user.css"/>
-        <style type="text/css">
-            .redBtn {
-                padding: 5px;
-                border-radius: 20px;
-                border: 1px solid #3eaf7c;
-                background: #3eaf7c;
-                color: #fff;
-            }
-
-            a.redBtn:hover {
-
-                color: #fff;
-            }
-
-            th.name, td.name {
-                text-align: center;
-            }
-        </style>
+        <link rel="stylesheet" href="/css/author.css"/>
     </head>
 </head>
-<body class="">
+<body class="author_zone">
 
 <div class="header">
     <div class="mainNav" id="mainNav">
@@ -54,14 +37,18 @@
         </div>
         <div class="my_r">
             <div id="noContentDiv">
-                <div class="tc" style="margin-top: 200px"><a href="/author/book_add.html" class="btn_red">创建作品</a>
+                <div class="empty_box">
+                    <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#3eaf7c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 7.5C10.5 6 8 5.4 4.5 5.7v12C8 17.5 10.5 18 12 19.5M12 7.5c1.5-1.5 4-2.1 7.5-1.8v12c-3.5-.2-6 .3-7.5 1.8"/>
+                    </svg>
+                    <p>还没有作品，快去创建一部吧～</p>
+                    <a href="/author/book_add.html" class="btn_main">创建作品</a>
                 </div>
-
             </div>
             <div class="my_bookshelf" id="hasContentDiv" style="display: none">
                 <div class="title cf">
                     <h2 class="fl">小说列表</h2>
-                    <div class="fr"><a href="/author/book_add.html" class="btn_red">发布小说</a></div>
+                    <div class="fr"><a href="/author/book_add.html" class="btn_main">＋ 发布小说</a></div>
                 </div>
 
                 <div id="divData" class="updateTable">
@@ -69,27 +56,24 @@
                         <thead>
                         <tr>
                             <th class="name">
-                                书名
+                                作品
                             </th>
-                            <th class="goread">
-                                分类
-                            </th>
-                            <th class="goread">
+                            <th class="goread col_visit">
                                 点击量
                             </th>
-                            <th class="goread">
-                                昨日订阅数
+                            <th class="goread col_buy">
+                                昨日订阅
                             </th>
-                            <th class="goread">
+                            <th class="goread col_time">
                                 更新时间
                             </th>
-                            <th class="goread">
+                            <th class="goread col_word">
                                 总字数
                             </th>
-                            <th class="goread">
+                            <th class="goread col_status">
                                 状态
                             </th>
-                            <th class="goread">
+                            <th class="goread col_opt">
                                 操作
                             </th>
                         </tr>
@@ -102,37 +86,6 @@
                     <div class="pageBox cf" id="shellPage">
                     </div>
                 </div>
-                <!--<div id="divData" class="updateTable">
-                    <table cellpadding="0" cellspacing="0">
-                        <thead>
-                        <tr>
-
-                            <th class="name">
-                                爬虫源（已开启的爬虫源）
-                            </th>
-                            <th class="chapter">
-                                成功爬取数量（websocket实现）
-                            </th>
-                            <th class="time">
-                            目标爬取数量
-                            </th>
-                            <th class="goread">
-                                状态（正在运行，已停止）（一次只能运行一个爬虫源）
-                            </th>
-                            <th class="goread">
-                                操作（启动，停止）
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody id="bookShelfList">
-
-
-
-                        </tbody>
-                    </table>
-                    <div class="pageBox cf" id="shellPage">
-                    </div>
-                </div>-->
             </div>
         </div>
     </div>
@@ -151,7 +104,27 @@
 <script language="javascript" type="text/javascript">
     var coverUpdateInterval;
 
-    search(1, 5);
+    search(1, 10);
+
+    //数字缩写：超过10万用“万”作单位，避免数字过长撑宽列
+    function fmtNum(n) {
+        var num = Number(n || 0);
+        if (isNaN(num)) {
+            num = 0;
+        }
+        return num >= 100000 ? (num / 10000).toFixed(1).replace(/\.0$/, '') + '万' : String(num);
+    }
+
+    //时间两行展示：日期 + 时刻
+    function fmtTime(t) {
+        var d = new Date(Date.parse(t));
+        return d.Format('yyyy-MM-dd') + '<br>' + d.Format('hh:mm');
+    }
+
+    //HTML转义，防止书名/章节名破坏表格结构
+    function escapeHtml(str) {
+        return String(str == null ? '' : str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
 
     function search(curr, limit) {
         clearInterval(coverUpdateInterval);
@@ -188,43 +161,32 @@
                         var bookListHtml = "";
                         for (var i = 0; i < bookList.length; i++) {
                             var book = bookList[i];
-                            bookListHtml += (" <tr class=\"book_list\" vals=\"291\">\n" +
-                                /* "                            <td class=\"style bookclass\">\n" +
-                                 "                                ["+(i+1)+"]\n" +
-                                 "                            </td>\n" +*/
-
-                                "                            <td style=\"position: relative\" class=\"name\">\n" +
-                                "<input class=\"opacity\" onchange=\"picChange('" + book.id + "')\"\n" +
-                                "                                           type=\"file\" id=\"file" + book.id + "\" name=\"file\"\n" +
-                                "                                           title=\"点击上传图片\"\n" +
-                                "                                           style=\"z-index: 100;cursor: pointer;left: 30px; top: 0px; width: 60px; height: 80px; opacity: 0; position: absolute;  \"\n" +
-                                "                                    />" +
-                                "<img id=\"cover" + book.id + "\" width='50' height='70' src='" + book.picUrl + "'/><br/>" + "                                <a target='_blank' href='/book/" + book.id + ".html'>" + book.bookName + "</a></td>\n" +
-                                "                            <td class=\"goread\" >"
-                                + book.catName + "</td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + book.visitCount + "</td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + book.yesterdayBuy + "</td>\n" +
-
-                                "                            <td class=\"goread\">\n" +
-                                "                                " + new Date(Date.parse(book.lastIndexUpdateTime ? book.lastIndexUpdateTime : book.updateTime)).Format("yyyy-MM-dd hh:mm") + "更新\n" +
-                                "                            </td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + book.wordCount + "</td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + (book.bookStatus == 0 ? "连载中" : "已完结") + "</td>\n" +
-
-                                " <td class=\"goread\" id='opt" + book.id + "'>" +
-                                "<div><a target='_blank' class='redBtn' href='/author/index_list.html?bookId=" + book.id + "'>章节管理  </a></div>" +
-                                "<div><a class='redBtn' href='/author/ai_assistant.html?bookId=" + book.id + "'>AI创作  </a></div>" +
-                                "<div><a target='_blank' href='/author/author_income_detail.html?bookId=" + book.id + "'>薪酬查询  </a></div>" +
-                                (book.bookStatus == 0 ? ("<div><a   href='javascript:finishBook(\"" + book.id + "\")'>设为完结  </a></div>") : "") +
-                                "</td>                     </tr>");
+                            var updTime = fmtTime(book.lastIndexUpdateTime ? book.lastIndexUpdateTime : book.updateTime);
+                            bookListHtml += '<tr class="book_list">'
+                                + '<td class="name">'
+                                + '  <div class="book_cell">'
+                                + '    <div class="cover_wrap">'
+                                + '      <input type="file" id="file' + book.id + '" name="file" title="点击更换封面" onchange="picChange(\'' + book.id + '\')" />'
+                                + '      <img id="cover' + book.id + '" src="' + book.picUrl + '" alt="封面"/>'
+                                + '      <span class="cover_mask">更换封面</span>'
+                                + '    </div>'
+                                + '    <div class="book_info">'
+                                + '      <a class="book_name" target="_blank" href="/book/' + book.id + '.html" title="' + escapeHtml(book.bookName) + '">' + escapeHtml(book.bookName) + '</a>'
+                                + '      <p class="book_cat">' + escapeHtml(book.catName || '') + '</p>'
+                                + '    </div>'
+                                + '  </div>'
+                                + '</td>'
+                                + '<td class="goread"><span class="num">' + fmtNum(book.visitCount) + '</span></td>'
+                                + '<td class="goread"><span class="num">' + fmtNum(book.yesterdayBuy) + '</span></td>'
+                                + '<td class="goread time_cell">' + updTime + '</td>'
+                                + '<td class="goread"><span class="num">' + fmtNum(book.wordCount) + '</span></td>'
+                                + '<td class="goread">' + (book.bookStatus == 0 ? '<span class="tag tag_serial">连载中</span>' : '<span class="tag tag_done">已完结</span>') + '</td>'
+                                + '<td class="goread opt" id="opt' + book.id + '">'
+                                + '<a target="_blank" href="/author/index_list.html?bookId=' + book.id + '">章节管理</a>'
+                                + '<a href="/author/ai_assistant.html?bookId=' + book.id + '">AI创作</a>'
+                                + '<a target="_blank" href="/author/author_income_detail.html?bookId=' + book.id + '">薪酬查询</a>'
+                                + (book.bookStatus == 0 ? '<a class="opt_del" href="javascript:finishBook(\'' + book.id + '\')">设为完结</a>' : '')
+                                + '</td></tr>';
                         }
                         $("#bookList").html(bookListHtml);
 
@@ -234,22 +196,14 @@
                             //执行一个laypage实例
                             laypage.render({
                                 elem: 'shellPage' //注意，这里的 test1 是 ID，不用加 # 号
-                                , count: data.data.total //数据总数，从服务端得到,
+                                , count: data.data.total //数据总数，从服务端得到
                                 , curr: data.data.pageNum
                                 , limit: data.data.pageSize
+                                , theme: '#3eaf7c'
                                 , jump: function (obj, first) {
-
-
-                                    //obj包含了当前分页的所有参数，比如：
-                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
-                                    console.log(obj.limit); //得到每页显示的条数
-
-
                                     //首次不执行
                                     if (!first) {
                                         search(obj.curr, obj.limit);
-                                    } else {
-
                                     }
                                 }
                             });
diff --git a/novel-front/src/main/resources/templates/author/index_list.html b/novel-front/src/main/resources/templates/author/index_list.html
index 8c8884c..089eab0 100644
--- a/novel-front/src/main/resources/templates/author/index_list.html
+++ b/novel-front/src/main/resources/templates/author/index_list.html
@@ -8,23 +8,10 @@
         <title>作家管理系统-小说精品屋</title>
         <link rel="stylesheet" href="/css/base.css?v=1"/>
         <link rel="stylesheet" href="/css/user.css"/>
-        <style type="text/css">
-            .redBtn {
-                padding: 5px;
-                border-radius: 20px;
-                border: 1px solid #3eaf7c;
-                background: #3eaf7c;
-                color: #fff;
-            }
-
-            a.redBtn:hover {
-
-                color: #fff;
-            }
-        </style>
+        <link rel="stylesheet" href="/css/author.css"/>
     </head>
 </head>
-<body class="">
+<body class="author_zone">
 
 <div class="header">
     <div class="mainNav" id="mainNav">
@@ -49,34 +36,45 @@
 
         </div>
         <div class="my_r">
+            <div class="book_brief cf" id="bookBrief">
+                <a href="/author/index.html" class="back_link">← 返回小说列表</a>
+                <img id="briefCover" src="" alt="封面"/>
+                <h3 id="briefName"></h3>
+                <p id="briefSub"></p>
+            </div>
             <div id="noContentDiv">
-                <div class="tc" style="margin-top: 200px"><a href="javascript:addContent()" class="btn_red">新建章节</a>
+                <div class="empty_box">
+                    <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#3eaf7c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M8 4h9a2 2 0 0 1 2 2v13l-3-2-3 2-3-2-3 2V6a2 2 0 0 1 2-2z"/>
+                        <path d="M9.5 9h6M9.5 12.5h4"/>
+                    </svg>
+                    <p>还没有章节，从第一章开始创作吧～</p>
+                    <a href="javascript:addContent()" class="btn_main">新建章节</a>
                 </div>
-
             </div>
             <div class="my_bookshelf" id="hasContentDiv" style="display: none">
                 <div class="title cf">
-                    <h2 class="fl">章节列表</h2>
-                    <div class="fr"><a href="javascript:addContent()" class="btn_red">新建章节</a></div>
+                    <h2 class="fl">章节列表<span class="sub" id="indexTotal"></span></h2>
+                    <div class="fr"><a href="javascript:addContent()" class="btn_main">＋ 新建章节</a></div>
                 </div>
 
                 <div id="divData" class="updateTable">
                     <table cellpadding="0" cellspacing="0">
                         <thead>
                         <tr>
-                            <!-- <th class="style">
-                                 序号
-                             </th>-->
+                            <th class="goread col_idx">
+                                序号
+                            </th>
                             <th class="name">
                                 章节名
                             </th>
-                            <th class="goread">
+                            <th class="goread col_time">
                                 更新时间
                             </th>
-                            <th class="goread">
+                            <th class="goread col_vip">
                                 是否收费
                             </th>
-                            <th class="goread">
+                            <th class="goread col_opt">
                                 操作
                             </th>
                         </tr>
@@ -89,37 +87,6 @@
                     <div class="pageBox cf" id="shellPage">
                     </div>
                 </div>
-                <!--<div id="divData" class="updateTable">
-                    <table cellpadding="0" cellspacing="0">
-                        <thead>
-                        <tr>
-
-                            <th class="name">
-                                爬虫源（已开启的爬虫源）
-                            </th>
-                            <th class="chapter">
-                                成功爬取数量（websocket实现）
-                            </th>
-                            <th class="time">
-                            目标爬取数量
-                            </th>
-                            <th class="goread">
-                                状态（正在运行，已停止）（一次只能运行一个爬虫源）
-                            </th>
-                            <th class="goread">
-                                操作（启动，停止）
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody id="bookShelfList">
-
-
-
-                        </tbody>
-                    </table>
-                    <div class="pageBox cf" id="shellPage">
-                    </div>
-                </div>-->
             </div>
         </div>
     </div>
@@ -140,7 +107,45 @@
 
     var indexCount = 0;
 
-    search(1, 5);
+    //HTML转义，防止章节名破坏表格结构
+    function escapeHtml(str) {
+        return String(str == null ? '' : str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    //时间两行展示：日期 + 时刻
+    function fmtTime(t) {
+        var d = new Date(Date.parse(t));
+        return d.Format('yyyy-MM-dd') + '<br>' + d.Format('hh:mm');
+    }
+
+    //加载顶部作品信息栏
+    function loadBookBrief() {
+        if (!bookId) {
+            return;
+        }
+        $.ajax({
+            type: "get",
+            url: "/book/queryBookDetail/" + bookId,
+            data: {},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200 && data.data) {
+                    var book = data.data;
+                    $("#briefCover").attr("src", book.picUrl);
+                    $("#briefName").text(book.bookName);
+                    var sub = (book.catName ? book.catName + ' · ' : '')
+                        + (book.bookStatus == 0 ? '连载中' : '已完结')
+                        + ' · 已发布 ' + (data.data.wordCount || 0) + ' 字';
+                    $("#briefSub").text(sub);
+                    $("#bookBrief").show();
+                }
+            }
+        });
+    }
+
+    loadBookBrief();
+
+    search(1, 20);
 
     function search(curr, limit) {
 
@@ -153,32 +158,22 @@
                 if (data.code == 200) {
                     var bookList = data.data.list;
                     if (bookList.length > 0) {
-                        indexCount = bookList.length;
+                        indexCount = data.data.total;
+                        $("#indexTotal").text('共 ' + data.data.total + ' 章');
                         $("#hasContentDiv").css("display", "block");
                         $("#noContentDiv").css("display", "none");
                         var bookListHtml = "";
                         for (var i = 0; i < bookList.length; i++) {
                             var book = bookList[i];
-                            bookListHtml += (" <tr class=\"book_list\" vals=\"291\">\n" +
-                                /*  "                            <td class=\"style bookclass\">\n" +
-                                  "                                ["+(i+1)+"]\n" +
-                                  "                            </td>\n" +*/
-
-                                "                            <td id='name" + book.id + "' class=\"name\">\n" +
-                                "                                " + book.indexName + "</td>\n" +
-
-
-                                "                            <td class=\"goread\">\n" +
-                                "                                " + new Date(Date.parse(book.updateTime)).Format("yyyy-MM-dd hh:mm") + "<br/>更新\n" +
-                                "                            </td>\n" +
-
-                                "                            <td class=\"goread\" valsc=\"291|2037554|1\">"
-                                + (book.isVip == 1 ? '收费' : '免费') + "</td>\n" +
-
-                                " <td class=\"goread\" id='opt" + book.id + "'>" +
-                                "<a  class='redBtn' href='javascript:updateIndex(\"" + book.id + "\"," + book.isVip + ")'>修改  </a><br/>" +
-                                "<a  href='javascript:deleteIndex(\"" + book.id + "\")'>删除  </a><br/>" +
-                                "</td>                     </tr>");
+                            bookListHtml += '<tr class="book_list">'
+                                + '<td class="goread"><span class="idx_no">' + book.indexNum + '</span></td>'
+                                + '<td class="name" id="name' + book.id + '" title="' + escapeHtml(book.indexName) + '">' + escapeHtml(book.indexName) + '</td>'
+                                + '<td class="goread time_cell">' + fmtTime(book.updateTime) + '</td>'
+                                + '<td class="goread">' + (book.isVip == 1 ? '<span class="tag tag_vip">收费</span>' : '<span class="tag tag_free">免费</span>') + '</td>'
+                                + '<td class="goread opt" id="opt' + book.id + '">'
+                                + '<a href="javascript:updateIndex(\'' + book.id + '\',' + book.isVip + ')">修改</a>'
+                                + '<a class="opt_del" href="javascript:deleteIndex(\'' + book.id + '\')">删除</a>'
+                                + '</td></tr>';
                         }
                         $("#bookList").html(bookListHtml);
 
@@ -188,22 +183,14 @@
                             //执行一个laypage实例
                             laypage.render({
                                 elem: 'shellPage' //注意，这里的 test1 是 ID，不用加 # 号
-                                , count: data.data.total //数据总数，从服务端得到,
+                                , count: data.data.total //数据总数，从服务端得到
                                 , curr: data.data.pageNum
                                 , limit: data.data.pageSize
+                                , theme: '#3eaf7c'
                                 , jump: function (obj, first) {
-
-
-                                    //obj包含了当前分页的所有参数，比如：
-                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
-                                    console.log(obj.limit); //得到每页显示的条数
-
-
                                     //首次不执行
                                     if (!first) {
                                         search(obj.curr, obj.limit);
-                                    } else {
-
                                     }
                                 }
                             });
@@ -243,52 +230,6 @@
             + "&indexName=" + encodeURI(encodeURI(indexName))
             + "&isVip=" + isVip;
 
-
-        /*
-                var indexName = $("#name"+indexId).text();
-
-                var htmlStr = "<input type=\"text\" value=\""+$.trim(indexName)+"\">";
-
-                $("#name"+indexId).html(htmlStr);
-                $("#name"+indexId).find("input").focus();
-                $("#name"+indexId).find("input").select();
-
-                $("#name"+indexId).find("input").keyup(function(event){
-                    if(event.keyCode ==13){
-                        $(this).blur();
-                    }
-                });
-
-                $("#name"+indexId).find("input").blur(function () {
-                    var indexName = $(this).val();
-                    $.ajax({
-                        type: "POST",
-                        url: "/author/updateIndexName",
-                        data: {'indexId':indexId,'indexName':indexName},
-                        dataType: "json",
-                        success: function (data) {
-                            if (data.code == 200) {
-
-                                $("#name"+indexId).html(indexName);
-
-
-                            } else if (data.code == 1001) {
-                                //未登录
-                                location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
-
-                            }else {
-                                layer.alert(data.msg);
-                            }
-
-                        },
-                        error: function () {
-                            layer.alert('网络异常');
-                        }
-                    })
-
-                });*/
-
-
     }