From a9d02472942d3871758d885178da96d1d8a60b28 Mon Sep 17 00:00:00 2001
From: goddonebianu <goddonebianu@outlook.com>
Date: Sun, 12 Oct 2025 19:48:40 +0800
Subject: [PATCH] ...

---
 ...24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg |  1 +
 src/app/text-speaker/SaveList.tsx             | 35 +++++++---
 src/app/text-speaker/page.tsx                 | 64 +++++++++----------
 src/config/images.ts                          |  1 +
 4 files changed, 60 insertions(+), 41 deletions(-)
 create mode 100644 public/images/delete_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

diff --git a/public/images/delete_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg b/public/images/delete_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg
new file mode 100644
index 0000000..ef53c23
--- /dev/null
+++ b/public/images/delete_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
\ No newline at end of file
diff --git a/src/app/text-speaker/SaveList.tsx b/src/app/text-speaker/SaveList.tsx
index cd54415..931d6e6 100644
--- a/src/app/text-speaker/SaveList.tsx
+++ b/src/app/text-speaker/SaveList.tsx
@@ -5,6 +5,8 @@ import { getTextSpeakerData, setTextSpeakerData } from "@/utils";
 import { useState } from "react";
 import z from "zod";
 import { TextSpeakerItemSchema } from "@/interfaces";
+import IconClick from "@/components/IconClick";
+import IMAGES from "@/config/images";
 
 interface TextCardProps {
     item: z.infer<typeof TextSpeakerItemSchema>;
@@ -23,13 +25,18 @@ function TextCard({
         handleDel(item);
     }
     return (
-        <div className="p-2 border-b-1 border-gray-200 m-2 grid grid-cols-8">
-            <div className="col-span-6">
-                <div className="text-3xl">{item.text.length > 80 ? item.text.slice(0, 80) + '...' : item.text}</div>
-                <div className="text-xl text-gray-600">{item.ipa ? (item.ipa.length > 160 ? item.ipa.slice(0, 160) + '...' : item.ipa) : ''}</div>
+        <div className="p-2 border-b-1 border-gray-200 rounded-2xl bg-gray-100 m-2 grid grid-cols-8" onClick={onUseClick}>
+            <div className="col-span-7">
+                <div className="max-h-26 text-3xl overflow-y-auto">{item.text}</div>
+                <div className="max-h-16 overflow-y-auto text-xl text-gray-600 whitespace-nowrap overflow-x-auto">{item.ipa}</div>
             </div>
-            <Button label="use" className="h-8 col-span-1" onClick={onUseClick}></Button>
-            <Button label="del" className="h-8 col-span-1" onClick={onDelClick}></Button>
+            <IconClick
+                src={IMAGES.delete}
+                alt="delete"
+                onClick={onDelClick}
+                className="place-self-center"
+                size={42}>
+            </IconClick>
         </div>
     );
 }
@@ -62,8 +69,20 @@ export default function SaveList({
     }
     if (show) return (
         <div className="my-4 p-2 mx-4 md:mx-32 border-1 border-gray-200 rounded-2xl">
-            <Button label="刷新" className="m-1" onClick={refresh}></Button>
-            <Button label="删光" className="m-1" onClick={handleDeleteAll}></Button>
+            <div className="flex flex-row justify-center gap-8 items-center">
+                <IconClick
+                    src={IMAGES.refresh}
+                    alt="refresh"
+                    onClick={refresh}
+                    size={48}
+                    className=""></IconClick>
+                <IconClick
+                    src={IMAGES.delete}
+                    alt="delete"
+                    onClick={handleDeleteAll}
+                    size={48}
+                    className=""></IconClick>
+            </div>
             <ul>
                 {data.map(v =>
                     <TextCard item={v} key={crypto.randomUUID()} handleUse={handleUse} handleDel={handleDel}></TextCard>
diff --git a/src/app/text-speaker/page.tsx b/src/app/text-speaker/page.tsx
index 63dfbb2..fea1cd3 100644
--- a/src/app/text-speaker/page.tsx
+++ b/src/app/text-speaker/page.tsx
@@ -234,7 +234,35 @@ export default function Home() {
             <div className="overflow-auto text-gray-600 h-18">
                 {ipa}
             </div>
-            <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
+            <div className="relative w-full flex flex-row flex-wrap gap-2 justify-center items-center">
+                {showSpeedAdjust && (
+                    <div className="bg-white p-6 rounded-2xl border-gray-200 border-2 shadow-2xl absolute left-1/2 -translate-x-1/2 -translate-y-full -top-4 flex flex-row flex-wrap gap-2 justify-center items-center">
+                        <IconClick size={45} onClick={letMeSetSpeed(0.5)}
+                            src={IMAGES.speed_0_5x}
+                            alt="0.5x"
+                            className={speed === 0.5 ? 'bg-gray-200' : ''}
+                        ></IconClick>
+                        <IconClick size={45} onClick={letMeSetSpeed(0.7)}
+                            src={IMAGES.speed_0_7x}
+                            alt="0.7x"
+                            className={speed === 0.7 ? 'bg-gray-200' : ''}
+                        ></IconClick>
+                        <IconClick size={45} onClick={letMeSetSpeed(1)}
+                            src={IMAGES.speed_1x}
+                            alt="1x"
+                            className={speed === 1 ? 'bg-gray-200' : ''}
+                        ></IconClick>
+                        <IconClick size={45} onClick={letMeSetSpeed(1.2)}
+                            src={IMAGES.speed_1_2_x}
+                            alt="1.2x"
+                            className={speed === 1.2 ? 'bg-gray-200' : ''}
+                        ></IconClick>
+                        <IconClick size={45} onClick={letMeSetSpeed(1.5)}
+                            src={IMAGES.speed_1_5x}
+                            alt="1.5x"
+                            className={speed === 1.5 ? 'bg-gray-200' : ''}
+                        ></IconClick>
+                    </div>)}
                 <IconClick size={45} onClick={speak} src={
                     pause ? IMAGES.play_arrow : IMAGES.pause
                 } alt="playorpause" className={`${processing ? 'bg-gray-200' : ''}`}></IconClick>
@@ -246,7 +274,8 @@ export default function Home() {
                 ></IconClick>
                 <IconClick size={45} onClick={() => setShowSpeedAdjust(!showSpeedAdjust)}
                     src={IMAGES.more_horiz}
-                    alt="more"></IconClick>
+                    alt="more"
+                    className={`${showSpeedAdjust ? 'bg-gray-200' : ''}`}></IconClick>
                 <IconClick size={45} onClick={save}
                     src={IMAGES.save}
                     alt="save"></IconClick>
@@ -260,37 +289,6 @@ export default function Home() {
                         selected={showSaveList}>
                     </Button>
                 </div>
-                <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
-                    {
-                        showSpeedAdjust ? (<>
-                            <IconClick size={45} onClick={letMeSetSpeed(0.5)}
-                                src={IMAGES.speed_0_5x}
-                                alt="0.5x"
-                                className={speed === 0.5 ? 'bg-gray-200' : ''}
-                            ></IconClick>
-                            <IconClick size={45} onClick={letMeSetSpeed(0.7)}
-                                src={IMAGES.speed_0_7x}
-                                alt="0.7x"
-                                className={speed === 0.7 ? 'bg-gray-200' : ''}
-                            ></IconClick>
-                            <IconClick size={45} onClick={letMeSetSpeed(1)}
-                                src={IMAGES.speed_1x}
-                                alt="1x"
-                                className={speed === 1 ? 'bg-gray-200' : ''}
-                            ></IconClick>
-                            <IconClick size={45} onClick={letMeSetSpeed(1.2)}
-                                src={IMAGES.speed_1_2_x}
-                                alt="1.2x"
-                                className={speed === 1.2 ? 'bg-gray-200' : ''}
-                            ></IconClick>
-                            <IconClick size={45} onClick={letMeSetSpeed(1.5)}
-                                src={IMAGES.speed_1_5x}
-                                alt="1.5x"
-                                className={speed === 1.5 ? 'bg-gray-200' : ''}
-                            ></IconClick>
-                        </>) : <></>
-                    }
-                </div>
             </div>
         </div>
         <SaveList show={showSaveList} handleUse={handleUseItem}></SaveList>
diff --git a/src/config/images.ts b/src/config/images.ts
index 96ff5c6..a0ae453 100644
--- a/src/config/images.ts
+++ b/src/config/images.ts
@@ -13,6 +13,7 @@ const IMAGES = {
     refresh: '/images/refresh_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
     more_horiz: '/images/more_horiz_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
     save: '/images/save_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    delete: '/images/delete_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
 }
 
 export default IMAGES;
\ No newline at end of file