我不知道

client/ui/routers/EditMyProfileDialog.tsx

@@ -0,0 +1,98 @@
+import { CallbackError, UserMySelf } from "lingchair-client-protocol"
+import ClientCache from "../../ClientCache"
+import AvatarMySelf from "../AvatarMySelf"
+import useRouterDialogRef from "./useRouterDialogRef"
+import useAsyncEffect from "../../utils/useAsyncEffect"
+import getClient from "../../getClient"
+import { useNavigate } from "react-router"
+import showSnackbar from "../../utils/showSnackbar"
+import useEventListener from "../../utils/useEventListener"
+import { TextField } from "mdui"
+import * as React from 'react'
+
+export default function EditMyProfileDialog() {
+    const dialogRef = useRouterDialogRef()
+    const nav = useNavigate()
+
+    const [mySelf, setMySelf] = React.useState<UserMySelf>()
+    useAsyncEffect(async () => setMySelf(await ClientCache.getMySelf() as UserMySelf))
+
+    const chooseAvatarFileRef = React.useRef<HTMLInputElement>(null)
+
+    const editNickNameRef = React.useRef<TextField>(null)
+    const editUserNameRef = React.useRef<TextField>(null)
+
+    useEventListener(chooseAvatarFileRef, 'change', async (_) => {
+        const file = chooseAvatarFileRef.current!.files?.[0] as File
+        if (file == null) return
+
+        try {
+            const hash = await getClient().uploadFile({
+                fileName: 'UserAvatar',
+                fileData: file,
+            })
+            await mySelf?.setAvatarFileHashOrThrow(hash)
+        } catch (e) {
+            if (e instanceof CallbackError)
+                showSnackbar({
+                    message: '上传头像失败: ' + e.message
+                })
+        }
+
+        showSnackbar({
+            message: "修改成功, 刷新页面以更新",
+        })
+    })
+
+    return (
+        <mdui-dialog close-on-overlay-click close-on-esc ref={dialogRef}>
+            <div style={{
+                display: "none"
+            }}>
+                <input type="file" name="选择头像" ref={chooseAvatarFileRef}
+                    accept="image/*" />
+            </div>
+
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+            }}>
+                <AvatarMySelf style={{
+                    width: '50px',
+                    height: '50px',
+                }} />
+                <mdui-text-field variant="outlined" placeholder="昵称" ref={editNickNameRef} style={{
+                    marginLeft: "15px",
+                }} value={mySelf?.getNickName()}></mdui-text-field>
+            </div>
+            <mdui-divider style={{
+                marginTop: "10px",
+            }}></mdui-divider>
+
+            <mdui-text-field style={{ marginTop: "10px", }} variant="outlined" label="用户 ID" value={mySelf?.getId() || ''} readonly onClick={(e: MouseEvent) => {
+                const input = e.target as HTMLInputElement
+                input.select()
+                input.setSelectionRange(0, 1145141919810)
+            }}></mdui-text-field>
+            <mdui-text-field style={{ marginTop: "20px", }} variant="outlined" label="用户名" value={mySelf?.getUserName() || ''} ref={editUserNameRef}></mdui-text-field>
+
+            <mdui-button slot="action" variant="text" onClick={() => nav(-1)}>取消</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={async () => {
+                try {
+                    await mySelf?.updateProfileOrThrow({
+                        nickname: editNickNameRef.current?.value,
+                        username: editUserNameRef.current?.value,
+                    })
+                } catch (e) {
+                    if (e instanceof CallbackError)
+                        showSnackbar({
+                            message: '更新资料失败: ' + e.message
+                        })
+                }
+                showSnackbar({
+                    message: "修改成功, 刷新页面以更新",
+                })
+            }}>更新</mdui-button>
+        </mdui-dialog>
+    )
+}

client/ui/routers/UserOrChatInfoDialog.tsx

@@ -1,6 +1,6 @@
 import { dialog } from "mdui"
 import useRouterDialogRef from "./useRouterDialogRef"
-import { useLoaderData } from "react-router"
+import { useLoaderData, useNavigate } from "react-router"
 import { CallbackError } from "lingchair-client-protocol"
 import showSnackbar from "../../utils/showSnackbar"
 import Avatar from "../Avatar"
@@ -16,6 +16,8 @@ export default function UserOrChatInfoDialog() {
         state: context.state,
     }))
 
+    const nav = useNavigate()
+
     const dialogRef = useRouterDialogRef()
     const { chat, id, mySelf } = useLoaderData<typeof UserOrChatInfoDialogLoader>()
 
@@ -56,7 +58,7 @@ export default function UserOrChatInfoDialog() {
             }}></mdui-divider>
             <mdui-list>
                 {
-                    isMySelf && <mdui-list-item icon="edit" rounded>
+                    isMySelf && <mdui-list-item icon="edit" rounded onClick={() => nav('/settings/edit_profile')}>
                         编辑资料
                     </mdui-list-item>
                 }