我不知道

client/ui/ImageViewer.tsx

@@ -2,18 +2,23 @@ import { Dialog } from 'mdui'
 import 'pinch-zoom-element'
 import React from "react"
 
-export default function ImageViewer() {
+export default function ImageViewer({ ...props }: React.ImgHTMLAttributes<HTMLImageElement>) {
     const dialogRef = React.useRef<Dialog>()
 
     return <mdui-dialog ref={dialogRef} fullscreen="fullscreen">
-        <mdui-button-icon icon="open_in_new"
-            onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
+        <mdui-button-icon icon="open_in_new" onClick={() => window.open(props.src, '_blank')}>
         </mdui-button-icon>
         <mdui-button-icon icon="close" onClick={() => dialogRef.current!.open = false}>
         </mdui-button-icon>
         {
             // @ts-ignore 注册了这个元素
-            <pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);"></pinch-zoom>
+            <pinch-zoom id="image-viewer-dialog-inner" style={{
+                width: 'var(--whitesilk-window-width)',
+                height: 'var(--whitesilk-window-height)',
+            }}>
+                <img {...props}></img>
+                {/* @ts-ignore 注册了这个元素 */}
+            </pinch-zoom>
         }
     </mdui-dialog>
 }

client/ui/Main.tsx

@@ -24,6 +24,7 @@ import ChatFragmentDialog from "./routers/ChatFragmentDialog.tsx"
 import EffectOnly from "./EffectOnly.tsx"
 import MainSharedReducer from "./MainSharedReducer.ts"
 import gotoUserInfo from "./routers/gotoUserInfo.ts"
+import EditMyProfileDialog from "./routers/EditMyProfileDialog.tsx"
 
 function Root() {
     const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
@@ -129,8 +130,6 @@ function Root() {
                         }}></mdui-divider>
                         <mdui-list-item rounded icon="person_add">添加收藏对话</mdui-list-item>
                         <mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
-                        <Link to="/info/user?id=0960bd15-4527-4000-97a8-73110160296f"><mdui-list-item rounded icon="group_add">我是测试</mdui-list-item></Link>
-                        <Link to="/info/chat?id=priv_0960bd15_4527_4000_97a8_73110160296f__0960bd15_4527_4000_97a8_73110160296f"><mdui-list-item rounded icon="group_add">我是测试2</mdui-list-item></Link>
                     </mdui-list>
                     <div style={{
                         flexGrow: 1,
@@ -235,6 +234,15 @@ export default function Main() {
                 Component: UserOrChatInfoDialog,
                 loader: UserOrChatInfoDialogLoader,
             },
+            {
+                path: 'settings',
+                children: [
+                    {
+                        path: 'edit_profile',
+                        Component: EditMyProfileDialog,
+                    }
+                ],
+            },
             /* {
                 path: 'chat',
                 Component: ChatFragmentDialog,

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