ViteReact后台

dj-widgets — Vite 后台模板

作者 DamJanJot

基于 React、Vite 与 TypeScript 的仪表盘模板，包含天气、日历、日程、市场、新闻、项目与笔记等多个面板，数据主要来自公开 API 和 localStorage。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

桌面端首页

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-13查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

React + Vite + TypeScript 构建的后台仪表盘模板

集成天气、日历、日程、市场、新闻、项目与笔记等多个面板

通过 OpenWeatherMap、NBP、CoinGecko 和 RSS2JSON 获取公开数据

主题切换、可配置侧边栏与本地持久化设置

提供 /dashboard、/markets、/day-plan、/projects、/notes 等主要路由

模板详细介绍

dj-widgets（仓库内称 Orbitum）是一个用 React、Vite 和 TypeScript 构建的后台仪表盘模板，定位为个人操作中心。它把多个信息面板整合到一个界面中：仪表盘显示时间、日期与日出日落；天气面板展示华沙天气和 5 天预报；日历支持波兰节假日、日期标记和自定义事件；日程面板包含专注事项、来自笔记的任务、当天事件和时间表；项目面板提供模块地图、工作状态和置顶优先级；新闻面板包含 RSS 资讯和单独的军事行动消息列表；市场面板覆盖黄金、货币、加密货币和自选资产。

模板还提供深色、浅色和跟随系统三种主题，侧边栏的可见性与顺序可配置并保存在本地，折叠侧边栏有自定义提示，右下角有快速操作浮动按钮，右键菜单作为未来操作的入口。用户设置、日历事件、专注与日程、自选资产、笔记和任务等数据保存在 localStorage 中，当前不依赖数据库连接。

数据来源为若干公开 API：OpenWeatherMap 提供天气与预报，NBP 提供汇率和黄金价格，CoinGecko 提供加密货币行情，RSS2JSON 作为 RSS 频道的中转。README 说明项目仍在视觉与功能上持续开发，与目标数据库的集成被有意推迟，以免影响稳定的演示版本。主要路由包括 /dashboard、/news、/markets、/day-plan、/projects、/notes、/operations、/profile、/profile/edit、/settings 和 /repo。

ViteReact后台

适合你的项目吗？

适用场景

搭建个人操作中心或信息聚合仪表盘
作为 React + Vite + TypeScript 后台界面的起始模板
演示多面板布局、主题切换与本地状态持久化

适合人群

需要现成仪表盘界面结构的 React 开发者
希望以公开 API 展示天气、汇率、行情与 RSS 的项目
接受以 localStorage 保存用户设置与内容的演示或原型

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
运行 npm install 安装依赖，npm run dev 启动本地开发服务器（默认 http://localhost:5173）
2
使用 npm run build 构建生产版本，npm run preview 预览构建结果
3
Vercel 部署时设置构建命令 npm run build，输出目录 dist
4
天气、汇率、加密货币和 RSS 数据依赖外部公开 API，需自行确认可用性与密钥要求
5
演示图片、字体、图标等第三方素材需按各自许可核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
模板依赖多个外部公开 API（OpenWeatherMap、NBP、CoinGecko、RSS2JSON）获取数据，使用前需自行确认这些服务的可用性、配额与密钥要求。
天气与预报功能依赖 OpenWeatherMap 外部服务，通常需要注册账号并配置 API 密钥，否则相关面板无法正常获取数据。
RSS 资讯功能通过第三方中转服务 RSS2JSON 实现，属于外部依赖，其可用性与调用限制会影响新闻面板。
项目当前为演示版本，与目标数据库的集成被有意推迟，因此不具备生产级数据持久化能力。
当前版本不连接数据库，用户数据仅保存在浏览器 localStorage 中，不适合需要服务端存储或多用户场景。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Aplikacja korzysta z kilku publicznych API:
README 原文

OpenWeatherMap dla pogody i prognozy.
README 原文

RSS2JSON jako pośrednik dla kanałów RSS.
README 原文

Integracja z docelową bazą danych jest świadomie odłożona, żeby nie psuć stabilnej wersji demo.
README 原文

Na ten moment aplikacja nie wymaga połączenia z bazą danych.
README 原文

https://github.com/DamJanJot/dj-widgets/blob/main/LICENSE https://github.com/DamJanJot/dj-widgets/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-13。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 88 / 100
技术栈: Vite · React
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-10-13
截图检查日期: 2026-10-13

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: 1d6233db7822cafe8180c33b1796b9dcb1d26b1b7e53989bee9a6b26b7400b5d

2026-10-13T01:45:38.025Z

来源文件 / 仓库

# Orbitum

Panel webowy zbudowany w React, Vite i TypeScript. Aplikacja rozwija się w kierunku docelowego centrum operacyjnego Orbitum: dashboardu dla pogody, kalendarza, planu dnia, rynków, aktualności, projektów i przyszłej architektury modułów.

Projekt jest obecnie rozwijany wizualnie i funkcjonalnie. Integracja z docelową bazą danych jest świadomie odłożona, żeby nie psuć stabilnej wersji demo.

## Funkcje

- Dashboard z godziną, datą, wschodem i zachodem słońca.
- Pogoda dla Warszawy oraz kompaktowa prognoza 5 dni.
- Kalendarz miesięczny z polskimi świętami, zaznaczaniem dnia i własnymi wydarzeniami.
- Plan dnia z fokusem, zadaniami z notatek, dzisiejszymi wydarzeniami i harmonogramem.
- Panel projektów z mapą modułów, statusem prac i przypiętymi priorytetami.
- Aktualności RSS oraz osobna lista wiadomości o działaniach zbrojnych.
- Rynki: złoto, waluty, krypto i obserwowane aktywa.
- Przełączanie motywu: ciemny, jasny, systemowy.
- Konfigurowalny sidebar: widoczność i kolejność paneli zapisywana lokalnie.
- Własne tooltipy w zwiniętym sidebarze.
- Pływający przycisk szybkich akcji Orbitum w prawym dolnym rogu.
- Menu kontekstowe po prawym kliknięciu jako baza pod przyszłe akcje.
- Profil, edycja profilu, ustawienia, centrum operacyjne i repository.
- Lokalne notatki i zadania jako osobny panel.
- Szybka nawigacja z topbara oraz zapamiętywanie ostatnio odwiedzanych widoków.

## Dane i tryb demo

Aplikacja korzysta z kilku publicznych API:

- OpenWeatherMap dla pogody i prognozy.
- NBP dla kursów walut i ceny złota.
- CoinGecko dla krypto.
- RSS2JSON jako pośrednik dla kanałów RSS.

Część ustawień użytkownika jest zapisywana w `localStorage`, między innymi:

- motyw,
- konfiguracja sidebaru,
- ostatnio odwiedzane widoki,
- wydarzenia w kalendarzu,
- fokus i harmonogram dnia,
- lista obserwowanych aktywów,
- notatki i zadania.

Na ten moment aplikacja nie wymaga połączenia z bazą danych.

## Uruchamianie

```bash
npm install
npm run dev
```

Domyślnie Vite uruchamia aplikację lokalnie pod adresem:

```text
http://localhost:5173
```

Build produkcyjny:

```bash
npm run build
npm run preview
```

## Najważniejsze widoki

- `/dashboard` - główny pulpit.
- `/news` - aktualności i działania zbrojne.
- `/markets` - złoto, waluty, krypto i obserwowane aktywa.
- `/day-plan` - fokus dnia, zadania i harmonogram.
- `/projects` - mapa modułów, priorytety i kierunek integracji.
- `/notes` - lokalne notatki i zadania.
- `/operations` - centrum operacyjne i alerty.
- `/profile` - profil użytkownika.
- `/profile/edit` - edycja profilu.
- `/settings` - motyw i konfiguracja sidebaru.
- `/repo` - informacje o repozytorium.

## Deployment na Vercel

Ustawienia projektu:

```text
Build command: npm run build
Output directory: dist
```

## Stack

- React
- TypeScript
- Vite
- Chart.js
- Recharts
- Lucide React
- Radix UI

## Licencja

MIT

反馈内容错误