MiniProgram/NamingAssistant/pages/home/index.ttml

<view class="page">
  <view class="glow-layer">
    <view class="glow glow-one"></view>
    <view class="glow glow-two"></view>
    <view class="glow glow-three"></view>
  </view>

  <view class="loading-overlay" tt:if="{{isLoading}}">
    <view class="loading-dialog">
      <view class="loading-spinner"></view>
      <text class="loading-text">{{loadingMessage}}</text>
      <text class="loading-subtext">推演需片刻，感谢耐心等待</text>
    </view>
  </view>

  <scroll-view class="content" scroll-y="true">
    <view class="title-block">
      <text class="title">玄名殿</text>
      <text class="subtitle">循星辰八卦，揽乾坤灵意，为你凝练天赐之名</text>

    </view>

    <view class="form-card">
      <view class="form-item">
        <text class="label">姓氏</text>
        <input
          class="input"
          maxlength="2"
          placeholder="请输入1-2个汉字"
          placeholder-class="placeholder-text"
          value="{{surname}}"
          bindinput="handleSurnameInput"
          bindblur="handleSurnameBlur"
        />
        <text class="error-text" tt:if="{{surnameError}}">{{surnameError}}</text>
      </view>

      <view class="form-item">
        <text class="label">性别</text>
        <radio-group class="radio-group" bindchange="handleGenderChange">
          <label class="radio-option {{gender === 'male' ? 'selected' : ''}}" hover-class="radio-hover">
            <radio color="#ff6a6a" value="male" checked="{{gender === 'male'}}" />男
          </label>
          <label class="radio-option {{gender === 'female' ? 'selected' : ''}}" hover-class="radio-hover">
            <radio color="#ff6a6a" value="female" checked="{{gender === 'female'}}" />女
          </label>
        </radio-group>
      </view>

      <view class="form-item dual">
        <view class="dual-item">
          <text class="label">出生日期</text>
          <picker mode="date" value="{{birthDate}}" bindchange="handleBirthDateChange">
            <view class="picker-value">{{birthDate}}</view>
          </picker>
        </view>
        <view class="dual-item">
          <text class="label">具体时间</text>
          <picker mode="time" value="{{birthTime}}" bindchange="handleBirthTimeChange">
            <view class="picker-value {{birthTime ? '' : 'placeholder'}}">
              {{birthTime || '请选择（可选）'}}
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="label">名字字数</text>
        <radio-group class="radio-group" bindchange="handleNameLengthChange">
          <label class="radio-option {{nameLength === 'single' ? 'selected' : ''}}" hover-class="radio-hover">
            <radio color="#ff6a6a" value="single" checked="{{nameLength === 'single'}}" />单名
          </label>
          <label class="radio-option {{nameLength === 'double' ? 'selected' : ''}}" hover-class="radio-hover">
            <radio color="#ff6a6a" value="double" checked="{{nameLength === 'double'}}" />双名
          </label>
        </radio-group>
      </view>
    </view>

    <!-- <view class="quota" tt:if="{{quotaRemaining !== null}}">
      今日剩余次数：<text class="quota-number">{{quotaRemaining}}</text>
    </view> -->

    <view class="action-container">
      <button
        class="primary generate-button"
        type="primary"
        bindtap="handleGenerate"
        loading="{{isSubmitting}}"
        disabled="{{isSubmitting}}"
      >
        ✨ 看广告生成美名 ✨
      </button>
      <button class="secondary favorites-button" bindtap="handleGoFavorites">
        珍名阁
      </button>
    </view>
  </scroll-view>
</view>