From b1d02c9f82e20e3bbc052a22519b189a81550a7e Mon Sep 17 00:00:00 2001
From: ezequielnick <107352853+ezequielnick@users.noreply.github.com>
Date: Sun, 5 Oct 2025 11:43:24 +0800
Subject: [PATCH] style: add indicator icons to expandable items in settings
 page

---
 changelog.md                                  |  1 +
 .../src/components/base/base-setting-card.tsx | 25 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/changelog.md b/changelog.md
index c5d53d4..9b1bb53 100644
--- a/changelog.md
+++ b/changelog.md
@@ -28,6 +28,7 @@
 ### 样式调整 (Sytle)
  - 改进 logo 设计
  - 卡片尺寸
+ - 设置页可展开项增加指示图标
 
 ## 1.8.7
 
diff --git a/src/renderer/src/components/base/base-setting-card.tsx b/src/renderer/src/components/base/base-setting-card.tsx
index 44ccfb8..06964b0 100644
--- a/src/renderer/src/components/base/base-setting-card.tsx
+++ b/src/renderer/src/components/base/base-setting-card.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Accordion, AccordionItem, Card, CardBody } from '@heroui/react'
+import { IoIosArrowBack } from 'react-icons/io'
 
 interface Props {
   title?: string
@@ -8,17 +9,35 @@ interface Props {
 }
 
 const SettingCard: React.FC<Props> = (props) => {
+  const [isOpen, setIsOpen] = useState(false)
+
   return !props.title ? (
     <Card className={`${props.className} m-2`}>
       <CardBody>{props.children}</CardBody>
     </Card>
   ) : (
-    <Accordion isCompact className={`${props.className} my-2`} variant="splitted" {...props}>
+    <Accordion
+      isCompact
+      className={`${props.className} my-2`}
+      variant="splitted"
+      onSelectionChange={(keys) => {
+        setIsOpen(keys instanceof Set ? keys.size > 0 : false)
+      }}
+      {...props}
+    >
       <AccordionItem
         className="data-[open=true]:pb-2"
         hideIndicator
         keepContentMounted
-        title={props.title}
+        textValue={props.title}
+        title={
+          <div className="flex justify-between items-center w-full">
+            <span>{props.title}</span>
+            <IoIosArrowBack
+              className={`transition duration-200 ml-2 h-[32px] text-lg text-foreground-500 ${isOpen ? '-rotate-90' : ''}`}
+            />
+          </div>
+        }
       >
         {props.children}
       </AccordionItem>