feat: 添加触摸设置

package.json

@@ -67,37 +67,37 @@
     "@gltf-transform/core": "^3.10.1",
     "@icons-pack/react-simple-icons": "^9.5.0",
     "@lobehub/tts": "^1.24.1",
-    "@lobehub/ui": "^1.138.17",
-    "@pixiv/three-vrm": "^2.1.1",
-    "@pixiv/three-vrm-core": "^2.1.1",
+    "@lobehub/ui": "^1.141.3",
+    "@pixiv/three-vrm": "2.1.1",
+    "@pixiv/three-vrm-core": "2.1.1",
     "@react-spring/web": "^9.7.3",
     "@types/react-speech-recognition": "^3.9.5",
-    "@vercel/analytics": "^1.2.2",
-    "ahooks": "^3.7.11",
+    "@vercel/analytics": "^1.3.1",
+    "ahooks": "^3.8.0",
     "ai": "^2.2.37",
     "antd": "~5.16.5",
     "antd-style": "^3.6.2",
-    "axios": "^1.6.8",
+    "axios": "^1.7.2",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
     "fast-deep-equal": "^3.1.3",
     "immer": "^10.1.1",
-    "js-tiktoken": "^1.0.11",
+    "js-tiktoken": "^1.0.12",
     "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.309.0",
     "mmd-parser": "^1.0.4",
     "next": "^14.2.3",
     "next-pwa": "^5.6.0",
-    "openai": "^4.40.2",
+    "openai": "^4.47.1",
     "polished": "^4.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.10.2",
     "react-layout-kit": "^1.9.0",
     "react-lazy-load": "^4.0.1",
-    "react-virtuoso": "^4.7.10",
+    "react-virtuoso": "^4.7.11",
     "swr": "^2.2.5",
     "three": "^0.162.0",
     "ua-parser-js": "^1.0.37",
@@ -108,15 +108,15 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
-    "@ducanh2912/next-pwa": "^10.2.6",
+    "@ducanh2912/next-pwa": "^10.2.7",
     "@lobehub/lint": "^1.23.4",
     "@next/bundle-analyzer": "^14.2.3",
     "@peculiar/webcrypto": "^1.4.6",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "20.3.1",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/three": "^0.162.0",
     "@types/ua-parser-js": "^0.7.39",
@@ -125,16 +125,16 @@
     "dpdm": "^3.14.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "13.4.7",
-    "glob": "^10.3.12",
+    "glob": "^10.4.1",
     "husky": "^9.0.11",
-    "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.2",
+    "jsdom": "^24.1.0",
+    "lint-staged": "^15.2.5",
     "prettier": "^3.2.5",
     "remark": "^14.0.3",
     "remark-cli": "^11.0.0",
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
-    "tsx": "^4.9.0",
+    "tsx": "^4.11.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vitest": "~1.2.2",

src/app/chat/SideBar/index.tsx

@@ -29,7 +29,7 @@ const SideBar = () => {
       onExpandChange={(expand) => setSessionList(expand)}
       expand={showSessionList}
     >
-      {/*<Header />*/}
+      {/*<Header.tsx />*/}
       <SessionList />
     </DraggablePanel>
   );

src/app/chat/ViewerMode/index.tsx

@@ -27,7 +27,7 @@ export default memo(() => {
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div className={styles.viewer}>
         <AgentViewer
-          height={`calc(100vh - ${HEADER_HEIGHT}px);`}
+          height={`calc(100vh - ${HEADER_HEIGHT}px)`}
           modelUrl={currentAgent?.meta.model}
         />
       </div>

src/app/my/SideBar/MyList/Item.tsx

@@ -1,6 +1,6 @@
 import { Icon, List } from '@lobehub/ui';
-import { createStyles, useResponsive } from 'antd-style';
-import { ChevronRight, type LucideIcon } from 'lucide-react';
+import { createStyles } from 'antd-style';
+import { type LucideIcon } from 'lucide-react';
 import { CSSProperties, ReactNode, memo } from 'react';
 
 const { Item } = List;
@@ -32,17 +32,14 @@ export interface ItemProps {
 const SettingItem = memo<ItemProps>(
   ({ label, icon, hoverable = true, active = false, style, className }) => {
     const { cx, styles } = useStyles();
-    const { mobile } = useResponsive();
     return (
       <Item
         active={active}
         avatar={<Icon icon={icon} size={{ fontSize: 20 }} />}
         className={cx(styles.container, !hoverable && styles.noHover, className)}
         style={style}
         title={label as string}
-      >
-        {mobile && <Icon icon={ChevronRight} size={{ fontSize: 16 }} />}
-      </Item>
+      ></Item>
     );
   },
 );

src/app/role/SideBar/index.tsx

@@ -33,7 +33,7 @@ const SideBar = () => {
       onExpandChange={(expand) => setRoleList(expand)}
       expand={showRoleList}
     >
-      {/*<Header />*/}
+      {/*<Header.tsx />*/}
       <RoleList />
     </DraggablePanel>
   );

src/components/Error/index.tsx

@@ -44,7 +44,7 @@ const ErrorCapture = memo<ErrorCaptureProps>(({ reset, error }) => {
         项目当前正在施工中，不保证数据稳定性，如果遇到问题可以尝试
         <ClearChat text="清除会话消息" type={'link'} />
         或 <ResetConfig text="重置系统设置" type={'link'} />
-        ，造成地不便敬请谅解
+        ，造成不便敬请谅解
       </p>
       <Flexbox gap={12} horizontal style={{ marginBottom: '1em' }}>
         <Button onClick={() => reset()}>重新加载</Button>

src/components/ListItem/index.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { CSSProperties, HTMLAttributes, ReactNode, forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+import { getChatItemTime } from './time';
+
+/**
+ * 卡片列表项的属性
+ */
+export interface ListItemProps {
+  /**
+   * 渲染操作区域的 React 节点
+   */
+  actions?: ReactNode;
+  /**
+   * 是否处于激活状态
+   */
+  active: boolean;
+  addon?: ReactNode;
+  /**
+   * 头像的 React 节点
+   */
+  avatar?: ReactNode;
+  /**
+   * 自定义样式类名
+   */
+  className?: string;
+  /**
+   * 自定义样式类名对象
+   * @property time - 时间的样式类名
+   */
+  classNames?: {
+    time?: string;
+  };
+  /**
+   * 日期时间戳
+   */
+  date?: number;
+  /**
+   * 描述信息
+   */
+  description?: ReactNode;
+  /**
+   * 是否处于加载状态
+   */
+  loading?: boolean;
+  /**
+   * 点击事件回调函数
+   */
+  onClick?: () => void;
+  /**
+   * 鼠标悬停状态变化事件回调函数
+   * @param hover - 是否悬停
+   */
+  onHoverChange?: (hover: boolean) => void;
+
+  pin?: boolean;
+  /**
+   * 是否显示操作区域
+   */
+  showAction?: boolean;
+  /**
+   * 自定义样式对象
+   */
+  style?: CSSProperties;
+  /**
+   * 标题
+   */
+  title: ReactNode;
+}
+
+const ListItem = forwardRef<HTMLDivElement, ListItemProps & HTMLAttributes<any>>(
+  (
+    {
+      active,
+      avatar,
+      loading,
+      description,
+      date,
+      title,
+      onHoverChange,
+      actions,
+      className,
+      style,
+      showAction,
+      children,
+      classNames,
+      addon,
+      pin,
+      ...rest
+    },
+    ref,
+  ) => {
+    const { styles, cx } = useStyles();
+
+    return (
+      <Flexbox
+        align={'flex-start'}
+        className={cx(styles.container, active && styles.active, className)}
+        distribution={'space-between'}
+        gap={8}
+        horizontal
+        onMouseEnter={() => {
+          onHoverChange?.(true);
+        }}
+        onMouseLeave={() => {
+          onHoverChange?.(false);
+        }}
+        padding={8}
+        ref={ref}
+        style={style}
+        {...rest}
+      >
+        {pin && (
+          <div className={styles.pin}>
+            <div className={styles.triangle}></div>
+          </div>
+        )}
+        {avatar}
+        <Flexbox className={styles.content} gap={8}>
+          <Flexbox distribution={'space-between'} horizontal>
+            <div className={styles.title}>{title}</div>
+          </Flexbox>
+          {description && <div className={styles.desc}>{description}</div>}
+          {addon}
+        </Flexbox>
+        {loading ? (
+          <Icon icon={Loader2} spin />
+        ) : (
+          <>
+            {showAction && (
+              <Flexbox
+                className={styles.actions}
+                gap={4}
+                horizontal
+                onClick={(e: any) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                style={{ display: showAction ? undefined : 'none' }}
+              >
+                {actions}
+              </Flexbox>
+            )}
+            {date && (
+              <div
+                className={cx(styles.time, classNames?.time)}
+                style={showAction ? { opacity: 0 } : {}}
+              >
+                {getChatItemTime(date)}
+              </div>
+            )}
+          </>
+        )}
+        {children}
+      </Flexbox>
+    );
+  },
+);
+
+export default ListItem;

src/components/ListItem/style.ts

@@ -0,0 +1,82 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    actions: css`
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-end: 16px;
+      transform: translateY(-50%);
+    `,
+    active: css`
+      color: ${token.colorText};
+      background-color: ${token.colorFillSecondary};
+
+      &:hover {
+        background-color: ${token.colorFill};
+      }
+    `,
+    container: css`
+      cursor: pointer;
+      color: ${token.colorTextTertiary};
+      background: transparent;
+      transition: background-color 200ms ${token.motionEaseOut};
+
+      &:active {
+        background-color: ${token.colorFillSecondary};
+      }
+
+      &:hover {
+        background-color: ${token.colorFillTertiary};
+      }
+    `,
+    content: css`
+      position: relative;
+      overflow: hidden;
+      flex: 1;
+      align-self: center;
+    `,
+    desc: css`
+      overflow: hidden;
+
+      width: 100%;
+
+      font-size: 12px;
+      line-height: 1;
+      color: ${token.colorTextDescription};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+
+    pin: css`
+      position: absolute;
+      inset-block-start: 6px;
+      inset-inline-end: 6px;
+    `,
+    time: css`
+      font-size: 12px;
+      color: ${token.colorTextPlaceholder};
+    `,
+
+    title: css`
+      overflow: hidden;
+
+      width: 100%;
+
+      font-size: 14px;
+      line-height: 1;
+      color: ${token.colorText};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+    triangle: css`
+      width: 10px;
+      height: 10px;
+
+      opacity: 0.5;
+      background: ${token.colorPrimaryBorder};
+      clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
+      border-radius: 2px;
+    `,
+  };
+});