UI optimize

.github/workflows/go.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22.13.0
           cache: 'npm'
           cache-dependency-path: 'web/package-lock.json'
       - name: Set up Go

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22.13.0
           cache: 'npm'
           cache-dependency-path: 'web/package-lock.json'
       - name: Set up Go

.gitignore

@@ -44,6 +44,8 @@ test_configs/
 .DS_Store
 /vendor
 
+.next-dev
+
 dist/
 out/
 

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build the Next.js frontend
-FROM node:20-alpine AS web-builder
+FROM node:22.13.0-alpine AS web-builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY web/package.json web/package-lock.json ./web/

README.md

@@ -1342,7 +1342,7 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 Requirements:
 
-- Node.js `18.19.0` or higher
+- Node.js `22.13.0` or higher
 - Go `1.17` or higher
 
 The frontend project is built with [Next.js](https://nextjs.org/) and [daisyUI](https://daisyui.com/). To start the development environment, run:

README_CN.md

@@ -1340,7 +1340,7 @@ nssm remove YOURSERVICENAME
 
 要求：
 
-- Node.js `18.19.0` 或更高版本
+- Node.js `22.13.0` 或更高版本
 - Go `1.17` 或更高版本
 
 前端项目使用 [Next.js](https://nextjs.org/) 和 [daisyUI](https://daisyui.com/) 构建。要启动开发环境，运行：

internal/server/server.go

@@ -16,7 +16,7 @@ import (
 	log "github.com/sirupsen/logrus"
 )
 
-//go:embed out/*
+//go:embed all:out
 var embeddedFiles embed.FS
 
 type Server struct {

web/api/logs.ts

@@ -4,7 +4,7 @@ export interface LogEntry {
 	timestamp: string;
 	level: string;
 	message: string;
-	fields?: { [key: string]: any };
+	fields?: Record<string, unknown>;
 }
 
 export interface LogsResponse {
@@ -82,4 +82,4 @@ export async function get_log_levels(credentials: string): Promise<string[]> {
 	}
 
 	return [];
-}
+}

web/api/provider.ts

@@ -33,6 +33,8 @@ export interface MultiProviderConfig {
 	};
 }
 
+export type ProviderConfig = MultiProviderConfig[string];
+
 export async function get_provider_settings(credentials: string): Promise<ProviderSetting[]> {
 	if (credentials) {
 		const resp = await fetch(get_api_server() + '/api/v1/provider/settings', {
@@ -122,7 +124,7 @@ export async function update_multi_providers(credentials: string, providers: Mul
 	return false;
 }
 
-export async function add_provider_config(credentials: string, providerName: string, config: any): Promise<boolean> {
+export async function add_provider_config(credentials: string, providerName: string, config: ProviderConfig): Promise<boolean> {
 	if (credentials) {
 		const resp = await fetch(get_api_server() + `/api/v1/providers/${providerName}`, {
 			method: 'PUT',
@@ -156,4 +158,4 @@ export async function delete_provider_config(credentials: string, providerName:
 	}
 
 	return false;
-}
+}

web/app/domains/page.tsx

@@ -4,9 +4,7 @@ import React, { useContext, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { CommonContext } from '@/components/user';
 import { DomainControl } from '@/components/domain-control';
-import { ToastContainer } from 'react-toastify';
 import { get_info } from '@/api/info';
-import 'react-toastify/dist/ReactToastify.css';
 import { MultiProviderControl } from '@/components/multi-provider-control';
 
 export default function Domains() {
@@ -27,13 +25,24 @@ export default function Domains() {
 	}, [setCurrentPage, credentials, saveVersion, router]);
 
 	return (
-		<main className="flex min-h-screen flex-col items-center justify-start pt-10 max-w-screen-xl">
-			<ToastContainer />
-			<div className="flex flex-col items-center w-full bg-base-100 p-10">
-				<MultiProviderControl />
-				<div className="divider"></div>
-				<DomainControl />
+		<main className="page-wrap">
+			<div className="page-shell">
+				<section className="page-hero page-hero-compact">
+					<div className="eyebrow">
+						<span className="inline-block h-2 w-2 rounded-full bg-violet-400" />
+						Configuration
+					</div>
+					<h1 className="page-title">Organize provider credentials and managed domains.</h1>
+				</section>
+
+				<section className="section-shell">
+					<MultiProviderControl />
+				</section>
+
+				<section className="section-shell">
+					<DomainControl />
+				</section>
 			</div>
 		</main>
 	);
-};
+};