1. 这一部分的文件夹对应的是什么呢？
这几个文件夹之间的关系有一些混乱。
2. 这里在获取数据的时候存在疑惑。
3. defineProps
这个语法是 父传子 对应的语法嘛？
4. 针对启用 WebKit 内核浏览器的旧版弹性盒子布局（这是实现多行省略的关键前提）
核心属性解析
display: -webkit-box;
- 作用：启用 WebKit 内核浏览器的旧版弹性盒子布局（这是实现多行省略的关键前提）。
- 注意：这是一个非标准属性，主要用于兼容 WebKit 内核浏览器（如 Chrome、Safari）。
-webkit-line-clamp: 2;
- 作用：限制文本显示的最大行数（此处设置为 2 行）。
- 兼容性：主流现代浏览器均支持，但 Firefox 需要额外注意（见下文兼容性说明）。
-webkit-box-orient: vertical;
- 作用：指定弹性盒子的子元素按垂直方向排列（必须与
-webkit-line-clamp配合使用）。
overflow: hidden;
- 作用：隐藏超出容器的内容（避免文本溢出）。
text-overflow: ellipsis;
- 作用：当文本溢出时显示省略号（需与
overflow: hidden配合）。
这段 CSS 的作用是 将文本限制为最多显示 2 行，超出部分用省略号（...）表示。常见于新闻标题、商品描述等需要控制文本展示长度的场景。
.element {
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 超出时显示省略号 */
display: -webkit-box; /* 使用旧版弹性盒子模型（关键） */
-webkit-line-clamp: 2; /* 限制显示的行数（这里是2行） */
-webkit-box-orient: vertical; /* 设置弹性盒子内容垂直排列 */
}
5. 组件的双向绑定 model-value
搜一下具体的讲解，深度学习一下这个是什么，对这个没有印象了 conposition API这里需要详细讲解一下
6. computed 这个compositions API 里面对应的引入方式
import { computed } from '@vue/reactivity';
