liushuyang
/
crush-level-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: liushuyang:ddff5100b6c3f7145f558fb717b6502143fe8d10
Branches Tags
liushuyang:main
liushuyang:dev
..
compare: liushuyang:a30ad9dd8991fcbb811453542e798b986efeaca2
Branches Tags
liushuyang:main
liushuyang:dev

2 Commits
ddff5100b6 ... a30ad9dd89

Author SHA1 Message Date
liuyonghe0111 a30ad9dd89 feat: 增加对话 2025-12-18 18:59:55 +08:00
liuyonghe0111 e89f6ce94d feat: 优化移动端体验 2025-12-18 18:14:12 +08:00
88 changed files with 2088 additions and 3192 deletions
Show Stats Expand all files Collapse all files

10
next.config.ts
View File

@ -1,4 +1,4 @@
import type { NextConfig } from 'next'
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
@ -26,6 +26,10 @@ const nextConfig: NextConfig = {
},
],
},
}
typescript: {
// 构建时忽略所有 TypeScript 错误
ignoreBuildErrors: true,
},
};
export default nextConfig
export default nextConfig;

139
public/font-v2/demo_index.html
View File

@ -54,6 +54,24 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">Logo</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">12</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">群聊</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">挂断电话</div>
@ -98,7 +116,7 @@
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">Frame 195</div>
<div class="name">16-右</div>
<div class="code-name">&amp;#xe616;</div>
</li>
@ -122,7 +140,7 @@
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">Frame 194</div>
<div class="name">16-左</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
@ -162,18 +180,6 @@
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">折叠</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">展开</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
@ -192,12 +198,12 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot?t=1765173841330'); /* IE9 */
src: url('iconfont.eot?t=1765173841330#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff2?t=1765173841330') format('woff2'),
url('iconfont.woff?t=1765173841330') format('woff'),
url('iconfont.ttf?t=1765173841330') format('truetype'),
url('iconfont.svg?t=1765173841330#iconfont') format('svg');
src: url('iconfont.eot?t=1766052523135'); /* IE9 */
src: url('iconfont.eot?t=1766052523135#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff2?t=1766052523135') format('woff2'),
url('iconfont.woff?t=1766052523135') format('woff'),
url('iconfont.ttf?t=1766052523135') format('truetype'),
url('iconfont.svg?t=1766052523135#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -223,6 +229,33 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-Logo"></span>
<div class="name">
Logo
</div>
<div class="code-name">.icon-Logo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wodejiemianqianwang"></span>
<div class="name">
12
</div>
<div class="code-name">.icon-wodejiemianqianwang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qunliao"></span>
<div class="name">
群聊
</div>
<div class="code-name">.icon-qunliao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guaduandianhua"></span>
<div class="name">
@ -289,7 +322,7 @@
<li class="dib">
<span class="icon iconfont icon-a-Frame195"></span>
<div class="name">
Frame 195
16-右
</div>
<div class="code-name">.icon-a-Frame195
</div>
@ -325,7 +358,7 @@
<li class="dib">
<span class="icon iconfont icon-a-Frame194"></span>
<div class="name">
Frame 194
16-左
</div>
<div class="code-name">.icon-a-Frame194
</div>
@ -385,24 +418,6 @@
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhedie"></span>
<div class="name">
折叠
</div>
<div class="code-name">.icon-zhedie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhankai"></span>
<div class="name">
展开
</div>
<div class="code-name">.icon-zhankai
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
@ -430,6 +445,30 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-Logo"></use>
</svg>
<div class="name">Logo</div>
<div class="code-name">#icon-Logo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wodejiemianqianwang"></use>
</svg>
<div class="name">12</div>
<div class="code-name">#icon-wodejiemianqianwang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qunliao"></use>
</svg>
<div class="name">群聊</div>
<div class="code-name">#icon-qunliao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-guaduandianhua"></use>
@ -490,7 +529,7 @@
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-Frame195"></use>
</svg>
<div class="name">Frame 195</div>
<div class="name">16-右</div>
<div class="code-name">#icon-a-Frame195</div>
</li>
@ -522,7 +561,7 @@
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-Frame194"></use>
</svg>
<div class="name">Frame 194</div>
<div class="name">16-左</div>
<div class="code-name">#icon-a-Frame194</div>
</li>
@ -574,22 +613,6 @@
<div class="code-name">#icon-sousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhedie"></use>
</svg>
<div class="name">折叠</div>
<div class="code-name">#icon-zhedie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhankai"></use>
</svg>
<div class="name">展开</div>
<div class="code-name">#icon-zhankai</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>

32
public/font-v2/iconfont.css
View File

@ -1,11 +1,11 @@
@font-face {
font-family: "iconfont"; /* Project id 5076160 */
src: url('iconfont.eot?t=1765173841330'); /* IE9 */
src: url('iconfont.eot?t=1765173841330#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff2?t=1765173841330') format('woff2'),
url('iconfont.woff?t=1765173841330') format('woff'),
url('iconfont.ttf?t=1765173841330') format('truetype'),
url('iconfont.svg?t=1765173841330#iconfont') format('svg');
src: url('iconfont.eot?t=1766052523135'); /* IE9 */
src: url('iconfont.eot?t=1766052523135#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff2?t=1766052523135') format('woff2'),
url('iconfont.woff?t=1766052523135') format('woff'),
url('iconfont.ttf?t=1766052523135') format('truetype'),
url('iconfont.svg?t=1766052523135#iconfont') format('svg');
}
.iconfont {
@ -16,6 +16,18 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-Logo:before {
content: "\e624";
}
.icon-wodejiemianqianwang:before {
content: "\e622";
}
.icon-qunliao:before {
content: "\e621";
}
.icon-guaduandianhua:before {
content: "\e620";
}
@ -88,11 +100,3 @@
content: "\e60d";
}
.icon-zhedie:before {
content: "\e60e";
}
.icon-zhankai:before {
content: "\e60f";
}

BIN
public/font-v2/iconfont.eot
View File

Binary file not shown.

2
public/font-v2/iconfont.js
View File

File diff suppressed because one or more lines are too long

39
public/font-v2/iconfont.json
View File

@ -5,6 +5,27 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "46381406",
"name": "Logo",
"font_class": "Logo",
"unicode": "e624",
"unicode_decimal": 58916
},
{
"icon_id": "46339903",
"name": "12",
"font_class": "wodejiemianqianwang",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "46337600",
"name": "群聊",
"font_class": "qunliao",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "46281959",
"name": "挂断电话",
@ -56,7 +77,7 @@
},
{
"icon_id": "46252114",
"name": "Frame 195",
"name": "16-右",
"font_class": "a-Frame195",
"unicode": "e616",
"unicode_decimal": 58902
@ -84,7 +105,7 @@
},
{
"icon_id": "46252113",
"name": "Frame 194",
"name": "16-左",
"font_class": "a-Frame194",
"unicode": "e61a",
"unicode_decimal": 58906
@ -130,20 +151,6 @@
"font_class": "sousuo",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "46211226",
"name": "折叠",
"font_class": "zhedie",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "46211225",
"name": "展开",
"font_class": "zhankai",
"unicode": "e60f",
"unicode_decimal": 58895
}
]
}

18
public/font-v2/iconfont.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/font-v2/iconfont.ttf
View File

Binary file not shown.

BIN
public/font-v2/iconfont.woff
View File

Binary file not shown.

BIN
public/font-v2/iconfont.woff2
View File

Binary file not shown.

3
public/icons/expand.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 22C24.5523 22 25 22.4477 25 23C25 23.5523 24.5523 24 24 24H8C7.44772 24 7 23.5523 7 23C7 22.4477 7.44772 22 8 22H24ZM25 16L21 19V17H8C7.44772 17 7 16.5523 7 16C7 15.4477 7.44772 15 8 15H21V13L25 16ZM24 8C24.5523 8 25 8.44772 25 9C25 9.55228 24.5523 10 24 10H8C7.44772 10 7 9.55228 7 9C7 8.44772 7.44772 8 8 8H24Z" fill="#958E9E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 447 B

2
src/app/(main)/character/[id]/ChatButton.tsx
View File

@ -2,7 +2,7 @@
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { useAsyncFn } from '@/hooks/tools';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
export default function ChatButton({ id }: { id: string }) {
const router = useRouter();

36
src/app/(main)/character/[id]/page.tsx
View File

@ -1,28 +1,30 @@
import { AvatarImage, AvatarFallback, Avatar } from '@radix-ui/react-avatar';
import ChatButton from './ChatButton';
import { fetchCharacter } from './service';
import { Chip } from '@/components/ui/chip';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const user = {
name: 'Honey Snow',
headImage: 'https://picsum.photos/200/300',
nickname: 'Crush',
};
const character = await fetchCharacter(id);
return (
<div className="flex px-4 pt-10">
<div className="mx-auto w-full max-w-[752px]">
<header className="flex items-end justify-between">
<header className="flex items-end gap-10 justify-between">
<div className="flex gap-6 items-end">
<Avatar className="size-32 rounded-full overflow-hidden cursor-pointer">
<AvatarImage className="h-32 w-32 object-cover" src={user?.headImage} />
<AvatarFallback className="!txt-headline-m">
{user?.nickname?.slice(0, 1)}
</AvatarFallback>
<Avatar className="size-32">
<AvatarImage src={character?.headPortrait} />
<AvatarFallback>{character?.name?.slice(0, 2)}</AvatarFallback>
</Avatar>
<div>
<div className="txt-headline-s">{user?.name}</div>
<div className="text-sm mt-4 text-text-300">{user?.nickname}</div>
<div className="txt-headline-s">{character?.name}</div>
<div className="flex flex-wrap mt-4 gap-2">
{character?.tags?.map((tag: any) => (
<Chip className="rounded-xs" key={tag.tagId}>
{tag.name}
</Chip>
))}
</div>
</div>
</div>
<div>
@ -31,11 +33,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
</header>
<div className="mt-12 rounded-2xl bg-white/10 p-6">
<div className="txt-headline-s">Introduction</div>
<div>
She is a new and beautiful teacher and has just graduated. You are the most rebellious
student of the whole school workers. She is a new and beautiful teacher and has just
graduated. You are the most rebellious student of the whole school workers. In...
</div>
<div className="mt-4">{character?.description}</div>
</div>
</div>
</div>

11
src/app/(main)/character/[id]/service.ts Normal file
View File

@ -0,0 +1,11 @@
import { serverRequest } from '@/lib/server/request';
import { cache } from 'react';
export const fetchCharacter = cache(async (id: string) => {
const { data } = await serverRequest('/api/character/detail', {
data: {
id,
},
});
return data;
});

12
src/app/(main)/chat-history/page.tsx
View File

@ -1,7 +1,19 @@
'use client';
import { useMedia } from '@/hooks/tools';
import ChatSidebar from '@/layout/components/ChatSidebar';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
export default function ChatPage() {
const response = useMedia();
const router = useRouter();
useEffect(() => {
if (response?.sm) {
router.push('/home');
}
}, [response?.sm]);
return (
<div className="h-full">
<ChatSidebar expand />

18
src/app/(main)/chat/[id]/AIMessage.tsx
View File

@ -1,13 +1,27 @@
'use client';
import React from 'react';
import AITextRender from '@/components/ui/text-md';
export default function AIMessage({ data }: { data: any }) {
const Loading = () => {
return (
<div className="flex justify-start">
<div className="flex items-center gap-1">
<div className="bg-txt-secondary-normal h-2 w-2 animate-bounce rounded-full [animation-delay:-0.3s]"></div>
<div className="bg-txt-secondary-normal h-2 w-2 animate-bounce rounded-full [animation-delay:-0.15s]"></div>
<div className="bg-txt-secondary-normal h-2 w-2 animate-bounce rounded-full"></div>
</div>
</div>
);
};
function AIMessage({ data }: { data: any }) {
return (
<div className="mb-8 max-w-[90%]">
<div className="bg-surface-element-normal inline-block rounded-lg p-4 backdrop-blur-2xl">
<AITextRender text={data.content} />
{data.content ? <AITextRender text={data.content} /> : <Loading />}
</div>
</div>
);
}
export default React.memo(AIMessage);

16
src/app/(main)/chat/[id]/CharacterHeader.tsx
View File

@ -6,6 +6,7 @@ import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useCharacter } from '@/hooks/services/character';
import { useParams } from 'next/navigation';
import React from 'react';
// import CrushLevelAvatar from './CrushLevelAvatar'
export const CharacterAvatorAndName = ({ name, avator }: { name: string; avator: string }) => {
@ -20,25 +21,22 @@ export const CharacterAvatorAndName = ({ name, avator }: { name: string; avator:
);
};
const ChatMessageUserHeader = () => {
function ChatMessageUserHeader() {
const [isFullIntroduction, setIsFullIntroduction] = useState(false);
const [shouldShowExpandButton, setShouldShowExpandButton] = useState(false);
const textRef = useRef<HTMLDivElement>(null);
const { id } = useParams<{ id: string }>();
const { data: character = {} } = useCharacter(id.split('-')[2]);
const { introduction } = {
introduction: 'introduction introduction introduction introduction introduction',
};
// 检测文本是否超过三行
useEffect(() => {
if (textRef.current && introduction) {
if (textRef.current && character.description) {
// 直接比较滚动高度和可见高度
// 如果内容的实际高度大于容器的可见高度，说明内容被截断了
const isOverflowing = textRef.current.scrollHeight > textRef.current.clientHeight;
setShouldShowExpandButton(isOverflowing);
}
}, [introduction]);
}, [character.description]);
return (
<div className="flex flex-col items-center gap-6">
@ -55,7 +53,7 @@ const ChatMessageUserHeader = () => {
wordBreak: 'break-word',
}}
>
{introduction.repeat(10)}
{character.description}
</div>
<div className="flex items-center justify-between">
@ -85,6 +83,6 @@ const ChatMessageUserHeader = () => {
<div className="txt-body-m text-txt-secondary-normal">Content generated by AI</div>
</div>
);
};
}
export default ChatMessageUserHeader;
export default React.memo(ChatMessageUserHeader);

21
src/app/(main)/chat/[id]/Sider/Background.tsx → src/app/(main)/chat/[id]/Drawer/Background.tsx
View File

@ -1,5 +1,4 @@
'use client';
import { useChatStore } from '../store';
import { Button, IconButton } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import Image from 'next/image';
@ -104,9 +103,7 @@ const BackgroundItemCard = ({
};
export default function Background() {
const setSideBar = useChatStore((store) => store.setSideBar);
const [selectId, setSelectId] = useState<number | undefined>(1);
const [loading, setLoading] = useState(false);
// 静态数据：模拟背景图片列表
const backgroundList: BackgroundItem[] = [
@ -148,23 +145,7 @@ export default function Background() {
handleIndexChange,
} = useImageViewer();
const handleConfirm = async () => {
setLoading(true);
try {
// TODO: 调用实际的 API
// await updateChatBackground({ aiId, backgroundId: selectId })
console.log('Selected background:', selectId);
// 模拟延迟
await new Promise((resolve) => setTimeout(resolve, 500));
setSideBar('profile');
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
const handleConfirm = async () => {};
const handleImagePreview = (index: number) => {
openViewer(backgroundList?.map((item) => item.imgUrl || '') || [], index);

81
src/app/(main)/chat/[id]/Drawer/ChatModel.tsx Normal file
View File

@ -0,0 +1,81 @@
'use client';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { IconButton } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import Image from 'next/image';
import { useModels } from '@/hooks/services/chat';
import { useStreamChatStore } from '../stream-chat';
export default function ChatModel() {
const { data: models = [] } = useModels();
const chatSetting = useStreamChatStore((store) => store.chatSetting);
const setChatSetting = useStreamChatStore((store) => store.setChatSetting);
return (
<div className="flex flex-col h-full">
<div className="flex-1 flex flex-col gap-2">
{models.map((model: any) => (
<div
key={model}
onClick={() => setChatSetting({ chatModel: model })}
className="bg-surface-element-normal cursor-pointer overflow-hidden rounded-lg p-4"
>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<div className="txt-title-s">{model}</div>
<Tooltip>
<TooltipTrigger asChild>
<IconButton iconfont="icon-question" variant="tertiary" size="mini" />
</TooltipTrigger>
<TooltipContent className="max-w-[300px]">
<div className="space-y-2">
<p className="break-words">
Text Message Price: Refers to the cost of chatting with the character via
text messages, including sending text, images, or gifts. Charged per
message.
</p>
<p className="break-words">
Voice Message Price: Refers to the cost of sending a voice message to the
character or playing the character’s voice. Charged per use.
</p>
<p className="break-words">
Voice Call Price: Refers to the cost of having a voice call with the
character. Charged per minute.
</p>
</div>
</TooltipContent>
</Tooltip>
</div>
<Checkbox checked={chatSetting.chatModel === model} shape="round" />
</div>
<div className="txt-body-m text-txt-secondary-normal mt-1">
Role-play a conversation with AI
</div>
<div className="bg-surface-district-normal mt-3 rounded-sm p-3">
<div className="flex items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<span className="txt-label-m text-txt-primary-normal">1/Text Message</span>
</div>
<div className="mt-3 flex items-center justify-between gap-1">
<div className="flex min-w-0 flex-1 items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<span className="txt-label-m text-txt-primary-normal">10/Send or play voice</span>
</div>
</div>
<div className="mt-3 flex items-center justify-between gap-1">
<div className="flex min-w-0 flex-1 items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<span className="txt-label-m text-txt-primary-normal">20/min Voice call</span>
</div>
</div>
</div>
</div>
))}
<div className="txt-body-m text-txt-secondary-normal mt-6">Stay tuned for more models</div>
</div>
</div>
);
}

35
src/app/(main)/chat/[id]/Sider/Font.tsx → src/app/(main)/chat/[id]/Drawer/Font.tsx
View File

@ -1,9 +1,7 @@
'use client';
import { useChatStore } from '../store';
import { useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
type FontOption = {
value: number;
@ -12,9 +10,9 @@ type FontOption = {
};
export default function Font() {
const setSideBar = useChatStore((store) => store.setSideBar);
const chatSetting = useStreamChatStore((store) => store.chatSetting);
const setChatSetting = useStreamChatStore((store) => store.setChatSetting);
// 字体大小选项
const fontOptions: FontOption[] = [
{ value: 12, label: 'A 12' },
{ value: 14, label: 'A 14' },
@ -23,27 +21,6 @@ export default function Font() {
{ value: 20, label: 'A 20' },
];
const [selectedFont, setSelectedFont] = useState(16);
const [loading, setLoading] = useState(false);
const handleConfirm = async () => {
setLoading(true);
try {
// TODO: 调用实际的 API 保存字体设置
// await updateFontSize({ fontSize: selectedFont })
console.log('Selected font size:', selectedFont);
// 模拟延迟
await new Promise((resolve) => setTimeout(resolve, 500));
setSideBar('profile');
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
return (
<div className="flex h-full flex-col">
<div className="flex-1">
@ -53,9 +30,9 @@ export default function Font() {
key={option.value}
className={cn(
'bg-surface-element-normal flex h-12 cursor-pointer items-center justify-between rounded-lg px-5 transition-colors',
selectedFont === option.value && 'bg-surface-element-hover'
chatSetting.font === option.value && 'bg-surface-element-hover'
)}
onClick={() => setSelectedFont(option.value)}
onClick={() => setChatSetting({ font: option.value })}
>
<div className="txt-title-s flex items-center gap-2">
{option.label}
@ -63,7 +40,7 @@ export default function Font() {
<span className="txt-body-m text-txt-secondary-normal">(standard)</span>
)}
</div>
<Checkbox shape="round" checked={selectedFont === option.value} />
<Checkbox shape="round" checked={chatSetting.font === option.value} />
</div>
))}
</div>

33
src/app/(main)/chat/[id]/Sider/MaxToken.tsx → src/app/(main)/chat/[id]/Drawer/MaxToken.tsx
View File

@ -1,9 +1,9 @@
'use client';
import { useChatStore } from '../store';
import { useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
type TokenOption = {
value: number;
@ -11,9 +11,9 @@ type TokenOption = {
};
export default function MaxToken() {
const setSideBar = useChatStore((store) => store.setSideBar);
const chatSetting = useStreamChatStore((store) => store.chatSetting);
const setChatSetting = useStreamChatStore((store) => store.setChatSetting);
// 最大回复数选项
const tokenOptions: TokenOption[] = [
{ value: 800, label: '800' },
{ value: 1000, label: '1000' },
@ -21,27 +21,6 @@ export default function MaxToken() {
{ value: 1500, label: '1500' },
];
const [selectedToken, setSelectedToken] = useState(800);
const [loading, setLoading] = useState(false);
const handleConfirm = async () => {
setLoading(true);
try {
// TODO: 调用实际的 API 保存最大回复数设置
// await updateMaxToken({ maxToken: selectedToken })
console.log('Selected max token:', selectedToken);
// 模拟延迟
await new Promise((resolve) => setTimeout(resolve, 500));
setSideBar('profile');
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
return (
<div className="flex h-full flex-col">
<div className="flex-1">
@ -51,12 +30,12 @@ export default function MaxToken() {
key={option.value}
className={cn(
'bg-surface-element-normal flex h-12 cursor-pointer items-center justify-between rounded-lg px-5 transition-colors',
selectedToken === option.value && 'bg-surface-element-hover'
chatSetting.maximumReplies === option.value && 'bg-surface-element-hover'
)}
onClick={() => setSelectedToken(option.value)}
onClick={() => setChatSetting({ maximumReplies: option.value })}
>
<div className="txt-title-s">{option.label}</div>
<Checkbox shape="round" checked={selectedToken === option.value} />
<Checkbox shape="round" checked={chatSetting.maximumReplies === option.value} />
</div>
))}
</div>

65
src/app/(main)/chat/[id]/Sider/Personal.tsx → src/app/(main)/chat/[id]/Drawer/Personal.tsx
View File

@ -1,6 +1,5 @@
'use client';
import { useEffect, useState, useCallback } from 'react';
import { useChatStore } from '../store';
import { z } from 'zod';
import dayjs from 'dayjs';
import {
@ -83,10 +82,6 @@ const characterFormSchema = z
);
export default function Personal() {
const setSideBar = useChatStore((store) => store.setSideBar);
const [loading, setLoading] = useState(false);
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
// 静态数据，模拟从接口获取的数据
const chatSettingData = {
nickname: 'John',
@ -112,62 +107,6 @@ export default function Personal() {
},
});
// 处理返回的逻辑
const handleGoBack = useCallback(() => {
if (form.formState.isDirty) {
setShowConfirmDialog(true);
} else {
setSideBar('profile');
}
}, [form.formState.isDirty, setSideBar]);
// 确认放弃修改
const handleConfirmDiscard = useCallback(() => {
form.reset();
setShowConfirmDialog(false);
setSideBar('profile');
}, [form, setSideBar]);
async function onSubmit(data: z.infer<typeof characterFormSchema>) {
if (!form.formState.isDirty) {
setSideBar('profile');
return;
}
setLoading(true);
try {
// TODO: 这里应该调用实际的 API
// 模拟检查昵称是否存在
const isExist = false; // await checkNickname({ nickname: data.nickname.trim() })
if (isExist) {
form.setError('nickname', {
message: 'This nickname is already taken',
});
return;
}
// TODO: 这里应该调用实际的保存 API
// await setMyChatSetting({
// aiId,
// nickname: data.nickname,
// birthday: new Date(`${data.year}-${data.month}-${data.day}`).getTime(),
// whoAmI: data.profile || '',
// })
console.log('Saved data:', {
nickname: data.nickname,
birthday: new Date(`${data.year}-${data.month}-${data.day}`).getTime(),
whoAmI: data.profile || '',
});
setSideBar('profile');
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
const selectedYear = form.watch('year');
const selectedMonth = form.watch('month');
const days = selectedYear && selectedMonth ? getDaysInMonth(selectedYear, selectedMonth) : [];
@ -345,7 +284,7 @@ export default function Personal() {
</div>
{/* 确认放弃修改的对话框 */}
<AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
{/* <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Unsaved Edits</AlertDialogTitle>
@ -363,7 +302,7 @@ export default function Personal() {
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</AlertDialog> */}
</>
);
}

96
src/app/(main)/chat/[id]/Sider/Profile.tsx → src/app/(main)/chat/[id]/Drawer/Profile.tsx
View File

@ -5,13 +5,16 @@ import { CharacterAvatorAndName } from '../CharacterHeader';
import { Tag } from '@/components/ui/tag';
import Image from 'next/image';
import { cn } from '@/lib/utils';
import { useChatStore } from '../store';
import { Button, IconButton } from '@/components/ui/button';
import React from 'react';
import { Switch } from '@/components/ui/switch';
import { useCharacter } from '@/hooks/services/character';
import { useParams } from 'next/navigation';
import { ActiveTabType } from './index';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useAsyncFn } from '@/hooks/tools';
import { useRouter } from 'next/navigation';
import { useModels } from '@/hooks/services/chat';
const genderMap = {
0: '/icons/male.svg',
@ -77,48 +80,67 @@ type ProfileProps = {
export default function Profile({ onActiveTab }: ProfileProps) {
const { id } = useParams<{ id: string }>();
const { data: character = {} } = useCharacter(id.split('-')[2]);
const characterId = id.split('-')[2];
const {} = useModels();
const router = useRouter();
const { data: character = {} } = useCharacter(characterId);
const chatSetting = useStreamChatStore((s) => s.chatSetting);
const setChatSetting = useStreamChatStore((s) => s.setChatSetting);
const createChannel = useStreamChatStore((s) => s.createChannel);
const deleteChannel = useStreamChatStore((s) => s.deleteChannel);
const preferenceItems: SettingItem[][] = [
[
{
onClick: () => onActiveTab('language'),
label: 'Language',
value: 'zh-CN',
},
],
];
const { loading: creating, run: createChannelAndPush } = useAsyncFn(async () => {
const channelId = await createChannel(characterId);
if (!channelId) return;
router.push(`/chat/${channelId}`);
});
const { run: deleteChannelAsync, loading: deleting } = useAsyncFn(async () => {
const { result, newChannels } = await deleteChannel([id]);
if (result === 'ok') {
if (newChannels?.length) {
router.push(`/chat/${newChannels[0].id}`);
} else {
router.push(`/`);
}
}
});
const chatSettingItems: SettingItem[][] = [
[
{
onClick: () => onActiveTab('model'),
label: 'Chat Model',
value: 'Role-Playing',
value: chatSetting?.chatModel,
},
{
onClick: () => null,
label: 'Long text',
value: <Switch checked={true} />,
value: (
<Switch
onCheckedChange={() => setChatSetting({ longText: chatSetting.longText ? 0 : 1 })}
checked={chatSetting.longText === 0}
/>
),
},
],
[
{
onClick: () => onActiveTab('max_token'),
label: 'Maximum Replies',
value: '1200',
value: String(chatSetting?.maximumReplies),
},
],
[
{
onClick: () => onActiveTab('font'),
label: 'Font',
value: '17px',
value: String(chatSetting?.font),
},
{
onClick: () => onActiveTab('background'),
label: 'Chat Background',
value: '17px',
value: String(chatSetting?.background),
},
],
];
@ -149,7 +171,7 @@ export default function Profile({ onActiveTab }: ProfileProps) {
)}
onClick={item.onClick}
>
<div className="txt-label-l flex-1">{item.label}</div>
<div className="txt-label-l">{item.label}</div>
<div className="flex min-w-0 flex-1 cursor-pointer items-center justify-end gap-2">
{item.value && (
<div className="txt-body-l flex items-center text-txt-primary-normal truncate">
@ -171,47 +193,39 @@ export default function Profile({ onActiveTab }: ProfileProps) {
return (
<div className="flex h-full flex-col">
{/* <div className="flex justify-between">
<IconButton variant="ghost" size="small" onClick={() => setSideBar('profile')}>
<i className="iconfont-v2 iconv2-jiantou" />
</IconButton>
<IconButton variant="ghost" size="small" onClick={() => setSideBar('profile')}>
<i className="iconfont-v2 iconv2-jiantou" />
</IconButton>
</div> */}
<div className="flex flex-1 overflow-y-auto show-scrollbar flex-col gap-4">
<div className="flex flex-1 overflow-y-auto pr-1 show-scrollbar flex-col gap-4">
<CharacterAvatorAndName avator={character.headPortrait} name={character.name} />
{/* Tags */}
<div className="flex w-full flex-col items-start justify-start gap-4">
<div className="flex w-full flex-wrap items-start justify-center gap-2">
<Tag>
<Image
src={genderMap[0 as keyof typeof genderMap]}
alt="Gender"
width={16}
height={16}
/>
<div>{getAge(Number(24))}</div>
</Tag>
<Tag>{'Sensibility'}</Tag>
<Tag>{'Romantic'}</Tag>
{character.tags?.map((tag: any) => (
<Tag key={tag.tagId}>{tag.name}</Tag>
))}
</div>
</div>
<ChatProfilePersona onActiveTab={onActiveTab} />
{bundleRender('Preference', preferenceItems)}
{bundleRender('Chat Setting', chatSettingItems)}
{bundleRender('Voice Setting', voiceSettingItems)}
</div>
<div className="flex flex-col gap-2 mt-2">
<Button variant="tertiary" className="w-full">
<Button
variant="tertiary"
className="w-full"
loading={deleting}
onClick={deleteChannelAsync}
>
Detele
</Button>
<Button variant="primary" className="w-full">
<Button
variant="primary"
loading={creating}
onClick={createChannelAndPush}
className="w-full"
>
+ New Chat
</Button>
</div>

35
src/app/(main)/chat/[id]/Sider/VoiceActor.tsx → src/app/(main)/chat/[id]/Drawer/VoiceActor.tsx
View File

@ -1,10 +1,10 @@
'use client';
import { useChatStore } from '../store';
import { useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
type VoiceGender = 'all' | 'male' | 'female';
@ -17,8 +17,8 @@ type VoiceActorItem = {
};
export default function VoiceActor() {
const setSideBar = useChatStore((store) => store.setSideBar);
const chatSetting = useStreamChatStore((store) => store.chatSetting);
const setChatSetting = useStreamChatStore((store) => store.setChatSetting);
// 语音演员列表（静态数据）
const voiceActors: VoiceActorItem[] = [
{
@ -74,7 +74,6 @@ export default function VoiceActor() {
const [selectedGender, setSelectedGender] = useState<VoiceGender>('all');
const [selectedActorId, setSelectedActorId] = useState(1);
const [loading, setLoading] = useState(false);
// 根据性别过滤演员列表
const filteredActors = voiceActors.filter((actor) => {
@ -82,24 +81,6 @@ export default function VoiceActor() {
return actor.gender === selectedGender;
});
const handleConfirm = async () => {
setLoading(true);
try {
// TODO: 调用实际的 API 保存语音演员设置
// await updateVoiceActor({ voiceActorId: selectedActorId })
console.log('Selected voice actor:', selectedActorId);
// 模拟延迟
await new Promise((resolve) => setTimeout(resolve, 500));
setSideBar('profile');
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
return (
<div className="flex h-full flex-col">
{/* Gender Tabs */}
@ -152,16 +133,6 @@ export default function VoiceActor() {
))}
</div>
</div>
{/* Footer Buttons */}
{/* <div className="mt-6 flex justify-end gap-3">
<Button variant="tertiary" size="large" onClick={() => setSideBar('profile')}>
Cancel
</Button>
<Button size="large" variant="primary" loading={loading} onClick={handleConfirm}>
Select
</Button>
</div> */}
</div>
);
}

20
src/app/(main)/chat/[id]/Sider/index.tsx → src/app/(main)/chat/[id]/Drawer/index.tsx
View File

@ -1,5 +1,4 @@
'use client';
import { useChatStore } from '../store';
import Profile from './Profile';
import Personal from './Personal';
import VoiceActor from './VoiceActor';
@ -7,7 +6,6 @@ import Font from './Font';
import MaxToken from './MaxToken';
import Background from './Background';
import ChatModel from './ChatModel';
import Language from './Language';
import { IconButton } from '@/components/ui/button';
import React, { useState } from 'react';
import {
@ -20,6 +18,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { useStreamChatStore } from '../stream-chat';
type SettingProps = {
open: boolean;
@ -33,8 +32,7 @@ export type ActiveTabType =
| 'font'
| 'max_token'
| 'background'
| 'model'
| 'language';
| 'model';
const titleMap = {
personal: 'Personal',
@ -44,15 +42,22 @@ const titleMap = {
max_token: 'Max Token',
background: 'Background',
model: 'Chat Model',
language: 'Language',
};
export default function SettingDialog({ open, onOpenChange }: SettingProps) {
const [activeTab, setActiveTab] = useState<ActiveTabType>('profile');
const updateUserChatSetting = useStreamChatStore((store) => store.updateUserChatSetting);
const handleChange = (open: boolean) => {
if (!open) {
updateUserChatSetting();
}
onOpenChange(open);
};
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent showCloseButton={activeTab === 'profile'}>
<AlertDialog open={open} onOpenChange={handleChange}>
<AlertDialogContent className="max-w-[500px]" showCloseButton={activeTab === 'profile'}>
<AlertDialogTitle className="flex justify-between">
{activeTab === 'profile' ? (
<IconButton variant="tertiary" size="small" iconfont="icon-Like" />
@ -73,7 +78,6 @@ export default function SettingDialog({ open, onOpenChange }: SettingProps) {
{activeTab === 'max_token' && <MaxToken />}
{activeTab === 'background' && <Background />}
{activeTab === 'model' && <ChatModel />}
{activeTab === 'language' && <Language />}
</div>
</AlertDialogContent>
</AlertDialog>

22
src/app/(main)/chat/[id]/Drawer/store.ts Normal file
View File

@ -0,0 +1,22 @@
import { create } from 'zustand';
import { ChatSettingType } from '@/app/(main)/chat/[id]/stream-chat';
interface ChatDrawerStore {
setting: ChatSettingType;
setSetting: (setting: Partial<ChatSettingType>) => void;
}
export const useChatDrawerStore = create<ChatDrawerStore>((set, get) => ({
setting: {
chatModel: '',
longText: 0,
maximumReplies: 0,
background: '',
font: 16,
voiceActor: '',
},
setSetting: (value: Partial<ChatSettingType>) => {
const { setting } = get();
set({ setting: { ...setting, ...value } });
},
}));

36
src/app/(main)/chat/[id]/Input.tsx
View File

@ -1,12 +1,18 @@
'use client';
import { IconButton } from '@/components/ui/button';
import { useAsyncFn } from '@/hooks/tools';
import { cn } from '@/lib/utils';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useState, useRef, useEffect } from 'react';
const AuthHeightTextarea = (props: React.ComponentProps<'textarea'> & { maxHeight?: number }) => {
const { maxHeight = 200, className, value, onChange, ...restProps } = props;
const AuthHeightTextarea = (
props: React.ComponentProps<'textarea'> & {
maxHeight?: number;
onSend?: (text: string) => void;
}
) => {
const { maxHeight = 200, className, value, onChange, onSend, ...restProps } = props;
const textareaRef = useRef<HTMLTextAreaElement>(null);
// 调整高度的函数
@ -28,6 +34,14 @@ const AuthHeightTextarea = (props: React.ComponentProps<'textarea'> & { maxHeigh
textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
// Enter 发送，Shift+Enter 换行
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); // 阻止默认的换行行为
onSend?.(value as string);
}
};
// 监听内容变化，自动调整高度
useEffect(() => {
adjustHeight();
@ -52,6 +66,7 @@ const AuthHeightTextarea = (props: React.ComponentProps<'textarea'> & { maxHeigh
height: '24px', // 初始高度
overflow: 'hidden', // 初始隐藏滚动条
}}
onKeyDown={handleKeyDown}
{...restProps}
/>
);
@ -61,6 +76,14 @@ export default function Input() {
const [isRecording, setIsRecording] = useState(false);
const [inputValue, setInputValue] = useState('');
const sendMessage = useStreamChatStore((state) => state.sendMessage);
const { run: sendMessageAsync, loading } = useAsyncFn(sendMessage);
const handleSend = () => {
if (inputValue.trim()) {
sendMessageAsync(inputValue);
setInputValue('');
}
};
return (
<div className="flex flex-col mb-6 items-end gap-4">
@ -81,6 +104,7 @@ export default function Input() {
maxHeight={70}
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onSend={handleSend}
className="py-1"
/>
{/* 提示词提示按钮 */}
@ -94,10 +118,10 @@ export default function Input() {
</div>
<IconButton
size="large"
loading={false}
loading={loading}
iconfont="icon-icon-send"
onClick={() => sendMessage(inputValue)}
disabled={false}
onClick={handleSend}
disabled={!inputValue.trim()}
className="flex-shrink-0"
/>
</div>

4
src/app/(main)/chat/[id]/MessageList.tsx
View File

@ -4,7 +4,7 @@ import CharacterHeader from './CharacterHeader';
import AIMessage from './AIMessage';
import UserMessage from './UserMessage';
import VirtualList from '@/components/ui/virtual-list';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
export default function MessageList() {
const messages = useStreamChatStore((s) => s.messages);
@ -34,7 +34,7 @@ export default function MessageList() {
};
return (
<div className="flex-1 replative">
<div className="flex-1 min-h-0">
<VirtualList className="h-full" data={itemList} itemContent={itemContent} />
</div>
);

71
src/app/(main)/chat/[id]/Sider/ChatModel.tsx
View File

@ -1,71 +0,0 @@
'use client';
import { useChatStore } from '../store';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Button, IconButton } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import Image from 'next/image';
export default function ChatModel() {
const setSideBar = useChatStore((store) => store.setSideBar);
return (
<div className="flex flex-col h-full">
<div className="flex-1">
<div className="bg-surface-element-normal overflow-hidden rounded-lg p-4">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<div className="txt-title-s">Role-Playing Model</div>
<Tooltip>
<TooltipTrigger asChild>
<IconButton iconfont="icon-question" variant="tertiary" size="mini" />
</TooltipTrigger>
<TooltipContent className="max-w-[300px]">
<div className="space-y-2">
<p className="break-words">
Text Message Price: Refers to the cost of chatting with the character via text
messages, including sending text, images, or gifts. Charged per message.
</p>
<p className="break-words">
Voice Message Price: Refers to the cost of sending a voice message to the
character or playing the character’s voice. Charged per use.
</p>
<p className="break-words">
Voice Call Price: Refers to the cost of having a voice call with the
character. Charged per minute.
</p>
</div>
</TooltipContent>
</Tooltip>
</div>
<Checkbox checked={true} shape="round" />
</div>
<div className="txt-body-m text-txt-secondary-normal mt-1">
Role-play a conversation with AI
</div>
<div className="bg-surface-district-normal mt-3 rounded-sm p-3">
<div className="flex items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<span className="txt-label-m text-txt-primary-normal">1/Text Message</span>
</div>
<div className="mt-3 flex items-center justify-between gap-1">
<div className="flex min-w-0 flex-1 items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<span className="txt-label-m text-txt-primary-normal">10/Send or play voice</span>
</div>
</div>
<div className="mt-3 flex items-center justify-between gap-1">
<div className="flex min-w-0 flex-1 items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<span className="txt-label-m text-txt-primary-normal">20/min Voice call</span>
</div>
</div>
</div>
</div>
<div className="txt-body-m text-txt-secondary-normal mt-6">Stay tuned for more models</div>
</div>
</div>
);
}

58
src/app/(main)/chat/[id]/Sider/Language.tsx
View File

@ -1,58 +0,0 @@
'use client';
import { useChatStore } from '../store';
import { useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
export default function Language() {
const setSideBar = useChatStore((store) => store.setSideBar);
const tokenOptions = [
{ value: 'zh-CN', label: 'Chinese' },
{ value: 'en-US', label: 'English' },
];
const [selectedToken, setSelectedToken] = useState('zh-CN');
const [loading, setLoading] = useState(false);
const handleConfirm = async () => {
setLoading(true);
try {
// TODO: 调用实际的 API 保存最大回复数设置
// await updateMaxToken({ maxToken: selectedToken })
console.log('Selected max token:', selectedToken);
// 模拟延迟
await new Promise((resolve) => setTimeout(resolve, 500));
setSideBar('profile');
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
return (
<div className="flex h-full flex-col">
<div className="flex-1">
<div className="flex flex-col gap-3">
{tokenOptions.map((option) => (
<div
key={option.value}
className={cn(
'bg-surface-element-normal flex h-12 cursor-pointer items-center justify-between rounded-lg px-5 transition-colors',
selectedToken === option.value && 'bg-surface-element-hover'
)}
onClick={() => setSelectedToken(option.value)}
>
<div className="txt-title-s">{option.label}</div>
<Checkbox shape="round" checked={selectedToken === option.value} />
</div>
))}
</div>
</div>
</div>
);
}

6
src/app/(main)/chat/[id]/UserMessage.tsx
View File

@ -1,5 +1,8 @@
'use client';
export default function UserMessage({ data }: { data: any }) {
import React from 'react';
function UserMessage({ data }: { data: any }) {
return (
<div className="mb-8 flex justify-end">
<div className="bg-primary-normal/20 inline-block max-w-[90%] rounded-lg p-4 backdrop-blur-2xl">
@ -8,3 +11,4 @@ export default function UserMessage({ data }: { data: any }) {
</div>
);
}
export default React.memo(UserMessage);

8
src/app/(main)/chat/[id]/page.tsx
View File

@ -3,8 +3,8 @@
import { IconButton } from '@/components/ui/button';
import Input from './Input';
import MessageList from './MessageList';
import SettingDialog from './Sider';
import { useStreamChatStore } from '@/stores/stream-chat';
import SettingDialog from './Drawer';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
@ -29,11 +29,11 @@ export default function ChatPage() {
</div>
<IconButton
onClick={() => setSettingOpen(!settingOpen)}
className="absolute top-1 right-1"
className="absolute top-2 right-2"
variant="ghost"
size="small"
>
<i className="iconfont-v2 iconv2-zhedie" />
<i className="iconfont-v2 iconv2-zhankai-1" />
</IconButton>
</div>
<SettingDialog open={settingOpen} onOpenChange={setSettingOpen} />

25
src/app/(main)/chat/[id]/store.ts
View File

@ -1,25 +0,0 @@
import { create } from 'zustand';
type SideBar =
| 'profile'
| 'personal'
| 'history'
| 'voice_actor'
| 'font'
| 'max_token'
| 'background'
| 'model'
| 'language';
interface ChatStore {
isSidebarOpen: boolean;
setIsSidebarOpen: (isSidebarOpen: boolean) => void;
sideBar: SideBar;
setSideBar: (sideBar: SideBar) => void;
}
export const useChatStore = create<ChatStore>((set) => ({
isSidebarOpen: false,
setIsSidebarOpen: (isSidebarOpen: boolean) => set({ isSidebarOpen }),
sideBar: 'profile',
setSideBar: (sideBar: SideBar) => set({ sideBar }),
}));

219
src/stores/stream-chat.ts → src/app/(main)/chat/[id]/stream-chat.ts
View File

@ -1,8 +1,15 @@
'use client';
import { Channel, StreamChat } from 'stream-chat';
import { create } from 'zustand';
import { getUserToken, createChannel } from '@/services/editor';
import {
getUserToken,
createChannel,
deleteChannel,
fetchUserChatSetting,
updateUserChatSetting,
} from '@/services/chat';
import { parseSSEStream, parseData } from '@/utils/streamParser';
import { protect } from '@/lib/protect';
type Message = {
key: string;
@ -10,23 +17,42 @@ type Message = {
content: string;
};
export type ChatSettingType = {
chatModel: string;
longText: 0 | 1;
maximumReplies: number;
background: string;
font: number;
voiceActor: string;
};
type UserType = {
userId: string;
userName: string;
};
interface StreamChatStore {
client: StreamChat | null;
user: {
userId: string;
userName: string;
};
user: UserType;
chatSetting: ChatSettingType;
// 连接 StreamChat 客户端
connect: (user: any) => Promise<void>;
// 频道
channels: Channel[];
currentChannel: Channel | null;
// 用户聊天设置管理
setChatSetting: (chatSetting: any) => void;
fetchUserChatSetting: () => Promise<void>;
updateUserChatSetting: () => Promise<void>;
// 创建某个角色的聊天频道, 返回channelId
createChannel: (characterId: string) => Promise<string | false>;
switchToChannel: (id: string) => Promise<void>;
queryChannels: (filter: any) => Promise<void>;
deleteChannel: (id: string) => Promise<void>;
clearChannels: () => Promise<void>;
queryChannels: (filter: any) => Promise<Channel[]>;
deleteChannel: (
id: string[]
) => Promise<{ result: string; newChannels?: Channel[]; error?: unknown }>;
getCurrentCharacter: () => any | null;
// 消息列表
@ -38,6 +64,9 @@ interface StreamChatStore {
// 清除通知
clearNotifications: () => Promise<void>;
// 推出登录，清除状态
clearClient: () => void;
}
export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
client: null,
@ -45,6 +74,14 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
userId: '',
userName: '',
},
chatSetting: {
chatModel: '',
longText: 0,
maximumReplies: 0,
background: '',
font: 16,
voiceActor: '',
},
channels: [],
messages: [],
setMessages: (messages: any[]) => set({ messages }),
@ -52,10 +89,9 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
// 获取当前聊天频道中的角色id
getCurrentCharacter() {
const { currentChannel, user } = get();
return (
Object.values(currentChannel?.state?.members || {})?.find((i) => i.user?.id !== user?.userId)
?.user?.id || null
);
return Object.values(currentChannel?.state?.members || {})?.find((i) => {
return i.user_id !== user?.userId;
});
},
// 创建某个角色的聊天频道
async createChannel(characterId: string) {
@ -77,28 +113,58 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
return data.channelId;
},
setChatSetting: (setting: any) => {
const { chatSetting } = get();
set({ chatSetting: { ...chatSetting, ...setting } });
},
async fetchUserChatSetting() {
const { user } = get();
const { data } = await fetchUserChatSetting({
userId: Number(user.userId),
});
if (data) {
set({ chatSetting: data });
}
},
async updateUserChatSetting() {
const { user, chatSetting, fetchUserChatSetting } = get();
await updateUserChatSetting({
...chatSetting,
userId: user.userId,
});
fetchUserChatSetting();
},
async connect(user) {
const { client } = get();
const { client, queryChannels, fetchUserChatSetting } = get();
set({ user });
if (client) return;
const { data } = await getUserToken(user);
const streamClient = new StreamChat(process.env.NEXT_PUBLIC_STREAM_CHAT_API_KEY || '');
const res = await streamClient.connectUser(
{
id: user.userId,
name: user.userName,
},
data
await protect(() =>
streamClient.connectUser(
{
id: user.userId,
name: user.userName,
},
data
)
);
set({ client: streamClient });
await queryChannels({});
await fetchUserChatSetting();
},
async switchToChannel(id: string) {
const { client, user } = get();
const channel = client!.channel('messaging', id);
const result = await channel.query({
messages: { limit: 100 },
});
const result = await protect(() =>
channel.query({
messages: { limit: 100 },
})
);
const messages = result.messages.map((i) => ({
key: i.id,
role: i.user?.id === user.userId ? 'user' : 'assistant',
@ -111,68 +177,52 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
const { user, client } = get();
if (!client) {
console.error('StreamChat client is not connected');
return;
return [];
}
let channels: Channel[] = [];
try {
const channels = await client.queryChannels(
{
members: {
$in: [user.userId],
channels = await protect(() =>
client.queryChannels(
{
members: {
$in: [user.userId],
},
},
},
{
last_message_at: -1,
},
{
message_limit: 1, // 返回最新的1条消息
}
{
last_message_at: -1,
},
{
message_limit: 1, // 返回最新的1条消息
}
)
);
set({ channels });
} catch (error) {
console.error('Failed to query channels:', error);
}
return channels;
},
async deleteChannel(id: string) {
const { channels, currentChannel, queryChannels } = get();
const channel = channels.find((ch) => ch.id === id);
if (!channel) {
console.warn(`Channel with id ${id} not found`);
return;
}
async deleteChannel(ids: string[]) {
const { channels, currentChannel, client, queryChannels } = get();
const deleteChannels = channels.filter((ch) => ids.includes(ch.id!));
try {
await channel.delete();
await queryChannels({});
if (currentChannel?.id === id) {
await Promise.all(
deleteChannels.map((ch) => {
return client?.channel('messaging', ch.id)?.delete();
})
);
await deleteChannel(ids);
const newChannels = await queryChannels({});
if (currentChannel?.id && ids.includes(currentChannel.id)) {
set({ currentChannel: null });
}
return { result: 'ok', newChannels };
} catch (error) {
console.error(`Failed to delete channel ${id}:`, error);
return { result: 'error', error: error };
}
},
async clearChannels() {
const { channels } = get();
try {
// 停止监听所有频道
for (const channel of channels) {
try {
await channel.stopWatching();
} catch (error) {
console.warn(`Failed to stop watching channel ${channel.id}:`, error);
}
}
// 清空频道列表和当前频道
set({
channels: [],
currentChannel: null,
});
} catch (error) {
console.error('Failed to clear channels:', error);
}
},
async clearNotifications() {},
// 发送消息
@ -189,7 +239,7 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
// 发送消息到服务器
const response = await fetch(
`${process.env.NEXT_PUBLIC_CHAT_API_URL}/chat-api/chat/testPrompt`,
`${process.env.NEXT_PUBLIC_CHAT_API_URL}/chat-api/chat/ai/generateReply`,
{
method: 'POST',
headers: {
@ -199,9 +249,8 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
userId: user.userId,
channelId: currentChannel?.id || '',
message: content,
promptTemplateId: 'default',
characterId: getCurrentCharacter()?.id,
modelName: 'gpt-3.5-turbo',
characterId: getCurrentCharacter()?.user_id,
language: 'zh',
}),
}
);
@ -210,12 +259,36 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
await parseSSEStream(response, (event: string, data: string) => {
if (event === 'chat-message') {
const d = parseData(data);
const lastMsg = finalMessages[finalMessages.length - 1];
// 重新赋值最后一项，改变引用
const lastMsg = { ...finalMessages[finalMessages.length - 1] };
if (lastMsg.role === 'assistant') {
lastMsg.content = d.content || '';
lastMsg.content = lastMsg.content + d.text || '';
}
finalMessages[finalMessages.length - 1] = lastMsg;
setMessages([...finalMessages]);
}
});
},
// 推出登录，清除状态
clearClient: async () => {
const { client } = get();
await client?.disconnectUser();
set({
client: null,
user: { userId: '', userName: '' },
chatSetting: {
chatModel: '',
longText: 0,
maximumReplies: 0,
background: '',
font: 16,
voiceActor: '',
},
channels: [],
messages: [],
currentChannel: null,
});
},
}));

8
src/app/(main)/crushcoin/components/CheckInGrid.tsx
View File

@ -1,7 +1,7 @@
'use client';
// import { useGetSevenDaysSignList, useSignIn } from '@/hooks/useHome'
// import { SignInListOutput } from '@/services/home/types'
import { useGetSevenDaysSignList, useSignIn } from '@/hooks/useHome';
import { SignInListOutput } from '@/services/home/types';
import { useQueryClient } from '@tanstack/react-query';
import { homeKeys } from '@/lib/query-keys';
import { CheckInCard } from './CheckInCard';
@ -10,8 +10,8 @@ import { toast } from 'sonner';
export function CheckInGrid() {
const queryClient = useQueryClient();
// const { data: signListData, isLoading } = useGetSevenDaysSignList()
// const signInMutation = useSignIn()
const { data: signListData, isLoading } = useGetSevenDaysSignList();
const signInMutation = useSignIn();
const hasSignRef = useRef(false);
useEffect(() => {

7
src/app/(main)/home/components/Character/index.tsx
View File

@ -23,9 +23,12 @@ const Character = () => {
<div className="mt-8">
<InfiniteScrollList<any>
items={dataSource}
columns={(width) => Math.floor(width / 213)}
columns={(width) => {
const cardWidth = width > 1200 ? 256 : width > 588 ? 200 : 170;
return Math.floor(width / cardWidth);
}}
renderItem={(character) => <AIStandardCard character={character} />}
getItemKey={(character) => character.id}
getItemKey={(character, index) => character.id + index}
hasNextPage={!noMoreData}
isLoading={isFirstLoading || isLoadingMore}
fetchNextPage={onLoadMore}

95
src/app/(main)/home/components/Header.tsx
View File

@ -10,60 +10,53 @@ const Header = React.memo(() => {
const response = useMedia();
return (
<Link href="/crushcoin">
<div
className="h-50 rounded-4xl px-6 mb-12 flex items-center justify-between"
style={{
background:
'linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(202, 153, 255, 0.2) 100%)',
}}
>
<div className="flex gap-3 items-center">
<Image
src="/images/home/icon-crush-free.png"
className="h-30 w-30 object-cover"
alt="header-bg"
width={120}
height={120}
/>
<div>
<div className="flex gap-5 txt-display-l">
Check-in{' '}
<Image
src="/images/home/left-star.png"
className="h-12 w-12 object-cover"
alt="header-bg"
width={48}
height={48}
/>
</div>
<div className="flex gap-5 items-center">
<span
className="txt-headline-s bg-clip-text text-transparent"
style={{
background:
'linear-gradient(109.2deg, rgba(211, 123, 235, 1) 37.08%, rgba(147, 123, 235, 1) 128.91%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text',
}}
>
Daily Free crush coinsh
</span>
<IconButton iconfont="icon-arrow-right-border" size="small" variant="primary" />
</div>
// <Link href="/crushcoin">
<div
className="h-25 sm:h-50 rounded-2xl sm:rounded-4xl px-6 mb-12 flex items-center justify-between"
style={{
background:
'linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(202, 153, 255, 0.2) 100%)',
}}
>
<div className="flex gap-3 items-center">
<img
src="/images/home/icon-crush-free.png"
className="h-15 w-15 sm:h-30 sm:w-30 object-cover"
alt="header-bg"
/>
<div>
<div className="flex gap-5 txt-display-m sm:txt-display-l">
Check-in{' '}
<Image
src="/images/home/left-star.png"
className="h-6 w-6 sm:h-12 sm:w-12 object-cover"
alt="header-bg"
width={48}
height={48}
/>
</div>
<div className="flex gap-5 items-center">
<span
className="txt-body-m sm:txt-headline-s bg-clip-text text-transparent"
style={{
background:
'linear-gradient(109.2deg, rgba(211, 123, 235, 1) 37.08%, rgba(147, 123, 235, 1) 128.91%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text',
}}
>
Daily Free crush coinsh
</span>
<IconButton iconfont="icon-arrow-right-border" size="small" variant="primary" />
</div>
</div>
{response?.lg && (
<Image
src="/images/home/banner-header.png"
alt="banner-header"
width={250}
height={250}
/>
)}
</div>
</Link>
{response?.lg && (
<Image src="/images/home/banner-header.png" alt="banner-header" width={250} height={250} />
)}
</div>
// </Link>
);
});

2
src/app/(main)/home/components/Story/index.tsx
View File

@ -1,7 +1,7 @@
'use client';
const Story = () => {
return <div>Story</div>;
return <div>开发中ing</div>;
};
export default Story;

14
src/app/(main)/home/store.ts
View File

@ -1,15 +1,15 @@
import { create } from 'zustand'
import { create } from 'zustand';
interface HomeStore {
tab: 'story' | 'character'
selectedTags: string[]
setTab: (tab: 'story' | 'character') => void
setSelectedTags: (selectedTags: string[]) => void
tab: 'story' | 'character';
selectedTags: string[];
setTab: (tab: 'story' | 'character') => void;
setSelectedTags: (selectedTags: string[]) => void;
}
export const useHomeStore = create<HomeStore>((set) => ({
tab: 'story',
tab: 'character',
setTab: (tab: 'story' | 'character') => set({ tab }),
selectedTags: [],
setSelectedTags: (selectedTags: string[]) => set({ selectedTags }),
}))
}));

75
src/app/(main)/leaderboard/components/LargeRankCard.tsx
View File

@ -1,75 +0,0 @@
'use client'
import { formatNumberToKMB } from '@/lib/utils'
import Image from 'next/image'
import { AiChatRankOutput, AiHeartbeatRankOutput, AiGiftRankOutput } from '@/services/home/types'
import { RankType } from '@/types/global'
import Link from 'next/link'
interface LargeRankCardProps {
item: AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput
rankType: RankType
}
export default function LargeRankCard({ item, rankType }: LargeRankCardProps) {
// 根据排行榜类型获取对应的数值显示
const getDisplayValue = () => {
switch (rankType) {
case RankType.CHAT:
return formatNumberToKMB((item as AiChatRankOutput).chatNum || 0)
case RankType.CRUSH:
return `${(item as AiHeartbeatRankOutput).heartbeatValTotal || 0}℃`
case RankType.GIFTS:
return formatNumberToKMB(Math.floor((item as AiGiftRankOutput).giftCoinNum || 0) / 100)
default:
return '0'
}
}
// 根据排行榜类型获取对应的图标
const getIcon = () => {
switch (rankType) {
case RankType.CHAT:
return <i className={`iconfont icon-Chat !text-[12px]`} />
case RankType.CRUSH:
return <Image src="/icons/icon-crush.svg" alt="" width={12} height={12} />
case RankType.GIFTS:
return <Image src="/icons/diamond.svg" alt="" width={12} height={12} />
default:
return <i className={`iconfont icon-Chat !text-[12px]`} />
}
}
const imageUrl = item.homeImageUrl || ''
if (!item) {
return <div className="relative aspect-[240/360] w-[38.5%] overflow-hidden rounded-b-lg"></div>
}
return (
<Link
href={`/chat/${item.aiId}`}
prefetch={false}
key={item.aiId}
className="relative aspect-[240/360] w-[38.5%] overflow-hidden rounded-b-lg"
>
<div
className="absolute inset-0"
style={{
background: `url(${imageUrl}) #211a2b 50% / cover no-repeat`,
maskImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 55%)',
}}
/>
<div className="absolute right-0 bottom-0 left-0 aspect-[240/112]">
<Image src="/images/leaderboard/1-st.svg" alt="" fill className="object-cover" />
</div>
<div className="absolute inset-0">
<div className="absolute right-0 bottom-[44] left-0 flex items-center justify-center gap-1">
{getIcon()}
<div className="txt-numMonotype-s">{getDisplayValue()}</div>
</div>
<div className="txt-numDisplay-m absolute right-0 bottom-1 left-0 text-center">1st</div>
</div>
</Link>
)
}

132
src/app/(main)/leaderboard/components/RankingList.tsx
View File

@ -1,132 +0,0 @@
'use client'
import Image from 'next/image'
import { useMemo } from 'react'
import { AiChatRankOutput, AiHeartbeatRankOutput, AiGiftRankOutput } from '@/services/home/types'
import { RankType } from '@/types/global'
import { formatNumberToKMB } from '@/lib/utils'
import Link from 'next/link'
import { usePrefetchRoutes } from '@/hooks/useGlobalPrefetchRoutes'
interface RankingListProps {
rankData: (AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput)[]
rankType: RankType
startFromRank?: number // 从第几名开始显示，默认为4
}
const RankingList: React.FC<RankingListProps> = ({ rankData, rankType, startFromRank = 4 }) => {
const filteredData = useMemo(
() => rankData.filter((item) => item.rankNo && item.rankNo >= startFromRank),
[rankData, startFromRank]
)
const chatRoutes = useMemo(
() => filteredData.map((item) => (item?.aiId ? `/chat/${item.aiId}` : null)),
[filteredData]
)
usePrefetchRoutes(chatRoutes, { limit: 20 })
// 根据排行榜类型获取格式化后的显示值
const getDisplayValue = (item: AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput) => {
switch (rankType) {
case RankType.CHAT:
return formatNumberToKMB((item as AiChatRankOutput).chatNum || 0)
case RankType.CRUSH:
return `${(item as AiHeartbeatRankOutput).heartbeatValTotal || 0}℃`
case RankType.GIFTS:
return formatNumberToKMB(Math.floor(((item as AiGiftRankOutput).giftCoinNum || 0) / 100))
default:
return '0'
}
}
// 根据排行榜类型获取对应的图标组件
const getRankIcon = () => {
switch (rankType) {
case RankType.CHAT:
return <i className="iconfont icon-Chat !text-[24px]" />
case RankType.CRUSH:
return <Image src="/icons/icon-crush.svg" alt="" width={24} height={24} />
case RankType.GIFTS:
return <Image src="/icons/diamond.svg" alt="" width={24} height={24} />
default:
return <i className="iconfont icon-Chat !text-[24px]" />
}
}
const getLikedCount = (item: AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput) => {
if ('likedNum' in item && typeof item.likedNum === 'number') {
return item.likedNum
}
return 0
}
if (filteredData.length === 0) {
return null
}
return (
<div className="mx-auto mt-6 flex max-w-[752px] flex-col gap-2 px-4 pb-4">
{filteredData.map((item) => {
const displayValue = getDisplayValue(item)
return (
<Link href={`/chat/${item.aiId}`} key={item.aiId} prefetch={false}>
<div
key={item.aiId}
className="box-border flex w-full items-center justify-center gap-4 p-2"
>
{/* 排名编号 */}
<div className="txt-numDisplay-s w-6 shrink-0 text-center">
{String(item.rankNo).padStart(2, '0')}
</div>
{/* 头像 */}
<div className="relative h-16 w-16 shrink-0">
<div className="absolute top-1/2 left-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2">
<Image
src={item.headImg || ''}
alt={item.nickname || 'Avatar'}
width={64}
height={64}
className="h-full w-full rounded-full object-cover"
/>
</div>
</div>
{/* 用户信息区域 */}
<div className="flex min-w-0 flex-1 flex-col gap-2">
{/* 用户名 */}
<div className="flex w-full items-start gap-2">
<div className="txt-title-m truncate">{item.nickname}</div>
</div>
{/* 喜欢数 */}
<div className="flex w-full items-center gap-2">
<div className="text-txt-secondary-normal flex items-center gap-1">
<i className="iconfont icon-Like-fill !text-[12px]" />
<div className="txt-numMonotype-s">
{formatNumberToKMB(getLikedCount(item) || 0)}
</div>
</div>
</div>
</div>
{/* 排行榜数值 */}
<div className="flex items-center">
<div className="flex w-16 min-w-6 flex-col items-center justify-center gap-1 rounded-[4px] px-1 py-0.5 backdrop-blur-sm">
{/* 图标 */}
<div className="flex h-6 w-6 items-center justify-center">{getRankIcon()}</div>
{/* 数值 */}
<div className="txt-numMonotype-s text-center">{displayValue}</div>
</div>
</div>
</div>
</Link>
)
})}
</div>
)
}
export default RankingList

83
src/app/(main)/leaderboard/components/SmallRankCard.tsx
View File

@ -1,83 +0,0 @@
'use client'
import { formatNumberToKMB } from '@/lib/utils'
import Image from 'next/image'
import { AiChatRankOutput, AiHeartbeatRankOutput, AiGiftRankOutput } from '@/services/home/types'
import { RankType } from '@/types/global'
import Link from 'next/link'
interface SmallRankCardProps {
item: AiChatRankOutput | AiHeartbeatRankOutput | AiGiftRankOutput
rankType: RankType
rank?: number // 用于显示排名，如果不传则使用item.rankNo
}
export default function SmallRankCard({ item, rankType, rank }: SmallRankCardProps) {
// 根据排行榜类型获取对应的数值显示
const getDisplayValue = () => {
switch (rankType) {
case RankType.CHAT:
return formatNumberToKMB((item as AiChatRankOutput).chatNum || 0)
case RankType.CRUSH:
return `${(item as AiHeartbeatRankOutput).heartbeatValTotal || 0}℃`
case RankType.GIFTS:
return formatNumberToKMB(Math.floor(((item as AiGiftRankOutput).giftCoinNum || 0) / 100))
default:
return '0'
}
}
// 根据排行榜类型获取对应的图标
const getIcon = () => {
switch (rankType) {
case RankType.CHAT:
return <i className="iconfont icon-Chat !text-[12px]" />
case RankType.CRUSH:
return <Image src="/icons/icon-crush.svg" alt="" width={12} height={12} />
case RankType.GIFTS:
return <Image src="/icons/diamond.svg" alt="" width={12} height={12} />
default:
return <i className="iconfont icon-Chat !text-[12px]" />
}
}
if (!item) {
return <div className="flex-1 py-12"></div>
}
const imageUrl = item.homeImageUrl || ''
const rankNo = rank || item.rankNo || 1
return (
<Link href={`/chat/${item.aiId}`} prefetch={false} key={item.aiId} className="flex-1">
<div className="flex-1 py-12">
<div className="relative aspect-[240/360] w-full overflow-hidden rounded-b-lg">
<div
className="absolute inset-0"
style={{
background: `url(${imageUrl}) #211a2b 50% / cover no-repeat`,
maskImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 55%)',
}}
/>
<div className="absolute right-0 bottom-0 left-0 aspect-[240/112]">
<Image
src={`/images/leaderboard/${rankNo}-st.svg`}
alt=""
fill
className="object-cover"
/>
</div>
<div className="absolute inset-0">
<div className="absolute right-0 bottom-[44] left-0 flex items-center justify-center gap-1">
{getIcon()}
<div className="txt-numMonotype-s">{getDisplayValue()}</div>
</div>
<div className="txt-numDisplay-m absolute right-0 bottom-1 left-0 text-center">
{rankNo === 2 ? '2nd' : '3rd'}
</div>
</div>
</div>
</div>
</Link>
)
}

68
src/app/(main)/leaderboard/components/TopHeader.tsx
View File

@ -1,68 +0,0 @@
'use client'
import { useMemo } from 'react'
import LargeRankCard from './LargeRankCard'
import SmallRankCard from './SmallRankCard'
import { AiChatRankOutput, AiHeartbeatRankOutput, AiGiftRankOutput } from '@/services/home/types'
import { RankType } from '@/types/global'
import { usePrefetchRoutes } from '@/hooks/useGlobalPrefetchRoutes'
interface TopHeaderProps {
rankData: AiChatRankOutput[] | AiHeartbeatRankOutput[] | AiGiftRankOutput[]
rankType: RankType
isLoading?: boolean
}
export default function TopHeader({ rankData, rankType, isLoading }: TopHeaderProps) {
const topThree = useMemo(() => (rankData || []).slice(0, 3), [rankData])
const chatRoutes = useMemo(
() => topThree.map((item) => (item?.aiId ? `/chat/${item.aiId}` : null)),
[topThree]
)
usePrefetchRoutes(chatRoutes, { limit: 3 })
if (isLoading) {
return (
<div className="mx-auto mt-6 max-w-[624px]">
<div className="flex w-full items-center gap-4">
<div className="flex-1 py-12">
<div className="bg-surface-nest-normal aspect-[240/360] w-full animate-pulse rounded-b-lg" />
</div>
<div className="bg-surface-nest-normal aspect-[240/360] w-[38.5%] animate-pulse rounded-b-lg" />
<div className="flex-1 py-12">
<div className="bg-surface-nest-normal aspect-[240/360] w-full animate-pulse rounded-b-lg" />
</div>
</div>
</div>
)
}
if (!rankData || rankData.length === 0) {
return (
<div className="mx-auto mt-6 max-w-[624px]">
<div className="flex h-64 items-center justify-center">
<div className="text-txt-secondary-normal">No leaderboard data yet</div>
</div>
</div>
)
}
const firstPlace = topThree[0]
const secondPlace = topThree[1]
const thirdPlace = topThree[2]
return (
<div className="mx-auto mt-6 max-w-[624px]">
<div className="flex w-full items-center gap-4">
{/* 第二名 */}
<SmallRankCard item={secondPlace} rankType={rankType} rank={2} />
{/* 第一名 */}
<LargeRankCard item={firstPlace} rankType={rankType} />
{/* 第三名 */}
<SmallRankCard item={thirdPlace} rankType={rankType} rank={3} />
</div>
</div>
)
}

166
src/app/(main)/leaderboard/leaderboard-page.tsx
View File

@ -1,166 +0,0 @@
'use client'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { cn } from '@/lib/utils'
import { useState, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import TopHeader from './components/TopHeader'
import RankingList from './components/RankingList'
import { useGetChatRank, useGetHeartbeatRank, useGetGiftRank } from '@/hooks/useHome'
import { RankType } from '@/types/global'
import Image from 'next/image'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { IconButton } from '@/components/ui/button'
const LeaderboardPage = () => {
const searchParams = useSearchParams()
const typeFromUrl = searchParams.get('type')
// 验证并设置初始 tab，确保 typeFromUrl 是有效的 RankType
const getInitialTab = (): RankType => {
if (typeFromUrl && Object.values(RankType).includes(typeFromUrl as RankType)) {
return typeFromUrl as RankType
}
return RankType.CHAT
}
const [selectedTab, setSelectedTab] = useState<RankType>(getInitialTab())
// 当 URL 参数变化时，更新选中的 tab
useEffect(() => {
const newTab = getInitialTab()
setSelectedTab(newTab)
}, [typeFromUrl])
// 调用三个排行榜接口
const { data: chatRankData, isLoading: chatLoading, error: chatError } = useGetChatRank()
const {
data: heartbeatRankData,
isLoading: heartbeatLoading,
error: heartbeatError,
} = useGetHeartbeatRank()
const { data: giftRankData, isLoading: giftLoading, error: giftError } = useGetGiftRank()
const tabs = [
{ value: RankType.CHAT, label: 'Chat' },
{ value: RankType.CRUSH, label: 'Crush' },
{ value: RankType.GIFTS, label: 'Gifts' },
]
// 根据选中的tab获取对应的数据
const getCurrentRankData = () => {
switch (selectedTab) {
case RankType.CHAT:
return { data: chatRankData, isLoading: chatLoading, error: chatError }
case RankType.CRUSH:
return { data: heartbeatRankData, isLoading: heartbeatLoading, error: heartbeatError }
case RankType.GIFTS:
return { data: giftRankData, isLoading: giftLoading, error: giftError }
default:
return { data: chatRankData, isLoading: chatLoading, error: chatError }
}
}
const currentRankData = getCurrentRankData()
const backgroundColorMap = {
[RankType.CHAT]: 'linear-gradient(122.5deg, #F264A4 20.45%, #C241E6 100%)',
[RankType.CRUSH]: 'linear-gradient(122.5deg, #D664F2 20.45%, #416DE6 100%)',
[RankType.GIFTS]: 'linear-gradient(122.5deg, #FFC336 20.45%, #FF972F 100%)',
}
// return (background: linear-gradient(122.5deg, #F264A4 20.45%, #C241E6 100%);
return (
<div className="bg-background-default w-full">
<div className="bg-background-default absolute top-0 right-0 bottom-0 left-0">
<div
className="absolute -top-[215px] h-[300px] w-[100%] opacity-50 blur-3xl"
style={{
background: backgroundColorMap[selectedTab],
}}
/>
<Image src="/images/leaderboard/bg.png" alt="Bg" fill className="object-cover" />
</div>
<div className="relative mx-auto w-full max-w-[752px]">
<h1 className="txt-headline-m pt-12 text-center">Leaderboard</h1>
<Tooltip>
<TooltipTrigger asChild>
<IconButton
iconfont="icon-question"
variant="tertiaryDark"
size="small"
className="absolute top-0 right-0"
/>
</TooltipTrigger>
<TooltipContent>
<p>The hot chat list is ranked by the number of AI chat sessions.</p>
<p>
The heart list is ranked by the sum of the heart values generated by all the
interlocutors of the AI character.
</p>
<p>
The gift list is ranked by the sum of the gift value received by the AI character.
</p>
</TooltipContent>
</Tooltip>
<div className="mt-4 flex items-center justify-center">
<Tabs
className="h-auto rounded-none p-0"
value={selectedTab}
onValueChange={(value) => setSelectedTab(value as RankType)}
>
<TabsList>
{tabs.map((tab) => (
<TabsTrigger
key={tab.value}
value={tab.value}
className={cn(
'relative h-8 border-0 bg-transparent px-2 shadow-none',
'txt-title-m text-txt-secondary-normal',
'data-[state=active]:text-txt-primary-normal',
'data-[state=active]:bg-transparent',
'data-[state=active]:shadow-none',
'hover:text-txt-primary-normal',
'focus-visible:ring-0 focus-visible:ring-offset-0',
'flex cursor-pointer items-center justify-center'
)}
>
<span className="whitespace-nowrap">{tab.label}</span>
{/* 活跃状态指示器 */}
<div
className={cn(
'bg-primary-normal absolute bottom-0 left-1/2 h-1 w-5 -translate-x-1/2 rounded-xs transition-opacity',
selectedTab === tab.value ? 'opacity-100' : 'opacity-0'
)}
/>
</TabsTrigger>
))}
</TabsList>
</Tabs>
</div>
{/* 排行榜内容 */}
{
<>
<TopHeader
rankData={currentRankData.data || []}
rankType={selectedTab}
isLoading={currentRankData.isLoading}
/>
{/* 后续排名列表 */}
{!currentRankData.isLoading && (
<RankingList
rankData={currentRankData.data || []}
rankType={selectedTab}
startFromRank={4}
/>
)}
</>
}
</div>
</div>
)
}
export default LeaderboardPage

11
src/app/(main)/leaderboard/page.tsx
View File

@ -1,11 +0,0 @@
import Leaderboard from './leaderboard-page'
const LeaderboardPage = () => {
return (
<div className="w-full">
<Leaderboard />
</div>
)
}
export default LeaderboardPage

76
src/app/(main)/profile/components/ProfileDropdown.tsx
View File

@ -9,20 +9,11 @@ import {
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { useLogout } from '@/hooks/auth';
import { useSetAtom } from 'jotai';
import {
conversationListAtom,
msgListAtom,
userListAtom,
imSyncedAtom,
imReconnectStatusAtom,
IMReconnectStatus,
selectedConversationIdAtom,
} from '@/atoms/im';
import { QueueMap } from '@/lib/queue';
import Link from 'next/link';
import { useState } from 'react';
import { useLayoutStore } from '@/stores';
import { useStreamChatStore } from '../../chat/[id]/stream-chat';
import { useAsyncFn } from '@/hooks/tools';
const ProfileDropdownItem = ({
icon,
@ -49,65 +40,20 @@ const ProfileDropdownItem = ({
const ProfileDropdown = () => {
const { mutateAsync: logout } = useLogout();
// const { clearAllConversations } = useNimConversation();
const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
const [isLogoutDialogLoading, setIsLogoutDialogLoading] = useState(false);
const { isSidebarExpanded, setSidebarExpanded } = useLayoutStore();
const setSidebarExpanded = useLayoutStore((s) => s.setSidebarExpanded);
const clearClient = useStreamChatStore((s) => s.clearClient);
// IM相关状态重置
const setConversationList = useSetAtom(conversationListAtom);
const setMsgList = useSetAtom(msgListAtom);
const setUserList = useSetAtom(userListAtom);
const setImSynced = useSetAtom(imSyncedAtom);
const setImReconnectStatus = useSetAtom(imReconnectStatusAtom);
const setSelectedConversationId = useSetAtom(selectedConversationIdAtom);
const handleLogout = async () => {
const { run: handleLogout, loading } = useAsyncFn(async () => {
try {
setIsLogoutDialogLoading(true);
// 1. 断开IM连接
try {
console.log('开始断开IM连接...');
// await nim.V2NIMLoginService.logout();
console.log('IM连接已断开');
} catch (imError) {
console.error('断开IM连接失败:', imError);
// 即使IM断开失败，也继续执行后续步骤
}
// 2. 清除所有聊天数据
try {
console.log('开始清除聊天历史数据...');
// await clearAllConversations();
console.log('聊天历史数据已清除');
} catch (clearError) {
console.error('清除聊天数据失败:', clearError);
// 即使清除失败，也继续执行后续步骤
}
// 3. 重置所有IM相关的本地状态
setConversationList(new Map());
setMsgList(new QueueMap(20, 'rightToLeft'));
setUserList(new Map());
setImSynced(false);
setImReconnectStatus(IMReconnectStatus.DISCONNECTED);
setSelectedConversationId(null);
if (isSidebarExpanded) {
setSidebarExpanded(false);
}
// 4. 执行用户登出
await clearClient();
setSidebarExpanded(false);
await logout();
setIsLogoutDialogOpen(false);
setIsLogoutDialogLoading(false);
} catch (error) {
console.error('登出过程中发生错误:', error);
setIsLogoutDialogLoading(false);
}
};
});
// 菜单项配置
const items: Array<
@ -199,11 +145,7 @@ const ProfileDropdown = () => {
<AlertDialogDescription>Are you sure you want to log out?</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
loading={isLogoutDialogLoading}
onClick={handleLogout}
>
<AlertDialogAction variant="destructive" loading={loading} onClick={handleLogout}>
Log out
</AlertDialogAction>
</AlertDialogFooter>

14
src/app/(main)/user/[userId]/components/AboutSection.tsx
View File

@ -1,14 +0,0 @@
'use client'
interface AboutSectionProps {
introduction: string
}
export function AboutSection({ introduction }: AboutSectionProps) {
return (
<div className="bg-surface-base-normal flex w-full flex-col items-start justify-start gap-4 rounded-lg p-6">
<h3 className="txt-title-m text-txt-primary-normal">Introduction</h3>
<p className="txt-body-l text-txt-primary-normal">{introduction}</p>
</div>
)
}

266
src/app/(main)/user/[userId]/components/AlbumImageViewerAction.tsx
View File

@ -1,266 +0,0 @@
'use client'
import { IAlbumItem, LikedStatus, LockStatus } from '@/services/user'
import { useAIUser } from '../context/aiUser'
import { Button, IconButton } from '@/components/ui/button'
import {
useLikeAlbumImage,
useSetAlbumImageUnlockMethod,
useSetDefaultAlbumImage,
} from '@/hooks/aiUser'
import { cn, delay } from '@/lib/utils'
import { Checkbox } from '@/components/ui/checkbox'
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { useState, useRef } from 'react'
import AlbumPriceSetting, { AlbumPriceFormData } from '@/components/features/album-price-setting'
import Image from 'next/image'
import AlbumDeleteAlert from '@/components/features/album-delete-alert'
import { formatFromCents } from '@/utils/number'
import { useUpdateWalletBalance } from '@/hooks/useWallet'
import { isChargeDrawerOpenAtom } from '@/atoms/im'
import { useSetAtom } from 'jotai'
import Decimal from 'decimal.js'
const AlbumImageViewerAction = ({
datas,
originalDatas,
currentIndex,
onDeleted,
onUnlock,
unlockingAlbumIdsRef,
}: {
currentIndex: number
datas: IAlbumItem[]
originalDatas: IAlbumItem[]
onUnlock?: (imageId: number) => Promise<void>
onDeleted?: (nextIndex: number | null) => void
unlockingAlbumIdsRef: React.RefObject<Set<number>>
}) => {
const [lockLoading, setLockLoading] = useState(false)
const [isDefaultDialogOpen, setIsDefaultDialogOpen] = useState(false)
const { isOwner, userId } = useAIUser()
const currentData = datas[currentIndex]
const { albumId: originalAlbumId } = currentData
const current = originalDatas.find((item) => item.albumId === originalAlbumId)
const walletUpdate = useUpdateWalletBalance()
const setIsChargeDrawerOpen = useSetAtom(isChargeDrawerOpenAtom)
if (!current) return null
const { lockStatus, likedStatus, isDefault, unlockPrice, albumId } = current
const isLiked = likedStatus === LikedStatus.Liked
const likeMutation = useLikeAlbumImage()
const setDefaultMutation = useSetDefaultAlbumImage()
const setAlbumImageUnlockMethodMutation = useSetAlbumImageUnlockMethod()
const handleLike = (albumId: number, isLiked: boolean) => {
if (!userId) return
likeMutation.mutate({
albumId,
likedStatus: isLiked ? LikedStatus.Canceled : LikedStatus.Liked,
aiId: userId,
})
}
const handleSetDefault = (albumId: number) => {
if (!userId) return
// 如果是付费图片，则需要弹窗确认
if (lockStatus) {
setIsDefaultDialogOpen(true)
return
}
handleConfirmSetDefault(albumId)
}
const handleUnlock = async () => {
if (!userId || lockLoading || unlockingAlbumIdsRef.current?.has(albumId)) return
if (!walletUpdate.checkSufficient((unlockPrice || 0) / 100)) {
setIsChargeDrawerOpen(true)
return
}
unlockingAlbumIdsRef.current?.add(albumId)
setLockLoading(true)
try {
await onUnlock?.(albumId)
} finally {
setLockLoading(false)
unlockingAlbumIdsRef.current?.delete(albumId)
}
}
const handleConfirmSetDefault = (albumId: number) => {
if (!userId) return
setDefaultMutation.mutate(
{
aiId: userId,
albumId,
},
{
onSuccess: () => {
setIsDefaultDialogOpen(false)
},
onError: () => {
setIsDefaultDialogOpen(false)
},
}
)
}
const handleSetAlbumImageUnlockMethod = async (data: AlbumPriceFormData) => {
if (!userId) return
await setAlbumImageUnlockMethodMutation.mutateAsync({
aiId: userId,
albumId: datas[currentIndex].albumId,
unlockPrice: data.price ? new Decimal(data.price).mul(100).toNumber() : 0,
})
}
const renderPayAction = () => {
if (lockStatus === LockStatus.Lock) {
return (
<div className="flex items-center gap-3">
<div className="txt-label-m text-txt-primary-normal">How to Unlock:</div>
<div className="flex items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<div className="txt-numMonotype-s text-txt-primary-normal">
{formatFromCents(unlockPrice)}
</div>
</div>
</div>
)
}
if (isOwner && lockStatus === LockStatus.Unlock) {
return (
<div className="flex items-center gap-3">
<div className="txt-label-m text-txt-primary-normal">How to Unlock:</div>
<div className="flex items-center gap-1">
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
<div className="txt-numMonotype-s text-txt-primary-normal">
{formatFromCents(unlockPrice)}
</div>
</div>
</div>
)
}
return <div className="txt-label-m text-txt-primary-normal">How to Unlock: Free</div>
}
const renderDefaultAction = () => {
return (
<>
<div className="bg-outline-normal h-6 w-px" />
<div
className="bg-surface-element-light-normal flex h-8 cursor-pointer items-center justify-center gap-2 rounded-full px-3 backdrop-blur-lg"
onClick={() => handleSetDefault(albumId)}
>
<Checkbox shape="round" checked={isDefault} />
<div className="txt-label-s">Default</div>
</div>
<AlertDialog open={isDefaultDialogOpen} onOpenChange={setIsDefaultDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Default image</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription>
After setting this as the default image, its unlock method can only be "Free."
</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button
variant="primary"
loading={setDefaultMutation.isPending}
onClick={() => handleConfirmSetDefault(albumId)}
>
Confirm
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{!isDefault && <div className="bg-outline-normal h-6 w-px" />}
{!isDefault && (
<div className="flex items-center gap-3">
{renderPayAction()}
<AlbumPriceSetting
defaultUnlockPrice={unlockPrice || 0}
onConfirm={handleSetAlbumImageUnlockMethod}
/>
</div>
)}
<div className="bg-outline-normal h-6 w-px" />
<AlbumDeleteAlert
aiId={userId!}
albumId={albumId}
isDefaultImage={!!isDefault}
onDeleted={() => {
const nextLength = datas.length - 1
if (nextLength <= 0) {
onDeleted?.(null)
return
}
const isLast = currentIndex >= nextLength
const nextIndex = isLast ? nextLength - 1 : currentIndex
onDeleted?.(nextIndex)
}}
>
<IconButton iconfont="icon-trashcan" variant="tertiary" size="small" />
</AlbumDeleteAlert>
</>
)
}
if (!isOwner) {
if (!lockStatus || lockStatus === LockStatus.Unlock) {
// 没有上锁的图片，显示点赞按钮
return (
<>
<div className="bg-outline-normal h-6 w-px" />
<Button
variant="tertiary"
size="small"
className="gap-1"
onClick={() => handleLike(datas[currentIndex].albumId, isLiked)}
>
<i
className={cn('iconfont !text-[16px] leading-none', {
'icon-Like': !isLiked,
'icon-Like-fill !text-important-normal': isLiked,
})}
/>
<div className="txt-label-s">Like</div>
</Button>
</>
)
}
return (
<>
<div className="bg-outline-normal h-6 w-px" />
<Button
variant="primary"
size="small"
className="gap-1"
onClick={handleUnlock}
loading={lockLoading}
>
Unlock
</Button>
</>
)
}
return <>{renderDefaultAction()}</>
}
export default AlbumImageViewerAction

153
src/app/(main)/user/[userId]/components/AlbumItem.tsx
View File

@ -1,153 +0,0 @@
import { Tag } from '@/components/ui/tag'
import { cn, formatNumberToKMB } from '@/lib/utils'
import { IAlbumItem, LikedStatus, LockStatus } from '@/services/user'
import Image from 'next/image'
import { useState } from 'react'
import { useAIUser } from '../context/aiUser'
import { IconButton } from '@/components/ui/button'
import AlbumItemAction from './AlbumItemAction'
import { formatFromCents } from '@/utils/number'
interface AlbumItemProps {
item: IAlbumItem
onLike: (albumId: number, isLiked: boolean) => void
onImageClick: () => void
}
const AlbumItem = ({ item, onLike, onImageClick }: AlbumItemProps) => {
const [imageLoading, setImageLoading] = useState(true)
const { isOwner } = useAIUser()
const handleLike = () => {
onLike(item.albumId, item.likedStatus === LikedStatus.Liked)
}
const renderTag = () => {
if (item.isDefault) {
return null
}
if (isOwner) {
if (item.lockStatus) {
return (
<Tag variant="dark" className="absolute top-2 right-2 p-[6px]" size="small">
<i className="iconfont icon-private !text-[12px] leading-none" />
</Tag>
)
}
}
if (item.lockStatus === LockStatus.Unlock) {
return (
<Tag
variant="default"
className="bg-primary-gradient-normal absolute top-2 right-2 p-[6px]"
size="small"
>
<i className="iconfont icon-public !text-[12px] leading-none" />
</Tag>
)
}
return null
}
const renderOverlay = () => {
// 如果是自己的相册，则不显示解锁按钮
if (isOwner) {
return null
}
if (item.lockStatus === LockStatus.Lock) {
return (
<div
className="absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-3"
onClick={(e) => {
// e.stopPropagation();
// handleUnlock();
}}
>
<i className="iconfont icon-private-border !text-[24px] leading-none" />
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<div className="relative h-4 w-4">
<Image src="/icons/diamond.svg" alt="diamond" fill className="object-contain" />
</div>
<span className="text-sm font-semibold text-white">
{formatFromCents(item.unlockPrice || 0)}
</span>
</div>
<div className="txt-label-m text-txt-primary-normal">Unlock</div>
</div>
</div>
)
}
return null
}
const renderDefaultTag = () => {
if (item.isDefault) {
return (
<Tag variant="dark" className="absolute top-2 left-2" size="small">
Default
</Tag>
)
}
return null
}
return (
<div className="group relative cursor-pointer overflow-hidden rounded-2xl pb-[134%]">
<div className="absolute inset-0" onClick={onImageClick}>
{/* 背景图片 */}
<div className="relative h-full w-full">
<Image
src={item.imgUrl || item.img1}
alt="Album image"
fill
className={cn(
'object-cover object-top transition-opacity duration-300',
imageLoading ? 'opacity-0' : 'opacity-100'
)}
onLoadingComplete={() => setImageLoading(false)}
sizes="(max-width: 768px) 50vw, 176px"
/>
{imageLoading && (
<div className="bg-surface-nest-normal absolute inset-0 animate-pulse" />
)}
</div>
{renderDefaultTag()}
{/* 标签 */}
{renderTag()}
{/* 付费内容遮罩 */}
{renderOverlay()}
{/* 底部操作区 */}
<div
className="absolute right-2 bottom-2 left-2 flex items-center justify-between"
onClick={(e) => e.stopPropagation()}
>
{/* 点赞按钮 */}
{(item.lockStatus !== LockStatus.Lock || isOwner) && (
<div className="bg-surface-element-dark-normal flex items-center gap-[2px] rounded-full pr-1 backdrop-blur-lg">
<IconButton variant="ghost" size="xs" onClick={handleLike}>
{item.likedStatus === LikedStatus.Liked ? (
<i className="iconfont icon-Like-fill !text-important-normal !text-[16px] leading-none" />
) : (
<i className="iconfont icon-Like !text-[16px] leading-none" />
)}
</IconButton>
<span className="txt-numMonotype-xs text-white">
{formatNumberToKMB(item.likedCount ?? 0)}
</span>
</div>
)}
<AlbumItemAction data={item} />
</div>
</div>
</div>
)
}
export default AlbumItem

42
src/app/(main)/user/[userId]/components/AlbumItemAction.tsx
View File

@ -1,42 +0,0 @@
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { IconButton } from '@/components/ui/button'
import { useAIUser } from '../context/aiUser'
import { IAlbumItem } from '@/services/user/types'
import AlbumDeleteAlert from '@/components/features/album-delete-alert'
const AlbumItemAction = ({ data }: { data: IAlbumItem }) => {
const { isOwner, userId } = useAIUser()
if (!isOwner) {
return null
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
variant="tertiaryDark"
size="xs"
className="relative opacity-0 transition-opacity duration-200 group-hover:opacity-100 data-[state=open]:opacity-100"
>
<i className="iconfont icon-More !text-[16px] leading-none" />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent>
<AlbumDeleteAlert aiId={userId!} albumId={data.albumId} isDefaultImage={!!data.isDefault}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
<i className="iconfont icon-trashcan !text-[16px] leading-none" />
<span>Delete</span>
</DropdownMenuItem>
</AlbumDeleteAlert>
</DropdownMenuContent>
</DropdownMenu>
)
}
export default AlbumItemAction

233
src/app/(main)/user/[userId]/components/AlbumList.tsx
View File

@ -1,233 +0,0 @@
'use client'
import { useParams, useRouter, usePathname } from 'next/navigation'
import {
useGetAIUserAlbumInfinite,
useLikeAlbumImage,
useUnlockAlbumImage,
useUnlockImage,
} from '@/hooks/aiUser'
import { IAlbumItem, LikedStatus, LockStatus } from '@/services/user/types'
import Empty from '@/components/ui/empty'
import { toast } from 'sonner'
import AlbumItem from './AlbumItem'
import { InfiniteScrollList } from '@/components/ui/infinite-scroll-list'
import { ImageViewer, ImageViewerPaginationContent } from '@/components/ui/image-viewer'
import { useImageViewer } from '@/hooks/useImageViewer'
import { useMemo, useRef, useState } from 'react'
import { useAIUser } from '../context/aiUser'
import AlbumImageViewerAction from './AlbumImageViewerAction'
import Image from 'next/image'
import { formatFromCents } from '@/utils/number'
import { useToken } from '@/hooks/auth'
// 专门的相册骨架屏组件
const AlbumSkeleton = () => (
<div className="bg-surface-nest-normal relative animate-pulse overflow-hidden rounded-2xl pb-[134%]">
<div className="absolute inset-0">
<div className="h-full w-full rounded-2xl" />
</div>
</div>
)
const AlbumList = () => {
const { userId } = useParams()
const router = useRouter()
const pathname = usePathname()
const { isLogin } = useToken()
const pageSize = 20
const unlockingAlbumIdsRef = useRef<Set<number>>(new Set())
const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage, isError, refetch } =
useGetAIUserAlbumInfinite(Number(userId), pageSize)
const likeMutation = useLikeAlbumImage()
const unlockMutation = useUnlockImage()
const { isOwner } = useAIUser()
const [tempList, setTempList] = useState<IAlbumItem[]>([])
// 图片查看器
const {
isOpen: isViewerOpen,
currentIndex: viewerIndex,
openViewer,
closeViewer,
handleIndexChange,
} = useImageViewer()
// 展平所有页面的数据
const albumItems = useMemo(() => {
if (!data?.pages) return []
return data.pages.flatMap((page) => page.datas || [])
}, [data?.pages])
const handleLike = (albumId: number, isLiked: boolean) => {
likeMutation.mutate({
albumId,
likedStatus: isLiked ? LikedStatus.Canceled : LikedStatus.Liked,
aiId: Number(userId),
})
}
const handleUnlock = async (imageId: number) => {
await unlockMutation.mutateAsync(
{ aiId: Number(userId), albumId: imageId },
{
onSuccess: () => {
toast.success('Unlocked successfully!')
},
onError: (error) => {},
}
)
}
const handleImageClick = (item: IAlbumItem, index: number) => {
// 检查是否登录，如果未登录则跳转到登录页面
if (!isLogin) {
const loginUrl = `/login?redirect=${encodeURIComponent(pathname)}`
router.push(loginUrl)
return
}
// 获取所有图片URL
const imageUrls = albumItems.map((albumItem) => albumItem.imgUrl || albumItem.img3)
setTempList(albumItems)
// 打开图片查看器
openViewer(imageUrls, index)
}
const viewerImages: IAlbumItem[] = useMemo(() => {
return tempList.map((item) => {
const { albumId } = item
const data = albumItems.find((item) => item.albumId === albumId) || {}
return data as IAlbumItem
})
}, [tempList, albumItems])
return (
<>
<InfiniteScrollList<IAlbumItem>
items={albumItems}
renderItem={(item, index) => (
<AlbumItem
item={item}
onLike={handleLike}
onImageClick={() => handleImageClick(item, index)}
/>
)}
getItemKey={(item) => item.albumId}
hasNextPage={!!hasNextPage}
isLoading={isLoading || isFetchingNextPage}
fetchNextPage={fetchNextPage}
columns={{
default: 2,
sm: 3,
md: 4,
lg: 4,
xl: 5,
}}
gap={4}
LoadingSkeleton={AlbumSkeleton}
EmptyComponent={() => (
<div className="bg-surface-base-normal rounded-lg p-6 py-[117px]">
<Empty title="No photos yet" />
</div>
)}
hasError={isError}
onRetry={refetch}
threshold={300}
enabled={true}
/>
{/* 图片查看器 */}
<ImageViewer
images={viewerImages.map((albumItem) => albumItem.imgUrl || albumItem.img3)}
currentIndex={viewerIndex}
open={isViewerOpen}
onClose={closeViewer}
onIndexChange={handleIndexChange}
showChooseButton={false}
ActionComponent={() => {
return (
<AlbumImageViewerAction
datas={tempList}
originalDatas={albumItems}
currentIndex={viewerIndex}
onUnlock={handleUnlock}
unlockingAlbumIdsRef={unlockingAlbumIdsRef}
onDeleted={(nextIndex) => {
if (nextIndex === null) {
// 删除后没有图片了
closeViewer()
return
}
// 调整到新的索引，避免越界
handleIndexChange(nextIndex)
}}
/>
)
}}
OverlayComponent={() => {
const findItem = albumItems.find((item, index) => index === viewerIndex)
const { unlockPrice, lockStatus } = findItem || {}
if (isOwner || !lockStatus || lockStatus === LockStatus.Unlock) {
return null
}
return (
<div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-6 bg-black/15 backdrop-blur-3xl">
<i className="iconfont icon-private !text-[48px] leading-none" />
<div className="flex items-center gap-2">
<Image src="/icons/diamond.svg" alt="diamond" width={32} height={32} />
<div className="txt-title-m">{`${formatFromCents(unlockPrice || 0)} to unlock`}</div>
</div>
</div>
)
}}
PaginationComponent={() => {
const currentIndex = viewerIndex + 1
const findItem = tempList.find((item, index) => index === viewerIndex)
const { albumId } = findItem || {}
const { lockStatus } = albumItems.find((item) => item.albumId === albumId) || {}
if (isOwner) {
if (lockStatus) {
return (
<ImageViewerPaginationContent className="gap-2">
<i className="iconfont icon-private !text-[16px] leading-none" />
<span>{`${currentIndex}/${albumItems.length}`}</span>
</ImageViewerPaginationContent>
)
}
return (
<ImageViewerPaginationContent>
<span>{`${currentIndex}/${albumItems.length}`}</span>
</ImageViewerPaginationContent>
)
}
if (lockStatus === LockStatus.Lock) {
return (
<ImageViewerPaginationContent className="bg-primary-gradient-normal gap-2">
<i className="iconfont icon-private !text-[16px] leading-none" />
<span>{`${currentIndex}/${albumItems.length}`}</span>
</ImageViewerPaginationContent>
)
}
if (lockStatus === LockStatus.Unlock) {
return (
<ImageViewerPaginationContent className="bg-primary-gradient-normal gap-2">
<i className="iconfont icon-public !text-[16px] leading-none" />
<span>{`${currentIndex}/${albumItems.length}`}</span>
</ImageViewerPaginationContent>
)
}
return (
<ImageViewerPaginationContent>
<span>{`${currentIndex}/${albumItems.length}`}</span>
</ImageViewerPaginationContent>
)
}}
/>
</>
)
}
export default AlbumList

53
src/app/(main)/user/[userId]/components/GiftGrid.tsx
View File

@ -1,53 +0,0 @@
'use client'
import Empty from '@/components/ui/empty'
import { useGetAIUserGifts } from '@/hooks/aiUser'
import { formatNumberToKMB } from '@/lib/utils'
import Image from 'next/image'
export function GiftGrid({ userId }: { userId: string }) {
const { data } = useGetAIUserGifts({ aiId: Number(userId), page: { pn: 1, ps: 100 } })
const { datas } = data || {}
if (datas && !datas.length) {
return (
<div className="flex w-full flex-col items-start justify-start gap-4 rounded-2xl bg-[#352e3e] p-6">
<h3 className="font-['Poppins'] text-[20px] leading-[24px] font-semibold text-white">
Gifts
</h3>
<div className="w-full py-20">
<Empty title="No gifts yet" />
</div>
</div>
)
}
return (
<div className="flex w-full flex-col items-start justify-start gap-4 rounded-2xl bg-[#352e3e] p-6">
<h3 className="font-['Poppins'] text-[20px] leading-[24px] font-semibold text-white">
Gifts
</h3>
<div className="grid w-full gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
{datas?.map((gift) => (
<div key={gift.id} className="flex flex-col items-start justify-start gap-1">
<div className="bg-surface-nest-normal relative flex w-full items-center justify-center rounded-sm pb-[100%]">
<div className="absolute inset-0 flex items-center justify-center p-4">
<Image
src={gift.icon ?? ''}
alt={gift.name ?? ''}
width={100}
height={100}
className="object-cover"
/>
</div>
</div>
<div className="txt-label-m text-txt-primary-normal w-full text-center">
{gift.name} X{formatNumberToKMB(gift.getNum ?? 0)}
</div>
</div>
))}
</div>
</div>
)
}

65
src/app/(main)/user/[userId]/components/TabNavigation.tsx
View File

@ -1,65 +0,0 @@
'use client'
import { useState } from 'react'
import { cn } from '@/lib/utils'
import { UserTab } from '../types'
interface TabNavigationProps {
activeTab?: UserTab
onTabChange?: (tab: UserTab) => void
}
export function TabNavigation({ activeTab = UserTab.About, onTabChange }: TabNavigationProps) {
const [currentTab, setCurrentTab] = useState(activeTab)
const handleTabClick = (tab: UserTab) => {
setCurrentTab(tab)
onTabChange?.(tab)
}
return (
<div className="flex flex-row items-center justify-start">
{/* About 选项卡 */}
<div className="flex flex-col items-start justify-start py-0 pr-4 pl-0">
<button
onClick={() => handleTabClick(UserTab.About)}
className={cn(
'flex h-8 w-full flex-col items-center justify-start gap-1',
'transition-colors duration-200'
)}
>
<div
className={cn(
"text-left font-['Poppins'] text-[20px] leading-[24px] font-semibold whitespace-nowrap",
currentTab === UserTab.About ? 'text-white' : 'text-[#958e9e]'
)}
>
About
</div>
{currentTab === UserTab.About && <div className="h-1 w-5 rounded bg-[#d21f77]" />}
</button>
</div>
{/* Album 选项卡 */}
<div className="flex flex-col items-start justify-start py-0 pr-4 pl-0">
<button
onClick={() => handleTabClick(UserTab.Album)}
className={cn(
'flex h-8 w-full flex-col items-center justify-start gap-1',
'transition-colors duration-200'
)}
>
<div
className={cn(
"text-left font-['Poppins'] text-[20px] leading-[24px] font-semibold whitespace-nowrap",
currentTab === UserTab.Album ? 'text-white' : 'text-[#958e9e]'
)}
>
Album
</div>
{currentTab === UserTab.Album && <div className="h-1 w-5 rounded bg-[#d21f77]" />}
</button>
</div>
</div>
)
}

100
src/app/(main)/user/[userId]/components/UserActionDropdown.tsx
View File

@ -1,100 +0,0 @@
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { IconButton } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { useDeleteCharacter } from '@/hooks/aiUser'
import { useState } from 'react'
import { useAIUser } from '../context/aiUser'
import { useParams, useRouter } from 'next/navigation'
import { useNimChat, useNimConversation, useNimMsgContext } from '@/context/NimChat/useNimChat'
const UserActionDropdown = () => {
const router = useRouter()
const [isDeleteCharacterDialogOpen, setIsDeleteCharacterDialogOpen] = useState(false)
const { userId, isOwner } = useAIUser()
const { removeConversationById } = useNimConversation()
const { clearHistoryMessage } = useNimMsgContext()
const { nim } = useNimChat()
const { mutate: deleteCharacter, isPending: isDeleteCharacterLoading } = useDeleteCharacter({
aiId: Number(userId),
})
const handleDeleteCharacter = () => {
setIsDeleteCharacterDialogOpen(true)
}
const handleDeleteCharacterConfirm = async () => {
const conversationId = await nim.V2NIMConversationIdUtil.p2pConversationId(
`${userId}@r@t` as string
)
await removeConversationById(conversationId)
await clearHistoryMessage(conversationId)
await deleteCharacter({ aiId: Number(userId) })
router.replace('/profile')
}
if (!isOwner) return null
return (
<>
<div className="absolute top-0 right-0 left-0">
<div className="mx-auto max-w-[1120px] px-6">
<div className="relative w-full">
<div className="absolute top-0 right-0">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton iconfont="icon-More" size="large" variant="tertiaryDark" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={handleDeleteCharacter}>
<i className="iconfont icon-trashcan !text-[16px] leading-none" />
<span>Delete Character</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
</div>
<AlertDialog open={isDeleteCharacterDialogOpen} onOpenChange={setIsDeleteCharacterDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Character</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription>
Once deleted, the character cannot be restored. To ensure a good user experience, users
who have previously chatted with or made purchases for this character will still be able
to interact with them.
</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
loading={isDeleteCharacterLoading}
onClick={handleDeleteCharacterConfirm}
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
)
}
export default UserActionDropdown

136
src/app/(main)/user/[userId]/components/UserBackground.tsx
View File

@ -1,136 +0,0 @@
import { useGetAIUserBaseInfo } from '@/hooks/aiUser'
import { cn, loadImageAsync } from '@/lib/utils'
import { useParams } from 'next/navigation'
import { useEffect, useRef, useState } from 'react'
const getDominantColor = (data: Uint8ClampedArray) => {
let red = 0,
green = 0,
blue = 0
const length = data.length
for (let i = 0; i < length; i += 4) {
red += data[i]
green += data[i + 1]
blue += data[i + 2]
}
// 计算像素点数
const pixelCount = length / 4
red = Math.round(red / pixelCount)
green = Math.round(green / pixelCount)
blue = Math.round(blue / pixelCount)
return `${red}, ${green}, ${blue}`
}
const getImageRightDominantColor = (ctx: any, image: any) => {
const imageData = ctx.getImageData(image.width - 1, 0, 1, image.height)
return getDominantColor(imageData.data)
}
const getImageLeftDominantColor = (ctx: any, image: any) => {
const imageData = ctx.getImageData(0, 0, 1, image.height)
return getDominantColor(imageData.data)
}
const UserBackground = () => {
const { userId } = useParams()
const { data } = useGetAIUserBaseInfo({ aiId: Number(userId) })
const [colors, setColors] = useState({
leftColor: '#37363b',
rightColor: '#313133',
})
const [isLoading, setIsLoading] = useState(true)
const canvasRef = useRef<HTMLCanvasElement>(null)
// 获取图片两边的颜色
const getImageColors = async (url: string) => {
const image: any = await loadImageAsync(url)
const canvas: any = canvasRef.current
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0)
const rightColor = getImageRightDominantColor(ctx, image)
const leftColor = getImageLeftDominantColor(ctx, image)
return {
leftColor,
rightColor,
}
}
useEffect(() => {
const init = async () => {
if (data?.homeImageUrl) {
setIsLoading(true)
try {
const { leftColor, rightColor } = await getImageColors(data.homeImageUrl)
setColors({
leftColor,
rightColor,
})
} catch (error) {
console.error('获取图片颜色失败:', error)
} finally {
setIsLoading(false)
}
} else {
setIsLoading(false)
}
}
init()
}, [data?.homeImageUrl])
if (!data) {
return null
}
return (
<>
{/* 背景头部区域 */}
<div className="bg-background-default absolute top-0 right-0 left-0 h-60 overflow-hidden">
{/* 加载状态 - 显示默认背景 */}
{isLoading && (
<>
<div className="absolute top-0 right-1/2 left-0 h-60 bg-[#36363b]" />
<div className="absolute top-0 right-0 left-1/2 h-60 bg-[#313133]" />
</>
)}
{/* 加载完成后的背景 */}
{!isLoading && (
<>
<div
className="absolute top-0 right-1/2 left-0 h-60 bg-[#36363b] transition-all duration-500 ease-in-out"
style={{ background: `rgb(${colors.leftColor})` }}
/>
<div
className="absolute top-0 right-0 left-1/2 h-60 bg-[#313133] transition-all duration-500 ease-in-out"
style={{ background: `rgb(${colors.rightColor})` }}
/>
{/* 背景图片 */}
<div
className="absolute top-[-167px] left-1/2 h-[1337px] w-[752px] translate-x-[-50%] bg-cover bg-center bg-no-repeat transition-opacity duration-500 ease-in-out"
style={{ backgroundImage: `url(${data?.homeImageUrl || ''})` }}
/>
{/* 渐变遮罩 */}
<div
className="absolute top-0 left-1/2 flex h-full w-[752px] translate-x-[-50%] items-center justify-between transition-opacity duration-500 ease-in-out"
style={{
backgroundImage: `linear-gradient(90deg, rgba(${colors.leftColor}, 1) 0%, rgba(${colors.leftColor}, 0) 20%, rgba(${colors.rightColor}, 0) 80%, rgba(${colors.rightColor}, 1) 100%)`,
}}
>
{/* <div className={cn('h-60 w-32', `bg-gradient-to-r from-[${colors.leftColor}] to-transparent`)} />
<div className={cn('h-60 w-32', `bg-gradient-to-l from-[${colors.rightColor}] to-transparent`)} /> */}
</div>
</>
)}
{/* 底部渐变遮罩 */}
<div className="to-background-default absolute inset-0 bg-linear-to-b from-transparent" />
<canvas ref={canvasRef} style={{ display: 'none' }}></canvas>
</div>
</>
)
}
export default UserBackground

223
src/app/(main)/user/[userId]/components/UserCard.tsx
View File

@ -1,223 +0,0 @@
'use client'
import { Button, IconButton } from '@/components/ui/button'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { useGetAIUserBaseInfo, useGetAIUserStat } from '@/hooks/aiUser'
import { useParams, useRouter } from 'next/navigation'
import { formatNumberToKMB, getAge } from '@/lib/utils'
import { Tag } from '@/components/ui/tag'
import Image from 'next/image'
import { useAIUser } from '../context/aiUser'
import { useEditFormStorage, useEditAI, useEditAIAvatar } from '@/hooks/create'
import { useNimChat, useNimConversation } from '@/context/NimChat/useNimChat'
import { useCurrentUser, useToken } from '@/hooks/auth'
import { AvatarCropModal } from '@/components/ui/avatar-crop-modal'
import { useState, useRef } from 'react'
import { BizTypeEnum } from '@/services/common'
import { AIPermission, CreateOrEditAiRequest } from '@/services/create'
import UserShare from './UserShare'
import UserLikeButton from './UserLikeButton'
import Decimal from 'decimal.js'
const genderMap = {
0: '/icons/male.svg',
1: '/icons/female.svg',
2: '/icons/gender-neutral.svg',
}
export function UserCard() {
const { userId } = useParams()
const { data } = useGetAIUserBaseInfo({ aiId: Number(userId) })
const { isOwner } = useAIUser()
const router = useRouter()
const { insertConversationActive } = useNimConversation()
const { birthday, characterName, headImg, nickname, sex, tagName, homeImageUrl } = data || {}
const { data: statData } = useGetAIUserStat({ aiId: Number(userId) })
const { chatNum, coinNum, conversationNum, likedNum } = statData || {}
const { clearFormData } = useEditFormStorage()
const { isNimLoggedIn } = useNimChat()
const { getLoginStatus } = useToken()
// AI用户编辑hook
const { mutateAsync: editAIAvatar, isPending: isEditingAIAvatar } = useEditAIAvatar()
// 头像裁剪相关状态
const [showCropModal, setShowCropModal] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null)
const statList = [
{
label: 'Likes',
value: formatNumberToKMB(likedNum || 0),
},
{
label: 'Chats',
value: formatNumberToKMB(chatNum || 0),
},
{
label: 'Users',
value: formatNumberToKMB(conversationNum || 0),
},
isOwner && {
label: 'CrushCoin',
value: formatNumberToKMB(new Decimal(coinNum || 0).div(100).toNumber()),
},
].filter(Boolean) as { label: string; value: string | number }[]
const handleEdit = () => {
clearFormData()
router.push(`/edit/${userId}/type`)
}
const handleChat = () => {
if (!getLoginStatus()) {
router.push(`/chat/${userId}`)
return
}
if (!isNimLoggedIn) {
return
}
// insertConversationActive({
// receiverId: `${userId}@r@t` as string,
// })
router.push(`/chat/${userId}`)
}
// 处理头像点击
const handleAvatarClick = () => {
if (!isOwner) return
setShowCropModal(true)
}
// 处理裁剪完成
const handleCropComplete = async (croppedImageUrl: string) => {
try {
// 更新AI用户头像 - 只更新头像，其他信息保持原样
await editAIAvatar({
aiId: Number(userId),
userHead: croppedImageUrl,
})
} catch (error) {
// 可以添加错误提示
} finally {
setShowCropModal(false)
// 清空文件输入
if (fileInputRef.current) {
fileInputRef.current.value = ''
}
}
}
// 处理裁剪取消
const handleCropCancel = () => {
setShowCropModal(false)
// 清空文件输入
if (fileInputRef.current) {
fileInputRef.current.value = ''
}
}
const renderChatButton = () => {
if (isOwner) {
return (
<Button variant="tertiary" size="large" className="flex-1" onClick={handleEdit}>
Edit
</Button>
)
}
return (
<Button size="large" className="flex-1" onClick={handleChat}>
Chat
</Button>
)
}
if (!data) {
return null
}
return (
<div className="relative">
{/* 背景卡片 */}
<div className="absolute top-16 right-0 bottom-0 left-0 rounded-2xl bg-[#352e3e]" />
{/* 内容 */}
<div className="relative flex flex-col items-center justify-start gap-6 px-6 pt-0 pb-6">
{/* 头像 */}
<div className="relative size-32">
<Avatar
className={`size-full ${isOwner ? 'cursor-pointer transition-opacity hover:opacity-80' : ''}`}
onClick={handleAvatarClick}
>
<AvatarImage src={headImg} width={128} height={128} className="object-cover" />
<AvatarFallback className="!txt-headline-l text-txt-primary-normal">
{nickname?.slice(0, 1)}
</AvatarFallback>
</Avatar>
</div>
{/* 用户信息 */}
<div className="flex w-full flex-col items-start justify-start gap-4">
{/* 用户名 */}
<h1 className="txt-headline-s w-full truncate text-center">{nickname}</h1>
{/* 标签 */}
<div className="flex w-full flex-wrap items-start justify-center gap-2">
{/* 年龄和性别标签 */}
<Tag>
<Image src={genderMap[sex ?? 0]} alt="Gender" width={16} height={16} />
<div>{getAge(birthday ?? 0)}</div>
</Tag>
<Tag>{characterName}</Tag>
<Tag>{tagName}</Tag>
</div>
</div>
{/* 统计数据 */}
<div className="bg-surface-nest-normal flex w-full flex-row items-start justify-start rounded-sm px-1 py-3">
{statList.map((item, index) => (
<div
key={index}
className="flex flex-1 flex-col items-center justify-start gap-1 px-1 py-0"
>
<div className="txt-numDisplay-s text-txt-primary-normal">{item.value}</div>
<div className="txt-label-s text-txt-secondary-normal">{item.label}</div>
</div>
))}
</div>
{/* 操作按钮 */}
<div className="flex w-full flex-row items-start justify-center gap-4">
{/* 分享按钮 */}
<UserShare />
{/* 聊天 */}
{isOwner && (
<IconButton variant="tertiary" size="large" onClick={handleChat}>
<i className="iconfont icon-Chat" />
</IconButton>
)}
<UserLikeButton />
{renderChatButton()}
</div>
</div>
{/* 头像裁剪弹窗 */}
{homeImageUrl && (
<AvatarCropModal
isOpen={showCropModal}
onClose={() => setShowCropModal(false)}
image={homeImageUrl}
onConfirm={handleCropComplete}
onCancel={handleCropCancel}
bizType={BizTypeEnum.Album}
/>
)}
</div>
)
}

59
src/app/(main)/user/[userId]/components/UserLikeButton.tsx
View File

@ -1,59 +0,0 @@
'use client'
import { IconButton } from '@/components/ui/button'
import { useGetAIUserBaseInfo } from '@/hooks/aiUser'
import { useDoAiUserLiked } from '@/hooks/useCommon'
import { aiUserKeys, imKeys } from '@/lib/query-keys'
import { useQueryClient } from '@tanstack/react-query'
import { useParams, useRouter } from 'next/navigation'
import { useToken } from '@/hooks/auth'
const UserLikeButton = () => {
const { userId } = useParams()
const router = useRouter()
const { isLogin } = useToken()
const { data } = useGetAIUserBaseInfo({ aiId: Number(userId) })
const { mutateAsync: doAiUserLiked } = useDoAiUserLiked()
const { liked } = data || {}
const queryClient = useQueryClient()
const handleLike = () => {
// 检查是否登录，如果未登录则跳转到登录页面
if (!isLogin) {
const currentPath = `/@${userId}`
router.push(`/login?redirect=${encodeURIComponent(currentPath)}`)
return
}
doAiUserLiked({ aiId: Number(userId), likedStatus: liked ? 'CANCELED' : 'LIKED' })
queryClient.setQueryData(aiUserKeys.baseInfo({ aiId: Number(userId) }), (oldData: any) => {
return {
...oldData,
liked: !liked,
}
})
queryClient.setQueryData(imKeys.imUserInfo(Number(userId)), (oldData: any) => {
return {
...oldData,
liked: !liked,
}
})
queryClient.setQueryData(aiUserKeys.stat({ aiId: Number(userId) }), (oldData: any) => {
return {
...oldData,
likedNum: !liked ? oldData.likedNum + 1 : oldData.likedNum - 1,
}
})
}
return (
<IconButton variant="tertiary" size="large" onClick={handleLike}>
{!liked ? (
<i className="iconfont icon-Like" />
) : (
<i className="iconfont icon-Like-fill text-important-normal" />
)}
</IconButton>
)
}
export default UserLikeButton

49
src/app/(main)/user/[userId]/components/UserProfileTabs.tsx
View File

@ -1,49 +0,0 @@
import { TabsList, TabsTrigger } from '@/components/ui/tabs'
import { UserTab } from '../types'
import { useAIUser } from '../context/aiUser'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'
const UserProfileTabs = ({ currentTab }: { currentTab: UserTab }) => {
const { isOwner, userId } = useAIUser()
const router = useRouter()
const handleCreatePhoto = () => {
router.push(`/generate/image-2-image?id=${userId}`)
}
return (
<div className="flex items-center justify-between gap-4">
{/* Tab 列表 */}
<TabsList className="mb-0 h-auto w-fit justify-start gap-4 bg-transparent p-0">
<TabsTrigger
value={UserTab.About}
className="relative h-auto cursor-pointer flex-col gap-1"
>
<span className="txt-title-m text-txt-secondary-normal group-data-[state=active]:text-txt-primary-normal">
About
</span>
<div className="bg-primary-normal h-1 w-5 rounded opacity-0 group-data-[state=active]:opacity-100" />
</TabsTrigger>
<TabsTrigger
value={UserTab.Album}
className="relative h-auto cursor-pointer flex-col gap-1"
>
<span className="txt-title-m text-txt-secondary-normal group-data-[state=active]:text-txt-primary-normal">
Album
</span>
<div className="bg-primary-normal h-1 w-5 rounded opacity-0 group-data-[state=active]:opacity-100" />
</TabsTrigger>
</TabsList>
{isOwner && currentTab === UserTab.Album && (
<Button variant="secondary" size="small" onClick={handleCreatePhoto}>
Generate
</Button>
)}
</div>
)
}
export default UserProfileTabs

52
src/app/(main)/user/[userId]/components/UserShare.tsx
View File

@ -1,52 +0,0 @@
'use client'
import { IconButton } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import useShare from '@/hooks/useShare'
import { useParams } from 'next/navigation'
const UserShare = () => {
const { userId } = useParams()
const { shareFacebook, shareTwitter } = useShare()
const handleShareFacebook = () => {
shareFacebook({
text: 'Come to Crushlevel for chat, Crush, and AI - chat.',
shareUrl: `${process.env.NEXT_PUBLIC_APP_URL}/@${userId}`,
})
}
const handleShareTwitter = () => {
shareTwitter({
text: 'Come to Crushlevel for chat, Crush, and AI - chat.',
shareUrl: `${process.env.NEXT_PUBLIC_APP_URL}/@${userId}`,
})
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton variant="tertiary" size="large">
<i className="iconfont icon-Share-border" />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={handleShareFacebook}>
<i className="iconfont icon-social-facebook" />
<span>Share to Facebook</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={handleShareTwitter}>
<i className="iconfont icon-social-twitter" />
<span>Share to X</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
export default UserShare

44
src/app/(main)/user/[userId]/context/aiUser/index.tsx
View File

@ -1,44 +0,0 @@
'use client'
import { AiUserBaseOutput } from '@/services/user'
import { createContext } from 'react'
import { useGetAIUserBaseInfo } from '@/hooks/aiUser'
import { useParams } from 'next/navigation'
import { useCurrentUser } from '@/hooks/auth'
import Empty from '@/components/ui/empty'
export * from './useAIUser'
const AIUserContext = createContext<{
user: AiUserBaseOutput | undefined
isOwner: boolean
userId: number | undefined
}>({
user: undefined,
isOwner: false,
userId: undefined,
})
export const AIUserProvider = ({ children }: { children: React.ReactNode }) => {
const { userId } = useParams()
const { data, error } = useGetAIUserBaseInfo({ aiId: Number(userId) })
const { data: currentUser } = useCurrentUser()
const isOwner = currentUser?.userId === data?.userId
if (error) {
return (
<div className="flex h-full w-full items-center justify-center">
<Empty title="Oops, there’s nothing here…" />
</div>
)
}
return (
<AIUserContext.Provider value={{ user: data, isOwner, userId: Number(userId) }}>
{children}
</AIUserContext.Provider>
)
}
export default AIUserContext

10
src/app/(main)/user/[userId]/context/aiUser/useAIUser.ts
View File

@ -1,10 +0,0 @@
import { useContext } from 'react'
import AIUserContext from '.'
export const useAIUser = () => {
const context = useContext(AIUserContext)
if (!context) {
throw new Error('useAIUser must be used within a AIUserProvider')
}
return context
}

9
src/app/(main)/user/[userId]/not-found.tsx
View File

@ -1,9 +0,0 @@
import Empty from '@/components/ui/empty'
export default async function NotFound() {
return (
<div className="flex h-full w-full items-center justify-center">
<Empty title="Oops, there’s nothing here…" />
</div>
)
}

92
src/app/(main)/user/[userId]/page.tsx
View File

@ -1,92 +0,0 @@
import UserPage from './user-page'
import { HydrationBoundary } from '@tanstack/react-query'
import { dehydrate } from '@tanstack/react-query'
import { QueryClient } from '@tanstack/react-query'
import { aiUserKeys } from '@/lib/query-keys'
import { userService } from '@/services/user'
import { ApiError } from '@/types/api'
import { notFound, redirect } from 'next/navigation'
import { headers } from 'next/headers'
import { isMobileDevice } from '@/utils/device'
export const generateMetadata = async ({ params }: { params: Promise<{ userId: string }> }) => {
const { userId } = await params
try {
const resp = await userService.getSEOUserBaseInfo({ aiId: Number(userId) })
const { nickname, homeImageUrl } = resp || {}
return {
title: `${nickname} - Crushlevel AI`,
description: `${nickname}`,
openGraph: {
title: `Crushlevel AI`,
description: `Grow your love story with CrushLevel AI—From ‘Hi’ to ‘I Do', sparked by every chat`,
images: {
url: homeImageUrl,
width: 720,
height: 1280,
alt: `${nickname} - Crushlevel AI`,
},
siteName: 'Crushlevel AI',
type: 'website',
url: `https://www.crushlevel.com/@${userId}`,
},
twitter: {
title: `Crushlevel AI`,
description: `Grow your love story with CrushLevel AI—From ‘Hi’ to ‘I Do', sparked by every chat`,
images: {
url: homeImageUrl,
width: 720,
height: 1280,
alt: `${nickname} - Crushlevel AI`,
},
siteName: 'Crushlevel AI',
type: 'website',
url: `https://www.crushlevel.com/@${userId}`,
},
}
} catch (error) {
return {
title: `Crushlevel AI`,
description: `Grow your love story with CrushLevel AI—From ‘Hi’ to ‘I Do', sparked by every chat`,
openGraph: {
title: `Crushlevel AI`,
description: `Grow your love story with CrushLevel AI—From ‘Hi’ to ‘I Do', sparked by every chat`,
},
}
}
}
const Page = async ({ params }: { params: Promise<{ userId: string }> }) => {
const { userId } = await params
// 检测移动端设备并重定向到分享页面
const headersList = await headers()
const userAgent = headersList.get('user-agent') || ''
if (isMobileDevice(userAgent)) {
redirect(`/share/${userId}`)
}
const queryClient = new QueryClient()
// try {
// // 使用 fetchQuery 替代 prefetchQuery，因为 fetchQuery 会抛出错误
// await queryClient.fetchQuery({
// queryKey: aiUserKeys.tempBaseInfo({ aiId: Number(userId) }),
// queryFn: () => userService.getAIUserBaseInfo({ aiId: Number(userId) }),
// });
// } catch (error) {
// if (error instanceof ApiError && error.errorCode === "10010012") {
// notFound();
// }
// }
return (
<HydrationBoundary state={dehydrate(queryClient)}>
<UserPage />
</HydrationBoundary>
)
}
export default Page

4
src/app/(main)/user/[userId]/types.ts
View File

@ -1,4 +0,0 @@
export enum UserTab {
About = 'about',
Album = 'album',
}

80
src/app/(main)/user/[userId]/user-page.tsx
View File

@ -1,80 +0,0 @@
'use client'
import { useParams, useSearchParams, useRouter } from 'next/navigation'
import { UserCard } from './components/UserCard'
import { AboutSection } from './components/AboutSection'
import { GiftGrid } from './components/GiftGrid'
import UserBackground from './components/UserBackground'
import AlbumList from './components/AlbumList'
import { UserTab } from './types'
import { useGetAIUserBaseInfo } from '@/hooks/aiUser'
import { Tabs, TabsContent } from '@/components/ui/tabs'
import { AIUserProvider } from './context/aiUser'
import UserActionDropdown from './components/UserActionDropdown'
import UserProfileTabs from './components/UserProfileTabs'
import { useCallback } from 'react'
const UserPage = () => {
const { userId } = useParams()
const searchParams = useSearchParams()
const router = useRouter()
const { data } = useGetAIUserBaseInfo({ aiId: Number(userId) })
const { introduction } = data || {}
// 从 URL 参数中获取当前 tab，如果没有或无效则默认为 About
const tabParam = searchParams.get('tab')
const currentTab = (
Object.values(UserTab).includes(tabParam as UserTab) ? tabParam : UserTab.About
) as UserTab
// 处理 tab 切换
const handleTabChange = useCallback(
(newTab: string) => {
const params = new URLSearchParams(searchParams.toString())
params.set('tab', newTab)
router.push(`/@${userId}?${params.toString()}`, { scroll: false })
},
[searchParams, router, userId]
)
return (
<AIUserProvider>
{data && (
<div className="w-full bg-[#211a2b] px-16">
<UserBackground />
{/* 主要内容 */}
<div className="relative flex justify-center pt-28 pb-20">
<UserActionDropdown />
{/* 左侧用户卡片 */}
<div className="w-[368px]">
<UserCard />
</div>
{/* 右侧内容区域 */}
<div className="max-w-[752px] flex-1 px-6 pt-4">
<Tabs value={currentTab} onValueChange={handleTabChange} className="w-full gap-4">
<UserProfileTabs currentTab={currentTab} />
{/* Tab 内容 */}
<TabsContent value={UserTab.About} className="mt-0">
<div className="flex flex-col gap-4">
<AboutSection introduction={introduction ?? ''} />
<GiftGrid userId={userId as string} />
</div>
</TabsContent>
<TabsContent value={UserTab.Album} className="mt-0">
<AlbumList />
</TabsContent>
</Tabs>
</div>
</div>
</div>
)}
</AIUserProvider>
)
}
export default UserPage

111
src/app/(main)/vip/components/SubscribeVipDrawer/index.tsx
View File

@ -1,17 +1,16 @@
'use client'
'use client';
import { Button, IconButton } from '@/components/ui/button'
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer'
import { useState, useMemo } from 'react'
import SubscribeProducts from './SubscribeProducs'
import SubscribeProductsSkeleton from './SubscribeProductsSkeleton'
import CarouselBanner from './CarouselBanner'
import { useGetSubProductCheckoutLink, useGetSubProductList } from '@/hooks/useWallet'
import { SubProductListOutput, Period, VipType } from '@/services/wallet/types'
import { isVipDrawerOpenAtom } from '@/atoms/im'
import { useAtom } from 'jotai'
import QueryString from 'qs'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { Button, IconButton } from '@/components/ui/button';
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
import { useState, useMemo } from 'react';
import SubscribeProducts from './SubscribeProducs';
import SubscribeProductsSkeleton from './SubscribeProductsSkeleton';
import CarouselBanner from './CarouselBanner';
import { useGetSubProductCheckoutLink, useGetSubProductList } from '@/hooks/useWallet';
import { SubProductListOutput, Period, VipType } from '@/services/wallet/types';
import { useAtom } from 'jotai';
import QueryString from 'qs';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
function SubscribeBackground() {
return (
@ -24,43 +23,43 @@ function SubscribeBackground() {
backgroundRepeat: 'no-repeat',
}}
></div>
)
);
}
// 数据转换函数
const convertProductListToPricingPlans = (productList: SubProductListOutput[]) => {
if (!productList) return []
if (!productList) return [];
return productList.map((product, index) => {
// 根据订阅时长获取标题
const getTitleByPeriod = (period?: Period) => {
switch (period) {
case Period.SubMonth:
return '1 Month'
return '1 Month';
case Period.SubSeason:
return '3 Months'
return '3 Months';
case Period.SubYear:
return '12 Months'
return '12 Months';
default:
return 'Unknown'
return 'Unknown';
}
}
};
// 计算月单价（如果不是月订阅）
const getSubtitle = (period?: Period, payAmount?: number) => {
if (!payAmount) return ''
if (!payAmount) return '';
const monthlyPrice = payAmount / 100 // 转换为元
const monthlyPrice = payAmount / 100; // 转换为元
switch (period) {
case Period.SubSeason:
return `$${(monthlyPrice / 3).toFixed(2)}/Month`
return `$${(monthlyPrice / 3).toFixed(2)}/Month`;
case Period.SubYear:
return `$${(monthlyPrice / 12).toFixed(2)}/Month`
return `$${(monthlyPrice / 12).toFixed(2)}/Month`;
default:
return ''
return '';
}
}
};
return {
id: index + 1, // 使用索引+1作为ID
@ -70,69 +69,73 @@ const convertProductListToPricingPlans = (productList: SubProductListOutput[]) =
discount: product.discount || '',
isSelected: false, // 初始都不选中
productId: product.productId, // 保留原始产品ID用于后续操作
}
})
}
};
});
};
const SubscribeVipDrawer = () => {
const [selectedPlan, setSelectedPlan] = useState<number>(0) // 默认不选择任何计划
const [isVipDrawerOpen, setIsVipDrawerOpen] = useAtom(isVipDrawerOpenAtom)
const [selectedPlan, setSelectedPlan] = useState<number>(0); // 默认不选择任何计划
// const [isVipDrawerOpen, setIsVipDrawerOpen] = useAtom(isVipDrawerOpenAtom)
const [isVipDrawerOpen, setIsVipDrawerOpen] = useState({
open: false,
vipType: undefined,
});
const { data: productList, isLoading } = useGetSubProductList()
const { mutateAsync, isPending } = useGetSubProductCheckoutLink()
const pathname = usePathname()
const searchParams = useSearchParams()
const { data: productList, isLoading } = useGetSubProductList();
const { mutateAsync, isPending } = useGetSubProductCheckoutLink();
const pathname = usePathname();
const searchParams = useSearchParams();
// 转换产品数据为组件需要的格式
const pricingPlans = useMemo(() => {
const plans = convertProductListToPricingPlans(productList || [])
const plans = convertProductListToPricingPlans(productList || []);
// 设置选中状态
return plans.map((plan) => ({
...plan,
isSelected: plan.id === selectedPlan,
}))
}, [productList, selectedPlan])
}));
}, [productList, selectedPlan]);
// 设置默认选中第二个计划（3个月）
useMemo(() => {
if (pricingPlans.length > 0 && selectedPlan === 0) {
const seasonPlan = pricingPlans.find((plan) => plan.title === '3 Month')
const seasonPlan = pricingPlans.find((plan) => plan.title === '3 Month');
if (seasonPlan) {
setSelectedPlan(seasonPlan.id)
setSelectedPlan(seasonPlan.id);
} else {
setSelectedPlan(pricingPlans[0].id) // 如果没有3个月计划，选择第一个
setSelectedPlan(pricingPlans[0].id); // 如果没有3个月计划，选择第一个
}
}
}, [pricingPlans, selectedPlan])
}, [pricingPlans, selectedPlan]);
const handleClose = () => {
setIsVipDrawerOpen({ open: false, vipType: undefined })
}
setIsVipDrawerOpen({ open: false, vipType: undefined });
};
const handleSubscribe = async () => {
// 获取选中的计划详情
const selectedPlanData = pricingPlans.find((plan) => plan.id === selectedPlan)
const selectedPlanData = pricingPlans.find((plan) => plan.id === selectedPlan);
if (selectedPlanData && selectedPlanData.productId) {
// 这里可以调用订阅API，使用selectedPlanData.productId
const query = {
...QueryString.parse(searchParams.toString()),
back: 1,
}
};
const baseURL = `${process.env.NEXT_PUBLIC_APP_URL}${pathname}?${QueryString.stringify(query)}`
const baseURL = `${process.env.NEXT_PUBLIC_APP_URL}${pathname}?${QueryString.stringify(query)}`;
const response = await mutateAsync({
subProductId: selectedPlanData.productId,
returnUrl: baseURL,
cancelUrl: baseURL,
})
const { payUrl } = response || {}
});
const { payUrl } = response || {};
if (payUrl) {
window.location.href = payUrl
window.location.href = payUrl;
}
}
}
};
return (
<Drawer
@ -178,7 +181,7 @@ const SubscribeVipDrawer = () => {
</div>
</DrawerContent>
</Drawer>
)
}
);
};
export default SubscribeVipDrawer
export default SubscribeVipDrawer;

54
src/app/(main)/vip/vip-page.tsx
View File

@ -1,43 +1,41 @@
'use client'
import { Button, IconButton } from '@/components/ui/button'
import { useRouter, useSearchParams } from 'next/navigation'
import { useGetMemberDetail } from '@/hooks/useWallet'
import SubscribeText from './components/SubscribeText'
import { useSetAtom } from 'jotai'
import { isVipDrawerOpenAtom } from '@/atoms/im'
import { VipType } from '@/services/wallet'
import { useEffect, useState } from 'react'
'use client';
import { Button, IconButton } from '@/components/ui/button';
import { useRouter, useSearchParams } from 'next/navigation';
import { useGetMemberDetail } from '@/hooks/useWallet';
import SubscribeText from './components/SubscribeText';
import { VipType } from '@/services/wallet';
import { useEffect, useState } from 'react';
const VipPage = () => {
const router = useRouter()
const searchParams = useSearchParams()
const back = searchParams.get('back')
const setIsVipDrawerOpen = useSetAtom(isVipDrawerOpenAtom)
const [enableQuery, setEnableQuery] = useState(!back)
const router = useRouter();
const searchParams = useSearchParams();
const back = searchParams.get('back');
const setIsVipDrawerOpen = (P: any) => null;
const [enableQuery, setEnableQuery] = useState(!back);
useEffect(() => {
if (back) {
// 如果有 back 参数，等待 2 秒后再启用查询
const timer = setTimeout(() => {
setEnableQuery(true)
}, 2000)
return () => clearTimeout(timer)
setEnableQuery(true);
}, 2000);
return () => clearTimeout(timer);
}
}, [back])
}, [back]);
const { data: memberDetail, isLoading } = useGetMemberDetail({ enabled: enableQuery })
const { memberPrivList, userMemberInfo } = memberDetail || {}
const { data: memberDetail, isLoading } = useGetMemberDetail({ enabled: enableQuery });
const { memberPrivList, userMemberInfo } = memberDetail || {};
const hasSubscribe =
userMemberInfo && userMemberInfo.expTime && new Date(userMemberInfo.expTime) > new Date()
userMemberInfo && userMemberInfo.expTime && new Date(userMemberInfo.expTime) > new Date();
const handleBack = () => {
if (back) {
window.history.go(-3)
return
window.history.go(-3);
return;
}
router.back()
}
router.back();
};
return (
<div className="px-3 pt-12 pb-20 sm:px-6 lg:px-12">
@ -126,7 +124,7 @@ const VipPage = () => {
)}
</div>
</div>
)
}
);
};
export default VipPage
export default VipPage;

4
src/app/api/auth/discord/callback/route.ts
View File

@ -1,8 +1,8 @@
import { NextRequest, NextResponse } from 'next/server';
export async function GET(request: NextRequest) {
console.log('request', request);
const url = 'http://localhost:3000';
// console.log('request', request);
const url = request.nextUrl.origin;
try {
const { searchParams } = new URL(request.url);
const code = searchParams.get('code');

95
src/components/ui/virtual-list.tsx
View File

@ -1,57 +1,64 @@
'use client';
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
import { useRef, useState } from 'react';
import { cn } from '@/lib/utils';
import { useEffect, useRef, useState } from 'react';
type ItemType<T = any> = {
type: string;
data?: T;
};
type VirtualListProps<T = any> = {
data?: { type: string; data?: T }[];
data?: ItemType<T>[];
itemContent?: (index: number, item: { type: string; data: T }) => React.ReactNode;
virtuosoProps?: React.ComponentProps<typeof Virtuoso>;
} & React.HTMLAttributes<HTMLDivElement>;
export default function VirtualList<T = any>(props: VirtualListProps<T>) {
const {
data = [],
itemContent = (index) => <div>{index}</div>,
virtuosoProps,
...restProps
} = props;
const virtuosoRef = useRef<VirtuosoHandle>(null);
// const [showScrollButton, setShowScrollButton] = useState(false);
const { data = [], itemContent = (index) => <div>{index}</div>, ...restProps } = props;
const ref = useRef<HTMLDivElement>(null);
const previousData = useRef<ItemType[]>([]);
const [isUserAtBottom, setIsUserAtBottom] = useState(true);
// // 滚动到最新消息
// const scrollToBottom = () => {
// virtuosoRef.current?.scrollToIndex({
// index: data.length - 1,
// behavior: 'smooth',
// });
// };
// 检查用户是否滚动到底部附近（阈值为 50px）
const checkIfAtBottom = () => {
const element = ref.current;
if (!element) return false;
const { scrollTop, scrollHeight, clientHeight } = element;
const threshold = 50; // 距离底部 50px 以内认为是在底部
return scrollHeight - scrollTop - clientHeight < threshold;
};
// 监听用户滚动事件
const handleScroll = () => {
const atBottom = checkIfAtBottom();
setIsUserAtBottom(atBottom);
};
// 当数据更新时，只有用户在底部才自动滚动
useEffect(() => {
const last = (list: ItemType[]) => (list?.length ? list[list.length - 1] : null);
const lastChanged = last(previousData.current)?.data !== last(data)?.data;
if (lastChanged && isUserAtBottom) {
ref.current?.scrollTo({
top: ref.current?.scrollHeight,
behavior: 'smooth',
});
}
previousData.current = data;
}, [data, isUserAtBottom]);
return (
<div {...restProps}>
<Virtuoso
ref={virtuosoRef}
alignToBottom={false}
{...virtuosoProps}
style={{ height: '100%', ...virtuosoProps?.style }}
data={data}
followOutput="smooth"
initialTopMostItemIndex={data.length - 1}
// atBottomStateChange={(atBottom) => {
// // 当不在底部时显示按钮，在底部时隐藏
// setShowScrollButton(!atBottom);
// }}
itemContent={(index, item) => itemContent(index, item as any)}
/>
{/* 回到底部按钮 */}
{/* {showScrollButton && (
<div
onClick={scrollToBottom}
className="absolute -right-1 bottom-0 z-10 flex h-10 w-10 items-center justify-center rounded-full hover:scale-110 hover:cursor-pointer"
>
scroll
</div>
)} */}
<div
{...restProps}
ref={ref}
onScroll={handleScroll}
className={cn('overflow-auto', restProps.className)}
>
{data.map((item, index) => (
<div key={index}>{itemContent(index, item as any)}</div>
))}
</div>
);
}

21
src/css/iconfont-v2.css
View File

@ -1,9 +1,9 @@
@font-face {
font-family: 'iconfont-v2'; /* Project id 5076160 - spicyxx.ai */
src:
url('/font-v2/iconfont.woff2?t=1765173841330') format('woff2'),
url('/font-v2/iconfont.woff?t=1765173841330') format('woff'),
url('/font-v2/iconfont.ttf?t=1765173841330') format('truetype');
url('/font-v2/iconfont.woff2?t=1766052523135') format('woff2'),
url('/font-v2/iconfont.woff?t=1766052523135') format('woff'),
url('/font-v2/iconfont.ttf?t=1766052523135') format('truetype');
}
.iconfont-v2 {
@ -14,6 +14,21 @@
-moz-osx-font-smoothing: grayscale;
}
/* Logo */
.iconv2-Logo:before {
content: '\e624';
}
/* 我的界面前往 */
.iconv2-wodejiemianqianwang:before {
content: '\e622';
}
/* 群聊 */
.iconv2-qunliao:before {
content: '\e621';
}
/* 挂断电话 */
.iconv2-guaduandianhua:before {
content: '\e620';

9
src/hooks/services/chat.ts Normal file
View File

@ -0,0 +1,9 @@
import { fetchModels } from '@/services/chat';
import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
export function useModels() {
return useQuery({
queryKey: ['models'],
queryFn: () => fetchModels(),
});
}

109
src/hooks/useGlobalPrefetchRoutes.ts Normal file
View File

@ -0,0 +1,109 @@
'use client'
import { useEffect, useMemo } from 'react'
import { useRouter } from 'next/navigation'
import { useCurrentUser } from '@/hooks/auth'
import { useToken } from '@/hooks/auth'
const PUBLIC_PREFETCH_TARGETS = ['/']
const AUTH_PREFETCH_TARGETS = [
'/contact',
'/profile',
'/profile/edit',
'/profile/account',
'/vip',
'/wallet',
'/wallet/charge',
'/wallet/charge/result',
'/wallet/transactions',
'/leaderboard',
'/crushcoin',
'/generate/image',
'/generate/image-2-image',
'/generate/image-edit',
'/generate/image-2-background',
'/explore',
'/creator',
'/create/type',
'/create/dialogue',
'/create/character',
'/create/image',
]
// 受保护路由前缀列表（需要登录才能访问的路由）
const PROTECTED_ROUTE_PREFIXES = [
'/profile',
'/create',
'/settings',
'/login/fields',
'/chat',
'/contact',
'/vip',
'/wallet',
'/crushcoin',
'/leaderboard',
'/generate',
'/explore',
'/creator',
]
// 检查路由是否是受保护路由
const isProtectedRoute = (href: string): boolean => {
return PROTECTED_ROUTE_PREFIXES.some((prefix) => href.startsWith(prefix))
}
const DEFAULT_PREFETCH_TARGETS = [...PUBLIC_PREFETCH_TARGETS, ...AUTH_PREFETCH_TARGETS]
type NullableRoute = string | null | undefined
const prefetchedRouteCache = new Set<string>()
export function usePrefetchRoutes(
routes?: NullableRoute[],
options?: {
limit?: number
}
) {
const router = useRouter()
const { isLogin } = useToken()
const normalizedRoutes = useMemo(() => {
if (!routes || routes.length === 0) return []
return routes.filter(Boolean) as string[]
}, [routes])
const limit = options?.limit ?? Infinity
useEffect(() => {
if (!normalizedRoutes.length) return
let count = 0
for (const href of normalizedRoutes) {
if (!href || prefetchedRouteCache.has(href)) continue
// 如果未登录且是受保护路由，跳过 prefetch，避免缓存重定向响应
if (!isLogin && isProtectedRoute(href)) continue
prefetchedRouteCache.add(href)
router.prefetch(href)
count += 1
if (count >= limit) break
}
}, [limit, normalizedRoutes, router, isLogin])
}
export function useGlobalPrefetchRoutes(extraRoutes?: NullableRoute[]) {
const { data: user } = useCurrentUser()
const isAuthenticated = !!user
const protectedTargets = useMemo(() => {
const routes = new Set(AUTH_PREFETCH_TARGETS)
extraRoutes?.forEach((href) => {
if (href && href !== '/') {
routes.add(href)
}
})
return Array.from(routes)
}, [extraRoutes])
usePrefetchRoutes(PUBLIC_PREFETCH_TARGETS)
usePrefetchRoutes(isAuthenticated ? protectedTargets : [])
}
export const GLOBAL_PREFETCH_ROUTES = DEFAULT_PREFETCH_TARGETS

105
src/hooks/useHome.ts Normal file
View File

@ -0,0 +1,105 @@
import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
import { homeKeys } from '@/lib/query-keys';
import { GetMeetListRequest, homeService } from '@/services/home';
type PageParam = number | { page: number; exList: number[] };
export function useGetMeetList(params: Omit<GetMeetListRequest, 'pn'>, enabled: boolean = true) {
return useInfiniteQuery({
queryKey: homeKeys.getMeetList(params),
queryFn: ({ pageParam }: { pageParam: PageParam }) => {
// pageParam 可能是数字（第一页）或对象（后续页面包含 exList）
const page = typeof pageParam === 'number' ? pageParam : pageParam.page;
const exList =
typeof pageParam === 'object' && pageParam !== null ? pageParam.exList : undefined;
return homeService.getMeetList({
...params,
pn: page,
...(exList && { exList }),
});
},
initialPageParam: 1 as PageParam,
getNextPageParam: (lastPage, allPages) => {
// 如果最后一页的数据数量少于每页大小，说明没有更多数据了
if (lastPage.length < params.ps) {
return undefined;
}
// 收集所有已获取的 aiId 作为下一页的排除列表
const exList: number[] = [];
// 首先添加初始传入的 exList（如果有的话）
if (params.exList && Array.isArray(params.exList)) {
exList.push(...params.exList);
}
// 然后添加所有已获取页面的 aiId
for (const page of allPages) {
for (const item of page) {
if (item.aiId) {
exList.push(item.aiId);
}
}
}
return { page: allPages.length + 1, exList } as PageParam;
},
enabled, // 控制是否启用查询
});
}
export function useGetChatRank() {
return useQuery({
queryKey: homeKeys.getChatRank(),
queryFn: homeService.getChatRank,
});
}
export function useGetHeartbeatRank() {
return useQuery({
queryKey: homeKeys.getHeartbeatRank(),
queryFn: homeService.getHeartbeatRank,
});
}
export function useGetGiftRank() {
return useQuery({
queryKey: homeKeys.getGiftRank(),
queryFn: homeService.getGiftRank,
});
}
export function useGetSevenDaysSignList() {
return useQuery({
queryKey: homeKeys.getSevenDaysSignList(),
queryFn: homeService.getSevenDaysSignList,
});
}
export function useSignIn() {
return useMutation({
mutationFn: homeService.signIn,
});
}
export function useGetExplore() {
return useQuery({
queryKey: homeKeys.getExplore(),
queryFn: homeService.getExplore,
});
}
export function useGetHomeAiCarouselList() {
return useQuery({
queryKey: homeKeys.getHomeAiCarouselList(),
queryFn: homeService.getHomeAiCarouselList,
});
}
export function useGetHomeAggregateRecommend() {
return useQuery({
queryKey: homeKeys.getHomeAggregateRecommend(),
queryFn: homeService.getHomeAggregateRecommend,
});
}

24
src/layout/BasicLayout.tsx
View File

@ -4,13 +4,13 @@ import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';
import Sidebar from './Sidebar';
import Topbar from './Topbar';
import ChargeDrawer from '../components/features/charge-drawer';
import SubscribeVipDrawer from '@/app/(main)/vip/components/SubscribeVipDrawer';
// import ChargeDrawer from '../components/features/charge-drawer';
// import SubscribeVipDrawer from '@/app/(main)/vip/components/SubscribeVipDrawer';
import { cn } from '@/lib/utils';
import CreateReachedLimitDialog from '../components/features/create-reached-limit-dialog';
// import CreateReachedLimitDialog from '../components/features/create-reached-limit-dialog';
import { useMedia } from '@/hooks/tools';
import BottomBar from './BottomBar';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useCurrentUser } from '@/hooks/auth';
interface ConditionalLayoutProps {
@ -20,20 +20,14 @@ interface ConditionalLayoutProps {
const useInitChat = () => {
const { data } = useCurrentUser();
const connect = useStreamChatStore((state) => state.connect);
const queryChannels = useStreamChatStore((state) => state.queryChannels);
const initChat = async () => {
useEffect(() => {
if (data) {
await connect({
connect({
userId: data.userId + '',
userName: data.nickname,
});
await queryChannels({});
}
};
useEffect(() => {
initChat();
}, [data]);
};
@ -66,9 +60,9 @@ export default function ConditionalLayout({ children }: ConditionalLayoutProps)
</main>
{response && !response.sm && <BottomBar />}
</div>
<ChargeDrawer />
<SubscribeVipDrawer />
<CreateReachedLimitDialog />
{/* <ChargeDrawer /> */}
{/* <SubscribeVipDrawer /> */}
{/* <CreateReachedLimitDialog /> */}
</div>
);
}

4
src/layout/Sidebar.tsx
View File

@ -8,8 +8,6 @@ import { Badge } from '../components/ui/badge';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useLayoutStore } from '@/stores';
import { useCurrentUser } from '@/hooks/auth';
import Notice from './components/Notice';
// 菜单项接口
interface IMenuItem {
@ -27,7 +25,6 @@ function Sidebar() {
const isSidebarExpanded = useLayoutStore((s) => s.isSidebarExpanded);
const setSidebarExpanded = useLayoutStore((s) => s.setSidebarExpanded);
const setHydrated = useLayoutStore((s) => s.setHydrated);
const { data: user } = useCurrentUser();
// 在客户端挂载后，从 localStorage 恢复侧边栏状态
useEffect(() => {
@ -103,7 +100,6 @@ function Sidebar() {
<div className="bg-outline-normal h-px" />
</div>
<ChatSidebar />
<Notice actualIsExpanded={isSidebarExpanded} />
</div>
</aside>
);

42
src/layout/Topbar.tsx
View File

@ -8,6 +8,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar';
import Link from 'next/link';
import { usePathname, useSearchParams, useRouter } from 'next/navigation';
import { useMedia } from '@/hooks/tools';
import Notice from './components/Notice';
import { items } from './BottomBar';
const mobileHidenMenus = ['/profile/edit', '/profile/account'];
@ -21,7 +22,7 @@ function Topbar() {
const response = useMedia();
const searchParamsString = searchParams.toString();
const redirectURL = `${pathname}${searchParamsString ? `?${searchParamsString}` : ''}`;
const loginHref = `/login?redirect=${encodeURIComponent(redirectURL)}`;
// const loginHref = `/login?redirect=${encodeURIComponent(redirectURL)}`;
useEffect(() => {
function handleScroll(event: Event) {
@ -41,7 +42,7 @@ function Topbar() {
useEffect(() => {
if (!user) {
router.prefetch(loginHref);
router.prefetch('/login');
} else {
router.prefetch('/profile');
if (user.cpUserInfo) {
@ -54,11 +55,9 @@ function Topbar() {
if (!response) return null;
if (response.sm || items.some((item) => item.path === pathname)) {
return (
<div className="h-8 w-[103.6px]">
<Link href="/">
<Image src="/logo.svg" alt="logo" width={103.6} height={32} />
</Link>
</div>
<Link href="/">
<i className="iconfont-v2 iconv2-Logo" style={{ fontSize: '50px' }} />
</Link>
);
}
return (
@ -74,23 +73,26 @@ function Topbar() {
const rightDomRender = () => {
if (!user)
return (
<Link href={loginHref} prefetch>
<Link href="/login" prefetch>
<Button size="small">Login in / Sign up</Button>
</Link>
);
return (
<Link href="/profile" prefetch>
<Avatar className="size-8 cursor-pointer">
<AvatarImage
className="object-cover"
src={user.headImage}
alt={user.nickname}
width={32}
height={32}
/>
<AvatarFallback>{user.nickname?.slice(0, 1)}</AvatarFallback>
</Avatar>
</Link>
<div className="flex items-center">
<Notice />
<Link href="/profile" prefetch>
<Avatar className="size-8 cursor-pointer">
<AvatarImage
className="object-cover"
src={user.headImage}
alt={user.nickname}
width={32}
height={32}
/>
<AvatarFallback>{user.nickname?.slice(0, 1)}</AvatarFallback>
</Avatar>
</Link>
</div>
);
};

2
src/layout/components/ChatSearchResults.tsx
View File

@ -3,7 +3,7 @@ import { useState, useMemo } from 'react';
import ChatSidebarItem from './ChatSidebarItem';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import Empty from '@/components/ui/empty';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
interface ChatSearchResultsProps {
searchKeyword: string;

2
src/layout/components/ChatSidebar.tsx
View File

@ -4,7 +4,7 @@ import ChatSidebarAction from './ChatSidebarAction';
import ChatSearchResults from './ChatSearchResults';
import { Input } from '@/components/ui/input';
import { useState, useEffect, useCallback } from 'react';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useLayoutStore } from '@/stores';
import { useParams } from 'next/navigation';

13
src/layout/components/ChatSidebarAction.tsx
View File

@ -18,7 +18,7 @@ import {
} from '@/components/ui/alert-dialog';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useAsyncFn } from '@/hooks/tools';
interface ChatSidebarActionProps {
@ -33,14 +33,17 @@ const ChatSidebarAction = ({
isSearchActive = false,
}: ChatSidebarActionProps) => {
const clearNotifications = useStreamChatStore((state) => state.clearNotifications);
const clearChannels = useStreamChatStore((state) => state.clearChannels);
const clearChannels = useStreamChatStore((state) => state.deleteChannel);
const channels = useStreamChatStore((state) => state.channels);
const [isDeleteMessageDialogOpen, setIsDeleteMessageDialogOpen] = useState(false);
const router = useRouter();
const { run: handleClearChannels, loading } = useAsyncFn(async () => {
await clearChannels();
setIsDeleteMessageDialogOpen(false);
router.replace('/');
const { result } = await clearChannels(channels.map((ch) => ch.id!));
if (result === 'ok') {
router.replace('/');
setIsDeleteMessageDialogOpen(false);
}
});
return (

62
src/layout/components/Notice.tsx
View File

@ -1,48 +1,42 @@
import { Badge } from '@/components/ui/badge'
import { useCurrentUser, useUserNoticeStat } from '@/hooks/auth'
import Image from 'next/image'
import { useState, useEffect } from 'react'
import { usePathname } from 'next/navigation'
import { useQueryClient } from '@tanstack/react-query'
import { userKeys } from '@/lib/query-keys'
import NoticeDrawer from './NoticeDrawer'
import { Badge } from '@/components/ui/badge';
import { useCurrentUser, useUserNoticeStat } from '@/hooks/auth';
import Image from 'next/image';
import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query';
import { userKeys } from '@/lib/query-keys';
import NoticeDrawer from './NoticeDrawer';
const Notice = ({ actualIsExpanded }: { actualIsExpanded: boolean }) => {
const { data: user } = useCurrentUser()
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const pathname = usePathname()
const queryClient = useQueryClient()
const Notice = () => {
const { data: user } = useCurrentUser();
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const pathname = usePathname();
const queryClient = useQueryClient();
const { data } = useUserNoticeStat()
const { data } = useUserNoticeStat();
// 监听路径变化，刷新通知统计
useEffect(() => {
return;
if (user) {
// 当路径变化时，无效化并重新获取通知统计数据
queryClient.invalidateQueries({
queryKey: userKeys.noticeStat(),
})
});
}
}, [pathname])
}, [pathname]);
useEffect(() => {
return;
if (isDrawerOpen && user) {
queryClient.invalidateQueries({
queryKey: userKeys.noticeStat(),
})
});
}
}, [isDrawerOpen])
}, [isDrawerOpen]);
return (
<div>
{/* 分割线 */}
{user && (
<div className="mx-6 my-4">
<div className="bg-outline-normal h-px" />
</div>
)}
{/* 底部通知 */}
<>
{user && (
<div className="px-4">
<div
@ -53,17 +47,15 @@ const Notice = ({ actualIsExpanded }: { actualIsExpanded: boolean }) => {
<Image src="/icons/notice.svg" alt="Notice" width={32} height={32} />
<Badge count={data?.unRead} className="absolute -top-2 -right-2" />
</div>
{actualIsExpanded && (
{/* {actualIsExpanded && (
<span className="txt-label-m text-txt-primary-normal flex-1">Notice</span>
)}
)} */}
</div>
</div>
)}
{/* 通知抽屉 */}
<NoticeDrawer isOpen={isDrawerOpen} onOpenChange={setIsDrawerOpen} />
</div>
)
}
</>
);
};
export default Notice
export default Notice;

61
src/lib/protect.ts Normal file
View File

@ -0,0 +1,61 @@
type ProtectOptions = {
maxRetries?: number;
delay?: number;
onRetry?: (error: any, attempt: number) => void;
};
/**
* 保护函数，用于包裹异步请求并在失败时自动重试
* @param fn 需要执行的异步函数
* @param options 配置项
* @param options.maxRetries 最大重试次数，默认为 3
* @param options.delay 重试间隔时间（毫秒），默认为 1000
* @param options.onRetry 重试时的回调函数
* @returns 返回函数执行结果
*/
export async function protect<T>(fn: () => Promise<T>, options: ProtectOptions = {}): Promise<T> {
const { maxRetries = 3, delay = 1000, onRetry } = options;
let lastError: any;
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
return await fn();
} catch (error) {
lastError = error;
// 如果已经是最后一次尝试，直接抛出错误
if (attempt === maxRetries) {
console.error(`请求失败，已重试 ${maxRetries} 次:`, error);
throw error;
}
// 执行重试回调
if (onRetry) {
onRetry(error, attempt);
} else {
console.warn(`请求失败，第 ${attempt} 次重试中...`, error);
}
// 等待一段时间后重试
await new Promise((resolve) => setTimeout(resolve, delay * attempt));
}
}
throw lastError;
}
/**
* 创建一个带保护的函数包装器
* @param fn 需要包装的异步函数
* @param options 配置项
* @returns 返回包装后的函数
*/
export function createProtected<T extends (...args: any[]) => Promise<any>>(
fn: T,
options: ProtectOptions = {}
): T {
return (async (...args: any[]) => {
return protect(() => fn(...args), options);
}) as T;
}

15
src/lib/server/request.ts
View File

@ -18,14 +18,7 @@ export async function fetchServerRequest<T = any>(
tags?: string[]; // 缓存标签，用于手动刷新
}
): Promise<ResponseType<T>> {
const {
method = 'GET',
params,
data,
requireAuth = false,
revalidate,
tags,
} = options || {};
const { method = 'POST', params, data, requireAuth = false, revalidate, tags } = options || {};
// 获取 token（如果需要）
let token: string | null = null;
@ -51,7 +44,7 @@ export async function fetchServerRequest<T = any>(
};
// 构建完整 URL（服务端必须用完整 URL）
const baseURL = 'http://54.223.196.180:8091';
const baseURL = 'http://54.223.196.180';
const fullURL = new URL(url, baseURL);
// 处理查询参数
@ -66,9 +59,7 @@ export async function fetchServerRequest<T = any>(
// 处理 body 数据
if (data) {
fetchOptions.body = JSON.stringify(
Object.fromEntries(
Object.entries(data).filter(([, value]) => value !== '')
)
Object.fromEntries(Object.entries(data).filter(([, value]) => value !== ''))
);
}

7
src/proxy.ts
View File

@ -3,10 +3,9 @@ import type { NextRequest } from 'next/server';
// 需要认证的路由
const protectedRoutes = [
// '/profile',
// '/profile/account',
// '/profile/edit',
'/create',
'/profile',
'/profile/account',
'/profile/edit',
'/settings',
'/login/fields',
'/chat',

43
src/services/chat/index.ts Normal file
View File

@ -0,0 +1,43 @@
import { chatRequest } from '@/lib/client';
export async function getUserToken(data: { userId: string; userName: string }) {
return await chatRequest('/chat-api/v1/im/user/createOrGet', {
method: 'post',
data: data,
});
}
export async function createChannel(data: any) {
return await chatRequest('/chat-api/v1/im/user/conversation/create', {
method: 'post',
data: data,
});
}
export async function deleteChannel(chanelIds: string[]) {
return await chatRequest('/chat-api/v1/im/user/conversation/delete', {
method: 'post',
data: { chanelIds },
});
}
export async function fetchUserChatSetting(params: any) {
return await chatRequest('/chat-api/user/setting/chat/select', {
method: 'post',
data: params,
});
}
export async function updateUserChatSetting(params: any) {
return await chatRequest('/chat-api/user/setting/chat/createOrUpdate', {
method: 'post',
data: params,
});
}
export async function fetchModels() {
const { data } = await chatRequest('/chat-api/user/setting/model/list', {
method: 'post',
});
return data;
}

23
src/services/editor/index.ts
View File

@ -1,4 +1,4 @@
import { chatRequest, editorRequest } from '@/lib/client';
import { editorRequest } from '@/lib/client';
export async function fetchCharacters({ index, limit, query }: any) {
const { data } = await editorRequest('/api/character/list', {
@ -16,24 +16,3 @@ export async function fetchCharacter(params: any) {
export async function fetchCharacterTags(params: any = {}) {
return editorRequest('/api/tag/list', { method: 'POST', data: params });
}
export async function getUserToken(data: { userId: string; userName: string }) {
return await chatRequest('/chat-api/v1/im/user/createOrGet', {
method: 'post',
data: data,
});
}
export async function createChannel(data: any) {
return await chatRequest('/chat-api/v1/im/user/conversation/create', {
method: 'post',
data: data,
});
}
export async function deleteChannel(chanelId: string) {
return await chatRequest('/chat-api/v1/im/user/conversation/delete', {
method: 'post',
data: { chanelId },
});
}

59
src/services/home/home.service.ts Normal file
View File

@ -0,0 +1,59 @@
import { frogHttp } from '@/lib/http/instances'
import {
AiCarouselListOutput,
AiChatRankOutput,
AiGiftRankOutput,
AiHeartbeatRankOutput,
ExploreInfoOutput,
GetMeetListRequest,
GetMeetListResponse,
HomeRecommendV2Output,
SignInRoundOutput,
} from './types'
export const homeService = {
// 发现
getExplore: (): Promise<ExploreInfoOutput> => {
return frogHttp.post('/web/explore/info')
},
// 首页分类列表
getMeetList: (data: GetMeetListRequest): Promise<GetMeetListResponse[]> => {
return frogHttp.post('/web/home/classification-list', data)
},
// 热聊榜
getChatRank: (): Promise<AiChatRankOutput[]> => {
return frogHttp.post('/web/rank/chat')
},
// 心动榜
getHeartbeatRank: (): Promise<AiHeartbeatRankOutput[]> => {
return frogHttp.post('/web/rank/heartbeat')
},
// 送礼榜
getGiftRank: (): Promise<AiGiftRankOutput[]> => {
return frogHttp.post('/web/rank/gift')
},
// 七天签到列表
getSevenDaysSignList: (): Promise<SignInRoundOutput> => {
return frogHttp.post('/web/si/list')
},
// 签到
signIn: (): Promise<boolean> => {
return frogHttp.post('/web/si/asi')
},
// 首页AI轮播列表
getHomeAiCarouselList: (): Promise<AiCarouselListOutput[]> => {
return frogHttp.post('/web/home/ai-carousel-list')
},
// 首页聚合推荐
getHomeAggregateRecommend: (): Promise<HomeRecommendV2Output> => {
return frogHttp.post('/web/home/agg-recommend')
},
}

2
src/services/home/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './types'
export * from './home.service'

819
src/services/home/types.ts Normal file
View File

@ -0,0 +1,819 @@
import { Gender } from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK/UserServiceInterface'
/**
* ClassificationListInput
*/
export interface GetMeetListRequest {
/**
* 情感性格code
*/
characterCodeList: string[]
/**
* 需要排除的aiId列表
*/
exList?: number[]
/**
* 页码
*/
pn?: number
/**
* 每页大小
*/
ps: number
/**
* 角色code列表
*/
roleCodeList?: string[]
sex?: Gender
age?: Age
/** 多选：性别列表 */
sexList?: Gender[]
/** 多选：年龄列表 */
ageList?: Age[]
/**
* 标签code列表
*/
tagCodeList?: string[]
}
/**
* GetMeetListResponse
*/
export interface GetMeetListResponse {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 被喜欢数
*/
likedNum?: number
/**
* 昵称
*/
nickname?: string
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
/**
* ai所属用户id
*/
userId?: number
}
/**
* AiChatRankOutput
*/
export interface AiChatRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 聊天次数
*/
chatNum?: number
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* AiHeartbeatRankOutput
*/
export interface AiHeartbeatRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 头像
*/
headImg?: string
/**
* 心动总分值
*/
heartbeatValTotal?: number
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* AiGiftRankOutput
*/
export interface AiGiftRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 礼物
*/
giftCoinNum?: number
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* SignInRoundOutput
*/
export interface SignInRoundOutput {
/**
* 最大连续签到天数
*/
continuousDays?: number
/**
* 签到周期基础数据
*/
list?: SignInListOutput[]
}
/**
* SignInListOutput
*/
export interface SignInListOutput {
/**
* 得到coin的数量
*/
coinNum?: number
/**
* PST 天（yyyy-MM-dd）
*/
dayStr?: string
/**
* 是否已签到
*/
signIn?: boolean
}
/**
* ExploreInfoOutput
*/
export interface ExploreInfoOutput {
/**
* AI总心动值榜单top3
*/
aiChatRankTop3List?: AiChatRankOutput[]
/**
* AI总心动值榜单top3
*/
aiGiftRankTop3List?: AiGiftRankOutput[]
/**
* AI总心动值榜单top3
*/
aiHeartbeatRankTop3List?: AiHeartbeatRankOutput[]
/**
* 广告列表
*/
outputList?: AdvertiseOutput[]
}
/**
* com.sonic.frog.domain.output.AiChatRankOutput
*
* AiChatRankOutput
*/
export interface AiChatRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 聊天次数
*/
chatNum?: number
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* com.sonic.frog.domain.output.AiGiftRankOutput
*
* AiGiftRankOutput
*/
export interface AiGiftRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 礼物
*/
giftCoinNum?: number
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* com.sonic.frog.domain.output.AiHeartbeatRankOutput
*
* AiHeartbeatRankOutput
*/
export interface AiHeartbeatRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 头像
*/
headImg?: string
/**
* 心动总分值
*/
heartbeatValTotal?: number
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* AdvertiseOutput
*/
export interface AdvertiseOutput {
/**
* 使用端点（WEB/ANDROID/IOS）
* endpoint
*/
endpoint?: string
/**
* 扩展字段
* ext
*/
ext?: string
/**
* 广告配图
* icon
*/
icon?: string
/**
* 是否弹窗(1.是,0.否)
* is_global
*/
isGlobal?: number
/**
* 跳转连接
* jump_link
*/
jumpLink?: string
/**
* 广告名称
* name
*/
name?: string
/**
* 展示结束时间
* show_end_time
*/
showEndTime?: string
/**
* 展示开始时间
* show_start_time
*/
showStartTime?: string
/**
* 排序
* sort
*/
sort?: number
}
/**
* 年龄：单选 AGE_1（18-24）、AGE_2（25-34）、AGE_3（35-44）、AGE_4（45-54）、AGE_5（>54）
*/
export enum Age {
Age1 = 'AGE_1',
Age2 = 'AGE_2',
Age3 = 'AGE_3',
Age4 = 'AGE_4',
Age5 = 'AGE_5',
}
/**
* ai轮播列表输出
*
* AiCarouselListOutput
*/
export interface AiCarouselListOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 是否点赞过
*/
liked?: boolean
/**
* 点赞数
*/
likedCount?: number
/**
* 昵称
*/
nickname?: string
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
/**
* ai所属用户id
*/
userId?: number
}
/**
* HomeRecommendV2Output
*/
export interface HomeRecommendV2Output {
mostChat?: AiChatRankOutput[]
mustCrush?: AiHeartbeatRankOutput[]
mustGifted?: AiGiftRankOutput[]
starAChat?: StartChatOutput[]
}
/**
* com.sonic.frog.domain.output.AiChatRankOutput
*
* AiChatRankOutput
*/
export interface AiChatRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 聊天次数
*/
chatNum?: number
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 被喜欢数
*/
likedNum?: number
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* com.sonic.frog.domain.output.AiHeartbeatRankOutput
*
* AiHeartbeatRankOutput
*/
export interface AiHeartbeatRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 头像
*/
headImg?: string
/**
* 心动总分值
*/
heartbeatValTotal?: number
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 被喜欢数
*/
likedNum?: number
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* com.sonic.frog.domain.output.AiGiftRankOutput
*
* AiGiftRankOutput
*/
export interface AiGiftRankOutput {
/**
* AI的id
*/
aiId?: number
/**
* 出生日期
*/
birthday?: string
/**
* 性格名称
*/
characterName?: string
/**
* 礼物
*/
giftCoinNum?: number
/**
* 头像
*/
headImg?: string
/**
* 主页头图
*/
homeImageUrl?: string
/**
* 简介
*/
introduction?: string
/**
* 被喜欢数
*/
likedNum?: number
/**
* 昵称
*/
nickname?: string
/**
* 排名编号
*/
rankNo?: number
/**
* 角色名称
*/
roleName?: string
/**
* 0,男;1,女;2,自定义
*/
sex?: number
/**
* 标签名称
*/
tagName?: string
}
/**
* com.sonic.frog.domain.output.StartChatOutput
*
* StartChatOutput
*/
export interface StartChatOutput {
/**
* AI的id
*/
aiId?: number
/**
* 开场白语音地址
*/
dialoguePrologueSound?: string
/**
* 头像
*/
headImg?: string
/**
* 被喜欢数
*/
likedNum?: number
/**
* 昵称
*/
nickname?: string
/**
* 主动聊天内容
*/
supportingContentList?: string[]
}