fix: fix style problem by fengqian

2026-06-26 18:00:29 +08:00 · 2026-06-26 18:00:29 +08:00 · b013fff224
parent 4d2bc459ca
commit b013fff224
17 changed files with 343 additions and 156 deletions
--- a/src/components/ChatPreview.tsx
+++ b/src/components/ChatPreview.tsx
@ -176,7 +176,7 @@ export default function ChatPreview({ agent, agentId }: Props) {
        )}
      </div>

-      <div className="p-4 bg-white border-t">
+      <div className="p-4 bg-white">
        <div className="flex gap-2">
          <Input.TextArea
            value={input}
--- a/src/pages/AgentEditor/components/CapabilitySettings.tsx
+++ b/src/pages/AgentEditor/components/CapabilitySettings.tsx
@ -18,6 +18,7 @@ interface CapabilitySettingsProps {
  beforeUploadKnowledge: (file: any) => Promise<boolean>;
  onDeleteKnowledge: (fileId: string) => Promise<void>;
  markDirty: () => void;
+  isMobile?: boolean;
 }

 export default function CapabilitySettings({
@ -32,6 +33,7 @@ export default function CapabilitySettings({
  beforeUploadKnowledge,
  onDeleteKnowledge,
  markDirty,
+  isMobile = false,
 }: CapabilitySettingsProps) {
  return (
    <div className="flex-1 agent-editor-pane">
@ -55,7 +57,7 @@ export default function CapabilitySettings({
            setAvatarSelectorOpen={setAvatarSelectorOpen}
          />
          <BasicSettingsPanel teams={teams} />
-          <ModelSettingsCard models={models} />
+          <ModelSettingsCard models={models} isMobile={isMobile} />
          <KnowledgeSettingsPanel
            agent={agent}
            beforeUploadKnowledge={beforeUploadKnowledge}
--- a/src/pages/AgentEditor/components/InitModal.tsx
+++ b/src/pages/AgentEditor/components/InitModal.tsx
@ -40,7 +40,7 @@ export default function InitModal({
      open={open}
      onCancel={onCancel}
      footer={null}
-      width={720}
+      width={isMobile ? 360 : 720}
      centered
      maskClosable={false}
      destroyOnHidden
@ -84,7 +84,7 @@ export default function InitModal({
            onValuesChange={(changed) => {
              if (changed.name !== undefined) setAgentName(changed.name);
            }}
-            className="agent-editor-modal-card agent-editor-init-form"
+            className="agent-editor-init-form"
          >
            <Form.Item
              name="name"
@ -93,7 +93,7 @@ export default function InitModal({
            >
              <Input
                placeholder="给你的智能体起个名字"
-                size="large"
+                size={isMobile ? 'middle' : 'large'}
                autoFocus
                className="agent-editor-form-input"
              />
@ -105,7 +105,7 @@ export default function InitModal({
            >
              <Input.TextArea
                placeholder="介绍一下这个智能体是做什么的..."
-                rows={3}
+                rows={isMobile ? 2 : 3}
                className="agent-editor-form-textarea"
              />
            </Form.Item>
@ -140,21 +140,24 @@ export default function InitModal({
        </div>

        <div className="agent-editor-avatar-section">
-          <div className="agent-editor-avatar-heading">选择你的智能体形象</div>
+          {!isMobile && <div className="agent-editor-avatar-heading">选择你的智能体形象</div>}
          <div className="agent-editor-avatar-toolbar">
            <div className="agent-editor-avatar-hint">
              默认会使用系统头像，你也可以上传自己的图片替换。
            </div>
+            <div className="agent-editor-avatar-upload-container">
+              {isMobile && <div className="agent-editor-avatar-heading">选择你的智能体形象</div>}
              <Upload
                accept="image/png,image/jpeg,image/webp,image/gif"
                showUploadList={false}
                beforeUpload={beforeUploadInitAvatar}
              >
-              <Button icon={<UploadOutlined />} loading={avatarUploading} className="agent-editor-upload-button">
+                <Button icon={<UploadOutlined />} size={isMobile ? 'small' : 'middle'} loading={avatarUploading} className="agent-editor-upload-button">
                  上传图片
                </Button>
              </Upload>
            </div>
+          </div>
          <div className="agent-editor-avatar-grid monica-scrollbar">
            {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => {
              const isSelected = selectedAvatar === url;
--- a/src/pages/AgentEditor/components/ModelCheckboxDropdown.tsx
+++ b/src/pages/AgentEditor/components/ModelCheckboxDropdown.tsx
@ -8,9 +8,10 @@ interface ModelCheckboxDropdownProps {
  value?: string[];
  onChange?: (value: string[]) => void;
  models: AiModel[];
+  isMobile?: boolean;
 }

-export default function ModelCheckboxDropdown({ value = [], onChange, models }: ModelCheckboxDropdownProps) {
+export default function ModelCheckboxDropdown({ value = [], onChange, models, isMobile = false }: ModelCheckboxDropdownProps) {
  const [open, setOpen] = useState(false);
  const summary = value.length ? `${value.length} 个已选` : '选择模型';

@ -20,7 +21,7 @@ export default function ModelCheckboxDropdown({ value = [], onChange, models }:
      open={open}
      onOpenChange={setOpen}
      popupRender={() => (
-        <div className="agent-model-dropdown-panel" onClick={(e) => e.stopPropagation()}>
+        <div className={`agent-model-dropdown-panel${isMobile ? ' is-h5-panel' : ''}`} onClick={(e) => e.stopPropagation()}>
          <Checkbox.Group
            value={value}
            onChange={(checked) => onChange?.(checked.map((item) => String(item)))}
--- a/src/pages/AgentEditor/components/PromptEditor.tsx
+++ b/src/pages/AgentEditor/components/PromptEditor.tsx
@ -4,9 +4,10 @@ import { FileTextOutlined } from '@ant-design/icons';
 interface PromptEditorProps {
  form: any;
  markDirty: () => void;
+  isMobile?: boolean;
 }

-export default function PromptEditor({ form, markDirty }: PromptEditorProps) {
+export default function PromptEditor({ form, markDirty, isMobile }: PromptEditorProps) {
  return (
    <div className="flex-1 agent-editor-pane">
      <div className="agent-editor-pane-body">
@ -42,7 +43,7 @@ export default function PromptEditor({ form, markDirty }: PromptEditorProps) {
            <div className="agent-editor-prompt">
              <Form.Item name="prompt" noStyle>
                <Input.TextArea
-                  rows={30}
+                  rows={isMobile ? 10 : 30}
                  placeholder="在这里输入智能体的人设、技能、风格和输出规范..."
                  className="agent-editor-prompt-textarea border-none focus:ring-0 bg-transparent p-4 font-mono text-sm leading-relaxed"
                />
--- a/src/pages/AgentEditor/components/capability/BasicSettingsPanel.tsx
+++ b/src/pages/AgentEditor/components/capability/BasicSettingsPanel.tsx
@ -29,10 +29,10 @@ export default function BasicSettingsPanel({ teams }: BasicSettingsPanelProps) {
                  <span className="text-[11px] text-gray-400">名称、描述和可见性决定了这个智能体如何被理解和管理。</span>
                </div>
              </div>
-              <Form.Item name="name" label="名称" rules={[{ required: true }]} className="mb-3">
+              <Form.Item name="name" label="名称" rules={[{ required: true }]} className="mb-2">
                <Input placeholder="智能体名称" className="agent-editor-field-input" />
              </Form.Item>
-              <Form.Item name="description" label="描述" className="mb-3">
+              <Form.Item name="description" label="描述" className="mb-2">
                <Input.TextArea rows={3} placeholder="简短描述这个智能体是做什么的..." className="agent-editor-field-textarea" />
              </Form.Item>
              <div className="flex gap-2">
--- a/src/pages/AgentEditor/components/capability/ModelSettingsCard.tsx
+++ b/src/pages/AgentEditor/components/capability/ModelSettingsCard.tsx
@ -5,9 +5,10 @@ import ModelCheckboxDropdown from '../ModelCheckboxDropdown';

 interface ModelSettingsCardProps {
  models: any[];
+  isMobile?: boolean;
 }

-export default function ModelSettingsCard({ models }: ModelSettingsCardProps) {
+export default function ModelSettingsCard({ models, isMobile = false }: ModelSettingsCardProps) {
  return (
    <div className="monica-card agent-editor-section-card">
      <div className="agent-editor-section-title">
@ -31,7 +32,7 @@ export default function ModelSettingsCard({ models }: ModelSettingsCardProps) {
          className="mb-0"
          getValueProps={(value) => ({ value: parseModelSelections(value) })}
        >
-          <ModelCheckboxDropdown models={models} />
+          <ModelCheckboxDropdown models={models} isMobile={isMobile} />
        </Form.Item>
        <Form.Item name="temperature" label="Temperature" className="mb-0" hidden>
          <div className="flex items-center gap-4">
--- a/src/pages/AgentEditor/index.tsx
+++ b/src/pages/AgentEditor/index.tsx
@ -86,6 +86,7 @@ export default function AgentEditor() {
            beforeUploadKnowledge={beforeUploadKnowledge}
            onDeleteKnowledge={handleDeleteKnowledge}
            markDirty={markDirty}
+            isMobile={isMobile}
          />
          <PreviewPane liveAgent={liveAgent} agentId={id} />
        </div>
--- a/src/pages/AgentEditor/styles/agent-editor-h5.css
+++ b/src/pages/AgentEditor/styles/agent-editor-h5.css
@ -44,7 +44,7 @@

  .agent-editor-init-modal .agent-editor-avatar-grid,
  .agent-editor-avatar-modal .agent-editor-avatar-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .agent-editor-avatar-toolbar,
--- a/src/pages/AgentEditor/styles/agent-editor-modal.css
+++ b/src/pages/AgentEditor/styles/agent-editor-modal.css
@ -8,14 +8,14 @@
 }

 .agent-editor-init-header {
-  margin-bottom: 1.125rem;
+  margin-bottom: 12px;
 }

 .agent-editor-init-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
-  margin-bottom: 0.875rem;
+  margin-bottom: 12px;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 97, 255, 0.08);
@ -24,6 +24,13 @@
  font-weight: 700;
 }

+.agent-editor-avatar-upload-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
 .agent-editor-init-title {
  margin-bottom: 0.5rem;
  color: var(--color-text);
@ -31,6 +38,50 @@
  font-weight: 800;
 }

+.is-h5-modal {
+  .agent-editor-init-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  .agent-editor-init-subtitle {
+    font-size: 12px;
+    line-height: 1.2;
+  }
+  .agent-editor-avatar-preview {
+    width: 44px;
+    height: 44px;
+  }
+  .agent-editor-preview-text {
+    margin-top: 12px;
+  }
+  .agent-editor-preview-name {
+    font-size: 14px;
+  }
+
+  .agent-editor-modal-hero {
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 8px;
+  }
+
+  .agent-editor-avatar-heading {
+    margin-bottom: 0;
+  }
+
+  .agent-editor-avatar-option {
+    width: 44px;
+    height: 44px;
+  }
+
+  .agent-editor-preview-card {
+    padding: 8px;
+  }
+}
+
 .agent-editor-init-subtitle {
  color: var(--color-text-secondary);
  font-size: 0.90625rem;
@ -44,10 +95,10 @@
 }

 .agent-editor-modal-card {
-  border: 1px solid rgba(150, 177, 217, 0.32);
-  border-radius: 1.25rem;
-  background: var(--color-surface);
  box-shadow: 0 18px 42px rgba(10, 28, 72, 0.08);
+  border-radius: 12px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
 }

 .agent-editor-preview-card {
@ -97,13 +148,7 @@
  line-height: 1.7;
 }

-.agent-editor-init-form {
-  padding: 12px;
-}
-
-.is-h5-modal .ant-form-item {
-  margin-bottom: 12px;
-}
+.agent-editor-init-form {}

 .agent-editor-form-label {
  color: var(--color-text-secondary);
@ -166,7 +211,6 @@

 .agent-editor-avatar-heading {
  margin-bottom: 0.75rem;
-  padding: 0 0.25rem;
  color: #8a9ab8;
  font-size: 0.6875rem;
  font-weight: 800;
@ -210,7 +254,6 @@
  position: relative;
  width: 5rem;
  height: 5rem;
-  min-width: 5rem;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid transparent;
--- a/src/pages/AgentList/components/AgentListH5.css
+++ b/src/pages/AgentList/components/AgentListH5.css
@ -113,7 +113,7 @@
  height: 100%;
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  gap: 4px;
  position: relative; /* 为右上角标签提供定位参考 */
  overflow: hidden;
 }
@ -166,7 +166,7 @@

 .h5-agent-name {
  font-weight: 700;
-  font-size: 13px;
+  font-size: 12px;
  color: var(--color-text);
  margin-bottom: 0;
  /* 支持最多展示两行 */
@ -175,7 +175,7 @@
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
-  line-height: 1.4;
+  line-height: 1.3;
  min-height: 1.4em; /* 调整为单行高度占位，因为下面加了描述 */
 }

@ -242,7 +242,6 @@
  display: flex;
  gap: 4px;
  margin-top: auto;
-  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  justify-content: space-around;
 }
--- a/src/pages/chat/components/AgentSidebar.css
+++ b/src/pages/chat/components/AgentSidebar.css
@ -0,0 +1,94 @@
+.chat-side.is-full {
+  width: 100%;
+  border: 0;
+}
+
+.chat-agent-sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.chat-agent-sidebar-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.chat-agent-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  cursor: pointer;
+  background: transparent;
+  border-left: 3px solid transparent;
+  transition: background 0.2s;
+}
+
+.chat-agent-item:hover {
+  background: var(--color-surface-2);
+}
+
+.chat-agent-item.active {
+  background: var(--color-surface-2);
+  border-left: 3px solid var(--color-brand);
+}
+
+.chat-agent-avatar-wrap {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.chat-agent-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.chat-agent-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-agent-name {
+  font-size: 14px;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.chat-agent-item.active .chat-agent-name {
+  font-weight: 600;
+}
+
+.chat-agent-sidebar-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  padding: 20px;
+  text-align: center;
+}
+
+.chat-agent-empty-text,
+.chat-agent-loading-text {
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+  line-height: 1.6;
+}
+
+.chat-agent-loading-text {
+  margin-top: 8px;
+}
--- a/src/pages/chat/components/AgentSidebar.tsx
+++ b/src/pages/chat/components/AgentSidebar.tsx
@ -1,5 +1,8 @@
-import { Button } from 'antd';
+import { Button, Spin, Empty } from 'antd';
+import { MessageOutlined } from '@ant-design/icons';
+import { useEffect, useState } from 'react';
 import type { Agent } from '../../../api';
+import './AgentSidebar.css';

 const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');

@ -8,68 +11,75 @@ export default function AgentSidebar(props: {
  activeAgentId?: string;
  onCreate: () => void;
  onSelect: (agentId: string) => void;
+  isSidebar?: boolean;
 }) {
-  const { agentList, activeAgentId, onCreate, onSelect } = props;
+  const { agentList, activeAgentId, onCreate, onSelect, isSidebar = true } = props;
+  const [loadingTimeout, setLoadingTimeout] = useState(false);
+
+  useEffect(() => {
+    if (agentList.length > 0) return;
+    
+    const timer = setTimeout(() => {
+      setLoadingTimeout(true);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [agentList.length]);

  return (
-    <aside className="chat-side">
-      <div style={{ padding: '16px', borderBottom: '1px solid var(--color-border)' }}>
+    <aside className={`chat-side${isSidebar ? '' : ' is-full'}`}>
+      <div className="chat-agent-sidebar-header">
        <Button block type="dashed" onClick={onCreate}>
          + 创建智能体
        </Button>
      </div>
-      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
-        {agentList.map((a) => {
+      <div className="chat-agent-sidebar-list">
+        {agentList.length > 0 ? (
+          agentList.map((a) => {
            const isActive = a.id === activeAgentId;
            return (
              <div
                key={a.id}
                onClick={() => onSelect(a.id)}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 12,
-                padding: '10px 16px',
-                cursor: 'pointer',
-                background: isActive ? 'var(--color-surface-2)' : 'transparent',
-                borderLeft: `3px solid ${isActive ? 'var(--color-brand)' : 'transparent'}`,
-                transition: 'background 0.2s'
-              }}
+                className={`chat-agent-item ${isActive ? 'active' : ''}`}
              >
                <div
-                style={{
-                  width: 32,
-                  height: 32,
-                  borderRadius: '50%',
-                  background: a.avatar || 'var(--gradient-brand)',
-                  color: '#fff',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontWeight: 700,
-                  fontSize: 14,
-                  overflow: 'hidden'
-                }}
+                  className="chat-agent-avatar-wrap"
+                  style={{ background: a.avatar || 'var(--gradient-brand)' }}
                >
-                {isImageUrl(a.avatar) ? <img src={a.avatar} className="w-full h-full object-cover" alt="avatar" /> : (a.name?.charAt(0) || '?').toUpperCase()}
+                  {isImageUrl(a.avatar) ? (
+                    <img src={a.avatar} className="chat-agent-avatar-img" alt="avatar" />
+                  ) : (
+                    (a.name?.charAt(0) || '?').toUpperCase()
+                  )}
                </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div
-                  style={{
-                    fontWeight: isActive ? 600 : 500,
-                    fontSize: 14,
-                    color: 'var(--color-text)',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap'
-                  }}
-                >
+                <div className="chat-agent-info">
+                  <div className="chat-agent-name">
                    {a.name}
+                    {!isSidebar && <MessageOutlined style={{marginLeft: 12}} />}
                  </div>
                </div>
              </div>
            );
-        })}
+          })
+        ) : !loadingTimeout ? (
+          <div className="chat-agent-sidebar-status">
+            <Spin />
+            <div className="chat-agent-loading-text">正在加载智能体...</div>
+          </div>
+        ) : (
+          <div className="chat-agent-sidebar-status">
+            <Empty 
+              image={Empty.PRESENTED_IMAGE_SIMPLE} 
+              description={
+                <span className="chat-agent-empty-text">
+                  暂无智能体<br />
+                  点击上方按钮开始创建
+                </span>
+              } 
+            />
+          </div>
+        )}
      </div>
    </aside>
  );
--- a/src/pages/chat/components/ChatInput.tsx
+++ b/src/pages/chat/components/ChatInput.tsx
@ -293,7 +293,7 @@ export default function ChatInput(props: {

            <div className="chat-input-toolbar">
              <div className="chat-input-toolbar-left">
-                <Select
+                {/* <Select
                  value={activeModelValue || undefined}
                  className="chat-model-select"
                  popupMatchSelectWidth={false}
@ -301,7 +301,7 @@ export default function ChatInput(props: {
                  suffixIcon={<DownOutlined className="chat-model-select-arrow" />}
                  placeholder="选择模型"
                  onChange={onChangeModel}
-                />
+                /> */}

                <Upload
                  className="chat-upload"
--- a/src/pages/chat/components/ChatInputH5.tsx
+++ b/src/pages/chat/components/ChatInputH5.tsx
@ -166,6 +166,7 @@ export default function ChatInputH5(props: {
  return (
    <div className="chat-input-h5-container">
      {/* 顶部附件展示 */}
+      {(attachments.length > 0 || imageUrls.length > 0) && (
        <div className="chat-input-h5-attachments">
        {attachments.map((a, i) => (
          <Tag key={i} color="blue" closable className="chat-input-h5-attachment-tag" onClose={() => setAttachments((arr) => arr.filter((_, j) => j !== i))}>
@ -185,12 +186,12 @@ export default function ChatInputH5(props: {
            />
          </div>
        ))}
-      </div>
+      </div>)}

      {/* 模型切换与工具栏 */}
      <div className="chat-input-h5-toolbar">
        <div className="chat-input-h5-toolbar-scroll">
-          <Select
+          {/* <Select
            value={activeModelValue || undefined}
            size="small"
            className="chat-input-h5-model-select"
@ -201,21 +202,16 @@ export default function ChatInputH5(props: {
            onChange={onChangeModel}
            dropdownStyle={{ minWidth: 160 }}
          />
-          <div className="chat-input-h5-toolbar-divider" />
-          <Button size="small" className="chat-input-h5-action-icon" icon={<UserOutlined />} onClick={onOpenAgents}>
-            智能体
+          <div className="chat-input-h5-toolbar-divider" /> */}
+          <Button size="small" title="智能体" className="chat-input-h5-action-icon" icon={<UserOutlined />} onClick={onOpenAgents}>
          </Button>
-          <Button size="small" className="chat-input-h5-action-icon" disabled={!hasAgent} icon={<UnorderedListOutlined />} onClick={onOpenOutline}>
-            大纲
+          <Button size="small" title="大纲" className="chat-input-h5-action-icon" disabled={!hasAgent} icon={<UnorderedListOutlined />} onClick={onOpenOutline}>
          </Button>
-          <Button size="small" className="chat-input-h5-action-icon" disabled={!hasId} icon={<HistoryIcon />} onClick={onOpenHistory}>
-            历史
+          <Button size="small" title="历史" className="chat-input-h5-action-icon" disabled={!hasId} icon={<HistoryIcon />} onClick={onOpenHistory}>
          </Button>
-          <Button size="small" className="chat-input-h5-action-icon" disabled={!hasId} icon={<NewChatIcon />} onClick={onNewSession}>
-            新建
+          <Button size="small" title="新建" className="chat-input-h5-action-icon" disabled={!hasId} icon={<NewChatIcon />} onClick={onNewSession}>
          </Button>
-          <Button size="small" className="chat-input-h5-action-icon" icon={<BookOutlined />} onClick={onOpenTpl}>
-            模板
+          <Button size="small" title="模板" className="chat-input-h5-action-icon" icon={<BookOutlined />} onClick={onOpenTpl}>
          </Button>
        </div>
      </div>
--- a/src/pages/chat/components/ChatPageH5.tsx
+++ b/src/pages/chat/components/ChatPageH5.tsx
@ -88,9 +88,13 @@ export default function ChatPageH5({ logic }: { logic: ChatPageLogicOutput }) {

      <section className="chat-main h5-chat-main">
        {!agent ? (
-          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Empty description="请选择一个智能体开始对话" />
-          </div>
+          <AgentSidebar
+            isSidebar={false}
+            agentList={agentList}
+            activeAgentId={id}
+            onCreate={() => navigate('/agents/new')}
+            onSelect={(aid) => navigate(`/chat/${aid}`)}
+          />
        ) : (
          <>
            <ChatHeader
@ -126,8 +130,6 @@ export default function ChatPageH5({ logic }: { logic: ChatPageLogicOutput }) {
                }}
              />
            </div>
-          </>
-        )}
            <ChatInputH5
              input={sender.input}
              setInput={sender.setInput}
@ -160,6 +162,8 @@ export default function ChatPageH5({ logic }: { logic: ChatPageLogicOutput }) {
              hasId={!!id}
              showActions={false}
            />
+          </>
+        )}
      </section>

      <ChatDrawers
--- a/src/styles.css
+++ b/src/styles.css
@ -389,7 +389,6 @@ body {
  background: var(--color-surface);
  border-radius: 14px;
  padding: 20px;
-  border: 1px solid var(--color-border);
  height: 100%;
  display: flex;
  flex-direction: column;
@ -398,6 +397,13 @@ body {
  box-shadow: var(--shadow-xs);
 }

+.is-h5 {
+  .agent-card {
+    padding: 12px 12px 0;
+    gap: 4px;
+  }
+}
+
 .agent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
@ -1220,11 +1226,19 @@ body {
  overflow-y: auto;
  padding: 12px;
  background: var(--color-surface);
-  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
 }

+.is-h5-panel {
+  .agent-model-dropdown-panel {
+    padding: 8px;
+  }
+  .agent-model-checkbox-item {
+    padding: 8px;
+  }
+}
+
 .agent-model-checkbox-group {
  display: flex;
  flex-direction: column;
@ -1335,6 +1349,12 @@ body {
  margin-bottom: 16px;
 }

+.is-h5 {
+  .monica-card {
+    border: 0;
+  }
+}
+
 .monica-header {
  height: 56px;
  border-bottom: 1px solid var(--color-border);
@ -1382,6 +1402,17 @@ body {
  padding: 22px;
 }

+.is-h5 {
+  .agent-editor-pane {
+    border-radius: 12px;
+    padding: 8px;
+    box-shadow: none;
+  }
+  .agent-editor-pane-body {
+    padding: 0;
+  }
+}
+
 .agent-editor-pane-header {
  display: flex;
  align-items: flex-start;
@ -1419,11 +1450,10 @@ body {
 }

 .agent-editor-intro {
-  border-radius: 18px;
-  padding: 16px 18px;
+  border-radius: 16px;
+  padding: 12px;
  background: linear-gradient(135deg, rgba(236,253,245,0.92) 0%, rgba(240,249,255,0.92) 100%);
-  border: 1px solid rgba(8, 145, 178, 0.12);
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }

 .agent-editor-intro-title {
@ -1446,6 +1476,14 @@ body {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
 }

+.is-h5 {
+  .agent-editor-surface {
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+  }
+}
+
 .agent-editor-prompt-wrap {
  padding: 12px;
 }
@ -1469,12 +1507,6 @@ body {
  margin-bottom: 20px;
 }

-.agent-editor-modal-card {
-  border-radius: 12px;
-  border: 1px solid rgba(148, 163, 184, 0.14);
-  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
-}
-
 .agent-editor-avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));