1490 lines
46 KiB
Dart
1490 lines
46 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
import 'package:flutter/services.dart';
|
|||
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||
|
|
|
|||
|
|
import '../../../models/marquee_config.dart';
|
|||
|
|
import '../../../models/marquee_message.dart';
|
|||
|
|
import '../../../models/org_node.dart';
|
|||
|
|
import '../../../models/store_info.dart';
|
|||
|
|
import '../../../services/api_client.dart';
|
|||
|
|
import '../../../services/marquee_service.dart';
|
|||
|
|
import '../../../utils/i10n.dart';
|
|||
|
|
import '../../../utils/session_org_scope.dart';
|
|||
|
|
import '../../../widgets/org_picker_sheet.dart';
|
|||
|
|
|
|||
|
|
/// 滚动字幕管理页。
|
|||
|
|
///
|
|||
|
|
/// 支持按门店查看、新增、编辑、删除、查询、下发/取消下发滚动字幕。
|
|||
|
|
class MarqueeManagementPage extends ConsumerStatefulWidget {
|
|||
|
|
const MarqueeManagementPage({super.key});
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
ConsumerState<MarqueeManagementPage> createState() =>
|
|||
|
|
_MarqueeManagementPageState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _MarqueeManagementPageState extends ConsumerState<MarqueeManagementPage> {
|
|||
|
|
final MarqueeService _service = MarqueeService();
|
|||
|
|
final _searchController = TextEditingController();
|
|||
|
|
|
|||
|
|
List<MarqueeMessage> _items = [];
|
|||
|
|
List<StoreInfo> _stores = [];
|
|||
|
|
bool _loading = false;
|
|||
|
|
String? _error;
|
|||
|
|
String _keyword = '';
|
|||
|
|
String? _selectedStoreId;
|
|||
|
|
|
|||
|
|
AppLocalizations get t => AppLocalizations.of(context);
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
_init();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 初始化：先加载门店，受限账号默认选中第一家门店（避免「全部门店」视图
|
|||
|
|
/// 泄露跨组织字幕），再加载字幕列表。
|
|||
|
|
Future<void> _init() async {
|
|||
|
|
await _loadStores();
|
|||
|
|
if (SessionOrgScope.instance.enabled &&
|
|||
|
|
_selectedStoreId == null &&
|
|||
|
|
_stores.isNotEmpty) {
|
|||
|
|
setState(() => _selectedStoreId = _stores.first.orgId);
|
|||
|
|
}
|
|||
|
|
await _loadData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void dispose() {
|
|||
|
|
_searchController.dispose();
|
|||
|
|
super.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _loadStores() async {
|
|||
|
|
try {
|
|||
|
|
final stores = await _service.getStores();
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() => _stores = stores);
|
|||
|
|
} catch (_) {
|
|||
|
|
// 门店列表加载失败不影响主列表展示。
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _loadData() async {
|
|||
|
|
setState(() {
|
|||
|
|
_loading = true;
|
|||
|
|
_error = null;
|
|||
|
|
});
|
|||
|
|
try {
|
|||
|
|
final list = await _service.getMarqueeList(
|
|||
|
|
storeId: _selectedStoreId,
|
|||
|
|
keyword: _keyword.isEmpty ? null : _keyword,
|
|||
|
|
);
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() {
|
|||
|
|
_items = list;
|
|||
|
|
_loading = false;
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() {
|
|||
|
|
_error = e is ApiException ? e.message : e.toString();
|
|||
|
|
_loading = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _refresh() async => _loadData();
|
|||
|
|
|
|||
|
|
void _onSearchChanged(String value) {
|
|||
|
|
_keyword = value.trim();
|
|||
|
|
_loadData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _showForm({MarqueeMessage? editing}) async {
|
|||
|
|
final result = await showModalBottomSheet<Map<String, dynamic>>(
|
|||
|
|
context: context,
|
|||
|
|
isScrollControlled: true,
|
|||
|
|
builder: (ctx) => _MarqueeForm(
|
|||
|
|
stores: _stores,
|
|||
|
|
editing: editing,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
if (result == null) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await _service.saveMarquee(result);
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text(t.saved)),
|
|||
|
|
);
|
|||
|
|
_refresh();
|
|||
|
|
} on ApiException catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text(e.message)),
|
|||
|
|
);
|
|||
|
|
} catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text('${t.saveFailed}: $e')),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _deleteMarquee(MarqueeMessage item) async {
|
|||
|
|
final confirmed = await showDialog<bool>(
|
|||
|
|
context: context,
|
|||
|
|
builder: (ctx) => AlertDialog(
|
|||
|
|
title: Text(t.confirmDelete),
|
|||
|
|
content: Text(t.deleteConfirmContent(item.content)),
|
|||
|
|
actions: [
|
|||
|
|
TextButton(
|
|||
|
|
onPressed: () => Navigator.pop(ctx, false),
|
|||
|
|
child: Text(t.cancel),
|
|||
|
|
),
|
|||
|
|
FilledButton(
|
|||
|
|
onPressed: () => Navigator.pop(ctx, true),
|
|||
|
|
child: Text(t.delete),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
if (confirmed != true) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await _service.deleteMarquee(item.id);
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text(t.deleted)),
|
|||
|
|
);
|
|||
|
|
_refresh();
|
|||
|
|
} catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text('${t.deleteFailed}: $e')),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _enableMarquee(MarqueeMessage item) async {
|
|||
|
|
setState(() => _loading = true);
|
|||
|
|
try {
|
|||
|
|
await _service.setMarqueeStatus(item.id, status: 1);
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text(t.marqueeStatusEnabled)),
|
|||
|
|
);
|
|||
|
|
_refresh();
|
|||
|
|
} on ApiException catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() => _loading = false);
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text(e.message)),
|
|||
|
|
);
|
|||
|
|
} catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() => _loading = false);
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text('${t.marqueeStatusEnabled} $e')),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _disableMarquee(MarqueeMessage item) async {
|
|||
|
|
try {
|
|||
|
|
await _service.setMarqueeStatus(item.id, status: 0);
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text(t.marqueeStatusDisabled)),
|
|||
|
|
);
|
|||
|
|
_refresh();
|
|||
|
|
} catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|||
|
|
SnackBar(content: Text('${t.marqueeStatusDisabled} $e')),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
return Scaffold(
|
|||
|
|
appBar: AppBar(
|
|||
|
|
automaticallyImplyLeading: false,
|
|||
|
|
title: Text(t.marqueeManagement),
|
|||
|
|
),
|
|||
|
|
body: Column(
|
|||
|
|
children: [
|
|||
|
|
_buildFilterBar(),
|
|||
|
|
Expanded(child: _buildBody()),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
floatingActionButton: FloatingActionButton(
|
|||
|
|
heroTag: 'marquee_add_fab',
|
|||
|
|
onPressed: () => _showForm(),
|
|||
|
|
child: const Icon(Icons.add),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildFilterBar() {
|
|||
|
|
return Padding(
|
|||
|
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
|
|||
|
|
child: Column(
|
|||
|
|
children: [
|
|||
|
|
TextField(
|
|||
|
|
controller: _searchController,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
hintText: t.searchMarqueeHint,
|
|||
|
|
prefixIcon: const Icon(Icons.search),
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
contentPadding: const EdgeInsets.symmetric(vertical: 12),
|
|||
|
|
),
|
|||
|
|
onChanged: _onSearchChanged,
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
DropdownButtonFormField<String?>(
|
|||
|
|
value: _selectedStoreId,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.filterByStore,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
|
|||
|
|
),
|
|||
|
|
items: [
|
|||
|
|
if (!SessionOrgScope.instance.enabled)
|
|||
|
|
DropdownMenuItem<String?>(
|
|||
|
|
value: null,
|
|||
|
|
child: Text(t.allStores),
|
|||
|
|
),
|
|||
|
|
..._stores.map((s) => DropdownMenuItem<String?>(
|
|||
|
|
value: s.orgId,
|
|||
|
|
child: Text(s.name),
|
|||
|
|
)),
|
|||
|
|
],
|
|||
|
|
onChanged: (v) {
|
|||
|
|
setState(() => _selectedStoreId = v);
|
|||
|
|
_loadData();
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildBody() {
|
|||
|
|
if (_loading && _items.isEmpty) {
|
|||
|
|
return const Center(child: CircularProgressIndicator());
|
|||
|
|
}
|
|||
|
|
if (_error != null && _items.isEmpty) {
|
|||
|
|
return Center(
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Text(_error!),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
FilledButton.tonal(
|
|||
|
|
onPressed: _refresh,
|
|||
|
|
child: Text(t.retry),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
if (_items.isEmpty) {
|
|||
|
|
return Center(
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.subtitles_outlined,
|
|||
|
|
size: 64, color: Theme.of(context).colorScheme.outline),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Text(t.noMarqueeData),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return RefreshIndicator(
|
|||
|
|
onRefresh: _refresh,
|
|||
|
|
child: ListView.builder(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
itemCount: _items.length,
|
|||
|
|
itemBuilder: (context, index) {
|
|||
|
|
final item = _items[index];
|
|||
|
|
return _MarqueeCard(
|
|||
|
|
item: item,
|
|||
|
|
onEdit: () => _showForm(editing: item),
|
|||
|
|
onDelete: () => _deleteMarquee(item),
|
|||
|
|
onEnable: () => _enableMarquee(item),
|
|||
|
|
onDisable: () => _disableMarquee(item),
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _MarqueeCard extends StatelessWidget {
|
|||
|
|
const _MarqueeCard({
|
|||
|
|
required this.item,
|
|||
|
|
required this.onEdit,
|
|||
|
|
required this.onDelete,
|
|||
|
|
required this.onEnable,
|
|||
|
|
required this.onDisable,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
final MarqueeMessage item;
|
|||
|
|
final VoidCallback onEdit;
|
|||
|
|
final VoidCallback onDelete;
|
|||
|
|
final VoidCallback onEnable;
|
|||
|
|
final VoidCallback onDisable;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final t = AppLocalizations.of(context);
|
|||
|
|
final theme = Theme.of(context);
|
|||
|
|
final colorScheme = theme.colorScheme;
|
|||
|
|
|
|||
|
|
return Card(
|
|||
|
|
margin: const EdgeInsets.only(bottom: 12),
|
|||
|
|
child: Padding(
|
|||
|
|
padding: const EdgeInsets.all(16),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: Text(
|
|||
|
|
item.storeName,
|
|||
|
|
style: theme.textTheme.titleMedium
|
|||
|
|
?.copyWith(fontWeight: FontWeight.bold),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
_StatusChip(status: item.status),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Container(
|
|||
|
|
width: double.infinity,
|
|||
|
|
padding: const EdgeInsets.all(12),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: _parseColor(item.backgroundColor) ??
|
|||
|
|
colorScheme.surfaceContainerHighest,
|
|||
|
|
borderRadius: BorderRadius.circular(8),
|
|||
|
|
border: Border.all(
|
|||
|
|
color: _parseColor(item.fontColor)?.withAlpha(76) ??
|
|||
|
|
colorScheme.outlineVariant,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
child: Text(
|
|||
|
|
item.content,
|
|||
|
|
style: theme.textTheme.bodyLarge?.copyWith(
|
|||
|
|
color: _parseColor(item.fontColor),
|
|||
|
|
fontSize: item.fontSize?.toDouble(),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.speed, size: 16, color: colorScheme.onSurfaceVariant),
|
|||
|
|
const SizedBox(width: 4),
|
|||
|
|
Text(
|
|||
|
|
'${t.marqueeSpeed}: ${MarqueeConfig.speedFromValue(item.speed).label(t.isEnglish)}',
|
|||
|
|
style: theme.textTheme.bodySmall
|
|||
|
|
?.copyWith(color: colorScheme.onSurfaceVariant),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 16),
|
|||
|
|
if (item.fontSize != null)
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.only(right: 16),
|
|||
|
|
child: Row(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.format_size,
|
|||
|
|
size: 16, color: colorScheme.onSurfaceVariant),
|
|||
|
|
const SizedBox(width: 4),
|
|||
|
|
Text(
|
|||
|
|
'${t.marqueeFontSize}: ${item.fontSize}',
|
|||
|
|
style: theme.textTheme.bodySmall
|
|||
|
|
?.copyWith(color: colorScheme.onSurfaceVariant),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
if (item.level != null)
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.only(right: 16),
|
|||
|
|
child: Row(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.layers,
|
|||
|
|
size: 16, color: colorScheme.onSurfaceVariant),
|
|||
|
|
const SizedBox(width: 4),
|
|||
|
|
Text(
|
|||
|
|
'${t.marqueeLevel}: ${MarqueeConfig.gradeFromValue(item.level).label(t.isEnglish)}',
|
|||
|
|
style: theme.textTheme.bodySmall
|
|||
|
|
?.copyWith(color: colorScheme.onSurfaceVariant),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(Icons.access_time,
|
|||
|
|
size: 16, color: colorScheme.onSurfaceVariant),
|
|||
|
|
const SizedBox(width: 4),
|
|||
|
|
Text(
|
|||
|
|
_formatTimeRange(item.startTime, item.endTime),
|
|||
|
|
style: theme.textTheme.bodySmall
|
|||
|
|
?.copyWith(color: colorScheme.onSurfaceVariant),
|
|||
|
|
),
|
|||
|
|
const Spacer(),
|
|||
|
|
if (item.fontColor != null || item.backgroundColor != null)
|
|||
|
|
Row(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
if (item.fontColor != null)
|
|||
|
|
_ColorDot(
|
|||
|
|
label: t.marqueeFontColor,
|
|||
|
|
colorHex: item.fontColor!,
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 8),
|
|||
|
|
if (item.backgroundColor != null)
|
|||
|
|
_ColorDot(
|
|||
|
|
label: t.marqueeBackgroundColor,
|
|||
|
|
colorHex: item.backgroundColor!,
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Row(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|||
|
|
children: [
|
|||
|
|
if (item.isDisabled)
|
|||
|
|
FilledButton.tonal(
|
|||
|
|
onPressed: onEnable,
|
|||
|
|
child: Text(t.marqueeStatusEnabled),
|
|||
|
|
)
|
|||
|
|
else
|
|||
|
|
OutlinedButton(
|
|||
|
|
onPressed: onDisable,
|
|||
|
|
child: Text(t.marqueeStatusDisabled),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 8),
|
|||
|
|
TextButton.icon(
|
|||
|
|
onPressed: onEdit,
|
|||
|
|
icon: const Icon(Icons.edit, size: 18),
|
|||
|
|
label: Text(t.edit),
|
|||
|
|
),
|
|||
|
|
TextButton.icon(
|
|||
|
|
onPressed: onDelete,
|
|||
|
|
icon: const Icon(Icons.delete, size: 18),
|
|||
|
|
label: Text(t.delete),
|
|||
|
|
style: TextButton.styleFrom(
|
|||
|
|
foregroundColor: colorScheme.error,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
String _formatTime(DateTime? time) {
|
|||
|
|
if (time == null) return '--';
|
|||
|
|
return '${time.hour.toString().padLeft(2, '0')}:'
|
|||
|
|
'${time.minute.toString().padLeft(2, '0')}:'
|
|||
|
|
'${time.second.toString().padLeft(2, '0')}';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
String _formatTimeRange(DateTime? start, DateTime? end) {
|
|||
|
|
if (start == null && end == null) return '--';
|
|||
|
|
final s = start == null ? '--' : _formatTime(start);
|
|||
|
|
final e = end == null ? '--' : _formatTime(end);
|
|||
|
|
return '$s ~ $e';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Color? _parseColor(String? hex) {
|
|||
|
|
if (hex == null || hex.isEmpty) return null;
|
|||
|
|
final normalized = hex.trim();
|
|||
|
|
try {
|
|||
|
|
if (normalized.length == 7 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF${normalized.substring(1)}', radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 9 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse(normalized.substring(1), radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 6 && !normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF$normalized', radix: 16));
|
|||
|
|
}
|
|||
|
|
} catch (_) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _ColorPrefixIcon extends StatelessWidget {
|
|||
|
|
const _ColorPrefixIcon({required this.colorHex});
|
|||
|
|
|
|||
|
|
final String colorHex;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final parsed = _parseColor(colorHex);
|
|||
|
|
return Container(
|
|||
|
|
width: 24,
|
|||
|
|
height: 24,
|
|||
|
|
margin: const EdgeInsets.all(12),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: parsed ?? Theme.of(context).colorScheme.surfaceContainerHighest,
|
|||
|
|
borderRadius: BorderRadius.circular(4),
|
|||
|
|
border: Border.all(color: Theme.of(context).colorScheme.outlineVariant),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Color? _parseColor(String hex) {
|
|||
|
|
final normalized = hex.trim();
|
|||
|
|
try {
|
|||
|
|
if (normalized.length == 7 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF${normalized.substring(1)}', radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 9 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse(normalized.substring(1), radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 6 && !normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF$normalized', radix: 16));
|
|||
|
|
}
|
|||
|
|
} catch (_) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _DateTimeField extends StatelessWidget {
|
|||
|
|
const _DateTimeField({
|
|||
|
|
required this.label,
|
|||
|
|
this.value,
|
|||
|
|
required this.onChanged,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
final String label;
|
|||
|
|
final DateTime? value;
|
|||
|
|
final ValueChanged<DateTime?> onChanged;
|
|||
|
|
|
|||
|
|
String _formatTime(DateTime? dt) {
|
|||
|
|
if (dt == null) return '';
|
|||
|
|
return '${dt.hour.toString().padLeft(2, '0')}:'
|
|||
|
|
'${dt.minute.toString().padLeft(2, '0')}:'
|
|||
|
|
'${dt.second.toString().padLeft(2, '0')}';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final text = _formatTime(value);
|
|||
|
|
|
|||
|
|
return InkWell(
|
|||
|
|
onTap: () async {
|
|||
|
|
final initial = value ?? DateTime(2000, 1, 1, 0, 0, 0);
|
|||
|
|
final picked = await showModalBottomSheet<DateTime?>(
|
|||
|
|
useSafeArea: true,
|
|||
|
|
context: context,
|
|||
|
|
isScrollControlled: true,
|
|||
|
|
builder: (ctx) => _TimePickerSheet(initialTime: initial),
|
|||
|
|
);
|
|||
|
|
if (picked == null) return;
|
|||
|
|
onChanged(picked);
|
|||
|
|
},
|
|||
|
|
child: InputDecorator(
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: label,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
suffixIcon: const Icon(Icons.access_time),
|
|||
|
|
),
|
|||
|
|
child: Text(
|
|||
|
|
text.isEmpty ? '--' : text,
|
|||
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 时分秒时间选择器，对齐 Web 端滚动字幕开始/结束时间控件。
|
|||
|
|
///
|
|||
|
|
/// 三列滚轮（时 00-23 / 分 00-59 / 秒 00-59），底部取消/确定按钮。
|
|||
|
|
class _TimePickerSheet extends StatefulWidget {
|
|||
|
|
const _TimePickerSheet({required this.initialTime});
|
|||
|
|
|
|||
|
|
final DateTime initialTime;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
State<_TimePickerSheet> createState() => _TimePickerSheetState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _TimePickerSheetState extends State<_TimePickerSheet> {
|
|||
|
|
late FixedExtentScrollController _hourCtrl;
|
|||
|
|
late FixedExtentScrollController _minuteCtrl;
|
|||
|
|
late FixedExtentScrollController _secondCtrl;
|
|||
|
|
late int _hour;
|
|||
|
|
late int _minute;
|
|||
|
|
late int _second;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
_hour = widget.initialTime.hour;
|
|||
|
|
_minute = widget.initialTime.minute;
|
|||
|
|
_second = widget.initialTime.second;
|
|||
|
|
_hourCtrl = FixedExtentScrollController(initialItem: _hour);
|
|||
|
|
_minuteCtrl = FixedExtentScrollController(initialItem: _minute);
|
|||
|
|
_secondCtrl = FixedExtentScrollController(initialItem: _second);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void dispose() {
|
|||
|
|
_hourCtrl.dispose();
|
|||
|
|
_minuteCtrl.dispose();
|
|||
|
|
_secondCtrl.dispose();
|
|||
|
|
super.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildWheel({
|
|||
|
|
required int count,
|
|||
|
|
required FixedExtentScrollController controller,
|
|||
|
|
required ValueChanged<int> onChanged,
|
|||
|
|
required String unit,
|
|||
|
|
}) {
|
|||
|
|
return Expanded(
|
|||
|
|
child: Column(
|
|||
|
|
children: [
|
|||
|
|
Text(unit, style: Theme.of(context).textTheme.labelSmall),
|
|||
|
|
Expanded(
|
|||
|
|
child: ListWheelScrollView.useDelegate(
|
|||
|
|
controller: controller,
|
|||
|
|
itemExtent: 44,
|
|||
|
|
diameterRatio: 1.2,
|
|||
|
|
physics: const FixedExtentScrollPhysics(),
|
|||
|
|
onSelectedItemChanged: onChanged,
|
|||
|
|
childDelegate: ListWheelChildBuilderDelegate(
|
|||
|
|
builder: (ctx, index) {
|
|||
|
|
if (index < 0 || index >= count) return null;
|
|||
|
|
return Container(
|
|||
|
|
alignment: Alignment.center,
|
|||
|
|
child: Text(
|
|||
|
|
index.toString().padLeft(2, '0'),
|
|||
|
|
style: Theme.of(context).textTheme.titleMedium,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
childCount: count,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final t = AppLocalizations.of(context);
|
|||
|
|
return Padding(
|
|||
|
|
padding: EdgeInsets.only(
|
|||
|
|
bottom: MediaQuery.of(context).viewInsets.bottom,
|
|||
|
|
),
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
|
|||
|
|
child: Text(
|
|||
|
|
t.pleaseSelect,
|
|||
|
|
style: Theme.of(context)
|
|||
|
|
.textTheme
|
|||
|
|
.titleMedium
|
|||
|
|
?.copyWith(fontWeight: FontWeight.bold),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
SizedBox(
|
|||
|
|
height: 220,
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
_buildWheel(
|
|||
|
|
count: 24,
|
|||
|
|
controller: _hourCtrl,
|
|||
|
|
onChanged: (v) => setState(() => _hour = v),
|
|||
|
|
unit: t.marqueeHour,
|
|||
|
|
),
|
|||
|
|
const Text(':', style: TextStyle(fontSize: 20)),
|
|||
|
|
_buildWheel(
|
|||
|
|
count: 60,
|
|||
|
|
controller: _minuteCtrl,
|
|||
|
|
onChanged: (v) => setState(() => _minute = v),
|
|||
|
|
unit: t.marqueeMinute,
|
|||
|
|
),
|
|||
|
|
const Text(':', style: TextStyle(fontSize: 20)),
|
|||
|
|
_buildWheel(
|
|||
|
|
count: 60,
|
|||
|
|
controller: _secondCtrl,
|
|||
|
|
onChanged: (v) => setState(() => _second = v),
|
|||
|
|
unit: t.marqueeSecond,
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: OutlinedButton(
|
|||
|
|
onPressed: () => Navigator.pop(context),
|
|||
|
|
child: Text(t.cancel),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: FilledButton(
|
|||
|
|
onPressed: () {
|
|||
|
|
Navigator.pop(
|
|||
|
|
context,
|
|||
|
|
DateTime(2000, 1, 1, _hour, _minute, _second),
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
child: Text(t.confirm),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
SizedBox(height: MediaQuery.of(context).padding.bottom),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _ColorDot extends StatelessWidget {
|
|||
|
|
const _ColorDot({required this.label, required this.colorHex});
|
|||
|
|
|
|||
|
|
final String label;
|
|||
|
|
final String colorHex;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final theme = Theme.of(context);
|
|||
|
|
final parsed = _parseColor(colorHex);
|
|||
|
|
|
|||
|
|
return Row(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
label,
|
|||
|
|
style: theme.textTheme.bodySmall
|
|||
|
|
?.copyWith(color: theme.colorScheme.onSurfaceVariant),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 4),
|
|||
|
|
Container(
|
|||
|
|
width: 16,
|
|||
|
|
height: 16,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: parsed ?? theme.colorScheme.surfaceContainerHighest,
|
|||
|
|
borderRadius: BorderRadius.circular(4),
|
|||
|
|
border: Border.all(color: theme.colorScheme.outlineVariant),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Color? _parseColor(String hex) {
|
|||
|
|
final normalized = hex.trim();
|
|||
|
|
try {
|
|||
|
|
if (normalized.length == 7 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF${normalized.substring(1)}', radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 9 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse(normalized.substring(1), radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 6 && !normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF$normalized', radix: 16));
|
|||
|
|
}
|
|||
|
|
} catch (_) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _StatusChip extends StatelessWidget {
|
|||
|
|
const _StatusChip({required this.status});
|
|||
|
|
|
|||
|
|
final int status;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final t = AppLocalizations.of(context);
|
|||
|
|
final isEnabled = status == 1;
|
|||
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|||
|
|
|
|||
|
|
return Chip(
|
|||
|
|
avatar: Icon(
|
|||
|
|
isEnabled ? Icons.check_circle : Icons.block,
|
|||
|
|
size: 18,
|
|||
|
|
color: isEnabled ? colorScheme.onPrimaryContainer : null,
|
|||
|
|
),
|
|||
|
|
label: Text(
|
|||
|
|
isEnabled ? t.marqueeStatusEnabled : t.marqueeStatusDisabled,
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: isEnabled ? colorScheme.onPrimaryContainer : null,
|
|||
|
|
fontSize: 12,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
backgroundColor:
|
|||
|
|
isEnabled ? colorScheme.primaryContainer : colorScheme.surfaceContainerHighest,
|
|||
|
|
side: BorderSide.none,
|
|||
|
|
padding: EdgeInsets.zero,
|
|||
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _MarqueeForm extends StatefulWidget {
|
|||
|
|
const _MarqueeForm({
|
|||
|
|
required this.stores,
|
|||
|
|
this.editing,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
final List<StoreInfo> stores;
|
|||
|
|
final MarqueeMessage? editing;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
State<_MarqueeForm> createState() => _MarqueeFormState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _MarqueeFormState extends State<_MarqueeForm> {
|
|||
|
|
final _formKey = GlobalKey<FormState>();
|
|||
|
|
String? _storeId;
|
|||
|
|
late final _contentController =
|
|||
|
|
TextEditingController(text: widget.editing?.content ?? '');
|
|||
|
|
late final _fontColorController =
|
|||
|
|
TextEditingController(text: widget.editing?.fontColor ?? '#FFFFFF');
|
|||
|
|
late final _backgroundColorController =
|
|||
|
|
TextEditingController(text: widget.editing?.backgroundColor ?? '#3B82F6');
|
|||
|
|
late final _fontSizeController =
|
|||
|
|
TextEditingController(text: (widget.editing?.fontSize ?? 32).toString());
|
|||
|
|
late MarqueeSpeed _speed;
|
|||
|
|
late MarqueeGrade _grade;
|
|||
|
|
DateTime? _startTime;
|
|||
|
|
DateTime? _endTime;
|
|||
|
|
late int _status;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
_storeId = widget.editing?.storeId ??
|
|||
|
|
(widget.stores.isNotEmpty ? widget.stores.first.orgId : null);
|
|||
|
|
_speed = MarqueeConfig.speedFromValue(widget.editing?.speed);
|
|||
|
|
_grade = MarqueeConfig.gradeFromValue(widget.editing?.level);
|
|||
|
|
_startTime = widget.editing?.startTime ?? DateTime(2000, 1, 1, 0, 0, 0);
|
|||
|
|
_endTime = widget.editing?.endTime ?? DateTime(2000, 1, 1, 23, 59, 59);
|
|||
|
|
_status = widget.editing?.status ?? 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void dispose() {
|
|||
|
|
_contentController.dispose();
|
|||
|
|
_fontColorController.dispose();
|
|||
|
|
_backgroundColorController.dispose();
|
|||
|
|
_fontSizeController.dispose();
|
|||
|
|
super.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _pickColor(TextEditingController controller) async {
|
|||
|
|
final result = await showModalBottomSheet<String?>(
|
|||
|
|
useSafeArea: true,
|
|||
|
|
context: context,
|
|||
|
|
isScrollControlled: true,
|
|||
|
|
builder: (ctx) => _ColorPickerSheet(initialColor: controller.text),
|
|||
|
|
);
|
|||
|
|
if (result != null) {
|
|||
|
|
setState(() => controller.text = result);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final t = AppLocalizations.of(context);
|
|||
|
|
final isEdit = widget.editing != null;
|
|||
|
|
|
|||
|
|
return SingleChildScrollView(
|
|||
|
|
padding: EdgeInsets.only(
|
|||
|
|
bottom: MediaQuery.of(context).viewInsets.bottom,
|
|||
|
|
),
|
|||
|
|
child: Container(
|
|||
|
|
padding: const EdgeInsets.all(20),
|
|||
|
|
child: Form(
|
|||
|
|
key: _formKey,
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
isEdit ? t.editMarquee : t.addMarquee,
|
|||
|
|
style: Theme.of(context)
|
|||
|
|
.textTheme
|
|||
|
|
.titleLarge
|
|||
|
|
?.copyWith(fontWeight: FontWeight.bold),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 20),
|
|||
|
|
OrgPickerFormField(
|
|||
|
|
value: _storeId,
|
|||
|
|
labelText: t.targetStore,
|
|||
|
|
options: widget.stores
|
|||
|
|
.map((s) => OrgPickerOption(
|
|||
|
|
node: OrgNode(
|
|||
|
|
id: s.orgId,
|
|||
|
|
name: s.name,
|
|||
|
|
type: 3,
|
|||
|
|
parentId: s.parentId ?? '',
|
|||
|
|
address: s.address,
|
|||
|
|
contactPhone: s.contactPhone,
|
|||
|
|
activationCode: s.activationCode,
|
|||
|
|
),
|
|||
|
|
))
|
|||
|
|
.toList(),
|
|||
|
|
onChanged: (v) => setState(() => _storeId = v),
|
|||
|
|
validator: (v) =>
|
|||
|
|
(v == null || v.isEmpty) ? t.pleaseSelect : null,
|
|||
|
|
searchHint: t.searchStoreHint,
|
|||
|
|
emptyHint: t.noStoreAvailable,
|
|||
|
|
autoOpen: false,
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
TextFormField(
|
|||
|
|
controller: _contentController,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.marqueeContent,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
alignLabelWithHint: true,
|
|||
|
|
),
|
|||
|
|
maxLines: 4,
|
|||
|
|
validator: (v) =>
|
|||
|
|
(v == null || v.trim().isEmpty) ? t.marqueeContentRequired : null,
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: TextFormField(
|
|||
|
|
controller: _fontColorController,
|
|||
|
|
readOnly: true,
|
|||
|
|
onTap: () => _pickColor(_fontColorController),
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.marqueeFontColor,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
prefixIcon: _ColorPrefixIcon(colorHex: _fontColorController.text),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: TextFormField(
|
|||
|
|
controller: _backgroundColorController,
|
|||
|
|
readOnly: true,
|
|||
|
|
onTap: () => _pickColor(_backgroundColorController),
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.marqueeBackgroundColor,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
prefixIcon: _ColorPrefixIcon(colorHex: _backgroundColorController.text),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: TextFormField(
|
|||
|
|
controller: _fontSizeController,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.marqueeFontSize,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
suffixText: 'px',
|
|||
|
|
),
|
|||
|
|
keyboardType: TextInputType.number,
|
|||
|
|
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
|
|||
|
|
validator: (v) {
|
|||
|
|
final size = int.tryParse(v ?? '');
|
|||
|
|
if (size == null || size <= 0) {
|
|||
|
|
return t.marqueeFontSizeInvalid;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: DropdownButtonFormField<MarqueeGrade>(
|
|||
|
|
value: _grade,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.marqueeLevel,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
),
|
|||
|
|
items: MarqueeGrade.values.map((g) {
|
|||
|
|
return DropdownMenuItem<MarqueeGrade>(
|
|||
|
|
value: g,
|
|||
|
|
child: Text(g.label(t.isEnglish)),
|
|||
|
|
);
|
|||
|
|
}).toList(),
|
|||
|
|
onChanged: (v) {
|
|||
|
|
if (v != null) setState(() => _grade = v);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
DropdownButtonFormField<MarqueeSpeed>(
|
|||
|
|
value: _speed,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.marqueeSpeed,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
),
|
|||
|
|
items: MarqueeSpeed.values.map((s) {
|
|||
|
|
return DropdownMenuItem<MarqueeSpeed>(
|
|||
|
|
value: s,
|
|||
|
|
child: Text(s.label(t.isEnglish)),
|
|||
|
|
);
|
|||
|
|
}).toList(),
|
|||
|
|
onChanged: (v) {
|
|||
|
|
if (v != null) setState(() => _speed = v);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
DropdownButtonFormField<int>(
|
|||
|
|
value: _status,
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: t.marqueeStatus,
|
|||
|
|
border: const OutlineInputBorder(),
|
|||
|
|
),
|
|||
|
|
items: [
|
|||
|
|
DropdownMenuItem<int>(
|
|||
|
|
value: 1,
|
|||
|
|
child: Text(t.marqueeStatusEnabled),
|
|||
|
|
),
|
|||
|
|
DropdownMenuItem<int>(
|
|||
|
|
value: 0,
|
|||
|
|
child: Text(t.marqueeStatusDisabled),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
onChanged: (v) {
|
|||
|
|
if (v == null) return;
|
|||
|
|
setState(() => _status = v);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: _DateTimeField(
|
|||
|
|
label: t.marqueeStartTime,
|
|||
|
|
value: _startTime,
|
|||
|
|
onChanged: (v) => setState(() => _startTime = v),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: _DateTimeField(
|
|||
|
|
label: t.marqueeEndTime,
|
|||
|
|
value: _endTime,
|
|||
|
|
onChanged: (v) => setState(() => _endTime = v),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 24),
|
|||
|
|
SizedBox(
|
|||
|
|
width: double.infinity,
|
|||
|
|
child: FilledButton(
|
|||
|
|
onPressed: _submit,
|
|||
|
|
child: Text(t.save),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _submit() {
|
|||
|
|
if (!_formKey.currentState!.validate()) return;
|
|||
|
|
final store = widget.stores.firstWhere(
|
|||
|
|
(s) => s.orgId == _storeId,
|
|||
|
|
orElse: () => const StoreInfo(
|
|||
|
|
orgId: '',
|
|||
|
|
name: '',
|
|||
|
|
address: '',
|
|||
|
|
contactPhone: '',
|
|||
|
|
activationCode: '',
|
|||
|
|
status: 0,
|
|||
|
|
expireTime: null,
|
|||
|
|
createTime: null,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
Navigator.pop(context, {
|
|||
|
|
'id': widget.editing?.id,
|
|||
|
|
'storeId': _storeId,
|
|||
|
|
'storeName': store.name,
|
|||
|
|
'content': _contentController.text.trim(),
|
|||
|
|
'speed': _speed.value,
|
|||
|
|
'fontColor': _fontColorController.text.trim(),
|
|||
|
|
'backgroundColor': _backgroundColorController.text.trim(),
|
|||
|
|
'fontSize': int.tryParse(_fontSizeController.text.trim()) ?? 32,
|
|||
|
|
'level': _grade.value,
|
|||
|
|
if (_startTime != null) 'startTime': _startTime!.toIso8601String(),
|
|||
|
|
if (_endTime != null) 'endTime': _endTime!.toIso8601String(),
|
|||
|
|
'status': _status,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 颜色选择器弹窗，对齐 Web 端 `el-color-picker` 交互：
|
|||
|
|
/// - 饱和度/明度 2D 选择区
|
|||
|
|
/// - 色相条
|
|||
|
|
/// - HEX 输入框
|
|||
|
|
/// - 当前颜色预览
|
|||
|
|
/// - 取消/确定按钮
|
|||
|
|
class _ColorPickerSheet extends StatefulWidget {
|
|||
|
|
const _ColorPickerSheet({this.initialColor});
|
|||
|
|
|
|||
|
|
final String? initialColor;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
State<_ColorPickerSheet> createState() => _ColorPickerSheetState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _ColorPickerSheetState extends State<_ColorPickerSheet> {
|
|||
|
|
late HSVColor _hsv;
|
|||
|
|
final _hexCtrl = TextEditingController();
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
final color = _parseColor(widget.initialColor) ?? const Color(0xFFFFFFFF);
|
|||
|
|
_hsv = HSVColor.fromColor(color);
|
|||
|
|
_hexCtrl.text = _colorToHex(_hsv.toColor());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void dispose() {
|
|||
|
|
_hexCtrl.dispose();
|
|||
|
|
super.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _updateFromHsv(HSVColor hsv) {
|
|||
|
|
setState(() {
|
|||
|
|
_hsv = hsv;
|
|||
|
|
_hexCtrl.text = _colorToHex(hsv.toColor());
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _onHexSubmitted(String value) {
|
|||
|
|
final color = _parseColor(value);
|
|||
|
|
if (color == null) return;
|
|||
|
|
setState(() => _hsv = HSVColor.fromColor(color));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final t = AppLocalizations.of(context);
|
|||
|
|
final color = _hsv.toColor();
|
|||
|
|
final bottom = MediaQuery.of(context).viewInsets.bottom;
|
|||
|
|
|
|||
|
|
return Padding(
|
|||
|
|
padding: EdgeInsets.only(bottom: bottom),
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
|
|||
|
|
child: Text(
|
|||
|
|
t.marqueeFontColor,
|
|||
|
|
style: Theme.of(context)
|
|||
|
|
.textTheme
|
|||
|
|
.titleMedium
|
|||
|
|
?.copyWith(fontWeight: FontWeight.bold),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|||
|
|
child: _SaturationValueBox(
|
|||
|
|
hsv: _hsv,
|
|||
|
|
onChanged: (sat, val) =>
|
|||
|
|
_updateFromHsv(_hsv.withSaturation(sat).withValue(val)),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|||
|
|
child: _HueSlider(
|
|||
|
|
hue: _hsv.hue,
|
|||
|
|
onChanged: (h) => _updateFromHsv(_hsv.withHue(h)),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
width: 40,
|
|||
|
|
height: 40,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: color,
|
|||
|
|
borderRadius: BorderRadius.circular(8),
|
|||
|
|
border: Border.all(
|
|||
|
|
color: Theme.of(context).colorScheme.outlineVariant,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: TextField(
|
|||
|
|
controller: _hexCtrl,
|
|||
|
|
decoration: const InputDecoration(
|
|||
|
|
labelText: 'HEX',
|
|||
|
|
border: OutlineInputBorder(),
|
|||
|
|
prefixText: '#',
|
|||
|
|
),
|
|||
|
|
textCapitalization: TextCapitalization.characters,
|
|||
|
|
onSubmitted: _onHexSubmitted,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
Padding(
|
|||
|
|
padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: OutlinedButton(
|
|||
|
|
onPressed: () => Navigator.pop(context),
|
|||
|
|
child: Text(t.cancel),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
child: FilledButton(
|
|||
|
|
onPressed: () => Navigator.pop(context, _colorToHex(color)),
|
|||
|
|
child: Text(t.confirm),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
SizedBox(height: MediaQuery.of(context).padding.bottom),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _SaturationValueBox extends StatelessWidget {
|
|||
|
|
const _SaturationValueBox({required this.hsv, required this.onChanged});
|
|||
|
|
|
|||
|
|
final HSVColor hsv;
|
|||
|
|
final void Function(double saturation, double value) onChanged;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
return LayoutBuilder(
|
|||
|
|
builder: (context, constraints) {
|
|||
|
|
final size = Size(constraints.maxWidth, constraints.maxWidth);
|
|||
|
|
return GestureDetector(
|
|||
|
|
onPanUpdate: (d) => _handle(d.localPosition, size),
|
|||
|
|
onTapUp: (d) => _handle(d.localPosition, size),
|
|||
|
|
child: SizedBox(
|
|||
|
|
width: size.width,
|
|||
|
|
height: size.height,
|
|||
|
|
child: Stack(
|
|||
|
|
children: [
|
|||
|
|
CustomPaint(
|
|||
|
|
size: size,
|
|||
|
|
painter: _SaturationValuePainter(hue: hsv.hue),
|
|||
|
|
),
|
|||
|
|
Positioned(
|
|||
|
|
left: hsv.saturation * size.width - 8,
|
|||
|
|
top: (1 - hsv.value) * size.height - 8,
|
|||
|
|
child: const _PickerThumb(),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _handle(Offset local, Size size) {
|
|||
|
|
final x = local.dx.clamp(0, size.width);
|
|||
|
|
final y = local.dy.clamp(0, size.height);
|
|||
|
|
onChanged(x / size.width, 1 - y / size.height);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _HueSlider extends StatelessWidget {
|
|||
|
|
const _HueSlider({required this.hue, required this.onChanged});
|
|||
|
|
|
|||
|
|
final double hue;
|
|||
|
|
final ValueChanged<double> onChanged;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
return LayoutBuilder(
|
|||
|
|
builder: (context, constraints) {
|
|||
|
|
final size = Size(constraints.maxWidth, 32);
|
|||
|
|
return GestureDetector(
|
|||
|
|
onPanUpdate: (d) => _handle(d.localPosition, size),
|
|||
|
|
onTapUp: (d) => _handle(d.localPosition, size),
|
|||
|
|
child: SizedBox(
|
|||
|
|
width: size.width,
|
|||
|
|
height: size.height,
|
|||
|
|
child: Stack(
|
|||
|
|
children: [
|
|||
|
|
CustomPaint(
|
|||
|
|
size: size,
|
|||
|
|
painter: const _HuePainter(),
|
|||
|
|
),
|
|||
|
|
Positioned(
|
|||
|
|
left: (hue / 360) * size.width - 6,
|
|||
|
|
top: 2,
|
|||
|
|
child: Container(
|
|||
|
|
width: 12,
|
|||
|
|
height: 28,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.white,
|
|||
|
|
border: Border.all(color: Colors.black38),
|
|||
|
|
borderRadius: BorderRadius.circular(4),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _handle(Offset local, Size size) {
|
|||
|
|
onChanged((local.dx / size.width).clamp(0, 1) * 360);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _SaturationValuePainter extends CustomPainter {
|
|||
|
|
const _SaturationValuePainter({required this.hue});
|
|||
|
|
|
|||
|
|
final double hue;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void paint(Canvas canvas, Size size) {
|
|||
|
|
final rect = Rect.fromLTWH(0, 0, size.width, size.height);
|
|||
|
|
final base = HSVColor.fromAHSV(1, hue, 1, 1).toColor();
|
|||
|
|
final gradientH = LinearGradient(
|
|||
|
|
colors: [Colors.white, base],
|
|||
|
|
).createShader(rect);
|
|||
|
|
final gradientV = const LinearGradient(
|
|||
|
|
begin: Alignment.topCenter,
|
|||
|
|
end: Alignment.bottomCenter,
|
|||
|
|
colors: [Colors.transparent, Colors.black],
|
|||
|
|
).createShader(rect);
|
|||
|
|
|
|||
|
|
final paint = Paint()..style = PaintingStyle.fill;
|
|||
|
|
canvas.drawRect(rect, paint..shader = gradientH);
|
|||
|
|
canvas.drawRect(rect, paint..shader = gradientV);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
bool shouldRepaint(covariant _SaturationValuePainter old) => old.hue != hue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _HuePainter extends CustomPainter {
|
|||
|
|
const _HuePainter();
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void paint(Canvas canvas, Size size) {
|
|||
|
|
final rect = Rect.fromLTWH(0, 0, size.width, size.height);
|
|||
|
|
final colors = <Color>[
|
|||
|
|
HSVColor.fromAHSV(1, 0, 1, 1).toColor(),
|
|||
|
|
HSVColor.fromAHSV(1, 60, 1, 1).toColor(),
|
|||
|
|
HSVColor.fromAHSV(1, 120, 1, 1).toColor(),
|
|||
|
|
HSVColor.fromAHSV(1, 180, 1, 1).toColor(),
|
|||
|
|
HSVColor.fromAHSV(1, 240, 1, 1).toColor(),
|
|||
|
|
HSVColor.fromAHSV(1, 300, 1, 1).toColor(),
|
|||
|
|
HSVColor.fromAHSV(1, 360, 1, 1).toColor(),
|
|||
|
|
];
|
|||
|
|
final gradient = LinearGradient(colors: colors).createShader(rect);
|
|||
|
|
canvas.drawRect(rect, Paint()..shader = gradient..style = PaintingStyle.fill);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
bool shouldRepaint(covariant CustomPainter old) => false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _PickerThumb extends StatelessWidget {
|
|||
|
|
const _PickerThumb();
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
return Container(
|
|||
|
|
width: 16,
|
|||
|
|
height: 16,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
shape: BoxShape.circle,
|
|||
|
|
border: Border.all(color: Colors.white, width: 2),
|
|||
|
|
boxShadow: const [BoxShadow(color: Colors.black26, blurRadius: 2)],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Color? _parseColor(String? hex) {
|
|||
|
|
if (hex == null || hex.isEmpty) return null;
|
|||
|
|
final normalized = hex.trim();
|
|||
|
|
try {
|
|||
|
|
if (normalized.length == 7 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF${normalized.substring(1)}', radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 9 && normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse(normalized.substring(1), radix: 16));
|
|||
|
|
}
|
|||
|
|
if (normalized.length == 6 && !normalized.startsWith('#')) {
|
|||
|
|
return Color(int.parse('FF$normalized', radix: 16));
|
|||
|
|
}
|
|||
|
|
} catch (_) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
String _colorToHex(Color color) {
|
|||
|
|
final hex = color.value.toRadixString(16).padLeft(8, '0').toUpperCase();
|
|||
|
|
return '#${hex.substring(2)}';
|
|||
|
|
}
|