feat(widgets): 优化 KodBoxCard 组件的样式和布局

- 增加卡片的阴影和圆角,提升视觉效果
- 调整卡片内各元素的样式和间距,增强可读性
- 优化 KodBox 最近操作部分的样式,增加紫色主题元素
- 改进错误提示和空状态的显示效果
This commit is contained in:
高手 2025-06-10 16:02:52 +08:00
parent a4c1a2aeda
commit 1db7ced409

View File

@ -119,45 +119,84 @@ class _KodBoxCardState extends State<KodBoxCard> {
final sourceID = isFileOperation ? _getSourceID(desc) : null;
return Card(
margin: const EdgeInsets.symmetric(vertical: 4.0),
elevation: 2,
margin: const EdgeInsets.symmetric(vertical: 6.0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: InkWell(
onTap: sourceID != null ? () => _launchFileUrl(sourceID) : null,
splashColor: Colors.deepPurple.withAlpha(30),
child: Padding(
padding: const EdgeInsets.all(12.0),
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
CircleAvatar(
radius: 16,
child: Text(log['nickName']?[0].toUpperCase() ?? '?'),
backgroundColor: Colors.deepPurple.shade200,
radius: 18,
child: Text(
log['nickName']?[0].toUpperCase() ?? '?',
style: const TextStyle(color: Colors.white),
),
const SizedBox(width: 8),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
log['nickName'] ?? log['name'] ?? '未知用户',
style: const TextStyle(fontWeight: FontWeight.bold),
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
if (log['title'] != null)
Text(
log['title']!,
style: const TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
],
),
),
const SizedBox(width: 8),
Text(log['title'] ?? '未知操作'),
],
),
if (isFileOperation) ...[
const SizedBox(height: 8),
Text(
const SizedBox(height: 12),
Row(
children: [
const Icon(Icons.insert_drive_file,
size: 18, color: Colors.deepPurple),
const SizedBox(width: 8),
Expanded(
child: Text(
'文件路径: ${_getFilePath(desc)}',
style: TextStyle(
color: sourceID != null ? Colors.blue : Colors.black,
fontSize: 14,
),
),
),
],
),
],
const SizedBox(height: 8),
Row(
children: [
const Icon(Icons.access_time, size: 16, color: Colors.grey),
const SizedBox(width: 6),
Text(
'时间: ${timeago.format(DateTime.fromMillisecondsSinceEpoch(int.parse(log['createTime']) * 1000), locale: 'zh_CN')}',
style: const TextStyle(fontSize: 12, color: Colors.grey),
),
],
),
],
),
),
),
);
@ -172,6 +211,9 @@ class _KodBoxCardState extends State<KodBoxCard> {
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
elevation: 4,
margin: const EdgeInsets.all(16),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
@ -182,36 +224,60 @@ class _KodBoxCardState extends State<KodBoxCard> {
children: [
const Text(
'KodBox 最近操作',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.deepPurple,
),
IconButton(
icon: const Icon(Icons.refresh),
),
Container(
decoration: BoxDecoration(
color: Colors.deepPurple.shade100,
borderRadius: BorderRadius.circular(20),
),
padding: const EdgeInsets.all(8),
child: IconButton(
icon: const Icon(Icons.refresh, color: Colors.deepPurple),
onPressed: _isLoading ? null : _fetchLogs,
),
),
],
),
if (_isLoading)
const Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
padding: EdgeInsets.all(24.0),
child: CircularProgressIndicator(color: Colors.deepPurple),
),
)
else if (_error != null)
Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.all(24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.error_outline, color: Colors.red),
const SizedBox(width: 8),
Expanded(
child: Text(
_error!,
style: const TextStyle(color: Colors.red),
textAlign: TextAlign.center,
),
),
],
),
),
)
else if (_logs.isEmpty)
const Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Text('暂无操作记录'),
padding: EdgeInsets.all(24.0),
child: Text(
'暂无操作记录',
style: TextStyle(fontSize: 16, color: Colors.grey),
),
),
)
else