npm package: @simonsxiang/bloodline-cockpit
Description: 血缘驾驶舱 - 主数据管理可视化组件库 (Vue 3)
Author: Your Name
Latest version: 1.1.0

# 🩸 血缘驾驶舱 (Bloodline Cockpit)

> 数据血缘可视化系统 - 支持多主题切换的大屏展示组件库

![Vue](https://img.shields.io/badge/Vue-3.x-4FC08D?logo=vue.js)
![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript)
![Vite](https://img.shields.io/badge/Vite-7.x-646CFF?logo=vite)
![License](https://img.shields.io/badge/License-MIT-green)

## 📸 预览

数据血缘可视化大屏，支持部门-分类关联展示、全量关系网络图、5 层级血缘流向图等功能。

**支持主题：**

- 🌙 **深色科技主题** (dark) - 青色发光效果、流光动画、深蓝背景
- 🏛️ **政务蓝白主题** (government) - 浅蓝背景、政务蓝色调、适合政府系统

## ✨ 功能特性

- 🎨 **多主题支持** - 深色科技风格 / 政务蓝白风格，一键切换
- 🔄 **自动轮播** - 部门/分类列表自动轮播展示
- 🕸️ **关系网络图** - 55 个部门 × 10 个分类的全量关系展示
- 🌊 **血缘流向图** - 5 层级数据血缘可视化 (部门 → 数据集 → 表 → 明细 → 分类)
- ✨ **流光动画** - SVG 贝塞尔曲线 + 粒子流动效果
- 🖱️ **交互高亮** - 悬停节点时高亮相关上下游连接

## 🖥️ 页面结构

| 页面   | 功能     | 说明                                 |
| ------ | -------- | ------------------------------------ |
| 页面 1 | 全览模式 | 部门/分类弧形列表轮播 + 中心圆环统计 |
| 页面 2 | 部门详情 | 点击部门 → 放射状连接线展示关联分类  |
| 页面 3 | 分类详情 | 点击分类 → 汇聚连接线展示关联部门    |
| 页面 4 | 全量网络 | 全屏模态框展示 55×10 关系网络图      |
| 页面 5 | 血缘流向 | 5 层级血缘图 + 底部分类导航          |
| 页面 6 | 字段展开 | 数据集字段详情面板 (开发中)          |

## 🛠️ 技术栈

- **框架**: Vue 3 + Composition API
- **构建**: Vite 7
- **语言**: TypeScript 5
- **状态管理**: Pinia
- **UI 组件**: Ant Design Vue 4
- **图标**: @ant-design/icons-vue
- **动画**: CSS3 + SVG + GSAP

## 🚀 快速开始

### 环境要求

- Node.js >= 18
- pnpm >= 8

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
pnpm build
```

## 📁 项目结构

```
src/
├── components/
│   ├── page1/          # 全览模式组件
│   │   ├── ArcList.vue           # 弧形列表
│   │   ├── CenterRing.vue        # 中心圆环
│   │   ├── ConnectionArcs.vue    # 连接弧线
│   │   └── BottomStatistics.vue  # 底部统计
│   ├── page2/          # 连接线组件
│   ├── page4/          # 全量网络模态框
│   └── page5/          # 血缘流向图
├── views/
│   └── MasterDataPage.vue   # 主页面
├── mock/               # Mock数据
├── store/              # Pinia状态管理
├── types/              # TypeScript类型
└── styles/             # 全局样式
```

## 🎨 主题使用

### 基础用法

通过 `theme` prop 切换主题：

```vue
<template>
  <BloodlineCockpit :theme="currentTheme" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { BloodlineCockpit } from "@simonsxiang/bloodline-cockpit";

const currentTheme = ref<"dark" | "government">("dark");

// 切换主题
const toggleTheme = () => {
  currentTheme.value = currentTheme.value === "dark" ? "government" : "dark";
};
</script>
```

### 可用主题

| 主题值       | 说明                 | 效果                       |
| ------------ | -------------------- | -------------------------- |
| `dark`       | 深色科技主题（默认） | 深蓝背景、青色发光、科技感 |
| `government` | 政务蓝白主题         | 浅蓝背景、政务蓝色调、简洁 |

### 主题 CSS 变量

组件使用 CSS 变量实现主题化，主要变量包括：

```css
/* 主色调 */
--bc-primary-color        /* 主色 */
--bc-primary-color-glow   /* 发光色 */

/* 背景 */
--bc-bg-card              /* 卡片背景 */
--bc-modal-backdrop       /* 模态框背景 */

/* 文字 */
--bc-text-color           /* 主文字 */
--bc-text-color-secondary /* 次要文字 */

/* 边框和阴影 */
--bc-border-color         /* 边框色 */
--bc-shadow-glow          /* 发光阴影 */
```

---

## 📄 文档

- [开发进度](./PROGRESS.md) - 详细开发记录
- [开发计划](./DEVELOPMENT_PLAN.md) - 需求设计文档
- [主题开发计划](./docs/THEME_DEVELOPMENT_PLAN.md) - 多主题适配进度
- [API 数据结构](./docs/API_DATA_STRUCTURE.md) - 后端接口文档

## 📝 License

MIT License © 2025