sync from local backup
This commit is contained in:
chunyu
@@ -0,0 +1,439 @@
|
||||
/* Document 页面样式 - 已通过 common-page.css 提供美化样式 */
|
||||
|
||||
/* 文档页面特定样式 */
|
||||
|
||||
.document-page-hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 80px 40px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.document-page-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.document-page-hero h1 {
|
||||
font-size: 44px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.document-page-hero p {
|
||||
font-size: 20px;
|
||||
opacity: 0.95;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 文档头部 */
|
||||
.doc-header {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.doc-cover-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.doc-cover {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.doc-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.doc-info-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.doc-description {
|
||||
font-size: 16px;
|
||||
color: #64748b;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.doc-meta {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.doc-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.doc-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 标签页导航 */
|
||||
.doc-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-tab {
|
||||
padding: 14px 28px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.doc-tab:hover {
|
||||
background: #f8fafc;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.doc-tab.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* 内容区块 */
|
||||
.doc-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.doc-section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid #667eea;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.doc-section-content {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* 表格美化 */
|
||||
.doc-table-wrapper {
|
||||
overflow-x: auto;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-table-wrapper table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.doc-table-wrapper th {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.doc-table-wrapper td {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-table-wrapper tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* JSON 查看器美化 */
|
||||
.doc-json-viewer {
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* 代码块 */
|
||||
.doc-code-block {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-code-block code {
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* Markdown 内容 */
|
||||
.doc-markdown h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.doc-markdown h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 28px 0 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-markdown h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
.doc-markdown p {
|
||||
color: #64748b;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px 0;
|
||||
}
|
||||
|
||||
.doc-markdown ul, .doc-markdown ol {
|
||||
margin-left: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.doc-markdown li {
|
||||
color: #64748b;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 侧边栏导航 */
|
||||
.doc-sidebar-nav {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.doc-sidebar-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.doc-sidebar-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.doc-sidebar-link {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.doc-sidebar-link:hover {
|
||||
background: #f8fafc;
|
||||
color: #667eea;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.doc-sidebar-link.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 常见问题 */
|
||||
.doc-faq-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.doc-faq-item:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.doc-faq-question {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.doc-faq-question::before {
|
||||
content: 'Q';
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doc-faq-answer {
|
||||
color: #64748b;
|
||||
line-height: 1.8;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-tab:hover {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-section-title {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-section-content {
|
||||
background: #1e293b;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-table-wrapper {
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-table-wrapper td {
|
||||
border-bottom-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-table-wrapper tr:hover td {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-code-block {
|
||||
background: #0f172a;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-code-block code {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-markdown h1 {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-markdown h2 {
|
||||
color: #f1f5f9;
|
||||
border-bottom-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-markdown h3 {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-markdown p {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-markdown li {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-sidebar-nav {
|
||||
background: #1e293b;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-sidebar-title {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-sidebar-link {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-sidebar-link:hover {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-faq-item {
|
||||
background: #1e293b;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-faq-question {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-faq-answer {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-description {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-tabs {
|
||||
border-bottom-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-tab {
|
||||
color: #94a3b8;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { Flex } from "antd";
|
||||
import { Typography, Card, Anchor, Tag, Tabs } from "antd";
|
||||
import {
|
||||
BookOutlined,
|
||||
SettingOutlined,
|
||||
LinkOutlined,
|
||||
CodeOutlined,
|
||||
ToolOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useTranslation } from "@/contexts/LanguageContext";
|
||||
import useIsMobile from "@/hooks/useIsMobile";
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
const Document: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const items = [
|
||||
{
|
||||
key: "1",
|
||||
href: "#basic",
|
||||
title: t("document.navBasic"),
|
||||
icon: <BookOutlined />,
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
href: "#props",
|
||||
title: t("document.navProps"),
|
||||
icon: <SettingOutlined />,
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
href: "#slots",
|
||||
title: t("document.navSlots"),
|
||||
icon: <LinkOutlined />,
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
href: "#events",
|
||||
title: t("document.navEvents"),
|
||||
icon: <CodeOutlined />,
|
||||
},
|
||||
{
|
||||
key: "5",
|
||||
href: "#use",
|
||||
title: t("document.navUse"),
|
||||
icon: <ToolOutlined />,
|
||||
},
|
||||
];
|
||||
|
||||
const handleTabClick = (key: string) => {
|
||||
const id = key.replace("#", "");
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
};
|
||||
|
||||
const cardContent = (
|
||||
<Typography>
|
||||
<Tag>{t("document.versionTag")}</Tag> 1.0.0
|
||||
<Title level={2} id="basic">
|
||||
{t("document.sectionBasicTitle")}
|
||||
</Title>
|
||||
<Paragraph>
|
||||
<ul>
|
||||
<li>{t("document.contentOne")}</li>
|
||||
</ul>
|
||||
</Paragraph>
|
||||
|
||||
<Title level={2} id="props">
|
||||
{t("document.sectionPropsTitle")}
|
||||
</Title>
|
||||
<Paragraph>
|
||||
<Text code>attribute</Text> {t("document.optionalValueOne")}
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<ul>
|
||||
<li>
|
||||
<Text strong>{t("document.typeLabel")}</Text>
|
||||
<Text code>String</Text>
|
||||
</li>
|
||||
<li>
|
||||
<Text strong>{t("document.defaultValueLabel")}</Text>
|
||||
<Text code>false</Text>
|
||||
</li>
|
||||
</ul>
|
||||
</Paragraph>
|
||||
|
||||
<Title level={2} id="slots">
|
||||
{t("document.sectionSlotsTitle")}
|
||||
</Title>
|
||||
<Paragraph>
|
||||
<ul>
|
||||
<li>{t("document.contentOne")}</li>
|
||||
</ul>
|
||||
</Paragraph>
|
||||
|
||||
<Title level={2} id="events">
|
||||
{t("document.sectionEventsTitle")}
|
||||
</Title>
|
||||
<Paragraph>
|
||||
<ul>
|
||||
<li>{t("document.contentOne")}</li>
|
||||
</ul>
|
||||
</Paragraph>
|
||||
|
||||
<Title level={2} id="use">
|
||||
{t("document.sectionUseTitle")}
|
||||
</Title>
|
||||
<Paragraph>
|
||||
<ul>
|
||||
<li>{t("document.contentOne")}</li>
|
||||
</ul>
|
||||
</Paragraph>
|
||||
</Typography>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<div style={{ padding: "12px" }}>
|
||||
<Tabs
|
||||
items={items.map((item) => ({
|
||||
key: item.href,
|
||||
label: item.title,
|
||||
}))}
|
||||
onTabClick={handleTabClick}
|
||||
/>
|
||||
<Card style={{ marginTop: "12px" }}>{cardContent}</Card>
|
||||
</div>
|
||||
) : (
|
||||
<Flex vertical gap="medium" align="center">
|
||||
<div className="width_1000 margin_20">
|
||||
<Flex gap="large">
|
||||
<div className="width_250 sticky_top_10">
|
||||
<Anchor
|
||||
items={items}
|
||||
getContainer={() => document.getElementById("basic")!}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card className="flex_1 padding_30">{cardContent}</Card>
|
||||
</Flex>
|
||||
</div>
|
||||
</Flex>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Document;
|
||||
Reference in New Issue
Block a user