📦 feature(put-book): 添加书籍时 展示书籍基本信息

src/scss/index.scss

@@ -101,3 +101,11 @@ body {
 .theme {
   color: $theme-color;
 }
+
+.popover-book-info {
+  line-height: 1.8;
+
+  span {
+    font-weight: bold;
+  }
+}

src/views/put/put-book.vue

@@ -42,21 +42,33 @@
           </a-select>
         </a-form-item>
         <a-form-item label="书籍">
-          <a-select show-search
-                    placeholder="请输入要搜索的书名"
-                    not-found-content="暂无数据"
-                    :default-active-first-option="false"
-                    :filter-option="false"
-                    :show-arrow="false"
-                    :value="addFormState.book.bid"
-                    @search="onBookSearch"
-                    @change="onBookCheck">
-            <a-select-option v-for="book in addFormState.books"
-                             :value="book.bid"
-                             :key="book">
-              {{book.name}}
-            </a-select-option>
-          </a-select>
+          <a-popover :title="addFormState.book.name">
+            <template #content>
+              <div class="popover-book-info"
+                   v-if="addFormState.book.id">
+                <p>书籍Bid: <span>{{ addFormState.book.bid }}</span></p>
+                <p>书籍Channel: <span>{{ addFormState.book.channel_name }}</span></p>
+                <p>上架状态: <span>{{ addFormState.book.is_on_shelf }}</span></p>
+                <p>上架时间: <span>{{ addFormState.book.shelf_time }}</span></p>
+              </div>
+              <p v-else>请先输入要选择的书籍</p>
+            </template>
+            <a-select show-search
+                      placeholder="请输入要搜索的书名"
+                      not-found-content="暂无数据"
+                      :default-active-first-option="false"
+                      :filter-option="false"
+                      :show-arrow="false"
+                      :value="addFormState.book.bid"
+                      @search="onBookSearch"
+                      @change="onBookCheck">
+              <a-select-option v-for="book in addFormState.books"
+                               :value="book.bid"
+                               :key="book">
+                {{book.name}}
+              </a-select-option>
+            </a-select>
+          </a-popover>
         </a-form-item>
         <a-form-item label="流量平台">
           <a-select v-model:value="addFormState.platform">