Restructure docs navigation for channel and widget guides

web/app/dashboard/users/_components/create.tsx

@@ -15,6 +15,7 @@ import { useAppLocale, useI18n } from "@/i18n/provider"
 import { Status } from "@/lib/generated/enums"
 import { getRoleDisplayName } from "@/lib/role-i18n"
 import { cn } from "@/lib/utils"
+import { ImageInput } from "@/components/image-input"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -119,13 +120,7 @@ function CreateUserDrawerBody({
       z.object({
         username: z.string().trim().min(1, t("user.usernameRequired")),
         nickname: z.string().trim(),
-        avatar: z
-          .string()
-          .trim()
-          .refine(
-            (value) => value.length === 0 || /^https?:\/\/\S+$/i.test(value),
-            t("user.avatarInvalid")
-          ),
+        avatar: z.string().trim(),
         mobile: z
           .string()
           .trim()
@@ -233,14 +228,22 @@ function CreateUserDrawerBody({
               <FieldError errors={[errors.nickname]} />
             </FieldContent>
           </Field>
-          <Field data-invalid={!!errors.avatar}>
-            <FieldLabel htmlFor="create-avatar">{t("user.avatar")}</FieldLabel>
+          <Field className="min-h-32" data-invalid={!!errors.avatar}>
+            <FieldLabel>{t("user.avatar")}</FieldLabel>
             <FieldContent>
-              <Input
-                id="create-avatar"
-                placeholder={t("user.avatarCreatePlaceholder")}
-                aria-invalid={!!errors.avatar}
-                {...register("avatar")}
+              <Controller
+                control={control}
+                name="avatar"
+                render={({ field }) => (
+                  <ImageInput
+                    value={field.value}
+                    onChange={field.onChange}
+                    disabled={saving}
+                    prefix="avatar"
+                    placeholder={t("user.avatarCreatePlaceholder")}
+                    className="size-16 rounded-full"
+                  />
+                )}
               />
               <FieldError errors={[errors.avatar]} />
             </FieldContent>

web/app/dashboard/users/_components/edit.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Resolver, useForm } from "react-hook-form"
+import { Controller, Resolver, useForm } from "react-hook-form"
 import { z } from "zod/v4"
 
 import {
@@ -11,6 +11,7 @@ import {
   fetchUserDetail,
 } from "@/lib/api/admin"
 import { useI18n } from "@/i18n/provider"
+import { ImageInput } from "@/components/image-input"
 import { Button } from "@/components/ui/button"
 import {
   Drawer,
@@ -121,13 +122,7 @@ function UserEditDrawerBody({
     () =>
       z.object({
         nickname: z.string().trim().min(1, t("user.nicknameRequired")),
-        avatar: z
-          .string()
-          .trim()
-          .refine(
-            (value) => value.length === 0 || /^https?:\/\/\S+$/i.test(value),
-            t("user.avatarInvalid")
-          ),
+        avatar: z.string().trim(),
         mobile: z
           .string()
           .trim()
@@ -155,6 +150,7 @@ function UserEditDrawerBody({
     defaultValues: emptyForm,
   })
   const {
+    control,
     handleSubmit,
     reset,
     register,
@@ -220,14 +216,22 @@ function UserEditDrawerBody({
                 <FieldError errors={[errors.nickname]} />
               </FieldContent>
             </Field>
-            <Field data-invalid={!!errors.avatar}>
-              <FieldLabel htmlFor="user-avatar">{t("user.avatar")}</FieldLabel>
+            <Field className="min-h-32" data-invalid={!!errors.avatar}>
+              <FieldLabel>{t("user.avatar")}</FieldLabel>
               <FieldContent>
-                <Input
-                  id="user-avatar"
-                  placeholder={t("user.avatarPlaceholder")}
-                  aria-invalid={!!errors.avatar}
-                  {...register("avatar")}
+                <Controller
+                  control={control}
+                  name="avatar"
+                  render={({ field }) => (
+                    <ImageInput
+                      value={field.value}
+                      onChange={field.onChange}
+                      disabled={saving || loading}
+                      prefix="avatar"
+                      placeholder={t("user.avatarPlaceholder")}
+                      className="size-16 rounded-full"
+                    />
+                  )}
                 />
                 <FieldError errors={[errors.avatar]} />
               </FieldContent>

web/components/image-input.tsx

@@ -81,7 +81,7 @@ export function ImageInput({
   const isDisabled = disabled || uploading
 
   return (
-    <div className={cn("relative", className)}>
+    <div className="relative w-fit">
       <input
         ref={fileInputRef}
         type="file"
@@ -96,7 +96,8 @@ export function ImageInput({
           "group relative flex size-24 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-input bg-muted transition-colors",
           "hover:border-primary hover:bg-muted/50",
           "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none",
-          isDisabled && "cursor-not-allowed opacity-50"
+          isDisabled && "cursor-not-allowed opacity-50",
+          className
         )}
         tabIndex={isDisabled ? -1 : 0}
         onKeyDown={(e) => {

web/messages/en-US.json

@@ -926,7 +926,7 @@
     "emptyRows": "No matching users",
     "nicknameRequired": "Enter a nickname.",
     "usernameRequired": "Enter a username.",
-    "avatarInvalid": "Avatar URL must start with http or https.",
+    "avatarInvalid": "Invalid avatar.",
     "mobileInvalid": "Enter a valid phone number.",
     "emailInvalid": "Enter a valid email address.",
     "editTitle": "Edit User",
@@ -934,8 +934,8 @@
     "loading": "Loading...",
     "nickname": "Nickname",
     "nicknamePlaceholder": "Enter nickname",
-    "avatar": "Avatar URL",
-    "avatarPlaceholder": "Enter avatar URL",
+    "avatar": "Avatar",
+    "avatarPlaceholder": "Upload avatar",
     "mobile": "Mobile",
     "mobilePlaceholder": "Enter mobile number",
     "email": "Email",
@@ -948,7 +948,7 @@
     "username": "Username",
     "usernamePlaceholder": "Login name, required",
     "nicknameCreatePlaceholder": "Optional, defaults to username",
-    "avatarCreatePlaceholder": "Optional, http(s) URL",
+    "avatarCreatePlaceholder": "Upload avatar",
     "optional": "Optional",
     "remark": "Notes",
     "rolesOptional": "Roles (optional)",

web/messages/zh-CN.json

@@ -926,7 +926,7 @@
     "emptyRows": "没有匹配的用户数据",
     "nicknameRequired": "昵称不能为空",
     "usernameRequired": "用户名不能为空",
-    "avatarInvalid": "头像地址必须是 http 或 https 链接",
+    "avatarInvalid": "头像不合法",
     "mobileInvalid": "手机号格式不正确",
     "emailInvalid": "邮箱格式不正确",
     "editTitle": "修改用户",
@@ -934,8 +934,8 @@
     "loading": "加载中...",
     "nickname": "昵称",
     "nicknamePlaceholder": "请输入昵称",
-    "avatar": "头像地址",
-    "avatarPlaceholder": "请输入头像 URL",
+    "avatar": "头像",
+    "avatarPlaceholder": "上传头像",
     "mobile": "手机号",
     "mobilePlaceholder": "请输入手机号",
     "email": "邮箱",
@@ -948,7 +948,7 @@
     "username": "用户名",
     "usernamePlaceholder": "登录名，必填",
     "nicknameCreatePlaceholder": "可选，默认同用户名",
-    "avatarCreatePlaceholder": "可选，http(s) 链接",
+    "avatarCreatePlaceholder": "上传头像",
     "optional": "可选",
     "remark": "备注",
     "rolesOptional": "角色（可选）",