Fix: Modify the style of the user center #10703 (#11419)

### What problem does this PR solve? Fix: Modify the style of the user center ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-24 23:46:52 +08:00 · 2025-11-21 09:33:50 +08:00
parent 971c1bcba7
commit 653b785958
27 changed files with 122 additions and 897 deletions
--- a/web/src/components/ui/command.tsx
+++ b/web/src/components/ui/command.tsx
@ -39,7 +39,10 @@ const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" data-cmdk-input-wrapper="">
+  <div
+    className="flex items-center border rounded-md border-border-default bg-bg-input px-3"
+    data-cmdk-input-wrapper=""
+  >
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
@ -66,7 +69,10 @@ const CommandList = React.forwardRef<
   */
  <CommandPrimitive.List
    ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    className={cn(
+      'max-h-[300px] overflow-y-auto overflow-x-hidden scrollbar-auto',
+      className,
+    )}
    onWheel={(e) => e.stopPropagation()}
    onMouseEnter={(e) => e.currentTarget.focus()}
    tabIndex={-1}
@ -96,7 +102,7 @@ const CommandGroup = React.forwardRef<
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-secondary',
      className,
    )}
    {...props}
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@ -3,7 +3,6 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Eye, EyeOff, Search } from 'lucide-react';
 import { useState } from 'react';
-import { Button } from './button';

 export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
@ -50,6 +49,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
            'pr-12': !!suffix || isPasswordInput,
            'pr-24': !!suffix && isPasswordInput,
          },
+          type === 'number' &&
+            '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
          className,
        )}
        value={inputValue ?? ''}
@ -77,10 +78,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
            </span>
          )}
          {isPasswordInput && (
-            <Button
-              variant="transparent"
+            <button
              type="button"
              className="
+                p-2 text-text-secondary
                absolute border-0 right-1 top-[50%] translate-y-[-50%]
                dark:peer-autofill/input:text-text-secondary-inverse
                dark:peer-autofill/input:hover:text-text-primary-inverse
@ -93,7 +94,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
              ) : (
                <Eye className="size-[1em]" />
              )}
-            </Button>
+            </button>
          )}
        </div>
      );
--- a/web/src/components/ui/modal/modal.tsx
+++ b/web/src/components/ui/modal/modal.tsx
@ -27,7 +27,10 @@ export interface ModalProps {
  okText?: ReactNode | string;
  onOk?: () => void;
  onCancel?: () => void;
+  okButtonClassName?: string;
+  cancelButtonClassName?: string;
  disabled?: boolean;
+  style?: React.CSSProperties;
 }
 export interface ModalType extends FC<ModalProps> {
  show: typeof modalIns.show;
@ -56,7 +59,10 @@ const Modal: ModalType = ({
  confirmLoading,
  cancelText,
  okText,
+  okButtonClassName,
+  cancelButtonClassName,
  disabled = false,
+  style,
 }) => {
  const sizeClasses = {
    small: 'max-w-md',
@ -111,7 +117,10 @@ const Modal: ModalType = ({
          <button
            type="button"
            onClick={() => handleCancel()}
-            className="px-2 py-1 border border-border-button rounded-md hover:bg-bg-card hover:text-text-primary "
+            className={cn(
+              'px-2 py-1 border border-border-button rounded-md hover:bg-bg-card hover:text-text-primary ',
+              cancelButtonClassName,
+            )}
          >
            {cancelText ?? t('modal.cancelText')}
          </button>
@ -122,6 +131,7 @@ const Modal: ModalType = ({
            className={cn(
              'px-2 py-1 bg-primary text-primary-foreground rounded-md hover:bg-primary/90',
              { 'cursor-not-allowed': disabled },
+              okButtonClassName,
            )}
          >
            {confirmLoading && (
@ -153,23 +163,26 @@ const Modal: ModalType = ({
    handleOk,
    showfooter,
    footerClassName,
+    okButtonClassName,
+    cancelButtonClassName,
  ]);
  return (
    <DialogPrimitive.Root open={open} onOpenChange={handleChange}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay
-          className="fixed inset-0 z-50 bg-colors-background-neutral-weak/50 backdrop-blur-sm flex items-center justify-center p-4"
+          className="fixed inset-0 z-50 bg-bg-card backdrop-blur-sm flex items-center justify-center p-4"
          onClick={() => maskClosable && onOpenChange?.(false)}
        >
          <DialogPrimitive.Content
            className={`relative w-[700px] ${full ? 'max-w-full' : sizeClasses[size]} ${className} bg-bg-base rounded-lg shadow-lg border border-border-default transition-all focus-visible:!outline-none`}
+            style={style}
            onClick={(e) => e.stopPropagation()}
          >
            {/* title */}
            {(title || closable) && (
              <div
                className={cn(
-                  'flex items-center px-6 py-4',
+                  'flex items-start px-6 py-4',
                  {
                    'justify-end': closable && !title,
                    'justify-between': closable && title,
@ -187,7 +200,7 @@ const Modal: ModalType = ({
                  <DialogPrimitive.Close asChild>
                    <button
                      type="button"
-                      className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted focus-visible:outline-none"
+                      className="flex h-7 w-7 items-center justify-center text-text-secondary rounded-full hover:bg-bg-card focus-visible:outline-none"
                      onClick={handleCancel}
                    >
                      {closeIcon}
@ -198,7 +211,7 @@ const Modal: ModalType = ({
            )}

            {/* content */}
-            <div className="py-2 px-6 overflow-y-auto scrollbar-auto max-h-[80vh] focus-visible:!outline-none">
+            <div className="py-2 px-6 overflow-y-auto scrollbar-auto max-h-[calc(100vh-280px)] focus-visible:!outline-none">
              {destroyOnClose && !open ? null : children}
            </div>

--- a/web/src/components/ui/multi-select.tsx
+++ b/web/src/components/ui/multi-select.tsx
@ -378,12 +378,12 @@ export const MultiSelect = React.forwardRef<
          align="start"
          onEscapeKeyDown={() => setIsPopoverOpen(false)}
        >
-          <Command>
+          <Command className="p-5 pb-8">
            <CommandInput
              placeholder={t('common.search') + '...'}
              onKeyDown={handleInputKeyDown}
            />
-            <CommandList>
+            <CommandList className="mt-2">
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup>
                {showSelectAll && (
@ -437,9 +437,9 @@ export const MultiSelect = React.forwardRef<
                    })}
                  </CommandGroup>
                ))}
-              <CommandSeparator />
              <CommandGroup>
-                <div className="flex items-center justify-between">
+                <div className=" absolute bottom-1 left-1 right-1 flex items-center justify-between mx-5 bg-bg-base border-t border-border-button">
+                  <CommandSeparator />
                  {selectedValues.length > 0 && (
                    <>
                      <CommandItem
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@ -59,7 +59,7 @@ const SelectScrollUpButton = React.forwardRef<
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
-      'flex cursor-default items-center justify-center py-1',
+      'flex cursor-default items-center justify-center py-1 text-text-secondary hover:text-text-primary',
      className,
    )}
    {...props}
@ -76,7 +76,7 @@ const SelectScrollDownButton = React.forwardRef<
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
-      'flex cursor-default items-center justify-center py-1',
+      'flex cursor-default items-center justify-center py-1 text-text-secondary hover:text-text-primary',
      className,
    )}
    {...props}
--- a/web/src/components/ui/textarea.tsx
+++ b/web/src/components/ui/textarea.tsx
@ -54,7 +54,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
    return (
      <textarea
        className={cn(
-          'flex min-h-[80px] w-full bg-bg-input rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-text-disabled focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
+          'flex min-h-[80px] w-full bg-bg-input rounded-md border border-border-button px-3 py-2 text-base ring-offset-background placeholder:text-text-disabled focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
          className,
        )}
        rows={autoSize?.minRows ?? props.rows ?? undefined}
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
-      'z-50 overflow-auto scrollbar-auto rounded-md whitespace-pre-wrap border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-w-[30vw]',
+      'z-50 overflow-auto scrollbar-auto rounded-md whitespace-pre-wrap border bg-bg-base px-3 py-1.5 text-sm text-text-primary shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-w-[30vw]',
      className,
    )}
    {...props}
@ -39,7 +39,7 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
          e.preventDefault(); // Prevent clicking the tooltip from triggering form save
        }}
      >
-        <CircleQuestionMark className="size-3 ml-2" />
+        <CircleQuestionMark className="size-3 ml-[2px] -translate-y-1" />
      </TooltipTrigger>
      <TooltipContent>{tooltip}</TooltipContent>
    </Tooltip>