feat 搭建架构骨架

src/views/service/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+// 页面容器：只做组件引入、props 分发、事件中转，数据只经 store
+import { useServiceStore } from '@/stores/modules/service'
+import ChatWindow from './cpns/ChatWindow.vue'
+
+const serviceStore = useServiceStore()
+const { messages } = storeToRefs(serviceStore)
+
+function onSend(content: string): void {
+  void serviceStore.send(content)
+}
+
+function onSendFile(file: File): void {
+  void serviceStore.sendFile(file)
+}
+
+onMounted(() => {
+  void serviceStore.fetchHistory()
+})
+</script>
+
+<template>
+  <div class="service">
+    <header class="service__head">
+      <h1 class="service__title">
+        在线客服
+      </h1>
+      <p class="service__subtitle text-secondary">
+        在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题。
+      </p>
+    </header>
+
+    <ChatWindow
+      :messages="messages"
+      @send="onSend"
+      @send-file="onSendFile"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.service {
+  .flex(column, flex-start);
+  gap: @spacing-base;
+  padding-top: @spacing-xl;
+  padding-bottom: @spacing-xxl;
+
+  &__title {
+    font-size: @font-size-xxl;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__subtitle {
+    margin-top: @spacing-xs;
+    font-size: @font-size-base;
+  }
+}
+</style>