fix bug

Former-commit-id: d5cb205b223f82d5fd7109de5157cce9e4f0f876
2026-06-21 22:31:52 -04:00 · 2023-08-27 11:51:40 +08:00
parent 69619bab54
commit 0cbc821900
25 changed files with 345 additions and 81 deletions
--- a/public/assets/styles/blue.css
+++ b/public/assets/styles/blue.css
@@ -4,7 +4,6 @@
 .delete-dialog-comfirm,
 .book-item-config,
 .book-cover-item-config,
-.side-menu-selector-container,
 .download-desk-button,
 .edit-dialog-comfirm,
 .change-location-button,
--- a/public/assets/styles/dark.css
+++ b/public/assets/styles/dark.css
@@ -62,7 +62,6 @@ body,
 .delete-dialog-comfirm,
 .book-item-config,
 .book-cover-item-config,
-.side-menu-selector-container,
 .download-desk-button,
 .edit-dialog-comfirm,
 .change-location-button,
--- a/public/assets/styles/default.css
+++ b/public/assets/styles/default.css
@@ -76,7 +76,6 @@ body,
 .delete-dialog-comfirm,
 .book-item-config,
 .book-cover-item-config,
-.side-menu-selector-container,
 .download-desk-button,
 .edit-dialog-comfirm,
 .change-location-button,
--- a/public/assets/styles/green.css
+++ b/public/assets/styles/green.css
@@ -4,7 +4,6 @@
 .delete-dialog-comfirm,
 .book-item-config,
 .book-cover-item-config,
-.side-menu-selector-container,
 .download-desk-button,
 .edit-dialog-comfirm,
 .change-location-button,
--- a/public/assets/styles/purple.css
+++ b/public/assets/styles/purple.css
@@ -4,7 +4,6 @@
 .delete-dialog-comfirm,
 .book-item-config,
 .book-cover-item-config,
-.side-menu-selector-container,
 .download-desk-button,
 .edit-dialog-comfirm,
 .change-location-button,
--- a/public/assets/styles/red.css
+++ b/public/assets/styles/red.css
@@ -13,7 +13,6 @@
 .update-dialog-container-button,
 .import-from-local,
 .single-control-switch,
-.side-menu-selector-container,
 .previous-chapter-single-container,
 .next-chapter-single-container,
 .book-bookmark-link,
--- a/src/assets/locales/cn/translation.json
+++ b/src/assets/locales/cn/translation.json
@@ -350,9 +350,10 @@
  "Chinese Conversion": "繁简转换",
  "Don't use first page as PDF cover": "不使用 PDF 首页作为封面",
  "Don't crop book cover": "不裁剪图书封面",
-  "Add to favorite": "添加到喜爱",
-  "Remove from favorite": "从喜爱移除",
+  "Add to Favorite": "添加到喜爱",
+  "Remove from Favorite": "从喜爱移除",
  "Details": "详细信息",
+  "Multiple Select": "多选",
  "You may see this error when the book you're importing is not supported by Koodo Reader, try converting it with Calibre": "暂不支持此图书，请尝试使用 Calibre 转化之后重新导入",
  "Shelf title can't be pure number": "书架名不能是纯数字",
  "Open Console": "打开控制台",
--- a/src/assets/locales/en/translation.json
+++ b/src/assets/locales/en/translation.json
@@ -128,6 +128,7 @@
  "Add to favorite": "Add to favorite",
  "Remove from favorite": "Remove from favorite",
  "Details": "Details",
+  "Multiple Select": "Multiple Select",
  "You may see this error when the book you're importing is not supported by Koodo Reader, try converting it with Calibre": "You may see this error when the book you're importing is not supported by Koodo Reader, try converting it with Calibre",
  "Simplified To Traditional": "Simplified To Traditional",
  "Traditional To Simplified": "Traditional To Simplified",
--- a/src/assets/styles/fonts/icomoon.eot
+++ b/src/assets/styles/fonts/icomoon.eot
--- a/src/assets/styles/fonts/icomoon.svg
+++ b/src/assets/styles/fonts/icomoon.svg
@@ -74,4 +74,15 @@
 <glyph unicode="&#xe940;" glyph-name="dropdown" horiz-adv-x="1040" d="M520.069 330.405l-393.395 393.395c-29.121 29.121-75.714 29.121-104.835 0s-29.121-75.714 0-104.835l435.223-435.223c2.647-4.236 5.824-7.942 9.53-11.648 14.825-14.825 33.886-22.238 53.476-21.708 19.061 0 38.651 6.883 53.476 21.708 3.707 3.707 6.883 7.413 9.53 11.648l435.223 435.223c14.295 14.295 21.708 33.357 21.708 52.417s-7.413 38.122-21.708 52.417c-29.121 29.121-75.714 29.121-104.835 0l-393.395-393.395z" />
 <glyph unicode="&#xe941;" glyph-name="eye" d="M448 448c0-35.346 28.654-64 64-64s64 28.654 64 64v0c0 35.346-28.654 64-64 64s-64-28.654-64-64v0zM933.12 469.333c-27.307 47.36-177.493 285.013-432.64 277.333-235.947-5.973-372.48-213.333-409.6-277.333-3.594-6.12-5.716-13.479-5.716-21.333s2.123-15.214 5.825-21.535l-0.109 0.201c26.88-46.507 170.667-277.333 421.973-277.333h10.667c235.947 5.973 372.907 213.333 409.6 277.333 3.594 6.12 5.716 13.479 5.716 21.333s-2.123 15.214-5.825 21.535l0.109-0.201zM512 298.667c-82.475 0-149.333 66.859-149.333 149.333s66.859 149.333 149.333 149.333c82.475 0 149.333-66.859 149.333-149.333v0c0-82.475-66.859-149.333-149.333-149.333v0z" />
 <glyph unicode="&#xe942;" glyph-name="night" d="M731.819 858.965c0.276-1.824 0.434-3.928 0.434-6.069 0-14.469-7.202-27.255-18.217-34.971l-0.137-0.091c-83.808-58.529-137.949-154.526-137.949-263.168 0-176.731 143.269-320 320-320 0.018 0 0.035 0 0.053 0h-0.003c23.546-0.024 42.624-19.117 42.624-42.667 0-9.653-3.206-18.558-8.611-25.707l0.078 0.107c-85.504-113.92-221.867-187.733-375.424-187.733-259.2 0-469.333 210.133-469.333 469.333s210.133 469.333 469.333 469.333c51.755 0 101.675-8.405 148.395-23.936 15.19-5.167 26.375-18.246 28.729-34.2l0.028-0.232z" />
+<glyph unicode="&#xe943;" glyph-name="trash-line" d="M416.285 581.789c-17.673 0-32-14.327-32-32v-344.574c0-17.673 14.327-32 32-32s32 14.327 32 32v344.574c0 17.673-14.326 32-32 32zM597.407 581.789c-17.673 0-32-14.327-32-32v-344.574c0-17.673 14.327-32 32-32s32 14.327 32 32v344.574c0 17.673-14.327 32-32 32zM833.43 847.582h-192.243v13.989c0 18.472-15.028 33.5-33.5 33.5h-193.215c-18.472 0-33.5-15.028-33.5-33.5v-13.989h-190.402c-19.851 0-36-16.149-36-36v-112.748c0-19.851 16.149-36 36-36h16.93c-12.358-22.526-17.819-49.862-15.203-78.221 0.014-0.15 0.029-0.301 0.045-0.451l52.619-493.881c2.274-23.978 13.394-46.381 31.33-63.107 18.147-16.924 41.295-26.244 65.181-26.244h339.733c23.875 0 47.028 9.313 65.193 26.226 17.948 16.711 29.1 39.096 31.419 63.055l53.66 493.886c0.017 0.153 0.032 0.306 0.047 0.459 2.67 28.38-2.752 55.737-15.089 78.279h16.996c19.851 0 36 16.149 36 36v112.747c-0.001 19.85-16.15 36-36.001 36zM767.825 590.764l-53.655-493.84c-0.017-0.152-0.032-0.306-0.047-0.459-1.607-17.095-16.683-31.536-32.919-31.536h-339.733c-16.208 0-31.23 14.415-32.804 31.479-0.014 0.15-0.029 0.301-0.045 0.45l-52.615 493.839c-1.799 20.027 3.513 38.979 14.229 50.728 6.272 6.878 13.546 10.365 21.62 10.365h440.288c8.060 0 15.313-3.479 21.558-10.339 10.683-11.734 15.955-30.67 14.123-50.687zM218.57 783.582h586.86v-56.748h-586.86v56.748z" />
+<glyph unicode="&#xe944;" glyph-name="detail" d="M910.2 618c-22 51.9-53.4 98.5-93.4 138.6-40 40-86.7 71.5-138.6 93.4-53.8 22.7-110.9 34.3-169.7 34.3s-115.9-11.5-169.7-34.3c-51.9-22-98.5-53.4-138.6-93.4-40-40-71.5-86.7-93.4-138.6-22.8-53.8-34.3-110.9-34.3-169.8 0-58.8 11.5-115.9 34.3-169.7 22-51.9 53.4-98.5 93.4-138.6 40-40 86.7-71.5 138.6-93.4 53.8-22.7 110.9-34.3 169.7-34.3s115.9 11.5 169.7 34.3c51.9 22 98.5 53.4 138.6 93.4 40 40 71.5 86.7 93.4 138.6 22.7 53.8 34.3 110.9 34.3 169.7 0 58.9-11.5 116-34.3 169.8zM765.9 191c-68.8-68.8-160.2-106.7-257.4-106.7s-188.6 37.9-257.4 106.6c-68.7 68.8-106.6 160.1-106.6 257.3s37.9 188.6 106.6 257.4 160.2 106.6 257.4 106.6 188.6-37.9 257.4-106.6c68.8-68.8 106.6-160.2 106.6-257.4s-37.9-188.5-106.6-257.2zM508.5 529.2c-19.9 0-36-16.1-36-36v-205.2c0-19.9 16.1-36 36-36s36 16.1 36 36v205.2c0 19.9-16.1 36-36 36zM508.5 644.5c-19.9 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.1 36-36 36z" />
+<glyph unicode="&#xe945;" glyph-name="bookshelf" d="M938.667 682.667c0 38.4 12.8 76.8 29.867 110.933s-4.267 81.067-42.667 81.067h-733.867c-106.667 0-192-85.333-192-192s85.333-192 192-192h733.867c38.4 0 59.733 46.933 42.667 81.067s-29.867 72.533-29.867 110.933zM874.667 576h-682.667c-59.733 0-106.667 46.933-106.667 106.667s46.933 106.667 106.667 106.667h682.667c-12.8-29.867-21.333-68.267-21.333-106.667s8.533-76.8 21.333-106.667zM832 405.333h-733.867c-38.4 0-59.733-46.933-42.667-81.067s29.867-72.533 29.867-110.933c0-38.4-12.8-76.8-29.867-110.933s4.267-81.067 42.667-81.067h733.867c106.667 0 192 85.333 192 192s-85.333 192-192 192zM832 106.667h-682.667c12.8 29.867 21.333 68.267 21.333 106.667s-8.533 76.8-21.333 106.667h682.667c59.733 0 106.667-46.933 106.667-106.667s-46.933-106.667-106.667-106.667z" />
+<glyph unicode="&#xe946;" glyph-name="edit-line" d="M257.7 208c2 0 4 0.2 6 0.5l168.2 29.5c2 0.4 3.9 1.3 5.3 2.8l423.9 423.9c3.9 3.9 3.9 10.2 0 14.1l-166.2 166.3c-1.9 1.9-4.4 2.9-7.1 2.9s-5.2-1-7.1-2.9l-423.9-423.9c-1.5-1.5-2.4-3.3-2.8-5.3l-29.5-168.2c-1.9-11.1 1.5-21.9 9.4-29.8 6.6-6.4 14.9-9.9 23.8-9.9zM325.1 382.4l362.7 362.6 73.3-73.3-362.7-362.6-88.9-15.7 15.6 89zM880 124h-736c-17.7 0-32-14.3-32-32v-36c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v36c0 17.7-14.3 32-32 32z" />
+<glyph unicode="&#xe947;" glyph-name="address-book" d="M780.19 838.095c40.396 0 73.143-32.747 73.143-73.143v0-633.905c0-40.396-32.747-73.143-73.143-73.143v0h-487.619c-40.396 0-73.143 32.747-73.143 73.143v0 48.762h-48.762v73.143h170.667v-73.143h-48.762v-48.762h487.619v633.905h-487.619v-48.762h48.762v-73.143h-170.667v73.143h48.762v48.762c0 40.396 32.747 73.143 73.143 73.143h487.619zM715.508 716.19v-536.381h-73.143v536.381h73.143zM292.571 594.286v-292.571h-73.143v292.571h73.143z" />
+<glyph unicode="&#xe948;" glyph-name="idea-line" d="M661.306 277.023c-12.42 0-24.55 6.252-31.54 17.604-10.716 17.4-5.297 40.191 12.104 50.907 74.011 45.578 118.196 124.607 118.196 211.401-0.001 136.783-111.283 248.065-248.066 248.065s-248.065-111.282-248.065-248.065c0-86.794 44.186-165.822 118.196-211.401 17.4-10.715 22.819-33.507 12.104-50.907-10.717-17.399-33.509-22.818-50.906-12.103-45.975 28.312-84.42 68.048-111.181 114.911-27.616 48.362-42.213 103.516-42.213 159.5 0 43.462 8.521 85.644 25.324 125.374 16.224 38.356 39.44 72.795 69.007 102.361 29.565 29.566 64.005 52.783 102.36 69.006 39.729 16.804 81.912 25.324 125.374 25.324s85.645-8.521 125.374-25.325c38.355-16.223 72.795-39.44 102.36-69.006s52.783-64.005 69.007-102.361c16.804-39.729 25.324-81.911 25.324-125.374 0-55.984-14.597-111.139-42.213-159.5-26.761-46.863-65.206-86.599-111.181-114.911-5.505-3.452-12.195-5.5-19.364-5.5 0 0-0.001 0-0.001 0v0zM661.269 134.696h-298.538c-20.435 0-37 16.565-37 37v140.174c0 20.435 16.565 37 37 37s37-16.565 37-37v-103.174h224.537v103.174c0 20.435 16.565 37 37 37s37-16.565 37-37v-140.174c0.001-20.435-16.565-37-36.999-37zM619.565 4.696h-215.13c-20.435 0-37 16.565-37 37s16.565 37 37 37h215.131c20.435 0 37-16.565 37-37s-16.566-37-37.001-37z" />
+<glyph unicode="&#xe949;" glyph-name="heart" d="M923 676.4c-13.4 31.1-32.6 58.9-56.9 82.8-24.3 23.8-52.5 42.4-84 55.5-32.5 13.5-66.9 20.3-102.4 20.3-49.3 0-97.4-13.5-139.2-39-10-6.1-19.5-12.8-28.5-20.1-9 7.3-18.5 14-28.5 20.1-41.8 25.5-89.9 39-139.2 39-35.5 0-69.9-6.8-102.4-20.3-31.4-13-59.7-31.7-84-55.5-24.4-23.9-43.5-51.7-56.9-82.8-13.9-32.3-21-66.6-21-101.9 0-33.3 6.8-68 20.3-103.3 11.3-29.5 27.5-60.1 48.2-91 32.8-48.9 77.9-99.9 133.9-151.6 92.8-85.7 184.7-144.9 188.6-147.3l23.7-15.2c10.5-6.7 24-6.7 34.5 0l23.7 15.2c3.9 2.5 95.7 61.6 188.6 147.3 56 51.7 101.1 102.7 133.9 151.6 20.7 30.9 37 61.5 48.2 91 13.5 35.3 20.3 70 20.3 103.3 0.1 35.3-7 69.6-20.9 101.9zM512 145.2s-356 228.1-356 429.3c0 101.9 84.3 184.5 188.3 184.5 73.1 0 136.5-40.8 167.7-100.4 31.2 59.6 94.6 100.4 167.7 100.4 104 0 188.3-82.6 188.3-184.5 0-201.2-356-429.3-356-429.3z" />
+<glyph unicode="&#xe94a;" glyph-name="home-line" d="M923.733 565.333c-85.333 70.4-206.933 174.933-362.667 309.333-27.733 23.467-70.4 23.467-98.133 0-155.733-134.4-277.333-238.933-362.667-309.333-14.933-14.933-25.6-34.133-25.6-53.333 0-38.4 32-70.4 70.4-70.4h46.933v-358.4c0-29.867 23.467-53.333 53.333-53.333h160c29.867 0 53.333 23.467 53.333 53.333v206.933h106.667v-206.933c0-29.867 23.467-53.333 53.333-53.333h160c29.867 0 53.333 23.467 53.333 53.333v358.4h46.933c38.4 0 70.4 32 70.4 70.4 0 21.333-10.667 40.533-25.6 53.333zM878.933 505.6h-57.6c-29.867 0-53.333-23.467-53.333-53.333v-358.4h-138.667v204.8c0 29.867-23.467 53.333-53.333 53.333h-128c-29.867 0-53.333-23.467-53.333-53.333v-206.933h-138.667v360.533c0 29.867-23.467 53.333-53.333 53.333h-57.6c-4.267 0-6.4 2.133-6.4 6.4 0 2.133 2.133 4.267 2.133 6.4 85.333 70.4 206.933 174.933 362.667 309.333 4.267 4.267 10.667 4.267 14.933 0 155.733-134.4 277.333-238.933 362.667-309.333 2.133-2.133 2.133-2.133 2.133-4.267 2.133-6.4-2.133-8.533-4.267-8.533z" />
+<glyph unicode="&#xe94b;" glyph-name="bookshelf-line" d="M882.667 651.867c0 33.36 11.12 66.72 25.947 96.373s-3.707 70.427-37.067 70.427h-637.547c-92.667 0-166.8-74.133-166.8-166.8s74.133-166.8 166.8-166.8h637.547c33.36 0 51.893 40.773 37.067 70.427s-25.947 63.013-25.947 96.373zM827.067 559.2h-593.067c-51.893 0-92.667 40.773-92.667 92.667s40.773 92.667 92.667 92.667h593.067c-11.12-25.947-18.533-59.307-18.533-92.667s7.413-66.72 18.533-92.667zM790 410.933h-637.547c-33.36 0-51.893-40.773-37.067-70.427s25.947-63.013 25.947-96.373c0-33.36-11.12-66.72-25.947-96.373s3.707-70.427 37.067-70.427h637.547c92.667 0 166.8 74.133 166.8 166.8s-74.133 166.8-166.8 166.8zM790 151.467h-593.067c11.12 25.947 18.533 59.307 18.533 92.667s-7.413 66.72-18.533 92.667h593.067c51.893 0 92.667-40.773 92.667-92.667s-40.773-92.667-92.667-92.667z" />
+<glyph unicode="&#xe94c;" glyph-name="highlight-line" d="M512 822.34c-205.617 0-372.309-166.69-372.309-372.309s166.69-372.309 372.309-372.309 372.309 166.69 372.309 372.309-166.69 372.309-372.309 372.309zM72 450.030c0 243.018 196.982 440 440 440s440-196.982 440-440-196.982-440-440-440-440 196.982-440 440zM631.34 715.721c9.689-6.066 16.033-16.676 16.040-28.769v-304.617c0-18.692-15.152-33.849-33.849-33.849s-33.849 15.153-33.849 33.849v249.851l-135.382-67.691v-182.16c0-18.692-15.152-33.849-33.849-33.849s-33.849 15.153-33.849 33.849v203.080c0.009 13.172 7.537 24.582 18.522 30.168l0.192 0.085 203.080 101.54c4.419 2.262 9.635 3.587 15.158 3.587 6.575 0 12.72-1.878 17.911-5.126l-0.138 0.082zM328.76 396.35c12.244 12.249 29.17 19.827 47.859 19.831h270.771c37.383 0 67.691-30.307 67.691-67.691v0-267.79c0-18.692-15.153-33.849-33.849-33.849s-33.849 15.153-33.849 33.849v267.79h-270.769v-267.79c0-18.692-15.152-33.849-33.849-33.849s-33.849 15.153-33.849 33.849v267.79c0.005 18.69 7.582 35.613 19.831 47.86v0z" />
+<glyph unicode="&#xe94d;" glyph-name="select" d="M940.117 753.094c-19.684 19.684-51.669 19.684-68.892 0l-477.326-482.246-241.124 236.202c-19.684 19.684-51.669 19.684-68.892 0-19.684-19.684-19.684-51.669 0-68.892l275.569-270.649c9.841-9.841 22.144-14.763 34.447-14.763s24.604 4.921 34.447 14.763l511.771 516.693c19.684 19.684 19.684 49.209 0 68.892z" />
 </font></defs></svg>
--- a/src/assets/styles/fonts/icomoon.ttf
+++ b/src/assets/styles/fonts/icomoon.ttf
--- a/src/assets/styles/fonts/icomoon.woff
+++ b/src/assets/styles/fonts/icomoon.woff
--- a/src/assets/styles/style.css
+++ b/src/assets/styles/style.css
@@ -1,10 +1,10 @@
@font-face {
  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?o3qvp2');
-  src:  url('fonts/icomoon.eot?o3qvp2#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?o3qvp2') format('truetype'),
-    url('fonts/icomoon.woff?o3qvp2') format('woff'),
-    url('fonts/icomoon.svg?o3qvp2#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?43s8j0');
+  src:  url('fonts/icomoon.eot?43s8j0#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?43s8j0') format('truetype'),
+    url('fonts/icomoon.woff?43s8j0') format('woff'),
+    url('fonts/icomoon.svg?43s8j0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
@@ -25,6 +25,39 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-bookshelf-line:before {
+  content: "\e94b";
+}
+.icon-highlight-line:before {
+  content: "\e94c";
+}
+.icon-select:before {
+  content: "\e94d";
+}
+.icon-trash-line:before {
+  content: "\e943";
+}
+.icon-detail:before {
+  content: "\e944";
+}
+.icon-bookshelf:before {
+  content: "\e945";
+}
+.icon-edit-line:before {
+  content: "\e946";
+}
+.icon-address-book:before {
+  content: "\e947";
+}
+.icon-idea-line:before {
+  content: "\e948";
+}
+.icon-heart:before {
+  content: "\e949";
+}
+.icon-home-line:before {
+  content: "\e94a";
+}
 .icon-day:before {
  content: "\e936";
 }
--- a/src/components/dialogs/actionDialog/component.tsx
+++ b/src/components/dialogs/actionDialog/component.tsx
@@ -55,6 +55,11 @@ class ActionDialog extends React.Component<
    toast.success(this.props.t("Add Successfully"));
    this.props.handleActionDialog(false);
  };
+  handleMultiSelect = () => {
+    this.props.handleSelectBook(true);
+    this.props.handleSelectedBooks([this.props.currentBook.key]);
+    this.props.handleActionDialog(false);
+  };
  handleCancelLoveBook = () => {
    AddFavorite.clear(this.props.currentBook.key);
    if (
@@ -125,14 +130,14 @@ class ActionDialog extends React.Component<
                }
              }}
            >
-              <span className="icon-love view-icon"></span>
+              <span className="icon-heart view-icon"></span>
              <p className="action-name">
                {AddFavorite.getAllFavorite().indexOf(
                  this.props.currentBook.key
                ) > -1 ? (
-                  <Trans>Remove from favorite</Trans>
+                  <Trans>Remove from Favorite</Trans>
                ) : (
-                  <Trans>Add to favorite</Trans>
+                  <Trans>Add to Favorite</Trans>
                )}
              </p>
            </div>
@@ -142,18 +147,29 @@ class ActionDialog extends React.Component<
                this.handleAddShelf();
              }}
            >
-              <span className="icon-shelf view-icon"></span>
+              <span className="icon-bookshelf-line view-icon"></span>
              <p className="action-name">
                <Trans>Add to Shelf</Trans>
              </p>
            </div>
+            <div
+              className="action-dialog-add"
+              onClick={() => {
+                this.handleMultiSelect();
+              }}
+            >
+              <span className="icon-select view-icon"></span>
+              <p className="action-name">
+                <Trans>Multiple Select</Trans>
+              </p>
+            </div>
            <div
              className="action-dialog-delete"
              onClick={() => {
                this.handleDeleteBook();
              }}
            >
-              <span className="icon-trash view-icon"></span>
+              <span className="icon-trash-line view-icon"></span>
              <p className="action-name">
                <Trans>Delete</Trans>
              </p>
@@ -164,7 +180,7 @@ class ActionDialog extends React.Component<
                this.handleEditBook();
              }}
            >
-              <span className="icon-edit view-icon"></span>
+              <span className="icon-edit-line view-icon"></span>
              <p className="action-name">
                <Trans>Edit</Trans>
              </p>
@@ -176,10 +192,10 @@ class ActionDialog extends React.Component<
              }}
            >
              <span
-                className="icon-idea view-icon"
+                className="icon-idea-line view-icon"
                style={{ fontSize: "17px" }}
              ></span>
-              <p className="action-name">
+              <p className="action-name" style={{ marginLeft: "12px" }}>
                <Trans>Details</Trans>
              </p>
            </div>
@@ -206,8 +222,10 @@ class ActionDialog extends React.Component<
                  className="icon-more view-icon"
                  style={{
                    display: "inline-block",
-                    marginRight: "15px",
+                    marginRight: "12px",
+                    marginLeft: "3px",
                    transform: "rotate(90deg)",
+                    fontSize: "12px",
                  }}
                ></span>
                <Trans>More Actions</Trans>
--- a/src/components/dialogs/actionDialog/index.tsx
+++ b/src/components/dialogs/actionDialog/index.tsx
@@ -2,7 +2,9 @@ import { connect } from "react-redux";
 import {
  handleEditDialog,
  handleDeleteDialog,
+  handleSelectBook,
  handleAddDialog,
+  handleSelectedBooks,
  handleActionDialog,
  handleReadingBook,
  handleFetchBooks,
@@ -19,6 +21,8 @@ const mapStateToProps = (state: stateType) => {
    currentBook: state.book.currentBook,
    books: state.manager.books,
    notes: state.reader.notes,
+    isSelectBook: state.manager.isSelectBook,
+
    deletedBooks: state.manager.deletedBooks,
  };
 };
@@ -30,6 +34,8 @@ const actionCreator = {
  handleActionDialog,
  handleFetchBooks,
  handleDetailDialog,
+  handleSelectBook,
+  handleSelectedBooks,
 };
 export default connect(
  mapStateToProps,
--- a/src/components/dialogs/actionDialog/interface.tsx
+++ b/src/components/dialogs/actionDialog/interface.tsx
@@ -11,6 +11,8 @@ export interface ActionDialogProps extends RouteComponentProps<any> {
  left: number;
  top: number;
  mode: string;
+  isSelectBook: boolean;
+
  handleFetchBooks: () => void;
  handleDeleteDialog: (isShow: boolean) => void;
  handleFetchBookmarks: () => void;
@@ -21,6 +23,8 @@ export interface ActionDialogProps extends RouteComponentProps<any> {
  handleAddDialog: (isShow: boolean) => void;
  handleActionDialog: (isShow: boolean) => void;
  handleDetailDialog: (isShow: boolean) => void;
+  handleSelectBook: (isSelectBook: boolean) => void;
+  handleSelectedBooks: (selectedBooks: string[]) => void;
 }
 export interface ActionDialogState {
  isShowExport: boolean;
--- a/src/components/selectBook/component.tsx
+++ b/src/components/selectBook/component.tsx
@@ -35,7 +35,7 @@ class SelectBook extends React.Component<BookListProps, BookListState> {
          }}
          className="book-manage-title"
        >
-          <Trans>{this.props.isSelectBook ? "Cancel" : "Select"}</Trans>
+          <Trans>{this.props.isSelectBook ? "Cancel" : ""}</Trans>
        </span>
        {this.props.isSelectBook && (
          <>
--- a/src/components/shelfSelector/component.tsx
+++ b/src/components/shelfSelector/component.tsx
@@ -42,6 +42,9 @@ class ShelfSelector extends React.Component<
      this.props.handleMode("shelf");
    });
  };
+  handleDeletePopup = (isOpenDelete: boolean) => {
+    this.setState({ isOpenDelete });
+  };
  renderShelfList = () => {
    let shelfList = ShelfUtil.getShelf();
    let shelfTitle = Object.keys(shelfList);
@@ -59,9 +62,7 @@ class ShelfSelector extends React.Component<
      );
    });
  };
-  handleDeletePopup = (isOpenDelete: boolean) => {
-    this.setState({ isOpenDelete });
-  };
+
  render() {
    if (isElectron) {
      //兼容之前的版本
--- a/src/constants/sideMenu.tsx
+++ b/src/constants/sideMenu.tsx
@@ -1,28 +1,28 @@
 export const sideMenu = [
  {
    name: "Books",
-    icon: "home",
+    icon: "home-line",
    mode: "home",
  },
  {
    name: "Favorites",
-    icon: "love",
+    icon: "heart",
    mode: "favorite",
  },

  {
    name: "Notes",
-    icon: "idea",
+    icon: "idea-line",
    mode: "note",
  },
  {
    name: "Highlights",
-    icon: "digest",
+    icon: "highlight-line",
    mode: "digest",
  },
  {
    name: "Deleted Books",
-    icon: "trash",
+    icon: "trash-line",
    mode: "trash",
  },
 ];
--- a/src/containers/lists/bookList/booklist.css
+++ b/src/containers/lists/bookList/booklist.css
@@ -1,6 +1,6 @@
 .book-list-container-parent {
  position: absolute;
-  top: 125px;
+  top: 80px;
  left: 220px;
  width: calc(100% - 220px);
  height: calc(100% - 125px);
@@ -11,7 +11,7 @@
  align-items: center;
  justify-content: space-between;
  position: absolute;
-  top: 85px;
+  bottom: 10px;
  left: 220px;
  width: calc(100% - 220px);
 }
--- a/src/containers/lists/bookList/component.tsx
+++ b/src/containers/lists/bookList/component.tsx
@@ -16,7 +16,6 @@ import ViewMode from "../../../components/viewMode";
 import { backup } from "../../../utils/syncUtils/backupUtil";
 import { isElectron } from "react-device-detect";
 import SelectBook from "../../../components/selectBook";
-import ShelfSelector from "../../../components/shelfSelector";
 declare var window: any;
 class BookList extends React.Component<BookListProps, BookListState> {
  constructor(props: BookListProps) {
@@ -191,12 +190,11 @@ class BookList extends React.Component<BookListProps, BookListState> {
          }
        >
          <SelectBook />
-          <div style={this.props.isSelectBook ? { display: "none" } : {}}>
+          {/* <div style={this.props.isSelectBook ? { display: "none" } : {}}>
            <ShelfSelector />
-          </div>
+          </div> */}
          <ViewMode />
        </div>
-
        <div
          className="book-list-container-parent"
          style={
--- a/src/containers/sidebar/component.tsx
+++ b/src/containers/sidebar/component.tsx
@@ -5,13 +5,18 @@ import { SidebarProps, SidebarState } from "./interface";
 import { withRouter } from "react-router-dom";
 import StorageUtil from "../../utils/serviceUtils/storageUtil";
 import { openExternalUrl } from "../../utils/serviceUtils/urlUtil";
-
+import ShelfUtil from "../../utils/readUtils/shelfUtil";
+import DeletePopup from "../../components/dialogs/deletePopup";
 class Sidebar extends React.Component<SidebarProps, SidebarState> {
  constructor(props: SidebarProps) {
    super(props);
    this.state = {
      index: 0,
      hoverIndex: -1,
+      hoverShelfIndex: -1,
+      isCollpaseShelf: false,
+      isOpenDelete: false,
+      shelfIndex: 0,
      isCollapsed:
        StorageUtil.getReaderConfig("isCollapsed") === "yes" || false,
    };
@@ -35,6 +40,9 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
  handleHover = (index: number) => {
    this.setState({ hoverIndex: index });
  };
+  handleShelfHover = (index: number) => {
+    this.setState({ hoverShelfIndex: index });
+  };
  handleCollapse = (isCollapsed: boolean) => {
    this.setState({ isCollapsed });
    this.props.handleCollapse(isCollapsed);
@@ -43,6 +51,20 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
  handleJump = (url: string) => {
    openExternalUrl(url);
  };
+  handleDeleteShelf = () => {
+    if (this.state.shelfIndex < 1) return;
+    let shelfTitles = Object.keys(ShelfUtil.getShelf());
+    //获取当前书架名
+    let currentShelfTitle = shelfTitles[this.state.shelfIndex];
+    ShelfUtil.removeShelf(currentShelfTitle);
+    this.setState({ shelfIndex: 0 }, () => {
+      this.props.handleShelfIndex(0);
+      this.props.handleMode("shelf");
+    });
+  };
+  handleDeletePopup = (isOpenDelete: boolean) => {
+    this.setState({ isOpenDelete });
+  };
  render() {
    const renderSideMenu = () => {
      return sideMenu.map((item, index) => {
@@ -50,7 +72,7 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
          <li
            key={item.name}
            className={
-              this.state.index === index
+              this.state.index === index && this.props.mode !== "shelf"
                ? "active side-menu-item"
                : "side-menu-item"
            }
@@ -66,15 +88,15 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
            }}
            style={this.props.isCollapsed ? { width: 40, marginLeft: 15 } : {}}
          >
-            {this.state.index === index ? (
+            {this.state.index === index && this.props.mode !== "shelf" ? (
              <div className="side-menu-selector-container"></div>
            ) : null}
-            {this.state.hoverIndex === index ? (
+            {this.state.hoverIndex === index && this.props.mode !== "shelf" ? (
              <div className="side-menu-hover-container"></div>
            ) : null}
            <div
              className={
-                this.state.index === index
+                this.state.index === index && this.props.mode !== "shelf"
                  ? "side-menu-selector active-selector"
                  : "side-menu-selector "
              }
@@ -85,13 +107,13 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
              >
                <span
                  className={
-                    this.state.index === index
+                    this.state.index === index && this.props.mode !== "shelf"
                      ? `icon-${item.icon}  active-icon`
                      : `icon-${item.icon}`
                  }
                  style={
                    this.props.isCollapsed
-                      ? { position: "fixed", marginLeft: "-6px" }
+                      ? { position: "relative", marginLeft: "-9px" }
                      : {}
                  }
                ></span>
@@ -111,36 +133,162 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
        );
      });
    };
-    return (
-      <div className="sidebar">
-        <div
-          className="sidebar-list-icon"
-          onClick={() => {
-            this.handleCollapse(!this.state.isCollapsed);
-          }}
-        >
-          <span className="icon-menu sidebar-list"></span>
-        </div>
+    const renderSideShelf = () => {
+      let shelfList = ShelfUtil.getShelf();
+      let shelfTitle = Object.keys(shelfList);

-        <img
-          src={
-            StorageUtil.getReaderConfig("appSkin") === "night" ||
-            (StorageUtil.getReaderConfig("appSkin") === "system" &&
-              StorageUtil.getReaderConfig("isOSNight") === "yes")
-              ? "./assets/label_light.png"
-              : "./assets/label.png"
-          }
-          alt=""
-          onClick={() => {
-            this.handleJump("https://koodo.960960.xyz");
-          }}
-          style={this.state.isCollapsed ? { display: "none" } : {}}
-          className="logo"
-        />
-        <div className="side-menu-container-parent">
-          <ul className="side-menu-container">{renderSideMenu()}</ul>
-        </div>
-      </div>
+      return shelfTitle.map((item, index) => {
+        return (
+          <li
+            key={item}
+            className={
+              this.props.shelfIndex === index
+                ? "active side-menu-item"
+                : "side-menu-item"
+            }
+            id={`sidebar-${index}`}
+            onClick={() => {
+              this.props.handleShelfIndex(index);
+              if (index > 0) {
+                this.props.handleMode("shelf");
+              } else {
+                this.props.handleMode("home");
+              }
+              this.setState({ index: -1 });
+            }}
+            onMouseEnter={() => {
+              this.handleShelfHover(index);
+            }}
+            onMouseLeave={() => {
+              this.handleShelfHover(-1);
+            }}
+            style={
+              index === 0
+                ? { display: "none" }
+                : this.props.isCollapsed
+                ? { width: 40, marginLeft: 15 }
+                : {}
+            }
+          >
+            {this.props.shelfIndex === index ? (
+              <div className="side-menu-selector-container"></div>
+            ) : null}
+            {this.state.hoverShelfIndex === index ? (
+              <div className="side-menu-hover-container"></div>
+            ) : null}
+            <div
+              className={
+                this.props.shelfIndex === index
+                  ? "side-menu-selector active-selector"
+                  : "side-menu-selector "
+              }
+            >
+              <div
+                className="side-menu-icon"
+                style={this.props.isCollapsed ? {} : { marginLeft: "38px" }}
+              >
+                <span
+                  className={
+                    this.props.shelfIndex === index
+                      ? `icon-bookshelf-line  active-icon`
+                      : `icon-bookshelf-line`
+                  }
+                  style={
+                    this.props.isCollapsed
+                      ? { position: "relative", marginLeft: "-9px" }
+                      : {}
+                  }
+                ></span>
+              </div>
+
+              <span
+                style={
+                  this.props.isCollapsed
+                    ? { display: "none", width: "70%" }
+                    : { width: "60%" }
+                }
+              >
+                {this.props.t(item)}
+              </span>
+            </div>
+          </li>
+        );
+      });
+    };
+    const deletePopupProps = {
+      mode: "shelf",
+      name: Object.keys(ShelfUtil.getShelf())[this.state.shelfIndex],
+      title: "Delete this shelf",
+      description: "This action will clear and remove this shelf",
+      handleDeletePopup: this.handleDeletePopup,
+      handleDeleteOpearion: this.handleDeleteShelf,
+    };
+    return (
+      <>
+        {" "}
+        <div className="sidebar">
+          <div
+            className="sidebar-list-icon"
+            onClick={() => {
+              this.handleCollapse(!this.state.isCollapsed);
+            }}
+          >
+            <span className="icon-menu sidebar-list"></span>
+          </div>
+
+          <img
+            src={
+              StorageUtil.getReaderConfig("appSkin") === "night" ||
+              (StorageUtil.getReaderConfig("appSkin") === "system" &&
+                StorageUtil.getReaderConfig("isOSNight") === "yes")
+                ? "./assets/label_light.png"
+                : "./assets/label.png"
+            }
+            alt=""
+            onClick={() => {
+              this.handleJump("https://koodo.960960.xyz");
+            }}
+            style={this.state.isCollapsed ? { display: "none" } : {}}
+            className="logo"
+          />
+          <div
+            className="side-menu-container-parent"
+            style={this.state.isCollapsed ? { width: "70px" } : {}}
+          >
+            <ul className="side-menu-container">{renderSideMenu()}</ul>
+            <div
+              className="side-shelf-title-container"
+              style={
+                this.state.isCollapsed
+                  ? { display: "none" }
+                  : this.state.isCollpaseShelf
+                  ? {}
+                  : { border: "none" }
+              }
+            >
+              <div className="side-shelf-title">我的书架</div>
+              <span
+                className="icon-dropdown side-shelf-title-icon"
+                onClick={() => {
+                  this.setState({
+                    isCollpaseShelf: !this.state.isCollpaseShelf,
+                  });
+                }}
+                style={
+                  this.state.isCollpaseShelf
+                    ? { transform: "rotate(-90deg)" }
+                    : {}
+                }
+              ></span>
+            </div>
+
+            {!this.state.isCollpaseShelf && (
+              <ul className="side-shelf-container">{renderSideShelf()}</ul>
+            )}
+          </div>
+        </div>{" "}
+        {this.state.isOpenDelete && <DeletePopup {...deletePopupProps} />}
+      </>
    );
  }
 }
--- a/src/containers/sidebar/index.tsx
+++ b/src/containers/sidebar/index.tsx
@@ -12,7 +12,11 @@ import { withTranslation } from "react-i18next";
 import Sidebar from "./component";

 const mapStateToProps = (state: stateType) => {
-  return { mode: state.sidebar.mode, isCollapsed: state.sidebar.isCollapsed };
+  return {
+    mode: state.sidebar.mode,
+    isCollapsed: state.sidebar.isCollapsed,
+    shelfIndex: state.sidebar.shelfIndex,
+  };
 };
 const actionCreator = {
  handleMode,
--- a/src/containers/sidebar/interface.tsx
+++ b/src/containers/sidebar/interface.tsx
@@ -3,6 +3,8 @@ import { RouteComponentProps } from "react-router";
 export interface SidebarProps extends RouteComponentProps<any> {
  mode: string;
  isCollapsed: boolean;
+  shelfIndex: number;
+
  handleMode: (mode: string) => void;
  handleSearch: (isSearch: boolean) => void;
  handleCollapse: (isCollapsed: boolean) => void;
@@ -15,5 +17,9 @@ export interface SidebarProps extends RouteComponentProps<any> {
 export interface SidebarState {
  index: number;
  hoverIndex: number;
+  hoverShelfIndex: number;
  isCollapsed: boolean;
+  isCollpaseShelf: boolean;
+  shelfIndex: number;
+  isOpenDelete: boolean;
 }
--- a/src/containers/sidebar/sidebar.css
+++ b/src/containers/sidebar/sidebar.css
@@ -14,8 +14,22 @@
  position: relative;
  top: 85px;
  width: 210px;
-  height: 100%;
-  overflow: hidden;
+  height: calc(100% - 100px);
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.side-menu-container-parent:hover::-webkit-scrollbar-thumb,
+.side-menu-container-parent:active::-webkit-scrollbar-thumb,
+.side-menu-container-parent:focus::-webkit-scrollbar-thumb {
+  display: block;
+  width: 1px;
+}
+.side-menu-container-parent::-webkit-scrollbar-thumb {
+  display: none;
+}
+.side-menu-container-parent::-webkit-scrollbar {
+  width: 2px;
+  height: 0.5rem;
 }
 .sidebar-list {
  margin-right: 5px;
@@ -42,8 +56,13 @@
 .side-menu-container {
  /* overflow: hidden; */
  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
+  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
+  box-sizing: content-box;
+  position: relative;
+}
+.side-shelf-container {
+  /* overflow: hidden; */
+  width: 100%;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  box-sizing: content-box;
  position: relative;
@@ -51,7 +70,7 @@

 .side-menu-icon {
  /* float: left; */
-  font-size: 17px;
+  font-size: 22px;
  margin: 9px 12px 7px 18px;
  display: flex;
  justify-content: center;
@@ -68,7 +87,7 @@
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: -20px;
-  margin-bottom: 10px;
+  margin-bottom: 3px;
  position: relative;
  bottom: 1px;
  overflow: hidden;
@@ -99,7 +118,27 @@
  white-space: nowrap;
  overflow-x: hidden;
 }
-
+.side-shelf-title {
+  font-size: 17px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  display: inline-block;
+}
+.side-shelf-title-container {
+  width: 70%;
+  margin-left: 10%;
+  border-bottom: 1px solid #ccc;
+}
+.side-shelf-title-icon {
+  margin-top: 13px;
+  float: right;
+  font-weight: 500;
+  font-size: 14px;
+  transform-origin: center center;
+  transition: transform 0.1s ease;
+  cursor: pointer;
+}
 .side-menu-selector-container {
  width: 100%;
  height: 39px;