feng

src/components/Comment/styles.module.css

@@ -1,6 +1,7 @@
 .commentContainer {
   position: relative;
   display: inline-block;
+  margin-left: 8px;
 }
 
 .commentButton {
@@ -10,7 +11,7 @@
   padding: 4px;
   color: var(--ifm-color-emphasis-600);
   transition: all 0.2s ease;
-  opacity: 0;
+  opacity: 1;
   z-index: 100;
   display: flex;
   align-items: center;
@@ -126,7 +127,7 @@
   background-color: var(--ifm-color-primary-darker);
 }
 
-/* 当鼠标悬停在侧边栏项目上时显示评论按钮 */
-:global(.menu__link-wrapper:hover) .commentButton {
+/* 删除鼠标悬停显示按钮的样式 */
+/* :global(.menu__link-wrapper:hover) .commentButton {
   opacity: 1;
-} 
+} */ 

src/theme/DocSidebarItem/styles.module.css

@@ -10,6 +10,30 @@
   align-items: center;
   margin-left: auto;
   padding-right: 8px;
+  gap: 4px;
+}
+
+.bookmarkButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: var(--ifm-color-emphasis-600);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.bookmarkButton:hover {
+  color: var(--ifm-color-primary);
+  transform: scale(1.1);
+}
+
+.bookmarked {
+  color: var(--ifm-color-primary);
 }
 
 .bookmarkedItem {
@@ -23,7 +47,7 @@
 
 /* 确保侧边栏项目有足够的空间显示按钮 */
 :global(.menu__link-wrapper) {
-  padding-right: 60px !important;
+  padding-right: 80px !important;
   position: relative !important;
 }