style: add indicator icons to expandable items in settings page

changelog.md

@@ -28,6 +28,7 @@
 ### 样式调整 (Sytle)
  - 改进 logo 设计
  - 卡片尺寸
+ - 设置页可展开项增加指示图标
 
 ## 1.8.7
 

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>