From 8dbf6ff4f306053983ce0f893be120d84989a073 Mon Sep 17 00:00:00 2001 From: LittleSheep Date: Wed, 10 Jul 2024 10:50:10 +0800 Subject: [PATCH] :sparkles: Articles --- lib/providers/content/feed.dart | 9 ++ lib/router.dart | 23 +++-- lib/screens/articles/article_detail.dart | 72 ++++++++++++++++ ...ticle_publish.dart => article_editor.dart} | 2 + lib/screens/feed.dart | 8 +- .../{post_publish.dart => post_editor.dart} | 0 lib/screens/realms/realm_view.dart | 4 +- lib/translations/en_us.dart | 6 +- lib/translations/zh_cn.dart | 6 +- lib/widgets/articles/article_action.dart | 4 +- lib/widgets/articles/article_item.dart | 70 +++++++++++---- lib/widgets/articles/article_list.dart | 85 +++++++++++++++++++ .../articles/article_quick_action.dart | 2 +- lib/widgets/feed/feed_list.dart | 11 +++ lib/widgets/posts/post_action.dart | 8 +- 15 files changed, 270 insertions(+), 40 deletions(-) create mode 100644 lib/screens/articles/article_detail.dart rename lib/screens/articles/{article_publish.dart => article_editor.dart} (98%) rename lib/screens/posts/{post_publish.dart => post_editor.dart} (100%) create mode 100644 lib/widgets/articles/article_list.dart diff --git a/lib/providers/content/feed.dart b/lib/providers/content/feed.dart index d54acb2..7efd4e1 100644 --- a/lib/providers/content/feed.dart +++ b/lib/providers/content/feed.dart @@ -73,4 +73,13 @@ class FeedProvider extends GetConnect { return resp; } + + Future getArticle(String alias) async { + final resp = await get('/api/articles/$alias'); + if (resp.statusCode != 200) { + throw Exception(resp.body); + } + + return resp; + } } diff --git a/lib/router.dart b/lib/router.dart index ebdc4f2..020007f 100644 --- a/lib/router.dart +++ b/lib/router.dart @@ -4,7 +4,8 @@ import 'package:solian/screens/about.dart'; import 'package:solian/screens/account.dart'; import 'package:solian/screens/account/friend.dart'; import 'package:solian/screens/account/personalize.dart'; -import 'package:solian/screens/articles/article_publish.dart'; +import 'package:solian/screens/articles/article_detail.dart'; +import 'package:solian/screens/articles/article_editor.dart'; import 'package:solian/screens/channel/channel_chat.dart'; import 'package:solian/screens/channel/channel_detail.dart'; import 'package:solian/screens/channel/channel_organize.dart'; @@ -17,7 +18,7 @@ import 'package:solian/screens/realms/realm_detail.dart'; import 'package:solian/screens/realms/realm_organize.dart'; import 'package:solian/screens/realms/realm_view.dart'; import 'package:solian/screens/feed.dart'; -import 'package:solian/screens/posts/post_publish.dart'; +import 'package:solian/screens/posts/post_editor.dart'; import 'package:solian/shells/basic_shell.dart'; import 'package:solian/shells/root_shell.dart'; import 'package:solian/shells/title_shell.dart'; @@ -77,8 +78,18 @@ abstract class AppRouter { ), ), GoRoute( - path: '/posts/publish', - name: 'postCreate', + path: '/articles/view/:alias', + name: 'articleDetail', + builder: (context, state) => TitleShell( + state: state, + child: ArticleDetailScreen( + alias: state.pathParameters['alias']!, + ), + ), + ), + GoRoute( + path: '/posts/editor', + name: 'postEditor', builder: (context, state) { final arguments = state.extra as PostPublishArguments?; return PostPublishScreen( @@ -90,8 +101,8 @@ abstract class AppRouter { }, ), GoRoute( - path: '/articles/publish', - name: 'articleCreate', + path: '/articles/editor', + name: 'articleEditor', builder: (context, state) { final arguments = state.extra as ArticlePublishArguments?; return ArticlePublishScreen( diff --git a/lib/screens/articles/article_detail.dart b/lib/screens/articles/article_detail.dart new file mode 100644 index 0000000..f6e9061 --- /dev/null +++ b/lib/screens/articles/article_detail.dart @@ -0,0 +1,72 @@ +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:solian/exts.dart'; +import 'package:solian/models/articles.dart'; +import 'package:solian/providers/content/feed.dart'; +import 'package:solian/widgets/articles/article_item.dart'; +import 'package:solian/widgets/centered_container.dart'; + +class ArticleDetailScreen extends StatefulWidget { + final String alias; + + const ArticleDetailScreen({super.key, required this.alias}); + + @override + State createState() => _ArticleDetailScreenState(); +} + +class _ArticleDetailScreenState extends State { + Article? item; + + Future getDetail() async { + final FeedProvider provider = Get.find(); + + try { + final resp = await provider.getArticle(widget.alias); + item = Article.fromJson(resp.body); + } catch (e) { + context.showErrorDialog(e).then((_) => Navigator.pop(context)); + } + + return item; + } + + @override + Widget build(BuildContext context) { + return Material( + color: Theme.of(context).colorScheme.surface, + child: FutureBuilder( + future: getDetail(), + builder: (context, snapshot) { + if (!snapshot.hasData || snapshot.data == null) { + return const Center( + child: CircularProgressIndicator(), + ); + } + + return CustomScrollView( + slivers: [ + SliverToBoxAdapter( + child: CenteredContainer( + child: ArticleItem( + item: item!, + isClickable: true, + isFullDate: true, + isFullContent: true, + ), + ), + ), + SliverToBoxAdapter( + child: const Divider(thickness: 0.3, height: 1) + .paddingOnly(top: 4), + ), + SliverToBoxAdapter( + child: SizedBox(height: MediaQuery.of(context).padding.bottom), + ), + ], + ); + }, + ), + ); + } +} diff --git a/lib/screens/articles/article_publish.dart b/lib/screens/articles/article_editor.dart similarity index 98% rename from lib/screens/articles/article_publish.dart rename to lib/screens/articles/article_editor.dart index b49c6b3..ea62d43 100644 --- a/lib/screens/articles/article_publish.dart +++ b/lib/screens/articles/article_editor.dart @@ -99,6 +99,8 @@ class _ArticlePublishScreenState extends State { void syncWidget() { if (widget.edit != null) { + _titleController.text = widget.edit!.title; + _descriptionController.text = widget.edit!.description; _contentController.text = widget.edit!.content; _attachments = widget.edit!.attachments ?? List.empty(); _isDraft = widget.edit!.isDraft ?? false; diff --git a/lib/screens/feed.dart b/lib/screens/feed.dart index a35d2b9..ff76099 100644 --- a/lib/screens/feed.dart +++ b/lib/screens/feed.dart @@ -115,12 +115,12 @@ class FeedCreationButton extends StatelessWidget { itemBuilder: (BuildContext context) => [ PopupMenuItem( child: ListTile( - title: Text('postCreate'.tr), + title: Text('postEditor'.tr), leading: const Icon(Icons.article), contentPadding: const EdgeInsets.symmetric(horizontal: 8), ), onTap: () { - AppRouter.instance.pushNamed('postCreate').then((val) { + AppRouter.instance.pushNamed('postEditor').then((val) { if (val != null && onCreated != null) { onCreated!(); } @@ -129,12 +129,12 @@ class FeedCreationButton extends StatelessWidget { ), PopupMenuItem( child: ListTile( - title: Text('articleCreate'.tr), + title: Text('articleEditor'.tr), leading: const Icon(Icons.newspaper), contentPadding: const EdgeInsets.symmetric(horizontal: 8), ), onTap: () { - AppRouter.instance.pushNamed('articleCreate').then((val) { + AppRouter.instance.pushNamed('articleEditor').then((val) { if (val != null && onCreated != null) { onCreated!(); } diff --git a/lib/screens/posts/post_publish.dart b/lib/screens/posts/post_editor.dart similarity index 100% rename from lib/screens/posts/post_publish.dart rename to lib/screens/posts/post_editor.dart diff --git a/lib/screens/realms/realm_view.dart b/lib/screens/realms/realm_view.dart index 28ee05d..2ae0729 100644 --- a/lib/screens/realms/realm_view.dart +++ b/lib/screens/realms/realm_view.dart @@ -12,7 +12,7 @@ import 'package:solian/providers/content/feed.dart'; import 'package:solian/providers/content/realm.dart'; import 'package:solian/router.dart'; import 'package:solian/screens/channel/channel_organize.dart'; -import 'package:solian/screens/posts/post_publish.dart'; +import 'package:solian/screens/posts/post_editor.dart'; import 'package:solian/theme.dart'; import 'package:solian/widgets/channel/channel_list.dart'; import 'package:solian/widgets/posts/post_list.dart'; @@ -210,7 +210,7 @@ class _RealmPostListWidgetState extends State { onTap: () { AppRouter.instance .pushNamed( - 'postCreate', + 'postEditor', extra: PostPublishArguments(realm: widget.realm), ) .then((value) { diff --git a/lib/translations/en_us.dart b/lib/translations/en_us.dart index 2aedb28..b7e8b42 100644 --- a/lib/translations/en_us.dart +++ b/lib/translations/en_us.dart @@ -23,6 +23,7 @@ const messagesEnglish = { 'delete': 'Delete', 'search': 'Search', 'post': 'Post', + 'article': 'Article', 'reply': 'Reply', 'repost': 'Repost', 'openInBrowser': 'Open in browser', @@ -77,8 +78,9 @@ const messagesEnglish = { 'notifyAllRead': 'Mark all as read', 'notifyEmpty': 'All notifications read', 'notifyEmptyCaption': 'It seems like nothing happened recently', - 'postCreate': 'Create new post', - 'articleCreate': 'Create new article', + 'postEditor': 'Create new post', + 'articleEditor': 'Create new article', + 'articleDetail': 'Article details', 'draftBoxOpen': 'Open draft box', 'postNew': 'Create a new post', 'postNewInRealmHint': 'Add post in realm @realm', diff --git a/lib/translations/zh_cn.dart b/lib/translations/zh_cn.dart index 0592375..b5368c1 100644 --- a/lib/translations/zh_cn.dart +++ b/lib/translations/zh_cn.dart @@ -23,6 +23,7 @@ const simplifiedChineseMessages = { 'apply': '应用', 'search': '搜索', 'post': '帖子', + 'article': '文章', 'reply': '回复', 'repost': '转帖', 'openInBrowser': '在浏览器中打开', @@ -71,8 +72,9 @@ const simplifiedChineseMessages = { 'notifyAllRead': '已读所有通知', 'notifyEmpty': '通知箱为空', 'notifyEmptyCaption': '看起来最近没发生什么呢', - 'postCreate': '发个帖子', - 'articleCreate': '撰写文章', + 'postEditor': '发个帖子', + 'articleEditor': '撰写文章', + 'articleDetail': '文章详情', 'draftBoxOpen': '打开草稿箱', 'postNew': '创建新帖子', 'postNewInRealmHint': '在领域 @realm 里发表新帖子', diff --git a/lib/widgets/articles/article_action.dart b/lib/widgets/articles/article_action.dart index af69716..28e5d3b 100644 --- a/lib/widgets/articles/article_action.dart +++ b/lib/widgets/articles/article_action.dart @@ -7,7 +7,7 @@ import 'package:solian/exts.dart'; import 'package:solian/models/articles.dart'; import 'package:solian/providers/auth.dart'; import 'package:solian/router.dart'; -import 'package:solian/screens/articles/article_publish.dart'; +import 'package:solian/screens/articles/article_editor.dart'; class ArticleAction extends StatefulWidget { final Article item; @@ -71,7 +71,7 @@ class _ArticleActionState extends State { title: Text('edit'.tr), onTap: () async { final value = await AppRouter.instance.pushNamed( - 'articleCreate', + 'articleEditor', extra: ArticlePublishArguments(edit: widget.item), ); if (value != null) { diff --git a/lib/widgets/articles/article_item.dart b/lib/widgets/articles/article_item.dart index a384a7e..d97579a 100644 --- a/lib/widgets/articles/article_item.dart +++ b/lib/widgets/articles/article_item.dart @@ -5,7 +5,6 @@ import 'package:solian/models/articles.dart'; import 'package:solian/widgets/account/account_avatar.dart'; import 'package:solian/widgets/account/account_profile_popup.dart'; import 'package:solian/widgets/articles/article_quick_action.dart'; -import 'package:solian/widgets/attachments/attachment_list.dart'; import 'package:solian/widgets/feed/feed_content.dart'; import 'package:solian/widgets/feed/feed_tags.dart'; import 'package:timeago/timeago.dart' show format; @@ -55,14 +54,14 @@ class _ArticleItemState extends State { Text( item.author.nick, style: const TextStyle(fontWeight: FontWeight.bold), - ).paddingOnly(left: 12), + ), buildDate().paddingOnly(left: 4), ], ); } Widget buildFooter() { - List labels = List.empty(growable: true); + List labels = List.from(['article'.tr], growable: true); if (widget.item.createdAt != widget.item.updatedAt) { labels.add('postEdited'.trParams({ 'date': DateFormat('yy/M/d H:m').format(item.updatedAt.toLocal()), @@ -103,10 +102,36 @@ class _ArticleItemState extends State { @override Widget build(BuildContext context) { if (!widget.isFullContent) { - return ListTile( - leading: AccountAvatar(content: item.author.avatar.toString()), - title: Text(item.title), - subtitle: Text(item.description), + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AccountAvatar(content: item.author.avatar.toString()), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildHeader(), + Text(item.title, style: const TextStyle(fontSize: 15)), + Text( + item.description, + style: TextStyle( + fontSize: 13, + color: Theme.of(context) + .colorScheme + .onSurface + .withOpacity(0.8), + ), + ), + buildFooter(), + ], + ).paddingOnly(left: 12), + ), + ], + ).paddingOnly( + top: 10, + bottom: 10, + right: 16, + left: 16, ); } @@ -135,13 +160,18 @@ class _ArticleItemState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ buildHeader(), - FeedContent(content: item.content).paddingOnly( - left: 12, - right: 8, + Text(item.title), + Text( + item.description, + style: TextStyle( + color: Theme.of(context) + .colorScheme + .onSurface + .withOpacity(0.8), + ), ), - buildFooter().paddingOnly(left: 12), ], - ), + ).paddingOnly(left: 12), ) ], ).paddingOnly( @@ -149,11 +179,17 @@ class _ArticleItemState extends State { right: 16, left: 16, ), - AttachmentList( - parentId: widget.item.alias, - attachmentsId: item.attachments ?? List.empty(), - divided: true, + const Divider(thickness: 0.3, height: 0.3).paddingSymmetric( + vertical: 10, ), + FeedContent(content: item.content).paddingSymmetric( + horizontal: 20, + ), + const Divider(thickness: 0.3, height: 0.3).paddingOnly( + top: 10, + bottom: 6, + ), + buildFooter().paddingOnly(left: 20), if (widget.isReactable) ArticleQuickAction( isReactable: widget.isReactable, @@ -166,7 +202,7 @@ class _ArticleItemState extends State { }, ).paddingOnly( top: 6, - left: 60, + left: 16, right: 16, bottom: 10, ) diff --git a/lib/widgets/articles/article_list.dart b/lib/widgets/articles/article_list.dart new file mode 100644 index 0000000..b23e96f --- /dev/null +++ b/lib/widgets/articles/article_list.dart @@ -0,0 +1,85 @@ +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart'; +import 'package:solian/models/articles.dart'; +import 'package:solian/router.dart'; +import 'package:solian/widgets/articles/article_action.dart'; +import 'package:solian/widgets/articles/article_item.dart'; +import 'package:solian/widgets/centered_container.dart'; + +class ArticleListWidget extends StatelessWidget { + final bool isShowEmbed; + final bool isClickable; + final bool isNestedClickable; + final PagingController controller; + + const ArticleListWidget({ + super.key, + required this.controller, + this.isShowEmbed = true, + this.isClickable = true, + this.isNestedClickable = true, + }); + + @override + Widget build(BuildContext context) { + return PagedSliverList.separated( + pagingController: controller, + builderDelegate: PagedChildBuilderDelegate
( + itemBuilder: (context, item, index) { + return RepaintBoundary( + child: CenteredContainer( + child: ArticleListEntryWidget( + isClickable: isClickable, + item: item, + onUpdate: () { + controller.refresh(); + }, + ), + ), + ); + }, + ), + separatorBuilder: (_, __) => const Divider(thickness: 0.3, height: 0.3), + ); + } +} + +class ArticleListEntryWidget extends StatelessWidget { + final bool isClickable; + final Article item; + final Function onUpdate; + + const ArticleListEntryWidget({ + super.key, + required this.isClickable, + required this.item, + required this.onUpdate, + }); + + @override + Widget build(BuildContext context) { + return GestureDetector( + child: ArticleItem( + key: Key('a${item.alias}'), + item: item, + ).paddingSymmetric(vertical: 8), + onTap: () { + if (!isClickable) return; + AppRouter.instance.pushNamed( + 'articleDetail', + pathParameters: {'alias': item.alias}, + ); + }, + onLongPress: () { + showModalBottomSheet( + useRootNavigator: true, + context: context, + builder: (context) => ArticleAction(item: item), + ).then((value) { + if (value != null) onUpdate(); + }); + }, + ); + } +} diff --git a/lib/widgets/articles/article_quick_action.dart b/lib/widgets/articles/article_quick_action.dart index 3639d5e..f5bc60f 100644 --- a/lib/widgets/articles/article_quick_action.dart +++ b/lib/widgets/articles/article_quick_action.dart @@ -50,7 +50,7 @@ class _ArticleQuickActionState extends State { setState(() => _isSubmitting = true); - final resp = await client.post('/api/posts/${widget.item.alias}/react', { + final resp = await client.post('/api/articles/${widget.item.alias}/react', { 'symbol': symbol, 'attitude': attitude, }); diff --git a/lib/widgets/feed/feed_list.dart b/lib/widgets/feed/feed_list.dart index c537248..c4e65af 100644 --- a/lib/widgets/feed/feed_list.dart +++ b/lib/widgets/feed/feed_list.dart @@ -1,7 +1,9 @@ import 'package:flutter/material.dart'; import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart'; +import 'package:solian/models/articles.dart'; import 'package:solian/models/feed.dart'; import 'package:solian/models/post.dart'; +import 'package:solian/widgets/articles/article_list.dart'; import 'package:solian/widgets/centered_container.dart'; import 'package:solian/widgets/posts/post_list.dart'; @@ -41,6 +43,15 @@ class FeedListWidget extends StatelessWidget { controller.refresh(); }, ); + case 'article': + final data = Article.fromJson(item.data); + return ArticleListEntryWidget( + isClickable: isClickable, + item: data, + onUpdate: () { + controller.refresh(); + }, + ); default: return const SizedBox(); } diff --git a/lib/widgets/posts/post_action.dart b/lib/widgets/posts/post_action.dart index 583e583..c07e3eb 100644 --- a/lib/widgets/posts/post_action.dart +++ b/lib/widgets/posts/post_action.dart @@ -8,7 +8,7 @@ import 'package:solian/exts.dart'; import 'package:solian/models/post.dart'; import 'package:solian/providers/auth.dart'; import 'package:solian/router.dart'; -import 'package:solian/screens/posts/post_publish.dart'; +import 'package:solian/screens/posts/post_editor.dart'; class PostAction extends StatefulWidget { final Post item; @@ -73,7 +73,7 @@ class _PostActionState extends State { title: Text('reply'.tr), onTap: () async { final value = await AppRouter.instance.pushNamed( - 'postCreate', + 'postEditor', extra: PostPublishArguments(reply: widget.item), ); if (value != null) { @@ -88,7 +88,7 @@ class _PostActionState extends State { title: Text('repost'.tr), onTap: () async { final value = await AppRouter.instance.pushNamed( - 'postCreate', + 'postEditor', extra: PostPublishArguments(repost: widget.item), ); if (value != null) { @@ -106,7 +106,7 @@ class _PostActionState extends State { title: Text('edit'.tr), onTap: () async { final value = await AppRouter.instance.pushNamed( - 'postCreate', + 'postEditor', extra: PostPublishArguments(edit: widget.item), ); if (value != null) {