From 2dc4ff5980a29b7f2b182d9198d442170a6e5c5a Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Mon, 27 Apr 2026 11:57:40 +0800
Subject: [PATCH] refactor channel form layout and improve field labeling for
 better clarity

---
 .../dashboard/channels/_components/edit.tsx   | 194 +++++++++---------
 1 file changed, 102 insertions(+), 92 deletions(-)

diff --git a/web/app/dashboard/channels/_components/edit.tsx b/web/app/dashboard/channels/_components/edit.tsx
index a610829..4aefcd0 100644
--- a/web/app/dashboard/channels/_components/edit.tsx
+++ b/web/app/dashboard/channels/_components/edit.tsx
@@ -344,8 +344,8 @@ function ChannelFormBody({
           <div className="text-muted-foreground">加载中...</div>
         </div>
       ) : (
-        <form id={formId} onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-1">
+        <form id={formId} onSubmit={handleSubmit(onFormSubmit)} className="space-y-5">
+          <div className="grid grid-cols-1 gap-4">
             <Field data-invalid={!!errors.name}>
               <FieldLabel htmlFor="channel-name">渠道名称</FieldLabel>
               <FieldContent>
@@ -354,27 +354,6 @@ function ChannelFormBody({
               </FieldContent>
             </Field>
 
-            <Field data-invalid={!!errors.channelType}>
-              <FieldLabel>渠道类型</FieldLabel>
-              <FieldContent>
-                <Controller
-                  control={control}
-                  name="channelType"
-                  render={({ field }) => (
-                    <OptionCombobox
-                      value={field.value}
-                      options={[...channelTypeOptions]}
-                      placeholder="请选择渠道类型"
-                      searchPlaceholder="搜索渠道类型"
-                      emptyText="未找到渠道类型"
-                      onChange={field.onChange}
-                    />
-                  )}
-                />
-                <FieldError errors={[errors.channelType]} />
-              </FieldContent>
-            </Field>
-
             <Field data-invalid={!!errors.aiAgentId}>
               <FieldLabel>接待 Agent</FieldLabel>
               <FieldContent>
@@ -396,6 +375,38 @@ function ChannelFormBody({
               </FieldContent>
             </Field>
 
+            <Field data-invalid={!!errors.channelType}>
+              <FieldLabel>接入渠道</FieldLabel>
+              <FieldContent>
+                <Controller
+                  control={control}
+                  name="channelType"
+                  render={({ field }) => (
+                    <OptionCombobox
+                      value={field.value}
+                      options={[...channelTypeOptions]}
+                      placeholder="请选择接入渠道"
+                      searchPlaceholder="搜索接入渠道"
+                      emptyText="未找到接入渠道"
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+                <FieldError errors={[errors.channelType]} />
+              </FieldContent>
+            </Field>
+          </div>
+
+          <div className="space-y-4 rounded-md border p-4">
+            <div>
+              <div className="text-sm font-medium">渠道配置</div>
+              <div className="text-xs text-muted-foreground">
+                {channelType === "wxwork_kf"
+                  ? "配置企业微信客服账号，用于匹配回调消息和对外发送消息。"
+                  : "配置 Web 站点客服窗口的展示参数。"}
+              </div>
+            </div>
+
             {channelType === "wxwork_kf" ? (
               <Field data-invalid={!!errors.openKfId}>
                 <FieldLabel>企业微信客服账号</FieldLabel>
@@ -423,77 +434,76 @@ function ChannelFormBody({
                 </FieldContent>
               </Field>
             ) : null}
+
+            {channelType === "web" ? (
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <Field data-invalid={!!errors.widgetTitle}>
+                  <FieldLabel htmlFor="channel-widget-title">窗口标题</FieldLabel>
+                  <FieldContent>
+                    <Input id="channel-widget-title" {...register("widgetTitle")} />
+                    <FieldError errors={[errors.widgetTitle]} />
+                  </FieldContent>
+                </Field>
+
+                <Field data-invalid={!!errors.widgetSubtitle}>
+                  <FieldLabel htmlFor="channel-widget-subtitle">窗口副标题</FieldLabel>
+                  <FieldContent>
+                    <Input
+                      id="channel-widget-subtitle"
+                      {...register("widgetSubtitle")}
+                    />
+                    <FieldError errors={[errors.widgetSubtitle]} />
+                  </FieldContent>
+                </Field>
+
+                <Field data-invalid={!!errors.widgetThemeColor}>
+                  <FieldLabel htmlFor="channel-widget-theme-color">主题色</FieldLabel>
+                  <FieldContent>
+                    <Input
+                      id="channel-widget-theme-color"
+                      placeholder="#2563eb"
+                      {...register("widgetThemeColor")}
+                    />
+                    <FieldError errors={[errors.widgetThemeColor]} />
+                  </FieldContent>
+                </Field>
+
+                <Field data-invalid={!!errors.widgetPosition}>
+                  <FieldLabel>挂载位置</FieldLabel>
+                  <FieldContent>
+                    <Controller
+                      control={control}
+                      name="widgetPosition"
+                      render={({ field }) => (
+                        <OptionCombobox
+                          value={field.value}
+                          options={[...widgetPositionOptions]}
+                          placeholder="请选择挂载位置"
+                          searchPlaceholder="搜索挂载位置"
+                          emptyText="未找到挂载位置"
+                          onChange={field.onChange}
+                        />
+                      )}
+                    />
+                    <FieldError errors={[errors.widgetPosition]} />
+                  </FieldContent>
+                </Field>
+
+                <Field data-invalid={!!errors.widgetWidth}>
+                  <FieldLabel htmlFor="channel-widget-width">窗口宽度</FieldLabel>
+                  <FieldContent>
+                    <Input
+                      id="channel-widget-width"
+                      placeholder="380px"
+                      {...register("widgetWidth")}
+                    />
+                    <FieldError errors={[errors.widgetWidth]} />
+                  </FieldContent>
+                </Field>
+              </div>
+            ) : null}
           </div>
 
-          {channelType === "web" ? (
-            <div className="grid grid-cols-1 gap-4 rounded-md border p-4 sm:grid-cols-2">
-              <Field data-invalid={!!errors.widgetTitle}>
-                <FieldLabel htmlFor="channel-widget-title">窗口标题</FieldLabel>
-                <FieldContent>
-                  <Input id="channel-widget-title" {...register("widgetTitle")} />
-                  <FieldError errors={[errors.widgetTitle]} />
-                </FieldContent>
-              </Field>
-
-              <Field data-invalid={!!errors.widgetSubtitle}>
-                <FieldLabel htmlFor="channel-widget-subtitle">窗口副标题</FieldLabel>
-                <FieldContent>
-                  <Input
-                    id="channel-widget-subtitle"
-                    {...register("widgetSubtitle")}
-                  />
-                  <FieldError errors={[errors.widgetSubtitle]} />
-                </FieldContent>
-              </Field>
-
-              <Field data-invalid={!!errors.widgetThemeColor}>
-                <FieldLabel htmlFor="channel-widget-theme-color">主题色</FieldLabel>
-                <FieldContent>
-                  <Input
-                    id="channel-widget-theme-color"
-                    placeholder="#2563eb"
-                    {...register("widgetThemeColor")}
-                  />
-                  <FieldError errors={[errors.widgetThemeColor]} />
-                </FieldContent>
-              </Field>
-
-              <Field data-invalid={!!errors.widgetPosition}>
-                <FieldLabel>挂载位置</FieldLabel>
-                <FieldContent>
-                  <Controller
-                    control={control}
-                    name="widgetPosition"
-                    render={({ field }) => (
-                      <OptionCombobox
-                        value={field.value}
-                        options={[...widgetPositionOptions]}
-                        placeholder="请选择挂载位置"
-                        searchPlaceholder="搜索挂载位置"
-                        emptyText="未找到挂载位置"
-                        onChange={field.onChange}
-                      />
-                    )}
-                  />
-                  <FieldError errors={[errors.widgetPosition]} />
-                </FieldContent>
-              </Field>
-
-              <Field data-invalid={!!errors.widgetWidth}>
-                <FieldLabel htmlFor="channel-widget-width">窗口宽度</FieldLabel>
-                <FieldContent>
-                  <Input
-                    id="channel-widget-width"
-                    placeholder="380px"
-                    {...register("widgetWidth")}
-                  />
-                  <FieldError errors={[errors.widgetWidth]} />
-                </FieldContent>
-              </Field>
-
-            </div>
-          ) : null}
-
           <Field data-invalid={!!errors.remark}>
             <FieldLabel htmlFor="channel-remark">备注</FieldLabel>
             <FieldContent>