xiangyuan-app/src/pages/chat/index.vue

<template>
  <CommonRoot>
    <FlexCol :innerStyle="{
      backgroundImage: 'url(https://xy.wenlvti.net/app_static/images/dig/TopBanner.png)',
      backgroundSize: '100% auto',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'top center',
      minHeight: '100vh',
    }">
      <StatusBarSpace />
      <FlexCol v-if="showSessionSidebar" position="relative" width="100%" height="100%">
        <NavBar 
          title="历史会话" 
          leftButton="close-bold" 
          @leftButtonPressed="showSessionSidebar=false"
        />
        <ChatSessionSidebar :sessionManager="sessionManager" @close="showSessionSidebar = false" />
      </FlexCol>
      <ChatMessageContainer
        v-else
        :chatManager="chatManager"
        :sessionManager="sessionManager"
        :historyItemsPagerManager="historyItemsPagerManager"
        :chatInterfaceManager="interfaceManager"
        height="77vh"
        @intoSelectMode="intoSelectMode"
      >
        <template #header>
          <NavBar 
            title="AI助手" 
            leftButton="back"
          >
            <template #left-custom>
              <FlexRow align="center">
                <IconButton icon="menu" shape="square-full" @click="showSessionSidebar = true" />
              </FlexRow>
            </template>
          </NavBar>
        </template>
        <template #footer>
          <ChatFooter
            :chatManager="chatManager" 
            :chatInterfaceManager="interfaceManager"
          >
            <template #mulitSelectMode>
              <ChatMulitSelectBar 
                :selectedCount="selectedCount" 
                :messages="messages" 
                :sessionManager="sessionManager" 
                @cancel="exitSelectMode"
              />
            </template>
            <template #header>

            </template>
          </ChatFooter>
        </template>
      </ChatMessageContainer>
    </FlexCol>
  </CommonRoot>
</template>

<script setup lang="ts">  
import { onMounted, ref, type Ref } from 'vue';
import { useChatSession } from '@/pages/chat/composables/useChatSession';
import { useChat, type ChatInterfaceManager } from '@/pages/chat/core/Chat';
import { useChatHistoryItemsPager } from '@/pages/chat/composables/useChatHistoryItemsPager';
import { useChatSelection } from '@/pages/chat/composables/useChatSelection';
import { ChatMessage as ChatMessageModel } from '@/pages/chat/model/Message';
import ChatFooter from './components/ChatFooter.vue';
import ChatMessageContainer from './components/ChatMessageContainer.vue';
import NavBar from '@/components/nav/NavBar.vue';
import ChatSessionSidebar from '@/pages/chat/components/Session/ChatSessionSidebar.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import ChatMulitSelectBar from '@/pages/chat/components/Footer/ChatMulitSelectBar.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import IconButton from '@/components/basic/IconButton.vue';
import FlexRow from '@/components/layout/FlexRow.vue';

const messages = ref<ChatMessageModel[]>([]) as Ref<ChatMessageModel[]>;
const interfaceManager: ChatInterfaceManager = {
  messages,
  getAttachmentList: async () => {
    return [];
  },
};

const showSessionSidebar = ref(false);

const sessionManager = useChatSession({
  messages,
  enableSession: true,
  onStop: () => chatManager.stop(),
  onScrollToBottom: () => interfaceManager.scrollToBottom?.(),
});
const historyItemsPagerManager = useChatHistoryItemsPager({
  messages,
  sessionManager,
});

const chatManager = useChat({
  interfaceManager,
  sessionManager,
  config: {
    onGetSendOptions: () => ({
      enableThinking: false,
      enableSearch: false,
      modelInfo: {
        name: 'hunyuan-2.0-thinking-20251109',
        value: 'hunyuan-2.0-thinking-20251109',
        max_tokens: 10000,
      },
      model: 'hunyuan-2.0-thinking-20251109',
      chatOptions: {
        temperature: 0.5,
        top_p: 1,
        top_k: 40,
        presence_penalty: 0,
      },
      customSystemPrompt: '',
    }),
    defaultSystemPrompt: `你是一个“乡村文化挖掘”智能知识助理，负责与用户聊天，回答用户问题。请尽量使用简洁明了的语言，避免使用专业术语。`,
    onBuildWelcome: () => {
      return {
        welcomeMessage: '你好！欢迎使用亮乡源AI助手。可以与我讨论乡村文化挖掘相关的问题。',
        welcomeActions: [
          '乡源情怀是什么',
          '乡源文化的传承与发展',
          '乡源文化的保护与利用',
          '乡村振兴的现状与未来', 
        ],
      }
    },
  }
});

const {
  intoSelectMode,
  exitSelectMode,
  selectedCount,
  isSelectMode,
} = useChatSelection();

onMounted(() => {
  interfaceManager.scrollToBottom?.();
});
</script>