diff --git a/src/app/(main)/chat/[id]/Drawer/index.tsx b/src/app/(main)/chat/[id]/Drawer/index.tsx
index 33b1014..fcf3d5e 100644
--- a/src/app/(main)/chat/[id]/Drawer/index.tsx
+++ b/src/app/(main)/chat/[id]/Drawer/index.tsx
@@ -22,6 +22,9 @@ import { useStreamChatStore } from '../stream-chat';
import IconFont from '@/components/ui/iconFont';
import MaskCreate from './MaskCreate';
import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
+import LikedIcon from '@/components/features/LikedIcon';
+import { LikeTargetType } from '@/services/editor/type';
type SettingProps = {
open: boolean;
@@ -42,6 +45,8 @@ export default function SettingDialog({ open, onOpenChange }: SettingProps) {
const t = useTranslations('chat.drawer');
const [activeTab, setActiveTab] = useState
('profile');
const updateUserChatSetting = useStreamChatStore((store) => store.updateUserChatSetting);
+ const { id } = useParams<{ id: string }>();
+ const characterId = id.split('-')[2];
const titleMap = {
mask_list: t('maskedIdentityMode'),
@@ -66,7 +71,7 @@ export default function SettingDialog({ open, onOpenChange }: SettingProps) {
{activeTab === 'profile' ? (
-
+
) : (
titleMap[activeTab]
)}
diff --git a/src/components/features/LikedIcon.tsx b/src/components/features/LikedIcon.tsx
new file mode 100644
index 0000000..70e2609
--- /dev/null
+++ b/src/components/features/LikedIcon.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { LikeTargetType, LikeType } from '@/services/editor/type';
+import { IconButton } from '../ui/button';
+import { useThmubObject } from '@/hooks/services/common';
+import React from 'react';
+
+type LikedIconProps = {
+ objectId: string;
+ objectType: LikeTargetType;
+ iconProps?: React.ComponentProps;
+};
+
+const LikedIcon = React.memo((props: LikedIconProps) => {
+ const { objectId, objectType, iconProps } = props;
+ const { thumb, handleThumb, loading } = useThmubObject({ objectId, objectType });
+
+ return (
+ {
+ if (loading) return;
+ handleThumb(thumb === LikeType.Liked ? LikeType.Canceled : LikeType.Liked);
+ }}
+ />
+ );
+});
+
+export default LikedIcon;
diff --git a/src/components/features/abandon-creation-dialog.tsx b/src/components/features/abandon-creation-dialog.tsx
deleted file mode 100644
index af5bd7b..0000000
--- a/src/components/features/abandon-creation-dialog.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import React, { useLayoutEffect, useRef } from 'react'
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { useRouter } from 'next/navigation'
-
-interface AbandonCreationDialogProps {
- open: boolean
- onOpenChange: (open: boolean) => void
- onCancel: () => void
- onRegenerate: () => void
- actionType?: 'exit' | 'regenerate'
-}
-
-const AbandonCreationDialog = ({
- open,
- onOpenChange,
- onCancel,
- onRegenerate,
- actionType = 'regenerate',
-}: AbandonCreationDialogProps) => {
- const router = useRouter()
- // 保存对话框打开时的 actionType，确保关闭动画期间按钮文案不变
- const actionTypeRef = useRef(actionType)
- const prevOpenRef = useRef(open)
-
- useLayoutEffect(() => {
- // 当对话框打开时，持续更新 ref 为当前的 actionType
- // 这样可以确保即使 actionType 在对话框打开后才更新，也能被捕获
- if (open) {
- actionTypeRef.current = actionType
- }
- prevOpenRef.current = open
- }, [open, actionType])
-
- const handleConfirm = () => {
- onRegenerate()
- }
-
- // 对话框打开时使用当前的 actionType（确保显示最新值），关闭动画期间使用 ref 保持文案不变
- const displayActionType = open ? actionType : actionTypeRef.current
-
- return (
-
-
-
- Discard Generation
-
-
- If you choose to exit or regenerate, the current images will be lost and one generation
- attempt will be used.
-
-
- cancel
-
- {displayActionType === 'exit' ? 'Discard' : 'Regenerate'}
-
-
-
-
- )
-}
-
-export default AbandonCreationDialog
diff --git a/src/components/features/ai-generate-button.tsx b/src/components/features/ai-generate-button.tsx
deleted file mode 100644
index 6ecdce8..0000000
--- a/src/components/features/ai-generate-button.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { cn } from '@/lib/utils'
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
-} from '../ui/alert-dialog'
-import { useState } from 'react'
-import { toast } from 'sonner'
-
-const AIGenerateButton = ({
- loading,
- showAlert,
- onConfirm,
- className,
- getNickName,
- disabled,
-}: {
- loading?: boolean
- showAlert?: boolean
- onConfirm: (() => Promise | void) | (() => void)
- className?: string
- getNickName?: () => string
- disabled?: boolean
-}) => {
- const [open, setOpen] = useState(false)
- const [isLoading, setIsLoading] = useState(false)
-
- const handleConfirm = async () => {
- if (disabled) return
- if (getNickName && getNickName() === '') {
- toast.error('Please enter nickname')
- return
- }
- if (showAlert) {
- setOpen(true)
- return
- }
- setIsLoading(true)
- try {
- await onConfirm()
- } catch (error) {
- console.error(error)
- } finally {
- setIsLoading(false)
- }
- }
-
- const handleContinue = async () => {
- setIsLoading(true)
- try {
- setOpen(false)
- await onConfirm()
- } catch (error) {
- console.error(error)
- } finally {
- setIsLoading(false)
- }
- }
-
- if (loading || isLoading) {
- return (
-
-
- Generating...
-
- )
- }
-
- return (
- <>
-
- AI Generate
-
-
-
-
- Warning
-
-
- Using AI generation will overwrite the content you have already entered. Do you want to
- continue?
-
-
- Cancel
- Continue
-
-
-
-
- )
-}
-export default AIGenerateButton
diff --git a/src/components/features/album-delete-alert.tsx b/src/components/features/album-delete-alert.tsx
deleted file mode 100644
index e908d18..0000000
--- a/src/components/features/album-delete-alert.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { useDeleteAlbumImage } from '@/hooks/aiUser'
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
- AlertDialogTrigger,
-} from '../ui/alert-dialog'
-import { Button } from '../ui/button'
-import { useState } from 'react'
-
-const AlbumDeleteAlert = ({
- aiId,
- albumId,
- isDefaultImage,
- onDeleted,
- children,
-}: {
- aiId: number
- albumId: number
- isDefaultImage: boolean
- onDeleted?: () => void
- children: React.ReactNode
-}) => {
- const [isOpen, setIsOpen] = useState(false)
- const deleteMutation = useDeleteAlbumImage()
-
- const handleDelete = async () => {
- try {
- await deleteMutation.mutateAsync({ aiId, albumId })
- onDeleted?.()
- setIsOpen(false)
- } catch (error) {
- console.error(error)
- } finally {
- setIsOpen(false)
- }
- }
-
- return (
-
- {children}
-
-
- Delete Image
-
-
- {isDefaultImage
- ? 'The default cover image cannot be deleted. It will appear as your profile header, card cover, and chat background.'
- : `Once deleted, the image cannot be restored. Users who have already unlocked this image will still be able to view it in the character's album.`}
-
- {isDefaultImage ? (
-
- setIsOpen(false)}>Got it
-
- ) : (
-
- Cancel
-
-
- )}
-
-
- )
-}
-
-export default AlbumDeleteAlert
diff --git a/src/components/features/album-price-setting.tsx b/src/components/features/album-price-setting.tsx
deleted file mode 100644
index 47fbc89..0000000
--- a/src/components/features/album-price-setting.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import {
- AlertDialog,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
- AlertDialogTrigger,
-} from '../ui/alert-dialog';
-import { IconButton, Button } from '../ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
-import { Input } from '../ui/input';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
-import Image from 'next/image';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
-import Decimal from 'decimal.js';
-
-export interface AlbumPriceFormData {
- unlockMethod: 'pay' | 'free';
- price?: string;
-}
-
-const schema = z
- .object({
- unlockMethod: z.enum(['pay', 'free']),
- price: z.string().optional(),
- })
- .refine(
- (data) => {
- // 如果选择了 "pay"，price 必须填写且有效
- if (data.unlockMethod === 'pay') {
- if (!data.price || data.price.trim() === '') {
- return false;
- }
- if (Number(data.price) < 20) {
- return false;
- }
- }
- return true;
- },
- {
- message: 'At least 20 diamonds',
- path: ['price'],
- }
- );
-
-interface AlbumPriceSettingProps {
- defaultUnlockPrice?: number;
- onConfirm: (data: AlbumPriceFormData) => Promise;
- children?: React.ReactNode;
-}
-
-const AlbumPriceSetting = ({ defaultUnlockPrice, onConfirm, children }: AlbumPriceSettingProps) => {
- const [isOpen, setIsOpen] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
-
- console.log('defaultUnlockPrice', defaultUnlockPrice);
-
- useEffect(() => {
- if (isOpen) {
- if (defaultUnlockPrice === undefined) {
- form.setValue('unlockMethod', 'pay');
- form.setValue('price', '20');
- return;
- }
- if (defaultUnlockPrice) {
- form.setValue('unlockMethod', 'pay');
- form.setValue('price', new Decimal(defaultUnlockPrice).div(100).toString());
- } else {
- form.setValue('unlockMethod', 'free');
- form.setValue('price', '');
- }
- }
- }, [isOpen, defaultUnlockPrice]);
-
- const form = useForm({
- resolver: zodResolver(schema),
- defaultValues: {
- unlockMethod: 'pay',
- price: '',
- },
- });
- const unlockMethod = form.watch('unlockMethod');
-
- useEffect(() => {
- if (unlockMethod === 'free') {
- const priceValue = form.getValues('price');
- if (!priceValue) {
- form.setValue('price', '20');
- }
- }
- }, [unlockMethod]);
-
- const handleSubmit = async (data: AlbumPriceFormData) => {
- setIsLoading(true);
- try {
- console.log('保存数据:', data);
- const result = {
- unlockMethod: data.unlockMethod,
- price: data.unlockMethod === 'pay' ? data.price : undefined,
- };
- await onConfirm(result);
- setIsOpen(false);
- form.reset();
- } catch (error) {
- console.error('保存失败:', error);
- } finally {
- setIsLoading(false);
- }
- };
-
- const handleCancel = () => {
- setIsOpen(false);
- form.reset();
- };
-
- return (
-
-
- {children || (
-
-
-
- )}
-
-
-
-
- How to Unlock
-
-
-
-
-
-
-
- );
-};
-
-export default AlbumPriceSetting;
diff --git a/src/components/features/device-info.tsx b/src/components/features/device-info.tsx
deleted file mode 100644
index efc5544..0000000
--- a/src/components/features/device-info.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { tokenManager } from '@/lib/auth/token'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-
-export function DeviceInfo() {
- const [deviceId, setDeviceId] = useState('')
- const [token, setToken] = useState('')
-
- useEffect(() => {
- // 获取当前的设备ID和token
- const currentDeviceId = tokenManager.getDeviceId()
- const currentToken = tokenManager.getToken() || ''
-
- setDeviceId(currentDeviceId)
- setToken(currentToken)
- }, [])
-
- const refreshDeviceId = () => {
- // 生成新的设备ID
- const newDeviceId = tokenManager.getDeviceId()
- setDeviceId(newDeviceId)
- }
-
- const clearAllData = () => {
- tokenManager.clearAll()
- setDeviceId('')
- setToken('')
- // 重新生成设备ID
- setTimeout(() => {
- const newDeviceId = tokenManager.getDeviceId()
- setDeviceId(newDeviceId)
- }, 100)
- }
-
- return (
-
-
- 📱 设备信息
-
-
-
-
Device ID (sd) Device ID (sd)
-
- {deviceId || '未生成'}
-
-
- Stored in a cookie, field named'sd ', sent as AUTH_DID' in the request header
-
-
-
- Authentication token (st) Authentication token (st)
-
-
- {token || '未登录'}
-
-
- Stored in a cookie, field named'st ', sent as AUTH_TK in the request header
-
-
-
-
-
-
-
-
💡 设备ID说明
-
- -
- Automatically generated when a user visits for the first time Automatically generated
- when a user visits for the first time
-
- -
- • Contains timestamp, random string and browser information • Contains timestamp,
- random string and browser information
-
- -
- Store in a cookie with a valid period of 365 days Store in a cookie with a valid
- period of 365 days
-
- -
- • For device identification and security verification • For device identification and
- security verification
-
- -
- • Will not be cleared when logging out (only clearAll will be cleared) • Will not be
- cleared when logging out (only clearAll will be cleared)
-
-
-
-
-
- {statusConfig.text}
-
-
+ return
;
}
- let className = ''
+ let className = '';
if (styles.length === 0) {
- return {content}
+ return {content};
}
// 叠加样式
if (styles.includes('dialogue')) {
- className += ' text-[rgba(255,236,159,1)]'
+ className += ' text-[rgba(255,236,159,1)]';
}
if (styles.includes('emphasis')) {
- className += ' font-semibold'
+ className += ' font-semibold';
}
if (styles.includes('emphasis2')) {
- className += ' underline'
+ className += ' underline';
}
if (styles.includes('supplement')) {
- className += ' text-[rgba(181,177,207,1)]'
+ className += ' text-[rgba(181,177,207,1)]';
}
return (
{content}
- )
-}
+ );
+};
/**
* AI 文本渲染组件
*/
-const AITextRender = React.memo(({ text }: AITextRenderProps) => {
+const AITextRender = React.memo(({ text, ...props }: AITextRenderProps) => {
// 1. 解析文本
- const nodes = parseText(text)
+ const nodes = parseText(text);
+ const font = useStreamChatStore((store) => store.chatSetting.font);
+ const fontClass =
+ {
+ 12: 'text-xs',
+ 14: 'text-sm',
+ 16: 'text-base',
+ 18: 'text-lg',
+ 20: 'text-xl',
+ }[font] || 'text-base';
// 2. 渲染节点
- // 这里的 className "ai-text-render" 对应 CSS 中的根类，用于控制全局字体、行高等
return (
- {nodes.map((node, index) => renderNode(node, index))}
- )
-})
+
+ {nodes.map((node, index) => renderNode(node, index))}
+
+ );
+});
-export default AITextRender
+export default AITextRender;
diff --git a/src/hooks/services/common.ts b/src/hooks/services/common.ts
new file mode 100644
index 0000000..817d2e6
--- /dev/null
+++ b/src/hooks/services/common.ts
@@ -0,0 +1,36 @@
+import { getLikeStatus, thmubObject } from '@/services/editor';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { authKeys } from '@/lib/query-keys';
+import { LikeObjectParamsType, LikeType } from '@/services/editor/type';
+import { useAsyncFn } from '../tools';
+
+export function useThmubObject(props: Pick) {
+ const queryClient = useQueryClient();
+ const [thumb, setThumb] = useState();
+ const user = queryClient.getQueryData(authKeys.currentUser()) as any;
+
+ useQuery({
+ queryKey: ['likeStatus', props.objectId, user.userId],
+ enabled: !!props.objectId && !!user.userId,
+ queryFn: () => {
+ return getLikeStatus({ objectId: props.objectId, userId: user.userId });
+ },
+ });
+
+ const { run: handleThumb, loading } = useAsyncFn(async (likeType: LikeType) => {
+ setThumb(likeType);
+ const user = queryClient.getQueryData(authKeys.currentUser()) as any;
+ const { data } = await thmubObject({ ...props, likeType, userId: user?.userId });
+ if (data.code === 200) {
+ } else {
+ setThumb(undefined);
+ }
+ });
+
+ return {
+ thumb,
+ loading,
+ handleThumb,
+ };
+}
diff --git a/src/services/editor/index.ts b/src/services/editor/index.ts
index e26c8a7..e8d6f96 100644
--- a/src/services/editor/index.ts
+++ b/src/services/editor/index.ts
@@ -1,4 +1,5 @@
import { editorRequest } from '@/lib/client';
+import { LikeObjectParamsType } from './type';
export async function fetchCharacters({ index, limit, query }: any) {
const { data } = await editorRequest('/api/character/list', {
@@ -16,3 +17,12 @@ export async function fetchCharacter(params: any) {
export async function fetchCharacterTags(params: any = {}) {
return editorRequest('/api/tag/list', { method: 'POST', data: params });
}
+
+export async function thmubObject(params: LikeObjectParamsType) {
+ return editorRequest('/api/like/likeOrCancel', { method: 'POST', data: params });
+}
+
+export async function getLikeStatus(params: Pick) {
+ const { data } = await editorRequest('/api/like/getLikeStatus', { method: 'POST', data: params });
+ return data;
+}
diff --git a/src/services/editor/type.d.ts b/src/services/editor/type.ts
similarity index 61%
rename from src/services/editor/type.d.ts
rename to src/services/editor/type.ts
index c958cdd..87e8545 100644
--- a/src/services/editor/type.d.ts
+++ b/src/services/editor/type.ts
@@ -21,3 +21,18 @@ export type CharacterType = {
}[];
[x: string]: any;
};
+
+export enum LikeTargetType {
+ Character = 0,
+ Story = 1,
+}
+export enum LikeType {
+ Liked = 0,
+ Canceled = 1,
+}
+export type LikeObjectParamsType = {
+ objectId?: string;
+ objectType?: LikeTargetType;
+ userId?: number;
+ likeType?: LikeType;
+};