From e497f26d583fd526a59a35e965606e1c5b507518 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Tue, 21 Jul 2026 08:42:01 +0800
Subject: [PATCH] feat(admin-web): add paste-text source mode to imitation
 create page

- Add a source-method toggle (article URL / pasted text) with per-mode
  hints, a 24,000-character counter, and mode-aware submit validation
- Validate URLs client-side (http/https only) with a dedicated error
  message; only the active mode's field is sent to the API
- Keep URL mode selected when arriving with source_url query params
- Refresh the page layout and update zh-CN/en-US copy for both modes
---
 apps/admin-web/src/i18n/messages/en-US.ts     |  17 +-
 apps/admin-web/src/i18n/messages/zh-CN.ts     |  16 +-
 .../src/views/ImitationGenerateView.vue       | 874 +++++++++++++-----
 3 files changed, 665 insertions(+), 242 deletions(-)

diff --git a/apps/admin-web/src/i18n/messages/en-US.ts b/apps/admin-web/src/i18n/messages/en-US.ts
index f89735a..7506817 100644
--- a/apps/admin-web/src/i18n/messages/en-US.ts
+++ b/apps/admin-web/src/i18n/messages/en-US.ts
@@ -224,7 +224,7 @@ const enUS = {
     },
     imitationCreate: {
       title: 'Imitation Create',
-      description: 'Extract an article from a URL, then generate a new article in one step.',
+      description: 'Extract from an article URL first, or paste the source text directly.',
     },
     media: {
       title: 'Media Management',
@@ -854,10 +854,18 @@ const enUS = {
     create: {
       title: 'Create rewritten article',
       subtitle:
-        'The backend fetches the source article first, then generates a new original article from your settings.',
+        'Extract from an article URL or paste the source text to generate a new article for the current brand.',
       sourceSection: 'Source article',
       settingsSection: 'Rewrite settings',
+      settingsHint: 'Set the brand context, reference sources, and writing constraints.',
+      sourceMethod: 'Source method',
+      sourcePriority: 'URL is recommended',
+      sourceURLMode: 'Article URL',
+      sourceContentMode: 'Paste text',
+      sourceURLModeHint: 'The page title and article body will be extracted automatically.',
+      sourceContentModeHint: 'Use text from restricted pages or an existing document.',
       sourceURL: 'Article URL',
+      sourceContent: 'Source text',
       sourceTitle: 'Source title',
       language: 'Article language',
       brandName: 'Current company',
@@ -874,6 +882,9 @@ const enUS = {
       knowledgeBaseHint:
         'Selected groups are retrieved in the backend and passed to generation as reference context.',
       sourceURLPlaceholder: 'https://example.com/article',
+      sourceContentPlaceholder:
+        'Paste the complete source article here, including relevant headings and data.',
+      sourceContentCount: '{count} / 24,000 characters',
       sourceTitlePlaceholder: 'Optional. Citation titles are prefilled automatically.',
       brandNamePlaceholder: 'Select the current company in the top bar first.',
       regionPlaceholder: 'For example: Shanghai, East China, nationwide, North America',
@@ -885,6 +896,8 @@ const enUS = {
         'Add channel, structure, title style, or industry-specific instructions.',
       queued: 'Rewrite task submitted and queued.',
       sourceURLRequired: 'Enter the source article URL first.',
+      sourceURLInvalid: 'Enter a valid link beginning with http:// or https://.',
+      sourceContentRequired: 'Paste the source article text first.',
       brandNameRequired: 'Select the current company in the top bar first.',
       submitError: 'Failed to submit rewrite task.',
       backToList: 'Back to rewrites',
diff --git a/apps/admin-web/src/i18n/messages/zh-CN.ts b/apps/admin-web/src/i18n/messages/zh-CN.ts
index 78cfd40..61de5bc 100644
--- a/apps/admin-web/src/i18n/messages/zh-CN.ts
+++ b/apps/admin-web/src/i18n/messages/zh-CN.ts
@@ -228,7 +228,7 @@ const zhCN = {
     },
     imitationCreate: {
       title: '仿写创作',
-      description: '从文章链接提取内容后，一步生成适配当前场景的新文章。',
+      description: '优先从文章链接提取内容，也可直接粘贴正文作为仿写来源。',
     },
     media: {
       title: '媒体管理',
@@ -831,10 +831,18 @@ const zhCN = {
     },
     create: {
       title: '创建仿写文章',
-      subtitle: '后台会先抓取源文章内容，再按下方设定生成一篇新的原创表达文章。',
+      subtitle: '从文章 URL 自动提取，或粘贴正文，生成符合当前品牌场景的新文章。',
       sourceSection: '来源文章',
       settingsSection: '仿写设置',
+      settingsHint: '设置品牌、增强信息与表达边界，未填写项将使用默认生成策略。',
+      sourceMethod: '来源方式',
+      sourcePriority: '推荐优先使用 URL',
+      sourceURLMode: '文章 URL',
+      sourceContentMode: '粘贴正文',
+      sourceURLModeHint: '系统将自动解析网页中的标题与正文内容',
+      sourceContentModeHint: '适用于无法直接访问的网页或已有文档内容',
       sourceURL: '文章 URL',
+      sourceContent: '原文正文',
       sourceTitle: '来源标题',
       language: '文章语言',
       brandName: '当前公司',
@@ -850,6 +858,8 @@ const zhCN = {
       knowledgeBaseHint:
         '选择后，后台会检索相关知识片段并作为生成参考，未选择则只基于来源文章和当前设置生成。',
       sourceURLPlaceholder: 'https://example.com/article',
+      sourceContentPlaceholder: '在此粘贴完整原文，保留必要的标题、段落与数据即可',
+      sourceContentCount: '已输入 {count} / 24,000 字',
       sourceTitlePlaceholder: '可选，引用来源标题会自动带入',
       brandNamePlaceholder: '请先在顶部选择当前公司',
       regionPlaceholder: '例如：上海、华东、全国、北美市场',
@@ -859,6 +869,8 @@ const zhCN = {
       extraRequirementsPlaceholder: '补充行业、渠道、结构、标题风格等自由要求',
       queued: '仿写任务已提交，正在排队生成',
       sourceURLRequired: '请先填写来源文章 URL',
+      sourceURLInvalid: '请输入以 http:// 或 https:// 开头的有效链接',
+      sourceContentRequired: '请先粘贴需要仿写的原文正文',
       brandNameRequired: '请先在顶部选择当前公司',
       submitError: '仿写任务提交失败',
       backToList: '返回仿写列表',
diff --git a/apps/admin-web/src/views/ImitationGenerateView.vue b/apps/admin-web/src/views/ImitationGenerateView.vue
index 18dec9f..9cd8341 100644
--- a/apps/admin-web/src/views/ImitationGenerateView.vue
+++ b/apps/admin-web/src/views/ImitationGenerateView.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import { LeftOutlined, LinkOutlined } from '@ant-design/icons-vue'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import {
+  DatabaseOutlined,
+  FileTextOutlined,
+  GlobalOutlined,
+  LeftOutlined,
+  LinkOutlined,
+  SendOutlined,
+} from '@ant-design/icons-vue'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { message } from 'ant-design-vue'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -12,14 +19,22 @@ import { formatError } from '@/lib/errors'
 import { usePaginatedBrandQuestions } from '@/lib/use-paginated-brand-questions'
 import { useCompanyStore } from '@/stores/company'
 
+type SourceMode = 'url' | 'content'
+
+const MAX_SOURCE_CONTENT_LENGTH = 24000
+
 const route = useRoute()
 const router = useRouter()
 const queryClient = useQueryClient()
 const { t } = useI18n()
 const companyStore = useCompanyStore()
 
+const sourceMode = ref<SourceMode>('url')
+const sourceURLTouched = ref(false)
+
 const form = reactive({
   source_url: '',
+  source_content: '',
   source_title: '',
   locale: 'zh-CN',
   region: '',
@@ -37,6 +52,11 @@ const currentBrandName = computed(() => selectedBrand.value?.name?.trim() || '')
 
 const questionList = usePaginatedBrandQuestions(selectedBrandId)
 
+const sourceModeOptions = computed(() => [
+  { label: t('imitation.create.sourceURLMode'), value: 'url' },
+  { label: t('imitation.create.sourceContentMode'), value: 'content' },
+])
+
 const keywordOptions = computed(() =>
   questionList.items.value.map((item) => ({
     label: item.question_text,
@@ -44,9 +64,19 @@ const keywordOptions = computed(() =>
   })),
 )
 
+const sourceContentCount = computed(() => Array.from(form.source_content).length)
+const sourceURLInvalid = computed(
+  () =>
+    sourceURLTouched.value && form.source_url.trim().length > 0 && !isValidHTTPURL(form.source_url),
+)
+const activeSourceReady = computed(() =>
+  sourceMode.value === 'url'
+    ? form.source_url.trim().length > 0 && isValidHTTPURL(form.source_url)
+    : form.source_content.trim().length > 0,
+)
 const canSubmit = computed(
   () =>
-    form.source_url.trim().length > 0 &&
+    activeSourceReady.value &&
     currentBrandName.value.length > 0 &&
     !generateMutation.isPending.value,
 )
@@ -54,7 +84,8 @@ const canSubmit = computed(
 const generateMutation = useMutation({
   mutationFn: () =>
     articlesApi.generateImitation({
-      source_url: form.source_url.trim(),
+      source_url: sourceMode.value === 'url' ? form.source_url.trim() : undefined,
+      source_content: sourceMode.value === 'content' ? form.source_content.trim() : undefined,
       source_title: form.source_title.trim(),
       locale: form.locale,
       brand_name: currentBrandName.value,
@@ -83,24 +114,51 @@ const generateMutation = useMutation({
 watch(
   () => [route.query.source_url, route.query.source_title],
   ([sourceURL, sourceTitle]) => {
-    form.source_url = normalizeQueryValue(sourceURL)
+    const normalizedURL = normalizeQueryValue(sourceURL)
+    form.source_url = normalizedURL
     form.source_title = normalizeQueryValue(sourceTitle)
+    if (normalizedURL) {
+      sourceMode.value = 'url'
+    }
   },
   { immediate: true },
 )
 
+watch(sourceMode, () => {
+  sourceURLTouched.value = false
+})
+
 function normalizeQueryValue(value: unknown): string {
   const raw = Array.isArray(value) ? value[0] : value
   return String(raw ?? '').trim()
 }
 
+function isValidHTTPURL(value: string): boolean {
+  try {
+    const parsed = new URL(value.trim())
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
 function goBack(): void {
   void router.push({ name: 'articles-imitations' })
 }
 
 function submit(): void {
-  if (!form.source_url.trim()) {
-    message.warning(t('imitation.create.sourceURLRequired'))
+  if (sourceMode.value === 'url') {
+    sourceURLTouched.value = true
+    if (!form.source_url.trim()) {
+      message.warning(t('imitation.create.sourceURLRequired'))
+      return
+    }
+    if (!isValidHTTPURL(form.source_url)) {
+      message.warning(t('imitation.create.sourceURLInvalid'))
+      return
+    }
+  } else if (!form.source_content.trim()) {
+    message.warning(t('imitation.create.sourceContentRequired'))
     return
   }
   if (!currentBrandName.value) {
@@ -114,110 +172,167 @@ function submit(): void {
 <template>
   <div class="imitation-generate-page">
     <header class="imitation-generate-page__header">
-      <div class="imitation-generate-page__header-left">
-        <a-button type="text" shape="circle" @click="goBack">
-          <template #icon><LeftOutlined /></template>
-        </a-button>
+      <div class="imitation-generate-page__header-inner">
+        <a-tooltip :title="t('imitation.create.backToList')">
+          <a-button
+            type="text"
+            shape="circle"
+            class="imitation-generate-page__back"
+            :aria-label="t('imitation.create.backToList')"
+            @click="goBack"
+          >
+            <template #icon><LeftOutlined /></template>
+          </a-button>
+        </a-tooltip>
         <div class="imitation-generate-page__title-box">
-          <h2>{{ t('imitation.create.title') }}</h2>
+          <h1>{{ t('imitation.create.title') }}</h1>
           <p>{{ t('imitation.create.subtitle') }}</p>
         </div>
       </div>
     </header>
 
     <main class="imitation-generate-page__main">
-      <section class="imitation-generate-page__step">
-        <div class="imitation-generate-page__step-line">
-          <span>1</span>
-          <strong>{{ t('imitation.create.settingsSection') }}</strong>
-        </div>
-      </section>
-
       <section class="imitation-generate-page__section">
         <div class="imitation-generate-page__section-head">
+          <span class="imitation-generate-page__section-index">01</span>
           <div>
-            <h3>{{ t('imitation.create.sourceSection') }}</h3>
+            <h2>{{ t('imitation.create.sourceSection') }}</h2>
             <p>{{ t('route.imitationCreate.description') }}</p>
           </div>
         </div>
 
-        <div class="imitation-generate-page__field-grid">
-          <div class="imitation-generate-page__field imitation-generate-page__field--wide">
-            <label class="required-asterisk">{{ t('imitation.create.sourceURL') }}</label>
-            <a-input
-              v-model:value="form.source_url"
-              :placeholder="t('imitation.create.sourceURLPlaceholder')"
-            >
-              <template #prefix><LinkOutlined /></template>
-            </a-input>
-          </div>
-
-          <div class="imitation-generate-page__field">
-            <label>{{ t('imitation.create.sourceTitle') }}</label>
-            <a-input
-              v-model:value="form.source_title"
-              :placeholder="t('imitation.create.sourceTitlePlaceholder')"
+        <div class="imitation-generate-page__source-panel">
+          <div class="imitation-generate-page__source-toolbar">
+            <div>
+              <span class="imitation-generate-page__eyebrow">
+                {{ t('imitation.create.sourceMethod') }}
+              </span>
+              <span class="imitation-generate-page__source-priority">
+                {{ t('imitation.create.sourcePriority') }}
+              </span>
+            </div>
+            <a-segmented
+              v-model:value="sourceMode"
+              :options="sourceModeOptions"
+              :disabled="generateMutation.isPending.value"
+              class="imitation-generate-page__source-switch"
             />
           </div>
 
-          <div class="imitation-generate-page__field">
-            <label>{{ t('imitation.create.language') }}</label>
-            <a-select
-              v-model:value="form.locale"
-              :options="[
-                { label: t('templates.wizard.localeOptions.zh'), value: 'zh-CN' },
-                { label: t('templates.wizard.localeOptions.en'), value: 'en-US' },
-              ]"
-            />
+          <div v-if="sourceMode === 'url'" class="imitation-generate-page__source-input">
+            <div class="imitation-generate-page__mode-title">
+              <LinkOutlined />
+              <span>{{ t('imitation.create.sourceURLModeHint') }}</span>
+            </div>
+            <div class="imitation-generate-page__field">
+              <label class="required-asterisk">{{ t('imitation.create.sourceURL') }}</label>
+              <a-input
+                v-model:value="form.source_url"
+                size="large"
+                :status="sourceURLInvalid ? 'error' : undefined"
+                :disabled="generateMutation.isPending.value"
+                :placeholder="t('imitation.create.sourceURLPlaceholder')"
+                @blur="sourceURLTouched = true"
+              >
+                <template #prefix><LinkOutlined /></template>
+              </a-input>
+              <p v-if="sourceURLInvalid" class="imitation-generate-page__field-error">
+                {{ t('imitation.create.sourceURLInvalid') }}
+              </p>
+            </div>
+          </div>
+
+          <div v-else class="imitation-generate-page__source-input">
+            <div class="imitation-generate-page__mode-title">
+              <FileTextOutlined />
+              <span>{{ t('imitation.create.sourceContentModeHint') }}</span>
+            </div>
+            <div class="imitation-generate-page__field">
+              <div class="imitation-generate-page__label-row">
+                <label class="required-asterisk">{{ t('imitation.create.sourceContent') }}</label>
+                <span class="imitation-generate-page__count">
+                  {{ t('imitation.create.sourceContentCount', { count: sourceContentCount }) }}
+                </span>
+              </div>
+              <a-textarea
+                v-model:value="form.source_content"
+                :rows="10"
+                :maxlength="MAX_SOURCE_CONTENT_LENGTH"
+                :disabled="generateMutation.isPending.value"
+                :placeholder="t('imitation.create.sourceContentPlaceholder')"
+                class="imitation-generate-page__source-textarea"
+              />
+            </div>
+          </div>
+
+          <div class="imitation-generate-page__source-meta">
+            <div class="imitation-generate-page__field">
+              <label>{{ t('imitation.create.sourceTitle') }}</label>
+              <a-input
+                v-model:value="form.source_title"
+                :disabled="generateMutation.isPending.value"
+                :placeholder="t('imitation.create.sourceTitlePlaceholder')"
+              />
+            </div>
+
+            <div class="imitation-generate-page__field">
+              <label>{{ t('imitation.create.language') }}</label>
+              <a-select
+                v-model:value="form.locale"
+                :disabled="generateMutation.isPending.value"
+                :options="[
+                  { label: t('templates.wizard.localeOptions.zh'), value: 'zh-CN' },
+                  { label: t('templates.wizard.localeOptions.en'), value: 'en-US' },
+                ]"
+              />
+            </div>
           </div>
         </div>
       </section>
 
-      <section class="imitation-generate-page__section">
+      <section class="imitation-generate-page__section imitation-generate-page__section--last">
         <div class="imitation-generate-page__section-head">
+          <span class="imitation-generate-page__section-index">02</span>
           <div>
-            <h3>{{ t('imitation.create.settingsSection') }}</h3>
-            <p>{{ t('templates.wizard.hints.keyPoints') }}</p>
+            <h2>{{ t('imitation.create.settingsSection') }}</h2>
+            <p>{{ t('imitation.create.settingsHint') }}</p>
           </div>
         </div>
 
-        <div class="imitation-generate-page__capability-card">
-          <div class="imitation-generate-page__capability-row">
-            <div class="imitation-generate-page__capability-copy">
-              <div class="imitation-generate-page__capability-label">
-                {{ t('imitation.create.enableWebSearch') }}
-              </div>
-              <div class="imitation-generate-page__capability-hint">
-                {{ t('imitation.create.webSearchHint') }}
-              </div>
+        <div class="imitation-generate-page__enhancement-grid">
+          <div class="imitation-generate-page__enhancement-item">
+            <div class="imitation-generate-page__enhancement-icon"><GlobalOutlined /></div>
+            <div class="imitation-generate-page__enhancement-copy">
+              <strong>{{ t('imitation.create.enableWebSearch') }}</strong>
+              <p>{{ t('imitation.create.webSearchHint') }}</p>
             </div>
             <a-switch
               v-model:checked="form.enable_web_search"
-              :checked-children="t('common.yes')"
-              :un-checked-children="t('common.no')"
               :disabled="generateMutation.isPending.value"
             />
           </div>
 
-          <div class="imitation-generate-page__capability-knowledge">
-            <label class="imitation-generate-page__capability-label">
-              {{ t('imitation.create.knowledgeBase') }}
-            </label>
-            <KnowledgeGroupSelect
-              v-model="form.knowledge_group_ids"
-              :disabled="generateMutation.isPending.value"
-              :placeholder="t('imitation.create.knowledgeBasePlaceholder')"
-            />
-            <p class="imitation-generate-page__capability-hint">
-              {{ t('imitation.create.knowledgeBaseHint') }}
-            </p>
+          <div class="imitation-generate-page__enhancement-item">
+            <div class="imitation-generate-page__enhancement-icon"><DatabaseOutlined /></div>
+            <div class="imitation-generate-page__enhancement-copy">
+              <strong>{{ t('imitation.create.knowledgeBase') }}</strong>
+              <p>{{ t('imitation.create.knowledgeBaseHint') }}</p>
+              <KnowledgeGroupSelect
+                v-model="form.knowledge_group_ids"
+                :disabled="generateMutation.isPending.value"
+                :placeholder="t('imitation.create.knowledgeBasePlaceholder')"
+              />
+            </div>
           </div>
         </div>
 
         <div class="imitation-generate-page__field-grid">
           <div class="imitation-generate-page__field">
             <label class="required-asterisk">{{ t('imitation.create.brandName') }}</label>
-            <div class="current-brand-field">
+            <div
+              class="current-brand-field"
+              :class="{ 'current-brand-field--empty': !currentBrandName }"
+            >
               <strong>{{ currentBrandName || t('shell.currentCompanyPlaceholder') }}</strong>
               <span v-if="selectedBrand?.website">{{ selectedBrand.website }}</span>
             </div>
@@ -227,6 +342,7 @@ function submit(): void {
             <label>{{ t('imitation.create.region') }}</label>
             <a-input
               v-model:value="form.region"
+              :disabled="generateMutation.isPending.value"
               :placeholder="t('imitation.create.regionPlaceholder')"
             />
           </div>
@@ -237,9 +353,9 @@ function submit(): void {
               v-model:value="form.keywords"
               mode="tags"
               show-search
-              style="width: 100%"
               :filter-option="false"
               :loading="questionList.loading.value"
+              :disabled="generateMutation.isPending.value"
               :options="keywordOptions"
               :placeholder="t('imitation.create.keywordsPlaceholder')"
               @search="questionList.search"
@@ -252,6 +368,7 @@ function submit(): void {
             <a-textarea
               v-model:value="form.preserve_points"
               :rows="4"
+              :disabled="generateMutation.isPending.value"
               :placeholder="t('imitation.create.preservePointsPlaceholder')"
             />
           </div>
@@ -261,6 +378,7 @@ function submit(): void {
             <a-textarea
               v-model:value="form.avoid_points"
               :rows="4"
+              :disabled="generateMutation.isPending.value"
               :placeholder="t('imitation.create.avoidPointsPlaceholder')"
             />
           </div>
@@ -270,6 +388,7 @@ function submit(): void {
             <a-textarea
               v-model:value="form.extra_requirements"
               :rows="5"
+              :disabled="generateMutation.isPending.value"
               :placeholder="t('imitation.create.extraRequirementsPlaceholder')"
             />
           </div>
@@ -278,199 +397,245 @@ function submit(): void {
     </main>
 
     <footer class="imitation-generate-page__footer">
-      <a-button @click="goBack">{{ t('imitation.create.backToList') }}</a-button>
-      <a-button
-        type="primary"
-        :disabled="!canSubmit"
-        :loading="generateMutation.isPending.value"
-        @click="submit"
-      >
-        {{ t('imitation.actions.submit') }}
-      </a-button>
+      <div class="imitation-generate-page__footer-inner">
+        <div class="imitation-generate-page__footer-context">
+          <span>{{ t('imitation.create.brandName') }}</span>
+          <strong>{{ currentBrandName || t('shell.currentCompanyPlaceholder') }}</strong>
+        </div>
+        <div class="imitation-generate-page__footer-actions">
+          <a-button :disabled="generateMutation.isPending.value" @click="goBack">
+            {{ t('common.cancel') }}
+          </a-button>
+          <a-button
+            type="primary"
+            :disabled="!canSubmit"
+            :loading="generateMutation.isPending.value"
+            @click="submit"
+          >
+            <template #icon><SendOutlined /></template>
+            {{ t('imitation.actions.submit') }}
+          </a-button>
+        </div>
+      </div>
     </footer>
   </div>
 </template>
 
 <style scoped>
 .imitation-generate-page {
+  --imitation-accent: #146ef5;
+  --imitation-text: #172033;
+  --imitation-muted: #667085;
+  --imitation-line: #e7ebf0;
   display: flex;
-  min-height: calc(100vh - 120px);
+  min-height: calc(100dvh - 64px);
   flex-direction: column;
   background: #fff;
+  color: var(--imitation-text);
 }
 
 .imitation-generate-page__header {
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 32px;
-  border-bottom: 1px solid #edf2f7;
+  border-bottom: 1px solid var(--imitation-line);
   background: #fff;
 }
 
-.imitation-generate-page__header-left {
+.imitation-generate-page__header-inner,
+.imitation-generate-page__footer-inner {
   display: flex;
+  width: 100%;
+  max-width: 1184px;
+  margin: 0 auto;
+}
+
+.imitation-generate-page__header-inner {
   align-items: center;
-  gap: 16px;
+  gap: 14px;
+  padding: 22px 32px;
+}
+
+.imitation-generate-page__back {
+  flex: 0 0 auto;
+  color: #475467;
+  transition:
+    background-color 180ms ease,
+    color 180ms ease,
+    transform 180ms ease;
+}
+
+.imitation-generate-page__back:hover {
+  background: #f1f4f8;
+  color: var(--imitation-accent);
+}
+
+.imitation-generate-page__back:active {
+  transform: translateY(1px);
 }
 
 .imitation-generate-page__title-box {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+  min-width: 0;
 }
 
-.imitation-generate-page__title-box h2 {
+.imitation-generate-page__title-box h1 {
   margin: 0;
-  color: #111827;
-  font-size: 20px;
-  font-weight: 800;
+  color: #101828;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 30px;
+  letter-spacing: 0;
 }
 
 .imitation-generate-page__title-box p {
-  margin: 0;
-  color: #6d7c94;
+  max-width: 65ch;
+  margin: 4px 0 0;
+  color: var(--imitation-muted);
   font-size: 13px;
+  line-height: 20px;
 }
 
 .imitation-generate-page__main {
-  display: flex;
   width: 100%;
-  max-width: 1160px;
+  max-width: 1184px;
   flex: 1;
-  flex-direction: column;
   margin: 0 auto;
-  padding: 24px 32px 96px;
-}
-
-.imitation-generate-page__step {
-  padding-bottom: 24px;
-  border-bottom: 1px solid #edf2f7;
-}
-
-.imitation-generate-page__step-line {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  color: #111827;
-}
-
-.imitation-generate-page__step-line::before,
-.imitation-generate-page__step-line::after {
-  width: min(320px, 28vw);
-  height: 1px;
-  background: #dbe4ef;
-  content: '';
-}
-
-.imitation-generate-page__step-line span {
-  display: inline-flex;
-  width: 22px;
-  height: 22px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: #1677ff;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.imitation-generate-page__step-line strong {
-  font-size: 14px;
-  font-weight: 600;
+  padding: 0 32px 96px;
 }
 
 .imitation-generate-page__section {
-  padding: 32px 0;
-  border-bottom: 1px solid #edf2f7;
+  padding: 34px 0 38px;
+  border-bottom: 1px solid var(--imitation-line);
 }
 
-.imitation-generate-page__section:last-child {
-  border-bottom: none;
+.imitation-generate-page__section--last {
+  padding-bottom: 24px;
+  border-bottom: 0;
 }
 
 .imitation-generate-page__section-head {
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 24px;
+  gap: 14px;
+  margin-bottom: 22px;
 }
 
-.imitation-generate-page__section-head h3 {
-  display: flex;
+.imitation-generate-page__section-index {
+  display: inline-flex;
+  width: 30px;
+  height: 24px;
+  flex: 0 0 auto;
   align-items: center;
-  margin: 0;
-  color: #111827;
-  font-size: 16px;
-  font-weight: 800;
+  justify-content: center;
+  margin-top: 1px;
+  border-radius: 5px;
+  background: #edf4ff;
+  color: var(--imitation-accent);
+  font-size: 11px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
 }
 
-.imitation-generate-page__section-head h3::before {
-  display: inline-block;
-  width: 4px;
-  height: 16px;
-  margin-right: 12px;
-  border-radius: 2px;
-  background: #111827;
-  content: '';
+.imitation-generate-page__section-head h2 {
+  margin: 0;
+  color: #101828;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0;
 }
 
 .imitation-generate-page__section-head p {
-  margin: 6px 0 0 16px;
-  color: #667085;
+  max-width: 65ch;
+  margin: 4px 0 0;
+  color: var(--imitation-muted);
   font-size: 13px;
-  line-height: 1.7;
+  line-height: 20px;
+}
+
+.imitation-generate-page__source-panel {
+  overflow: hidden;
+  border: 1px solid #e2e7ed;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.imitation-generate-page__source-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e2e7ed;
+  background: #f4f6f9;
+}
+
+.imitation-generate-page__source-toolbar > div:first-child {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.imitation-generate-page__eyebrow {
+  color: #344054;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.imitation-generate-page__source-priority {
+  padding-left: 10px;
+  border-left: 1px solid #d0d5dd;
+  color: #7a8599;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.imitation-generate-page__source-switch {
+  flex: 0 0 auto;
+}
+
+.imitation-generate-page__source-switch :deep(.ant-segmented-item) {
+  min-width: 116px;
+  transition:
+    color 180ms ease,
+    background-color 180ms ease;
+}
+
+.imitation-generate-page__source-switch :deep(.ant-segmented-item-selected) {
+  color: var(--imitation-accent);
+  font-weight: 600;
+}
+
+.imitation-generate-page__source-input {
+  padding: 22px 20px 24px;
+}
+
+.imitation-generate-page__mode-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  color: #475467;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.imitation-generate-page__mode-title :deep(.anticon) {
+  color: var(--imitation-accent);
+}
+
+.imitation-generate-page__source-meta {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
+  gap: 18px;
+  padding: 20px;
+  border-top: 1px solid #e2e7ed;
+  background: #fff;
 }
 
 .imitation-generate-page__field-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
-}
-
-.imitation-generate-page__capability-card {
-  display: flex;
-  flex-direction: column;
   gap: 20px;
-  margin-bottom: 24px;
-  padding: 20px;
-  border: 1px solid #e6edf5;
-  border-radius: 8px;
-  background: #fafcff;
-}
-
-.imitation-generate-page__capability-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.imitation-generate-page__capability-copy {
-  min-width: 0;
-}
-
-.imitation-generate-page__capability-label {
-  display: block;
-  margin: 0 0 8px;
-  color: #111827;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.imitation-generate-page__capability-hint {
-  margin: 0;
-  color: #667085;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.imitation-generate-page__capability-knowledge {
-  min-width: 0;
+  margin-top: 24px;
 }
 
 .imitation-generate-page__field {
@@ -484,35 +649,149 @@ function submit(): void {
   grid-column: 1 / -1;
 }
 
-.imitation-generate-page__field > label {
+.imitation-generate-page__field label,
+.imitation-generate-page__label-row label {
   display: inline-flex;
   align-items: center;
-  margin-bottom: 8px;
-  color: #1f2937;
-  font-size: 15px;
-  font-weight: 700;
+  color: #344054;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
 }
 
-.imitation-generate-page__field > label::after {
-  content: '：';
+.imitation-generate-page__label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.imitation-generate-page__count {
+  color: #8a94a6;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.required-asterisk::before {
+  margin-right: 4px;
+  color: #d92d20;
+  content: '*';
+}
+
+.imitation-generate-page__field-error {
+  margin: -2px 0 0;
+  color: #d92d20;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.imitation-generate-page__source-textarea :deep(textarea) {
+  min-height: 220px;
+  resize: vertical;
+  line-height: 1.75;
+}
+
+.imitation-generate-page__field :deep(.ant-input),
+.imitation-generate-page__field :deep(.ant-input-affix-wrapper),
+.imitation-generate-page__field :deep(.ant-select-selector) {
+  border-color: #d7dce3;
+  border-radius: 6px;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.imitation-generate-page__field :deep(.ant-input:not(textarea)),
+.imitation-generate-page__field :deep(.ant-input-affix-wrapper),
+.imitation-generate-page__field :deep(.ant-select-single .ant-select-selector),
+.imitation-generate-page__field :deep(.ant-select-multiple .ant-select-selector) {
+  min-height: 40px;
+}
+
+.imitation-generate-page__field :deep(.ant-input-affix-wrapper-focused),
+.imitation-generate-page__field :deep(.ant-input:focus),
+.imitation-generate-page__field :deep(.ant-select-focused .ant-select-selector) {
+  border-color: var(--imitation-accent);
+  box-shadow: 0 0 0 3px rgba(20, 110, 245, 0.1);
+}
+
+.imitation-generate-page__enhancement-grid {
+  display: grid;
+  overflow: hidden;
+  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
+  border: 1px solid #e2e7ed;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.imitation-generate-page__enhancement-item {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 20px;
+}
+
+.imitation-generate-page__enhancement-item + .imitation-generate-page__enhancement-item {
+  border-left: 1px solid #e2e7ed;
+}
+
+.imitation-generate-page__enhancement-icon {
+  display: inline-flex;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d9e6fa;
+  border-radius: 7px;
+  background: #fff;
+  color: var(--imitation-accent);
+  font-size: 16px;
+}
+
+.imitation-generate-page__enhancement-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.imitation-generate-page__enhancement-copy strong {
+  display: block;
+  margin: 1px 0 4px;
+  color: #273142;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.imitation-generate-page__enhancement-copy p {
+  margin: 0 0 12px;
+  color: var(--imitation-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.imitation-generate-page__enhancement-item > :deep(.ant-switch) {
+  flex: 0 0 auto;
+  margin-top: 5px;
 }
 
 .current-brand-field {
   display: flex;
-  min-height: 32px;
+  min-height: 40px;
   flex-direction: column;
   justify-content: center;
-  gap: 2px;
+  gap: 1px;
   padding: 5px 11px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #d7dce3;
   border-radius: 6px;
-  background: #fafcff;
+  background: #f8fafc;
 }
 
 .current-brand-field strong {
   overflow: hidden;
-  color: #111827;
-  font-size: 14px;
+  color: #273142;
+  font-size: 13px;
   font-weight: 600;
   line-height: 20px;
   text-overflow: ellipsis;
@@ -521,43 +800,162 @@ function submit(): void {
 
 .current-brand-field span {
   overflow: hidden;
-  color: #667085;
-  font-size: 12px;
+  color: var(--imitation-muted);
+  font-size: 11px;
   line-height: 16px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.required-asterisk::before {
-  margin-right: 4px;
-  color: #ff4d4f;
-  content: '*';
+.current-brand-field--empty strong {
+  color: #d92d20;
+  font-weight: 500;
 }
 
 .imitation-generate-page__footer {
   position: sticky;
+  z-index: 10;
   bottom: 0;
+  border-top: 1px solid #dfe4ea;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 -8px 24px rgba(29, 41, 57, 0.04);
+  backdrop-filter: blur(12px);
+}
+
+.imitation-generate-page__footer-inner {
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 14px 32px;
+}
+
+.imitation-generate-page__footer-context {
   display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 32px;
-  border-top: 1px solid #edf2f7;
-  background: rgba(255, 255, 255, 0.96);
-  backdrop-filter: blur(8px);
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  color: var(--imitation-muted);
+  font-size: 12px;
+}
+
+.imitation-generate-page__footer-context strong {
+  overflow: hidden;
+  max-width: 360px;
+  color: #344054;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.imitation-generate-page__footer-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
+}
+
+.imitation-generate-page__footer-actions :deep(.ant-btn) {
+  min-width: 96px;
+  height: 38px;
+  border-radius: 6px;
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease,
+    background-color 180ms ease;
+}
+
+.imitation-generate-page__footer-actions :deep(.ant-btn-primary:not(:disabled):hover) {
+  box-shadow: 0 6px 14px rgba(20, 110, 245, 0.2);
+  transform: translateY(-1px);
+}
+
+.imitation-generate-page__footer-actions :deep(.ant-btn:not(:disabled):active) {
+  transform: translateY(1px);
 }
 
 @media (max-width: 900px) {
-  .imitation-generate-page__field-grid {
+  .imitation-generate-page__header-inner,
+  .imitation-generate-page__main,
+  .imitation-generate-page__footer-inner {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+
+  .imitation-generate-page__source-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .imitation-generate-page__source-switch {
+    width: 100%;
+  }
+
+  .imitation-generate-page__source-switch :deep(.ant-segmented-group),
+  .imitation-generate-page__source-switch :deep(.ant-segmented-item) {
+    width: 100%;
+  }
+
+  .imitation-generate-page__source-meta,
+  .imitation-generate-page__field-grid,
+  .imitation-generate-page__enhancement-grid {
     grid-template-columns: 1fr;
   }
 
-  .imitation-generate-page__capability-row {
+  .imitation-generate-page__enhancement-item + .imitation-generate-page__enhancement-item {
+    border-top: 1px solid #e2e7ed;
+    border-left: 0;
+  }
+}
+
+@media (max-width: 560px) {
+  .imitation-generate-page__header-inner {
     align-items: flex-start;
+    padding-top: 18px;
+    padding-bottom: 18px;
   }
 
-  .imitation-generate-page__step-line::before,
-  .imitation-generate-page__step-line::after {
+  .imitation-generate-page__title-box h1 {
+    font-size: 20px;
+  }
+
+  .imitation-generate-page__main {
+    padding-bottom: 80px;
+  }
+
+  .imitation-generate-page__section-head {
+    gap: 10px;
+  }
+
+  .imitation-generate-page__source-toolbar,
+  .imitation-generate-page__source-input,
+  .imitation-generate-page__source-meta,
+  .imitation-generate-page__enhancement-item {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .imitation-generate-page__source-toolbar > div:first-child {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  .imitation-generate-page__source-priority {
+    padding-left: 0;
+    border-left: 0;
+  }
+
+  .imitation-generate-page__footer-context {
     display: none;
   }
+
+  .imitation-generate-page__footer-inner,
+  .imitation-generate-page__footer-actions {
+    width: 100%;
+  }
+
+  .imitation-generate-page__footer-actions :deep(.ant-btn) {
+    flex: 1;
+  }
 }
 </style>