feat: implement toolbar for image gallery

electh · Jan 26, 2025 · a21e99d · a21e99d
1 parent 6d5aeec
commit a21e99d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/components/ArticleView/ArticleView.css b/src/components/ArticleView/ArticleView.css
@@ -94,4 +94,39 @@ div.force-dark-code-theme .shiki,
 div.force-dark-code-theme .shiki span {
   background-color: var(--shiki-dark-bg) !important;
   color: var(--shiki-dark) !important;
-}
+}
+
+/*image gallery*/
+.PhotoView-Slider__BannerWrap {
+  @apply p-4 h-auto
+}
+
+/*图片计数显示*/
+.PhotoView-Slider__Counter {
+  @apply hidden;
+}
+
+/*顶部工具栏*/
+.PhotoView-Slider__BannerWrap {
+  @apply bg-transparent;
+}
+
+/*关闭按钮*/
+.PhotoView-Slider__toolbarIcon {
+  @apply p-2 bg-black/50 rounded-full;
+}
+
+.PhotoView-Slider__BannerRight svg {
+  @apply size-8
+}
+
+/*导航按钮容器*/
+.PhotoView-Slider__ArrowLeft, .PhotoView-Slider__ArrowRight {
+  @apply hidden w-auto px-4 md:flex animate-in fade-in zoom-in
+}
+
+/*导航按钮*/
+.PhotoView-Slider__ArrowLeft svg, .PhotoView-Slider__ArrowRight svg {
+  @apply bg-black/50 rounded-full p-2 size-4;
+}
+
diff --git a/src/components/ArticleView/ArticleView.jsx b/src/components/ArticleView/ArticleView.jsx
@@ -231,7 +231,7 @@ const ArticleView = () => {
                   <Divider className="my-4" />
                   {audioEnclosure && <PlayAndPause source={audioEnclosure} />}
                   <PhotoProvider
-                    bannerVisible={false}
+                    bannerVisible={true}
                     maskOpacity={0.8}
                     loop={false}
                     speed={() => 300}