feat: 项目重构 #2

imsyy · Jul 20, 2023 · 6ef9f68 · 6ef9f68
1 parent bf45f4e
commit 6ef9f68
Show file tree

Hide file tree

Showing 37 changed files with 4,457 additions and 28,633 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,23 @@
+# 全局 API 地址
+# 由于官网可能会有 CORS 跨域问题，可使用反代来解决
+VITE_GLOBAL_API = "https://api-status.imsyy.top/getMonitors" # 反代（请自行搭建）
+# VITE_GLOBAL_API = "https://api.uptimerobot.com/v2/getMonitors" # 官网接口
+# VITE_GLOBAL_API = "https://cors.status.org.cn/uptimerobot/v2/getMonitors" # 第三方反代
+
+# UptimeRobot Api Keys
+VITE_API_KEY = "u1022423-6ffcda436b183008644c691c"
+
+# 站点标题
+VITE_SITE_NAME = "IMSYY 站点监测"
+
+# 日志天数
+VITE_COUNT_DAYS = 60
+
+# GitHub 链接
+VITE_GITHUB_NAME = "imsyy"
+
+# 主页链接
+VITE_HOME_URL = "https://www.imsyy.top/"
+
+# 邮箱地址
+VITE_EMAIL_URL = "[email protected]"
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,22 @@
+/* eslint-env node */
+
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+  ],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh", "babel"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    // 添加装饰器相关的配置
+    "babel/decorators": "error",
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-build
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1,48 +1,51 @@
-# uptime-status
+# site-status
 
-一个基于 UptimeRobot API 的在线状态面板，修改自 [uptime-status](https://github.com/yb/uptime-status)  
+一个基于 UptimeRobot API 的在线状态面板
 
-![IMSYY-站点监测.png](https://s2.loli.net/2022/07/21/Bq9sNMiT7DmvoLd.png)
+![IMSYY-站点监测.png](https://s1.ax1x.com/2023/07/20/pCHnLLt.png)
 
-## 修改内容
+## 特色
 
-- 修改部分样式
-- 新增站点状态总览
-- 新增数据获取失败提示
+- 站点状态总览
+- 流畅的动画
+- 数据获取失败提醒
 - 移动端适配
 
 ## 事先准备
 
-- 您需要先到 [UptimeRobot](https://uptimerobot.com/ "UptimeRobot") 添加站点监控，并在 My Settings 页面获取 API Key
-- 您需要拥有一个网站空间，常见的 Nginx / PHP 等空间即可，甚至是阿里云的 OSS 等纯静态空间也行
+- 您需要先到 [UptimeRobot](https://uptimerobot.com/dashboard) 添加站点监控，并在 `My Settings` 页面获取 类型为 `Read-Only API Key` 的 `API Key`
 
 ## 如何使用
 
-- 下载本项目
-- 修改 `config.js` 文件：
-   1. `SiteName`: 要显示的网站名称
-   2. `ApiKeys`: 从 UptimeRobot 获取的 API Key，支持 Monitor-Specific API Keys 和 Read-Only API Key
-   3. `CountDays`: 要显示的日志天数，建议 60 或 90，显示效果比较好
-   4. `ShowLink`: 是否显示站点链接
-   5. `Navi`: 导航栏的菜单列表
-- 将所有文件上传到网站空间
+- `star` 并 `fork` 😘
+- 按照下方部署操作来安装依赖
+- 在 `.env` 文件中进行配置修改
+- 将打包后的文件上传至网站空间或者直接使用 `Vercel` 或者 `Cloudflare` 直接部署该项目
 
-## 如何部署
+## 部署
 
 ### 安装依赖
 
-```
-npm i --unsafe-perm=true
+```bash
+# 若没有 pnpm
+npm install pnpm -g
+
+# 安装依赖
+pnpm install
 ```
 
-### 运行
+### 开发
 
-```
-npm run start
+```bash
+pnpm dev
 ```
 
 ### 打包
 
+```bash
+pnpm build
 ```
-npm run build
-```
+
+## 鸣谢
+
+ - [uptime-status](https://github.com/yb/uptime-status) 基于此项目进行修改
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" type="image/svg+xml" href="favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>IMSYY 站点监测</title>
+  <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}