feat:增加菜单栏模块

2025-11-14 17:29:54 +08:00
parent 3055f99aab
commit 94849be69c
17 changed files with 1376 additions and 252 deletions
--- a/lib/pages/markdown_page.dart
+++ b/lib/pages/markdown_page.dart
@@ -0,0 +1,122 @@
+import 'package:blog_app/utils/http_util.dart';
+import 'package:flutter/material.dart';
+import 'package:markdown_widget/config/toc.dart';
+import 'package:markdown_widget/widget/markdown.dart';
+
+class MarkdownPage extends StatefulWidget {
+  const MarkdownPage({super.key});
+
+  @override
+  State<MarkdownPage> createState() => _MarkdownPageState();
+}
+
+class _MarkdownPageState extends State<MarkdownPage> {
+  final tocController = TocController();
+  bool _showToc = false;
+  late String markdownData = '';
+
+  Widget _buildTocPanel() => AnimatedOpacity(
+    opacity: _showToc ? 1.0 : 0.0,
+    duration: const Duration(milliseconds: 300),
+    child: Visibility(
+      visible: _showToc,
+      child: Align(
+        alignment: Alignment.bottomRight,
+        child: Container(
+          width: 250,
+          height: 400,
+          margin: const EdgeInsets.only(bottom: 60, right: 60),
+          // 调整位置在按钮左侧
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(12),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.2),
+                blurRadius: 8,
+                offset: const Offset(0, 4),
+              ),
+            ],
+            border: Border.all(color: Colors.grey[300]!),
+          ),
+          child: Column(
+            children: [
+              // 标题栏
+              Container(
+                padding: const EdgeInsets.all(12),
+                decoration: BoxDecoration(
+                  color: Colors.grey[100],
+                  borderRadius: const BorderRadius.only(
+                    topLeft: Radius.circular(12),
+                    topRight: Radius.circular(12),
+                  ),
+                ),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    const Text(
+                      '目录',
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 16,
+                      ),
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.close, size: 20),
+                      onPressed: () => setState(() => _showToc = false),
+                    ),
+                  ],
+                ),
+              ),
+              Expanded(child: TocWidget(controller: tocController)),
+            ],
+          ),
+        ),
+      ),
+    ),
+  );
+
+  Widget buildMarkdown() =>
+      MarkdownWidget(data: markdownData, tocController: tocController);
+
+  @override
+  void initState() {
+    super.initState();
+    // 初始加载数据
+    _loadData();
+  }
+
+  Future<void> _loadData() async {
+    final result = await HttpUtil().get("/condition");
+
+    setState(() {
+      markdownData = result[0]['content'];
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('文档')),
+      body: Padding(
+        padding: EdgeInsets.all(16),
+        child: Stack(
+          children: [
+            // 主内容
+            buildMarkdown(),
+
+            // 悬浮TOC面板
+            _buildTocPanel(),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () => setState(() => _showToc = !_showToc),
+        child: Icon(_showToc ? Icons.close : Icons.list),
+        mini: true,
+        backgroundColor:
+        _showToc ? Colors.grey : Theme.of(context).primaryColor,
+      ),
+    );
+  }
+}