Vue

---
name: vue
description: 编写或修改 Vue/SFC/组合式 API/script setup/v-model 组件时调用，提供 Vue 开发规范、TailwindCSS 样式约束，以及 hooks/comps/utils、lucide-vue-next、motion-v 等项目约定
---

## 项目结构
```ts
import { } from 'hooks' // (packages/hooks)
import { Button, ... } from 'comps' // (packages/comps)
import { cn } from 'utils' // (packages/utils)
```

## 组件模板
```vue
<template>
  <div class="Test-container"></div>
</template>

<script setup lang="ts">
defineOptions({ name: 'Test' })
const modelValue = defineModel({ ... })
const props = withDefaults(defineProps<{ myProps: any }>(), {})
const emit = defineEmits<{ (e: 'myEvent'): void }>()
</script>

<style lang="scss" scoped></style>
```

## 代码要求
- 组件化：一个组件一个文件，优先用 v-model 双向绑定

## CSS
- TailwindCSS：无法实现时用行内样式，禁止未定义类名（用 `bg-[#409eff]` 语法），禁止动态拼接 `h-[${h}px]`
- 深色模式：`tailwind.config` 变量已自动适配，无需 `dark:` 前缀

## 库
- 禁止：shadcn/ui
- 推荐：lucide-vue-next（图标）、`cn`（tailwind-merge）、motion-v（动画）