feat: Implement card scaling feature for BookCardItem and BookList components

src/components/bookCardItem/bookCardItem.css

@@ -1,15 +1,16 @@
 .book-list-item {
-  width: 133px;
+  width: calc(133px * var(--card-scale, 1));
   /* height: 192px; */
   float: left;
   overflow: hidden;
   position: relative;
 }
 .book-item-cover {
-  width: 105px;
+  width: calc(105px * var(--card-scale, 1));
   /* height: 137px; */
   opacity: 1;
-  margin: 10px 15px 5px 15px;
+  margin: calc(10px * var(--card-scale, 1)) calc(15px * var(--card-scale, 1))
+    calc(5px * var(--card-scale, 1)) calc(15px * var(--card-scale, 1));
   cursor: pointer;
   /* overflow: hidden; */
   display: flex;

src/components/bookCardItem/component.tsx

@@ -154,13 +154,13 @@ class BookCardItem extends React.Component<BookCardProps, BookCardState> {
             style={
               ConfigService.getReaderConfig("isDisableCrop") === "yes"
                 ? {
-                    height: "168px",
+                    height: `${168 * (this.props.cardScale ?? parseFloat(ConfigService.getReaderConfig("cardScale") || "1"))}px`,
                     alignItems: "flex-end",
                     background: "rgba(255, 255,255, 0)",
                     boxShadow: "0px 0px 5px rgba(0, 0, 0, 0)",
                   }
                 : {
-                    height: "137px",
+                    height: `${137 * (this.props.cardScale ?? parseFloat(ConfigService.getReaderConfig("cardScale") || "1"))}px`,
                     alignItems: "center",
                     overflow: "hidden",
                   }

src/components/bookCardItem/interface.tsx

@@ -10,6 +10,7 @@ export interface BookCardProps extends RouteComponentProps<any> {
   dragItem: string;
   selectedBooks: string[];
   refreshBookKey: string;
+  cardScale?: number;
   handleSelectBook: (isSelectBook: boolean) => void;
   handleReadingBook: (book: BookModel) => void;
   handleActionDialog: (isShowActionDialog: boolean) => void;

src/containers/lists/bookList/booklist.css

@@ -104,3 +104,35 @@
   display: flex;
   align-items: center;
 }
+.book-card-scale-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 120px !important;
+  height: 4px;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+  margin-right: 10px;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.book-card-scale-slider:hover {
+  opacity: 1;
+}
+.book-card-scale-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: 2px;
+}
+.book-card-scale-slider::-moz-range-thumb {
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  margin-top: 2px;
+}

src/containers/lists/bookList/component.tsx

@@ -46,6 +46,7 @@ class BookList extends React.Component<BookListProps, BookListState> {
       displayedBooksCount: 24,
       isLoadingMore: false,
       fullBooksData: [], // 存储从数据库加载的完整书籍数据
+      cardScale: parseFloat(ConfigService.getReaderConfig("cardScale") || "1"),
     };
   }
   UNSAFE_componentWillMount() {
@@ -268,6 +269,12 @@ class BookList extends React.Component<BookListProps, BookListState> {
       );
     });
   };
+  handleCardScaleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const scale = parseFloat(e.target.value);
+    this.setState({ cardScale: scale });
+    ConfigService.setReaderConfig("cardScale", String(scale));
+  };
+
   renderBookList = (books: Book[], bookMode: string) => {
     if (books.length === 0 && !this.props.isSearch) {
       return <Redirect to="/manager/empty" />;
@@ -295,6 +302,7 @@ class BookList extends React.Component<BookListProps, BookListState> {
           {...{
             key: index,
             book: item,
+            cardScale: this.state.cardScale,
             isSelected: this.props.selectedBooks.indexOf(item.key) > -1,
           }}
         />
@@ -363,6 +371,18 @@ class BookList extends React.Component<BookListProps, BookListState> {
             style={this.props.isSelectBook ? { display: "none" } : {}}
             className="book-list-header-right"
           >
+            {this.props.viewMode === "card" && (
+              <input
+                type="range"
+                min="0.6"
+                max="2"
+                step="0.05"
+                value={this.state.cardScale}
+                onChange={this.handleCardScaleChange}
+                className="book-card-scale-slider"
+                title="Adjust cover size"
+              />
+            )}
             <div className="book-list-total-page">
               <Trans i18nKey="Total books" count={books.length}>
                 {"Total " + books.length + " books"}
@@ -380,7 +400,13 @@ class BookList extends React.Component<BookListProps, BookListState> {
           }
         >
           <div className="book-list-container">
-            <ul className="book-list-item-box" ref={this.scrollContainer}>
+            <ul
+              className="book-list-item-box"
+              ref={this.scrollContainer}
+              style={
+                { "--card-scale": this.state.cardScale } as React.CSSProperties
+              }
+            >
               {this.renderBookList(books, bookMode)}
             </ul>
           </div>

src/containers/lists/bookList/interface.tsx

@@ -29,4 +29,5 @@ export interface BookListState {
   displayedBooksCount: number;
   isLoadingMore: boolean;
   fullBooksData: BookModel[];
+  cardScale: number;
 }