PC 端页面设计结构分析

📁 项目技术栈

技术	版本	说明
框架	Nuxt 3	^3.5.1
UI 库	Element Plus	^2.3.6
样式	Tailwind CSS + SCSS	^6.7.0
状态管理	Pinia	^2.0.23
语言	TypeScript	^4.8.4
包管理	pnpm	9.15.4
Markdown	markdown-it	^13.0.1
代码高亮	highlight.js	^11.8.0
思维导图	markmap	^0.15.x

🏗️ 整体布局架构

布局组件树

default.vue (默认布局)
├── LayoutAside (左侧边栏)
│   ├── Sidebar (导航菜单)
│   └── Panel (可扩展面板)
├── LayoutHeader (顶部栏)
│   ├── 公告通知
│   └── User (用户信息)
├── LayoutMain (主内容区)
│   ├── mainLeft 插槽 (会话列表)
│   ├── 默认插槽 (页面内容)
│   └── mainRight 插槽 (右侧面板)
└── LayoutAccount (登录弹窗)

布局源码结构

layouts/default.vue

<el-container class="layout-default">
    <el-aside width="auto">
        <LayoutAside>
            <Sidebar />
        </LayoutAside>
    </el-aside>
    <el-container>
        <el-header height="auto">
            <LayoutHeader />
        </el-header>
        <el-main class="scrollbar">
            <LayoutMain>
                <slot name="mainLeft" />
                <slot />
                <slot name="mainRight" />
            </LayoutMain>
        </el-main>
    </el-container>
    <LayoutAccount v-if="userStore.showLogin" />
</el-container>

布局组件目录

layouts/
├── default.vue          # 默认布局 (带底部)
├── app.vue              # 应用布局 (无底部)
├── blank.vue            # 空白布局
├── up_down.vue          # 上下布局
└── components/
    ├── aside/           # 侧边栏组件
    ├── header/          # 顶部栏组件
    ├── main/            # 主内容区组件
    ├── footer/          # 底部组件
    ├── account/         # 登录账号组件
    ├── notice/          # 通知组件
    ├── menu/            # 菜单组件
    └── navbar/          # 导航栏组件

📄 页面路由结构

路由目录结构

pages/
├── chat/                # 聊天模块
│   ├── index.vue        # 主聊天页面
│   └── _components/     # 聊天子组件
├── app/                 # 应用中心
│   ├── index.vue        # 应用首页
│   ├── drawing/         # AI 绘画
│   ├── mind_map/        # 思维导图
│   ├── qrcode/          # 二维码生成
│   └── square/          # 应用广场
├── create/              # AI 创作
│   ├── index.vue
│   └── produce.vue
├── skill/               # 技能广场
│   └── index.vue
├── user/                # 用户中心
│   ├── info.vue         # 个人信息
│   ├── collection.vue   # 我的收藏
│   └── opinion.vue      # 意见反馈
├── recharge/            # 充值中心
├── openvip/             # 开通会员
├── promotion/           # 推广中心
├── redeem_code/         # 兑换码
├── policy/              # 协议政策
├── news/                # 新闻资讯
├── introduce/           # 介绍页面
└── index/               # 首页相关

路由映射表

路由路径	页面文件	功能说明
`/`	`pages/chat/index.vue`	主聊天页面
`/create`	`pages/create/index.vue`	AI 创作
`/skill`	`pages/skill/index.vue`	技能广场
`/app`	`pages/app/index.vue`	应用中心
`/app/drawing`	`pages/app/drawing/index.vue`	AI 绘画
`/app/mind_map`	`pages/app/mind_map/index.vue`	思维导图
`/app/qrcode`	`pages/app/qrcode/index.vue`	二维码生成
`/app/square`	`pages/app/square/index.vue`	应用广场
`/user/info`	`pages/user/info.vue`	个人信息
`/user/collection`	`pages/user/collection.vue`	我的收藏
`/user/opinion`	`pages/user/opinion.vue`	意见反馈
`/recharge`	`pages/recharge/index.vue`	充值中心
`/openvip`	`pages/openvip/index.vue`	开通会员
`/promotion`	`pages/promotion/index.vue`	推广中心
`/redeem_code`	`pages/redeem_code/index.vue`	兑换码

🧩 核心组件结构

聊天页面组件树

pages/chat/index.vue
├── NuxtLayout (default 布局)
│   ├── TheSession (会话列表) [mainLeft 插槽]
│   │   ├── Item (会话项)
│   │   │   ├── 会话名称
│   │   │   ├── 编辑按钮
│   │   │   └── 删除按钮
│   │   └── ElScrollbar (滚动容器)
│   ├── Chatting (聊天输入区)
│   │   ├── ChatMsgItem (消息项) × N
│   │   │   ├── ChatContent (内容渲染)
│   │   │   ├── 头像
│   │   │   ├── 时间戳
│   │   │   ├── 操作按钮 (复制/收藏/海报)
│   │   │   └── 加载状态指示器
│   │   ├── ModelPicker (模型选择器)
│   │   ├── Plugins (插件选择)
│   │   └── 输入框组件
│   ├── ProblemExample (问题示例)
│   └── TheGuidedPopup (引导弹窗)

公共组件库 (34 个)

components/
├── ali-pay-code/        # 支付宝支付码
├── apply-distribution/  # 申请分销
├── chat-content/        # 聊天内容渲染
├── chat-msg-item/       # 聊天消息项
├── chatting/            # 聊天输入核心组件
│   ├── chatting.vue     # 主组件
│   ├── dialog-poster.vue # 对话海报
│   ├── model-picker.vue  # 模型选择器
│   └── plugins.vue      # 插件选择
├── cropper-upload/      # 裁剪上传
├── daterange-picker/    # 日期范围选择
├── drop-down/           # 下拉菜单
├── dropdown-more/       # 更多下拉
├── empty-com/           # 空状态组件
├── form-designer/       # 表单设计器
├── icon/                # 图标组件
├── image-contain/       # 图片容器
├── income-detail/       # 收入详情
├── information/         # 信息展示
├── l-textarea/          # 文本域组件
├── markdown/            # Markdown 渲染器
├── network-switch/      # 联网切换
├── overflow-tooltip/    # 溢出提示
├── pagination/          # 分页组件
├── payment/             # 支付组件
├── popover-input/       # 弹出输入框
├── popup/               # 弹窗组件
├── price/               # 价格显示
├── sidebar/             # 侧边导航
├── the-create/          # 创作组件
├── the-guided-popup/    # 引导弹窗
├── the-session/         # 会话管理
├── upload/              # 上传组件
├── upload-file/         # 文件上传
├── verification-code/   # 验证码
├── waterfall/           # 瀑布流
├── withdrawalDetail/    # 提现详情
└── wx-pay-code/         # 微信支付码

🎨 样式设计特点

设计语言

圆角设计

大圆角：rounded-[15px] (聊天容器)

中圆角：rounded-[8px] (按钮/卡片)

小圆角：rounded-[4px] (输入框)

渐变色彩

间距规范

页面边距：px-[16px] / px-[30px]

组件间距：gap-[12px] / gap-[20px]

内边距：py-[20px] / px-[40px]

弹性布局

<!-- 典型布局结构 -->
<div class="flex flex-1 min-h-0">
    <div class="flex-none">左侧固定</div>
    <div class="flex-1 min-w-0">中间自适应</div>
    <div class="flex-none">右侧固定</div>
</div>

滚动优化

使用 ElScrollbar 自定义滚动条

安全区域适配：padding-bottom: env(safe-area-inset-bottom)

CSS 变量

🔄 核心功能流程

聊天流程

用户输入
    ↓
contentPost(userInput)
    ↓
1. 检查登录状态
2. 检查会话是否存在，不存在则创建
3. 添加用户消息到 contentList
4. 添加空白的 AI 回复占位 (loading 状态)
    ↓
chatSendText() - SSE 流式请求
    ↓
onstart: 获取 ReadableStream 阅读器
onmessage: 解析增量数据 (incremental)
    - event === 'error': 错误处理
    - event === 'reasoning': 深度思考内容
    - event === 'finish': 流结束
    ↓
onclose: 
    - 更新聊天记录 getChatList(true)
    - 滚动到底部 scrollToBottom()
    - 更新用户信息 userStore.getUser()

会话管理流程

TheSession 组件
├── sessionAdd()       - 新建会话
├── sessionEdit(id, name) - 重命名会话
├── sessionDelete(id)  - 删除会话
├── sessionClear()     - 清空所有会话
└── handleTop()        - 上拉加载历史记录

历史记录加载

📦 状态管理 (Pinia)

Store 结构

stores/
├── app.ts             # 应用配置、公告配置
├── setting.ts         # 用户设置
├── theme.ts           # 主题配置
└── user.ts            # 用户信息、Token、登录状态

User Store

App Store

缓存键枚举

🔌 API 模块划分

API 目录结构

api/
├── account.ts         # 账户相关 (登录/注册)
├── chat.ts            # 聊天相关
├── drawing.ts         # 绘画相关
├── user.ts            # 用户相关
├── pay.ts             # 支付相关
├── skill.ts           # 技能相关
├── upload.ts          # 上传相关
└── ...

核心 API 接口

聊天模块 (`api/chat.ts`)

接口	方法	说明
`getchatLog(params)`	GET	获取聊天记录
`getChat(params)`	POST	聊天接口 (非流式)
`chatSendText(params, config)`	POST	发送消息 (SSE 流式)
`samplesLists(params)`	GET	问题示例列表
`cleanChat(params)`	POST	清除会话
`cleanContext(params)`	POST	清除上下文
`collectRecords(params)`	POST	收藏会话
`getChatModelApi()`	GET	获取模型列表

AI 绘画模块 (`api/drawing.ts`)

接口	方法	说明
`drawing(params)`	POST	生成图片
`drawingDetail(params)`	GET	生成详情
`drawingRecord(params)`	GET	绘画记录
`drawingDelete(params)`	POST	删除记录
`keywordCate()`	GET	关键词分类
`keywordPrompt(params)`	GET	关键词列表
`drawingExample()`	GET	绘画示例
`drawingModel()`	GET	绘画模型

支付模块 (`api/pay.ts`)

接口	方法	说明
`getPayWayList(params)`	GET	获取支付方式
`apiRechage(params)`	POST	充值
`memberBuy(params)`	POST	会员购买
`prepay(params)`	POST	预支付
`OrderStatus(params)`	GET	订单状态

用户模块 (`api/user.ts`)

接口	方法	说明
`getUserInfo()`	GET	获取用户信息
`setUserInfo(params)`	POST	设置用户信息
`getCollection()`	GET	获取收藏列表

🎯 关键技术特性

1. SSE 流式响应

2. Markdown 渲染

<!-- components/chat-content/index.vue -->
<template>
    <div class="chat-content markdown-body">
        <div v-html="renderedContent"></div>
    </div>
</template>

<script setup>
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'

const md = MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    highlight: (code, lang) => {
        if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(code, { language: lang }).value
        }
        return ''
    }
})

const renderedContent = computed(() => {
    return md.render(props.content)
})
</script>

3. 思维导图集成

4. 图片处理

<!-- 头像裁剪上传 -->
<CropperUpload @change="handleAvatarChange">
    <ElAvatar :src="userInfo.avatar" />
</CropperUpload>

<!-- 海报生成 -->
<dialog-poster :chat-data="chatData" @download="handleDownload" />

5. 无限滚动加载

📐 Composables 组合式函数

composables/
├── useAudioPlay.ts      # 音频播放控制
├── useCopy.ts           # 复制功能
├── useLockFn.ts         # 函数防抖/节流
├── useMenu.ts           # 菜单逻辑
├── usePaging.ts         # 分页逻辑
├── usePolling.ts        # 轮询逻辑
├── useSessionList.ts    # 会话列表逻辑
└── useWindowSize.ts     # 窗口尺寸 (来自 VueUse)

useSessionList 示例

🛠️ 开发规范

组件命名规范

文件名：PascalCase (如 ChatMsgItem.vue)

组件名：与文件名一致

目录名：kebab-case (如 chat-content/)

代码结构规范

<template>
    <!-- 模板内容 -->
</template>

<script setup lang="ts">
// 1. 类型定义
interface Props {
    modelValue?: string
}

// 2. Props
const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
})

// 3. Emits
const emit = defineEmits<{
    'update:modelValue': [value: string]
}>()

// 4. 导入 (stores, composables, api)
const userStore = useUserStore()

// 5. 响应式数据
const loading = ref(false)

// 6. 计算属性
const disabled = computed(() => !props.modelValue)

// 7. 函数方法
const handleSubmit = async () => {
    // ...
}

// 8. 生命周期
onMounted(() => {
    // ...
})
</script>

<style lang="scss" scoped>
/* 样式 */
</style>

样式开发规范

优先使用 Tailwind 工具类

复杂样式使用 SCSS

使用 scoped 避免样式污染

全局样式写在 assets/styles/

🚀 构建部署

开发模式

生产构建

构建流程

nuxt generate - 生成静态文件

scripts/build.mjs - 复制到发布目录

Nginx 配置示例

📝 附录

环境变量配置

目录完整结构

pc/
├── api/                    # API 接口层
├── assets/                 # 静态资源
│   ├── icons/             # SVG 图标
│   ├── images/            # 图片资源
│   └── styles/            # 全局样式
├── components/             # 公共组件 (34 个)
├── composables/            # 组合式函数
├── config/                 # 配置文件
├── constants/              # 常量定义
├── enums/                  # TypeScript 枚举
├── layouts/                # 布局组件
├── middleware/             # 路由中间件
├── nuxt/                   # Nuxt 配置
├── pages/                  # 页面组件 (14 个模块)
├── plugins/                # 插件
├── public/                 # 公共资源
├── scripts/                # 构建脚本
├── stores/                 # Pinia 状态管理
├── typings/                # 类型定义
├── utils/                  # 工具函数
├── .env                    # 环境变量
├── nuxt.config.ts          # Nuxt 配置
├── package.json            # 项目依赖
├── tailwind.config.js      # Tailwind 配置
└── tsconfig.json           # TypeScript 配置

PC端页面设计结构分析

PC 端页面设计结构分析#

📁 项目技术栈#

🏗️ 整体布局架构#

布局组件树#

布局源码结构#

布局组件目录#

📄 页面路由结构#

路由目录结构#

路由映射表#

🧩 核心组件结构#

聊天页面组件树#

公共组件库 (34 个)#

🎨 样式设计特点#

设计语言#

CSS 变量#

🔄 核心功能流程#

聊天流程#

会话管理流程#

历史记录加载#

📦 状态管理 (Pinia)#

Store 结构#

User Store#

App Store#

缓存键枚举#

🔌 API 模块划分#

API 目录结构#

核心 API 接口#

聊天模块 (api/chat.ts)#

AI 绘画模块 (api/drawing.ts)#

支付模块 (api/pay.ts)#

用户模块 (api/user.ts)#

🎯 关键技术特性#

1. SSE 流式响应#

2. Markdown 渲染#

3. 思维导图集成#

4. 图片处理#

5. 无限滚动加载#

📐 Composables 组合式函数#

useSessionList 示例#

🛠️ 开发规范#

组件命名规范#

代码结构规范#

样式开发规范#

🚀 构建部署#

开发模式#

生产构建#

构建流程#

Nginx 配置示例#

📝 附录#

环境变量配置#

目录完整结构#