style: polish UI and improve UX

tests/unit/components/story-input-composer.test.ts

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import StoryInputComposer from '@/components/story-input/StoryInputComposer'
+
+vi.mock('@/components/selectors/RatioStyleSelectors', () => ({
+  RatioSelector: ({
+    getUsage: _getUsage,
+    ...props
+  }: Record<string, unknown> & { getUsage?: unknown }) => createElement('div', props, 'RatioSelector'),
+  StyleSelector: (props: Record<string, unknown>) => createElement('div', props, 'StyleSelector'),
+  StylePresetSelector: (props: Record<string, unknown>) => createElement('div', props, 'StylePresetSelector'),
+}))
+
+describe('StoryInputComposer', () => {
+  it('renders a shared composer shell with configurable textarea rows and shared controls', () => {
+    Reflect.set(globalThis, 'React', React)
+
+    const html = renderToStaticMarkup(
+      createElement(StoryInputComposer, {
+        value: '测试内容',
+        onValueChange: () => undefined,
+        placeholder: '请输入内容',
+        minRows: 8,
+        videoRatio: '9:16',
+        onVideoRatioChange: () => undefined,
+        ratioOptions: [{ value: '9:16', label: '9:16' }],
+        artStyle: 'realistic',
+        onArtStyleChange: () => undefined,
+        styleOptions: [{ value: 'realistic', label: '真人风格' }],
+        stylePresetValue: 'horror-suspense',
+        onStylePresetChange: () => undefined,
+        stylePresetOptions: [{ value: 'horror-suspense', label: '恐怖悬疑', description: '压迫氛围' }],
+        topRight: createElement('span', null, '字数：4'),
+        footer: createElement('p', null, '当前配置'),
+        secondaryActions: createElement('button', { type: 'button' }, 'AI 帮我写'),
+        primaryAction: createElement('button', { type: 'button' }, '开始创作'),
+      }),
+    )
+
+    expect(html).toContain('rows="8"')
+    expect(html).toContain('RatioSelector')
+    expect(html).toContain('StyleSelector')
+    expect(html).toContain('StylePresetSelector')
+    expect(html).toContain('字数：4')
+    expect(html).toContain('当前配置')
+    expect(html).toContain('AI 帮我写')
+    expect(html).toContain('开始创作')
+  })
+})