books

packages/components/lib/toly_ui/navigation/menu_meta.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/cupertino.dart';
+
+class MenuMeta {
+  // 标签
+  final String label;
+
+  final String? path;
+
+  // 图标数据
+  final IconData icon;
+
+  // 图标颜色
+  final Color? color;
+
+  const MenuMeta({
+    required this.label,
+    this.path,
+    required this.icon,
+    this.color,
+  });
+}

packages/components/lib/toly_ui/navigation/toly_breadcrumb.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/gestures/events.dart';
+
+class TolyBreadcrumb extends StatelessWidget {
+  final List<BreadcrumbItem> items;
+  final double fontSize;
+  final ValueChanged<BreadcrumbItem>? onTapItem;
+
+  const TolyBreadcrumb({super.key, required this.items,  this.onTapItem, this.fontSize=14});
+
+  @override
+  Widget build(BuildContext context) {
+    List<Widget> children = [];
+
+    for (int i = 0; i < items.length; i++) {
+      children.add(TolyBreadcrumbItem(
+        fontSize: fontSize,
+        item: items[i], onTapItem: onTapItem,
+      ));
+      if (i != items.length - 1) {
+        children.add(Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 4.0),
+          child: Text(
+            '/',
+            style: TextStyle(color: Colors.grey),
+          ),
+        ));
+      }
+    }
+
+    return Wrap(
+      children: children,
+    );
+  }
+}
+
+class TolyBreadcrumbItem extends StatefulWidget {
+  final BreadcrumbItem item;
+  final double fontSize;
+
+  final ValueChanged<BreadcrumbItem>? onTapItem;
+  const TolyBreadcrumbItem({super.key, required this.item, required this.onTapItem, required this.fontSize});
+
+  @override
+  State<TolyBreadcrumbItem> createState() => _TolyBreadcrumbItemState();
+}
+
+class _TolyBreadcrumbItemState extends State<TolyBreadcrumbItem> {
+
+  bool _hover = false;
+
+  @override
+  Widget build(BuildContext context) {
+    bool hasTarget = (widget.item.to != null);
+    Color? color = (_hover&&hasTarget)?Colors.blue:null;
+    MouseCursor cursor = hasTarget?SystemMouseCursors.click:SystemMouseCursors.basic;
+
+    if(widget.item.active) {
+      color = null;
+      cursor = SystemMouseCursors.basic;
+    }
+
+    TextStyle style = TextStyle(
+      fontSize: widget.fontSize,
+      fontWeight: hasTarget ? FontWeight.bold : null,
+      color: color
+    );
+
+    return MouseRegion(
+      cursor: cursor,
+      onEnter: _onEnter,
+      onExit: _onExit,
+      child: GestureDetector(
+          onTap: () {
+            if(!widget.item.active){
+              widget.onTapItem?.call(widget.item);
+            }
+          },
+          child: Text(widget.item.label, style: style)),
+    );
+  }
+
+  void _onEnter(PointerEnterEvent event) {
+    setState(() {
+      _hover = true;
+    });
+  }
+
+  void _onExit(PointerExitEvent event) {
+    setState(() {
+      _hover = false;
+    });
+  }
+}
+
+class BreadcrumbItem {
+  final String? to;
+  final String label;
+  final bool active;
+
+  BreadcrumbItem( {this.to, required this.label,this.active=false,});
+}

packages/components/lib/toly_ui/navigation/toly_navigation_rail.dart

@@ -0,0 +1,146 @@
+import 'package:flutter/material.dart';
+
+import 'menu_meta.dart';
+
+class TolyNavigationRail extends StatelessWidget {
+  final ValueChanged<int> onDestinationSelected;
+  final Color backgroundColor;
+  final int? selectedIndex;
+  final Widget? leading;
+  final Widget? tail;
+  final List<MenuMeta> items;
+  const TolyNavigationRail({
+    Key? key,
+    required this.onDestinationSelected,
+    required this.selectedIndex,
+    required this.items,
+    this.leading,
+    this.tail,
+    required this.backgroundColor,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 64,
+      color: backgroundColor,
+      child: Column(
+        children: [
+          if(leading!=null) leading!,
+          Expanded(
+              child: LeftNavigationMenu(
+            items: items,
+            selectedIndex: selectedIndex,
+            onTapItem: onDestinationSelected,
+          )),
+          if(tail!=null) tail!,
+        ],
+      ),
+    );
+  }
+}
+
+class LeftNavigationMenu extends StatelessWidget {
+  final List<MenuMeta> items;
+  final ValueChanged<int> onTapItem;
+
+  final int? selectedIndex;
+
+  const LeftNavigationMenu(
+      {Key? key,
+      required this.items,
+      required this.selectedIndex,
+      required this.onTapItem})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: items.asMap().keys.map((int index) {
+        return LeftNavigationBarItemWidget(
+          item: items[index],
+          selected: index == selectedIndex,
+          onTap: () {
+            onTapItem.call(index);
+          },
+        );
+      }).toList(),
+    );
+  }
+}
+
+class LeftNavigationBarItemWidget extends StatefulWidget {
+  final MenuMeta item;
+  final bool selected;
+  final VoidCallback onTap;
+
+  const LeftNavigationBarItemWidget(
+      {Key? key,
+      required this.item,
+      required this.selected,
+      required this.onTap})
+      : super(key: key);
+
+  @override
+  State<LeftNavigationBarItemWidget> createState() =>
+      _LeftNavigationBarItemWidgetState();
+}
+
+class _LeftNavigationBarItemWidgetState
+    extends State<LeftNavigationBarItemWidget> {
+  bool _hover = false;
+
+  @override
+  Widget build(BuildContext context) {
+    Color? bgColor;
+    Color iconColor;
+    if (widget.selected) {
+      bgColor = Colors.white.withOpacity(0.2);
+      iconColor = Colors.white;
+    } else {
+      bgColor = _hover ? Colors.white.withOpacity(0.1) : null;
+      iconColor = Colors.white.withOpacity(0.8);
+    }
+
+    return InkWell(
+      onTap: widget.selected
+          ? null
+          : () {
+              widget.onTap();
+              setState(() {
+                _hover = false;
+              });
+            },
+      onHover: widget.selected
+          ? null
+          : (v) {
+              setState(() {
+                _hover = v;
+              });
+            },
+      child: Container(
+        alignment: Alignment.center,
+        margin: EdgeInsets.only(bottom: 10),
+        width: 50,
+        height: 50,
+        decoration: BoxDecoration(
+            color: bgColor, borderRadius: BorderRadius.circular(8)),
+        child: Wrap(
+          direction: Axis.vertical,
+          crossAxisAlignment: WrapCrossAlignment.center,
+          spacing: 2,
+          children: [
+            Icon(
+              widget.item.icon,
+              color: iconColor,
+            ),
+            Text(
+              widget.item.label,
+              style: TextStyle(color: iconColor, fontSize: 12),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}