[!info] related notes

• Clash
• [[sub-store]]
• TUN Mode
• V2Ray
• sparkle

---

Zashboard 学习文档（zashboard）

基于通用学习模板，为 Zashboard 量身定做的结构化笔记文档，用于初学、回顾、扩展。

---

1. 概览（Overview）

• Zashboard 是什么？
  • （Zashboard 是一个现代化的仪表盘构建框架，可以快速构建可视化页面、展示数据、监控系统状态，并支持高度扩展的自定义组件机制。
• 作用 / 适用场景
  • 快速构建可视化界面
  • 数据监控平台
• 一句话总结
  • “Zashboard = 一个用于创建可扩展 dashboard 的现代化工具。”

---

2. 关键概念（Core Concepts）

• Widget：仪表组件
• Data Source：数据来源配置
• Layout：布局系统
• 扩展模块：插件或自定义组件

核心概念包括：

• Dashboard：仪表盘页面集合
• Widget：可视化组件，如图表、统计卡、列表
• Data Source：数据来源，可为 REST API、WebSocket 或本地数据
• Layout Engine：栅格化布局系统，支持拖拽与响应式
• Theme：暗色、亮色、自定义主题

---

3. 安装与环境准备（Installation / Setup）

• 安装方式
  • npm / yarn 安装
  • 或者 Docker 启动
• 需求
  • Node.js version?
  • 浏览器兼容性
• 配置步骤
  • 项目初始化
  • 配置文件位置

---

4. 快速开始（Quick Start）

创建项目

npx zashboard create my-dashboard
cd my-dashboard
npm install
npm run dev

添加第一个 Widget

在 dashboards/home.json：

{
  "widgets": [
    {
      "type": "stat",
      "title": "今日访问量",
      "dataSource": "traffic_api"
    }
  ]
}

配置数据源

在 config/data-sources.json：

{
  "traffic_api": {
    "type": "rest",
    "url": "https://api.example.com/traffic"
  }
}

---

5. 进阶使用（Advanced Usage）

自定义组件（Widget）

创建自定义组件：widgets/MyChartWidget.js

• 实现 render() 方法
• 支持接入 ECharts、Chart.js 等图表库

数据刷新方式

• interval 定时刷新
• WebSocket 实时数据

权限与用户系统（如启用）

• 角色分级
• 用户自定义仪表盘布局
• 自定义组件开发流程
• API 交互方式
• 高级布局 / 动画

---

6. 目录结构（Project Structure）

zashboard-project/
  ├── config/
  ├── src/
  ├── dashboards/
  ├── widgets/
  └── ...

• config：存放全局配置
• dashboards：各个仪表盘定义
• widgets：所有组件

---

7. 常见问题（FAQ）

Widget 不显示？

• 检查 type 是否存在
• JSON 是否合法
• 控制台报错？

数据源无响应？

• API 是否需要 Token
• URL/CORS 是否正确
• 后端是否返回正确 JSON

布局错乱？

• Widget 是否设置最小尺寸
• 修改后需重启 Dev Server

---

8. 排错指南（Debug / Troubleshooting）

• 检查数据源连接状态
• 查看控制台日志
• 配置文件路径确认

---

9. 最佳实践（Best Practices）

• 模块化管理 widgets
• 多环境配置（dev/stage/prod）
• 性能优化

---

10. 资源与参考（Resources）

• 官方文档链接（待补）
• 示例项目
• 第三方教学视频

---

11. 个人笔记（Personal Notes）

• 使用经验
• 常见组件封装方式
• 待学习列表