Merge f7c0fe273b into 35cd94e342

pref: 优化和bug修复

web/admin/src/components/CustomModal/components/components/DragList.tsx

@@ -13,26 +13,53 @@ import {
   arrayMove,
   rectSortingStrategy,
   SortableContext,
+  SortingStrategy,
 } from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item from './Item';
-import SortableItem from './SortableItem';
+import { Stack, SxProps, Theme } from '@mui/material';
+import {
+  ComponentType,
+  CSSProperties,
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useState,
+} from 'react';
 
-type ItemType = {
-  id: string;
-  text: string;
-  type: 'contained' | 'outlined' | 'text';
-  href: string;
-};
-
-interface DragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
+export interface DragListProps<T extends { id?: string | null }> {
+  data: T[];
+  onChange: (data: T[]) => void;
   setIsEdit: Dispatch<SetStateAction<boolean>>;
+  SortableItemComponent: ComponentType<{
+    id: string;
+    item: T;
+    handleRemove: (id: string) => void;
+    handleUpdateItem: (item: T) => void;
+    setIsEdit: Dispatch<SetStateAction<boolean>>;
+  }>;
+  ItemComponent: ComponentType<{
+    isDragging?: boolean;
+    item: T;
+    style?: CSSProperties;
+    setIsEdit: Dispatch<SetStateAction<boolean>>;
+    handleUpdateItem?: (item: T) => void;
+  }>;
+  containerSx?: SxProps<Theme>;
+  sortingStrategy?: SortingStrategy;
+  direction?: 'row' | 'column';
+  gap?: number;
 }
 
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
+function DragList<T extends { id?: string | null }>({
+  data,
+  onChange,
+  setIsEdit,
+  SortableItemComponent,
+  ItemComponent,
+  containerSx,
+  sortingStrategy = rectSortingStrategy,
+  direction = 'row',
+  gap = 2,
+}: DragListProps<T>) {
   const [activeId, setActiveId] = useState<string | null>(null);
   const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
 
@@ -44,8 +71,8 @@ const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
     (event: DragEndEvent) => {
       const { active, over } = event;
       if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
+        const oldIndex = data.findIndex(item => (item.id || '') === active.id);
+        const newIndex = data.findIndex(item => (item.id || '') === over!.id);
         const newData = arrayMove(data, oldIndex, newIndex);
         onChange(newData);
       }
@@ -60,21 +87,16 @@ const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
 
   const handleRemove = useCallback(
     (id: string) => {
-      const newData = data.filter(item => item.id !== id);
+      const newData = data.filter(item => (item.id || '') !== id);
       onChange(newData);
     },
     [data, onChange],
   );
 
   const handleUpdateItem = useCallback(
-    (updatedItem: {
-      id: string;
-      text: string;
-      type: 'contained' | 'outlined' | 'text';
-      href: string;
-    }) => {
+    (updatedItem: T) => {
       const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
+        (item.id || '') === (updatedItem.id || '') ? updatedItem : item,
       );
       onChange(newData);
     },
@@ -92,14 +114,19 @@ const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
       onDragCancel={handleDragCancel}
     >
       <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
+        items={data.map(item => item.id || '')}
+        strategy={sortingStrategy}
+      >
+        <Stack
+          direction={direction}
+          flexWrap={'wrap'}
+          gap={gap}
+          sx={containerSx}
         >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
           {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
+            <SortableItemComponent
+              key={item.id || ''}
+              id={item.id || ''}
               item={item}
               handleRemove={handleRemove}
               handleUpdateItem={handleUpdateItem}
@@ -110,9 +137,9 @@ const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
       </SortableContext>
       <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
         {activeId ? (
-          <Item
+          <ItemComponent
             isDragging
-            item={data.find(item => item.id === activeId)!}
+            item={data.find(item => (item.id || '') === activeId)!}
             setIsEdit={setIsEdit}
             handleUpdateItem={handleUpdateItem}
           />
@@ -120,6 +147,6 @@ const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
       </DragOverlay>
     </DndContext>
   );
-};
+}
 
 export default DragList;

web/admin/src/components/CustomModal/components/components/SortableItem.tsx

@@ -0,0 +1,59 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ComponentType } from 'react';
+
+export interface SortableItemProps<T extends { id?: string | null }> {
+  id: string;
+  item: T;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ItemComponent: ComponentType<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+function SortableItem<T extends { id?: string | null }>({
+  id,
+  item,
+  ItemComponent,
+  ...rest
+}: SortableItemProps<T>) {
+  const {
+    isDragging,
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition || undefined,
+  };
+
+  return (
+    <ItemComponent
+      ref={setNodeRef}
+      style={style}
+      withOpacity={isDragging}
+      dragHandleProps={{
+        ...attributes,
+        ...listeners,
+      }}
+      item={item}
+      {...rest}
+    />
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createSortableItem(ItemComponent: ComponentType<any>) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const WrappedComponent = (props: any) => (
+    <SortableItem {...props} ItemComponent={ItemComponent} />
+  );
+  WrappedComponent.displayName = `SortableItem(${ItemComponent.displayName || ItemComponent.name || 'Component'})`;
+  return WrappedComponent;
+}
+
+export default SortableItem;

web/admin/src/components/CustomModal/components/components/index.ts

@@ -0,0 +1,5 @@
+export { default as DragList } from './DragList';
+export type { DragListProps } from './DragList';
+
+export { default as SortableItem, createSortableItem } from './SortableItem';
+export type { SortableItemProps } from './SortableItem';

web/admin/src/components/CustomModal/components/config/BannerConfig/HotSearchItem.tsx

@@ -0,0 +1,141 @@
+import { Box, IconButton, Stack, TextField } from '@mui/material';
+import { Icon } from '@ctzhian/ui';
+import {
+  CSSProperties,
+  Dispatch,
+  forwardRef,
+  HTMLAttributes,
+  SetStateAction,
+} from 'react';
+
+type HotSearchItem = {
+  id: string;
+  text: string;
+};
+
+export type HotSearchItemProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> & {
+  item: HotSearchItem;
+  withOpacity?: boolean;
+  isDragging?: boolean;
+  dragHandleProps?: React.HTMLAttributes<HTMLDivElement>;
+  handleRemove?: (id: string) => void;
+  handleUpdateItem?: (item: HotSearchItem) => void;
+  setIsEdit: Dispatch<SetStateAction<boolean>>;
+};
+
+const HotSearchItem = forwardRef<HTMLDivElement, HotSearchItemProps>(
+  (
+    {
+      item,
+      withOpacity,
+      isDragging,
+      style,
+      dragHandleProps,
+      handleRemove,
+      handleUpdateItem,
+      setIsEdit,
+      ...props
+    },
+    ref,
+  ) => {
+    const inlineStyles: CSSProperties = {
+      opacity: withOpacity ? '0.5' : '1',
+      borderRadius: '10px',
+      cursor: isDragging ? 'grabbing' : 'grab',
+      backgroundColor: '#ffffff',
+      width: '100%',
+      ...style,
+    };
+    return (
+      <Box ref={ref} style={inlineStyles} {...props}>
+        <Stack
+          direction={'row'}
+          alignItems={'center'}
+          justifyContent={'space-between'}
+          gap={0.5}
+          sx={{
+            py: 1.5,
+            px: 1,
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: '10px',
+          }}
+        >
+          <Stack
+            direction={'column'}
+            gap={'20px'}
+            sx={{
+              flex: 1,
+              p: 1.5,
+            }}
+          >
+            <TextField
+              label='搜索关键词'
+              slotProps={{
+                inputLabel: {
+                  shrink: true,
+                },
+              }}
+              sx={{
+                height: '36px',
+                '& .MuiOutlinedInput-root': {
+                  height: '36px',
+                  padding: '0 12px',
+                  '& .MuiOutlinedInput-input': {
+                    padding: '8px 0',
+                  },
+                },
+              }}
+              fullWidth
+              placeholder='请输入搜索关键词'
+              variant='outlined'
+              value={item.text}
+              onChange={e => {
+                const updatedItem = { ...item, text: e.target.value };
+                handleUpdateItem?.(updatedItem);
+                setIsEdit(true);
+              }}
+            />
+          </Stack>
+
+          <Stack
+            direction={'column'}
+            sx={{ justifyContent: 'space-between', alignSelf: 'stretch' }}
+          >
+            <IconButton
+              size='small'
+              onClick={e => {
+                e.stopPropagation();
+                handleRemove?.(item.id);
+              }}
+              sx={{
+                color: 'text.tertiary',
+                ':hover': { color: 'error.main' },
+                width: '28px',
+                height: '28px',
+              }}
+            >
+              <Icon type='icon-shanchu2' sx={{ fontSize: '12px' }} />
+            </IconButton>
+            <IconButton
+              size='small'
+              sx={{
+                cursor: 'grab',
+                color: 'text.secondary',
+                '&:hover': { color: 'primary.main' },
+              }}
+              {...(dragHandleProps as any)}
+            >
+              <Icon type='icon-drag' />
+            </IconButton>
+          </Stack>
+        </Stack>
+      </Box>
+    );
+  },
+);
+
+export default HotSearchItem;

web/admin/src/components/CustomModal/components/config/BannerConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import Item, { ItemProps } from './Item';
-
-type FaqSortableItemProps = ItemProps & {};
-
-const FaqSortableItem: FC<FaqSortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <Item
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default FaqSortableItem;

web/admin/src/components/CustomModal/components/config/BannerConfig/index.tsx

@@ -1,18 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import { TextField, Chip, Autocomplete, Box } from '@mui/material';
+import React, { useEffect, useRef } from 'react';
+import { TextField } from '@mui/material';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import type { ConfigProps } from '../type';
 import { useForm, Controller } from 'react-hook-form';
 import { useAppSelector } from '@/store';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
+import HotSearchItem from './HotSearchItem';
 import UploadFile from '@/components/UploadFile';
 import { DEFAULT_DATA } from '../../../constants';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
 import { handleLandingConfigs, findConfigById } from '../../../utils';
+import { Empty } from '@ctzhian/ui';
 
 const Config: React.FC<ConfigProps> = ({ setIsEdit, id }) => {
   const { appPreviewData } = useAppSelector(state => state.config);
-  const [inputValue, setInputValue] = useState('');
   const { control, watch, setValue, subscribe } = useForm<
     typeof DEFAULT_DATA.banner
   >({
@@ -24,6 +27,49 @@ const Config: React.FC<ConfigProps> = ({ setIsEdit, id }) => {
 
   const debouncedDispatch = useDebounceAppPreviewData();
   const btns = watch('btns') || [];
+  const hotSearch = watch('hot_search') || [];
+
+  // 使用 ref 来维护稳定的 ID 映射
+  const idMapRef = useRef<Map<number, string>>(new Map());
+
+  // 将string[]转换为对象数组用于显示，保持 ID 稳定
+  const hotSearchList = Array.isArray(hotSearch)
+    ? hotSearch.map((text, index) => {
+        // 如果该索引没有 ID，生成一个新的
+        if (!idMapRef.current.has(index)) {
+          idMapRef.current.set(
+            index,
+            `${Date.now()}-${index}-${Math.random()}`,
+          );
+        }
+        return {
+          id: idMapRef.current.get(index)!,
+          text: String(text),
+        };
+      })
+    : [];
+
+  // 清理不再使用的 ID，并确保所有索引都有 ID
+  useEffect(() => {
+    const currentIndexes = new Set(hotSearch.map((_, index) => index));
+
+    // 清理不存在的索引
+    const keysToDelete: number[] = [];
+    idMapRef.current.forEach((_, key) => {
+      if (!currentIndexes.has(key)) {
+        keysToDelete.push(key);
+      }
+    });
+    keysToDelete.forEach(key => idMapRef.current.delete(key));
+
+    // 确保每个索引都有 ID
+    hotSearch.forEach((_, index) => {
+      if (!idMapRef.current.has(index)) {
+        idMapRef.current.set(index, `${Date.now()}-${index}-${Math.random()}`);
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hotSearch.length]);
 
   const handleAddButton = () => {
     const nextId = `${Date.now()}`;
@@ -33,6 +79,31 @@ const Config: React.FC<ConfigProps> = ({ setIsEdit, id }) => {
     ]);
   };
 
+  const handleAddHotSearch = () => {
+    const newIndex = hotSearch.length;
+    const nextId = `${Date.now()}-${newIndex}-${Math.random()}`;
+    idMapRef.current.set(newIndex, nextId);
+    // 转换回string[]格式
+    setValue('hot_search', [...hotSearch, '']);
+    setIsEdit(true);
+  };
+
+  const handleHotSearchChange = (newList: { id: string; text: string }[]) => {
+    // 重建 ID 映射关系
+    const newIdMap = new Map<number, string>();
+    newList.forEach((item, index) => {
+      newIdMap.set(index, item.id);
+    });
+    idMapRef.current = newIdMap;
+
+    // 转换回string[]格式
+    setValue(
+      'hot_search',
+      newList.map(item => item.text),
+    );
+    setIsEdit(true);
+  };
+
   useEffect(() => {
     const callback = subscribe({
       formState: {
@@ -59,6 +130,7 @@ const Config: React.FC<ConfigProps> = ({ setIsEdit, id }) => {
     return () => {
       callback();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [subscribe]);
 
   return (
@@ -132,60 +204,20 @@ const Config: React.FC<ConfigProps> = ({ setIsEdit, id }) => {
           render={({ field }) => <TextField {...field} placeholder='请输入' />}
         />
       </CommonItem>
-      <CommonItem title='热门搜索'>
-        <Controller
-          control={control}
-          name='hot_search'
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              value={field.value || []}
-              multiple
-              freeSolo
-              fullWidth
-              options={[]}
-              inputValue={inputValue}
-              onInputChange={(_, newInputValue) => setInputValue(newInputValue)}
-              onChange={(_, newValue) => {
-                setIsEdit(true);
-                const newValues = [...new Set(newValue as string[])];
-                field.onChange(newValues);
-              }}
-              onBlur={() => {
-                setIsEdit(true);
-                const trimmedValue = inputValue.trim();
-                if (trimmedValue && !field.value?.includes(trimmedValue)) {
-                  field.onChange([...(field.value || []), trimmedValue]);
-                }
-                setInputValue('');
-              }}
-              renderValue={(value, getTagProps) => {
-                return value.map((option, index: number) => {
-                  return (
-                    <Chip
-                      variant='outlined'
-                      size='small'
-                      label={
-                        <Box sx={{ fontSize: '12px' }}>
-                          {option as React.ReactNode}
-                        </Box>
-                      }
-                      {...getTagProps({ index })}
-                      key={index}
-                    />
-                  );
-                });
-              }}
-              renderInput={params => (
-                <TextField
-                  {...params}
-                  placeholder='回车确认，填写下一个热门搜索'
-                  variant='outlined'
+      <CommonItem title='热门搜索' onAdd={handleAddHotSearch}>
+        {hotSearchList.length === 0 ? (
+          <Empty />
+        ) : (
+          <DragList
+            data={hotSearchList}
+            onChange={handleHotSearchChange}
+            setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={HotSearchItem} />
+            )}
+            ItemComponent={HotSearchItem}
           />
         )}
-            />
-          )}
-        />
       </CommonItem>
       <CommonItem title='主按钮' onAdd={handleAddButton}>
         <DragList
@@ -195,6 +227,10 @@ const Config: React.FC<ConfigProps> = ({ setIsEdit, id }) => {
             setIsEdit(true);
           }}
           setIsEdit={setIsEdit}
+          SortableItemComponent={sortableProps => (
+            <SortableItem {...sortableProps} ItemComponent={Item} />
+          )}
+          ItemComponent={Item}
         />
       </CommonItem>
     </StyledCommonWrapper>

web/admin/src/components/CustomModal/components/config/BasicDocConfig/DragList.tsx

@@ -1,114 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item from './Item';
-import { DomainRecommendNodeListResp } from '@/request/types';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: DomainRecommendNodeListResp[];
-  onChange: (data: DomainRecommendNodeListResp[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: DomainRecommendNodeListResp) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id!)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              // handleUpdateItem={handleUpdateItem}
-              // setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            // setIsEdit={setIsEdit}
-            // handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/BasicDocConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import FaqItem, { ItemProps } from './Item';
-
-type SortableItemProps = ItemProps & {};
-
-const FaqSortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id! });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <FaqItem
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default FaqSortableItem;

web/admin/src/components/CustomModal/components/config/BasicDocConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import BasicDocDragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { Empty } from '@ctzhian/ui';
 import { useAppSelector } from '@/store';
@@ -116,13 +118,17 @@ const BasicDocConfig = ({ setIsEdit, id }: ConfigProps) => {
         {nodes.length === 0 ? (
           <Empty />
         ) : (
-          <BasicDocDragList
+          <DragList
             data={nodes}
             onChange={value => {
               setIsEdit(true);
               setValue('nodes', value);
             }}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/BlockGridConfig/DragList.tsx

@@ -1,113 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item, { type ItemType } from './Item';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: ItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/BlockGridConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import Item, { ItemProps } from './Item';
-
-type SortableItemProps = ItemProps & {};
-
-const SortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <Item
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default SortableItem;

web/admin/src/components/CustomModal/components/config/BlockGridConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
@@ -91,6 +93,10 @@ const Config = ({ setIsEdit, id }: ConfigProps) => {
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/CarouselConfig/DragList.tsx

@@ -1,120 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item from './Item';
-import FaqSortableItem from './SortableItem';
-
-type ItemType = {
-  id: string;
-  title: string;
-  url: string;
-  desc: string;
-};
-
-interface DragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: ItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <FaqSortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/CarouselConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import FaqItem, { ItemProps } from './Item';
-
-type FaqSortableItemProps = ItemProps & {};
-
-const FaqSortableItem: FC<FaqSortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <FaqItem
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default FaqSortableItem;

web/admin/src/components/CustomModal/components/config/CarouselConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
@@ -121,6 +123,10 @@ const Config = ({ setIsEdit, id }: ConfigProps) => {
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/CaseConfig/DragList.tsx

@@ -1,113 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item, { type ItemType } from './Item';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: ItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/CaseConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import FaqItem, { ItemTypeProps } from './Item';
-
-type SortableItemProps = ItemTypeProps & {};
-
-const SortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <FaqItem
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default SortableItem;

web/admin/src/components/CustomModal/components/config/CaseConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
@@ -90,6 +92,10 @@ const CaseConfig = ({ setIsEdit, id }: ConfigProps) => {
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/CommentConfig/DragList.tsx

@@ -1,113 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item, { type ItemType } from './Item';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: ItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/CommentConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import FaqItem, { ItemTypeProps } from './Item';
-
-type SortableItemProps = ItemTypeProps & {};
-
-const SortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <FaqItem
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default SortableItem;

web/admin/src/components/CustomModal/components/config/CommentConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
@@ -93,6 +95,10 @@ const Config = ({ setIsEdit, id }: ConfigProps) => {
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/DirDocConfig/DragList.tsx

@@ -1,114 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item from './Item';
-import { DomainRecommendNodeListResp } from '@/request/types';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: DomainRecommendNodeListResp[];
-  onChange: (data: DomainRecommendNodeListResp[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: DomainRecommendNodeListResp) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id!)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              // handleUpdateItem={handleUpdateItem}
-              // setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            // setIsEdit={setIsEdit}
-            // handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/DirDocConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import Item, { ItemProps } from './Item';
-
-type SortableItemProps = ItemProps & {};
-
-const SortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id! });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <Item
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default SortableItem;

web/admin/src/components/CustomModal/components/config/DirDocConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import BasicDocDragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import { Empty } from '@ctzhian/ui';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
@@ -117,13 +119,17 @@ const DirDocConfig = ({ setIsEdit, id }: ConfigProps) => {
         {nodes.length === 0 ? (
           <Empty />
         ) : (
-          <BasicDocDragList
+          <DragList
             data={nodes}
             onChange={value => {
               setIsEdit(true);
               setValue('nodes', value);
             }}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/FaqConfig/FaqDragList.tsx

@@ -1,119 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import FaqItem from './FaqItem';
-import FaqSortableItem from './FaqSortableItem';
-
-type FaqItemType = {
-  id: string;
-  question: string;
-  link: string;
-};
-
-interface FaqDragListProps {
-  data: FaqItemType[];
-  onChange: (data: FaqItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const FaqDragList: FC<FaqDragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: FaqItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <FaqSortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <FaqItem
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default FaqDragList;

web/admin/src/components/CustomModal/components/config/FaqConfig/FaqSortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import FaqItem, { FaqItemProps } from './FaqItem';
-
-type FaqSortableItemProps = FaqItemProps & {};
-
-const FaqSortableItem: FC<FaqSortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <FaqItem
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default FaqSortableItem;

web/admin/src/components/CustomModal/components/config/FaqConfig/index.tsx

@@ -2,13 +2,14 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import FaqDragList from './FaqDragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import FaqItem from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
 import { Empty } from '@ctzhian/ui';
 import { DEFAULT_DATA } from '../../../constants';
-import ColorPickerField from '../../components/ColorPickerField';
 import { findConfigById, handleLandingConfigs } from '../../../utils';
 
 const FaqConfig = ({ setIsEdit, id }: ConfigProps) => {
@@ -111,10 +112,14 @@ const FaqConfig = ({ setIsEdit, id }: ConfigProps) => {
         {list.length === 0 ? (
           <Empty />
         ) : (
-          <FaqDragList
+          <DragList
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={FaqItem} />
+            )}
+            ItemComponent={FaqItem}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/FeatureConfig/DragList.tsx

@@ -1,113 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item, { type ItemType } from './Item';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: ItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/FeatureConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import Item, { ItemProps } from './Item';
-
-type SortableItemProps = ItemProps & {};
-
-const SortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <Item
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default SortableItem;

web/admin/src/components/CustomModal/components/config/FeatureConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
@@ -89,6 +91,10 @@ const Config = ({ setIsEdit, id }: ConfigProps) => {
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/MetricsConfig/DragList.tsx

@@ -1,113 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item, { type ItemType } from './Item';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: ItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/MetricsConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import FaqItem, { ItemTypeProps } from './Item';
-
-type SortableItemProps = ItemTypeProps & {};
-
-const SortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <FaqItem
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default SortableItem;

web/admin/src/components/CustomModal/components/config/MetricsConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
@@ -90,6 +92,10 @@ const MetricsConfig = ({ setIsEdit, id }: ConfigProps) => {
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/QuestionConfig/DragList.tsx

@@ -1,113 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item, { ItemType } from './Item';
-import SortableItem from './SortableItem';
-
-interface FaqDragListProps {
-  data: ItemType[];
-  onChange: (data: ItemType[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const FaqDragList: FC<FaqDragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: ItemType) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              handleUpdateItem={handleUpdateItem}
-              setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            setIsEdit={setIsEdit}
-            handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default FaqDragList;

web/admin/src/components/CustomModal/components/config/QuestionConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import Item, { ItemProps } from './Item';
-
-type SortableItemProps = ItemProps & {};
-
-const SortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <Item
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default SortableItem;

web/admin/src/components/CustomModal/components/config/QuestionConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import FaqDragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
 import useDebounceAppPreviewData from '@/hooks/useDebounceAppPreviewData';
@@ -88,10 +90,14 @@ const FaqConfig = ({ setIsEdit, id }: ConfigProps) => {
         {list.length === 0 ? (
           <Empty />
         ) : (
-          <FaqDragList
+          <DragList
             data={list}
             onChange={handleListChange}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/CustomModal/components/config/SimpleDocConfig/DragList.tsx

@@ -1,114 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-} from '@dnd-kit/sortable';
-import { Stack } from '@mui/material';
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react';
-import Item from './Item';
-import { DomainRecommendNodeListResp } from '@/request/types';
-import SortableItem from './SortableItem';
-
-interface DragListProps {
-  data: DomainRecommendNodeListResp[];
-  onChange: (data: DomainRecommendNodeListResp[]) => void;
-  setIsEdit: Dispatch<SetStateAction<boolean>>;
-}
-
-const DragList: FC<DragListProps> = ({ data, onChange, setIsEdit }) => {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string);
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        const oldIndex = data.findIndex(item => item.id === active.id);
-        const newIndex = data.findIndex(item => item.id === over!.id);
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onChange(newData);
-      }
-      setActiveId(null);
-    },
-    [data, onChange],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null);
-  }, []);
-
-  const handleRemove = useCallback(
-    (id: string) => {
-      const newData = data.filter(item => item.id !== id);
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  const handleUpdateItem = useCallback(
-    (updatedItem: DomainRecommendNodeListResp) => {
-      const newData = data.map(item =>
-        item.id === updatedItem.id ? updatedItem : item,
-      );
-      onChange(newData);
-    },
-    [data, onChange],
-  );
-
-  if (data.length === 0) return null;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext
-        items={data.map(item => item.id!)}
-        strategy={rectSortingStrategy}
-      >
-        <Stack direction={'row'} flexWrap={'wrap'} gap={2}>
-          {data.map(item => (
-            <SortableItem
-              key={item.id}
-              id={item.id}
-              item={item}
-              handleRemove={handleRemove}
-              // handleUpdateItem={handleUpdateItem}
-              // setIsEdit={setIsEdit}
-            />
-          ))}
-        </Stack>
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: '0 0' }}>
-        {activeId ? (
-          <Item
-            isDragging
-            item={data.find(item => item.id === activeId)!}
-            // setIsEdit={setIsEdit}
-            // handleUpdateItem={handleUpdateItem}
-          />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-};
-
-export default DragList;

web/admin/src/components/CustomModal/components/config/SimpleDocConfig/SortableItem.tsx

@@ -1,38 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { FC } from 'react';
-import FaqItem, { ItemProps } from './Item';
-
-type SortableItemProps = ItemProps & {};
-
-const FaqSortableItem: FC<SortableItemProps> = ({ item, ...rest }) => {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id: item.id! });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || undefined,
-  };
-
-  return (
-    <FaqItem
-      ref={setNodeRef}
-      style={style}
-      withOpacity={isDragging}
-      dragHandleProps={{
-        ...attributes,
-        ...listeners,
-      }}
-      item={item}
-      {...rest}
-    />
-  );
-};
-
-export default FaqSortableItem;

web/admin/src/components/CustomModal/components/config/SimpleDocConfig/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { CommonItem, StyledCommonWrapper } from '../../components/StyledCommon';
 import { TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import DragList from './DragList';
+import DragList from '../../components/DragList';
+import SortableItem from '../../components/SortableItem';
+import Item from './Item';
 import { Empty } from '@ctzhian/ui';
 import type { ConfigProps } from '../type';
 import { useAppSelector } from '@/store';
@@ -124,6 +126,10 @@ const SimpleDocConfigConfig = ({ setIsEdit, id }: ConfigProps) => {
               setValue('nodes', value);
             }}
             setIsEdit={setIsEdit}
+            SortableItemComponent={sortableProps => (
+              <SortableItem {...sortableProps} ItemComponent={Item} />
+            )}
+            ItemComponent={Item}
           />
         )}
       </CommonItem>

web/admin/src/components/KB/KBSelect.tsx

@@ -3,7 +3,6 @@ import { useURLSearchParams } from '@/hooks';
 import { ConstsUserRole } from '@/request/types';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { setKbC, setKbId } from '@/store/slices/config';
-import custom from '@/themes/custom';
 import { Ellipsis, Icon, message } from '@ctzhian/ui';
 import {
   Box,
@@ -117,7 +116,7 @@ const KBSelect = () => {
               borderRadius: '5px',
               bgcolor: 'background.paper3',
               '&:hover': {
-                bgcolor: custom.selectedMenuItemBgColor,
+                bgcolor: 'rgba(50,72,242,0.1)',
               },
             }}
             fullWidth

web/admin/src/themes/color.ts

@@ -1,6 +0,0 @@
-import custom from './custom';
-import dark from './dark';
-import light from './light';
-
-export { custom, dark, light };
-export type ThemeColor = typeof light;

web/admin/src/themes/custom.ts

@@ -1,4 +0,0 @@
-export default {
-  selectPopupBoxShadow: '0px 10px 20px 0px rgba(54,59,76,0.2)',
-  selectedMenuItemBgColor: 'rgba(50,72,242,0.1)',
-};

web/admin/src/themes/dark.ts

@@ -1,91 +0,0 @@
-const dark = {
-  cssVariables: true,
-  primary: {
-    main: '#fdfdfd',
-    contrastText: '#000',
-  },
-  secondary: {
-    main: '#2196F3',
-    lighter: '#D6E4FF',
-    light: '#84A9FF',
-    dark: '#1939B7',
-    darker: '#091A7A',
-    contrastText: '#fff',
-  },
-  info: {
-    main: '#1890FF',
-    lighter: '#D0F2FF',
-    light: '#74CAFF',
-    dark: '#0C53B7',
-    darker: '#04297A',
-    contrastText: '#fff',
-  },
-  success: {
-    main: '#00DF98',
-    lighter: '#E9FCD4',
-    light: '#AAF27F',
-    dark: '#229A16',
-    darker: '#08660D',
-    contrastText: 'rgba(0,0,0,0.7)',
-  },
-  warning: {
-    main: '#F7B500',
-    lighter: '#FFF7CD',
-    light: '#FFE16A',
-    dark: '#B78103',
-    darker: '#7A4F01',
-    contrastText: 'rgba(0,0,0,0.7)',
-  },
-  neutral: {
-    main: '#1A1A1A',
-    contrastText: 'rgba(255, 255, 255, 0.60)',
-  },
-  error: {
-    main: '#D93940',
-    lighter: '#FFE7D9',
-    light: '#FFA48D',
-    dark: '#B72136',
-    darker: '#7A0C2E',
-    contrastText: '#fff',
-  },
-  text: {
-    primary: '#fff',
-    secondary: 'rgba(255,255,255,0.7)',
-    auxiliary: 'rgba(255,255,255,0.5)',
-    disabled: 'rgba(255,255,255,0.26)',
-    slave: 'rgba(255,255,255,0.05)',
-    inverseAuxiliary: 'rgba(0,0,0,0.5)',
-    inverseDisabled: 'rgba(0,0,0,0.15)',
-  },
-  divider: '#ededed',
-  background: {
-    paper: '#18181b',
-    paper2: '#060608',
-    paper3: '#27272a',
-    default: 'rgba(255,255,255,0.6)',
-    disabled: 'rgba(15,15,15,0.8)',
-    chip: 'rgba(145,147,171,0.16)',
-    circle: '#3B476A',
-    focus: '#542996',
-  },
-  common: {},
-  shadows: 'transparent',
-  table: {
-    head: {
-      backgroundColor: '#484848',
-      color: '#fff',
-    },
-    row: {
-      backgroundColor: 'transparent',
-      hoverColor: 'rgba(48, 58, 70, 0.4)',
-    },
-    cell: {
-      borderColor: '#484848',
-    },
-  },
-  charts: {
-    color: ['#7267EF', '#36B37E'],
-  },
-};
-
-export default dark;

web/admin/src/themes/light.ts

@@ -1,95 +0,0 @@
-const light = {
-  cssVariables: true,
-  primary: {
-    main: '#3248F2',
-    contrastText: '#fff',
-    lighter: '#E6E8EC',
-  },
-  secondary: {
-    main: '#3366FF',
-    lighter: '#D6E4FF',
-    light: '#84A9FF',
-    dark: '#1939B7',
-    darker: '#091A7A',
-    contrastText: '#fff',
-  },
-  info: {
-    main: '#0063FF',
-    lighter: '#D0F2FF',
-    light: '#74CAFF',
-    dark: '#0C53B7',
-    darker: '#04297A',
-    contrastText: '#fff',
-  },
-  success: {
-    main: '#82DDAF',
-    lighter: '#E9FCD4',
-    light: '#AAF27F',
-    mainShadow: '#36B37E',
-    dark: '#229A16',
-    darker: '#08660D',
-    contrastText: 'rgba(0,0,0,0.7)',
-  },
-  warning: {
-    main: '#FEA145',
-    lighter: '#FFF7CD',
-    light: '#FFE16A',
-    shadow: 'rgba(255, 171, 0, 0.15)',
-    dark: '#B78103',
-    darker: '#7A4F01',
-    contrastText: 'rgba(0,0,0,0.7)',
-  },
-  neutral: {
-    main: '#FFFFFF',
-    contrastText: 'rgba(0, 0, 0, 0.60)',
-  },
-  error: {
-    main: '#FE4545',
-    lighter: '#FFE7D9',
-    light: '#FFA48D',
-    shadow: 'rgba(255, 86, 48, 0.15)',
-    dark: '#B72136',
-    darker: '#7A0C2E',
-    contrastText: '#FFFFFF',
-  },
-  divider: '#ECEEF1',
-  text: {
-    primary: '#21222D',
-    secondary: 'rgba(33,34,35,0.7)',
-    auxiliary: 'rgba(33,34,35,0.5)',
-    slave: 'rgba(33,34,35,0.3)',
-    disabled: 'rgba(33,34,35,0.2)',
-    inverse: '#FFFFFF',
-    inverseAuxiliary: 'rgba(255,255,255,0.5)',
-    inverseDisabled: 'rgba(255,255,255,0.15)',
-  },
-  background: {
-    paper: '#FFFFFF',
-    paper2: '#F1F2F8',
-    paper3: '#F8F9FA',
-    default: '#FFFFFF',
-    chip: '#FFFFFF',
-    circle: '#E6E8EC',
-    hover: 'rgba(243, 244, 245, 0.5)',
-  },
-  shadows: 'rgba(68, 80 ,91, 0.1)',
-  table: {
-    head: {
-      height: '50px',
-      backgroundColor: '#FFFFFF',
-      color: '#000',
-    },
-    row: {
-      hoverColor: '#F8F9FA',
-    },
-    cell: {
-      height: '72px',
-      borderColor: '#ECEEF1',
-    },
-  },
-  charts: {
-    color: ['#673AB7', '#36B37E'],
-  },
-};
-
-export default light;

web/admin/src/themes/override.ts

@@ -1,460 +0,0 @@
-import { addOpacityToColor } from '@/utils';
-import { custom, ThemeColor } from './color';
-
-declare module '@mui/material/styles' {}
-
-declare module '@mui/material/styles' {
-  interface TypeBackground {
-    paper0?: string;
-    paper2?: string;
-    chip?: string;
-    circle?: string;
-    hover?: string;
-    focus?: string;
-    disabled?: string;
-  }
-}
-
-const componentStyleOverrides = (theme: ThemeColor) => {
-  return {
-    MuiTabs: {
-      styleOverrides: {
-        root: {
-          borderRadius: '10px !important',
-          overflow: 'hidden',
-          minHeight: '36px',
-          height: '36px',
-          padding: '0px !important',
-        },
-        indicator: {
-          borderRadius: '0px !important',
-          overflow: 'hidden',
-          backgroundColor: '#21222D !important',
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          borderRadius: '0px !important',
-          fontWeight: 'normal',
-          fontSize: '14px !important',
-          lineHeight: '34px',
-          padding: '0 16px !important',
-        },
-      },
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        asterisk: {
-          color: theme.error.main,
-        },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        root: ({ ownerState }: { ownerState: any }) => {
-          return {
-            height: '36px',
-            fontSize: 14,
-            lineHeight: '36px',
-            paddingLeft: '16px',
-            paddingRight: '16px',
-            boxShadow: 'none',
-            transition: 'all 0.2s ease-in-out',
-            borderRadius: '10px',
-            fontWeight: '400',
-            ...(ownerState.variant === 'contained' && {
-              color: theme.text.inverse,
-              backgroundColor: theme.text.primary,
-            }),
-            ...(ownerState.variant === 'text' && {}),
-            ...(ownerState.variant === 'outlined' && {
-              color: theme.text.primary,
-              border: `1px solid ${theme.text.primary}`,
-            }),
-            ...(ownerState.disabled === true && {
-              cursor: 'not-allowed !important',
-            }),
-            ...(ownerState.size === 'small' && {
-              height: '32px',
-              lineHeight: '32px',
-            }),
-            '&:hover': {
-              boxShadow: 'none',
-              ...(ownerState.variant === 'contained' && {
-                backgroundColor: addOpacityToColor(theme.text.primary, 0.9),
-              }),
-              ...(ownerState.variant === 'text' && {
-                backgroundColor: theme.background.paper3,
-              }),
-              ...(ownerState.variant === 'outlined' && {
-                backgroundColor: theme.background.paper3,
-              }),
-              ...(ownerState.color === 'neutral' && {
-                color: theme.text.primary,
-              }),
-            },
-          };
-        },
-        startIcon: {
-          marginLeft: 0,
-          marginRight: 8,
-          '>*:nth-of-type(1)': {
-            fontSize: 14,
-          },
-        },
-      },
-    },
-    MuiTooltip: {
-      styleOverrides: {
-        tooltip: {
-          borderRadius: '10px',
-          maxWidth: '600px',
-          padding: '8px 16px',
-          backgroundColor: theme.text.primary,
-          fontSize: '12px',
-          lineHeight: '20px',
-          color: theme.primary.contrastText,
-        },
-        arrow: {
-          color: theme.text.primary,
-        },
-      },
-    },
-    MuiFormHelperText: {
-      styleOverrides: {
-        root: {
-          color: theme.error.main,
-        },
-      },
-    },
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          '.MuiFormLabel-asterisk': {
-            color: theme.error.main,
-          },
-        },
-      },
-    },
-    MuiFormControlLabel: {
-      styleOverrides: {
-        root: {
-          marginLeft: '0 !important',
-        },
-      },
-    },
-    MuiTableBody: {
-      styleOverrides: {
-        root: {
-          '.MuiTableRow-root:hover': {
-            '.MuiTableCell-root:not(.cx-table-empty-td)': {
-              backgroundColor: theme.table.row.hoverColor,
-              overflowX: 'hidden',
-              '.primary-color': {
-                color: theme.primary.main,
-              },
-              '.no-title-url': {
-                color: `${theme.primary.main} !important`,
-              },
-              '.error-color': {
-                opacity: 1,
-              },
-            },
-          },
-        },
-      },
-    },
-    MuiCheckbox: {
-      styleOverrides: {
-        root: {
-          padding: 0,
-          svg: {
-            fontSize: '18px',
-          },
-        },
-      },
-    },
-    MuiTableCell: {
-      styleOverrides: {
-        root: {
-          background: theme.background.paper,
-          lineHeight: 1.5,
-          height: theme.table.cell.height,
-          fontSize: '14px',
-          paddingTop: '16px !important',
-          paddingBottom: '16px !important',
-          paddingLeft: 0,
-          '&:first-of-type': {
-            paddingLeft: '0px',
-          },
-          '&:not(:first-of-type)': {
-            paddingLeft: '0px',
-          },
-          '.MuiCheckbox-root': {
-            color: '#CCCCCC',
-            svg: {
-              fontSize: '16px',
-            },
-            '&.Mui-checked': {
-              color: theme.text.primary,
-            },
-          },
-        },
-        head: {
-          backgroundColor: theme.background.paper3,
-          color: theme.table.head.color,
-          fontSize: '12px',
-          height: theme.table.head.height,
-          paddingTop: '0 !important',
-          paddingBottom: '0 !important',
-          borderSpacing: '12px',
-          zIndex: 100,
-        },
-        body: {
-          borderBottom: '1px dashed',
-          borderColor: theme.table.cell.borderColor,
-          borderSpacing: '12px',
-        },
-      },
-    },
-    MuiPopover: {
-      styleOverrides: {
-        paper: {
-          borderRadius: '10px',
-          boxShadow: custom.selectPopupBoxShadow,
-        },
-      },
-    },
-    MuiMenu: {
-      styleOverrides: {
-        paper: {
-          padding: '4px',
-          borderRadius: '10px',
-          backgroundColor: theme.background.paper,
-          boxShadow: custom.selectPopupBoxShadow,
-        },
-        list: {
-          paddingTop: '0px !important',
-          paddingBottom: '0px !important',
-        },
-      },
-      defaultProps: {
-        elevation: 0,
-      },
-    },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          height: '40px',
-          borderRadius: '5px',
-          ':hover': {
-            backgroundColor: theme.background.paper3,
-          },
-          '&.Mui-selected': {
-            fontWeight: '500',
-            backgroundColor: `${custom.selectedMenuItemBgColor} !important`,
-            color: theme.primary.main,
-          },
-        },
-      },
-    },
-    MuiPaper: {
-      defaultProps: {
-        elevation: 1,
-      },
-      styleOverrides: {
-        root: ({ ownerState }: { ownerState: { elevation?: number } }) => {
-          return {
-            ...(ownerState.elevation === 0 && {
-              backgroundColor: theme.background.paper2,
-            }),
-            ...(ownerState.elevation === 2 && {
-              backgroundColor: theme.background.paper3,
-            }),
-            backgroundImage: 'none',
-          };
-        },
-      },
-    },
-    MuiChip: {
-      styleOverrides: {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        root: ({ ownerState }: { ownerState: any }) => {
-          return {
-            height: '24px',
-            lineHeight: '24px',
-            borderRadius: '8px',
-            '.MuiChip-label': {
-              padding: '0 8px 0 4px',
-            },
-            ...(ownerState.color === 'default' && {
-              backgroundColor: theme.background.chip,
-              borderColor: theme.text.disabled,
-              '.Mui-focusVisible': {
-                backgroundColor: theme.background.chip,
-              },
-            }),
-            ...(ownerState.color === 'error' && {
-              backgroundColor: addOpacityToColor(theme.error.main, 0.1),
-            }),
-          };
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        label: ({ ownerState }: { ownerState: any }) => {
-          return {
-            padding: '0 14px',
-            fontSize: '14px',
-            lineHeight: '24px',
-            ...(ownerState.color === 'default' && {
-              color: theme.text.primary,
-            }),
-          };
-        },
-        deleteIcon: {
-          fontSize: '14px',
-          color: theme.text.disabled,
-        },
-      },
-    },
-    MuiAppBar: {
-      defaultProps: {
-        elevation: 1,
-      },
-    },
-    MuiDialog: {
-      styleOverrides: {
-        root: {
-          'h2.MuiTypography-root button': {
-            marginRight: '2px',
-          },
-          '.MuiDialogActions-root': {
-            paddingTop: '24px',
-            button: {
-              width: '88px',
-              height: '36px !important',
-            },
-            '.MuiButton-text': {
-              width: 'auto',
-              minWidth: 'auto',
-              color: `${theme.text.primary} !important`,
-            },
-          },
-        },
-        container: {
-          height: '100vh',
-          bgcolor: theme.text.secondary,
-          backdropFilter: 'blur(5px)',
-        },
-        paper: {
-          pb: 1,
-          border: '1px solid',
-          borderColor: theme.divider,
-          borderRadius: '10px',
-          backgroundColor: theme.background.paper,
-          textarea: {
-            borderRadius: '8px 8px 0 8px',
-          },
-        },
-      },
-    },
-    MuiDialogTitle: {
-      styleOverrides: {
-        root: {
-          paddingTop: '24px',
-          '> button': {
-            top: '20px',
-          },
-        },
-      },
-    },
-    MuiAlert: {
-      styleOverrides: {
-        root: {
-          lineHeight: '22px',
-          paddingTop: '1px',
-          paddingBottom: '1px',
-          borderRadius: '10px',
-          boxShadow: 'none',
-        },
-        icon: {
-          padding: '10px 0',
-        },
-        standardInfo: {
-          backgroundColor: addOpacityToColor(theme.primary.main, 0.1),
-          color: theme.text.primary,
-        },
-      },
-    },
-    MuiRadio: {
-      styleOverrides: {
-        root: {
-          padding: 0,
-          marginRight: '8px',
-        },
-      },
-    },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          label: {
-            color: theme.text.secondary,
-          },
-          'label.Mui-focused': {
-            color: theme.text.primary,
-          },
-          '& .MuiInputBase-input::placeholder': {
-            fontSize: '12px',
-          },
-        },
-      },
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          borderRadius: '10px !important',
-          backgroundColor: theme.background.paper3,
-          '.MuiOutlinedInput-notchedOutline': {
-            borderColor: `${theme.background.paper3} !important`,
-            borderWidth: '1px !important',
-          },
-          '&.Mui-focused': {
-            '.MuiOutlinedInput-notchedOutline': {
-              borderColor: `${theme.text.primary} !important`,
-              borderWidth: '1px !important',
-            },
-          },
-          '&:hover': {
-            '.MuiOutlinedInput-notchedOutline': {
-              borderColor: `${theme.text.primary} !important`,
-              borderWidth: '1px !important',
-            },
-          },
-          input: {
-            height: '19px',
-            '&.Mui-disabled': {
-              color: `${theme.text.secondary} !important`,
-              WebkitTextFillColor: `${theme.text.secondary} !important`,
-            },
-          },
-        },
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        root: {
-          height: '36px',
-          borderRadius: '10px !important',
-          backgroundColor: theme.background.paper3,
-        },
-        select: {
-          paddingRight: '0 !important',
-        },
-      },
-    },
-  };
-};
-
-export default componentStyleOverrides;

web/app/package.json

@@ -25,7 +25,6 @@
     "highlight.js": "^11.11.1",
     "html-react-parser": "^5.2.5",
     "html-to-image": "^1.11.13",
-    "import-in-the-middle": "^1.14.2",
     "js-cookie": "^3.0.5",
     "katex": "^0.16.22",
     "markdown-it": "13.0.1",
@@ -42,7 +41,6 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "require-in-the-middle": "^7.5.2",
     "uuid": "^11.1.0"
   },
   "devDependencies": {

web/packages/ui/src/footer/index.tsx

@@ -97,7 +97,6 @@ const Footer = React.memo(
               },
             })}
           >
-            {showBrand && (
             <Box
               pt={
                 customStyle?.footer_show_intro
@@ -289,7 +288,7 @@ const Footer = React.memo(
                 ))}
               </Stack>
             </Box>
-            )}
+
             {!(
               customStyle?.footer_show_intro === false &&
               footerSetting?.brand_groups?.length === 0
@@ -478,7 +477,6 @@ const Footer = React.memo(
             //   }),
           }}
         >
-          {showBrand && (
           <Box
             py={
               customStyle?.footer_show_intro
@@ -618,8 +616,7 @@ const Footer = React.memo(
                                   )}
                                 </Stack>
                               )}
-                              {account.channel === 'phone' &&
-                                account?.phone && (
+                            {account.channel === 'phone' && account?.phone && (
                               <Stack
                                 className={'popup'}
                                 bgcolor={'#fff'}
@@ -712,7 +709,7 @@ const Footer = React.memo(
               </Stack>
             </Stack>
           </Box>
-          )}
+
           {!(
             customStyle?.footer_show_intro === false &&
             footerSetting?.brand_groups?.length === 0

web/packages/ui/src/welcomeFooter/index.tsx

@@ -94,7 +94,6 @@ const Footer = React.memo(
               bgcolor: alpha(theme.palette.text.primary, 0.05),
             })}
           >
-            {showBrand && (
             <Box
               pt={
                 customStyle?.footer_show_intro
@@ -284,7 +283,7 @@ const Footer = React.memo(
                 ))}
               </Stack>
             </Box>
-            )}
+
             {!(
               customStyle?.footer_show_intro === false &&
               footerSetting?.brand_groups?.length === 0
@@ -456,7 +455,6 @@ const Footer = React.memo(
             width: '100%',
           }}
         >
-          {showBrand && (
           <Box
             py={
               customStyle?.footer_show_intro
@@ -596,8 +594,7 @@ const Footer = React.memo(
                                   )}
                                 </Stack>
                               )}
-                              {account.channel === 'phone' &&
-                                account?.phone && (
+                            {account.channel === 'phone' && account?.phone && (
                               <Stack
                                 className={'popup'}
                                 px={1.5}
@@ -688,7 +685,7 @@ const Footer = React.memo(
               </Stack>
             </Stack>
           </Box>
-          )}
+
           {!(
             customStyle?.footer_show_intro === false &&
             footerSetting?.brand_groups?.length === 0

web/pnpm-lock.yaml

@@ -262,9 +262,6 @@ importers:
       html-to-image:
         specifier: ^1.11.13
         version: 1.11.13
-      import-in-the-middle:
-        specifier: ^1.14.2
-        version: 1.15.0
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
@@ -313,9 +310,6 @@ importers:
       remark-math:
         specifier: ^6.0.0
         version: 6.0.0
-      require-in-the-middle:
-        specifier: ^7.5.2
-        version: 7.5.2
       uuid:
         specifier: ^11.1.0
         version: 11.1.0