# code3

**Repository Path**: zhasd/code3

## Basic Information

- **Project Name**: code3
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-17
- **Last Updated**: 2026-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3 信息管理设计框架

Vue 3 + Vite + TypeScript + Vue Router + Pinia + Element Plus 的信息管理设计骨架：**演示登录（无接口）**、**静态菜单**、**国网绿 / 科技蓝 / GIS 靛幕** 三套主题、**侧栏 / 顶部** 菜单布局切换。

## 框架设计说明

系统分层与约定见 **[docs/framework-design.md](docs/framework-design.md)**。

## 更新说明

版本与变更记录见 **[docs/更新说明.md](docs/更新说明.md)**（**每次发版或合并一批改动时请同步更新**，并与 `package.json` 的 `version` 保持一致）。

## 环境要求

- 推荐使用 **Node.js 18+**（当前依赖锁定在 **Vite 4**，以便在 Node 16 上仍可构建；升级 Node 后可酌情升到 Vite 5/6）。
- 包管理：`npm`

## 常用命令

```bash
npm install
npm run dev
npm run build
npm run preview
```

开发默认地址：<http://localhost:5173>

## 演示说明

- **登录**：任意非空用户名与密码即可（默认用户名 `admin`）；会话写在 `sessionStorage`，关闭标签页即失效。
- **主题 / 菜单布局 / 退出**：点击右上角 **头像** 打开「个人中心」下拉设置；主题写入 `localStorage` 键 `app-theme`，菜单布局写入 `app-menu-mode`。
- **顶栏**：左侧为实时时间（`YYYY-MM-DD HH:mm:ss`），其右侧为登录姓名，再右侧为头像（图片为 `public/user-avatar.png`，可替换；加载失败则显示默认用户图标）。
- **静态菜单**：在 [src/constants/menus.ts](src/constants/menus.ts) 与 [src/router/routes.ts](src/router/routes.ts) 中维护，保持路径与 `name` 一致即可。

## 目录结构（已实现）

与 `docs/framework-design.md` 一致，核心为 `src/layouts`、`src/router`、`src/stores`、`src/constants/menus.ts`、`src/utils/request.ts`（预留 axios 实例）。

## 内容区规范

- **面包屑**：由 `MainLayout` 内嵌的 `PageChrome` 统一渲染（**不再展示页面大标题**，以面包屑为准），数据来自当前路由与 `src/constants/menus.ts`（`src/utils/breadcrumb.ts`）。
- **间距**：内容区外边距与区块间距统一为 **10px**（`--page-spacing`，见 `src/styles/main.css`）。
- **查询 + 表格页**：使用 `src/components/QueryTablePage.vue`（面包屑卡片 + 查询区卡片 + 表格区卡片）；**查询与表格间距 10px**、表格高度 **随剩余视口自适应**（`ResizeObserver` + 默认插槽 `{ height }` 绑定 `el-table`，**无分页**）、**底部留白约 10px**；表头颜色见 `main.css`（`--el-color-primary`，随国网绿/科技蓝切换）；表格操作列「修改」为 **文字 link 按钮 + 图标**。
- **弹窗**：通用 **`DraggableDialog`**（`src/components/DraggableDialog.vue`）支持 **标题栏拖拽**；用户 / 角色 / 字典为 **新增 + 修改 + 批量删除**；菜单为 **树表 + 按类型的新增/编辑**（见各 `views/system/*/components/`）。
- **滚动**：仅右侧 **页面视口**（`.page-viewport`）滚动，避免整页双滚动条。