goddonebianu/learn-languages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
goddonebianu
2025-10-12 19:48:40 +08:00
parent 4708828972
commit a9d0247294
4 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/images/delete_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 319 B

35
src/app/text-speaker/SaveList.tsx
View File

@@ -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>

64
src/app/text-speaker/page.tsx
View File

@@ -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>

1
src/config/images.ts
View File

@@ -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;