JianSu-Naming/miniprogram/pages/home/home.wxml

<view class="container">
  <!-- 水墨动画遮罩 -->
  <view class="ink-overlay {{isGenerating ? 'active' : ''}}">
    <view class="ink-circle"></view>
  </view>

  <view class="content {{isGenerating ? 'fade-out' : ''}}">
    <view class="title">见素</view>
    <view class="subtitle">回归名字的诗意与留白</view>
    
    <!-- 模式选择 -->
    <view class="mode-selector">
      <view 
        wx:for="{{modes}}" 
        wx:key="key"
        class="mode-item {{activeMode === item.key ? 'active' : ''}}"
        bindtap="selectMode"
        data-mode="{{item.key}}"
      >
        {{item.label}}
        <view class="mode-dot" wx:if="{{activeMode === item.key}}"></view>
      </view>
    </view>
    
    <!-- 姓氏输入（仅在宝宝模式显示） -->
    <view class="surname-section" wx:if="{{activeMode === 'baby'}}">
      <input 
        class="surname-input" 
        placeholder="姓氏" 
        placeholder-class="placeholder"
        bindinput="onSurnameInput"
        value="{{surname}}"
        maxlength="2"
      />
      <view class="line"></view>
    </view>

    <!-- 关键词输入 -->
    <view class="input-section">
      <input 
        class="keyword-input" 
        placeholder="{{activeMode === 'baby' ? '期待，如：自由、清冷' : activeMode === 'persona' ? '人设，如：温柔、坚韧' : '关键词，如：自由、清冷'}}" 
        placeholder-class="placeholder"
        bindinput="onInput"
        value="{{keyword}}"
      />
      <view class="line"></view>
    </view>

    <view class="action-section">
      <button class="generate-btn" bindtap="startGenerate">感悟名字</button>
    </view>
  </view>

  <view class="footer {{isGenerating ? 'fade-out' : ''}}">
    <text>© 见素 · 审美溢价</text>
  </view>
</view>