+ );
+};
+
+// IconifyPicker 组件的 Props 定义
+interface IconifyPickerProps {
+ onIconSelect: (icon: { mainCategory: string; subCategory: string; name: string }) => void; // 回调函数
+}
+
+export const IconifyPicker = ({ onIconSelect }: IconifyPickerProps) => {
+ const [mainCategories, setMainCategories] = useState
+ 私域管理系统
+ -
-
-
- Get started by editing{" "}
-
- src/pages/index.tsx -- . -
- - - Save and see your changes instantly. - -
-
-
+ ),
+ });
+ };
+
+ return (
+
+
-
-
- 欢迎使用帮助中心！
+如果您有任何问题，请随时联系我们。
+技术支持：support@example.com
+ {/* 左侧品牌区域 */}
+
+
+
+
+ {/* 中间导航菜单 */}
+
+
+ {/* 右侧操作区域 */}
+
+
+ ⚡
+
+ SaaS管理平台
+ Enterprise Edition
+
+
+ {/* 关键代码行注释：主题切换按钮，使用React Icons替代Ant Design Switch，添加增强的视觉效果 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 版本徽章 */}
+
+ <span className={styles.titleLine}>构建下一代</span>
+ <span className={`${styles.titleLine} ${styles.titleGradient}`}>SaaS智能私域生态</span>
+
+
+ {/* 描述文字 */}
+
+ 集成化企业私域管理平台，提供全链路数据洞察、智能客户运营和团队协作解决方案。
+ 助力企业构建高效的私域流量池，实现业务增长的数字化转型。
+
+
+ {/* CTA按钮组 */}
+
+
+ {/* 右侧可视化展示 */}
+
+ 现代化企业私域管理平台
+
+
+ {/* 主标题 */}
+
+ }
+ onClick={handleStartClick}
+ className={styles.primaryCtaBtn}
+ >
+ 立即开始
+
+ }
+ onClick={handleLearnMoreClick}
+ className={styles.secondaryCtaBtn}
+ >
+ 观看演示
+
+
+
+ {/* 用户统计 */}
+
+
+
+ 50K+
+ 企业用户
+
+
+
+ 99.9%
+ 系统稳定性
+
+
+
+ 24/7
+ 技术支持
+
+
+
+
+
+
+ 私域管理后台
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {coreFeatures.map((feature, index) => (
+
+
+
+ ))}
+
+
+
+
+ 核心功能特性
+
+
+ 强大的企业级功能，助力您的业务快速增长和数字化转型
+
+
+
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+
+ {feature.icon}
+
+
+ }>
+ 了解更多
+
+
+
+
+ {statsData.map((stat, index) => (
+
+
+
+ ))}
+
+
+
+
+ 数据驱动增长
+
+
+ 实时业务数据洞察，助力精准决策和持续优化
+
+
+
+
+
+
+ {stat.icon}
+
+
+ {stat.title}
+ {stat.growth}
+
+
+
+ {techFeatures.map((tech, index) => (
+
+
+
+ ))}
+
+
+ {/* 技术标签云 */}
+
+
+
+ 现代化技术栈
+
+
+ 采用最新的前端技术构建，确保高性能、高可用性和出色的用户体验
+
+
+
+
+
+ {tech.title}
+
+
+ {tech.description}
+
+
+
+ 更多技术特性
+
+ Node.js
+ React 19
+ Next.js 15
+ Ant Design 5
+ TypeScript
+ Tailwind CSS
+ MongoDB
+ Mongoose 8.x
+ Vercel
+ Docker
+ pnpm
+
+
+
+
+
+
+
+
+ 开启您的数字化转型之旅
+
+
+ 立即体验我们的现代化私域管理平台，享受30天免费试用期。
+ 专业团队为您提供一对一的咨询服务和技术支持。
+
+
+ }
+ onClick={handleStartClick}
+ className={styles.ctaPrimaryBtn}
+ >
+ 立即开始免费试用
+
+ }
+ onClick={handleLearnMoreClick}
+ className={styles.ctaSecondaryBtn}
+ >
+ 联系销售团队
+
+
+
+
+
+ ),
+ });
+ };
+
+ return (
+ 欢迎使用帮助中心！
+如果您有任何问题，请随时联系我们。
+技术支持：support@example.com
+
+ {/* 左侧品牌区域 */}
+
+
+
+
+ {/* 中间导航菜单 */}
+
+
+ {/* 右侧操作区域 */}
+
+
+ ⚡
+
+ SaaS管理平台
+ Enterprise Edition
+
+
+
+ {/* 切换主题 使用react-icons*/}
+ :
+
+
+
+
+
+
+
+
+
+
+ <span className="title-line">构建未来的</span>
+ <span className="title-line title-gradient">企业协作平台</span>
+
+
+
+ 专为现代企业打造的智能化SaaS管理平台，集成多租户架构、实时数据分析、团队协作于一体，
+
+ 助力企业实现数字化转型，提升运营效率 +
+
+
+
+
+ Version 3.0 已发布
+
+
+ + 助力企业实现数字化转型，提升运营效率 +
+ }
+ >
+ 立即开始免费试用
+
+ }
+ >
+ 观看产品演示
+
+
+
+
+
+
+ 50K+
+ 企业用户
+
+
+
+ 99.9%
+ 系统稳定性
+
+
+
+ 24/7
+ 技术支持
+
+
+
+
+
+
+ SaaS Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {coreFeatures.map((feature, index) => (
+
+
+
+ ))}
+
+
+
+
+ 为什么选择我们的平台
+
+
+ 先进的技术架构和丰富的功能特性，为您的企业提供完整的数字化解决方案
+
+
+
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+
+ {feature.icon}
+
+
+ }>
+ 了解更多
+
+
+
+
+ {statsData.map((stat, index) => (
+
+
+
+ ))}
+
+
+
+
+ 数据驱动的成功
+
+
+ 我们的平台正在帮助全球企业实现数字化转型
+
+
+
+
+
+
+ {stat.icon}
+
+
+ {stat.title}
+ {stat.growth}
+
+
+
+ {techFeatures.map((tech, index) => (
+
+
+
+ ))}
+
+
+
+
+
+ 现代化技术栈
+
+
+ 采用业界领先的技术栈，确保系统的稳定性、可扩展性和安全性
+
+
+
+
+
+ {tech.title}
+
+
+ {tech.description}
+
+
+
+ 完整技术生态
+
+ React 19
+ Next.js 15
+ Ant Design 5
+ TypeScript
+ Tailwind CSS
+ MongoDB
+ Mongoose 8.x
+ pnpm
+
+
+
+
+
+
+
+
+ 准备开始您的数字化之旅了吗？
+
+
+ 立即注册，享受30天免费试用，体验企业级SaaS管理平台的强大功能
+
+
+ }
+ className="cta-primary-btn"
+ >
+ 开始免费试用
+
+ }
+ className="cta-secondary-btn"
+ >
+ 联系销售团队
+
+
+
+
+ {/* 左侧用户信息 */}
+
+
+
+
+ {/* 右侧操作按钮 */}
+
+
+
+ {user.姓名}
+
+
+ {/* 联系信息 */}
+
+
+
+ {/* 标签信息 */}
+
+ {user.邮箱}
+
+
+ {user.电话}
+
+
+ {user.团队 ? (
+ 未分配团队
+ )}
+
+ {user.角色 ? (
+ 未分配角色
+ )}
+
+
+
+ handleEdit(user)}
+ className="hover:bg-blue-50 transition-colors w-8 h-8"
+ >
+
+
+
+
+ handleDelete(user._id)}
+ okText="确定"
+ cancelText="取消"
+ placement="left"
+ okButtonProps={{ danger: true }}
+ >
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: '联系电话',
+ dataIndex: '电话',
+ key: 'phone',
+ render: (phone) => (
+
+ {record.姓名}
+
+ {record.邮箱}
+
+
+
+ {/* 用户列表卡片 */}
+
+
+ 用户列表管理
+
+
+ }
+ className="shadow-md hover:shadow-lg transition-shadow flex-1 flex flex-col"
+ extra={
+
+ setSearchText(e.target.value)}
+ prefix={
+ }
+ styles={{
+ body: {
+ padding: isMobile ? '8px' : '16px',
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 1,
+ overflow: 'hidden',
+ }
+ }}
+ >
+ {/* 桌面端显示表格 */}
+ {!isMobile ? (
+
+ `共 ${total} 条记录`,
+ defaultPageSize: 10,
+ pageSizeOptions: ['10', '20', '50'],
+ }}
+ size='middle'
+ columns={columns}
+ dataSource={filteredUsers}
+ rowKey="_id"
+ rowClassName="hover:bg-blue-50"
+ className="rounded-lg overflow-hidden flex-1"
+ />
+
+ ) : (
+ /* 移动端显示卡片列表 */
+
+ - 用户列表
共3个用户
}
+ bordered
+ dataSource={tableData}
+ renderItem={(item) => (
+ 年龄: {item.age}
+ 这是气泡卡片的内容
+可以包含更多详细信息
+ + } + title="气泡卡片标题" + trigger="click" + > + +
+
+
+ 标签页
+ 标签页 (其他示例)
+
+
+
+
+ ),
+ },
+ {
+ label: '可关闭标签',
+ key: '2',
+ closable: true,
+ children: (
+ 这是带有图标的标签页内容。
+可以在标签页中使用各种组件。
+
+
+ ),
+ },
+ {
+ label: '禁用标签',
+ key: '3',
+ disabled: true,
+ children: 这个标签页可以被关闭。
+ +这个标签页被禁用了。
, + }, + ]} + /> +
+ 步骤条
+
+
+
+ 漫游式引导
+
+
+
+ setIsTourOpen(false)}
+ steps={[
+ {
+ title: '欢迎使用',
+ description: '这是 Ant Design 组件测试页面，让我们开始探索各种组件！',
+ target: () => document.getElementById('tour-start-btn') || document.body,
+ },
+ {
+ title: '侧边栏导航',
+ description: '这里是侧边栏导航，包含了主要的菜单项。',
+ target: () => document.querySelector('.ant-layout-sider') as HTMLElement || document.body,
+ },
+ {
+ title: '组件展示区',
+ description: '这里展示了各种 Ant Design 组件的使用示例。',
+ target: () => document.querySelector('.ant-layout-content') as HTMLElement || document.body,
+ },
+ ]}
+ />
+
+
+ 折叠面板
+ 这是面板1的内容。可以展开和折叠。,
+ },
+ {
+ key: '2',
+ label: '面板标题2',
+ children: 折叠面板 (更多示例)
+
+
+ ),
+ },
+ {
+ key: '2',
+ label: '包含复杂内容的面板',
+ children: (
+ 这是面板2的内容。支持多个面板同时展开。
, + }, + { + key: '3', + label: '面板标题3', + children:这是面板3的内容。用于组织大量信息。
, + }, + ]} + /> + +这是使用items方式创建的折叠面板。
+Items方式是推荐的使用方法。
+
+
+ ),
+ },
+ {
+ key: '3',
+ label: '禁用的面板',
+ children: Panel可以包含更复杂的内容结构。
+ +这个面板被禁用了。
, + collapsible: 'disabled', + }, + ]} + /> + + +
+ 轮播图
+
+
+
+
+
+
+ 轮播图 1
+
+
+
+
+ 轮播图 2
+
+
+
+
+ 轮播图 3
+
+
+
+
+ 轮播图 4
+
+
+ 分段控制器
+
+
+
+
+
+ 标签和徽章
+
+
+
+
+ 默认标签
+ 蓝色标签
+ 绿色标签
+ 红色标签
+
+
+
+
+
+
+
+ 二维码
+
+
+
+
+
+ 进度条
+
+
+
+
+
+
+
+
+
+
+ 分页器
+
+ `${range[0]}-${range[1]} / ${total} 条记录`
+ }
+ onChange={(page, size) => {
+ setCurrentPage(page);
+ setPageSize(size || 10);
+ }}
+ onShowSizeChange={(current, size) => {
+ setCurrentPage(current);
+ setPageSize(size);
+ }}
+ />
+
+
+
+ 结果页
+
+ 返回控制台
+ ,
+ ,
+ ]}
+ />
+
+
+
+ 骨架屏
+
+
+
+ 空状态
+
+
+ 弹性布局 (Flex)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 分割器 (Splitter)
+
+
+
+
+
+
+
+
+
+
+
+ 左侧面板
+
+
+ 右侧面板
+
+
+ 栅格系统 (Grid)
+ Grid 响应式布局
+
+
+
+
+
+
+
+ col-6
+
+ col-6
+
+ col-6
+
+ col-6
+
+
+
+
+
+ 响应式 Grid 1
+
+ 响应式 Grid 2
+
+ 响应式 Grid 3
+
+ 响应式 Grid 4
+
+ 响应式 Grid 5
+
+ 响应式 Grid 6
+
+
+ 固钉组件 (Affix)
+
+
+
+
+
+
+ 这是模态框的内容。
+模态框用于显示临时内容或收集用户输入。
+这是抽屉的内容。
+抽屉通常用于显示详细信息或表单。
+