wmp/juip-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动静态IP & 帮助教程 手机端适配

Browse Source
This commit is contained in:
Eamon
2026-08-26 16:55:22 +08:00
parent 5007cd9f51
commit ff56fbd7c3
9 changed files with 63 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/home/help/index.tsx
View File

@@ -108,19 +108,19 @@ export default function HelpPage() {
</div>
</div>
<div className="flex gap-8">
<aside className="w-52 shrink-0">
<nav className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden sticky top-28">
<ul>
<div className="flex flex-col md:flex-row gap-6 md:gap-8">
<aside className="w-full md:w-52 md:shrink-0">
<nav className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden md:sticky md:top-28">
<ul className="flex overflow-x-auto scrollbar-hide md:block">
{CATEGORIES.map(cat => (
<li key={cat.id}>
<li key={cat.id} className="shrink-0">
<button
onClick={() => {
setActiveCategoryId(cat.id)
setSelectedArticle(null)
}}
className={cn(
"w-full text-left px-5 py-3 text-sm transition-colors flex items-center justify-between",
"w-full text-left px-5 py-3 text-sm transition-colors flex items-center justify-between whitespace-nowrap",
activeCategoryId === cat.id
? "bg-blue-50 text-blue-600 font-medium cursor-pointer"
: "text-gray-600 hover:bg-gray-50 cursor-pointer",
@@ -194,7 +194,7 @@ function ArticleList({
onArticleClick: (article: Article) => void
}) {
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-8">
{articles.length === 0 ? (
<div className="text-center py-16 text-gray-400">
<SearchIcon className="size-12 mx-auto mb-4 opacity-30" />
@@ -250,7 +250,7 @@ function ArticleDetail({
}, [article.content])
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-8">
<nav className="flex items-center gap-2 text-sm text-gray-400 mb-6">
{categoryName && (
<>
@@ -268,9 +268,8 @@ function ArticleDetail({
{/* biome-ignore lint/a11y/useMediaCaption: 教程视频无字幕文件 */}
<video
controls
height={500}
src={videoUrl}
className="max-w-full mx-auto rounded-lg"
className="w-full h-auto max-w-full mx-auto rounded-lg"
/>
</div>
)}
@@ -278,8 +277,8 @@ function ArticleDetail({
ref={contentRef}
className="prose prose-sm max-w-none text-gray-700 leading-relaxed [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-gray-800 [&_h3]:mt-6 [&_h3]:mb-3 [&_h4]:text-base [&_h4]:font-medium [&_h4]:text-gray-800 [&_h4]:mt-4 [&_h4]:mb-2 [&_p]:mb-3 [&_pre]:bg-gray-50 [&_pre]:p-4 [&_pre]:rounded-lg [&_pre]:text-sm [&_code]:bg-gray-100 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm [&_strong]:text-gray-800"
/>
<div className="mt-12 pt-6 border-t border-gray-100 flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="mt-12 pt-6 border-t border-gray-100 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div className="min-w-0">
{prev ? (
<button
onClick={onPrev}
@@ -292,7 +291,7 @@ function ArticleDetail({
<span className="text-sm text-gray-300">已是第一篇</span>
)}
</div>
<div className="flex-1 min-w-0 text-right">
<div className="min-w-0 md:text-right">
{next ? (
<button
onClick={onNext}