个人资料卡的一些修改

This commit is contained in:
CrescentLeaf
2025-12-13 18:17:27 +08:00
parent 8fbf84d5dc
commit ae0e7fee95
3 changed files with 47 additions and 33 deletions

View File

@@ -3,7 +3,7 @@ import useEventListener from "../utils/useEventListener.ts"
import AvatarMySelf from "./AvatarMySelf.tsx"
import MainSharedContext from './MainSharedContext.ts'
import * as React from 'react'
import { BrowserRouter, createBrowserRouter, Link, LoaderFunction, Outlet, Route, RouterProvider, Routes } from "react-router"
import { BrowserRouter, createBrowserRouter, Link, LoaderFunction, Outlet, Route, RouterProvider, Routes, useNavigate } from "react-router"
import LoginDialog from "./main-page/LoginDialog.tsx"
import useAsyncEffect from "../utils/useAsyncEffect.ts"
import performAuth from "../performAuth.ts"
@@ -23,6 +23,7 @@ import UserOrChatInfoDialogLoader from "./routers/UserOrChatInfoDialogDataLoader
import ChatFragmentDialog from "./routers/ChatFragmentDialog.tsx"
import EffectOnly from "./EffectOnly.tsx"
import MainSharedReducer from "./MainSharedReducer.ts"
import gotoUserInfo from "./routers/gotoUserInfo.ts"
function Root() {
const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
@@ -52,6 +53,8 @@ function Root() {
const [showRegisterDialog, setShowRegisterDialog] = React.useState(false)
const [showAddFavourtieChatDialog, setShowAddFavourtieChatDialog] = React.useState(false)
const nav = useNavigate()
const [state, dispatch] = React.useReducer(MainSharedReducer, {
favouriteChats: [],
currentSelectedChatId: '',
@@ -116,7 +119,7 @@ function Root() {
<mdui-list style={{
padding: '10px',
}}>
<mdui-list-item rounded>
<mdui-list-item rounded onClick={() => gotoUserInfo(nav, myProfileCache!.getId())}>
<span>{myProfileCache?.getNickName()}</span>
<AvatarMySelf slot="icon" />
</mdui-list-item>

View File

@@ -17,7 +17,9 @@ export default function UserOrChatInfoDialog() {
}))
const dialogRef = useRouterDialogRef()
const { chat, id } = useLoaderData<typeof UserOrChatInfoDialogLoader>()
const { chat, id, mySelf } = useLoaderData<typeof UserOrChatInfoDialogLoader>()
const isMySelf = mySelf?.getId() == id
const favourited = React.useMemo(() => shared.state.favouriteChats.map((v) => v.getId()).indexOf(chat.getId() || '') != -1, [chat, shared.state.favouriteChats])
@@ -53,37 +55,44 @@ export default function UserOrChatInfoDialog() {
marginTop: "10px",
}}></mdui-divider>
<mdui-list>
<mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
headline: favourited ? "取消收藏对话" : "收藏对话",
description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
actions: [
{
text: "取消",
onClick: () => {
return true
{
isMySelf && <mdui-list-item icon="edit" rounded>
</mdui-list-item>
}
{
!isMySelf && <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
headline: favourited ? "取消收藏对话" : "收藏对话",
description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
actions: [
{
text: "取消",
onClick: () => {
return true
},
},
},
{
text: "确定",
onClick: () => {
; (async () => {
try {
if (favourited)
await (await ClientCache.getMySelf())!.removeFavouriteChatsOrThrow([chat.getId()])
else
await (await ClientCache.getMySelf())!.addFavouriteChatsOrThrow([chat.getId()])
} catch (e) {
if (e instanceof CallbackError)
showSnackbar({
message: (favourited ? "取消收藏对话" : "收藏对话") + '失败: ' + e.message
})
}
})()
return true
},
}
],
})}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
{
text: "确定",
onClick: () => {
; (async () => {
try {
if (favourited)
await (await ClientCache.getMySelf())!.removeFavouriteChatsOrThrow([chat.getId()])
else
await (await ClientCache.getMySelf())!.addFavouriteChatsOrThrow([chat.getId()])
} catch (e) {
if (e instanceof CallbackError)
showSnackbar({
message: (favourited ? "取消收藏对话" : "收藏对话") + '失败: ' + e.message
})
}
})()
return true
},
}
],
})}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
}
<mdui-list-item icon="chat" rounded onClick={() => {
}}></mdui-list-item>

View File

@@ -1,6 +1,7 @@
import { LoaderFunctionArgs } from "react-router"
import getClient from "../../getClient"
import { Chat } from "lingchair-client-protocol"
import ClientCache from "../../ClientCache"
export default async function UserOrChatInfoDialogLoader({ params, request }: LoaderFunctionArgs) {
const searchParams = new URL(request.url).searchParams
@@ -16,6 +17,7 @@ export default async function UserOrChatInfoDialogLoader({ params, request }: Lo
id = await chat.getTheOtherUserIdOrThrow()
return {
mySelf: await ClientCache.getMySelf(),
chat,
id,
}