---
inclusion: always
---

# 项目开发规范与注意事项

<!-- 在这里写上你希望 Kiro 每次都遵守的规范和注意事项 -->
<!-- 例如： -->

## 技术栈

- Vue 3 + TypeScript + Vite
- 状态管理：Pinia
- 样式：SCSS

## 编码规范

- 颜色用尽量用variables.scss里的统一颜色变量，特别是背景，按钮，文字的颜色
- 除了Home.vue首页外，其他页面我上传了截图要写页面或组件的，需要参考图片里文字和布局结构，在保证美观前提上自由发挥（如果我粘贴了图片内容里的完整样式过来，那就要参考我给的样式结合图片里的结构和样式代码保证还原度）
- 全局用1rem=100px的格式并注意对某些特殊元素组件的line-height行高影响，纵布局如非必要不用flex-direction: column布局
- 如果是建一个组件，这个组件看我说是用在views里哪个页面的，比如用在Profile.vue里的组件，组件名字最前面要加Profile，而且整个组件的命名不能过度简化，要容易看懂组件的用途；如果检测到某种名字开头的组件数量比如Profile开头的超过15个，就在components里新建个类似profile这样的页面名字的文件夹，把这类命名的组件都移到文件夹里并查找更新组件所有被引用地方的文件地址

## 注意事项

- 页面结构和ts的常量变量和方法都要加中文注释，kiro编程工具沟通要回复中文
- 新建 SCSS 文件如果使用了 variables.scss 中的变量（如 `$bg-white`、`$accent` 等），必须在文件顶部加 `@use '../variables' as *;`，否则通过 `@use` 方式引入 index.scss 时变量作用域不会穿透，会报 `Undefined variable` 错误
- 因为项目用了 rem（1rem=100px）适配方案，所有 Vue 页面和组件文件的最外层盒子都要加 `font-size: 0.14rem`，避免页面样式中受浏览器默认 rem 行高影响导致文字和布局异常
- 需要占满视口高度的元素（页面主容器、侧边栏、聊天面板等）禁止直接写 `height: 100vh`，必须使用 `height: var(--app-height, 100vh)`。原因：项目在小屏下使用 `transform: scale` 缩放，`100vh` 是缩放后的视口高度而非设计稿高度，会导致底部留白。`--app-height` 由 `src/plugins/remAdapt.ts` 动态注入，值为 `视口高度 / scale`（PC 端等于 `100vh`）