- Created By
-
-
-
+
+
diff --git a/napcat.webui/src/styles/globals.css b/napcat.webui/src/styles/globals.css
index adae56c1..bbbcae09 100644
--- a/napcat.webui/src/styles/globals.css
+++ b/napcat.webui/src/styles/globals.css
@@ -1,5 +1,5 @@
@import url('./fonts.css');
-
+@import url('./text.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
diff --git a/napcat.webui/src/styles/text.css b/napcat.webui/src/styles/text.css
new file mode 100644
index 00000000..debb19e6
--- /dev/null
+++ b/napcat.webui/src/styles/text.css
@@ -0,0 +1,34 @@
+@layer base {
+ .shiny-text {
+ @apply text-pink-400 text-opacity-60;
+ background-size: 200% 100%;
+ -webkit-background-clip: text;
+ background-clip: text;
+ animation: shine 5s linear infinite;
+ }
+ .shiny-text {
+ background-image: linear-gradient(
+ 120deg,
+ rgba(255, 50, 50, 0) 40%,
+ rgba(255, 76, 76, 0.8) 50%,
+ rgba(255, 50, 50, 0) 60%
+ );
+ }
+ .dark .shiny-text {
+ background-image: linear-gradient(
+ 120deg,
+ rgba(255, 255, 255, 0) 40%,
+ rgba(206, 21, 21, 0.8) 50%,
+ rgba(255, 255, 255, 0) 60%
+ );
+ }
+
+ @keyframes shine {
+ 0% {
+ background-position: 100%;
+ }
+ 100% {
+ background-position: -100%;
+ }
+ }
+}
diff --git a/src/common/store.ts b/src/common/store.ts
new file mode 100644
index 00000000..a1dcd851
--- /dev/null
+++ b/src/common/store.ts
@@ -0,0 +1,190 @@
+export type StoreValueType = string | number | boolean | object | null;
+
+export type StoreValue
= {
+ value: T;
+ expiresAt?: number;
+};
+
+class Store {
+ // 使用Map存储键值对
+ private store: Map;
+ // 定时清理器
+ private cleanerTimer: NodeJS.Timeout;
+ // 用于分批次扫描的游标
+ private scanCursor: number = 0;
+
+ /**
+ * Store
+ * @param cleanInterval 清理间隔
+ * @param scanLimit 扫描限制(每次最多检查的键数)
+ */
+ constructor(
+ cleanInterval: number = 1000, // 默认1秒执行一次
+ private scanLimit: number = 100 // 每次最多检查100个键
+ ) {
+ this.store = new Map();
+ this.cleanerTimer = setInterval(() => this.cleanupExpired(), cleanInterval);
+ }
+
+ /**
+ * 设置键值对
+ * @param key 键
+ * @param value 值
+ * @param ttl 过期时间
+ * @returns void
+ * @example store.set('key', 'value', 60)
+ */
+ set(key: string, value: T, ttl?: number): void {
+ if (ttl && ttl <= 0) {
+ this.del(key);
+ return;
+ }
+ const expiresAt = ttl ? Date.now() + ttl * 1000 : undefined;
+ this.store.set(key, { value, expiresAt });
+ }
+
+ /**
+ * 清理过期键
+ */
+ private cleanupExpired(): void {
+ const now = Date.now();
+ const keys = Array.from(this.store.keys());
+ let scanned = 0;
+
+ // 分批次扫描
+ while (scanned < this.scanLimit && this.scanCursor < keys.length) {
+ const key = keys[this.scanCursor++];
+ const entry = this.store.get(key)!;
+
+ if (entry.expiresAt && entry.expiresAt < now) {
+ this.store.delete(key);
+ }
+
+ scanned++;
+ }
+
+ // 重置游标（环形扫描）
+ if (this.scanCursor >= keys.length) {
+ this.scanCursor = 0;
+ }
+ }
+
+ /**
+ * 获取键值
+ * @param key 键
+ * @returns T | null
+ * @example store.get('key')
+ */
+ get(key: string): T | null {
+ this.checkKeyExpiry(key); // 每次访问都检查
+ const entry = this.store.get(key);
+ return entry ? (entry.value as T) : null;
+ }
+
+ /**
+ * 检查键是否过期
+ * @param key 键
+ */
+ private checkKeyExpiry(key: string): void {
+ const entry = this.store.get(key);
+ if (entry?.expiresAt && entry.expiresAt < Date.now()) {
+ this.store.delete(key);
+ }
+ }
+
+ /**
+ * 检查键是否存在
+ * @param keys 键
+ * @returns number
+ * @example store.exists('key1', 'key2')
+ */
+ exists(...keys: string[]): number {
+ return keys.filter((key) => {
+ this.checkKeyExpiry(key);
+ return this.store.has(key);
+ }).length;
+ }
+
+ /**
+ * 关闭存储器
+ */
+ shutdown(): void {
+ clearInterval(this.cleanerTimer);
+ this.store.clear();
+ }
+
+ /**
+ * 删除键
+ * @param keys 键
+ * @returns number
+ * @example store.del('key1', 'key2')
+ */
+ del(...keys: string[]): number {
+ return keys.reduce((count, key) => (this.store.delete(key) ? count + 1 : count), 0);
+ }
+
+ /**
+ * 设置键的过期时间
+ * @param key 键
+ * @param seconds 过期时间(秒)
+ * @returns boolean
+ * @example store.expire('key', 60)
+ */
+ expire(key: string, seconds: number): boolean {
+ const entry = this.store.get(key);
+ if (!entry) return false;
+
+ entry.expiresAt = Date.now() + seconds * 1000;
+ return true;
+ }
+
+ /**
+ * 获取键的过期时间
+ * @param key 键
+ * @returns number | null
+ * @example store.ttl('key')
+ */
+ ttl(key: string): number | null {
+ const entry = this.store.get(key);
+ if (!entry) return null;
+
+ if (!entry.expiresAt) return -1;
+ const remaining = entry.expiresAt - Date.now();
+ return remaining > 0 ? Math.floor(remaining / 1000) : -2;
+ }
+
+ /**
+ * 键值数字递增
+ * @param key 键
+ * @returns number
+ * @example store.incr('key')
+ */
+ incr(key: string): number {
+ const current = this.get(key);
+
+ if (current === null) {
+ this.set(key, 1);
+ return 1;
+ }
+
+ let numericValue: number;
+ if (typeof current === 'number') {
+ numericValue = current;
+ } else if (typeof current === 'string') {
+ if (!/^-?\d+$/.test(current)) {
+ throw new Error('ERR value is not an integer');
+ }
+ numericValue = parseInt(current, 10);
+ } else {
+ throw new Error('ERR value is not an integer');
+ }
+
+ const newValue = numericValue + 1;
+ this.set(key, newValue);
+ return newValue;
+ }
+}
+
+const store = new Store();
+
+export default store;
diff --git a/src/webui/src/api/Auth.ts b/src/webui/src/api/Auth.ts
index b29f743c..d347f1a7 100644
--- a/src/webui/src/api/Auth.ts
+++ b/src/webui/src/api/Auth.ts
@@ -13,12 +13,15 @@ export const LoginHandler: RequestHandler = async (req, res) => {
const WebUiConfigData = await WebUiConfig.GetWebUIConfig();
// 获取请求体中的token
const { token } = req.body;
+ // 获取客户端IP
+ const clientIP = req.ip || req.socket.remoteAddress || '';
+
// 如果token为空，返回错误信息
if (isEmpty(token)) {
return sendError(res, 'token is empty');
}
// 检查登录频率
- if (!WebUiDataRuntime.checkLoginRate(WebUiConfigData.loginRate)) {
+ if (!WebUiDataRuntime.checkLoginRate(clientIP, WebUiConfigData.loginRate)) {
return sendError(res, 'login rate limit');
}
//验证config.token是否等于token
@@ -26,7 +29,7 @@ export const LoginHandler: RequestHandler = async (req, res) => {
return sendError(res, 'token is invalid');
}
// 签发凭证
- const signCredential = Buffer.from(JSON.stringify(await AuthHelper.signCredential(WebUiConfigData.token))).toString(
+ const signCredential = Buffer.from(JSON.stringify(AuthHelper.signCredential(WebUiConfigData.token))).toString(
'base64'
);
// 返回成功信息
@@ -36,9 +39,16 @@ export const LoginHandler: RequestHandler = async (req, res) => {
};
// 退出登录
-export const LogoutHandler: RequestHandler = (_, res) => {
- // TODO: 这玩意无状态销毁个灯 得想想办法
- return sendSuccess(res, null);
+export const LogoutHandler: RequestHandler = async (req, res) => {
+ const authorization = req.headers.authorization;
+ try {
+ const CredentialBase64: string = authorization?.split(' ')[1] as string;
+ const Credential = JSON.parse(Buffer.from(CredentialBase64, 'base64').toString());
+ AuthHelper.revokeCredential(Credential);
+ return sendSuccess(res, 'Logged out successfully');
+ } catch (e) {
+ return sendError(res, 'Logout failed');
+ }
};
// 检查登录状态
@@ -53,25 +63,41 @@ export const checkHandler: RequestHandler = async (req, res) => {
const CredentialBase64: string = authorization?.split(' ')[1] as string;
// 解析凭证
const Credential = JSON.parse(Buffer.from(CredentialBase64, 'base64').toString());
+
+ // 检查凭证是否已被注销
+ if (AuthHelper.isCredentialRevoked(Credential)) {
+ return sendError(res, 'Token has been revoked');
+ }
+
// 验证凭证是否在一小时内有效
- await AuthHelper.validateCredentialWithinOneHour(WebUiConfigData.token, Credential);
+ const valid = AuthHelper.validateCredentialWithinOneHour(WebUiConfigData.token, Credential);
// 返回成功信息
- return sendSuccess(res, null);
+ if (valid) return sendSuccess(res, null);
+ // 返回错误信息
+ return sendError(res, 'Authorization Failed');
} catch (e) {
// 返回错误信息
- return sendError(res, 'Authorization Faild');
+ return sendError(res, 'Authorization Failed');
}
};
// 修改密码（token）
export const UpdateTokenHandler: RequestHandler = async (req, res) => {
const { oldToken, newToken } = req.body;
+ const authorization = req.headers.authorization;
if (isEmpty(oldToken) || isEmpty(newToken)) {
return sendError(res, 'oldToken or newToken is empty');
}
try {
+ // 注销当前的Token
+ if (authorization) {
+ const CredentialBase64: string = authorization.split(' ')[1];
+ const Credential = JSON.parse(Buffer.from(CredentialBase64, 'base64').toString());
+ AuthHelper.revokeCredential(Credential);
+ }
+
await WebUiConfig.UpdateToken(oldToken, newToken);
return sendSuccess(res, 'Token updated successfully');
} catch (e: any) {
diff --git a/src/webui/src/helper/Data.ts b/src/webui/src/helper/Data.ts
index 8f1091c7..bafc5ba5 100644
--- a/src/webui/src/helper/Data.ts
+++ b/src/webui/src/helper/Data.ts
@@ -1,5 +1,7 @@
import type { LoginRuntimeType } from '../types/data';
import packageJson from '../../../../package.json';
+import store from '@/common/store';
+
const LoginRuntime: LoginRuntimeType = {
LoginCurrentTime: Date.now(),
LoginCurrentRate: 0,
@@ -26,15 +28,22 @@ const LoginRuntime: LoginRuntimeType = {
};
export const WebUiDataRuntime = {
- checkLoginRate(RateLimit: number): boolean {
- LoginRuntime.LoginCurrentRate++;
- //console.log(RateLimit, LoginRuntime.LoginCurrentRate, Date.now() - LoginRuntime.LoginCurrentTime);
- if (Date.now() - LoginRuntime.LoginCurrentTime > 1000 * 60) {
- LoginRuntime.LoginCurrentRate = 0; //超出时间重置限速
- LoginRuntime.LoginCurrentTime = Date.now();
+ checkLoginRate(ip: string, RateLimit: number): boolean {
+ const key = `login_rate:${ip}`;
+ const count = store.get(key) || 0;
+
+ if (count === 0) {
+ // 第一次访问，设置计数器为1，并设置60秒过期
+ store.set(key, 1, 60);
return true;
}
- return LoginRuntime.LoginCurrentRate <= RateLimit;
+
+ if (count >= RateLimit) {
+ return false;
+ }
+
+ store.incr(key);
+ return true;
},
getQQLoginStatus(): LoginRuntimeType['QQLoginStatus'] {
@@ -108,5 +117,5 @@ export const WebUiDataRuntime = {
getQQVersion() {
return LoginRuntime.QQVersion;
- }
+ },
};
diff --git a/src/webui/src/helper/SignToken.ts b/src/webui/src/helper/SignToken.ts
index 72860060..50865b19 100644
--- a/src/webui/src/helper/SignToken.ts
+++ b/src/webui/src/helper/SignToken.ts
@@ -1,5 +1,5 @@
import crypto from 'crypto';
-
+import store from '@/common/store';
export class AuthHelper {
private static readonly secretKey = Math.random().toString(36).slice(2);
@@ -8,7 +8,7 @@ export class AuthHelper {
* @param token 待签名的凭证字符串。
* @returns 签名后的凭证对象。
*/
- public static async signCredential(token: string): Promise {
+ public static signCredential(token: string): WebUiCredentialJson {
const innerJson: WebUiCredentialInnerJson = {
CreatedTime: Date.now(),
TokenEncoded: token,
@@ -23,7 +23,7 @@ export class AuthHelper {
* @param credentialJson 凭证的JSON对象。
* @returns 布尔值，表示凭证是否有效。
*/
- public static async checkCredential(credentialJson: WebUiCredentialJson): Promise {
+ public static checkCredential(credentialJson: WebUiCredentialJson): boolean {
try {
const jsonString = JSON.stringify(credentialJson.Data);
const calculatedHmac = crypto
@@ -42,19 +42,47 @@ export class AuthHelper {
* @param credentialJson 已签名的凭证JSON对象。
* @returns 布尔值，表示凭证是否有效且token匹配。
*/
- public static async validateCredentialWithinOneHour(
- token: string,
- credentialJson: WebUiCredentialJson
- ): Promise {
- const isValid = await AuthHelper.checkCredential(credentialJson);
+ public static validateCredentialWithinOneHour(token: string, credentialJson: WebUiCredentialJson): boolean {
+ // 首先检查凭证是否被篡改
+ const isValid = AuthHelper.checkCredential(credentialJson);
if (!isValid) {
return false;
}
+ // 检查凭证是否在黑名单中
+ if (AuthHelper.isCredentialRevoked(credentialJson)) {
+ return false;
+ }
+
const currentTime = Date.now() / 1000;
const createdTime = credentialJson.Data.CreatedTime;
const timeDifference = currentTime - createdTime;
return timeDifference <= 3600 && credentialJson.Data.TokenEncoded === token;
}
+
+ /**
+ * 注销指定的Token凭证
+ * @param credentialJson 凭证JSON对象
+ * @returns void
+ */
+ public static revokeCredential(credentialJson: WebUiCredentialJson): void {
+ const jsonString = JSON.stringify(credentialJson.Data);
+ const hmac = crypto.createHmac('sha256', AuthHelper.secretKey).update(jsonString, 'utf8').digest('hex');
+
+ // 将已注销的凭证添加到黑名单中，有效期1小时
+ store.set(`revoked:${hmac}`, true, 3600);
+ }
+
+ /**
+ * 检查凭证是否已被注销
+ * @param credentialJson 凭证JSON对象
+ * @returns 布尔值，表示凭证是否已被注销
+ */
+ public static isCredentialRevoked(credentialJson: WebUiCredentialJson): boolean {
+ const jsonString = JSON.stringify(credentialJson.Data);
+ const hmac = crypto.createHmac('sha256', AuthHelper.secretKey).update(jsonString, 'utf8').digest('hex');
+
+ return store.exists(`revoked:${hmac}`) > 0;
+ }
}
diff --git a/src/webui/src/middleware/auth.ts b/src/webui/src/middleware/auth.ts
index 64e21b50..67d73ecd 100644
--- a/src/webui/src/middleware/auth.ts
+++ b/src/webui/src/middleware/auth.ts
@@ -32,7 +32,7 @@ export async function auth(req: Request, res: Response, next: NextFunction) {
// 获取配置
const config = await WebUiConfig.GetWebUIConfig();
// 验证凭证在1小时内有效且token与原始token相同
- const credentialJson = await AuthHelper.validateCredentialWithinOneHour(config.token, Credential);
+ const credentialJson = AuthHelper.validateCredentialWithinOneHour(config.token, Credential);
if (credentialJson) {
// 通过验证
return next();
From c0dd8a53e83b57614f6c1f188aa6352da4ae989d Mon Sep 17 00:00:00 2001
From: bietiaop <1527109126@qq.com>
Date: Fri, 31 Jan 2025 19:05:40 +0800
Subject: [PATCH 4/6] =?UTF-8?q?chore(dep):=20=E6=9B=B4=E6=96=B0=E4=BE=9D?=
=?UTF-8?q?=E8=B5=96,=E7=A7=BB=E9=99=A4overrides(strtok3=E5=B7=B2=E7=BB=8F?=
=?UTF-8?q?=E4=BF=AE=E5=A4=8D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 7 -------
1 file changed, 7 deletions(-)
diff --git a/package.json b/package.json
index 0e71df30..8345ac89 100644
--- a/package.json
+++ b/package.json
@@ -61,12 +61,5 @@
"qrcode-terminal": "^0.12.0",
"silk-wasm": "^3.6.1",
"ws": "^8.18.0"
- },
- "overrides": {
- "strtok3": {
- "dependencies": {
- "peek-readable": "5.3.1"
- }
- }
}
}
From e6968f2d8051753d1480d8cd63a7dd21bc29013c Mon Sep 17 00:00:00 2001
From: bietiaop <1527109126@qq.com>
Date: Sat, 1 Feb 2025 11:44:30 +0800
Subject: [PATCH 5/6] =?UTF-8?q?fix(webui):=20name=E9=87=8D=E5=A4=8D?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
napcat.webui/src/hooks/use-config.ts | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/napcat.webui/src/hooks/use-config.ts b/napcat.webui/src/hooks/use-config.ts
index 1acc2c36..05f2ac35 100644
--- a/napcat.webui/src/hooks/use-config.ts
+++ b/napcat.webui/src/hooks/use-config.ts
@@ -14,10 +14,12 @@ const useConfig = () => {
key: T,
value: OneBotConfig['network'][T][0]
) => {
- if (
- value.name &&
- config.network[key].some((item) => item.name === value.name)
- ) {
+ const allNetworkNames = Object.keys(config.network).reduce((acc, key) => {
+ const _key = key as keyof OneBotConfig['network']
+ return acc.concat(config.network[_key].map((item) => item.name))
+ }, [] as string[])
+
+ if (value.name && allNetworkNames.includes(value.name)) {
throw new Error('已经存在相同的配置项名')
}
From 0176fa75ef3249ca75d468fb5cdf3327995624f3 Mon Sep 17 00:00:00 2001
From: bietiaop <1527109126@qq.com>
Date: Sat, 1 Feb 2025 13:41:20 +0800
Subject: [PATCH 6/6] dev: terminal
---
napcat.webui/package.json | 3 +
napcat.webui/src/components/icons.tsx | 247 ++++++++++++++++-
napcat.webui/src/components/sortable_tab.tsx | 74 +++++
napcat.webui/src/components/tabs/index.tsx | 83 ++++++
.../components/terminal/terminal-instance.tsx | 57 ++++
.../src/components/under_construction.tsx | 12 +
napcat.webui/src/components/xterm.tsx | 253 +++++++++---------
napcat.webui/src/config/site.tsx | 24 +-
napcat.webui/src/controllers/webui_manager.ts | 98 +++++++
napcat.webui/src/pages/dashboard/terminal.tsx | 122 +++++++++
napcat.webui/src/pages/index.tsx | 5 +
src/webui/index.ts | 3 +
src/webui/src/api/Log.ts | 63 +++++
src/webui/src/router/Log.ts | 22 +-
src/webui/src/terminal/terminal_manager.ts | 155 +++++++++++
15 files changed, 1078 insertions(+), 143 deletions(-)
create mode 100644 napcat.webui/src/components/sortable_tab.tsx
create mode 100644 napcat.webui/src/components/tabs/index.tsx
create mode 100644 napcat.webui/src/components/terminal/terminal-instance.tsx
create mode 100644 napcat.webui/src/components/under_construction.tsx
create mode 100644 napcat.webui/src/pages/dashboard/terminal.tsx
create mode 100644 src/webui/src/terminal/terminal_manager.ts
diff --git a/napcat.webui/package.json b/napcat.webui/package.json
index 0d1d8476..320d297b 100644
--- a/napcat.webui/package.json
+++ b/napcat.webui/package.json
@@ -10,6 +10,9 @@
"preview": "vite preview"
},
"dependencies": {
+ "@dnd-kit/core": "^6.3.1",
+ "@dnd-kit/sortable": "^10.0.0",
+ "@dnd-kit/utilities": "^3.2.2",
"@heroui/avatar": "2.2.7",
"@heroui/breadcrumbs": "2.2.7",
"@heroui/button": "2.2.10",
diff --git a/napcat.webui/src/components/icons.tsx b/napcat.webui/src/components/icons.tsx
index 0253ee81..bea77422 100644
--- a/napcat.webui/src/components/icons.tsx
+++ b/napcat.webui/src/components/icons.tsx
@@ -1152,7 +1152,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
begin="0ms"
>
(
begin="800ms"
>
(
begin="1600ms"
>
(
begin="2400ms"
>
(
begin="3200ms"
>
(
begin="0ms"
>
(
begin="600ms"
>
(
begin="1200ms"
>
(
begin="1800ms"
>
(
begin="2400ms"
>
(
begin="3000ms"
>
(
begin="3600ms"
>
(
begin="4200ms"
>
(
)
+
+export const FileIcon = (props: IconSvgProps) => (
+
+)
+
+export const LogIcon = (props: IconSvgProps) => (
+
+)
diff --git a/napcat.webui/src/components/sortable_tab.tsx b/napcat.webui/src/components/sortable_tab.tsx
new file mode 100644
index 00000000..e90398b0
--- /dev/null
+++ b/napcat.webui/src/components/sortable_tab.tsx
@@ -0,0 +1,74 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import clsx from 'clsx'
+import { useRef } from 'react'
+
+import { Tab } from './tabs'
+
+interface SortableTabProps {
+ id: string
+ value: string
+ children: React.ReactNode
+ className?: string
+}
+
+export function SortableTab({
+ id,
+ value,
+ children,
+ className
+}: SortableTabProps) {
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging
+ } = useSortable({ id })
+
+ const mouseDownTime = useRef(0)
+ const mouseDownPos = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ zIndex: isDragging ? 1 : 0
+ }
+
+ const handleMouseDown = (e: React.MouseEvent) => {
+ mouseDownTime.current = Date.now()
+ mouseDownPos.current = { x: e.clientX, y: e.clientY }
+ }
+
+ const handleMouseUp = (e: React.MouseEvent) => {
+ const timeDiff = Date.now() - mouseDownTime.current
+ const distanceX = Math.abs(e.clientX - mouseDownPos.current.x)
+ const distanceY = Math.abs(e.clientY - mouseDownPos.current.y)
+
+ // 如果时间小于200ms且移动距离小于5px，认为是点击而不是拖拽
+ if (timeDiff < 200 && distanceX < 5 && distanceY < 5) {
+ listeners?.onClick?.(e)
+ }
+ }
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/napcat.webui/src/components/tabs/index.tsx b/napcat.webui/src/components/tabs/index.tsx
new file mode 100644
index 00000000..4b623af6
--- /dev/null
+++ b/napcat.webui/src/components/tabs/index.tsx
@@ -0,0 +1,83 @@
+import clsx from 'clsx'
+import { type ReactNode, createContext, forwardRef, useContext } from 'react'
+
+interface TabsContextValue {
+ activeKey: string
+ onChange: (key: string) => void
+}
+
+const TabsContext = createContext({
+ activeKey: '',
+ onChange: () => {}
+})
+
+interface TabsProps {
+ activeKey: string
+ onChange: (key: string) => void
+ children: ReactNode
+ className?: string
+}
+
+export function Tabs({ activeKey, onChange, children, className }: TabsProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+interface TabListProps {
+ children: ReactNode
+ className?: string
+}
+
+export function TabList({ children, className }: TabListProps) {
+ return (
+ {children}
+ )
+}
+
+interface TabProps extends React.ButtonHTMLAttributes {
+ value: string
+ className?: string
+ children: ReactNode
+}
+
+export const Tab = forwardRef(
+ ({ value, className, children, ...props }, ref) => {
+ const { activeKey, onChange } = useContext(TabsContext)
+
+ return (
+
+ )
+ }
+)
+
+Tab.displayName = 'Tab'
+
+interface TabPanelProps {
+ value: string
+ children: ReactNode
+ className?: string
+}
+
+export function TabPanel({ value, children, className }: TabPanelProps) {
+ const { activeKey } = useContext(TabsContext)
+
+ if (value !== activeKey) return null
+
+ return {children}
+}
diff --git a/napcat.webui/src/components/terminal/terminal-instance.tsx b/napcat.webui/src/components/terminal/terminal-instance.tsx
new file mode 100644
index 00000000..6cdf14f8
--- /dev/null
+++ b/napcat.webui/src/components/terminal/terminal-instance.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react'
+
+import WebUIManager from '@/controllers/webui_manager'
+
+import XTerm, { XTermRef } from '../xterm'
+
+interface TerminalInstanceProps {
+ id: string
+}
+
+export function TerminalInstance({ id }: TerminalInstanceProps) {
+ const termRef = useRef(null)
+ const wsRef = useRef(null)
+
+ useEffect(() => {
+ const ws = WebUIManager.connectTerminal(id, (data) => {
+ termRef.current?.write(data)
+ })
+ wsRef.current = ws
+
+ // 添加连接状态监听
+ ws.onopen = () => {
+ console.log('Terminal connected:', id)
+ }
+
+ ws.onerror = (error) => {
+ console.error('Terminal connection error:', error)
+ termRef.current?.write(
+ '\r\n\x1b[31mConnection error. Please try reconnecting.\x1b[0m\r\n'
+ )
+ }
+
+ ws.onclose = () => {
+ console.log('Terminal disconnected:', id)
+ termRef.current?.write('\r\n\x1b[31mConnection closed.\x1b[0m\r\n')
+ }
+
+ return () => {
+ ws.close()
+ }
+ }, [id])
+
+ const handleInput = (data: string) => {
+ const ws = wsRef.current
+ if (ws?.readyState === WebSocket.OPEN) {
+ try {
+ ws.send(JSON.stringify({ type: 'input', data }))
+ } catch (error) {
+ console.error('Failed to send terminal input:', error)
+ }
+ } else {
+ console.warn('WebSocket is not in OPEN state')
+ }
+ }
+
+ return
+}
diff --git a/napcat.webui/src/components/under_construction.tsx b/napcat.webui/src/components/under_construction.tsx
new file mode 100644
index 00000000..56097c26
--- /dev/null
+++ b/napcat.webui/src/components/under_construction.tsx
@@ -0,0 +1,12 @@
+export default function UnderConstruction() {
+ return (
+
+
+
🚧
+
+ Under Construction
+
+
+
- )
- }
-)
+ style={{
+ width: '100%',
+ height: '100%'
+ }}
+ ref={domRef}
+ >
+
+ )
+})
export default XTerm
diff --git a/napcat.webui/src/config/site.tsx b/napcat.webui/src/config/site.tsx
index 6e25253d..9dfa7ee6 100644
--- a/napcat.webui/src/config/site.tsx
+++ b/napcat.webui/src/config/site.tsx
@@ -1,6 +1,8 @@
import {
BugIcon2,
+ FileIcon,
InfoIcon,
+ LogIcon,
RouteIcon,
SettingsIcon,
SignalTowerIcon,
@@ -49,10 +51,10 @@ export const siteConfig = {
href: '/config'
},
{
- label: '系统日志',
+ label: 'NapCat日志',
icon: (
-
+
),
href: '/logs'
@@ -75,6 +77,24 @@ export const siteConfig = {
}
]
},
+ {
+ label: '文件管理',
+ icon: (
+
+
+
+ ),
+ href: '/file_manager'
+ },
+ {
+ label: '系统终端',
+ icon: (
+
+
+
+ ),
+ href: '/terminal'
+ },
{
label: '关于我们',
icon: (
diff --git a/napcat.webui/src/controllers/webui_manager.ts b/napcat.webui/src/controllers/webui_manager.ts
index 5a3904c3..5f682118 100644
--- a/napcat.webui/src/controllers/webui_manager.ts
+++ b/napcat.webui/src/controllers/webui_manager.ts
@@ -9,6 +9,14 @@ export interface Log {
message: string
}
+export interface TerminalSession {
+ id: string
+}
+
+export interface TerminalInfo {
+ id: string
+}
+
export default class WebUIManager {
public static async checkWebUiLogined() {
const { data } =
@@ -130,4 +138,94 @@ export default class WebUIManager {
return eventSource
}
+
+ public static async createTerminal(
+ cols: number,
+ rows: number
+ ): Promise
{
+ const { data } = await serverRequest.post>(
+ '/Log/terminal/create',
+ { cols, rows }
+ )
+ return data.data
+ }
+
+ public static async sendTerminalInput(
+ id: string,
+ input: string
+ ): Promise {
+ await serverRequest.post(`/Log/terminal/${id}/input`, { input })
+ }
+
+ public static getTerminalStream(id: string, onData: (data: string) => void) {
+ const token = localStorage.getItem('token')
+ if (!token) throw new Error('未登录')
+
+ const _token = JSON.parse(token)
+ const eventSource = new EventSourcePolyfill(
+ `/api/Log/terminal/${id}/stream`,
+ {
+ headers: {
+ Authorization: `Bearer ${_token}`,
+ Accept: 'text/event-stream'
+ },
+ withCredentials: true
+ }
+ )
+
+ eventSource.onmessage = (event) => {
+ try {
+ const { data } = JSON.parse(event.data)
+ onData(data)
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ return eventSource
+ }
+
+ public static async closeTerminal(id: string): Promise {
+ await serverRequest.post(`/Log/terminal/${id}/close`)
+ }
+
+ public static async getTerminalList(): Promise {
+ const { data } =
+ await serverRequest.get>(
+ '/Log/terminal/list'
+ )
+ return data.data
+ }
+
+ public static connectTerminal(
+ id: string,
+ onData: (data: string) => void
+ ): WebSocket {
+ const token = localStorage.getItem('token')
+ if (!token) throw new Error('未登录')
+
+ const _token = JSON.parse(token)
+ const ws = new WebSocket(
+ `ws://${window.location.host}/api/ws/terminal?id=${id}&token=${_token}`
+ )
+
+ ws.onmessage = (event) => {
+ try {
+ const { data } = JSON.parse(event.data)
+ onData(data)
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ ws.onerror = (error) => {
+ console.error('WebSocket连接出错:', error)
+ }
+
+ ws.onclose = () => {
+ console.log('WebSocket连接关闭')
+ }
+
+ return ws
+ }
}
diff --git a/napcat.webui/src/pages/dashboard/terminal.tsx b/napcat.webui/src/pages/dashboard/terminal.tsx
new file mode 100644
index 00000000..610b1bc2
--- /dev/null
+++ b/napcat.webui/src/pages/dashboard/terminal.tsx
@@ -0,0 +1,122 @@
+import { DndContext, DragEndEvent, closestCenter } from '@dnd-kit/core'
+import {
+ SortableContext,
+ arrayMove,
+ horizontalListSortingStrategy
+} from '@dnd-kit/sortable'
+import { Button } from '@heroui/button'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { IoAdd, IoClose } from 'react-icons/io5'
+
+import { SortableTab } from '@/components/sortable_tab'
+import { TabList, TabPanel, Tabs } from '@/components/tabs'
+import { TerminalInstance } from '@/components/terminal/terminal-instance'
+
+import WebUIManager from '@/controllers/webui_manager'
+
+interface TerminalTab {
+ id: string
+ title: string
+}
+
+export default function TerminalPage() {
+ const [tabs, setTabs] = useState([])
+ const [selectedTab, setSelectedTab] = useState('')
+
+ useEffect(() => {
+ // 获取已存在的终端列表
+ WebUIManager.getTerminalList().then((terminals) => {
+ if (terminals.length === 0) return
+
+ const newTabs = terminals.map((terminal, index) => ({
+ id: terminal.id,
+ title: `Terminal ${index + 1}`
+ }))
+
+ setTabs(newTabs)
+ setSelectedTab(newTabs[0].id)
+ })
+ }, [])
+
+ const createNewTerminal = async () => {
+ try {
+ const { id } = await WebUIManager.createTerminal(80, 24)
+ const newTab = {
+ id,
+ title: `Terminal ${tabs.length + 1}`
+ }
+
+ setTabs((prev) => [...prev, newTab])
+ setSelectedTab(id)
+ } catch (error) {
+ console.error('Failed to create terminal:', error)
+ toast.error('创建终端失败')
+ }
+ }
+
+ const closeTerminal = async (id: string) => {
+ try {
+ await WebUIManager.closeTerminal(id)
+ setTabs((prev) => prev.filter((tab) => tab.id !== id))
+ if (selectedTab === id) {
+ setSelectedTab(tabs[0]?.id || '')
+ }
+ } catch (error) {
+ toast.error('关闭终端失败')
+ }
+ }
+
+ const handleDragEnd = (event: DragEndEvent) => {
+ const { active, over } = event
+ if (active.id !== over?.id) {
+ setTabs((items) => {
+ const oldIndex = items.findIndex((item) => item.id === active.id)
+ const newIndex = items.findIndex((item) => item.id === over?.id)
+ return arrayMove(items, oldIndex, newIndex)
+ })
+ }
+ }
+
+ return (
+
+
+
+
+
+
+ {tabs.map((tab) => (
+
+ {tab.title}
+
+
+ ))}
+
+
+ }
+ />
+
+ {tabs.map((tab) => (
+
+
+
+ ))}
+
+
+