general ui tweaks

electh · Jan 27, 2025 · 95b2f19 · 95b2f19
1 parent 6f0781f
commit 95b2f19
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 22 deletions.
diff --git a/src/components/ArticleList/components/ArticleCard.jsx b/src/components/ArticleList/components/ArticleCard.jsx
@@ -103,7 +103,7 @@ export default function ArticleCard({ article }) {
       ref={cardRef}
       className={cn(
         "cursor-pointer select-none overflow-hidden p-2 rounded-lg",
-        "relative transform-gpu transition duration-200",
+        "relative transform-gpu transition-background duration-200",
         "bg-transparent contain-content",
         "hover:bg-background/70",
         parseInt(articleId) === article.id && "bg-background/70 shadow-custom",
@@ -118,7 +118,7 @@ export default function ArticleCard({ article }) {
       />
       <div
         className={cn(
-          "card-content flex flex-col gap-1",
+          "card-content flex flex-col gap-1 transition-opacity",
           article.status === "read" &&
             article.starred === false &&
             "opacity-50",

diff --git a/src/components/ArticleList/components/ArticleListFooter.jsx b/src/components/ArticleList/components/ArticleListFooter.jsx
@@ -1,5 +1,5 @@
 import { filter } from "@/stores/articlesStore";
-import { CircleDot, Infinity, Star } from "lucide-react";
+import { CircleDot, Star, Text } from "lucide-react";
 import { Tab, Tabs } from "@heroui/react";
 import { useStore } from "@nanostores/react";
 import AudioPlayer from "@/components/ArticleView/components/AudioPlayer.jsx";
@@ -38,7 +38,7 @@ export default function ArticleListFooter() {
           key="starred"
           title={
             <div className="flex items-center space-x-1.5">
-              <Star className="size-3" />
+              <Star className="size-3 fill-current" />
               <span>{t("articleList.starred")}</span>
             </div>
           }
@@ -47,7 +47,7 @@ export default function ArticleListFooter() {
           key="unread"
           title={
             <div className="flex items-center space-x-1.5">
-              <CircleDot className="size-3" />
+              <CircleDot className="size-3 p-[1px] fill-current" />
               <span>{t("articleList.unread")}</span>
             </div>
           }
@@ -56,7 +56,7 @@ export default function ArticleListFooter() {
           key="all"
           title={
             <div className="flex items-center space-x-1.5">
-              <Infinity className="size-3" />
+              <Text strokeWidth={4} className="size-3" />
               <span>{t("articleList.all")}</span>
             </div>
           }

diff --git a/src/components/ArticleView/ArticleView.css b/src/components/ArticleView/ArticleView.css
@@ -98,7 +98,7 @@ div.force-dark-code-theme .shiki span {
 
 /*image gallery*/
 .PhotoView-Slider__BannerWrap {
-  @apply pt-safe-or-4 pl-safe-or-4 h-auto
+  @apply pt-safe-or-4 px-safe-or-4 h-auto flex-row-reverse
 }
 
 /*图片计数显示*/

diff --git a/src/components/ArticleView/components/ActionButtons.jsx b/src/components/ArticleView/components/ActionButtons.jsx
@@ -186,9 +186,9 @@ export default function ActionButtons({ parentRef }) {
               isIconOnly
             >
               {$activeArticle?.status === "read" ? (
-                <Circle className="size-4 text-default-500" />
+                <Circle className="size-4 text-default-500 p-0.5" />
               ) : (
-                <CircleDot className="size-4 text-default-500" />
+                <CircleDot className="size-4 text-default-500 p-0.5 fill-current" />
               )}
               <span className="sr-only">
                 {$activeArticle?.status === "read"

diff --git a/src/components/FeedList/components/ArticlesGroup.jsx b/src/components/FeedList/components/ArticlesGroup.jsx
@@ -46,7 +46,7 @@ const ArticlesGroup = () => {
     }
   };
 
-  const { icon, text, count } = getDisplayInfo();
+  const { text, count } = getDisplayInfo();
   return (
     <SidebarGroup className="group-data-[collapsible=icon]:hidden">
       <SidebarGroupLabel>{t("common.article")}</SidebarGroupLabel>
@@ -56,8 +56,8 @@ const ArticlesGroup = () => {
         >
           <SidebarMenuButton asChild>
             <Link to="/" onClick={() => isMobile && setOpenMobile(false)}>
-              {icon}
-              <span>{text}</span>
+              {/*{icon}*/}
+              <span className="font-semibold">{text}</span>
             </Link>
           </SidebarMenuButton>
           <SidebarMenuBadge>{count !== 0 && count}</SidebarMenuBadge>

diff --git a/src/components/FeedList/components/FeedsGroupContent.jsx b/src/components/FeedList/components/FeedsGroupContent.jsx
@@ -28,10 +28,10 @@ const FeedsGroupContent = ({ category }) => {
   const { isMobile, setOpenMobile } = useSidebar();
   const { categoryId, feedId } = useParams();
   const { defaultExpandCategory } = useStore(settingsState);
-  
+
   // 从本地存储获取展开状态
   const getStoredExpandState = () => {
-    const stored = localStorage.getItem('categoryExpanded');
+    const stored = localStorage.getItem("categoryExpanded");
     return stored ? JSON.parse(stored) : {};
   };
 
@@ -45,14 +45,14 @@ const FeedsGroupContent = ({ category }) => {
   const updateExpandState = (isOpen) => {
     const stored = getStoredExpandState();
     stored[category.id] = isOpen;
-    localStorage.setItem('categoryExpanded', JSON.stringify(stored));
+    localStorage.setItem("categoryExpanded", JSON.stringify(stored));
     setOpen(isOpen);
   };
 
   useEffect(() => {
     if (feedId) {
       const shouldExpand = category.feeds.some(
-        (feed) => parseInt(feedId) === feed.id
+        (feed) => parseInt(feedId) === feed.id,
       );
       // 只在需要展开时更新状态
       if (shouldExpand) {
@@ -67,11 +67,7 @@ const FeedsGroupContent = ({ category }) => {
   }, [feedId, category.id]);
 
   return (
-    <Collapsible
-      key={category.id}
-      open={open}
-      onOpenChange={updateExpandState}
-    >
+    <Collapsible key={category.id} open={open} onOpenChange={updateExpandState}>
       <SidebarMenuItem key={`menu-${category.id}`}>
         <SidebarMenuButton
           className={cn(categoryId === category.id && "bg-default rounded-md")}
@@ -81,7 +77,7 @@ const FeedsGroupContent = ({ category }) => {
             to={`/category/${category.id}`}
             onClick={() => isMobile && setOpenMobile(false)}
           >
-            <span className={"pl-6"}>{category.title}</span>
+            <span className={"pl-6 font-medium"}>{category.title}</span>
           </Link>
         </SidebarMenuButton>
         <CollapsibleTrigger asChild>