Northern_Lights/NapCatQQ
0
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2026-03-01 16:20:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor UI for network cards and improve theming

Browse Source 
Redesigned network display cards and related components for a more modern, consistent look, including improved button styles, card layouts, and responsive design. Added support for background images and dynamic theming across cards, tables, and log views. Enhanced input and select components with unified styling. Improved file table responsiveness and log display usability. Refactored OneBot API debug and navigation UI for better usability and mobile support.
This commit is contained in:
手瓜一十雪
2025-12-22 12:27:56 +08:00
parent eb86e4705f
commit a84d5d3976
38 changed files with 919 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/napcat-webui-frontend/src/components/input/file_input.tsx
View File

@@ -7,6 +7,7 @@ export interface FileInputProps {
onDelete?: () => Promise<void> | void;
label?: string;
accept?: string;
placeholder?: string;
}
const FileInput: React.FC<FileInputProps> = ({
@@ -14,6 +15,7 @@ const FileInput: React.FC<FileInputProps> = ({
onDelete,
label,
accept,
placeholder,
}) => {
const inputRef = useRef<HTMLInputElement>(null);
const [isLoading, setIsLoading] = useState(false);
@@ -25,8 +27,13 @@ const FileInput: React.FC<FileInputProps> = ({
ref={inputRef}
label={label}
type='file'
placeholder='选择文件'
placeholder={placeholder || '选择文件'}
accept={accept}
classNames={{
inputWrapper:
'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
input: 'bg-transparent text-default-700 placeholder:text-default-400',
}}
onChange={async (e) => {
try {
setIsLoading(true);

11
packages/napcat-webui-frontend/src/components/input/image_input.tsx
View File

@@ -4,9 +4,9 @@ import { Input } from '@heroui/input';
import { useRef } from 'react';
export interface ImageInputProps {
onChange: (base64: string) => void
value: string
label?: string
onChange: (base64: string) => void;
value: string;
label?: string;
}
const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
@@ -26,6 +26,11 @@ const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
type='file'
placeholder='选择图片'
accept='image/*'
classNames={{
inputWrapper:
'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
input: 'bg-transparent text-default-700 placeholder:text-default-400',
}}
onChange={async (e) => {
const file = e.target.files?.[0];
if (file) {