Instruction file imported from RT-2020/myshelltool (
.cursor/rules/vue-frontend.mdc). Copyright stays with the author.
Vue 3 / Pinia 前端规则
适用 src/** 下文件。完整项目上下文见根目录 AGENTS.md。
组件
<script setup lang="ts">+ Composition API，禁止 Options API，禁止新增无lang="ts"的 script。- 业务组件按域分目录：
shell/terminal/files/resource-monitor/；无业务基础组件放ui/，命名App*.vue，并在ui/index.tsbarrel 导出。 - 图标统一
lucide-vue-next：import { Plus, Pencil, Trash2 } from 'lucide-vue-next';
样式（SCSS + token）
<style scoped lang="scss">顶部@use '@/styles/_tokens' as *;。- 必须用
var(--token)：颜色、间距、圆角、阴影、动效、z-index（var(--z-base|dropdown|sticky|drawer|modal|toast|tooltip)）。禁止硬编码。 - 新增 token：加到
_tokens.scss的 map 并暴露为:rootCSS 变量。
状态（Pinia）
- setup store 风格：
defineStore('x', () => { const r = ref(...); return {...}; })。 - 6 领域 store：
sessions(活跃会话/终端)assets(连接资产/分组)files(SFTP/传输)tunnelsui(主题/tab/modal/搜索)resourceMonitor。 workbench.ts是编排壳：实例化子 store，initialize()编排启动，re-export 子 store 表面。- 跨 store 依赖：子 store 用
attachWorkbench(bridge)注入（lazy），调wb().xxx。禁止循环 import。 - 新 action → 加子 store → 在
workbench.tsreturn 块 re-export。 workbench.ts暴露子 store 响应式 state 必须computed()包裹（直接暴露子 store ref 会丢响应性）。
IPC
- 经
src/services/backend.ts：invokeBackend(command, args)/listenBackendEvent(event, handler)。 - 非 Tauri runtime（浏览器预览）会抛错——SSH 类功能只在
npm run tauri:dev可用。 - 命令参数 camelCase。资产经
normalizeAsset()规整。
操作入口模式
- 右键菜单：
<AppContextMenu :open :items :x :y @close>，items:[{label,action,danger,separator,disabled}]，危险项danger:true。参照FileSurface.vue。 - 弹窗：
store.modal = { type, ...payload }，GlobalModals.vue按modal.type分支。新增 type 同步改modalTitle/submitModal/watch。保留 legacy 选择器（#modalLayer/#modalBody/.modal-actions .btn.danger）兼容测试。