Fix: Home and team page style adjustment, and some bug fixes #10703 (#10805)

### What problem does this PR solve?

Fix: Home and team page style adjustment, and some bug fixes #10703

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/card-singleline-container/index.less

@@ -0,0 +1,46 @@
+.single :nth-child(n + 2):not(:last-child) {
+  display: none;
+}
+.single :nth-child(-n + 1):not(:last-child) {
+  display: flex;
+}
+@media (min-width: 640px) {
+  .single :nth-child(n + 2):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 1):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 768px) {
+  .single :nth-child(n + 3):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 2):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 1024px) {
+  .single :nth-child(n + 4):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 3):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 1280px) {
+  .single :nth-child(n + 5):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 4):not(:last-child) {
+    display: flex;
+  }
+}
+@media (min-width: 1536px) {
+  .single :nth-child(n + 6):not(:last-child) {
+    display: none;
+  }
+  .single :nth-child(-n + 5):not(:last-child) {
+    display: flex;
+  }
+}

web/src/components/card-singleline-container/index.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { isValidElement, PropsWithChildren, ReactNode } from 'react';
+import './index.less';
+
+type CardContainerProps = { className?: string } & PropsWithChildren;
+
+export function CardSineLineContainer({
+  children,
+  className,
+}: CardContainerProps) {
+  const flattenChildren = (children: ReactNode): ReactNode[] => {
+    const result: ReactNode[] = [];
+
+    const traverse = (child: ReactNode) => {
+      if (Array.isArray(child)) {
+        child.forEach(traverse);
+      } else if (isValidElement(child) && child.props.children) {
+        result.push(child);
+      } else {
+        result.push(child);
+      }
+    };
+
+    traverse(children);
+    return result;
+  };
+  const childArray = flattenChildren(children);
+  const childCount = childArray.length;
+  console.log(childArray, childCount);
+
+  return (
+    <section
+      className={cn(
+        'grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 single',
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}

web/src/components/home-card.tsx

@@ -29,7 +29,7 @@ export function HomeCard({
         onClick?.();
       }}
     >
-      <CardContent className="p-4 flex gap-2 items-start group h-full">
+      <CardContent className="p-4 flex gap-2 items-start group h-full w-full">
         <div className="flex justify-between mb-4">
           <RAGFlowAvatar
             className="w-[32px] h-[32px]"

web/src/components/skeleton-card.tsx

@@ -7,10 +7,10 @@ type SkeletonCardProps = {
 export function SkeletonCard(props: SkeletonCardProps) {
   const { className } = props;
   return (
-    <div className={cn('space-y-2', className)}>
-      <Skeleton className="h-4 w-full bg-bg-card" />
-      <Skeleton className="h-4 w-full bg-bg-card" />
-      <Skeleton className="h-4 w-2/3 bg-bg-card" />
+    <div className={cn('space-y-4', className)}>
+      <Skeleton className="h-8 w-full bg-bg-card rounded-lg" />
+      <Skeleton className="h-8 w-4/5 bg-bg-card rounded-lg" />
+      <Skeleton className="h-8 w-3/5 bg-bg-card rounded-lg" />
     </div>
   );
 }

web/src/components/ui/segmented.tsx

@@ -13,6 +13,33 @@ export interface SegmentedLabeledOption {
   title?: string;
 }
 declare type SegmentedOptions = (SegmentedRawOption | SegmentedLabeledOption)[];
+const segmentedVariants = {
+  round: {
+    default: 'rounded-md',
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    xxl: 'rounded-2xl',
+    xxxl: 'rounded-3xl',
+    full: 'rounded-full',
+  },
+  size: {
+    default: 'px-1 py-1',
+    sm: 'px-1 py-1',
+    md: 'px-2 py-1.5',
+    lg: 'px-4 px-2',
+    xl: 'px-5 py-2.5',
+    xxl: 'px-6 py-3',
+  },
+  buttonSize: {
+    default: 'px-2 py-1',
+    md: 'px-2 py-1',
+    lg: 'px-4 px-1.5',
+    xl: 'px-6 py-2',
+  },
+};
 export interface SegmentedProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   options: SegmentedOptions;
@@ -24,6 +51,9 @@ export interface SegmentedProps
   direction?: 'ltr' | 'rtl';
   motionName?: string;
   activeClassName?: string;
+  rounded?: keyof typeof segmentedVariants.round;
+  sizeType?: keyof typeof segmentedVariants.size;
+  buttonSize?: keyof typeof segmentedVariants.buttonSize;
 }
 
 export function Segmented({
@@ -32,6 +62,9 @@ export function Segmented({
   onChange,
   className,
   activeClassName,
+  rounded = 'default',
+  sizeType = 'default',
+  buttonSize = 'default',
 }: SegmentedProps) {
   const [selectedValue, setSelectedValue] = React.useState<
     SegmentedValue | undefined
@@ -45,7 +78,9 @@ export function Segmented({
   return (
     <div
       className={cn(
-        'flex items-center rounded-3xl p-1 gap-2 bg-bg-card px-5 py-2.5',
+        'flex items-center p-1 gap-2 bg-bg-card',
+        segmentedVariants.round[rounded],
+        segmentedVariants.size[sizeType],
         className,
       )}
     >
@@ -57,10 +92,11 @@ export function Segmented({
           <div
             key={actualValue}
             className={cn(
-              'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer',
+              'inline-flex items-center  text-base font-normal cursor-pointer',
+              segmentedVariants.round[rounded],
+              segmentedVariants.buttonSize[buttonSize],
               {
-                'text-bg-base bg-metallic-gradient border-b-[#00BEB4] border-b-2':
-                  selectedValue === actualValue,
+                'text-text-primary bg-bg-base': selectedValue === actualValue,
               },
               activeClassName && selectedValue === actualValue
                 ? activeClassName