From eea532371b4228ec4d2a27b331b8c53fb42ec375 Mon Sep 17 00:00:00 2001 From: yannyang Date: Thu, 9 Jul 2026 22:50:05 +0800 Subject: [PATCH] fix: fix agent list style --- src/components/AgentListItemH5.css | 119 ++++++++++++ src/components/AgentListItemH5.tsx | 146 +++++++++++++++ src/pages/AgentEditor/constants.ts | 19 ++ .../AgentEditor/styles/agent-editor-modal.css | 1 + src/pages/AgentList/AgentListLogic.ts | 2 +- .../AgentList/components/AgentListH5.css | 166 +---------------- .../AgentList/components/AgentListH5.tsx | 89 ++------- .../AgentList/components/AgentListWeb.css | 1 - .../LoginPage/components/LoginFormCard.tsx | 18 +- .../MarketplacePage/MarketplacePageLogic.ts | 2 +- .../components/MarketplacePageH5.css | 37 ++++ .../components/MarketplacePageH5.tsx | 170 +++--------------- .../components/MarketplacePageWeb.tsx | 1 - .../components/StatsTokenSection.tsx | 3 +- src/pages/StatsPage/styles/stats-page-h5.css | 32 +++- .../TeamsPage/components/TeamsPageH5.tsx | 10 +- .../TeamsPage/components/TeamsPageWeb.tsx | 10 +- 17 files changed, 423 insertions(+), 403 deletions(-) create mode 100644 src/components/AgentListItemH5.css create mode 100644 src/components/AgentListItemH5.tsx create mode 100644 src/pages/MarketplacePage/components/MarketplacePageH5.css diff --git a/src/components/AgentListItemH5.css b/src/components/AgentListItemH5.css new file mode 100644 index 0000000..60e5c5e --- /dev/null +++ b/src/components/AgentListItemH5.css @@ -0,0 +1,119 @@ +.h5-agent-list-item { + display: flex; + align-items: flex-start; + padding: 12px; + background: #fff; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + gap: 12px; + position: relative; + transition: all 0.2s; + width: 100%; + box-sizing: border-box; +} + +.h5-agent-list-item:active { + background: #f8fafc; + transform: scale(0.98); +} + +.h5-agent-item-avatar { + width: 56px; + height: 56px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 24px; + font-weight: 600; + overflow: hidden; + flex-shrink: 0; + border: 2px solid #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.h5-agent-item-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.h5-agent-item-content { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 4px; +} + +.h5-agent-item-title-row { + display: flex; + align-items: center; + gap: 6px; +} + +.h5-agent-item-name { + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.h5-agent-item-tag { + font-size: 10px; + padding: 0 6px; + height: 18px; + line-height: 18px; + border-radius: 4px; + margin: 0; +} + +.tag-public { + background: #e6f4ff; + color: #1677ff; +} + +.tag-team { + background: #f6ffed; + color: #52c41a; +} + +.tag-private { + background: #fff7e6; + color: #fa8c16; +} + +.h5-agent-item-desc { + font-size: 13px; + color: #666; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + line-height: 1.4; + margin: 2px 0; +} + +.h5-agent-item-author { + font-size: 11px; + color: #999; + font-weight: 400; +} + +.h5-agent-item-actions { + flex-shrink: 0; + align-self: center; +} + +.h5-agent-item-more-btn { + color: #bfbfbf; + font-size: 20px; +} + +.h5-agent-item-more-btn:hover { + color: #1677ff; + background: rgba(0, 0, 0, 0.04); +} diff --git a/src/components/AgentListItemH5.tsx b/src/components/AgentListItemH5.tsx new file mode 100644 index 0000000..ab28ad1 --- /dev/null +++ b/src/components/AgentListItemH5.tsx @@ -0,0 +1,146 @@ +import React from 'react'; +import { + EllipsisOutlined, + MessageOutlined, + EditOutlined, + DeleteOutlined, +} from '@ant-design/icons'; +import { Button, Tag, Dropdown, Modal, App as AntApp } from 'antd'; +import { useNavigate } from 'react-router-dom'; +import type { Agent } from '../api'; +import './AgentListItemH5.css'; + +export interface AgentListItemH5Props { + agent: Agent; + onDelete?: (id: string) => Promise; + isImageUrl: (url?: string) => boolean; + authorName?: string; + extraActions?: { + key: string; + label: string; + icon: React.ReactNode; + onClick: (agent: Agent) => void; + danger?: boolean; + }[]; + onClick?: (agent: Agent) => void; +} + +const AgentListItemH5: React.FC = ({ + agent, + onDelete, + isImageUrl, + authorName, + extraActions = [], + onClick, +}) => { + const { message } = AntApp.useApp(); + const navigate = useNavigate(); + + const handleDefaultClick = () => { + if (onClick) { + onClick(agent); + } else { + navigate(`/chat/${agent.id}`); + } + }; + + const menuItems = [ + { + key: 'chat', + label: '开始对话', + icon: , + onClick: () => navigate(`/chat/${agent.id}`), + }, + ...extraActions.map(action => ({ + key: action.key, + label: action.label, + icon: action.icon, + danger: action.danger, + onClick: () => action.onClick(agent), + })), + ]; + + if (onDelete) { + menuItems.push({ + key: 'edit', + label: '修改', + icon: , + onClick: () => navigate(`/agents/${agent.id}`), + }); + menuItems.push({ + key: 'delete', + label: '删除', + danger: true, + icon: , + onClick: () => { + Modal.confirm({ + title: '确定删除？', + content: '删除后无法恢复', + okText: '删除', + okType: 'danger', + cancelText: '取消', + onOk: async () => { + await onDelete(agent.id); + message.success('已删除'); + }, + }); + }, + }); + } + + return ( +
+
+ {isImageUrl(agent.avatar) ? ( + avatar + ) : ( + (agent.name?.charAt(0) || '?').toUpperCase() + )} +
+ +
+
+ {agent.name} + {agent.visibility === 'public' && !authorName && ( + + 公开 + + )} + {agent.visibility === 'team' && ( + + 团队 + + )} + {agent.visibility === 'private' && ( + + 私有 + + )} +
+
{agent.description || '暂无描述'}
+ {authorName &&
by {authorName}
} +
+ +
+ +
+
+ ); +}; + +export default AgentListItemH5; diff --git a/src/pages/AgentEditor/constants.ts b/src/pages/AgentEditor/constants.ts index 81a57d7..d82b0ba 100644 --- a/src/pages/AgentEditor/constants.ts +++ b/src/pages/AgentEditor/constants.ts @@ -3,6 +3,25 @@ import { KnowledgeStatus, SkillType } from '../../api'; export const DEFAULT_AVATAR = 'https://static.svipdata.com/hoyidata/materials/B7lNeTYQM1_0/materials.jpg'; export const PRESET_AVATARS: string[] = [ + 'https://static.svipdata.com/images/mock-dev-user-id/a1ed5d166a9bcda1.png', + 'https://static.svipdata.com/images/mock-dev-user-id/da4d3c387956cd91.png', + 'https://static.svipdata.com/images/mock-dev-user-id/9f3eff849389bdd3.png', + 'https://static.svipdata.com/images/mock-dev-user-id/0bdcc398dd0423ca.png', + 'https://static.svipdata.com/images/mock-dev-user-id/18e35c04462fc56c.png', + 'https://static.svipdata.com/images/mock-dev-user-id/7a4d55fc295e65ce.png', + 'https://static.svipdata.com/images/mock-dev-user-id/5755088edf226f3c.png', + 'https://static.svipdata.com/images/mock-dev-user-id/5ec020c29804a8cd.png', + 'https://static.svipdata.com/images/mock-dev-user-id/31265f843ca7099b.png', + 'https://static.svipdata.com/images/mock-dev-user-id/f4a2df94f05ed9f6.png', + 'https://static.svipdata.com/images/mock-dev-user-id/dfec7aa91c1c5144.png', + 'https://static.svipdata.com/images/mock-dev-user-id/fa8ca9d432b555bd.png', + 'https://static.svipdata.com/images/mock-dev-user-id/796e8ba7f5781bb0.png', + 'https://static.svipdata.com/images/mock-dev-user-id/12a397b565a1ce78.png', + 'https://static.svipdata.com/images/mock-dev-user-id/15f78f9a3e0d120c.png', + 'https://static.svipdata.com/images/mock-dev-user-id/3ec3ff2af8d61123.png', + 'https://static.svipdata.com/images/mock-dev-user-id/ef90579ba571476e.png', + 'https://static.svipdata.com/images/mock-dev-user-id/c555806777e127ec.png', + 'https://static.svipdata.com/images/mock-dev-user-id/40778045ad8c2620.png', 'https://static.svipdata.com/hoyidata/materials/PkM0iQCaAY_0/materials.png', 'https://static.svipdata.com/hoyidata/materials/tmPDm2FhJY_1/materials.png', 'https://static.svipdata.com/hoyidata/materials/hNCyP4RvJL_2/materials.png', diff --git a/src/pages/AgentEditor/styles/agent-editor-modal.css b/src/pages/AgentEditor/styles/agent-editor-modal.css index 3a4cb9e..7d6e29e 100644 --- a/src/pages/AgentEditor/styles/agent-editor-modal.css +++ b/src/pages/AgentEditor/styles/agent-editor-modal.css @@ -255,6 +255,7 @@ width: 5rem; height: 5rem; margin: 0 auto; + padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 999px; diff --git a/src/pages/AgentList/AgentListLogic.ts b/src/pages/AgentList/AgentListLogic.ts index be1b861..43d3a98 100644 --- a/src/pages/AgentList/AgentListLogic.ts +++ b/src/pages/AgentList/AgentListLogic.ts @@ -26,7 +26,7 @@ export function useAgentListLogic() { load(); }; - const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/'); + const isImageUrl = (url?: string): boolean => !!(url?.startsWith('http') || url?.startsWith('/')); const getModelLabel = (value: unknown): string => { if (Array.isArray(value)) { diff --git a/src/pages/AgentList/components/AgentListH5.css b/src/pages/AgentList/components/AgentListH5.css index d457b03..89d45b3 100644 --- a/src/pages/AgentList/components/AgentListH5.css +++ b/src/pages/AgentList/components/AgentListH5.css @@ -105,173 +105,11 @@ white-space: nowrap; } -.h5-agent-card-item { - border-radius: 12px; - padding: 12px; - background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%); - box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04); - height: 100%; +/* 智能体列表容器 */ +.h5-agent-list { display: flex; flex-direction: column; - gap: 4px; - position: relative; /* 为右上角标签提供定位参考 */ - overflow: hidden; -} - -.h5-agent-card-badge { - position: absolute; - top: 0; - right: 0; - z-index: 1; -} - -.h5-agent-card-badge .h5-agent-tag-item { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-bottom-left-radius: 8px !important; - padding: 2px 8px !important; - height: auto !important; - font-size: 10px !important; -} - -.h5-agent-card-header { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; gap: 8px; - padding-top: 4px; -} - -.h5-agent-avatar { - border-radius: 50%; - overflow: hidden; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - color: #fff; - font-weight: bold; - font-size: 16px; - flex-shrink: 0; -} - -.h5-agent-info { - flex: 1; - min-width: 0; - width: 100%; -} - -.h5-agent-name { - font-weight: 700; - font-size: 12px; - color: var(--color-text); - margin-bottom: 0; - /* 支持最多展示两行 */ - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - line-height: 1.3; - min-height: 1.4em; /* 调整为单行高度占位，因为下面加了描述 */ -} - -.h5-agent-desc { - font-size: 11px; - color: var(--color-text-tertiary); - margin-top: 4px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - line-height: 1.4; - min-height: 2.8em; - text-align: center; -} - -.h5-agent-tags { - display: flex; - flex-wrap: wrap; - gap: 4px; - justify-content: center; - min-height: 40px; -} - -.h5-agent-tag-item { - border-radius: 999px !important; - margin: 0 !important; - font-size: 10px !important; - border: none !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - padding: 0 6px !important; - height: 18px !important; - line-height: 1 !important; -} - -.tag-public { - background: var(--color-success-soft) !important; - color: var(--color-success) !important; -} - -.tag-team { - background: var(--color-info-soft) !important; - color: var(--color-info) !important; -} - -.tag-private { - background: var(--color-surface-2) !important; - color: var(--color-text-secondary) !important; -} - -.tag-model { - background: var(--color-brand-soft) !important; - color: var(--color-brand) !important; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.h5-agent-actions { - display: flex; - gap: 4px; - margin-top: auto; - border-top: 1px solid var(--color-border); - justify-content: space-around; -} - -.h5-agent-action-link { - flex: 0 0 auto; -} - -.h5-agent-action-btn { - border-radius: 6px !important; - height: 28px !important; - width: 28px !important; - padding: 0 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - color: var(--color-text-secondary) !important; - background: transparent !important; -} - -.h5-agent-action-btn:hover { - background: var(--color-surface-2) !important; -} - -.h5-agent-action-btn .anticon { - font-size: 16px; -} - -.h5-agent-delete-btn { - flex-shrink: 0; } .h5-footer-promo { diff --git a/src/pages/AgentList/components/AgentListH5.tsx b/src/pages/AgentList/components/AgentListH5.tsx index 3601600..2b511be 100644 --- a/src/pages/AgentList/components/AgentListH5.tsx +++ b/src/pages/AgentList/components/AgentListH5.tsx @@ -1,15 +1,11 @@ import { - ArrowRightOutlined, CompassOutlined, - DeleteOutlined, - EditOutlined, - MessageOutlined, RobotOutlined, + ArrowRightOutlined, } from '@ant-design/icons'; -import { Button, Col, Row, Empty, Popconfirm, App as AntApp, Tag, Space } from 'antd'; -import { Link, useNavigate } from 'react-router-dom'; -import dayjs from 'dayjs'; -import type { Agent } from '../../../api'; +import { Button, Empty } from 'antd'; +import { useNavigate } from 'react-router-dom'; +import AgentListItemH5 from '../../../components/AgentListItemH5'; import type { AgentListLogicOutput } from '../AgentListLogic'; import './AgentListH5.css'; @@ -18,9 +14,8 @@ interface Props { } export default function AgentListH5({ logic }: Props) { - const { message } = AntApp.useApp(); const navigate = useNavigate(); - const { list, loading, stats, handleDelete, isImageUrl, getModelLabel } = logic; + const { list, loading, stats, handleDelete, isImageUrl } = logic; return (
@@ -80,74 +75,16 @@ export default function AgentListH5({ logic }: Props) {
) : ( - +
{list.map((a) => ( - -
- {/* 右上角可见性标签 */} -
- {a.visibility === 'public' && ( - - 公开 - - )} - {a.visibility === 'team' && ( - - 团队 - - )} - {a.visibility === 'private' && ( - - 私有 - - )} -
- -
-
- {isImageUrl(a.avatar) ? ( - avatar - ) : ( - (a.name?.charAt(0) || '?').toUpperCase() - )} -
-
-
{a.name}
-
-
- - {a.description && ( -
- {a.description} -
- )} - -
- -
-
- + ))} - +
)} {list.length > 0 && ( diff --git a/src/pages/AgentList/components/AgentListWeb.css b/src/pages/AgentList/components/AgentListWeb.css index ff54dba..353fe0d 100644 --- a/src/pages/AgentList/components/AgentListWeb.css +++ b/src/pages/AgentList/components/AgentListWeb.css @@ -79,7 +79,6 @@ .agent-card { border-radius: 20px; padding: 20px; - min-height: 292px; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045); display: flex; diff --git a/src/pages/LoginPage/components/LoginFormCard.tsx b/src/pages/LoginPage/components/LoginFormCard.tsx index 25318c2..7de45d5 100644 --- a/src/pages/LoginPage/components/LoginFormCard.tsx +++ b/src/pages/LoginPage/components/LoginFormCard.tsx @@ -37,7 +37,14 @@ export default function LoginFormCard({ logic }: { logic: LoginPageLogic }) { onFinish={onLogin} className="login-form" > - + @@ -59,7 +66,14 @@ export default function LoginFormCard({ logic }: { logic: LoginPageLogic }) { onFinish={handleRegister} className="login-form" > - + diff --git a/src/pages/MarketplacePage/MarketplacePageLogic.ts b/src/pages/MarketplacePage/MarketplacePageLogic.ts index 481fa6d..843da6f 100644 --- a/src/pages/MarketplacePage/MarketplacePageLogic.ts +++ b/src/pages/MarketplacePage/MarketplacePageLogic.ts @@ -42,7 +42,7 @@ export function useMarketplacePageLogic() { } }; - const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/'); + const isImageUrl = (url?: string): boolean => !!(url?.startsWith('http') || url?.startsWith('/')); return { list, diff --git a/src/pages/MarketplacePage/components/MarketplacePageH5.css b/src/pages/MarketplacePage/components/MarketplacePageH5.css new file mode 100644 index 0000000..82731ae --- /dev/null +++ b/src/pages/MarketplacePage/components/MarketplacePageH5.css @@ -0,0 +1,37 @@ +.h5-marketplace-page { + min-height: 100vh; + background: var(--color-bg); +} + +.h5-page-hero { + background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 48%, rgba(239,246,255,0.96) 100%); + border-bottom: 1px solid var(--color-border); +} + +.h5-hero-title { + color: var(--color-text); + font-weight: 800; + letter-spacing: -0.02em; +} + +.h5-hero-subtitle { + color: var(--color-text-secondary); +} + +.h5-page-container { + padding-bottom: 40px; +} + +.h5-marketplace-list { + margin-top: 8px; +} + +.h5-create-card { + transition: all 0.2s ease; + cursor: pointer; +} + +.h5-create-card:active { + transform: scale(0.98); + background: rgba(8, 145, 178, 0.05); +} diff --git a/src/pages/MarketplacePage/components/MarketplacePageH5.tsx b/src/pages/MarketplacePage/components/MarketplacePageH5.tsx index 92a0528..d28534e 100644 --- a/src/pages/MarketplacePage/components/MarketplacePageH5.tsx +++ b/src/pages/MarketplacePage/components/MarketplacePageH5.tsx @@ -1,8 +1,9 @@ -import { PlusOutlined, SearchOutlined, CompassOutlined, FireOutlined } from '@ant-design/icons'; -import { Col, Row, Empty, Button, Tag, Space, Input, Spin } from 'antd'; +import { PlusOutlined, SearchOutlined, CompassOutlined } from '@ant-design/icons'; +import { Empty, Button, Input, Spin } from 'antd'; import { useNavigate } from 'react-router-dom'; -import type { MarketplaceAgent } from '../../../api'; +import AgentListItemH5 from '../../../components/AgentListItemH5'; import type { MarketplacePageLogicOutput } from '../MarketplacePageLogic'; +import './MarketplacePageH5.css'; interface Props { logic: MarketplacePageLogicOutput; @@ -83,155 +84,24 @@ export default function MarketplacePageH5({ logic }: Props) { ) : ( - - {/* Create New Card - always show on H5 */} - -
navigate('/agents/new')} className="create-card h5-create-card" style={{ padding: 16 }}> -
-
- -
-
- -
-
- 新建智能体 -
-
- 从空白开始 -
-
- 从名称、提示词、模型和能力配置开始，搭建你的专属 AI 助手。 -
-
- -
- -
-
- - +
{filtered.map((a) => ( - -
-
-
- {isImageUrl(a.avatar) ? ( - avatar - ) : ( - (a.name?.charAt(0) || '?').toUpperCase() - )} -
- {a.fork_count > 10 && ( - } - style={{ - borderRadius: 999, - margin: 0, - background: 'var(--color-warning-soft)', - color: 'var(--color-warning)', - fontSize: 11, - }} - > - 热门 - - )} -
- -
-
- {a.name} -
-
- by {a.ownerName || '匿名作者'} -
-
{a.description || '暂无详细描述'}
-
- -
- - {a.kbCount > 0 && ( - - 📚 {a.kbCount} 知识 - - )} - {a.skillCount > 0 && ( - - 🛠 {a.skillCount} 技能 - - )} - - - -
-
- + , + onClick: (agent) => handleFork(agent as any), + } + ]} + /> ))} - +
)} {filtered.length === 0 && !loading && ( diff --git a/src/pages/MarketplacePage/components/MarketplacePageWeb.tsx b/src/pages/MarketplacePage/components/MarketplacePageWeb.tsx index 364c41b..a0d107d 100644 --- a/src/pages/MarketplacePage/components/MarketplacePageWeb.tsx +++ b/src/pages/MarketplacePage/components/MarketplacePageWeb.tsx @@ -1,7 +1,6 @@ import { PlusOutlined, SearchOutlined, CompassOutlined, FireOutlined } from '@ant-design/icons'; import { Col, Row, Empty, Button, Tag, Space, Input, Spin } from 'antd'; import { useNavigate } from 'react-router-dom'; -import type { MarketplaceAgent } from '../../../api'; import type { MarketplacePageLogicOutput } from '../MarketplacePageLogic'; interface Props { diff --git a/src/pages/StatsPage/components/StatsTokenSection.tsx b/src/pages/StatsPage/components/StatsTokenSection.tsx index 3b5f83a..4691bc4 100644 --- a/src/pages/StatsPage/components/StatsTokenSection.tsx +++ b/src/pages/StatsPage/components/StatsTokenSection.tsx @@ -114,9 +114,10 @@ function TokenCharts({ logic }: { logic: StatsPageLogic }) { pagination={false} rowKey={(row) => `${row.providerKind}:${row.model}`} dataSource={tokenData.byModel || []} + scroll={{ x: 'max-content' }} columns={[ { title: 'Provider', dataIndex: 'providerKind', width: 110 }, - { title: 'Model', dataIndex: 'model' }, + { title: 'Model', dataIndex: 'model', minWidth: 150 }, { title: 'Calls', dataIndex: 'calls', width: 80 }, { title: 'Tokens', dataIndex: 'totalTokens', width: 110, render: (value) => Number(value || 0).toLocaleString() }, { title: 'Cost', dataIndex: 'costUSD', width: 110, render: (value) => logic.formatUSD(value) } diff --git a/src/pages/StatsPage/styles/stats-page-h5.css b/src/pages/StatsPage/styles/stats-page-h5.css index 05f7231..04e3f22 100644 --- a/src/pages/StatsPage/styles/stats-page-h5.css +++ b/src/pages/StatsPage/styles/stats-page-h5.css @@ -75,6 +75,12 @@ .stats-page-h5 .points-integration-row, .stats-page-h5 .stats-page-token-charts-grid { grid-template-columns: 1fr; + min-width: 0; +} + +.stats-page-h5 .stats-page-token-charts-grid > * { + min-width: 0; + overflow: hidden; } .stats-page-h5 .stats-page-token-cards-grid { @@ -102,7 +108,12 @@ .stats-page-h5 .stats-page-chart-container, .stats-page-h5 .stats-page-token-chart-container { overflow-x: auto; - padding-bottom: 0.25rem; + padding-bottom: 0.75rem; + display: flex !important; + align-items: flex-end; + gap: 12px; + width: 100%; + -webkit-overflow-scrolling: touch; } .stats-page-h5 .stats-page-chart-container { @@ -112,7 +123,12 @@ } .stats-page-h5 .stats-page-chart-bar-group { - min-width: 1.625rem; + min-width: 2rem; + flex: 0 0 auto; +} + +.stats-page-h5 .stats-page-token-chart-bar { + width: 14px; } .stats-page-h5 .stats-page-chart-card .ant-card-head { @@ -143,3 +159,15 @@ .stats-page-h5 .ant-card-body { padding: 16px; } + +.stats-page-h5 .ant-table-wrapper { + margin-top: 12px; + max-width: 100%; + overflow: hidden; +} + +.stats-page-h5 .ant-table-cell { + font-size: 12px; + padding: 8px 4px !important; +} + diff --git a/src/pages/TeamsPage/components/TeamsPageH5.tsx b/src/pages/TeamsPage/components/TeamsPageH5.tsx index 031c3d4..1093bec 100644 --- a/src/pages/TeamsPage/components/TeamsPageH5.tsx +++ b/src/pages/TeamsPage/components/TeamsPageH5.tsx @@ -353,8 +353,14 @@ export default function TeamsPageH5({ logic }: Props) { ) : (
- - + + diff --git a/src/pages/TeamsPage/components/TeamsPageWeb.tsx b/src/pages/TeamsPage/components/TeamsPageWeb.tsx index 642549b..0c01440 100644 --- a/src/pages/TeamsPage/components/TeamsPageWeb.tsx +++ b/src/pages/TeamsPage/components/TeamsPageWeb.tsx @@ -355,8 +355,14 @@ export default function TeamsPageWeb({ logic }: Props) { ) : ( - - + +