refactor(ui): adjust global navigation bar style (#13419)

### What problem does this PR solve? Renovate global navigation bar, align styles to the design. (May causes minor layout issues in sub-pages, will check and fix soon) ### Type of change - [x] Refactoring
2026-07-10 05:14:48 +08:00 · 2026-03-05 20:47:29 +08:00
parent 9e0e128ce5
commit ef4cbe72a3
45 changed files with 1334 additions and 1250 deletions
--- a/web/src/components/embed-dialog/index.tsx
+++ b/web/src/components/embed-dialog/index.tsx
@@ -1,5 +1,4 @@
 import CopyToClipboard from '@/components/copy-to-clipboard';
-import HighLightMarkdown from '@/components/highlight-markdown';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { Button } from '@/components/ui/button';
 import {
@@ -32,7 +31,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { ExternalLink } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import {
+  oneDark,
+  oneLight,
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { z } from 'zod';
+import { useIsDarkTheme } from '../theme-provider';

 const FormSchema = z.object({
  visibleAvatar: z.boolean(),
@@ -56,8 +61,10 @@ function EmbedDialog({
  from,
  beta = '',
  isAgent,
+  visible,
 }: IProps) {
  const { t } = useTranslate('chat');
+  const isDarkTheme = useIsDarkTheme();

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
@@ -95,23 +102,30 @@ function EmbedDialog({
        : from === SharedFrom.Agent
          ? Routes.AgentShare
          : Routes.ChatShare;
-    let src = `${location.origin}${baseRoute}?shared_id=${token}&from=${from}&auth=${beta}`;
+
+    const src = new URL(`${location.origin}${baseRoute}`);
+    src.searchParams.append('shared_id', token);
+    src.searchParams.append('from', from);
+    src.searchParams.append('auth', beta);
+
    if (publishAvatar) {
-      src += '&release=true';
+      src.searchParams.append('release', 'true');
    }
    if (visibleAvatar) {
-      src += '&visible_avatar=1';
+      src.searchParams.append('visible_avatar', '1');
    }
    if (locale) {
-      src += `&locale=${locale}`;
+      src.searchParams.append('locale', locale);
    }
-    if (enableStreaming) {
-      src += '&streaming=true';
+    if (embedType === 'widget') {
+      src.searchParams.append('mode', 'master');
+      src.searchParams.append('streaming', String(enableStreaming));
    }
    if (theme && embedType === 'fullscreen') {
-      src += `&theme=${theme}`;
+      src.searchParams.append('theme', theme);
    }
-    return src;
+
+    return src.toString();
  }, [beta, from, token, values]);

  const text = useMemo(() => {
@@ -119,44 +133,36 @@ function EmbedDialog({
    const { embedType } = values;

    if (embedType === 'widget') {
-      const { enableStreaming } = values;
-      const streamingParam = enableStreaming
-        ? '&streaming=true'
-        : '&streaming=false';
-      return `
-  ~~~ html
-  <iframe src="${iframeSrc}&mode=master${streamingParam}"
-    style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;background:transparent;z-index:9999"
-    frameborder="0" allow="microphone;camera"></iframe>
-  <script>
-  window.addEventListener('message',e=>{
-    if(e.origin!=='${location.origin.replace(/:\d+/, ':9222')}')return;
-    if(e.data.type==='CREATE_CHAT_WINDOW'){
-      if(document.getElementById('chat-win'))return;
-      const i=document.createElement('iframe');
-      i.id='chat-win';i.src=e.data.src;
-      i.style.cssText='position:fixed;bottom:104px;right:24px;width:380px;height:500px;border:none;background:transparent;z-index:9998;display:none';
-      i.frameBorder='0';i.allow='microphone;camera';
-      document.body.appendChild(i);
-    }else if(e.data.type==='TOGGLE_CHAT'){
-      const w=document.getElementById('chat-win');
-      if(w)w.style.display=e.data.isOpen?'block':'none';
-    }else if(e.data.type==='SCROLL_PASSTHROUGH')window.scrollBy(0,e.data.deltaY);
-  });
-  </script>
-~~~
-  `;
+      return `<iframe
+  src="${iframeSrc}"
+  style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;background:transparent;z-index:9999"
+  frameborder="0"
+  allow="microphone;camera"
+></iframe>
+<script>
+window.addEventListener('message',e=>{
+  if(e.origin!=='${location.origin.replace(/:\d+/, ':9222')}')return;
+  if(e.data.type==='CREATE_CHAT_WINDOW'){
+    if(document.getElementById('chat-win'))return;
+    const i=document.createElement('iframe');
+    i.id='chat-win';i.src=e.data.src;
+    i.style.cssText='position:fixed;bottom:104px;right:24px;width:380px;height:500px;border:none;background:transparent;z-index:9998;display:none';
+    i.frameBorder='0';i.allow='microphone;camera';
+    document.body.appendChild(i);
+  }else if(e.data.type==='TOGGLE_CHAT'){
+    const w=document.getElementById('chat-win');
+    if(w)w.style.display=e.data.isOpen?'block':'none';
+  }else if(e.data.type==='SCROLL_PASSTHROUGH')window.scrollBy(0,e.data.deltaY);
+});
+</script>
+`;
    } else {
-      return `
-  ~~~ html
-  <iframe
+      return `<iframe
  src="${iframeSrc}"
  style="width: 100%; height: 100%; min-height: 600px"
  frameborder="0"
->
-</iframe>
-~~~
-  `;
+></iframe>
+`;
    }
  }, [generateIframeSrc, values]);

@@ -166,13 +172,14 @@ function EmbedDialog({
  }, [generateIframeSrc]);

  return (
-    <Dialog open onOpenChange={hideModal}>
+    <Dialog open={visible} onOpenChange={hideModal}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            {t('embedIntoSite', { keyPrefix: 'common' })}
          </DialogTitle>
        </DialogHeader>
+
        <section className="w-full overflow-auto space-y-5 text-sm text-text-secondary">
          <Form {...form}>
            <form className="space-y-5">
@@ -309,10 +316,16 @@ function EmbedDialog({
              />
            </form>
          </Form>
-          <div className="max-h-[350px] overflow-auto">
+          <div>
            <span>{t('embedCode', { keyPrefix: 'search' })}</span>
-            <div className="max-h-full overflow-y-auto">
-              <HighLightMarkdown>{text}</HighLightMarkdown>
+            <div>
+              <SyntaxHighlighter
+                className="max-h-[350px] overflow-auto scrollbar-auto"
+                language="html"
+                style={isDarkTheme ? oneDark : oneLight}
+              >
+                {text}
+              </SyntaxHighlighter>
            </div>
          </div>
          <Button
@@ -327,7 +340,7 @@ function EmbedDialog({
            {t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
            <span className="ml-1 inline-block">ID</span>
          </div>
-          <div className="bg-bg-card rounded-lg flex justify-between p-2">
+          <div className="bg-bg-card rounded-lg flex items-center justify-between p-2">
            <span>{token} </span>
            <CopyToClipboard text={token}></CopyToClipboard>
          </div>
--- a/web/src/components/form-container.tsx
+++ b/web/src/components/form-container.tsx
@@ -12,7 +12,12 @@ export function FormContainer({
  className,
 }: FormContainerProps) {
  return show ? (
-    <section className={cn('border rounded-lg p-5 space-y-5', className)}>
+    <section
+      className={cn(
+        'border-0.5 border-border-button rounded-lg p-5 space-y-5',
+        className,
+      )}
+    >
      {children}
    </section>
  ) : (
--- a/web/src/components/highlight-markdown/index.tsx
+++ b/web/src/components/highlight-markdown/index.tsx
@@ -19,8 +19,10 @@ import { useIsDarkTheme } from '../theme-provider';
 import styles from './index.module.less';

 const HighLightMarkdown = ({
+  className,
  children,
 }: {
+  className?: string;
  children: string | null | undefined;
 }) => {
  const isDarkTheme = useIsDarkTheme();
--- a/web/src/components/list-filter-bar/index.tsx
+++ b/web/src/components/list-filter-bar/index.tsx
@@ -25,7 +25,12 @@ export const FilterButton = React.forwardRef<
  ButtonProps & { count?: number }
 >(({ count = 0, ...props }, ref) => {
  return (
-    <Button variant="secondary" {...props} ref={ref}>
+    <Button
+      variant="outline"
+      size={count > 0 ? 'default' : 'icon'}
+      {...props}
+      ref={ref}
+    >
      {/* <span
        className={cn({
          'text-text-primary': count > 0,
@@ -34,12 +39,13 @@ export const FilterButton = React.forwardRef<
      >
        Filter
      </span> */}
+      <Funnel />
+
      {count > 0 && (
-        <span className="rounded-full bg-text-badge px-1 text-xs ">
+        <span className="rounded bg-text-badge px-1 py-0.5 text-xs leading-none text-text-primary">
          {count}
        </span>
      )}
-      <Funnel />
    </Button>
  );
 });
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -4,40 +4,57 @@ import * as React from 'react';

 import { cn } from '@/lib/utils';
 import { LucideLoader2, Plus } from 'lucide-react';
+import { Link, LinkProps } from 'react-router';

 const buttonVariants = cva(
  cn(
    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-0',
-    'disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0',
+    'disabled:pointer-events-none disabled:opacity-50 rounded border-0.5 border-transparent',
+    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0',
  ),
  {
    variants: {
      variant: {
+        // Solid variant series:
+        // Button has its own background color, may have borders
        default:
          'bg-text-primary text-bg-base shadow-xs hover:bg-text-primary/90 focus-visible:bg-text-primary/90',

+        secondary: `
+          bg-bg-card
+          hover:text-text-primary hover:bg-border-button
+          focus-visible:text-text-primary focus-visible:bg-border-button
+        `,
+
+        highlighted: `
+          bg-text-primary text-bg-base border-b-4 border-b-accent-primary
+          hover:bg-text-primary/90 focus-visible:bg-text-primary/90
+        `,
+
+        accent: `
+          bg-accent-primary text-white
+          hover:bg-accent-primary/90 focus-visible:bg-accent-primary/90
+        `,
+
        destructive: `
          bg-state-error text-white shadow-xs
          hover:bg-state-error/90 focus-visible:ring-state-error/20 dark:focus-visible:ring-state-error/40
        `,
+
+        // Outline variant series
+        // Button has transparent or greyish background, may have borders
        outline: `
          text-text-secondary bg-bg-input border-0.5 border-border-button
          hover:text-text-primary hover:bg-border-button hover:border-border-default
          focus-visible:text-text-primary focus-visible:bg-border-button focus-visible:border-border-button
-        `,
-        secondary:
-          'bg-bg-input text-text-primary shadow-xs hover:bg-bg-input/80 border border-border-button',
+        `, // light: bg=transparent, dark: bg-input

-        ghost: `
-          text-text-secondary
-          hover:bg-border-button hover:text-text-primary
-          focus-visible:text-text-primary focus-visible:bg-border-button
+        dashed: `
+          text-text-secondary border-border-button border-dashed
+          hover:text-text-primary hover:bg-border-button hover:border-border-default
+          focus-visible:text-text-primary focus-visible:bg-border-button focus-visible:border-border-button
        `,

-        link: 'text-primary underline-offset-4 hover:underline',
-        icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
-        dashed: 'border border-dashed border-border-button hover:bg-accent',
-
        transparent: `
          text-text-secondary bg-transparent border-0.5 border-border-button
          hover:text-text-primary hover:bg-border-button
@@ -49,14 +66,12 @@ const buttonVariants = cva(
          hover:bg-state-error/10 focus-visible:bg-state-error/10
        `,

-        accent: `
-          bg-accent-primary text-white
-          hover:bg-accent-primary/90 focus-visible:bg-accent-primary/90
-        `,
-
-        highlighted: `
-          bg-text-primary text-bg-base border-b-4 border-b-accent-primary
-          hover:bg-text-primary/90 focus-visible:bg-text-primary/90
+        // Ghost variant series
+        // Button has transparent background, without borders
+        ghost: `
+          text-text-secondary
+          hover:bg-border-button focus-visible:bg-border-button
+          hover:text-text-primary focus-visible:text-text-primary
        `,

        delete: `
@@ -64,15 +79,23 @@ const buttonVariants = cva(
          hover:bg-state-error-5 hover:text-state-error
          focus-visible:text-state-error focus-visible:bg-state-error-5
        `,
+
+        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
-        default: 'h-8 px-2.5 py-1.5 ',
-        sm: 'h-6 rounded-sm px-2',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
        auto: 'h-full px-1',
-        'icon-sm': 'size-8',
-        'icon-xs': 'size-7',
+
+        xl: 'h-12 rounded-xl px-5',
+        lg: 'h-10 rounded-lg px-4',
+        default: 'h-8 rounded px-3',
+        sm: 'h-7 rounded-sm px-2',
+        xs: 'h-6 rounded-xs px-1',
+
+        'icon-xl': 'size-12 rounded-xl',
+        'icon-lg': 'size-10 rounded-lg',
+        icon: 'size-8 rounded',
+        'icon-sm': 'size-7 rounded-sm',
+        'icon-xs': 'size-6 rounded-xs',
      },
    },
    defaultVariants: {
@@ -82,45 +105,58 @@ const buttonVariants = cva(
  },
 );

-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export type ButtonProps<IsAnchor extends boolean = false> = {
  asChild?: boolean;
+  asLink?: boolean;
  loading?: boolean;
  block?: boolean;
-}
+  disabled?: boolean;
+  dot?: boolean;
+} & VariantProps<typeof buttonVariants> &
+  (IsAnchor extends true
+    ? LinkProps
+    : React.ButtonHTMLAttributes<HTMLButtonElement>);

-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
+const Button = React.forwardRef(
+  <IsAnchor extends boolean = false>(
    {
      children,
      className,
      variant,
      size,
+      dot = false,
      asChild = false,
+      asLink = false,
      loading = false,
      disabled = false,
      block = false,
      ...props
-    },
-    ref,
+    }: ButtonProps<IsAnchor>,
+    ref: React.ForwardedRef<
+      IsAnchor extends true ? HTMLAnchorElement : HTMLButtonElement
+    >,
  ) => {
-    const Comp = asChild ? Slot : 'button';
+    const Comp = asChild ? Slot : asLink ? Link : 'button';

    return (
      <Comp
        className={cn(
-          'bg-bg-card',
-          { 'block w-full': block },
          buttonVariants({ variant, size, className }),
+          { 'block w-full': block },
+          { relative: dot },
        )}
-        ref={ref}
+        // @ts-ignore
+        ref={ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>}
        disabled={loading || disabled}
        {...props}
      >
-        {loading && <LucideLoader2 className="animate-spin" />}
-        {children}
+        <>
+          {dot && (
+            <span className="absolute size-[6px] rounded-full -right-[3px] -top-[3px] bg-state-error animate" />
+          )}
+          {loading && <LucideLoader2 className="animate-spin" />}
+          {children}
+        </>
      </Comp>
    );
  },
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -30,15 +30,12 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = 'CardHeader';

 const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { as?: React.ElementType }
+>(({ className, as: As = 'div', ...props }, ref) => (
+  <As
    ref={ref}
-    className={cn(
-      'text-2xl font-semibold leading-none tracking-tight',
-      className,
-    )}
+    className={cn('text-2xl leading-normal font-medium', className)}
    {...props}
  />
 ));
@@ -50,7 +47,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-sm text-text-secondary', className)}
    {...props}
  />
 ));
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
-      'peer size-4 shrink-0 rounded-sm border border-text-secondary outline-0 transition-colors bg-bg-component',
+      'peer size-4 shrink-0 rounded-2xs border border-text-disabled outline-0 transition-colors bg-transparent',
      'hover:border-border-default hover:bg-border-button',
      'focus-visible:border-border-default focus-visible:bg-border-default',
      'disabled:cursor-not-allowed disabled:opacity-50',
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -84,8 +84,12 @@ const DropdownMenuItem = React.forwardRef<
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'ps-8',
+      'relative flex cursor-default select-none items-center gap-2',
+      'rounded-sm px-2 py-1.5 text-sm text-text-secondary outline-none transition-colors',
+      'focus:bg-bg-card focus:text-text-primary',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
      justifyBetween && 'flex justify-between',
      className,
    )}
--- a/web/src/components/ui/skeleton.tsx
+++ b/web/src/components/ui/skeleton.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
+      className={cn('animate-pulse rounded-md bg-bg-card', className)}
      {...props}
    />
  );
@@ -26,12 +26,10 @@ function ParagraphSkeleton() {

 function CardSkeleton() {
  return (
-    <div className="flex flex-col space-y-3">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
+    <div className="w-64">
+      <Skeleton className="mb-3 h-28 rounded-xl" />
+      <Skeleton className="mb-2 h-4" />
+      <Skeleton className="h-4 w-4/5" />
    </div>
  );
 }
--- a/web/src/components/what-is-this.tsx
+++ b/web/src/components/what-is-this.tsx
@@ -0,0 +1,15 @@
+import { LucideCircleQuestionMark } from 'lucide-react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+export default function WhatIsThis({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <LucideCircleQuestionMark className="size-[1em]" />
+      </TooltipTrigger>
+
+      <TooltipContent>{children}</TooltipContent>
+    </Tooltip>
+  );
+}