vue-layout

面向 PC 端的 Vue 3 脚手架骨架。只保留最基本的框架：布局、路由、请求、登录态、设计令牌。所有页面均为「待开发」占位。

技术栈

Vue 3（<script setup>，JavaScript）· Vite 8 · vue-router 5 · pinia 4 · shadcn-vue（Reka UI + Tailwind CSS v4 + @lucide/vue）· axios · vite-plugin-mock

命令

pnpm mock     # 本地 mock 数据启动（不依赖后端）
pnpm dev      # 连本地后端启动，/api 走反向代理
pnpm build    # 生产构建
pnpm preview  # 预览构建产物

目录

src/
├─ api/                 接口定义，按业务模块拆分
├─ assets/              需构建处理的静态资源
├─ components/ui/       shadcn-vue 组件（CLI 生成，可直接改）
├─ layout/              header / main / footer 骨架，Sidebar 为 main 内可选侧栏
├─ lib/utils.js         cn()，合并 Tailwind 类名
├─ pinia/modules/       状态模块
├─ router/              路由与登录态守卫
├─ utils/request.js     axios 实例与统一响应处理
└─ views/               页面，一个目录一个页面
mock/                   mock 接口，仅 mock 模式生效

布局

header / main / footer 上下三段，header 吸顶。main 支持可选左侧边栏，由路由 meta.sidebar 控制：

{ path: 'orders', meta: { sidebar: true }, component: () => import('@/views/orders/index.vue') }

• 不开侧栏：内容居中，最大宽度 1280px（app-container）
• 开侧栏：左侧 224px 固定侧栏 + 右侧自适应内容区，铺满视口宽度

登录态

凭据只走 cookie，前端不存也不读 token。

• request 默认 withCredentials: true
• 路由守卫首次进入时调 /api/user/info 探活，能拉到用户信息即视为已登录，结果缓存在 store
• 任意接口返回 401 时清空登录态并跳登录页，skipAuthRedirect: true 可让调用方自行处理

添加组件

npx shadcn-vue@latest add dialog table select

生成到 src/components/ui/，直接用项目令牌，无需改动。注册表生成的代码从 lucide-vue-next 导入图标，该包已更名为 @lucide/vue，已在 vite.config.js 和 jsconfig.json 里做别名重定向。

设计令牌

src/style.css 一处集中定义，采用 shadcn 官方 neutral 基色，另补齐 success / warning。只做 light 模式：dark variant 被绑定到永不出现的 .dark 类，因此组件里的 dark: 类恒不生效，无需手工删除。

接口约定

响应体 { code, msg, data }，code === 0 为成功，拦截器直接返回 data；否则 reject 一个带 code 的 Error。