HCha/PiliPlus
1
0
Fork 0
mirror of https://github.com/HChaZZY/PiliPlus.git synced 2025-12-06 09:13:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

refa: article (#757)

Browse Source 
Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
This commit is contained in:
dom
2025-04-26 14:54:22 +08:00
committed by GitHub
parent 64f7ba2a1a
commit 40fb93f036
87 changed files with 2628 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
lib/pages/article/controller.dart Normal file
View File

@@ -0,0 +1,198 @@
import 'package:PiliPlus/grpc/app/main/community/reply/v1/reply.pb.dart';
import 'package:PiliPlus/http/dynamics.dart';
import 'package:PiliPlus/http/loading_state.dart';
import 'package:PiliPlus/http/user.dart';
import 'package:PiliPlus/http/video.dart';
import 'package:PiliPlus/models/dynamics/article_view/data.dart';
import 'package:PiliPlus/models/dynamics/opus_detail/data.dart';
import 'package:PiliPlus/models/dynamics/opus_detail/favorite.dart';
import 'package:PiliPlus/models/dynamics/result.dart';
import 'package:PiliPlus/pages/common/reply_controller.dart';
import 'package:PiliPlus/pages/mine/controller.dart';
import 'package:PiliPlus/utils/storage.dart';
import 'package:PiliPlus/utils/url_utils.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';
import 'package:PiliPlus/http/reply.dart';
import 'package:fixnum/fixnum.dart' as $fixnum;
class ArticleController extends ReplyController<MainListReply> {
late String id;
late String type;
late final String url;
late int commentType;
dynamic commentId;
RxBool showTitle = false.obs;
late final horizontalPreview = GStorage.horizontalPreview;
late final showDynActionBar = GStorage.showDynActionBar;
@override
dynamic get sourceId => id;
RxBool isLoaded = false.obs;
late ArticleData articleData;
late OpusData opusData;
late final Rx<DynamicItemModel> item = DynamicItemModel().obs;
late final RxMap favStat = <dynamic, dynamic>{'status': false}.obs;
@override
void onInit() {
super.onInit();
id = Get.parameters['id']!;
type = Get.parameters['type']!;
// to opus
if (type == 'read') {
UrlUtils.parseRedirectUrl('https://www.bilibili.com/read/cv$id/')
.then((url) {
if (url != null) {
id = url.split('/').last;
type = 'opus';
}
init();
});
} else {
init();
}
}
init() {
url = type == 'read'
? 'https://www.bilibili.com/read/cv$id'
: 'https://www.bilibili.com/opus/$id';
commentType = type == 'picture' ? 11 : 12;
if (Get.arguments?['item'] is DynamicItemModel) {
item.value = Get.arguments['item'];
}
_queryDynItem();
_queryContent();
}
_queryDynItem() async {
if (showDynActionBar) {
if (type == 'read') {
if (item.value.idStr == null) {
UrlUtils.parseRedirectUrl('https://www.bilibili.com/read/cv$id/')
.then((url) {
if (url != null) {
_queryDyn(url.split('/').last);
}
});
}
_queryInfo();
} else {
_queryDyn(id);
}
}
}
_queryInfo() {
DynamicsHttp.articleInfo(cvId: id).then((res) {
if (res['status']) {
favStat.addAll({
'status': true,
'isFav': res['data']?['favorite'] ?? false,
'favNum': res['data']?['stats']?['favorite'] ?? 0,
'data': res['data'],
});
}
});
}
_queryDyn(id) {
if (item.value.idStr != null) {
return;
}
DynamicsHttp.dynamicDetail(id: id).then((res) {
if (res['status']) {
item.value = res['data'];
}
});
}
Future _queryContent() async {
final res = type == 'read'
? await DynamicsHttp.articleView(cvId: id)
: await DynamicsHttp.opusDetail(opusId: id);
if (res['status']) {
if (type == 'read') {
articleData = res['data'];
commentId = int.parse(id);
} else {
opusData = res['data'];
// fallback
if (opusData.fallback?.id != null) {
id = opusData.fallback!.id!;
type = 'read';
commentType = 12;
_queryInfo();
_queryContent();
return;
} else {
commentType = opusData.item?.basic?.commentType ??
(type == 'picture' ? 11 : 12);
commentId = int.parse(opusData.item!.basic!.commentIdStr!);
Favorite? favorite =
opusData.item?.modules?.lastOrNull?.moduleStat?.favorite;
favStat.addAll({
'status': true,
'isFav': favorite?.status ?? false,
'favNum': favorite?.count ?? 0,
});
}
}
isLoaded.value = true;
if (isLogin && !MineController.anonymity.value) {
VideoHttp.historyReport(aid: commentId, type: 5);
}
queryData();
}
}
@override
List<ReplyInfo>? getDataList(MainListReply response) {
return response.replies;
}
@override
Future<LoadingState<MainListReply>> customGetData() {
return ReplyHttp.replyListGrpc(
type: commentType,
oid: commentId,
cursor: CursorReq(
next: cursor?.next ?? $fixnum.Int64(0),
mode: mode.value,
),
antiGoodsReply: antiGoodsReply,
);
}
Future onFav() async {
bool isFav = favStat['isFav'] == true;
final res = type == 'read'
? isFav
? await UserHttp.delFavArticle(id: id)
: await UserHttp.addFavArticle(id: id)
: await UserHttp.communityAction(opusId: id, action: isFav ? 4 : 3);
if (res['status']) {
favStat['isFav'] = !isFav;
if (isFav) {
favStat['favNum'] -= 1;
} else {
favStat['favNum'] += 1;
}
SmartDialog.showToast('${isFav ? '取消' : ''}收藏成功');
} else {
SmartDialog.showToast(res['msg']);
}
}
}

989
lib/pages/article/view.dart Normal file
View File

@@ -0,0 +1,989 @@
import 'dart:math';
import 'package:PiliPlus/common/widgets/network_img_layer.dart';
import 'package:PiliPlus/pages/article/widgets/opus_content.dart';
import 'package:PiliPlus/pages/article/widgets/html_render.dart';
import 'package:PiliPlus/common/widgets/http_error.dart';
import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
import 'package:PiliPlus/grpc/app/main/community/reply/v1/reply.pb.dart';
import 'package:PiliPlus/http/loading_state.dart';
import 'package:PiliPlus/models/common/reply_sort_type.dart';
import 'package:PiliPlus/pages/dynamics/repost_dyn_panel.dart';
import 'package:PiliPlus/pages/video/detail/reply/widgets/reply_item_grpc.dart';
import 'package:PiliPlus/utils/extension.dart';
import 'package:PiliPlus/utils/page_utils.dart';
import 'package:PiliPlus/utils/request_utils.dart';
import 'package:PiliPlus/utils/storage.dart';
import 'package:PiliPlus/utils/utils.dart';
import 'package:easy_debounce/easy_throttle.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';
import 'package:PiliPlus/common/skeleton/video_reply.dart';
import 'package:PiliPlus/models/common/reply_type.dart';
import 'package:PiliPlus/pages/video/detail/reply_reply/index.dart';
import 'package:PiliPlus/utils/feed_back.dart';
import 'package:html/parser.dart' as parser;
import '../../utils/grid.dart';
import 'controller.dart';
class ArticlePage extends StatefulWidget {
const ArticlePage({super.key});
@override
State<ArticlePage> createState() => _ArticlePageState();
}
class _ArticlePageState extends State<ArticlePage>
with TickerProviderStateMixin {
final ArticleController _articleCtr = Get.put(
ArticleController(),
tag: Utils.generateRandomString(8),
);
bool _isFabVisible = true;
bool? _imageStatus;
late AnimationController fabAnimationCtr;
late final List<double> _ratio = GStorage.dynamicDetailRatio;
bool get _horizontalPreview =>
context.orientation == Orientation.landscape &&
_articleCtr.horizontalPreview;
late final _key = GlobalKey<ScaffoldState>();
get _getImageCallback => _horizontalPreview
? (imgList, index) {
_imageStatus = true;
bool isFabVisible = _isFabVisible;
if (isFabVisible) {
_hideFab();
}
final ctr = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 200),
)..forward();
PageUtils.onHorizontalPreview(
_key,
AnimationController(
vsync: this,
duration: Duration.zero,
),
ctr,
imgList,
index,
(value) async {
_imageStatus = null;
if (isFabVisible) {
isFabVisible = false;
_showFab();
}
if (value == false) {
await ctr.reverse();
}
try {
ctr.dispose();
} catch (_) {}
if (value == false) {
Get.back();
}
},
);
}
: null;
@override
void initState() {
super.initState();
fabAnimationCtr = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
fabAnimationCtr.forward();
_articleCtr.scrollController.addListener(listener);
}
@override
void dispose() {
fabAnimationCtr.dispose();
_articleCtr.scrollController.removeListener(listener);
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_articleCtr.scrollController.hasClients) {
_articleCtr.showTitle.value =
_articleCtr.scrollController.positions.last.pixels >= 45;
}
});
}
void listener() {
_articleCtr.showTitle.value =
_articleCtr.scrollController.positions.last.pixels >= 45;
final ScrollDirection direction1 =
_articleCtr.scrollController.positions.first.userScrollDirection;
late final ScrollDirection direction2 =
_articleCtr.scrollController.positions.last.userScrollDirection;
if (direction1 == ScrollDirection.forward ||
direction2 == ScrollDirection.forward) {
_showFab();
} else if (direction1 == ScrollDirection.reverse ||
direction2 == ScrollDirection.reverse) {
_hideFab();
}
}
void _showFab() {
if (!_isFabVisible) {
_isFabVisible = true;
fabAnimationCtr.forward();
}
}
void _hideFab() {
if (_isFabVisible) {
_isFabVisible = false;
fabAnimationCtr.reverse();
}
}
void replyReply(BuildContext context, ReplyInfo replyItem, int? id) {
EasyThrottle.throttle('replyReply', const Duration(milliseconds: 500), () {
int oid = replyItem.oid.toInt();
int rpid = replyItem.id.toInt();
Widget replyReplyPage(
[bool automaticallyImplyLeading = true,
VoidCallback? onDispose]) =>
Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: const Text('评论详情'),
titleSpacing: automaticallyImplyLeading ? null : 12,
automaticallyImplyLeading: automaticallyImplyLeading,
),
body: SafeArea(
top: false,
bottom: false,
child: VideoReplyReplyPanel(
id: id,
oid: oid,
rpid: rpid,
source: 'dynamic',
replyType: ReplyType.values[_articleCtr.commentType],
firstFloor: replyItem,
onDispose: onDispose,
),
),
);
if (this.context.orientation == Orientation.portrait) {
Get.to(
replyReplyPage,
routeName: 'htmlRender-Copy',
arguments: {
'id': _articleCtr.id,
},
);
} else {
ScaffoldState? scaffoldState = Scaffold.maybeOf(context);
if (scaffoldState != null) {
bool isFabVisible = _isFabVisible;
if (isFabVisible) {
_hideFab();
}
scaffoldState.showBottomSheet(
backgroundColor: Colors.transparent,
(context) => MediaQuery.removePadding(
context: context,
removeLeft: true,
child: replyReplyPage(
false,
() {
if (isFabVisible && _imageStatus != true) {
_showFab();
}
},
),
),
);
} else {
Get.to(
replyReplyPage,
routeName: 'htmlRender-Copy',
arguments: {
'id': _articleCtr.id,
},
);
}
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: _buildAppBar,
body: Stack(
children: [
SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (context) {
final isPortrait = context.orientation == Orientation.portrait;
double padding =
max(context.width / 2 - Grid.smallCardWidth, 0);
if (isPortrait) {
return LayoutBuilder(builder: (context, constraints) {
final maxWidth = constraints.maxWidth - 2 * padding - 24;
return Padding(
padding: EdgeInsets.symmetric(horizontal: padding),
child: CustomScrollView(
controller: _articleCtr.scrollController,
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
_buildContent(maxWidth),
SliverToBoxAdapter(
child: Divider(
thickness: 8,
color: Theme.of(context)
.dividerColor
.withOpacity(0.05),
),
),
_buildReplyHeader,
Obx(() =>
_buildReplyList(_articleCtr.loadingState.value)),
],
),
);
});
} else {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: _ratio[0].toInt(),
child: LayoutBuilder(
builder: (context, constraints) {
final maxWidth =
constraints.maxWidth - padding / 4 - 24;
return CustomScrollView(
controller: _articleCtr.scrollController,
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverPadding(
padding: EdgeInsets.only(
left: padding / 4,
bottom:
MediaQuery.paddingOf(context).bottom +
80,
),
sliver: _buildContent(maxWidth),
),
],
);
},
),
),
VerticalDivider(
thickness: 8,
color: Theme.of(context).dividerColor.withOpacity(0.05),
),
Expanded(
flex: _ratio[1].toInt(),
child: Scaffold(
key: _key,
backgroundColor: Colors.transparent,
body: refreshIndicator(
onRefresh: () async {
await _articleCtr.onRefresh();
},
child: Padding(
padding: EdgeInsets.only(right: padding / 4),
child: CustomScrollView(
controller: _articleCtr.scrollController,
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
_buildReplyHeader,
Obx(() => _buildReplyList(
_articleCtr.loadingState.value)),
],
),
),
),
),
),
],
);
}
},
),
),
_buildBottom,
],
),
);
}
Widget _buildContent(double maxWidth) => SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
sliver: Obx(
() {
if (_articleCtr.isLoaded.value) {
if (_articleCtr.type == 'read') {
var res = parser.parse(_articleCtr.articleData.content);
return SliverMainAxisGroup(
slivers: [
if (_articleCtr.articleData.title != null)
SliverToBoxAdapter(
child: Text(
_articleCtr.articleData.title!,
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: GestureDetector(
onTap: () {
Get.toNamed(
'/member?mid=${_articleCtr.articleData.author?.mid}');
},
child: Row(
children: [
NetworkImgLayer(
width: 40,
height: 40,
type: 'avatar',
src: _articleCtr.articleData.author?.face,
),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_articleCtr.articleData.author?.name ?? "",
style: TextStyle(
fontSize: Theme.of(context)
.textTheme
.titleSmall!
.fontSize,
),
),
if (_articleCtr.articleData.publishTime !=
null)
Text(
Utils.dateFormat(
_articleCtr.articleData.publishTime),
style: TextStyle(
color: Theme.of(context)
.colorScheme
.outline,
fontSize: Theme.of(context)
.textTheme
.labelSmall!
.fontSize,
),
),
],
),
],
),
),
),
),
SliverList.separated(
itemCount: res.body!.children.length,
itemBuilder: (context, index) {
return htmlRender(
context: context,
element: res.body!.children[index],
maxWidth: maxWidth,
callback: _getImageCallback,
);
},
separatorBuilder: (context, index) =>
const SizedBox(height: 10),
),
],
);
} else {
return opusContent(
context: context,
modules: _articleCtr.opusData.item?.modules,
callback: _getImageCallback,
maxWidth: maxWidth,
);
}
}
return const SliverToBoxAdapter();
},
),
);
Widget _buildReplyList(LoadingState<List<ReplyInfo>?> loadingState) {
return switch (loadingState) {
Loading() => SliverList.builder(
itemCount: 5,
itemBuilder: (context, index) {
return const VideoReplySkeleton();
},
),
Success() => loadingState.response?.isNotEmpty == true
? SliverList.builder(
itemCount: loadingState.response!.length + 1,
itemBuilder: (context, index) {
if (index == loadingState.response!.length) {
_articleCtr.onLoadMore();
return Container(
alignment: Alignment.center,
margin: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom),
height: 125,
child: Text(
_articleCtr.isEnd.not
? '加载中...'
: loadingState.response!.isEmpty
? '还没有评论'
: '没有更多了',
style: TextStyle(
fontSize: 12,
color: Theme.of(context).colorScheme.outline,
),
),
);
} else {
return ReplyItemGrpc(
replyItem: loadingState.response![index],
replyLevel: '1',
replyReply: (replyItem, id) =>
replyReply(context, replyItem, id),
onReply: () {
_articleCtr.onReply(
context,
replyItem: loadingState.response![index],
index: index,
);
},
onDelete: (subIndex) =>
_articleCtr.onRemove(index, subIndex),
upMid: _articleCtr.upMid,
callback: _getImageCallback,
onCheckReply: (item) =>
_articleCtr.onCheckReply(context, item),
onToggleTop: (isUpTop, rpid) => _articleCtr.onToggleTop(
index,
_articleCtr.commentId,
_articleCtr.commentType,
isUpTop,
rpid,
),
);
}
},
)
: HttpError(
onReload: _articleCtr.onReload,
),
Error() => HttpError(
errMsg: loadingState.errMsg,
onReload: _articleCtr.onReload,
),
LoadingState() => throw UnimplementedError(),
};
}
Widget get _buildReplyHeader {
return SliverToBoxAdapter(
child: Container(
height: 45,
padding: const EdgeInsets.only(left: 12, right: 6),
child: Row(
children: [
const Text('回复'),
const Spacer(),
SizedBox(
height: 35,
child: TextButton.icon(
onPressed: () => _articleCtr.queryBySort(),
icon: const Icon(Icons.sort, size: 16),
label: Obx(
() => Text(
_articleCtr.sortType.value.label,
style: const TextStyle(fontSize: 13),
),
),
),
)
],
),
),
);
}
PreferredSizeWidget get _buildAppBar => AppBar(
title: Obx(() {
if (_articleCtr.isLoaded.value && _articleCtr.showTitle.value) {
return Text(_articleCtr.type == 'read'
? _articleCtr.articleData.title ?? ''
: _articleCtr.opusData.item?.modules?.firstOrNull?.moduleTitle
?.text ??
'');
}
return const SizedBox.shrink();
}),
actions: [
const SizedBox(width: 4),
if (context.orientation == Orientation.landscape)
IconButton(
tooltip: '页面比例调节',
onPressed: () {
showDialog(
context: context,
builder: (context) => Align(
alignment: Alignment.topRight,
child: Container(
margin: EdgeInsets.only(
top: 56,
right: 16,
),
width: context.width / 4,
height: 32,
child: Builder(
builder: (context) => Slider(
min: 1,
max: 100,
value: _ratio.first,
onChanged: (value) async {
if (value >= 10 && value <= 90) {
_ratio[0] = value;
_ratio[1] = 100 - value;
await GStorage.setting.put(
SettingBoxKey.dynamicDetailRatio,
_ratio,
);
(context as Element).markNeedsBuild();
setState(() {});
}
},
),
),
),
),
);
},
icon: Transform.rotate(
angle: pi / 2,
child: Icon(Icons.splitscreen, size: 19),
),
),
IconButton(
tooltip: '浏览器打开',
onPressed: () {
PageUtils.inAppWebview(_articleCtr.url);
},
icon: const Icon(Icons.open_in_browser_outlined, size: 19),
),
PopupMenuButton(
icon: const Icon(Icons.more_vert, size: 19),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
PopupMenuItem(
onTap: () => Utils.copyText(_articleCtr.url),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.copy_rounded, size: 19),
SizedBox(width: 10),
Text('复制链接'),
],
),
),
PopupMenuItem(
onTap: () => Utils.shareText(_articleCtr.url),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.share_outlined, size: 19),
SizedBox(width: 10),
Text('分享'),
],
),
),
if (_articleCtr.type == 'read' && _articleCtr.favStat['status'])
PopupMenuItem(
onTap: () {
try {
PageUtils.pmShare(
content: {
"id": _articleCtr.id,
"title": "- 哔哩哔哩专栏",
"headline": _articleCtr.favStat['data']['title'],
"source": 6,
"thumb": (_articleCtr.favStat['data']
['origin_image_urls'] as List?)
?.firstOrNull ??
'',
"author": _articleCtr.favStat['data']['author_name'],
"author_id":
_articleCtr.favStat['data']['mid'].toString(),
},
);
} catch (e) {
SmartDialog.showToast(e.toString());
}
},
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.forward_to_inbox, size: 19),
SizedBox(width: 10),
Text('分享至动态'),
],
),
),
],
),
const SizedBox(width: 6)
],
);
Widget get _buildBottom => Positioned(
left: 0,
bottom: 0,
right: 0,
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 1),
end: const Offset(0, 0),
).animate(CurvedAnimation(
parent: fabAnimationCtr,
curve: Curves.easeInOut,
)),
child: Builder(
builder: (context) {
Widget button() => FloatingActionButton(
heroTag: null,
onPressed: () {
feedBack();
_articleCtr.onReply(
context,
oid: _articleCtr.commentId,
replyType: ReplyType.values[_articleCtr.commentType],
);
},
tooltip: '评论动态',
child: const Icon(Icons.reply),
);
return _articleCtr.showDynActionBar.not
? Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(
right: 14,
bottom: MediaQuery.of(context).padding.bottom + 14,
),
child: button(),
),
)
: Obx(
() => Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: EdgeInsets.only(
right: 14,
bottom: 14 +
(_articleCtr.favStat['status']
? 0
: MediaQuery.of(context).padding.bottom),
),
child: button(),
),
_articleCtr.favStat['status']
? Container(
decoration: BoxDecoration(
color:
Theme.of(context).colorScheme.surface,
border: Border(
top: BorderSide(
color: Theme.of(context)
.colorScheme
.outline
.withOpacity(0.08),
),
),
),
padding: EdgeInsets.only(
bottom:
MediaQuery.paddingOf(context).bottom),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Builder(
builder: (btnContext) =>
TextButton.icon(
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
builder: (context) =>
RepostPanel(
item: _articleCtr.item.value,
callback: () {
int count = int.tryParse(
_articleCtr
.item
.value
.modules
?.moduleStat
?.forward
?.count ??
'0') ??
0;
_articleCtr
.item
.value
.modules
?.moduleStat
?.forward!
.count =
(count + 1).toString();
if (btnContext.mounted) {
(btnContext as Element?)
?.markNeedsBuild();
}
},
),
);
},
icon: Icon(
FontAwesomeIcons.shareFromSquare,
size: 16,
color: Theme.of(context)
.colorScheme
.outline,
semanticLabel: "转发",
),
style: TextButton.styleFrom(
padding:
const EdgeInsets.fromLTRB(
15, 0, 15, 0),
foregroundColor: Theme.of(context)
.colorScheme
.outline,
),
label: Text(
_articleCtr
.item
.value
.modules
?.moduleStat
?.forward!
.count !=
null
? Utils.numFormat(_articleCtr
.item
.value
.modules
?.moduleStat
?.forward!
.count)
: '转发',
),
),
),
),
Expanded(
child: TextButton.icon(
onPressed: () {
Utils.shareText(_articleCtr.url);
},
icon: Icon(
FontAwesomeIcons.shareNodes,
size: 16,
color: Theme.of(context)
.colorScheme
.outline,
semanticLabel: "分享",
),
style: TextButton.styleFrom(
padding: const EdgeInsets.fromLTRB(
15, 0, 15, 0),
foregroundColor: Theme.of(context)
.colorScheme
.outline,
),
label: const Text('分享'),
),
),
if (_articleCtr.favStat['status'])
Expanded(
child: TextButton.icon(
onPressed: () {
_articleCtr.onFav();
},
icon: Icon(
_articleCtr.favStat['isFav'] ==
true
? FontAwesomeIcons.solidStar
: FontAwesomeIcons.star,
size: 16,
color: _articleCtr
.favStat['isFav'] ==
true
? Theme.of(context)
.colorScheme
.primary
: Theme.of(context)
.colorScheme
.outline,
semanticLabel: "收藏",
),
style: TextButton.styleFrom(
padding:
const EdgeInsets.fromLTRB(
15, 0, 15, 0),
foregroundColor: Theme.of(context)
.colorScheme
.outline,
),
label: Text(_articleCtr
.favStat['favNum']
.toString()),
),
),
Expanded(
child: Builder(
builder: (context) => TextButton.icon(
onPressed: () =>
RequestUtils.onLikeDynamic(
_articleCtr.item.value,
() {
if (context.mounted) {
(context as Element?)
?.markNeedsBuild();
}
},
),
icon: Icon(
_articleCtr
.item
.value
.modules
?.moduleStat
?.like
?.status ==
true
? FontAwesomeIcons
.solidThumbsUp
: FontAwesomeIcons.thumbsUp,
size: 16,
color: _articleCtr
.item
.value
.modules
?.moduleStat
?.like
?.status ==
true
? Theme.of(context)
.colorScheme
.primary
: Theme.of(context)
.colorScheme
.outline,
semanticLabel: _articleCtr
.item
.value
.modules
?.moduleStat
?.like
?.status ==
true
? "已赞"
: "点赞",
),
style: TextButton.styleFrom(
padding:
const EdgeInsets.fromLTRB(
15, 0, 15, 0),
foregroundColor: Theme.of(context)
.colorScheme
.outline,
),
label: AnimatedSwitcher(
duration: const Duration(
milliseconds: 400),
transitionBuilder: (Widget child,
Animation<double> animation) {
return ScaleTransition(
scale: animation,
child: child);
},
child: Text(
_articleCtr
.item
.value
.modules
?.moduleStat
?.like
?.count !=
null
? Utils.numFormat(
_articleCtr
.item
.value
.modules!
.moduleStat!
.like!
.count)
: '点赞',
style: TextStyle(
color: _articleCtr
.item
.value
.modules
?.moduleStat
?.like
?.status ==
true
? Theme.of(context)
.colorScheme
.primary
: Theme.of(context)
.colorScheme
.outline,
),
),
),
),
),
),
],
),
)
: const SizedBox.shrink(),
],
),
);
},
),
),
);
}

128
lib/pages/article/widgets/html_render.dart Normal file
View File

@@ -0,0 +1,128 @@
import 'package:PiliPlus/common/widgets/interactiveviewer_gallery/interactiveviewer_gallery.dart'
show SourceModel;
import 'package:PiliPlus/utils/extension.dart';
import 'package:PiliPlus/utils/utils.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import '../../../common/widgets/network_img_layer.dart';
import 'package:html/dom.dart' as dom;
Widget htmlRender({
required BuildContext context,
required dom.Element element,
int? imgCount,
List<String>? imgList,
required double maxWidth,
Function(List<String>, int)? callback,
}) {
debugPrint('htmlRender');
return SelectionArea(
child: Html.fromElement(
documentElement: element,
onLinkTap: (String? url, Map<String, String> buildContext, attributes) {},
extensions: [
TagExtension(
tagsToExtend: <String>{'img'},
builder: (ExtensionContext extensionContext) {
try {
final Map<String, dynamic> attributes = extensionContext.attributes;
final List<dynamic> key = attributes.keys.toList();
String imgUrl = key.contains('src')
? attributes['src'] as String
: attributes['data-src'] as String;
imgUrl = imgUrl.contains('@') ? imgUrl.split('@').first : imgUrl;
final bool isEmote = imgUrl.contains('/emote/');
final bool isMall = imgUrl.contains('/mall/');
if (isMall) {
return const SizedBox.shrink();
}
String? clazz = attributes['class'];
String? height = RegExp(r'max-height:(\d+)px')
.firstMatch('${attributes['style']}')
?.group(1);
if (clazz?.contains('cut-off') == true || height != null) {
return CachedNetworkImage(
width: maxWidth,
height: height != null ? double.parse(height) : null,
imageUrl: Utils.thumbnailImgUrl(imgUrl),
fit: BoxFit.contain,
);
}
return Hero(
tag: imgUrl,
child: GestureDetector(
onTap: () {
if (callback != null) {
callback([imgUrl], 0);
} else {
context.imageView(
imgList: [SourceModel(url: imgUrl)],
);
}
},
child: NetworkImgLayer(
width: isEmote ? 22 : maxWidth,
height: isEmote ? 22 : null,
src: imgUrl,
),
),
);
} catch (err) {
return const SizedBox.shrink();
}
},
),
],
style: {
'html': Style(
fontSize: FontSize(16),
lineHeight: LineHeight.percent(160),
letterSpacing: 0.3,
),
'body': Style(margin: Margins.zero, padding: HtmlPaddings.zero),
'a': Style(
color: Theme.of(context).colorScheme.primary,
textDecoration: TextDecoration.none,
),
'br': Style(
lineHeight: LineHeight.percent(-1),
),
'p': Style(
margin: Margins.only(bottom: 4),
),
'span': Style(
fontSize: FontSize.large,
height: Height(1.8),
),
'div': Style(height: Height.auto()),
'li > p': Style(
display: Display.inline,
),
'li': Style(
padding: HtmlPaddings.only(bottom: 4),
textAlign: TextAlign.justify,
),
'img': Style(margin: Margins.only(top: 4, bottom: 4)),
'h1,h2': Style(
fontSize: FontSize.xLarge,
fontWeight: FontWeight.bold,
margin: Margins.only(bottom: 8),
),
'h3,h4,h5': Style(
fontSize: FontSize(16),
fontWeight: FontWeight.bold,
margin: Margins.only(bottom: 4),
),
'figcaption': Style(
fontSize: FontSize.large,
textAlign: TextAlign.center,
),
'strong': Style(fontWeight: FontWeight.bold),
'figure': Style(
margin: Margins.zero,
),
},
));
}

196
lib/pages/article/widgets/opus_content.dart Normal file
View File

@@ -0,0 +1,196 @@
import 'package:PiliPlus/common/widgets/interactiveviewer_gallery/interactiveviewer_gallery.dart'
show SourceModel;
import 'package:PiliPlus/common/widgets/network_img_layer.dart';
import 'package:PiliPlus/models/dynamics/opus_detail/module.dart';
import 'package:PiliPlus/utils/app_scheme.dart';
import 'package:PiliPlus/utils/extension.dart';
import 'package:PiliPlus/utils/utils.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
Widget opusContent({
required BuildContext context,
required List<OpusModule>? modules,
Function(List<String>, int)? callback,
required double maxWidth,
}) {
debugPrint('opusContent');
if (modules.isNullOrEmpty) {
return const SliverToBoxAdapter();
}
return SliverMainAxisGroup(
slivers: modules!.map<Widget>((item) {
try {
return switch (item.moduleType) {
//
'MODULE_TYPE_TITLE' => SliverToBoxAdapter(
child: Text(
item.moduleTitle!.text!,
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
),
//
'MODULE_TYPE_AUTHOR' => SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: GestureDetector(
onTap: () {
Get.toNamed('/member?mid=${item.moduleAuthor?.mid}');
},
child: Row(
children: [
NetworkImgLayer(
width: 40,
height: 40,
type: 'avatar',
src: item.moduleAuthor?.face,
),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.moduleAuthor!.name!,
style: TextStyle(
fontSize: Theme.of(context)
.textTheme
.titleSmall!
.fontSize,
),
),
if (item.moduleAuthor?.pubTime != null)
Text(
item.moduleAuthor!.pubTime!,
style: TextStyle(
color: Theme.of(context).colorScheme.outline,
fontSize: Theme.of(context)
.textTheme
.labelSmall!
.fontSize,
),
),
],
),
],
),
),
),
),
//
'MODULE_TYPE_CONTENT' => SliverList.separated(
itemCount: item.moduleContent!.paragraphs!.length,
itemBuilder: (context, index) {
final element = item.moduleContent!.paragraphs![index];
if ((element.paraType == 1 || element.paraType == 4)) {
return SelectableText.rich(
textAlign: element.align == 1 ? TextAlign.center : null,
TextSpan(
children: element.text?.nodes!.map<TextSpan>((item) {
if (item.rich != null) {
return TextSpan(
text: '\u{1F517}${item.rich?.text}',
style: TextStyle(
decoration: item.rich?.style?.strikethrough == true
? TextDecoration.lineThrough
: null,
fontStyle: item.rich?.style?.italic == true
? FontStyle.italic
: null,
fontWeight: item.rich?.style?.bold == true
? FontWeight.bold
: null,
color: Theme.of(context).colorScheme.primary,
),
recognizer: TapGestureRecognizer()
..onTap = () {
if (item.rich!.jumpUrl != null) {
PiliScheme.routePushFromUrl(
item.rich!.jumpUrl!);
}
},
);
}
return TextSpan(
text: item.word?.words,
style: TextStyle(
decoration: item.word?.style?.strikethrough == true
? TextDecoration.lineThrough
: null,
fontStyle: item.word?.style?.italic == true
? FontStyle.italic
: null,
fontWeight: item.word?.style?.bold == true
? FontWeight.bold
: null,
color: item.word?.color != null
? Color(item.word!.color!)
: null,
fontSize: item.word?.fontSize,
),
);
}).toList()),
);
}
if (element.paraType == 2) {
element.pic!.pics!.first.onCalHeight(maxWidth);
return Hero(
tag: element.pic!.pics!.first.url!,
child: GestureDetector(
onTap: () {
if (callback != null) {
callback(
[element.pic!.pics!.first.url!],
0,
);
} else {
context.imageView(
initialPage: 0,
imgList: [
SourceModel(url: element.pic!.pics!.first.url!)
],
);
}
},
child: NetworkImgLayer(
width: maxWidth,
height: element.pic!.pics!.first.calHeight,
src: element.pic!.pics!.first.url!,
quality: 60,
),
),
);
}
if (element.paraType == 3) {
return CachedNetworkImage(
imageUrl: Utils.thumbnailImgUrl(element.line!.pic!.url!),
height: element.line?.pic?.height,
);
}
return const SizedBox.shrink();
},
separatorBuilder: (BuildContext context, int index) =>
const SizedBox(height: 10),
),
//
_ => const SliverToBoxAdapter(),
};
} catch (e) {
return SliverToBoxAdapter(child: Text(e.toString()));
}
}).toList(),
);
}