跳到正文
GitHub·· 7 天前AI 评分12

YYC³ Cloud Intelli-Matrix:智能监控与运维平台功能矩阵与架构

YYC-Cube/YYC3-Cloud-Intelli-Matrix

AI 导读

YYC-Cube 的 YYC³ Cloud Intelli-Matrix 是一个智能监控与运维平台,提供数据监控、巡查管理、操作中心、AI 辅助、多数据库支持与离线同步等功能,覆盖 Web、Desktop、PWA、Mobile 四端。

正文

📊 功能矩阵 | Feature Matrix

功能模块 描述 Web Desktop PWA Mobile
📊 数据监控 实时节点状态、QPS、延迟监控 ✅ ✅ ✅ ✅
🔍 巡查管理 自动化巡查计划与报告生成 ✅ ✅ ✅ ✅
⚙️ 操作中心 快速操作、模板管理、日志流 ✅ ✅ ✅ ✅
🤖 AI 辅助 智能决策、模式识别、NLP ✅ ✅ ✅ ✅
🗄️ 数据库 PostgreSQL/MySQL/MongoDB ✅ ✅ ✅ ✅
🔄 离线同步 Service Worker + IndexedDB ✅ ✅ ✅ ✅
🖥️ 系统桥接 Electron IPC 通信 ❌ ✅ ❌ ❌
🔔 原生通知 系统级通知推送 ⚠️ ✅ ✅ ✅

🤖 AI Family 角色体系 | AI Family Roles

YYC³ Cloud Intelli-Matrix 内置 8 种拟人化 AI 角色构成完整的智能协作体系:

角色 名称 色彩 职责 核心能力
🎧 navigator 言启·千行 #FFD700 系统的「耳朵」与「翻译官」 语音识别 · NLP · 多语言翻译
🧠 thinker 语枢·万物 #FF69B4 系统的「哲学家」与「分析师」 深度推理 · 逻辑分析 · 知识图谱
👁️ prophet 预见·先知 #00BFFF 系统的「预言家」 时序预测 · 趋势分析 · 异常预警
⭐ bolero 千里·伯乐 #E8E8E8 系统的「人才官」与「推荐引擎」 智能推荐 · 资源匹配 · 评分系统
🌐 meta-oracle 元启·天枢 #00FF88 YYC3 的「大脑」与「总指挥」 强化学习 · 运筹优化 · 分布式调度
🛡️ sentinel 智云·守护 #BF00FF 系统的「免疫系统」与「首席安全官」 UEBA · 异常检测 · SOAR 安全编排
⚖️ master 格物·宗师 #C0C0C0 系统的「质量官」与「进化导师」 SAST · 性能分析 · LLM 代码理解
💡 creative 创想·灵韵 #FF7043 系统的「创意引擎」与「设计助手」 生成式 AI · 多模态创作 · 设计思维

🏨 智慧酒店控制台 | Smart Hotel Console

AI Family 角色自动映射到酒店业务场景:

酒店角色 AI Family 角色 业务职责
前台接待 🎧 千行 (navigator) 客户接待、语音交互
礼宾服务 ⭐ 伯乐 (bolero) 智能推荐、资源匹配
酒店经理 🌐 天枢 (meta-oracle) 全局调度、智能编排
安全保卫 🛡️ 守护 (sentinel) 安全监控、威胁检测
IT支持 ⚖️ 宗师 (master) 代码审查、性能分析
市场营销 💡 灵韵 (creative) 创意生成、多模态设计
财务管理 🧠 万物 (thinker) 数据分析、逻辑推理
客户关系 👁️ 先知 (prophet) 预测分析、趋势洞察

🏗️ 系统架构 | Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│                        YYC³ Cloud Intelli-Matrix                            │
│                      智能监控与运维平台架构图                                │
└─────────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────────┐
│  📱 表现层 | Presentation Layer                                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐   │
│  │   Desktop    │  │    Tablet    │  │    Mobile    │  │   PWA App    │   │
│  │  (Electron)  │  │   (Web)      │  │   (Web)      │  │  (Offline)   │   │
│  └──────────────┘  └──────────────┘  └──────────────┘  └──────────────┘   │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  🎨 视图层 | View Layer                                                     │
│  ┌──────────────────────────────────────────────────────────────────────┐  │
│  │  React 19 + TypeScript 5.9 (Strict Mode) + React Router 7           │  │
│  ├──────────────────────────────────────────────────────────────────────┤  │
│  │  Tailwind CSS 4 + Motion 12 + Radix UI + Lucide Icons               │  │
│  └──────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  🎭 状态层 | State Layer                                                    │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐          │
│  │   React    │  │   Custom   │  │   Local    │  │  IndexedDB │          │
│  │   Context  │  │   Hooks    │  │  Storage   │  │   Cache    │          │
│  └────────────┘  └────────────┘  └────────────┘  └────────────┘          │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  📊 数据层 | Data Layer                                                     │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐          │
│  │  WebSocket │  │  REST API  │  │  Supabase  │  │  Recharts  │          │
│  │  Realtime  │  │  Client    │  │   Auth     │  │  Charts    │          │
│  └────────────┘  └────────────┘  └────────────┘  └────────────┘          │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  🤖 AI 智能层 | AI Intelligence Layer                                       │
│  ┌──────────────────────────────────────────────────────────────────────┐  │
│  │  AI SDK + Decision Engine + Pattern Analyzer + NLP Processor        │  │
│  └──────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  🗄️ 存储层 | Storage Layer                                                 │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐          │
│  │ PostgreSQL │  │   MySQL    │  │  MongoDB   │  │  Electron  │          │
│  │  (Primary) │  │ (Optional) │  │ (Optional) │  │    IPC     │          │
│  └────────────┘  └────────────┘  └────────────┘  └────────────┘          │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  🔧 基础设施层 | Infrastructure Layer                                       │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐          │
│  │    Vite    │  │   Vitest   │  │   Docker   │  │   GitHub   │          │
│  │   Build    │  │   Test     │  │  Deploy    │  │   Actions  │          │
│  └────────────┘  └────────────┘  └────────────┘  └────────────┘          │
└─────────────────────────────────────────────────────────────────────────────┘

🛠️ 技术栈 | Tech Stack

核心框架 | Core Frameworks

技术 版本 描述 官网
React 19.2.4 UI 框架,支持并发特性与 Server Components react.dev
TypeScript 5.9.3 类型安全,严格模式,零运行时错误 typescriptlang.org
React Router 7.13.1 路由管理,Data Mode,懒加载 reactrouter.com

样式与 UI | Styling & UI

技术 版本 描述 官网
Tailwind CSS 4.2.1 原子化 CSS,JIT 编译,零运行时 tailwindcss.com
Motion 12.34.5 高性能动画库,GPU 加速 motion.dev
Radix UI 1.x 无头组件库,可访问性优先 radix-ui.com
Lucide 0.576.0 现代化图标库,Tree-shakable lucide.dev

构建与测试 | Build & Test

技术 版本 描述 官网
Vite 7.3.1 极速构建工具,ESM 优先 vitejs.dev
Vitest 4.0.18 单元测试框架,Vite 原生支持 vitest.dev
Testing Library 16.x React 测试工具,用户行为模拟 testing-library.com

数据与可视化 | Data & Visualization

技术 版本 描述 官网
Recharts 3.7.0 响应式图表库,React 原生 recharts.org
Supabase 2.98.0 后端即服务,认证与数据库 supabase.com

桌面与部署 | Desktop & Deployment

技术 版本 描述 官网
Electron 28.0.0 跨平台桌面应用框架 electronjs.org
Docker - 容器化部署,多阶段构建 docker.com

🚀 快速开始 | Quick Start

📋 环境要求 | Prerequisites

依赖 版本要求 检查命令 安装指南
Node.js ≥ 18.x (推荐 20.x LTS) node -v nodejs.org
pnpm ≥ 8.x pnpm -v corepack enable pnpm
Git 最新版 git --version git-scm.com

⚡ 5 分钟快速上手

# 1️⃣ 克隆项目
git clone https://github.com/YYC-Cube/YYC3-Cloud-Intelli-Matrix.git
cd YYC3-Cloud-Intelli-Matrix

# 2️⃣ 安装依赖
pnpm install

# 3️⃣ 启动开发服务器
pnpm dev

# 4️⃣ 浏览器访问
# http://localhost:3218

🔧 详细安装步骤

📦 步骤 1: 克隆项目

# HTTPS 方式
git clone https://github.com/YYC-Cube/YYC3-Cloud-Intelli-Matrix.git

# SSH 方式 (推荐)
git clone git@github.com:YYC-Cube/YYC3-Cloud-Intelli-Matrix.git

# GitHub CLI
gh repo clone YYC-Cube/YYC3-Cloud-Intelli-Matrix

# 进入项目目录
cd YYC3-Cloud-Intelli-Matrix

📥 步骤 2: 安装依赖

# 安装 pnpm (如果未安装)
corepack enable
corepack prepare pnpm@latest --activate

# 安装项目依赖
pnpm install

# 验证安装
pnpm list --depth=0

⚙️ 步骤 3: 环境配置

# 复制环境变量模板
cp .env.example .env

# 编辑环境变量 (可选)
# vim .env 或使用您喜欢的编辑器

环境变量说明:

变量名 必需 默认值 说明
VITE_SUPABASE_URL ❌ - Supabase 项目 URL
VITE_SUPABASE_ANON_KEY ❌ - Supabase 匿名密钥
VITE_OLLAMA_URL ❌ http://localhost:11434 Ollama API 地址
VITE_YYC3_ZHIPU_API_KEY ❌ - 智谱 AI API Key
VITE_YYC3_DEEPSEEK_API_KEY ❌ - DeepSeek API Key
VITE_YYC3_OLLAMA_BASE_URL ❌ http://localhost:11434 Ollama 服务地址

💡 提示: 不配置环境变量时,系统将自动进入 Ghost Mode (开发模式)

🚀 步骤 4: 启动开发服务器

# Web 开发模式
pnpm dev

# Electron 桌面应用开发模式
pnpm electron:dev

# 指定端口
pnpm dev --port 3000

开发服务器启动信息:

  VITE v7.3.1  ready in 234 ms

  ➜  Local:   http://localhost:3218/
  ➜  Network: http://192.168.1.100:3218/
  ➜  press h + enter to show help

🧪 运行测试

# 运行所有测试
pnpm test

# 监听模式 (开发推荐)
pnpm test:watch

# 生成覆盖率报告
pnpm test:coverage

# CI 模式 (分片执行)
pnpm test:ci

# UI 模式 (可视化测试)
pnpm test:ui

🏗️ 构建生产版本

# 标准构建
pnpm build

# 带分析报告的构建
pnpm build:analyze

# Electron 桌面应用构建
pnpm build:electron      # 当前平台
pnpm build:mac           # macOS (arm64 + x64)
pnpm build:win           # Windows (x64)
pnpm build:linux         # Linux (AppImage + deb)

构建输出示例:

✓ 2731 modules transformed.
✓ built in 6.42s

dist/index.html                  1.48 kB │ gzip:  0.65 kB
dist/assets/index-CSS.css       143.07 kB │ gzip: 21.59 kB
dist/assets/react-vendor.js     228.83 kB │ gzip: 75.01 kB
dist/assets/charts-vendor.js    442.94 kB │ gzip:116.90 kB
dist/assets/index.js            275.69 kB │ gzip: 80.45 kB

✅ 优化成果:
- 初始 JS 减少 82% (1.54MB → 275KB)
- 完整代码分割 + 路由懒加载
- Gzip 压缩后总大小: 295 KB

📖 使用指南 | Usage Guide

🔑 登录方式

方式 1: 正常登录 (Supabase 认证)

需要配置 VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY 环境变量。

方式 2: Ghost Mode (开发模式)

点击登录页 GHOST MODE 按钮跳过认证:

配置项 值
用户 ghost@yyc3.local
角色 developer
数据 仅 localStorage

⌨️ 快捷键

快捷键 功能 全局
Ctrl/⌘ + K 命令面板 (全局搜索) ✅
`Ctrl +`` 打开集成终端 ✅
Escape 关闭所有弹窗 ✅
Ctrl/⌘ + B 切换侧边栏 ✅
Ctrl/⌘ + Shift + F 全屏模式 ✅

🖥️ 界面导航

桌面端 (Sidebar)

📊 数据监控
   ├── 实时状态
   ├── QPS 趋势
   ├── 延迟分析
   └── 节点管理

🔍 巡查管理
   ├── 巡查计划
   ├── 巡查报告
   └── 历史记录

⚙️ 操作中心
   ├── 快速操作
   ├── 模板管理
   └── 操作日志

🤖 AI 辅助
   ├── 智能决策
   ├── 模式识别
   └── 自然语言

🎛️ 系统设置
   ├── 用户配置
   ├── 主题设置
   └── 数据管理

移动端 (BottomNav)

Tab 功能
📊 仪表盘 核心数据概览
🔍 巡查 巡查任务管理
⚙️ 操作 快速操作入口
🤖 AI AI 助手对话
📱 更多 设置与帮助

📊 性能指标 | Performance

构建性能

指标 值 说明
🚀构建时间 6.42s Vite 极速编译
📦主包大小 275 KB Gzip 压缩后
📦总包大小 1.09 MB 包含所有 chunks
🎯代码分割 5 chunks React/Vendor/Charts/UI/App
🔄HMR 速度 <50ms 热更新响应时间

运行时性能

指标 值 说明
⚡首屏加载 <1s 4G 网络环境
⚡TTI <1.5s 可交互时间
⚡FCP <0.8s 首次内容绘制
💾内存占用 ~50MB Chrome Tab
📱PWA 缓存 95%+ 离线可用率

测试覆盖

指标 值 说明
🧪测试用例 4,622 单元 + 集成测试
📁测试文件 264 覆盖核心模块
📊通过率 99.8% 4612/4622 通过
✅CI 强制 100% 主流程全部通过

Lighthouse 评分

类别 评分 说明
🎨Performance 95+ 性能优化
♿Accessibility 100 可访问性
✅Best Practices 100 最佳实践
🔍SEO 100 搜索优化
📱PWA ✅ PWA 就绪

🤝 贡献指南 | Contributing

我们欢迎所有形式的贡献!无论是报告 Bug、提出新功能、改进文档还是提交代码。

🌟 贡献者

📝 如何贡献

  1. Fork 项目 - 点击右上角 Fork 按钮
  2. 创建分支 - git checkout -b feature/amazing-feature
  3. 提交更改 - git commit -m 'feat: add amazing feature'
  4. 推送分支 - git push origin feature/amazing-feature
  5. 提交 PR - 创建 Pull Request

📋 提交规范

我们使用 Conventional Commits 规范:

<type>(<scope>): <subject>

<body>

<footer>

类型 (type):

类型 说明
feat 新功能
fix Bug 修复
docs 文档更新
style 代码格式 (不影响功能)
refactor 重构
perf 性能优化
test 测试相关
chore 构建/工具相关

🔍 代码审查

所有 PR 都需要通过以下检查:

  • ✅ TypeScript 类型检查
  • ✅ ESLint 代码规范
  • ✅ Prettier 格式化
  • ✅ 单元测试通过
  • ✅ 覆盖率达标

📖 开发指南

# 1. Fork 并克隆
git clone https://github.com/YOUR_USERNAME/YYC3-Cloud-Intelli-Matrix.git

# 2. 安装依赖
pnpm install

# 3. 创建功能分支
git checkout -b feature/your-feature

# 4. 开发并测试
pnpm dev
pnpm test

# 5. 代码检查
pnpm lint:fix
pnpm type-check

# 6. 提交代码
git add .
git commit -m "feat: your feature description"

# 7. 推送并创建 PR
git push origin feature/your-feature

🗺️ 路线图 | Roadmap

v1.0.0 (当前)

  • 核心监控功能
  • 巡查管理系统
  • 操作中心
  • AI 辅助功能
  • PWA 支持
  • Electron 桌面版
  • 国际化 (中/英)
  • AI Family 8种拟人化角色系统
  • 智慧酒店多模型协作控制台
  • 多模型提供商 (智谱/DeepSeek/Ollama)
  • GitHub Pages 自动部署 (matrix.yyc3.top)

v1.1.0 (计划中)

  • 仪表盘自定义布局
  • 更多图表类型
  • 告警规则引擎
  • 数据导出功能
  • 团队协作功能

v1.2.0 (规划中)

  • 插件系统
  • 自定义主题
  • 移动端原生 App
  • WebSocket 集群
  • AI 模型训练

长期目标

  • 微服务架构
  • Kubernetes 部署
  • 多租户支持
  • 企业级功能
  • 开源社区建设

❓ 常见问题 | FAQ

Q: 如何跳过登录直接使用?

A: 点击登录页的 GHOST MODE 按钮,系统将自动以开发模式登录,无需配置 Supabase。

Q: PWA 如何离线使用?

A: 首次访问后,应用会自动缓存到本地。之后即使断网也能访问已缓存的功能。点击地址栏右侧的"安装"按钮可将应用添加到桌面。

Q: 如何配置自己的 AI 模型?

A: 进入 系统设置 → AI 配置,添加您的模型供应商 (如 Ollama、OpenAI 等) 和 API 密钥即可。

Q: 数据存储在哪里?

A: 默认使用 localStorage 本地存储。配置 Supabase 后可同步到云端数据库,支持离线优先策略。

Q: 如何报告 Bug 或提出功能建议?

A: 请在 GitHub Issues 中提交,我们会及时处理。


📄 许可证 | License

本项目采用 MIT License 开源协议。

MIT License

Copyright (c) 2024 YYC³ Cube

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🙏 致谢 | Acknowledgments

🌟 开源项目

感谢以下开源项目的支持:

💖 特别感谢

感谢所有贡献者和用户的支持!


⬆ 返回顶部


Made with ❤️ by YYC³ Cube

GitHub · 在线演示 · Documentation · Changelog · Contributing


如果这个项目对您有帮助,请给我们一个 ⭐ Star!

Star History Chart

来源:GitHub · github.com