digital-psychology/apps/user-h5/src/pages/AskPage.vue

<template>
  <PageShell :sheet="false">
    <template #hero>
      <div class="ask-hero">
        <div class="head">
          <HomeToolIcon name="ask" :size="48" />
          <div class="head-text">
            <h1 class="title">问答</h1>
            <p class="sub">AI 成长助手 · 结合档案聊聊</p>
          </div>
          <button
            v-if="messages.length"
            type="button"
            class="clear-btn"
            :disabled="sending"
            @click="clearChat"
          >
            清空
          </button>
        </div>
        <AskRails v-if="!activeAdvisor" :model-value="rail" @update:model-value="setRail" />
        <p v-else class="adv-title">{{ activeAdvisor.name }}的专属对话</p>
      </div>
    </template>

    <AskAiPane
      v-show="rail === 'ai' && !activeAdvisor"
      :boot-loading="bootLoading"
      :boot-error="bootError"
      :profiles="profiles"
      :profile-id="profileId"
      :self-label="selfLabel"
      :messages="messages"
      :draft="draft"
      :sending="sending"
      :send-error="sendError"
      :quota-exhausted="quotaExhausted"
      :quota="quota"
      @boot="boot"
      @pick-scene="pickScene"
      @switch-advisor="setRail('advisor')"
      @update:profile-id="profileId = $event"
      @profile-change="onProfileChange"
      @navigate="router.push($event)"
      @update:draft="draft = $event"
      @send="send"
      @quota-refreshed="refreshQuota"
    />

    <AskAdvisorPane
      v-show="rail === 'advisor' && !activeAdvisor"
      @ask="openAdvisor"
    />

    <AskAdvisorChat
      v-if="activeAdvisor"
      :advisor="activeAdvisor"
      :boot-loading="bootLoading"
      :boot-error="bootError"
      :profiles="profiles"
      :profile-id="profileId"
      :self-label="selfLabel"
      :messages="messages"
      :draft="draft"
      :sending="sending"
      :send-error="sendError"
      :quota-exhausted="quotaExhausted"
      :quota="quota"
      @boot="boot"
      @update:profile-id="profileId = $event"
      @profile-change="onProfileChange"
      @navigate="router.push($event)"
      @update:draft="draft = $event"
      @send="send"
      @quota-refreshed="refreshQuota"
    />
  </PageShell>
</template>

<script setup lang="ts">
import AskAdvisorChat from '../components/ask/AskAdvisorChat.vue'
import AskAdvisorPane from '../components/ask/AskAdvisorPane.vue'
import AskAiPane from '../components/ask/AskAiPane.vue'
import AskRails from '../components/ask/AskRails.vue'
import HomeToolIcon from '../components/HomeToolIcon.vue'
import PageShell from '../components/PageShell.vue'
import { useAskPage } from '../composables/useAskPage'

const {
  router,
  rail,
  setRail,
  activeAdvisor,
  bootLoading,
  bootError,
  profiles,
  profileId,
  selfLabel,
  messages,
  draft,
  sending,
  sendError,
  quotaExhausted,
  quota,
  onProfileChange,
  pickScene,
  openAdvisor,
  send,
  boot,
  refreshQuota,
  clearChat,
} = useAskPage()
</script>

<style scoped>
.ask-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}
.head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.head-text {
  flex: 1;
  min-width: 0;
}
.title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
}
.sub {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.04em;
}
.clear-btn {
  border: none;
  background: transparent;
  color: #9a8f8b;
  font-size: 13px;
  padding: 6px 4px;
  flex-shrink: 0;
}
.clear-btn:disabled {
  opacity: 0.4;
}
.adv-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
}
</style>