Skip to content

Restored the document file and modified the scrolling implementation … #1399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
benjamin-747 merged 2 commits into from
Sep 2, 2025
Merged

Restored the document file and modified the scrolling implementation … #1399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
09603a9
Restored the document file and modified the scrolling implementation …
martinwq997 Sep 1, 2025
02fff25
Merge branch 'main' into main
genedna Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ const CratePage = () => {
<title>Crate Info - {crateName || 'Crate'}</title>
</Head>
<CrateInfoLayout>
<div className="flex justify-center">
<div className="flex justify-center pb-8">
<div className="w-[1370px] px-8 py-4">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
{/* 左侧内容区域 - 占据2列 */}
Expand Down
18 changes: 10 additions & 8 deletions moon/apps/web/pages/[org]/rust/rust-ecosystem/crate-info/[crateName]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,11 @@ const CrateInfoLayoutComponent = ({ children }: CrateInfoLayoutProps) => {
], [nsfront, crateName, version]);

return (
<div className="min-h-screen bg-[#F4F4F5] flex flex-col">
{/* 搜索栏 */}
<div className="w-full flex justify-center mb-0.5" style={{ background: '#FFF' }}>
<div className="h-screen bg-[#F4F4F5] flex flex-col">
{/* 搜索栏 - 固定在顶部 */}
<div className="w-full flex justify-center flex-shrink-0" style={{ background: '#FFF' }}>
<div
className="flex items-center sticky top-0 z-20"
className="flex items-center"
style={{
width: '1680px',
height: '53px',
Expand Down Expand Up @@ -120,8 +120,8 @@ const CrateInfoLayoutComponent = ({ children }: CrateInfoLayoutProps) => {
/>
</div>

{/* 分类标签和版本选择区域 */}
<div className="w-full flex justify-center" style={{ background: '#FFF' }}>
{/* 分类标签和版本选择区域 - 固定在搜索栏下方 */}
<div className="w-full flex justify-center flex-shrink-0" style={{ background: '#FFF' }}>
<div style={{ width: '1370px', paddingLeft: 32, paddingRight: 32, paddingTop: 24 }}>
{/* Crate信息 */}
<div className="flex items-center justify-between mb-6">
Expand Down Expand Up @@ -231,8 +231,10 @@ const CrateInfoLayoutComponent = ({ children }: CrateInfoLayoutProps) => {
</div>
</div>

{/* 主要内容区域 */}
{children}
{/* 可滚动内容区域 */}
<div className="flex-1 overflow-auto" style={{ background: '#F4F4F5' }}>
{children}
</div>
</div>
);
};
Expand Down
24 changes: 16 additions & 8 deletions moon/apps/web/pages/[org]/rust/rust-ecosystem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function RustEcosystemPage() {
id: 107,
title: 'CVE-2023-12345:示例漏洞描述',
tag: { text: '由国际安全组织报告', color: 'blue' },
detail: '该漏洞由国际安全组织披露，建议关注官方通告。',
detail: '该漏洞由国际安全组织披露，建议关注官方通告。',
},
]

Expand All @@ -73,20 +73,28 @@ export default function RustEcosystemPage() {
<Head>
<title>Crate Ecosystem</title>
</Head>
<div className="min-h-screen h-auto w-full bg-white">
<div className="h-screen overflow-auto">
{/* 顶部搜索区，带背景图 */}
<div
className="w-full overflow-hidden mb-6 flex flex-col justify-center items-center"
className="w-full overflow-hidden mb-6 flex flex-col justify-center items-center relative"
style={{
backgroundImage: 'url(/rust/rust-ecosystem/search-bg.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
height: '160px',
minHeight: '160px',
}}
>
<div className="flex flex-col items-center justify-center w-full h-full backdrop-blur-sm bg-white/70">
{/* 背景图层 */}
<div
className="absolute inset-0"
style={{
backgroundImage: 'url(/rust/rust-ecosystem/search-bg.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundAttachment: 'fixed',
Comment thread
martinwq997 marked this conversation as resolved.
}}
/>
{/* 内容层 */}
<div className="flex flex-col items-center justify-center w-full h-full backdrop-blur-sm bg-white/70 relative z-10">

<div className="flex justify-center w-full">
<div className="relative flex items-center w-full max-w-4xl" style={{ padding: '0 8px' }}>
Expand Down
241 changes: 124 additions & 117 deletions moon/apps/web/pages/[org]/rust/rust-ecosystem/search/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,11 +160,11 @@ export default function SearchResultsPage() {
<Head>
<title>Search Results - Rust Ecosystem</title>
</Head>
<div className="min-h-screen w-full bg-white">
{/* 搜索栏 */}
<div className="w-full flex justify-center mb-4" style={{ background: '#FFF' }}>
<div className="h-screen flex flex-col">
{/* 搜索栏 - 固定在顶部 */}
<div className="w-full flex justify-center flex-shrink-0" style={{ background: '#FFF' }}>
<div
className="flex items-center sticky top-0 z-20"
className="flex items-center"
style={{
width: '1680px',
height: '43px',
Expand All @@ -178,14 +178,15 @@ export default function SearchResultsPage() {
}}
>
<form onSubmit={handleSearch} className="flex-1 max-w-xl ml-8">
<div className="relative ml-10 mt-5">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<div className="relative ml-0 mt-0">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" style={{ transform: 'translate(20px, 1px)' }}>
Comment thread
martinwq997 marked this conversation as resolved.
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
</div>
<input
type="text"
placeholder="Search..."
className="block w-full pl-10 pr-3 py-2 border-0 focus:ring-0 focus:outline-none bg-transparent text-gray-900 placeholder-gray-500"
style={{ transform: 'translate(20px, 1px)' }}
Comment thread
martinwq997 marked this conversation as resolved.
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
Expand All @@ -206,10 +207,9 @@ export default function SearchResultsPage() {
/>
</div>

{/* 分类标签和搜索结果区域 */}
<div className="w-full flex justify-center" style={{ background: '#F4F4F5' }}>
{/* 分类标签 - 固定在搜索栏下方 */}
<div className="w-full flex justify-center flex-shrink-0" style={{ background: '#F4F4F5' }}>
<div style={{ width: '1370px', paddingLeft: 32, paddingRight: 32, paddingTop: 24 }}>
{/* 分类标签 */}
<div className="flex space-x-8 mb-0">
{tabs.map((tab) => (
<button
Expand All @@ -234,118 +234,125 @@ export default function SearchResultsPage() {
</button>
))}
</div>
</div>
</div>

{/* 搜索结果列表容器 */}
<div style={{
background: 'white',
borderRadius: '8px',
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
overflow: 'hidden'
}}>
{/* 标题和结果数量 */}
<div className="flex items-center justify-between p-3 border-b border-gray-200">
<h1
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
color: '#1c2024',
textOverflow: 'ellipsis',
fontFamily: '"HarmonyOS Sans SC"',
fontSize: '28px',
fontStyle: 'normal',
fontWeight: 500,
lineHeight: '24px',
letterSpacing: '0'
}}
>
ALL
</h1>
<span
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
color: '#4b68ff',
textAlign: 'right',
textOverflow: 'ellipsis',
fontFamily: '"SF Pro"',
fontSize: '16px',
fontStyle: 'normal',
fontWeight: 400,
lineHeight: '24px',
letterSpacing: '0'
}}
>
Total 56 results
</span>
</div>
{/* 可滚动内容区域 */}
<div className="flex-1 overflow-auto" style={{ background: '#F4F4F5' }}>
<div className="w-full flex justify-center pb-8">
<div style={{ width: '1370px', paddingLeft: 32, paddingRight: 32, paddingTop: 24 }}>
{/* 搜索结果列表容器 */}
<div style={{
background: 'white',
borderRadius: '8px',
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
overflow: 'hidden'
}}>
{/* 标题和结果数量 */}
<div className="flex items-center justify-between p-3 border-b border-gray-200">
<h1
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
color: '#1c2024',
textOverflow: 'ellipsis',
fontFamily: '"HarmonyOS Sans SC"',
fontSize: '28px',
fontStyle: 'normal',
fontWeight: 500,
lineHeight: '24px',
letterSpacing: '0'
}}
>
ALL
</h1>
<span
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
color: '#4b68ff',
textAlign: 'right',
textOverflow: 'ellipsis',
fontFamily: '"SF Pro"',
fontSize: '16px',
fontStyle: 'normal',
fontWeight: 400,
lineHeight: '24px',
letterSpacing: '0'
}}
>
Total 56 results
</span>
</div>

<div className="space-y-0">
{searchResults.map((item, index) => (
<div
key={item.id}
className="transition-colors cursor-pointer"
style={{
display: 'flex',
minWidth: '100px',
minHeight: '44px',
padding: '8px 16px',
alignItems: 'center',
gap: '8px',
flex: '1 0 0',
alignSelf: 'stretch',
background: '#ffffff00',
borderBottom: index !== searchResults.length - 1 ? '1px solid #e5e7eb' : 'none'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#EBEBEB'
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = '#ffffff00'
}}
>
<div className="flex flex-col space-y-2">
<span className="text-sm text-gray-500">
{item.type}
</span>
<h3
className="text-lg font-medium text-blue-600 hover:text-blue-800 cursor-pointer"
onClick={() => router.push({
pathname: `/${router.query.org}/rust/rust-ecosystem/crate-info/${item.name}`,
query: {
crateName: item.name,
version: item.version || '1.0.0'
}
})}
>
{item.name}
</h3>
<p className="text-sm text-gray-500">
{item.details}
</p>
<div className="space-y-0">
{searchResults.map((item, index) => (
<div
key={item.id}
className="transition-colors cursor-pointer"
style={{
display: 'flex',
minWidth: '100px',
minHeight: '44px',
padding: '8px 16px',
alignItems: 'center',
gap: '8px',
flex: '1 0 0',
alignSelf: 'stretch',
background: '#ffffff00',
borderBottom: index !== searchResults.length - 1 ? '1px solid #e5e7eb' : 'none'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#EBEBEB'
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = '#ffffff00'
}}
>
<div className="flex flex-col space-y-2">
<span className="text-sm text-gray-500">
{item.type}
</span>
<h3
className="text-lg font-medium text-blue-600 hover:text-blue-800 cursor-pointer"
onClick={() => router.push({
pathname: `/${router.query.org}/rust/rust-ecosystem/crate-info/${item.name}`,
query: {
crateName: item.name,
version: item.version || '1.0.0'
}
})}
>
{item.name}
</h3>
<p className="text-sm text-gray-500">
{item.details}
</p>
</div>
</div>
</div>
))}
</div>
))}
</div>

{/* 分页 */}
<div className="flex justify-center items-center space-x-4 mt-8">
<button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Previous
</button>
<span className="text-lg font-bold text-gray-900">1</span>
<button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
Next
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
{/* 分页 */}
<div className="flex justify-center items-center space-x-4 mt-8 mb-8">
<button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Previous
</button>
<span className="text-lg font-bold text-gray-900">1</span>
<button className="flex items-center text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
Next
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</div>
Expand Down
Loading