temp

ui/flutter_v2/lib/components/gp_gradient_button.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+class GpGradientButton extends StatelessWidget {
+  final String text;
+  final VoidCallback onPressed;
+  final IconData? icon; // 添加可选图标参数
+
+  const GpGradientButton({
+    super.key,
+    required this.text,
+    required this.onPressed,
+    this.icon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 120,
+      height: 40,
+      child: ElevatedButton(
+        onPressed: onPressed,
+        style: ElevatedButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(143),
+          ),
+          padding: EdgeInsets.zero,
+          backgroundColor: Colors.transparent,
+        ),
+        child: Ink(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              colors: [Color(0xFF3ACBBE), Color(0xFF2CDB90)],
+              begin: Alignment.centerLeft,
+              end: Alignment.centerRight,
+            ),
+            borderRadius: BorderRadius.all(Radius.circular(143)),
+          ),
+          child: Container(
+            alignment: Alignment.center,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                if (icon != null) Icon(icon, size: 16.0, color: Colors.white),
+                if (icon != null) const SizedBox(width: 4.0), // 图标和文本之间的间距
+                Text(
+                  text,
+                  style: const TextStyle(
+                    fontSize: 16.0,
+                    fontWeight: FontWeight.bold,
+                    color: Color(0xFFFFFFFE),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

ui/flutter_v2/lib/components/gp_icon_button.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+
+/// GpIconButton - 简单的图标按钮组件
+///
+/// 用于TaskItem的操作按钮，支持鼠标悬浮效果
+class GpIconButton extends StatefulWidget {
+  /// 图标
+  final IconData icon;
+
+  /// 点击回调
+  final VoidCallback? onTap;
+
+  /// 图标颜色
+  final Color? color;
+
+  /// 图标大小
+  final double? size;
+
+  const GpIconButton({
+    super.key,
+    required this.icon,
+    this.onTap,
+    this.color,
+    this.size,
+  });
+
+  @override
+  State<GpIconButton> createState() => _GpIconButtonState();
+}
+
+class _GpIconButtonState extends State<GpIconButton> {
+  bool _isHovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      cursor:
+          widget.onTap != null
+              ? SystemMouseCursors.click
+              : SystemMouseCursors.basic,
+      onEnter: (_) => setState(() => _isHovered = true),
+      onExit: (_) => setState(() => _isHovered = false),
+      child: GestureDetector(
+        onTap: widget.onTap,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 200),
+          width: widget.size ?? 20.0,
+          height: widget.size ?? 20.0,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(4.0), // 8px圆角
+            color:
+                _isHovered
+                    ? const Color(0xFF4883A2)
+                    : Colors.transparent, // 悬浮背景色
+          ),
+          child: Icon(
+            widget.icon,
+            color: widget.color ?? Colors.white,
+            size: widget.size ?? 20.0,
+          ),
+        ),
+      ),
+    );
+  }
+}

ui/flutter_v2/lib/components/gp_outline_button.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+
+/// GpOutlineButton - 线框按钮组件
+///
+/// 一个带有线框边框的小型按钮组件，支持自定义图标
+class GpOutlineButton extends StatelessWidget {
+  /// 按钮内的图标路径或图标数据
+  final dynamic icon;
+
+  /// 点击回调
+  final VoidCallback? onTap;
+
+  /// 按钮宽度，默认42px
+  final double width;
+
+  /// 按钮高度，默认22px
+  final double height;
+
+  /// 边框颜色，默认#39CDB9
+  final Color borderColor;
+
+  /// 边框圆角，默认4px
+  final double borderRadius;
+
+  /// 边框宽度，默认1px
+  final double borderWidth;
+
+  /// 图标颜色
+  final Color? iconColor;
+
+  /// 图标大小
+  final double? iconSize;
+
+  /// 背景颜色
+  final Color? backgroundColor;
+
+  const GpOutlineButton({
+    super.key,
+    required this.icon,
+    this.onTap,
+    this.width = 42.0,
+    this.height = 22.0,
+    this.borderColor = const Color(0xFF39CDB9),
+    this.borderRadius = 4.0,
+    this.borderWidth = 1.0,
+    this.iconColor,
+    this.iconSize,
+    this.backgroundColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      cursor:
+          onTap != null ? SystemMouseCursors.click : SystemMouseCursors.basic,
+      child: GestureDetector(
+        onTap: onTap,
+        child: Container(
+          width: width,
+          height: height,
+          decoration: BoxDecoration(
+            color: backgroundColor,
+            border: Border.all(color: borderColor, width: borderWidth),
+            borderRadius: BorderRadius.circular(borderRadius),
+          ),
+          child: _buildIcon(),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildIcon() {
+    if (icon == null) return const SizedBox.shrink();
+
+    // 如果是字符串，认为是资源路径
+    if (icon is String) {
+      return Center(
+        child: Image.asset(
+          icon as String,
+          width: iconSize,
+          height: iconSize,
+          color: iconColor,
+          fit: BoxFit.contain,
+        ),
+      );
+    }
+
+    // 如果是IconData，使用Icon组件
+    if (icon is IconData) {
+      return Center(
+        child: Icon(icon as IconData, color: iconColor, size: iconSize ?? 16.0),
+      );
+    }
+
+    // 如果是Widget，直接使用
+    if (icon is Widget) {
+      return Center(child: icon as Widget);
+    }
+
+    return const SizedBox.shrink();
+  }
+}