# dataV_vue

**Repository Path**: phoenix_pond_chant/data-v_vue

## Basic Information

- **Project Name**: dataV_vue
- **Description**: https://gitee.com/phoenix_pond_chant/data-v_vue
- **Primary Language**: Python
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-08
- **Last Updated**: 2026-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DataV Vue 2026

<p align="center">
  <img src="./public/logo.svg" width="120" alt="DataV Vue 2026 Logo">
</p>

<p align="center">
  <a href="https://vuejs.org/">
    <img src="https://img.shields.io/badge/Vue-3.4-4FC08D?logo=vue.js" alt="Vue 3.4">
  </a>
  <a href="https://www.typescriptlang.org/">
    <img src="https://img.shields.io/badge/TypeScript-5.0-3178C6?logo=typescript" alt="TypeScript 5.0">
  </a>
  <a href="https://vitejs.dev/">
    <img src="https://img.shields.io/badge/Vite-5.0-646CFF?logo=vite" alt="Vite 5.0">
  </a>
  <a href="https://echarts.apache.org/">
    <img src="https://img.shields.io/badge/ECharts-5.0-AA344D?logo=apache-echarts" alt="ECharts 5.0">
  </a>
</p>

<p align="center">
  <b>下一代数据可视化大屏解决方案</b>
</p>

<p align="center">
  Glassmorphism 设计 · Vue 3.4 · TypeScript · Vite · 配置驱动
</p>

---

## ✨ 核心特性

### 🎨 现代化设计
- **Glassmorphism** 玻璃态设计语言
- 流体渐变动画效果
- 微交互动画系统
- 多主题配色方案（默认/海洋/日落/森林）

### ⚡ 极致性能
- **Vite 5** 极速构建（冷启动 < 300ms）
- Vue 3.4 Composition API
- 自动代码分割与懒加载
- 响应式布局适配全设备

### 📊 配置驱动
- JSON 配置生成图表
- 拖拽式布局编辑
- 实时数据流支持
- 组件热插拔

### 🔄 实时数据
- WebSocket + SSE 双支持
- 自动降级策略
- 心跳保活机制
- 断线自动重连

---

## 🚀 快速开始

### 环境要求
- Node.js >= 18.0.0
- npm >= 9.0.0 或 pnpm >= 8.0.0

### 安装

```bash
# 克隆仓库
git clone https://gitee.com/phoenix_pond_chant/data-v-vue-2026.git
cd data-v-vue-2026

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### 构建

```bash
# 生产构建
npm run build

# 预览生产构建
npm run preview
```

---

## 📁 项目结构

```
data-v-vue-2026/
├── public/                 # 静态资源
├── src/
│   ├── components/         # 组件
│   │   ├── charts/        # 图表组件
│   │   ├── data/          # 数据展示组件
│   │   ├── glass/         # 玻璃态组件
│   │   └── layout/        # 布局组件
│   ├── composables/        # 组合式函数
│   │   ├── useChartConfig.ts   # 图表配置
│   │   ├── useDataStream.ts    # 数据流
│   │   └── useNumberAnimation.ts  # 数字动画
│   ├── router/            # 路由配置
│   ├── stores/            # Pinia 状态管理
│   ├── styles/            # 全局样式
│   │   ├── animations.scss    # 动画
│   │   ├── glassmorphism.scss # 玻璃态
│   │   ├── index.scss         # 入口
│   │   └── variables.scss     # 变量
│   ├── types/             # TypeScript 类型
│   ├── views/             # 页面视图
│   │   ├── HomeView.vue       # 首页
│   │   ├── DashboardView.vue  # 大屏
│   │   ├── ConfigView.vue     # 配置
│   │   └── NotFoundView.vue   # 404
│   ├── App.vue
│   └── main.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── unocss.config.ts
```

---

## 🎯 使用指南

### 添加图表组件

```typescript
import { useChartConfig } from '@/composables/useChartConfig'

const { addConfig } = useChartConfig()

// 添加一个折线图
addConfig({
  type: 'line',
  title: '销售趋势',
  dataSource: {
    type: 'static',
    data: {
      categories: ['1月', '2月', '3月'],
      series: [{ name: '销售额', data: [120, 200, 150] }]
    }
  }
})
```

### 配置实时数据流

```typescript
import { useDataStream } from '@/composables/useDataStream'

const { data, state } = useDataStream({
  url: 'wss://api.example.com/realtime',
  type: 'ws',
  fallback: {
    type: 'sse',
    url: '/api/sse'
  },
  retry: {
    max: 5,
    delay: 1000
  },
  onMessage: (data) => {
    console.log('Received:', data)
  }
})
```

### 使用数字动画

```vue
<script setup>
import { useNumberAnimation } from '@/composables/useNumberAnimation'

const { formattedValue } = useNumberAnimation(ref(123456), {
  prefix: '¥',
  decimals: 0,
  duration: 2000
})
</script>

<template>
  <div>{{ formattedValue }}</div>
</template>
```

---

## 🎨 主题定制

### 切换主题

```typescript
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()

// 切换预设主题
themeStore.setTheme('ocean')  // 默认/海洋/日落/森林

// 切换模式
themeStore.setMode('dark')    // dark/light/auto

// 调整玻璃效果
themeStore.setGlassConfig(30, 0.15)  // blur, opacity
```

### 自定义主题配色

编辑 `src/stores/theme.ts`：

```typescript
const themePresets: Record<string, ThemeColors> = {
  myTheme: {
    primary: '#your-color',
    secondary: '#your-color',
    // ...
  }
}
```

---

## 📊 支持的图表类型

| 类型 | 组件 | 说明 |
|------|------|------|
| 折线图 | line | 支持多系列、平滑曲线、面积填充 |
| 柱状图 | bar | 支持分组、堆叠、圆角 |
| 饼图 | pie | 支持环形、玫瑰图 |
| 仪表盘 | gauge | 支持自定义范围、刻度 |

---

## 🛠️ 开发指南

### 代码规范

```bash
# 类型检查
npm run type-check

# 代码检查
npm run lint

# 运行测试
npm run test
```

### 提交规范

- `feat`: 新功能
- `fix`: 修复
- `docs`: 文档
- `style`: 格式
- `refactor`: 重构
- `test`: 测试
- `chore`: 构建

---

## 📄 许可证

[MIT](./LICENSE)

---

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

<p align="center">
  Made with ❤️ by <a href="https://gitee.com/phoenix_pond_chant">凤池吟</a>
</p>