Cronix 管理后台

Cronix 后台管理系统（Shadcn UI + Tailwind + React），参考 Vercel 风格设计：登录、仪表盘、任务管理、执行记录、脚本管理、依赖管理、系统设置。预置深/浅色主题、侧边导航、顶部操作区、数据表格、表单模态、2FA 设置页。

• 🎨 基于 Shadcn UI 和 Tailwind CSS 的现代化界面
• 🌓 支持深色/浅色主题切换
• 📊 任务管理和执行记录监控
• 📝 脚本在线编辑器
• 📦 Python 依赖包管理
• 🔐 双因素认证 (2FA)
• 🔔 多渠道通知配置（Webhook、钉钉、Telegram）

项目支持通过环境变量配置 API 基础地址。

1. 复制 .env.example 文件为 .env：

cp .env.example .env

2. 编辑 .env 文件，配置 API 地址：

# API Base URL
# 默认为 /api，可以修改为完整的后端地址
VITE_API_BASE_URL=/api

# 或者使用完整地址
# VITE_API_BASE_URL=https://your-backend-api.com/api

• 默认值: /api - 适用于前后端部署在同一域名下的场景
• 开发环境: 可以配置为后端开发服务器的完整地址，如 http://localhost:8000/api
• 生产环境: 可以配置为生产环境的 API 地址

src/
├── lib/
│   ├── api.ts          # API 请求封装
│   ├── types.ts        # TypeScript 类型定义
│   └── utils.ts        # 工具函数
├── pages/
│   ├── Login.tsx       # 登录页面
│   ├── Home.tsx        # 仪表盘
│   ├── Tasks.tsx       # 任务管理
│   ├── Executions.tsx  # 执行记录
│   ├── Scripts.tsx     # 脚本管理
│   ├── Dependencies.tsx # 依赖管理
│   └── Settings.tsx    # 系统设置
└── components/
    └── ui/             # UI 组件库

npm install
# 或
pnpm install

npm run dev
# 或
pnpm dev

npm run build
# 或
pnpm build

所有 API 请求已统一封装在 src/lib/api.ts 中，包括：

• authApi: 认证相关接口
• taskApi: 任务管理接口
• executionApi: 执行记录接口
• scriptApi: 脚本管理接口
• dependencyApi: 依赖管理接口
• settingsApi: 系统设置接口

import { taskApi } from '@/lib/api';

// 获取任务列表
const response = await taskApi.list({ page: 1, page_size: 20 });

// 创建任务
await taskApi.create({
  name: '定时任务',
  cron_expression: '0 0 * * *',
  command: 'python script.py'
});

所有接口类型定义统一在 src/lib/types.ts 中，提供完整的 TypeScript 类型支持。