diff --git a/.env.development b/.env.development
index 95899ed..1fea89a 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,7 @@
 # 开发环境配置
 
 ENV = 'development'
-VUE_APP_BASE_API_URL = 'http://127.0.0.1:8888/api/front'
+VUE_APP_BASE_API_URL = 'http://127.0.0.1:8888/api'
 VUE_APP_BASE_IMG_URL = 'http://47.106.243.172:8888'
 VUE_APP_BASE_UPLOAD_IMG_URL = 'http://127.0.0.1:8888'
 
diff --git a/src/api/author.js b/src/api/author.js
new file mode 100644
index 0000000..784f1ac
--- /dev/null
+++ b/src/api/author.js
@@ -0,0 +1,9 @@
+import request from '../utils/request'
+
+export function getAuthorStatus() {
+    return request.get('/author/status');
+}
+
+export function register(params) {
+    return request.post('/author/register', params);
+}
\ No newline at end of file
diff --git a/src/api/book.js b/src/api/book.js
index c30e034..118fffa 100644
--- a/src/api/book.js
+++ b/src/api/book.js
@@ -1,58 +1,58 @@
 import request from '../utils/request'
 
 export function listCategorys(params) {
-    return request.get('/book/category/list', { params });
+    return request.get('/front/book/category/list', { params });
 }
 
 export function searchBooks(params) {
-    return request.get('/search/books', { params });
+    return request.get('/front/search/books', { params });
 }
 
 export function getBookById(bookId) {
-    return request.get(`/book/${bookId}`);
+    return request.get(`/front/book/${bookId}`);
 }
 
 export function addVisitCount(params) {
-    return request.post('/book/visit', params);
+    return request.post('/front/book/visit', params);
 }
 
 export function getLastChapterAbout(params) {
-    return request.get('/book/last_chapter/about', { params });
+    return request.get('/front/book/last_chapter/about', { params });
 }
 
 export function listRecBooks(params) {
-    return request.get('/book/rec_list', { params });
+    return request.get('/front/book/rec_list', { params });
 }
 
 export function listChapters(params) {
-    return request.get('/book/chapter/list', { params });
+    return request.get('/front/book/chapter/list', { params });
 }
 
 export function getBookContent(chapterId) {
-    return request.get(`/book/content/${chapterId}`);
+    return request.get(`/front/book/content/${chapterId}`);
 }
 
 export function getPreChapterId(chapterId) {
-    return request.get(`/book/pre_chapter_id/${chapterId}`);
+    return request.get(`/front/book/pre_chapter_id/${chapterId}`);
 }
 
 export function getNextChapterId(chapterId) {
-    return request.get(`/book/next_chapter_id/${chapterId}`);
+    return request.get(`/front/book/next_chapter_id/${chapterId}`);
 }
 
 export function listVisitRankBooks() {
-    return request.get('/book/visit_rank');
+    return request.get('/front/book/visit_rank');
 }
 
 export function listNewestRankBooks() {
-    return request.get('/book/newest_rank');
+    return request.get('/front/book/newest_rank');
 }
 
 export function listUpdateRankBooks() {
-    return request.get('/book/update_rank');
+    return request.get('/front/book/update_rank');
 }
 
 export function listNewestComments(params) {
-    return request.get('/book/comment/newest_list',{ params });
+    return request.get('/front/book/comment/newest_list',{ params });
 }
 
diff --git a/src/api/home.js b/src/api/home.js
index d02a60a..9522f74 100644
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -1,11 +1,11 @@
 import request from '../utils/request'
 
 export function listHomeBooks() {
-    return request.get('/home/books');
+    return request.get('/front/home/books');
 }
 
 
 export function listHomeFriendLinks() {
-    return request.get('/home/friend_Link/list');
+    return request.get('/front/home/friend_Link/list');
 }
 
diff --git a/src/api/news.js b/src/api/news.js
index 7500471..731c138 100644
--- a/src/api/news.js
+++ b/src/api/news.js
@@ -1,9 +1,9 @@
 import request from '../utils/request'
 
 export function listLatestNews() {
-    return request.get('/news/latest_list');
+    return request.get('/front/news/latest_list');
 }
 
 export function getNewsById(newsId) {
-    return request.get(`/news/${newsId}`);
+    return request.get(`/front/news/${newsId}`);
 }
\ No newline at end of file
diff --git a/src/api/resource.js b/src/api/resource.js
index 0a0c30c..7b8be7f 100644
--- a/src/api/resource.js
+++ b/src/api/resource.js
@@ -1,5 +1,5 @@
 import request from '../utils/request'
 
 export function getImgVerifyCode() {
-    return request.get('/resource/img_verify_code');
+    return request.get('/front/resource/img_verify_code');
 }
diff --git a/src/api/user.js b/src/api/user.js
index 79c3039..756ef27 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,33 +1,33 @@
 import request from '../utils/request'
 
 export function register(params) {
-    return request.post('/user/register', params);
+    return request.post('/front/user/register', params);
 }
 
 export function login(params) {
-    return request.post('/user/login', params);
+    return request.post('/front/user/login', params);
 }
 
 export function submitFeedBack(params) {
-    return request.post('/user/feedback', params);
+    return request.post('/front/user/feedback', params);
 }
 
 export function comment(params) {
-    return request.post('/user/comment',params);
+    return request.post('/front/user/comment',params);
 }
 
 export function deleteComment(id) {
-    return request.delete(`/user/comment/${id}`);
+    return request.delete(`/front/user/comment/${id}`);
 }
 
 export function updateComment(id,content) {
-    return request.putForm(`/user/comment/${id}`,content);
+    return request.putForm(`/front/user/comment/${id}`,content);
 }
 
 export function getUserinfo() {
-    return request.get('/user');
+    return request.get('/front/user');
 }
 
 export function updateUserInfo(userInfo) {
-    return request.put('/user',userInfo);
+    return request.put('/front/user',userInfo);
 }
\ No newline at end of file
diff --git a/src/assets/styles/public.css b/src/assets/styles/public.css
index ade8bd2..12ee541 100644
--- a/src/assets/styles/public.css
+++ b/src/assets/styles/public.css
@@ -346,16 +346,13 @@ select {
     padding: 0 25px;
 }
 #head .nav a.topAdd {
-    background: url(../images/top_add.gif) no-repeat 15px top;
     padding-left: 35px;
 }
 #head .nav a:hover, #head .nav a.cur {
     background-color: #5f5f5f;
     color: #FFF;
 }
-#head .nav a.topAdd:hover {
-    background: #60BBFF url(../images/top_add.gif) no-repeat 15px bottom;
-}
+
 #head .nav .noLeft {
     border-left: 0;
 }
@@ -370,9 +367,7 @@ select {
     background-color: #FFF;
     color: #000;
 }
-#head .nav .active a.topAdd {
-    background: #FFF url(../images/top_add.gif) no-repeat 15px top;
-}
+
 #head .nav .drop {
     display: none;
     position: absolute;
@@ -446,9 +441,7 @@ select {
     height: 38px;
     overflow: hidden;
 }
-#menu li.cur {
-    background: #60BBFF url(../images/menu_cur.gif) no-repeat right 50%;
-}
+
 #menu li.cur a {
     color: #FFF;
 }
@@ -458,7 +451,6 @@ select {
     line-height: 38px;
 }
 #menu li i {
-    background: url(../images/icon_menu.png) no-repeat 13px 0;
     float: left;
     display: block;
     width: 42px;
@@ -608,7 +600,6 @@ select {
     font-weight: bold;
 }
 .mainBox h3 .add {
-    background: #28B779 url(../images/action_btn.gif) no-repeat 20px 50%;
     padding-left: 40px;
 }
 .mainBox .filter {
@@ -662,16 +653,12 @@ select {
     position: absolute;
     z-index: 1;
 }
-#maskBox .maskBg i {
-    background: url(../images/icon_picture_big.png) no-repeat;
-}
+
 #maskBox #mask {
     position: absolute;
     z-index: 2;
 }
-#maskBox #mask i {
-    background: url(../images/icon_picture_big.png) no-repeat left bottom;
-}
+
 #maskBox #success {
     background: #60BBFF url();
     display: none;
@@ -727,7 +714,6 @@ select {
 }
 #index .indexBox .ipage a:hover {
     border: 1px dotted #FFFFFF;
-    background: #60BBFF url(../images/icon_edit_white.png) no-repeat 12px 50%;
     color: #FFF;
 }
 /*- help -*/
@@ -854,7 +840,6 @@ select {
     text-align:right;
 }
 #order .btnShow {
-    background: #FFFFFF url(../images/icon_edit_blue.png) no-repeat;
     border: none;
     width:16px;
     height:16px;
@@ -864,7 +849,6 @@ select {
     margin-left:10px;
 }
 #order .btnHide {
-    background: #FFFFFF url(../images/icon_no.png) no-repeat;
     border: none;
     width:14px;
     height:14px;
@@ -879,7 +863,6 @@ select {
 /* 网站管理员
 ----------------------------------------------- */
 #manager .cloudAccount {
-    background: url(../images/icon_cloud_account.png) no-repeat center top;
     text-align:center;
     padding-top:80px;
     margin-top:150px;
@@ -939,7 +922,6 @@ select {
 }
 /*- handle -*/
 #cloud .handle h2 {
-    background:url(../images/icon_cloud_handle.png) no-repeat left top;
     height:46px;
     padding-left:45px;
     font-size:18px;
@@ -955,7 +937,6 @@ select {
 }
 /*- order -*/
 #cloud .order h2 {
-    background:url(../images/icon_cloud_order.png) no-repeat left top;
     height:46px;
     padding-left:45px;
     font-size:18px;
@@ -1014,7 +995,6 @@ select {
     font-size:14px;
 }
 #douFrame .frame h2 .close {
-    background: url(../images/icon_fork.png) no-repeat;
     width:12px;
     height:12px;
     display:block;
@@ -1065,7 +1045,6 @@ select {
     text-decoration:underline;
 }
 #module .uninstall .list h2 {
-    background:url(../images/icon_cloud_uninstall.png) no-repeat left top;
     padding-left:40px;
     height:30px;
     color:#60BBFF;
@@ -1193,7 +1172,6 @@ select {
     margin-left: 120px;
 }
 #mobileBox #mMenu h3 {
-    background:#60BBFF url(../images/icon_mobile.png) no-repeat center 30px;
     color:#FFF;
     font-size:14px;
     font-weight:bold;
@@ -1222,7 +1200,6 @@ select {
     overflow: hidden;
 }
 #login .dologo {
-    background: url(../images/logo.gif) no-repeat 0 0;
     height: 50px;
     margin-bottom: 30px;
 }
@@ -1301,7 +1278,6 @@ select {
 ----------------------------------------------- */
 /*- douMsg -*/
 #douMsg {
-    background: url(../images/icon_exc_small.gif) no-repeat left top;
     padding: 27px 0 0 70px;
     margin-top: 30px;
 }
@@ -1310,9 +1286,7 @@ select {
     font-weight: bold;
     color: #0574C7;
 }
-#douMsg dl {
-    background: url(../images/icon_back_arrow.gif) no-repeat right bottom;
-}
+
 #douMsg dt {
     padding: 10px 0 25px 0;
     font-size: 13px;
@@ -1328,7 +1302,6 @@ select {
 }
 /*- outMsg -*/
 #outMsg {
-    background: url(../images/icon_exc.gif) no-repeat left top;
     margin: 0px auto;
     width: 340px;
     padding: 30px 0 0 80px;
@@ -1345,7 +1318,7 @@ select {
     color: #666666;
 }
 #outMsg dd {
-    background: url(../images/icon_back.gif) no-repeat left top;
+    
     padding-left: 25px;
     font-size: 14px;
 }
diff --git a/src/components/common/Navbar.vue b/src/components/common/Navbar.vue
index 889ebc5..de94ec9 100644
--- a/src/components/common/Navbar.vue
+++ b/src/components/common/Navbar.vue
@@ -2,20 +2,52 @@
   <div class="mainNav" id="mainNav">
     <div class="box_center cf">
       <ul class="nav" id="navModule">
-        <li ><router-link :to="{ name: 'home' }">首页</router-link></li>
-        <li> <router-link :to="{ name: 'bookclass' }">
-        全部作品
-      </router-link></li>
+        <li><router-link :to="{ name: 'home' }">首页</router-link></li>
+        <li>
+          <router-link :to="{ name: 'bookclass' }"> 全部作品 </router-link>
+        </li>
         <li><router-link :to="{ name: 'bookRank' }">排行榜</router-link></li>
-        <!--<li class=""><a href="/pay/index.html">充值</a></li>
-        <li><a href="/author/index.html" target="_blank">作家专区</a></li>-->
+        <!--<li class=""><a href="/pay/index.html">充值</a></li>-->
+        <li><a @click="goAuthor" href="javascript:void(0)">作家专区</a></li>
       </ul>
     </div>
   </div>
 </template>
 
 <script>
+import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { getToken} from "@/utils/auth";
+import {getAuthorStatus} from "@/api/author"
 export default {
-  name: "Navbar"
+  name: "Navbar",
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const goAuthor = async () => {
+      if (!getToken()) {
+        router.push({
+          name: "login",
+        });
+        return;
+      }
+
+      const {data} = await getAuthorStatus();
+      if(data === null){
+          router.push({
+          name: "authorRegister",
+        });
+        return;
+      }
+
+      let routeUrl = router.resolve({
+        name: "authorBookList",
+      });
+      window.open(routeUrl.href, "_blank");
+    };
+    return {
+      goAuthor,
+    };
+  },
 };
 </script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 23b814f..0b3abb6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,7 +67,17 @@ const router = createRouter({
       name: 'userSetup',
       component: () => import('@/views/UserSetup')
 	   
-    }
+    },
+    {
+      path: '/author/register',
+      name: 'authorRegister',
+      component: () => import('@/views/author/Register')
+    },
+    {
+      path: '/author/book_list',
+      name: 'authorBookList',
+      component: () => import('@/views/author/BookList')
+    },
   ]
 })
 
diff --git a/src/views/author/BookList.vue b/src/views/author/BookList.vue
new file mode 100644
index 0000000..b0ea502
--- /dev/null
+++ b/src/views/author/BookList.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="header">
+    <Top @eventSerch="searchByK" />
+    <Navbar />
+  </div>
+
+  <div class="main box_center cf">
+    <div class="channelWrap classTable cf">
+      <div class="so_tag">
+        <ul class="list">
+          <li class="so_pd" id="workDirection">
+            <span class="tit">作品频道：</span>
+            <a
+              filter-value="0"
+              href="javascript:void(0)"
+              @click="loadCategoryList(0)"
+              :class="`${workDirectionOn == 0 ? 'on' : ''}`"
+              >男频</a
+            >
+            <a
+              filter-value="1"
+              href="javascript:void(0)"
+              @click="loadCategoryList(1)"
+              :class="`${workDirectionOn == 1 ? 'on' : ''}`"
+              >女频</a
+            >
+          </li>
+          <li id="idGirl" class="so_class">
+            <span class="tit">作品分类：</span>
+
+            <span class="so_boy" id="boyCategoryList">
+              <a
+                href="javascript:void(0)"
+                :class="`${categoryOn == 0 ? 'on' : ''}`"
+                @click="changeCategory(0)"
+                >不限</a
+              >
+              <a
+                v-for="(item, index) in bookCategorys"
+                :key="index"
+                href="javascript:void(0)"
+                :class="`${categoryOn == item.id ? 'on' : ''}`"
+                @click="changeCategory(item.id)"
+                >{{ item.name }}</a
+              >
+            </span>
+          </li>
+          <li class="so_progress">
+            <span class="tit">是否完结：</span>
+            <a
+              href="javascript:void(0)"
+              :class="`${bookStatusOn == null ? 'on' : ''}`"
+              @click="changeBookStatus(null)"
+              >不限</a
+            >
+            <a
+              filter-value="0"
+              href="javascript:void(0)"
+              :class="`${bookStatusOn == 0 ? 'on' : ''}`"
+              @click="changeBookStatus(0)"
+              >连载中</a
+            >
+            <a
+              filter-value="1"
+              href="javascript:void(0)"
+              :class="`${bookStatusOn == 1 ? 'on' : ''}`"
+              @click="changeBookStatus(1)"
+              >已完结</a
+            >
+          </li>
+          <li class="so_words">
+            <span class="tit">作品字数：</span>
+            <a
+              href="javascript:void(0)"
+              :class="`${wordCountOn == null ? 'on' : ''}`"
+              @click="changeWordCount(null, null)"
+              >不限</a
+            >
+            <a
+              filter-value-max="300000"
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 0 ? 'on' : ''}`"
+              @click="changeWordCount(0, 300000)"
+              >30万字以下</a
+            >
+            <a
+              filter-value-min="300000"
+              filter-value-max="500000"
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 300000 ? 'on' : ''}`"
+              @click="changeWordCount(300000, 500000)"
+              >30-50万字</a
+            >
+            <a
+              filter-value-min="500000"
+              filter-value-max="1000000"
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 500000 ? 'on' : ''}`"
+              @click="changeWordCount(500000, 1000000)"
+              >50-100万字</a
+            >
+            <a
+              filter-value-min="1000000"
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 1000000 ? 'on' : ''}`"
+              @click="changeWordCount(1000000, null)"
+              >100万字以上</a
+            >
+          </li>
+          <li class="so_update">
+            <span class="tit">更新时间：</span>
+            <a
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == null ? 'on' : ''}`"
+              @click="changeUpdateTime(null)"
+              >不限</a
+            >
+            <a
+              filter-value="3"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 3 ? 'on' : ''}`"
+              @click="changeUpdateTime(3)"
+              >三日内</a
+            >
+            <a
+              filter-value="7"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 7 ? 'on' : ''}`"
+              @click="changeUpdateTime(7)"
+              >七日内</a
+            >
+            <a
+              filter-value="15"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 15 ? 'on' : ''}`"
+              @click="changeUpdateTime(15)"
+              >半月内</a
+            >
+            <a
+              filter-value="30"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 30 ? 'on' : ''}`"
+              @click="changeUpdateTime(30)"
+              >一月内</a
+            >
+          </li>
+          <li class="so_sort">
+            <span class="tit">排序方式：</span>
+            <a href="javascript:void(0)"
+              :class="`${sortOn == null ? 'on' : ''}`"
+              @click="changeSort(null)">不限</a>
+            <a
+              filter-value="last_index_update_time"
+              href="javascript:void(0)"
+              :class="`${sortOn == 'last_chapter_update_time desc' ? 'on' : ''}`"
+              @click="changeSort('last_chapter_update_time desc')"
+              >更新时间</a
+            >
+            <a filter-value="word_count" href="javascript:void(0)"
+              :class="`${sortOn == 'word_count desc' ? 'on' : ''}`"
+              @click="changeSort('word_count desc')"
+              >总字数</a
+            >
+            <a
+              filter-value="visit_count"
+              href="javascript:void(0)"
+              :class="`${sortOn == 'visit_count desc' ? 'on' : ''}`"
+              @click="changeSort('visit_count desc')"
+              >点击量</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="channelWrap channelClassContent cf">
+      <div class="updateTable rankTable">
+        <table cellpadding="0" cellspacing="0">
+          <thead>
+            <tr>
+              <th class="rank">序号</th>
+              <th class="style">类别</th>
+              <th class="name">书名</th>
+              <th class="chapter">最新章节</th>
+              <th class="author">作者</th>
+              <th class="word">字数</th>
+            </tr>
+          </thead>
+          <tbody id="bookList">
+            <tr v-for="(item, index) in books" :key="index">
+              <td class="rank">
+                <i>{{ index + 1 }}</i>
+              </td>
+              <td class="style">
+                <a href="javascript:void(0)" @click="bookDetail(item.id)" cls="13"
+                  >[{{ item.categoryName }}]</a
+                >
+              </td>
+              <td class="name">
+                <a href="javascript:void(0)" @click="bookDetail(item.id)" v-html="item.bookName"></a>
+              </td>
+              <td class="chapter">
+                <a href="javascript:void(0)" @click="bookDetail(item.id)">{{
+                  item.lastChapterName
+                }}</a>
+              </td>
+              <td class="author">
+                <a href="javascript:void(0)" v-html="item.authorName"></a>
+              </td>
+              <td class="word">{{ wordCountFormat(item.wordCount) }}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <el-pagination
+          small
+          layout="prev, pager, next"
+          :background="backgroud"
+          :page-size="pageSize"
+          :total="total"
+          class="mt-4"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<script>
+import "@/assets/styles/book.css";
+import { reactive, toRefs, onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { searchBooks, listCategorys } from "@/api/book";
+import { addDay, dateFormat } from "@/utils";
+import Top from "@/components/common/Top";
+import Navbar from "@/components/common/Navbar";
+import Footer from "@/components/common/Footer";
+export default {
+  name: "authorBookList",
+  components: {
+    Top,
+    Navbar,
+    Footer,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const state = reactive({
+      bookCategorys: [],
+      books: [],
+      searchCondition: {},
+      backgroud: true,
+      total: 0,
+      pageSize: 10,
+      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
+      workDirectionOn: 0,
+      categoryOn: 0,
+      bookStatusOn: null,
+      wordCountOn: null,
+      updateTimeOn: null,
+      sortOn:null
+    });
+    onMounted(() => {
+      const key = route.query.key;
+      state.searchCondition.keyword = key;
+      state.searchCondition.pageSize = 10;
+      loadCategoryList(0);
+    });
+
+    const search = async () => {
+      const { data } = await searchBooks(state.searchCondition);
+      state.books = data.list;
+      state.searchCondition.pageNum = data.pageNum;
+      state.searchCondition.pageSize = data.pageSize;
+      state.total = Number(data.total);
+    };
+
+    const searchByK = (key) => {
+      state.searchCondition = { keyword: key };
+      search();
+    };
+    const bookDetail = (bookId) => {
+      router.push({ path: `/book/${bookId}` });
+    };
+
+    const handleCurrentChange = (pageNum) => {
+      state.searchCondition.pageNum = pageNum;
+      search();
+    };
+
+    const loadCategoryList = async (workDirection) => {
+      const { data } = await listCategorys({ workDirection: workDirection });
+      state.bookCategorys = data;
+      state.workDirectionOn = workDirection;
+      state.searchCondition.workDirection = workDirection;
+      state.categoryOn = 0;
+      state.searchCondition.categoryId = null;
+      search();
+    };
+
+    const changeCategory = async (categoryId) => {
+      state.categoryOn = categoryId;
+      if (categoryId > 0) {
+        state.searchCondition.categoryId = categoryId;
+      } else {
+        state.searchCondition.categoryId = null;
+      }
+      search();
+    };
+
+    const changeBookStatus = async (bookStatus) => {
+      state.bookStatusOn = bookStatus;
+      state.searchCondition.bookStatus = bookStatus;
+      search();
+    };
+
+    const changeWordCount = async (wordCountMin, wordCountMax) => {
+      state.wordCountOn = wordCountMin;
+      state.searchCondition.wordCountMin = wordCountMin;
+      state.searchCondition.wordCountMax = wordCountMax;
+
+      search();
+    };
+
+    const changeUpdateTime = async (days) => {
+      state.updateTimeOn = days;
+      if (days) {
+        state.searchCondition.updateTimeMin = dateFormat(
+          "YYYY-mm-dd",
+          addDay(-days)
+        );
+      } else {
+        state.searchCondition.updateTimeMin = null;
+      }
+      search();
+    };
+
+    const changeSort = async (sort) => {
+      state.sortOn = sort;
+      state.searchCondition.sort = sort;
+      search();
+    };
+
+    return {
+      ...toRefs(state),
+      bookDetail,
+      searchByK,
+      search,
+      handleCurrentChange,
+      loadCategoryList,
+      changeCategory,
+      changeBookStatus,
+      changeWordCount,
+      changeUpdateTime,
+      changeSort
+    };
+  },
+  computed: {
+    wordCountFormat(wordCount) {
+      return (wordCount) => {
+        if (wordCount.length > 5) {
+          return parseInt(wordCount / 10000) + "万";
+        }
+        if (wordCount.length > 4) {
+          return parseInt(wordCount / 1000) + "千";
+        }
+        return wordCount;
+      };
+    },
+  },
+};
+</script>
+
+<style>
+.el-pagination {
+  justify-content: center;
+}
+.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
+  background-color: #f80 !important;
+}
+.el-pagination {
+  --el-pagination-hover-color: #f80 !important;
+}
+</style>
diff --git a/src/views/author/Register.vue b/src/views/author/Register.vue
new file mode 100644
index 0000000..f61eb2d
--- /dev/null
+++ b/src/views/author/Register.vue
@@ -0,0 +1,807 @@
+<template>
+  <div
+    style="
+      width: 800px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 150px;
+    "
+  >
+    <div id="main">
+      <table
+        width="100%"
+        border="0"
+        cellpadding="8"
+        cellspacing="0"
+        class="tableBasic"
+        style="line-height: 40px"
+      >
+        <tbody>
+          <tr>
+            <td colspan="3" style="text-align: left">
+              <div style="padding-left: 15px; height: 40px; line-height: 40px">
+                我是网络小说写手，我要注册为小说精品屋签约作者：
+              </div>
+            </td>
+          </tr>
+
+          <tr>
+            <td align="right">作者笔名：</td>
+            <td>
+              <input
+                v-model="penName"
+                name="penName"
+                
+                type="text"
+                maxlength="8"
+                id="TxtNiceName"
+                class="
+                  easyui-validatebox
+                  inpMain
+                  validatebox-text validatebox-invalid
+                "
+                data-options="required:true"
+                validtype="checkPenName"
+              />
+            </td>
+            <td><span class="notes"> *</span> 长度为2到8位的中英文</td>
+          </tr>
+          <tr>
+            <td align="right">手机号码：</td>
+            <td>
+              <input
+              v-model="telPhone"
+                name="telPhone"
+                
+                type="text"
+                id="TxtMobile"
+                class="
+                  easyui-validatebox
+                  inpMain
+                  validatebox-text validatebox-invalid
+                "
+                data-options="required:true"
+                validtype="chinaMobile"
+              />
+            </td>
+            <td>
+              <span class="notes"> *</span>
+              小说精品屋的编辑会通过这个号码与您联系
+            </td>
+          </tr>
+          <tr>
+            <td align="right">QQ或微信：</td>
+            <td>
+              <input
+              v-model="chatAccount"
+                name="chatAccount"
+                
+                type="text"
+                id="TxtQQ"
+                class="
+                  easyui-validatebox
+                  inpMain
+                  validatebox-text validatebox-invalid
+                "
+                data-options="required:true"
+              />
+            </td>
+            <td>
+              <span class="notes"> *</span>
+              小说精品屋的编辑会通过这个号码与您联系
+            </td>
+          </tr>
+          <tr>
+            <td align="right">电子邮箱：</td>
+            <td>
+              <input
+              v-model="email"
+                name="email"
+                
+                type="text"
+                id="TxtEmail"
+                class="
+                  easyui-validatebox
+                  inpMain
+                  w300
+                  validatebox-text validatebox-invalid
+                "
+                data-options="required:true"
+                validtype="email"
+                title=""
+              />
+            </td>
+            <td><span class="notes"> *</span> 长度为2到15位的中英文，数字</td>
+          </tr>
+          <tr>
+            <td align="right">男女主角：</td>
+            <td>
+              <div>
+                <ul class="ipage">
+                  <input v-model="workDirection" type="radio" name="workDirection" value="0" />男频
+                  <input v-model="workDirection" type="radio" name="workDirection" value="1" />女频
+                </ul>
+              </div>
+            </td>
+            <td><span class="notes"> *</span> 请选择作品方向</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <table
+      width="100%"
+      border="0"
+      cellpadding="8"
+      cellspacing="0"
+      class="tableBasic"
+    >
+      <tbody>
+        <tr>
+          <td>
+            <div
+              style="padding-left: 110px; margin-top: 10px; margin-bottom: 5px"
+            >
+              <input
+                @click="registerAuthor"
+                type="button"
+                name="btnSubmit"
+                value="立即开始您的作者生涯"
+                id="btnSubmit"
+                class="btn"
+              />
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span id="LabErr"></span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <input type="hidden" name="HidUId" id="HidUId" value="1095" />
+  </div>
+</template>
+
+<script>
+import "@/assets/styles/public.css";
+import { reactive, toRefs, onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { getImgVerifyCode } from "@/api/resource";
+import { register } from "@/api/author";
+import { setToken, setNickName, setUid } from "@/utils/auth";
+import Header from "@/components/common/Header";
+import Footer from "@/components/common/Footer";
+export default {
+  name: "authorRegister",
+  components: {
+    Header,
+    Footer,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const state = reactive({
+      penName: "",
+      telPhone: "",
+      chatAccount: "",
+      email: "",
+      workDirection: "0",
+    });
+
+    const registerAuthor = async () => {
+      if (!state.penName) {
+        ElMessage.error("笔名不能为空！");
+        return;
+      }
+      if (!state.telPhone) {
+        ElMessage.error("手机号不能为空！");
+        return;
+      }
+      if (!/^1[3-9]\d{9}$/.test(state.telPhone)) {
+        ElMessage.error("手机号格式不正确！");
+        return;
+      }
+      if (!state.chatAccount) {
+        ElMessage.error("QQ或微信账号不能为空！");
+        return;
+      }
+      if (!state.email) {
+        ElMessage.error("电子邮箱不能为空！");
+        return;
+      }
+      if (
+        !/^[A-Za-z0-9\-_]+[A-Za-z0-9\.\-_]*[A-Za-z0-9\-_]+@[A-Za-z0-9]+[A-Za-z0-9\.\-_]*(\.[A-Za-z0-9\.\-_]+)*[A-Za-z0-9]+\.[A-Za-z0-9]+[A-Za-z0-9\.\-_]*[A-Za-z0-9]+$/.test(
+          state.email
+        )
+      ) {
+        ElMessage.error("电子邮箱格式不正确！");
+        return;
+      }
+      
+      const { data } = await register(state);
+
+      router.push({ name: "authorBookList" });
+    };
+
+    return {
+      ...toRefs(state),
+      registerAuthor,
+    };
+  },
+};
+</script>
+
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+
+.updateTable .style a {
+  color: #999;
+}
+.updateTable .author a {
+  color: #999;
+  cursor: text;
+}
+.bind,
+.updateTable .style a:hover {
+  color: #f65167;
+}
+.userBox {
+  /*width: 998px; border: 1px solid #eaeaea;*/
+  margin: 0 auto 50px;
+  background: #fff;
+  border-radius: 6px;
+}
+.channelViewhistory .userBox {
+  margin: 0 auto;
+}
+.user_l {
+  width: 350px;
+  float: left;
+  padding: 100px 124px;
+}
+.user_l h3 {
+  font-size: 23px;
+  font-weight: normal;
+  line-height: 1;
+  text-align: center;
+}
+.user_l #LabErr {
+  color: #ff4040;
+  display: block;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 14px;
+}
+.user_l .log_list {
+  width: 350px;
+}
+.user_l .s_input {
+  margin-bottom: 25px;
+  font-size: 14px;
+}
+.s_input {
+  width: 348px;
+  height: 38px;
+  line-height: 38px\9;
+  vertical-align: middle;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+}
+.icon_name,
+.icon_key,
+.icon_code {
+  width: 312px;
+  padding-left: 36px;
+}
+.icon_key {
+  background-position: 13px -51px;
+}
+.icon_code {
+  background-position: 13px -117px;
+  width: 200px;
+  float: left;
+}
+.code_pic {
+  height: 38px;
+  float: right;
+}
+.btn_phone {
+  height: 40px;
+  width: 100px;
+  float: right;
+  cursor: pointer;
+  padding: 0;
+  text-align: center;
+  border-radius: 2px;
+  background: #dfdfdf;
+}
+.log_code {
+  *padding-bottom: 25px;
+}
+.user_l .btn_red {
+  width: 100%;
+  font-size: 19px;
+  padding: 12px;
+}
+.autologin {
+  color: #999;
+  line-height: 1;
+  margin-bottom: 18px;
+}
+.autologin em {
+  vertical-align: 2px;
+  margin-left: 4px;
+}
+.user_r {
+  width: 259px;
+  margin: 80px 0;
+  padding: 20px 70px;
+  border-left: 1px dotted #e3e3e3;
+  float: right;
+  text-align: center;
+}
+.user_r .tit {
+  font-size: 16px;
+  line-height: 1;
+  padding: 6px 0 25px;
+}
+.user_r .btn_ora {
+  padding: 10px 34px;
+}
+.fast_login {
+  padding: 60px 0 0;
+}
+.fast_list {
+  text-align: center;
+  padding: 0.5rem;
+}
+.fast_list li {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+}
+.fast_list li .img {
+  width: 48px;
+  height: 48px;
+  margin: 20px 0 5px;
+}
+.fast_list li a:hover {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+  -moz-opacity: 0.8;
+}
+.fast_list li span {
+  display: block;
+}
+.fast_list .login_qq {
+  margin: 0 42px;
+}
+.fast_list .login_wb a {
+  color: #f55c5b;
+}
+.fast_list .login_qq a {
+  color: #51b7ff;
+}
+.fast_list .login_wx a {
+  color: #66d65e;
+}
+.fast_tit {
+  position: relative;
+  overflow: hidden;
+}
+.fast_tit .lines {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  line-height: 1;
+  background: #eaeaea;
+}
+.fast_tit .title {
+  background: #fff;
+  font-size: 16px;
+  padding: 3px 14px;
+  position: relative;
+  display: inline-block;
+  z-index: 999;
+}
+/*userinfo*/
+.my_l {
+  width: 198px;
+  float: left;
+  font-size: 13px;
+  padding-top: 20px;
+}
+.my_l li a {
+  display: block;
+  height: 42px;
+  line-height: 42px;
+  padding-left: 62px;
+  border-left: 4px solid #fff;
+  margin-bottom: 5px;
+  color: #666;
+}
+.my_l li .on {
+  background-color: #fafafa;
+  border-left: 2px solid #f80;
+  color: #000;
+  border-radius: 0 2px 2px 0;
+}
+.my_l .link_1 {
+  background-position: 32px -188px;
+}
+.my_l .link_2 {
+  background-position: 32px -230px;
+}
+.my_l .link_3 {
+  background-position: 32px -272px;
+}
+.my_l .link_4 {
+  background-position: 32px -314px;
+}
+.my_l .link_5 {
+  background-position: 32px -356px;
+}
+.my_l .link_6 {
+  background-position: 32px -397px;
+}
+.my_l .link_7 {
+  background-position: 32px -440px;
+}
+.my_l .link_8 {
+  background-position: 32px -481px;
+}
+.my_r {
+  width: 739px;
+  padding: 0 30px 30px;
+  float: right;
+  border-left: 1px solid #efefef;
+  min-height: 470px;
+}
+.my_info {
+  padding: 30px 0 5px;
+}
+.user_big_head {
+  /*width:110px; height:110px; padding:4px; border:1px solid #eaeaea;*/
+  margin-right: 30px;
+  float: left;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+.my_r .my_name {
+  font-size: 18px;
+  line-height: 1;
+  padding: 5px 0 12px 0;
+}
+.my_r .s_input {
+  width: 318px;
+  padding: 0 10px;
+}
+.my_list li {
+  line-height: 28px;
+}
+.my_list li i,
+.my_list li em.red {
+  margin-right: 6px;
+}
+.my_list .binded {
+  color: #999;
+  margin-left: 6px;
+}
+.my_list .btn_link {
+  margin-left: 12px;
+}
+.mytab_list li {
+  line-height: 30px;
+  padding: 10px 0;
+  font-size: 14px;
+}
+.mytab_list li .tit {
+  width: 70px;
+  color: #aaa;
+  text-align: right;
+  display: inline-block;
+  margin-right: 18px;
+}
+.mytab_list .user_img {
+  width: 48px;
+  height: 48px;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+.my_bookshelf .title {
+  padding: 20px 0 15px;
+  line-height: 30px;
+}
+.my_bookshelf h4 {
+  font-size: 14px;
+  color: #666;
+}
+.my_bookshelf h2 {
+  font-size: 18px;
+  font-weight: normal;
+}
+.updateTable {
+  width: 739px;
+  color: #999;
+}
+.updateTable table {
+  width: 100%;
+  margin-bottom: 14px;
+}
+.updateTable th,
+.updateTable td {
+  height: 40px;
+  line-height: 40px;
+  vertical-align: middle;
+  padding-left: 6px;
+  font-weight: normal;
+  text-align: left;
+}
+.updateTable th {
+  background: #f9f9f9;
+  color: #333;
+  border-top: 1px solid #eee;
+}
+.updateTable td {
+  height: 40px;
+  line-height: 40px;
+}
+.updateTable .style {
+  width: 80px;
+  padding-left: 10px;
+}
+.updateTable .name {
+  width: 178px;
+  padding-right: 10px;
+}
+.updateTable .name a,
+.updateTable .chapter a {
+  max-width: 168px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.updateTable .chapter {
+  padding-right: 5px;
+}
+.updateTable .chapter a {
+  max-width: 220px;
+  float: left;
+}
+.updateTable .author {
+  width: 72px;
+  text-align: left;
+}
+.updateTable .goread {
+  width: 80px;
+  text-align: center;
+}
+.updateTable .time {
+  width: 86px;
+}
+.updateTable .word {
+  width: 64px;
+  padding-right: 10px;
+  text-align: right;
+}
+.updateTable .rank {
+  width: 30px;
+  padding-right: 10px;
+  text-align: center;
+}
+.updateTable .name a,
+.updateTable .chapter a,
+.updateTable .author a {
+  height: 40px;
+  line-height: 40px;
+  display: inline-block;
+  overflow: hidden;
+}
+.updateTable tr:nth-child(2n) td {
+  background: #fafafa;
+}
+.dataTable {
+  width: 739px;
+}
+.dataTable table {
+  width: 100%;
+  margin-bottom: 14px;
+  border-collapse: collapse;
+}
+.dataTable th,
+.dataTable td {
+  height: 40px;
+  line-height: 40px;
+  vertical-align: middle;
+  padding: 0 10px;
+  font-weight: normal;
+  text-align: center;
+  border: 1px solid #eaeaea;
+}
+.dataTable th {
+  background: #f8f8f8;
+}
+.nodate {
+  border-top: 1px solid #eaeaea;
+  padding: 60px 0;
+}
+.viewhistoryBox {
+  /*padding: 0 30px 30px; */
+  padding: 0 20px 10px;
+}
+.viewhistoryBox .updateTable {
+  width: 100%;
+}
+/*.btn_gray, .btn_red, .btn_ora { font-size:14px; padding:8px 28px }*/
+.book_tit {
+  height: 48px;
+  line-height: 48px;
+  margin: 0 14px;
+  border-bottom: 1px solid #eaeaea;
+  overflow: hidden;
+}
+.book_tit .fl {
+  font-size: 14px;
+  color: #999;
+}
+.book_tit .fl h3 {
+  font-size: 18px;
+  color: #333;
+  font-weight: normal;
+  margin-right: 5px;
+  display: inline;
+}
+.book_tit .fr {
+  font-size: 14px;
+}
+
+.commentBar,
+.feedback_list {
+  border-top: 1px solid #eee;
+  margin-bottom: 15px;
+}
+/*.comment_list { padding: 16px 0; border-bottom: 1px solid #eee }
+.comment_list .user_head { width:54px; height:54px; border-radius:50%; float: left; margin-right: 14px }
+.comment_list .li_1 { overflow: hidden }
+.comment_list .user_name { color: #ed4259 }
+.comment_list .li_2 { padding:3px 0; color:#999 }
+.comment_list .li_3, .comment_list .li_4 { margin-left:68px }
+.comment_list .reply { padding-left: 12px }
+.comment_list .num { color: #ed4259; margin: 0 3px }
+.comment_list .li_4 { line-height:34px; padding-top:8px; margin-top:15px; border-top:1px solid #eaeaea }
+.comment_list .li_4 .more { background:#f7f7f7; border-radius:2px; color:#ed4259; text-align:center }*/
+.no_contet {
+  padding: 190px 0 40px;
+  text-align: center;
+  color: #999;
+  border-top: 1px solid #eee;
+}
+
+.comment_list {
+  padding: 20px 0;
+  border-bottom: 1px solid #eee;
+}
+.comment_list:last-child {
+  border: none;
+}
+.comment_list .user_heads {
+  /*width: 54px; height: 54px; float: left;*/
+  position: relative;
+  margin-right: 20px;
+}
+.comment_list .user_head {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #f6f6f6;
+}
+.comment_list .user_heads span {
+  display: block;
+  margin: 0;
+  position: absolute;
+  left: 12px;
+  bottom: 0;
+}
+.comment_list ul {
+  /*width: 640px;*/
+  width: 660px;
+}
+.comment_list .li_0 {
+  font-family: "宋体";
+}
+.comment_list .li_0 strong {
+  font-size: 14px;
+  color: #f00;
+}
+.comment_list .li_1 {
+  overflow: hidden;
+}
+.comment_list .user_name {
+  color: #ed4259;
+}
+.comment_list .li_2 {
+  padding: 6px 0;
+}
+.comment_list .li_3 {
+  color: #999;
+}
+.comment_list .reply {
+  padding-left: 12px;
+}
+.comment_list .num {
+  color: #ed4259;
+  margin: 0 3px;
+}
+.comment_list .li_4 {
+  line-height: 34px;
+  padding-top: 8px;
+  margin-top: 15px;
+  border-top: 1px solid #eaeaea;
+}
+.pl_bar li {
+  display: block;
+}
+.pl_bar .name {
+  color: #666;
+  padding-top: 2px;
+  font-size: 14px;
+}
+.pl_bar .dec {
+  font-size: 14px;
+  line-height: 1.8;
+  padding: 12px 0;
+}
+.pl_bar .other {
+  line-height: 24px;
+  color: #999;
+  font-size: 13px;
+}
+.pl_bar .other a {
+  display: inline-block;
+  color: #999;
+}
+.pl_bar .reply {
+  padding-left: 22px;
+}
+/*.no_comment { padding: 70px 14px 115px; color: #CCCCCC; text-align: center; font-size: 14px; }*/
+.reply_bar {
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  padding: 10px;
+  line-height: 1.8;
+}
+</style>
\ No newline at end of file