---
name: fms-vue业务架构搭建
overview: 参考 fms-vue-old2 搭建 fms-vue 的业务架构：迁移 api 请求层（TS→JS）、auth 登录态 store（localStorage 持久化）、路由（登录守卫 + NProgress），App.vue 改为 router-view 业务壳，新增登录页与 dashboard 临时占位页，组件库 demo 挂到 /demo 路由保留。
design:
  architecture:
    framework: vue
  styleKeywords:
    - 现代企业
    - 简洁克制
    - 居中卡片
    - 柔和阴影
    - 加载动效
  fontSystem:
    fontFamily: Noto Sans SC
    heading:
      size: 24px
      weight: 600
    subheading:
      size: 14px
      weight: 500
    body:
      size: 14px
      weight: 400
  colorSystem:
    primary:
      - "#0f172b"
      - "#ffffff"
    background:
      - "#f5f6f8"
      - "#ffffff"
    text:
      - "#1f2329"
      - "#86909c"
      - "#ffffff"
    functional:
      - "#ef4444"
      - "#16a34a"
      - "#f59e0b"
todos:
  - id: migrate-services
    content: 迁移 services/http.js、services/api.js 与 stores/auth.js 为 JS（接口与持久化逻辑同 old2）
    status: completed
  - id: rewrite-router
    content: 重写 router/index.js：/login、/dashboard、/demo、404 路由 + NProgress + 登录守卫
    status: completed
    dependencies:
      - migrate-services
  - id: login-page
    content: 用自研组件实现登录页与 dashboard 占位页，参考 [skill:ui-ux-pro-max] 完成视觉设计
    status: completed
    dependencies:
      - rewrite-router
  - id: app-entry-demo
    content: 改造 App.vue 为业务入口，迁移 demo 壳至 views/demo/index.vue 并挂 /demo 路由
    status: completed
    dependencies:
      - rewrite-router
---

## 产品概述

将 fms-vue（当前为纯组件库 demo 项目）升级为业务应用骨架，路由、缓存等架构参考 fms-vue-old2，api 请求接口不变（TS 转 JS）。本次交付：路由、App.vue 业务入口、登录页及登录链路，组件库 demo 保留在 /demo 路由。

## 核心功能

- 路由体系：/login（登录页）、/dashboard（临时占位页，登录后落地）、/demo（组件库展示页保留）、catchAll 重定向；NProgress 顶部进度条
- 登录守卫：未登录访问受保护页自动跳 /login?redirect=xxx，已登录访问 /login 自动跳 /dashboard（本次不做权限校验）
- 登录页：机构码 + 账号 + 密码，回车/按钮提交，登录成功写入会话并跳转，失败 Message 提示；用 fms-vue 自研组件（Form/Input/Button/Message）实现
- api 服务：axios 实例 + 统一响应结构处理 + 401/40101 自动登出跳转；登录/数据查询等接口函数保持与 old2 完全一致（仅 TS 转 JS）
- 认证缓存：auth store 持久化到 localStorage（key: fms-auth），刷新页面保持登录态
- App.vue 改为纯业务入口（router-view），原组件 demo 壳迁移为独立页面

## 技术栈

- Vue 3.5 + Vite 8（vite.config.js 已有 @ 别名、端口 5082）
- vue-router 5 + Pinia + pinia-plugin-persistedstate + axios + nprogress + @lucide/vue（全部为现有依赖，不新增）
- 纯 JavaScript（用户明确要求 TS 转 JS），自研组件库实现 UI

## 实现方案

- 分层架构：views（页面）→ router（路由+守卫）→ stores（状态+持久化）→ services（http 封装 + api 接口）
- http.js 沿用 old2 的拦截器模式：请求拦截器在调用时注入 Bearer token（拦截器内部调用 useAuthStore，保证 pinia 激活）；响应拦截器统一按 ApiResult 结构（code===0 成功）处理，401/40101 清会话并跳转 /login?reason=，业务错误抛 Error（message 可直接提示）
- auth.js 沿用 old2 的 persist 配置：key="fms-auth"、storage=localStorage、pick=["token","orgId","user"]，保留 sessionStorage 迁移逻辑；isAuthenticated 由 token 派生
- 路由守卫：beforeEach 中 NProgress.start + 登录判定（requiresAuth meta），afterEach NProgress.done；本次不含 permissions 权限校验
- 登录页 UI 用自研组件：Form（vertical 布局 + required 校验）包裹 Input（prefix 图标插槽）、Button（loading/block），Message 命令式提示；不引入 vee-validate/zod/vue-sonner
- 保留现有主题体系（stores/app.js、tokens.css、initThemeSync、index.html 防闪烁脚本）不动

## 架构与数据流

```mermaid
flowchart LR
    A[用户访问 /] --> B{router.beforeEach}
    B -->|未登录| C[/login?redirect=xxx/]
    B -->|已登录| D[/dashboard/ 占位页]
    C --> E[login/index.vue]
    E -->|loginApi| F[http.js axios 实例]
    F -->|Bearer token| G[后端 /api]
    E -->|setSession| H[auth store 持久化 fms-auth]
    E -->|router.replace redirect| D
    G -->|401/40101| I[清会话 + 跳登录]
```

## 目录结构（变更清单）

```
fms-vue/
├── src/
│   ├── services/
│   │   ├── http.js            # [NEW] axios 实例 + 拦截器（TS 转 JS，逻辑与 old2 一致）
│   │   └── api.js             # [NEW] 接口函数：loginApi/loadDataApi/loadDataBySqlApi/pageDataApi/saveObjectApi/nextIdApi/nextCodeApi/describeApi（路径参数完全不变）
│   ├── stores/
│   │   ├── auth.js            # [NEW] 认证 store：token/orgId/user/isAuthenticated + setSession/clearSession，persist key=fms-auth
│   │   └── app.js             # 现有主题 store，保持不动
│   ├── router/
│   │   └── index.js           # [MODIFY] 重写：路由表 + NProgress + 登录守卫（懒加载视图）
│   ├── views/
│   │   ├── login/index.vue    # [NEW] 登录页：Form+Input+Button+Message，逻辑与 old2 一致
│   │   ├── dashboard/index.vue# [NEW] 临时占位页（标题+建设中提示）
│   │   └── demo/index.vue     # [NEW] 原 App.vue demo 壳整体迁移，import 改 @/ 别名
│   ├── App.vue                # [MODIFY] 改为业务入口：仅 <router-view />
│   └── main.js                # 保持现状（pinia/persist/router/initThemeSync 已就绪）
├── index.html                 # [MODIFY] title 改为 FMS（防闪烁脚本无需改）
└── vite.config.js             # 保持现状
```

## 关键约定

- http.js 响应结构：`{ success, code, message, data }`，无 code 字段时按成功透传
- 登录成功跳转：`router.replace(route.query.redirect || '/dashboard')`
- 登录页 onMounted 回填 authStore 的 orgId 与 user.account，聚焦机构码输入框
- 不主动执行构建/测试；交付后仅静态检查，并说明手动验证路径

## 设计风格

登录页采用现代企业 SaaS 风格，与现有 fms-vue 组件库视觉语言（--fms-* token）完全一致：浅灰背景 + 白色居中卡片，卡片带柔和阴影与圆角；品牌区展示 FMS Logo 与标题，表单区为机构码/账号/密码三个图标前缀输入框 + 通栏主色登录按钮；提交时按钮 loading 态，错误用 Message 顶部提示。整体简洁克制，信息层级清晰，支持深色模式（复用现有 tokens）。

## 页面布局（自上而下分块）

1. 全屏容器：flex 居中，背景 --fms-background，适配小屏（min-height: 100svh、p-6）
2. 品牌块：居中 Logo 图标 + "登录 FMS" 标题（约 24px 加粗）
3. 提示条（可选）：reason=expired/session-replaced 时展示琥珀色警示条
4. 登录表单：Form vertical 布局，三个 Input（Building2/User/KeyRound 前缀图标），必填红星，回车即提交
5. 提交按钮：Button block 通栏，submitting 时 loading 态并禁用

## Agent Extensions

### Skill

- **ui-ux-pro-max**
- 用途：登录页视觉设计参考——现代企业 SaaS 登录页的布局、配色、排版与微交互（加载态、焦点态）
- 预期结果：登录页 UI 在复用 fms-vue 自研组件与 --fms-* token 的前提下，达到专业、精致的企业级视觉效果