toggleSection(section.title)}
- className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${expanded[section.title] && !collapsed ? 'bg-blue-50' : 'hover:bg-slate-50'}`}
+ className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${finalExpandedSections[section.title] && !collapsed ? 'bg-blue-50' : 'hover:bg-slate-50'}`}
>
-
- ▸
+
+
{!collapsed && (
@@ -67,17 +189,22 @@ export default function Sidebar({collapsed = false, selected, onSelect, onToggle
)}
- {expanded[section.title] && (
+ {finalExpandedSections[section.title] && (
{section.items.map((item) => {
- const active = selected === item.key
+ const isActive = currentItemKey === item.key
+ const href = getItemHref(section.sectionKey, item.key)
+
return (
- - onSelect?.(item.key)}
- className={`pl-8 py-2 text-base cursor-pointer transition-colors ${active ? 'text-blue-600 font-semibold' : 'text-slate-700 hover:text-slate-900'}`}
- >
- {item.label}
+
-
+
+ {item.label}
+
)
})}
diff --git a/src/app/(home)/help/tutorials/[section]/[key]/page.tsx b/src/app/(home)/help/tutorials/[section]/[key]/page.tsx
new file mode 100644
index 0000000..509d5b0
--- /dev/null
+++ b/src/app/(home)/help/tutorials/[section]/[key]/page.tsx
@@ -0,0 +1,69 @@
+import Wrap from '@/components/wrap'
+
+// 只导入真正需要的 MDX 文件（按需导入，避免一次性导入太多）
+interface Props {
+ params: Promise<{section: string, key: string}>
+}
+
+// 根据 key 返回对应的组件
+async function getContentComponent(key: string) {
+ switch (key) {
+ case 'browser-proxy':
+ const {default: BrowserProxy} = await import('@/docs/browser-proxy.mdx')
+ return BrowserProxy
+ case 'package-operations':
+ const {default: PackageOperations} = await import('@/docs/package-operations.mdx')
+ return PackageOperations
+ case 'ios-proxy':
+ const {default: IosProxy} = await import('@/docs/ios-proxy.mdx')
+ return IosProxy
+ case 'windows7-proxy':
+ const {default: Windows7Proxy} = await import('@/docs/windows7-proxy.mdx')
+ return Windows7Proxy
+ default:
+ return null
+ }
+}
+
+// 标题
+function getTitle(key: string) {
+ const titleMap: Record = {
+ 'browser-proxy': '浏览器设置代理教程',
+ 'package-operations': '套餐续费、合并、修改时效、补重操作',
+ 'fixed-package': '长效固定套餐操作手册',
+ 'ios-proxy': 'iOS设置代理教程',
+ 'windows10-proxy': 'Windows10电脑设置代理教程',
+ 'android-proxy': '安卓手机设置代理教程',
+ 'windows7-proxy': 'Windows7电脑设置代理教程',
+ 'mac-proxy': 'MAC设置代理教程',
+ 'firefox-proxy': '火狐浏览器怎么设置HTTP/Socks5代理服务器',
+ 'socks5-usage': '怎么使用Socks5代理IP上网',
+ 'http-notes': '使用HTTP代理注意的点',
+ }
+ return titleMap[key] || '教程'
+}
+
+export default async function TutorialContentPage({params}: Props) {
+ const {key} = await params
+
+ // 动态获取组件
+ const Content = await getContentComponent(key)
+ const title = getTitle(key)
+
+ return (
+
+
+
+ {Content ? (
+
+ ) : (
+
+
{title}
+
此页面内容开发中...
+
+ )}
+
+
+ {resource.resource_no}
+
到期时间：
- {format(resource.short.expire, 'yyyy-MM-dd HH:mm')}
+ {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm')}
- {intlFormatDistance(resource.short.expire, new Date())}
+ {intlFormatDistance(resource.short.expire_at, new Date())}
)}
@@ -407,6 +414,9 @@ function SelectResource() {
{name(resource)}
+