From 4663794ba69a094dac71067e8685a034cc68cd48 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 19 Apr 2025 18:54:17 +0800
Subject: [PATCH] feat(FeatureMenus, Footer): replace Ant Design icons with
 Lucide icons and enhance layout

- Updated icons in FeatureMenus from Ant Design to Lucide for improved visual consistency.
- Refactored Footer component to use Lucide icons and adjusted layout for better alignment and spacing.
- Enhanced styling of Tag components for a more cohesive design.
---
 .../mini/home/components/FeatureMenus.tsx     | 14 ++++--
 .../windows/mini/home/components/Footer.tsx   | 50 ++++++++++---------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/renderer/src/windows/mini/home/components/FeatureMenus.tsx b/src/renderer/src/windows/mini/home/components/FeatureMenus.tsx
index 434767b2..59774e70 100644
--- a/src/renderer/src/windows/mini/home/components/FeatureMenus.tsx
+++ b/src/renderer/src/windows/mini/home/components/FeatureMenus.tsx
@@ -1,6 +1,7 @@
-import { BulbOutlined, EnterOutlined, FileTextOutlined, MessageOutlined, TranslationOutlined } from '@ant-design/icons'
+import { EnterOutlined } from '@ant-design/icons'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { Col } from 'antd'
+import { FileText, Languages, Lightbulb, MessageSquare } from 'lucide-react'
 import { Dispatch, SetStateAction, useImperativeHandle, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -30,7 +31,7 @@ const FeatureMenus = ({
   const features = useMemo(
     () => [
       {
-        icon: <MessageOutlined style={{ fontSize: '16px', color: 'var(--color-text)' }} />,
+        icon: <MessageSquare size={16} color="var(--color-text)" />,
         title: t('miniwindow.feature.chat'),
         active: true,
         onClick: () => {
@@ -41,12 +42,12 @@ const FeatureMenus = ({
         }
       },
       {
-        icon: <TranslationOutlined style={{ fontSize: '16px', color: 'var(--color-text)' }} />,
+        icon: <Languages size={16} color="var(--color-text)" />,
         title: t('miniwindow.feature.translate'),
         onClick: () => text && setRoute('translate')
       },
       {
-        icon: <FileTextOutlined style={{ fontSize: '16px', color: 'var(--color-text)' }} />,
+        icon: <FileText size={16} color="var(--color-text)" />,
         title: t('miniwindow.feature.summary'),
         onClick: () => {
           if (text) {
@@ -56,7 +57,7 @@ const FeatureMenus = ({
         }
       },
       {
-        icon: <BulbOutlined style={{ fontSize: '16px', color: 'var(--color-text)' }} />,
+        icon: <Lightbulb size={16} color="var(--color-text)" />,
         title: t('miniwindow.feature.explanation'),
         onClick: () => {
           if (text) {
@@ -116,6 +117,8 @@ const FeatureListWrapper = styled.div`
 `
 
 const FeatureItem = styled.div`
+  display: flex;
+  flex-direction: row;
   cursor: pointer;
   transition: background-color 0s;
   background: transparent;
@@ -139,6 +142,7 @@ const FeatureItem = styled.div`
 
 const FeatureIcon = styled.div`
   color: #fff;
+  display: flex;
 `
 
 const FeatureTitle = styled.h3`
diff --git a/src/renderer/src/windows/mini/home/components/Footer.tsx b/src/renderer/src/windows/mini/home/components/Footer.tsx
index 79f2f5ef..fc01fdcc 100644
--- a/src/renderer/src/windows/mini/home/components/Footer.tsx
+++ b/src/renderer/src/windows/mini/home/components/Footer.tsx
@@ -1,5 +1,6 @@
-import { ArrowLeftOutlined, CopyOutlined, LogoutOutlined, PushpinFilled, PushpinOutlined } from '@ant-design/icons'
-import { Tag, Tooltip } from 'antd'
+import { ArrowLeftOutlined } from '@ant-design/icons'
+import { Tag as AntdTag, Tooltip } from 'antd'
+import { CircleArrowLeft, Copy, Pin } from 'lucide-react'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -23,20 +24,10 @@ const Footer: FC<FooterProps> = ({ route, canUseBackspace, clearClipboard, onExi
 
   return (
     <WindowFooter className="drag">
-      <PinButtonArea onClick={() => onClickPin()} className="nodrag">
-        <Tooltip title={t('miniwindow.tooltip.pin')} mouseEnterDelay={0.8} placement="left">
-          {isPinned ? (
-            <PushpinFilled style={{ fontSize: '18px', color: 'var(--color-primary)' }} />
-          ) : (
-            <PushpinOutlined style={{ fontSize: '18px' }} />
-          )}
-        </Tooltip>
-      </PinButtonArea>
       <FooterText>
         <Tag
           bordered={false}
-          icon={<LogoutOutlined />}
-          style={{ cursor: 'pointer' }}
+          icon={<CircleArrowLeft size={14} color="var(--color-text)" />}
           className="nodrag"
           onClick={() => onExit()}>
           {t('miniwindow.footer.esc', {
@@ -54,41 +45,52 @@ const Footer: FC<FooterProps> = ({ route, canUseBackspace, clearClipboard, onExi
           </Tag>
         )}
         {route !== 'home' && (
-          <Tag bordered={false} icon={<CopyOutlined />} style={{ cursor: 'pointer' }} className="nodrag">
+          <Tag
+            bordered={false}
+            icon={<Copy size={14} color="var(--color-text)" />}
+            style={{ cursor: 'pointer' }}
+            className="nodrag">
             {t('miniwindow.footer.copy_last_message')}
           </Tag>
         )}
       </FooterText>
+      <PinButtonArea onClick={() => onClickPin()} className="nodrag">
+        <Tooltip title={t('miniwindow.tooltip.pin')} mouseEnterDelay={0.8} placement="left">
+          <Pin size={14} stroke={isPinned ? 'var(--color-primary)' : 'var(--color-text)'} />
+        </Tooltip>
+      </PinButtonArea>
     </WindowFooter>
   )
 }
 
 const WindowFooter = styled.div`
-  position: relative;
-  width: 100%;
-  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   padding: 5px 0;
   color: var(--color-text-secondary);
   font-size: 12px;
 `
 
 const FooterText = styled.div`
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 5px;
   color: var(--color-text-secondary);
   font-size: 12px;
 `
 
 const PinButtonArea = styled.div`
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+`
+
+const Tag = styled(AntdTag)`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 `
 
 export default Footer