优化样式

jianyun8023 · Aug 6, 2024 · c68c6e8 · c68c6e8
1 parent 4e4310c
commit c68c6e8
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 24 deletions.
diff --git a/app/calibre-pages/src/components/Header.vue b/app/calibre-pages/src/components/Header.vue
@@ -1,17 +1,26 @@
 <template>
-  <el-row justify="center">
+  <el-row justify="start">
     <el-link href="/">
-      <el-text class="mx-2" style="font-size: xxx-large; color: red">书海拾贝</el-text>
+      <el-text class="site-title">书海拾贝</el-text>
 
     </el-link>
-<!--    <h2 style="font-size: xx-large;">Treasure in Book Ocean</h2>-->
+    <!--    <h2 style="font-size: xx-large;">Treasure in Book Ocean</h2>-->
   </el-row>
 </template>
 
 <script>
 export default {
   name: 'Header'
 }
+
+
 </script>
 
-<style scoped></style>
+<style scoped>
+.site-title {
+
+  font-size: xx-large;
+  color: #ef475d;
+  font-family: Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
+}
+</style>
diff --git a/app/calibre-pages/src/components/MetadataEdit.vue b/app/calibre-pages/src/components/MetadataEdit.vue
@@ -1,9 +1,12 @@
 <template>
 
-  <el-form v-loading="loading" :model="form" label-width="120px" class="book-form" style="max-width: 600px">
+  <el-form v-loading="loading" :model="form" label-width="70px" class="book-form" style="max-width: 600px">
     <el-form-item label="书名">
       <el-col :span="18">
         <el-input v-model="form.title" placeholder="请输入书名">
+          <template #suffix v-if="titleNew === '1' && newBook.sub_title">
+            <el-checkbox v-model="useSubTitle">Full</el-checkbox>
+          </template>
         </el-input>
       </el-col>
       <el-col :span="6">
@@ -34,8 +37,9 @@
         <el-input v-model="form.publisher" placeholder="请输入出版社">
         </el-input>
       </el-col>
-      <el-col :span="6" >
-        <el-radio-group class="align-right" v-model="publisherNew" aria-label="label position" placeholder="源" :disabled="!book.publisher || book.publisher === newBook.publisher">
+      <el-col :span="6">
+        <el-radio-group class="align-right" v-model="publisherNew" aria-label="label position" placeholder="源"
+                        :disabled="!book.publisher || book.publisher === newBook.publisher">
           <el-radio-button value="1">新</el-radio-button>
           <el-radio-button value="2">旧</el-radio-button>
         </el-radio-group>
@@ -71,7 +75,7 @@
     </el-form-item>
     <el-form-item label="评分">
       <el-col :span="18">
-        <el-rate v-model="form.rating" max="10" disabled
+        <el-rate v-model="form.rating" :max="10"
                  show-score text-color="#ff9900"
                  score-template="{value} points"/>
       </el-col>
@@ -146,6 +150,7 @@ export default {
       },
       options: [],
       tableData: [],
+      useSubTitle: true,
       titleNew: '1',
       authorsNew: '1',
       authors: [],
@@ -157,7 +162,7 @@ export default {
       tagsNew: '1',
       tags: [],
       loading: false,
-      colors: ['#99A9BF', '#F7BA2A','#F7BA2A', '#FF9900']
+      colors: ['#99A9BF', '#F7BA2A', '#F7BA2A', '#FF9900']
     }
   },
   created() {
@@ -166,7 +171,7 @@ export default {
     // 清理html标签中的class
     this.newBook.summary = this.newBook.summary.replace(/class=".*?"/g, '')
     this.form.comments = this.newBook.summary
-    this.form.title = this.newBook.title
+    this.form.title = this.useSubTitle ? this.joinTitle(this.newBook) : this.newBook.title
     this.form.publisher = this.newBook.publisher
     this.form.isbn = this.newBook.isbn13
 
@@ -183,9 +188,16 @@ export default {
     this.form.rating = Number(this.newBook.rating.average)
   },
   watch: {
+    useSubTitle(val) {
+      if (this.titleNew === '1') {
+        this.form.title = val ? this.joinTitle(this.newBook) : this.newBook.title
+      } else {
+        this.form.title = this.book.title
+      }
+    },
     titleNew(val) {
       if (val === '1') {
-        this.form.title = this.newBook.title
+        this.form.title = this.useSubTitle ? this.joinTitle(this.newBook) : this.newBook.title
       } else {
         this.form.title = this.book.title
       }
@@ -330,7 +342,14 @@ export default {
         return month1 - month2;
       }
       return day1 - day2;
-    }
+    },
+    joinTitle(row) {
+      if (row.sub_title) {
+        return row.title + "：" + row.sub_title
+      } else {
+        return row.title
+      }
+    },
   }
 }
 

diff --git a/app/calibre-pages/src/components/MetadataSearch.vue b/app/calibre-pages/src/components/MetadataSearch.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div v-loading="querySearchLoading">
-    <el-row >
+    <el-row>
       <el-col :span="12">
         <el-autocomplete
             v-model="query"
@@ -12,16 +12,14 @@
             @select="handleSelect"
         >
           <template #append>
-            <el-icon @click="searchMetadata">
-              <Search/>
-            </el-icon>
+            <el-button @click="searchMetadata" :icon="Search" type="success">搜索</el-button>
           </template>
         </el-autocomplete>
 
       </el-col>
     </el-row>
     <el-table :data="tableData" height="350" style="width: 100%" highlight-current-row
-              @current-change="handleCurrentChange">
+              @current-change="handleCurrentChange" :fit="false">
       <el-table-column label="封面" width="180">
         <template #default="scope">
           <el-image
@@ -30,7 +28,7 @@
               fit="cover"/>
         </template>
       </el-table-column>
-      <el-table-column prop="title" label="标题" width="180"/>
+      <el-table-column prop="title" :formatter="joinTitle" label="标题" width="180"/>
       <el-table-column prop="author" label="作者" width="180"/>
       <el-table-column prop="publisher" label="出版社"/>
       <el-table-column prop="pubdate" label="发布日期"/>
@@ -40,9 +38,15 @@
 </template>
 <script>
 import {ElButton, ElInput, ElNotification} from 'element-plus'
+import {Search} from "@element-plus/icons-vue";
 
 export default {
   name: 'MetadataSearch',
+  computed: {
+    Search() {
+      return Search
+    }
+  },
   components: {ElButton, ElInput},
   props: {
     book: {
@@ -128,6 +132,13 @@ export default {
     handleCurrentChange(val) {
       this.$emit('current-metadata', val)
     },
+    joinTitle(row) {
+      if (row.sub_title) {
+        return row.title + "：" + row.sub_title
+      } else {
+        return row.title
+      }
+    },
     handleSelect(item) {
       console.log(item)
       this.query = item.value

diff --git a/app/calibre-pages/src/styles/index.scss b/app/calibre-pages/src/styles/index.scss
@@ -6,14 +6,15 @@ a {
 
 .affix-container {
   text-align: center;
-  height: 50px;
+  height: 40px;
   border-radius: 4px;
   background: var(--el-color-primary-light-9);
   flex: 1;
   width: 100%;
+  margin-bottom: 10px;
 }
 .affix-container .el-input{
-  height: 50px;
+  height: 40px;
 }
 
 //* {

diff --git a/app/calibre-pages/src/views/Books.vue b/app/calibre-pages/src/views/Books.vue
@@ -10,7 +10,7 @@
         </el-col>
       </el-row>
       <el-row :gutter="20">
-        <el-col v-for="book in recentBooks" :key="book.id" :span="6" :lg="6" :sm="8" :xs="24">
+        <el-col v-for="book in recentBooks" :key="book.id" :span="6" :lg="6" :sm="12" :xs="24">
           <BookCard :book="book" :more_info="true" />
         </el-col>
       </el-row>

diff --git a/app/calibre-pages/src/views/Detail.vue b/app/calibre-pages/src/views/Detail.vue
@@ -16,7 +16,7 @@
       <!--      </el-col>-->
       <el-col :span="16" :xs="24">
         <div class="book-info">
-          <el-descriptions :title="book.title" column="1" size="large" border>
+          <el-descriptions :title="book.title" :column="1" size="large" border>
             <template #extra>
               <el-button type="primary" plain @click="dialogSearchVisible = true" :icon="Edit">
                 更新元数据
@@ -91,7 +91,7 @@
                   Rating
                 </div>
               </template>
-              <el-rate v-model="book.rating" max="10" disabled
+              <el-rate v-model="book.rating" :max="10" disabled
                        show-score text-color="#ff9900"
                        score-template="{value} points"/>
             </el-descriptions-item>

diff --git a/app/calibre-pages/src/views/Search.vue b/app/calibre-pages/src/views/Search.vue
@@ -25,7 +25,7 @@
   </el-text>
 
   <el-row :gutter="20">
-    <el-col v-for="book in books" :key="book.id" :span="6" :lg="6" :sm="8" :xs="24">
+    <el-col v-for="book in books" :key="book.id" :span="6" :lg="6" :sm="12" :xs="24">
       <BookCard :book="book" :more_info="true"/>
     </el-col>
   </el-row>