From 9536909f53f809183937851eff1887526bb53d24 Mon Sep 17 00:00:00 2001 From: yannyang Date: Wed, 24 Jun 2026 01:12:52 +0800 Subject: [PATCH] feat: change agent list and edit page style --- src/components/ChatPreview.tsx | 2 +- src/pages/AgentEditor/AgentEditor.css | 45 +++ src/pages/AgentEditor/components/Header.tsx | 59 ++-- .../AgentEditor/components/PreviewPane.tsx | 10 +- src/pages/AgentEditor/index.tsx | 40 ++- .../AgentList/components/AgentListH5.css | 312 ++++++++++++++++++ .../AgentList/components/AgentListH5.tsx | 207 ++++-------- src/pages/StatsPage/styles/stats-page-h5.css | 30 +- src/styles.css | 4 + 9 files changed, 523 insertions(+), 186 deletions(-) create mode 100644 src/pages/AgentEditor/AgentEditor.css create mode 100644 src/pages/AgentList/components/AgentListH5.css diff --git a/src/components/ChatPreview.tsx b/src/components/ChatPreview.tsx index 776d031..fb77f56 100644 --- a/src/components/ChatPreview.tsx +++ b/src/components/ChatPreview.tsx @@ -134,7 +134,7 @@ export default function ChatPreview({ agent, agentId }: Props) { const isImageUrl = (url: string | undefined) => url?.startsWith('http') || url?.startsWith('/'); return ( -
+
Promise; + isMobile?: boolean; } -export default function Header({ isNew, currentName, navigate, autoSaveStatus, saving, onSave }: HeaderProps) { +export default function Header({ isNew, currentName, navigate, autoSaveStatus, saving, onSave, isMobile }: HeaderProps) { return (
@@ -27,34 +28,38 @@ export default function Header({ isNew, currentName, navigate, autoSaveStatus, s {isNew ? '创建新智能体' : currentName || ''}
-
- 围绕个性化、能力配置与实时预览，搭建一个更完整的 AI 工作台。 -
+ {!isMobile && ( +
+ 围绕个性化、能力配置与实时预览，搭建一个更完整的 AI 工作台。 +
+ )}
-
- - {autoSaveStatus === 'saving' - ? '正在保存...' - : autoSaveStatus === 'dirty' - ? '有未保存更改' - : autoSaveStatus === 'error' - ? '保存失败' - : '已保存'} - - - -
+ {!isMobile && ( +
+ + {autoSaveStatus === 'saving' + ? '正在保存...' + : autoSaveStatus === 'dirty' + ? '有未保存更改' + : autoSaveStatus === 'error' + ? '保存失败' + : '已保存'} + + + +
+ )} ); } diff --git a/src/pages/AgentEditor/components/PreviewPane.tsx b/src/pages/AgentEditor/components/PreviewPane.tsx index cc93a92..852fe6f 100644 --- a/src/pages/AgentEditor/components/PreviewPane.tsx +++ b/src/pages/AgentEditor/components/PreviewPane.tsx @@ -9,9 +9,9 @@ interface PreviewPaneProps { export default function PreviewPane({ liveAgent, agentId }: PreviewPaneProps) { return ( -
-
-
+
+
+

预览

@@ -23,13 +23,13 @@ export default function PreviewPane({ liveAgent, agentId }: PreviewPaneProps) { Live Preview

-
+
当前预览角色
{liveAgent?.name || '未命名智能体'} 会基于左侧 Prompt 与中栏设置立即更新。你可以直接在这里检查语气、头像和整体观感。
-
+
diff --git a/src/pages/AgentEditor/index.tsx b/src/pages/AgentEditor/index.tsx index ec8c8c7..0176119 100644 --- a/src/pages/AgentEditor/index.tsx +++ b/src/pages/AgentEditor/index.tsx @@ -1,15 +1,18 @@ import { useEffect, useRef, useState } from 'react'; -import { Form } from 'antd'; +import { Form, Button } from 'antd'; import { useNavigate, useParams } from 'react-router-dom'; import { App as AntApp } from 'antd'; +import { FileTextOutlined, SaveOutlined } from '@ant-design/icons'; import SkillEditor from '../../components/SkillEditor'; import { useAgentEditor } from './hooks/useAgentEditor'; +import { useIsMobile } from '../../hooks/useIsMobile'; import Header from './components/Header'; import PromptEditor from './components/PromptEditor'; import CapabilitySettings from './components/CapabilitySettings'; import PreviewPane from './components/PreviewPane'; import InitModal from './components/InitModal'; import AvatarSelector from './components/AvatarSelector'; +import './AgentEditor.css'; import './styles/agent-editor-capability.css'; import './styles/agent-editor-panels.css'; import './styles/agent-editor-modal.css'; @@ -54,9 +57,11 @@ export default function AgentEditor() { markDirty, } = useAgentEditor({ id, isNew, form, message, navigate }); + const isMobile = useIsMobile(); + return ( <> -
+
-
+
+ {isMobile && ( +
+ + {autoSaveStatus === 'saving' + ? '正在保存...' + : autoSaveStatus === 'dirty' + ? '有未保存更改' + : autoSaveStatus === 'error' + ? '保存失败' + : '已保存'} + +
+ + +
+
+ )} + {!isNew && ( -
-
-
-
+
+
+
+
+
我的 Agent 资产
-

+

我的智能体

-
+
把你的 AI 助手沉淀成一组可管理、可协作、可持续进化的能力单元。
@@ -76,34 +44,23 @@ export default function AgentListH5({ logic }: Props) { size="middle" icon={} onClick={() => navigate('/marketplace')} - style={{ borderRadius: 10, height: 40, padding: '0 16px', fontWeight: 600, width: '100%' }} + className="h5-stats-marketplace-btn" > 前往智能体广场
-
+
{stats.map((item) => ( -
-
{item.label}
-
- {item.value} +
+
{item.label}
+
+ {item.value} 实时统计 @@ -123,22 +80,33 @@ export default function AgentListH5({ logic }: Props) {
) : ( - + {list.map((a) => ( - -
-
+ +
+ {/* 右上角可见性标签 */} +
+ {a.visibility === 'public' && ( + + 公开 + + )} + {a.visibility === 'team' && ( + + 团队 + + )} + {a.visibility === 'private' && ( + + 私有 + + )} +
+ +
{isImageUrl(a.avatar) ? ( avatar @@ -146,72 +114,26 @@ export default function AgentListH5({ logic }: Props) { (a.name?.charAt(0) || '?').toUpperCase() )}
-
-
{a.name}
-
- 最近更新于 {dayjs(a.updated_at).format('YYYY-MM-DD')} -
+
+
{a.name}
-
-
- {a.description || '还没有填写描述，可以补充这个智能体适合解决什么问题。'} + {a.description && ( +
+ {a.description}
-
+ )} - - {a.visibility === 'public' && ( - - 公开 - - )} - {a.visibility === 'team' && ( - - 团队 - - )} - {a.visibility === 'private' && ( - - 私有 - - )} - {getModelLabel(a.model) && ( - - - {getModelLabel(a.model)} - - - )} - {(a.fork_count ?? 0) > 0 && ( - - Fork {a.fork_count} - - )} - - -
- - +
+ + + +
@@ -229,29 +151,16 @@ export default function AgentListH5({ logic }: Props) { )} {list.length > 0 && ( -
-
-
+
+
+
想创建新的智能体入口？
-
+
统一从智能体广场进入，保证创建流程和发现体验保持一致。
-
diff --git a/src/pages/StatsPage/styles/stats-page-h5.css b/src/pages/StatsPage/styles/stats-page-h5.css index 0b0b789..7043800 100644 --- a/src/pages/StatsPage/styles/stats-page-h5.css +++ b/src/pages/StatsPage/styles/stats-page-h5.css @@ -42,7 +42,35 @@ font-size: 1.75rem; } -.stats-page-h5 .stats-page-cards-grid, +.stats-page-h5 .stats-page-cards-grid { + grid-template-columns: repeat(3, 1fr); + gap: 8px; +} + +.stats-page-h5 .stats-page-card { + padding: 10px 8px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.stats-page-h5 .stats-page-card-label { + flex-direction: column; + gap: 4px; + font-size: 11px; + margin-bottom: 6px; +} + +.stats-page-h5 .stats-page-card-icon { + width: 24px; + height: 24px; +} + +.stats-page-h5 .stats-page-card-value { + font-size: 18px; +} + .stats-page-h5 .points-integration-row, .stats-page-h5 .stats-page-token-cards-grid, .stats-page-h5 .stats-page-token-charts-grid { diff --git a/src/styles.css b/src/styles.css index 3cab66d..b5e80f8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1493,6 +1493,10 @@ body { padding: 40px 32px 60px; } +.page-container.h5-page-container { + padding: 12px; +} + .feature-cover-container { position: relative; }