样式修改

frontend-web/src/open-canvas/components/ai-writing/AIWritingForm.tsx

@@ -29,12 +29,17 @@ interface ModelOption {
 }
 
 const INPUT_CLASS =
-  'flex h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-xs shadow-sm ' +
+  'flex h-12 w-full rounded-xl border border-[#e8dedd] bg-white px-4 py-2 text-sm shadow-sm ' +
   'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ' +
   'focus-visible:ring-ring disabled:opacity-50';
 
 const DEFAULT_KEYWORD_COUNT = 6;
 const DEFAULT_AUDIENCE = '普通读者';
+const MAX_INTENT_LENGTH = 500;
+
+const FIELD_LABEL_CLASS = 'text-[16px] font-semibold leading-none text-[#222]';
+const FIELD_TRIGGER_CLASS =
+  'h-12 w-full rounded-xl border-[#e8dedd] bg-white text-sm shadow-sm';
 
 export function AIWritingForm({
   onSubmit,
@@ -136,60 +141,102 @@ export function AIWritingForm({
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-3 px-4 py-4">
-      <div className="space-y-1.5">
-        <label className="text-xs font-medium text-muted-foreground">写作意图</label>
-        <Textarea
-          placeholder="描述你想写的文章，例如：写一篇分析今年 AI 大模型发展趋势的文章，重点关注国内企业的布局…"
-          value={intent}
-          onChange={(e) => setIntent(e.target.value)}
-          disabled={disabled}
-          rows={4}
-          className="resize-none text-sm"
-        />
-      </div>
+    <form onSubmit={handleSubmit} className="space-y-4 px-4 py-4">
+      <div className="rounded-2xl border border-[#ebe3e2] bg-[#fcf8f8] p-4">
+        <div className="flex items-center gap-2 border-b border-[#ece5e4] pb-3">
+          <PenLine className="size-4 text-[#8b6f6f]" />
+          <h3 className="text-[18px] font-semibold leading-none text-[#2f2f2f]">写作配置选项</h3>
+        </div>
 
-      <div className="grid grid-cols-2 gap-2">
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium text-muted-foreground">文章类型</label>
+        <div className="mt-4 space-y-2">
+          <div className="flex items-center justify-between">
+            <label className={FIELD_LABEL_CLASS}>写作意图</label>
+            <span className="text-sm text-muted-foreground">
+              {intent.length} / {MAX_INTENT_LENGTH} 字
+            </span>
+          </div>
+          <Textarea
+            placeholder="描述你想写的文章，例如：写一篇分析今年 AI 大模型发展趋势的文章，重点关注国内企业的布局..."
+            value={intent}
+            onChange={(e) => setIntent(e.target.value)}
+            disabled={disabled}
+            rows={5}
+            maxLength={MAX_INTENT_LENGTH}
+            className="resize-none rounded-2xl border-[#e8dedd] bg-white px-4 py-3 text-sm leading-6 shadow-sm"
+          />
+        </div>
+
+        <div className="mt-4 grid grid-cols-2 gap-4">
+          <div className="min-w-0 space-y-2">
+            <label className={FIELD_LABEL_CLASS}>文章类型</label>
+            <Select
+              value={articleType}
+              onValueChange={handleArticleTypeChange}
+              disabled={disabled || typesLoading}
+            >
+              <SelectTrigger className={FIELD_TRIGGER_CLASS}>
+                <SelectValue placeholder={typesLoading ? '加载中…' : '选择类型'} />
+              </SelectTrigger>
+              <SelectContent>
+                {articleTypes.map((t) => (
+                  <SelectItem key={t.key} value={t.key} className="text-sm">
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="min-w-0 space-y-2">
+            <label className={FIELD_LABEL_CLASS}>目标字数</label>
+            <input
+              type="number"
+              min={100}
+              step={100}
+              className={INPUT_CLASS}
+              placeholder="800"
+              value={wordCountInput}
+              onChange={(e) => setWordCountInput(e.target.value)}
+              onBlur={handleWordCountBlur}
+              disabled={disabled}
+            />
+          </div>
+        </div>
+
+        <div className="mt-4 space-y-2">
+          <label className={FIELD_LABEL_CLASS}>写作模型</label>
           <Select
-            value={articleType}
-            onValueChange={handleArticleTypeChange}
-            disabled={disabled || typesLoading}
+            value={modelName}
+            onValueChange={setModelName}
+            disabled={disabled || models.length === 0}
           >
-            <SelectTrigger className="h-8 text-xs">
-              <SelectValue placeholder={typesLoading ? '加载中…' : '选择类型'} />
+            <SelectTrigger className={FIELD_TRIGGER_CLASS}>
+              <SelectValue placeholder={models.length > 0 ? '选择模型…' : '模型加载中…'} />
             </SelectTrigger>
             <SelectContent>
-              {articleTypes.map((t) => (
-                <SelectItem key={t.key} value={t.key} className="text-xs">
-                  {t.label}
+              {models.map((m) => (
+                <SelectItem key={m.name} value={m.name} className="text-sm">
+                  {m.displayName}
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
         </div>
 
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium text-muted-foreground">目标字数（字）</label>
-          <input
-            type="number"
-            min={100}
-            step={100}
-            className={INPUT_CLASS}
-            placeholder="800"
-            value={wordCountInput}
-            onChange={(e) => setWordCountInput(e.target.value)}
-            onBlur={handleWordCountBlur}
-            disabled={disabled}
-          />
-        </div>
+        <Button
+          type="submit"
+          disabled={disabled || !intent.trim()}
+          className="mt-4 h-12 w-full gap-2 rounded-2xl text-base font-semibold"
+        >
+          <PenLine className="size-4" />
+          开始 AI 写作
+        </Button>
       </div>
 
       {!hideAdvancedFields && (
         <>
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-muted-foreground">检索关键词数量（1~10）</label>
+          <div className="space-y-2">
+            <label className="text-sm font-semibold text-foreground">检索关键词数量（1~10）</label>
             <input
               type="number"
               min={1}
@@ -202,30 +249,30 @@ export function AIWritingForm({
               onBlur={handleKeywordCountBlur}
               disabled={disabled}
             />
-            <p className="text-[11px] text-muted-foreground/70">
+            <p className="text-xs text-muted-foreground/80">
               素材收集专家用几个关键词检索，越多素材越全面但耗时更长。
             </p>
           </div>
 
-          <div className="flex items-start gap-2 rounded-md border bg-muted/20 px-3 py-2">
+          <div className="flex items-start gap-2 rounded-xl border border-[#e8dedd] bg-[#f9f5f5] px-3 py-3">
             <input
               type="checkbox"
               id="strict-mode"
               checked={strictMode}
               onChange={(e) => setStrictMode(e.target.checked)}
               disabled={disabled}
-              className="mt-0.5 size-3.5 shrink-0 accent-primary cursor-pointer"
+              className="mt-0.5 size-3.5 shrink-0 cursor-pointer accent-primary"
             />
             <label htmlFor="strict-mode" className="cursor-pointer select-none">
-              <span className="text-xs font-medium text-foreground/80">严格依据素材写作</span>
-              <p className="text-[11px] text-muted-foreground/70 mt-0.5 leading-relaxed">
+              <span className="text-sm font-medium text-foreground/90">严格依据素材写作</span>
+              <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground/80">
                 勾选后作家只依据检索素材写作，素材不足以支撑某章节时会暂停询问你；不勾选则可结合通用知识补充论述。
               </p>
             </label>
           </div>
 
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-muted-foreground">目标读者</label>
+          <div className="space-y-2">
+            <label className="text-sm font-semibold text-foreground">目标读者</label>
             <input
               type="text"
               className={INPUT_CLASS}
@@ -238,32 +285,6 @@ export function AIWritingForm({
         </>
       )}
 
-      {models.length > 0 && (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium text-muted-foreground">写作模型</label>
-          <Select
-            value={modelName}
-            onValueChange={setModelName}
-            disabled={disabled}
-          >
-            <SelectTrigger className="h-8 text-xs">
-              <SelectValue placeholder="选择模型…" />
-            </SelectTrigger>
-            <SelectContent>
-              {models.map((m) => (
-                <SelectItem key={m.name} value={m.name} className="text-xs">
-                  {m.displayName}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-
-      <Button type="submit" disabled={disabled || !intent.trim()} className="w-full h-8 text-xs gap-1.5">
-        <PenLine className="size-3.5" />
-        开始 AI 写作
-      </Button>
     </form>
   );
 }