1
├── api/                # API 请求封装
2
├── assets/             # 静态资源
3
│   ├── images/         # 图片资源
4
│   ├── less/           # 全局样式
5
│   └── movie/          # 视频资源
6
├── components/         # Vue 组件
7
│   ├── blog/           # 博客相关组件
8
│   ├── global/         # 全局通用组件
9
│   ├── index/          # 首页组件
10
│   ├── layout/         # 布局组件
11
│   └── special/        # 专栏相关组件
12
├── hooks/              # 自定义 hooks
13
├── layouts/            # 页面布局
14
├── middleware/         # 中间件
15
├── pages/              # 页面组件
16
│   ├── ai/             # AI 相关页面
17
│   ├── detail/         # 文章详情
18
│   └── specialColumn/  # 专栏页面
19
├── plugins/            # 插件
20
├── stores/             # Pinia 状态管理
21
├── types/              # TypeScript 类型定义
22
├── utils/              # 工具函数
23
└── nuxt.config.ts      # Nuxt 配置文件

1
<template>
2
  <div class="new-page">
3
    <h1>新页面</h1>
4
    <p>这是一个新添加的页面</p>
5
  </div>
6
</template>
7

8
<script lang="ts" setup>
9
// 页面逻辑
10
</script>
11

12
<style lang="less" scoped>
13
.new-page {
14
  padding: 20px;
15
}
16
</style>

1
<template>
2
  <div class="new-component">
3
    <slot></slot>
4
  </div>
5
</template>
6

7
<script lang="ts" setup>
8
// 组件逻辑
9
</script>
10

11
<style lang="less" scoped>
12
.new-component {
13
  /* 组件样式 */
14
}
15
</style>

1
import { defineStore } from 'pinia'
2

3
export const useNewStore = defineStore('new', () => {
4
  const data = ref([])
5

6
  const fetchData = async () => {
7
    const res = await getNewData()
8
    data.value = res.data
9
  }
10

11
  return {
12
    data,
13
    fetchData
14
  }
15
})

1
.quick-questions {
2
  display: flex;
3
  gap: 12px;
4
  margin-top: 12px;
5
  flex-wrap: wrap;
6
}
7

8
.quick-question-button {
9
  padding: 6px 12px;
10
  border: 1px solid #52c41a;
11
  border-radius: 16px;
12
  background: #f6ffed;
13
  color: #52c41a;
14
  font-size: 12px;
15
  cursor: pointer;
16
  transition: all 0.3s;
17
  white-space: nowrap;
18
  position: relative;
19
  overflow: hidden;
20

21
  &.first-handshake-button {
22
    border: 1px solid #ff7a45;
23
    background: #fff7e6;
24
    color: #ff7a45;
25

26
    &:hover {
27
      background: linear-gradient(135deg, #ff7a45, #ffac38);
28
      border-color: #ff7a45;
29
      color: #fff;
30
      box-shadow: 0 2px 8px rgba(255, 122, 69, 0.3);
31
    }
32
  }
33

34
  &:hover {
35
    background: linear-gradient(135deg, #52c41a, #73d13d);
36
    color: #fff;
37
    border-color: #52c41a;
38
    transform: translateY(-1px);
39
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
40
  }
41
}

1
// 快捷问题按钮数据
2
const quickButtons = [
3
  { buttonname: 'AI 是什么？', message: '人工智能（AI）是什么？它有哪些主要应用领域？' },
4
  { buttonname: '机器学习入门', message: '如何入门机器学习？需要学习哪些基础知识？' },
5
  { buttonname: '深度学习框架', message: '目前主流的深度学习框架有哪些？它们各自的优缺点是什么？' }
6
]
7

8
// 填充问题到输入框
9
const fillQuestion = (message: string) => {
10
  userInput.value = message
11
}
12

13
// 处理第一次握手
14
const showHandshakeDialog = ref(false)
15
const authorName = ref('')
16
const authorNameError = ref('')
17

18
const handleFirstHandshake = () => {
19
  authorName.value = ''
20
  authorNameError.value = ''
21
  showHandshakeDialog.value = true
22
}