diff --git a/lib/common/widgets/html_render.dart b/lib/common/widgets/html_render.dart
index bf58d78c..b2aa75ff 100644
--- a/lib/common/widgets/html_render.dart
+++ b/lib/common/widgets/html_render.dart
@@ -1,7 +1,9 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
-import 'package:get/get.dart';
-import 'network_img_layer.dart';
+import 'package:pilipala/plugin/pl_gallery/hero_dialog_route.dart';
+import 'package:pilipala/plugin/pl_gallery/interactiveviewer_gallery.dart';
+import 'package:pilipala/utils/highlight.dart';
 
 // ignore: must_be_immutable
 class HtmlRender extends StatelessWidget {
@@ -22,6 +24,20 @@ class HtmlRender extends StatelessWidget {
       data: htmlContent,
       onLinkTap: (String? url, Map<String, String> buildContext, attributes) {},
       extensions: [
+        TagExtension(
+          tagsToExtend: <String>{'pre'},
+          builder: (ExtensionContext extensionContext) {
+            final Map<String, dynamic> attributes = extensionContext.attributes;
+            final String lang = attributes['data-lang'] as String;
+            final String code = attributes['codecontent'] as String;
+            List<String> selectedLanguages = [lang.split('@').first];
+            TextSpan? result = highlightExistingText(code, selectedLanguages);
+            if (result == null) {
+              return const Center(child: Text('代码块渲染失败'));
+            }
+            return SelectableText.rich(result);
+          },
+        ),
         TagExtension(
           tagsToExtend: <String>{'img'},
           builder: (ExtensionContext extensionContext) {
@@ -44,20 +60,52 @@ class HtmlRender extends StatelessWidget {
               if (isMall) {
                 return const SizedBox();
               }
-              // bool inTable =
-              //     extensionContext.element!.previousElementSibling == null ||
-              //         extensionContext.element!.nextElementSibling == null;
-              // imgUrl = Utils().imageUrl(imgUrl!);
-              // return Image.network(
-              //   imgUrl,
-              //   width: isEmote ? 22 : null,
-              //   height: isEmote ? 22 : null,
-              // );
-              return NetworkImgLayer(
-                width: isEmote ? 22 : Get.size.width - 24,
-                height: isEmote ? 22 : 200,
-                src: imgUrl,
+              return InkWell(
+                onTap: () {
+                  Navigator.of(context).push(
+                    HeroDialogRoute<void>(
+                      builder: (BuildContext context) =>
+                          InteractiveviewerGallery(
+                        sources: imgList ?? [imgUrl],
+                        initIndex: imgList?.indexOf(imgUrl) ?? 0,
+                        itemBuilder: (
+                          BuildContext context,
+                          int index,
+                          bool isFocus,
+                          bool enablePageView,
+                        ) {
+                          return GestureDetector(
+                            behavior: HitTestBehavior.opaque,
+                            onTap: () {
+                              if (enablePageView) {
+                                Navigator.of(context).pop();
+                              }
+                            },
+                            child: Center(
+                              child: Hero(
+                                tag: imgList?[index] ?? imgUrl,
+                                child: CachedNetworkImage(
+                                  fadeInDuration:
+                                      const Duration(milliseconds: 0),
+                                  imageUrl: imgList?[index] ?? imgUrl,
+                                  fit: BoxFit.contain,
+                                ),
+                              ),
+                            ),
+                          );
+                        },
+                        onPageChanged: (int pageIndex) {},
+                      ),
+                    ),
+                  );
+                },
+                child: CachedNetworkImage(imageUrl: imgUrl),
               );
+              // return NetworkImgLayer(
+              //   width: isEmote ? 22 : Get.size.width - 24,
+              //   height: isEmote ? 22 : 200,
+              //   src: imgUrl,
+              // );
             } catch (err) {
               return const SizedBox();
             }
@@ -66,7 +114,7 @@ class HtmlRender extends StatelessWidget {
       ],
       style: {
         'html': Style(
-          fontSize: FontSize.medium,
+          fontSize: FontSize.large,
           lineHeight: LineHeight.percent(140),
         ),
         'body': Style(margin: Margins.zero, padding: HtmlPaddings.zero),
@@ -78,7 +126,7 @@ class HtmlRender extends StatelessWidget {
           margin: Margins.only(bottom: 10),
         ),
         'span': Style(
-          fontSize: FontSize.medium,
+          fontSize: FontSize.large,
           height: Height(1.65),
         ),
         'div': Style(height: Height.auto()),
diff --git a/lib/common/widgets/network_img_layer.dart b/lib/common/widgets/network_img_layer.dart
index d2772478..0b715a89 100644
--- a/lib/common/widgets/network_img_layer.dart
+++ b/lib/common/widgets/network_img_layer.dart
@@ -2,7 +2,7 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
 import 'package:pilipala/utils/extension.dart';
-import 'package:pilipala/utils/global_data.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 import '../../utils/storage.dart';
 import '../constants.dart';
 
@@ -33,7 +33,7 @@ class NetworkImgLayer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final int defaultImgQuality = GlobalData().imgQuality;
+    final int defaultImgQuality = GlobalDataCache().imgQuality;
     if (src == '' || src == null) {
       return placeholder(context);
     }
diff --git a/lib/common/widgets/stat/danmu.dart b/lib/common/widgets/stat/danmu.dart
index 511839a0..9ea05301 100644
--- a/lib/common/widgets/stat/danmu.dart
+++ b/lib/common/widgets/stat/danmu.dart
@@ -6,7 +6,7 @@ class StatDanMu extends StatelessWidget {
   final dynamic danmu;
   final String? size;
 
-  const StatDanMu({Key? key, this.theme, this.danmu, this.size})
+  const StatDanMu({Key? key, this.theme = 'gray', this.danmu, this.size})
       : super(key: key);
 
   @override
@@ -17,21 +17,46 @@ class StatDanMu extends StatelessWidget {
       'black': Theme.of(context).colorScheme.onSurface.withOpacity(0.8),
     };
     Color color = colorObject[theme]!;
+    return StatIconText(
+      icon: Icons.subtitles_outlined,
+      text: Utils.numFormat(danmu!),
+      color: color,
+      size: size,
+    );
+  }
+}
+
+class StatIconText extends StatelessWidget {
+  final IconData icon;
+  final String text;
+  final Color color;
+  final String? size;
+
+  const StatIconText({
+    Key? key,
+    required this.icon,
+    required this.text,
+    required this.color,
+    this.size,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
     return Row(
       children: [
         Icon(
-          Icons.subtitles_outlined,
+          icon,
           size: 14,
           color: color,
         ),
         const SizedBox(width: 2),
         Text(
-          Utils.numFormat(danmu!),
+          text,
           style: TextStyle(
             fontSize: size == 'medium' ? 12 : 11,
             color: color,
           ),
-        )
+        ),
       ],
     );
   }
diff --git a/lib/common/widgets/stat/view.dart b/lib/common/widgets/stat/view.dart
index 5359c979..85bec816 100644
--- a/lib/common/widgets/stat/view.dart
+++ b/lib/common/widgets/stat/view.dart
@@ -6,8 +6,12 @@ class StatView extends StatelessWidget {
   final dynamic view;
   final String? size;
 
-  const StatView({Key? key, this.theme, this.view, this.size})
-      : super(key: key);
+  const StatView({
+    Key? key,
+    this.theme = 'gray',
+    this.view,
+    this.size,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -17,16 +21,41 @@ class StatView extends StatelessWidget {
       'black': Theme.of(context).colorScheme.onSurface.withOpacity(0.8),
     };
     Color color = colorObject[theme]!;
+    return StatIconText(
+      icon: Icons.play_circle_outlined,
+      text: Utils.numFormat(view!),
+      color: color,
+      size: size,
+    );
+  }
+}
+
+class StatIconText extends StatelessWidget {
+  final IconData icon;
+  final String text;
+  final Color color;
+  final String? size;
+
+  const StatIconText({
+    Key? key,
+    required this.icon,
+    required this.text,
+    required this.color,
+    this.size,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
     return Row(
       children: [
         Icon(
-          Icons.play_circle_outlined,
+          icon,
           size: 13,
           color: color,
         ),
         const SizedBox(width: 2),
         Text(
-          Utils.numFormat(view!),
+          text,
           style: TextStyle(
             fontSize: size == 'medium' ? 12 : 11,
             color: color,
diff --git a/lib/common/widgets/video_card_h.dart b/lib/common/widgets/video_card_h.dart
index 1265477f..78c4ba87 100644
--- a/lib/common/widgets/video_card_h.dart
+++ b/lib/common/widgets/video_card_h.dart
@@ -266,17 +266,11 @@ class VideoContent extends StatelessWidget {
             Row(
               children: [
                 if (showView) ...[
-                  StatView(
-                    theme: 'gray',
-                    view: videoItem.stat.view as int,
-                  ),
+                  StatView(view: videoItem.stat.view as int),
                   const SizedBox(width: 8),
                 ],
                 if (showDanmaku)
-                  StatDanMu(
-                    theme: 'gray',
-                    danmu: videoItem.stat.danmaku as int,
-                  ),
+                  StatDanMu(danmu: videoItem.stat.danmaku as int),
                 const Spacer(),
                 if (source == 'normal')
                   SizedBox(
diff --git a/lib/common/widgets/video_card_v.dart b/lib/common/widgets/video_card_v.dart
index d8e1bb2c..378c9f75 100644
--- a/lib/common/widgets/video_card_v.dart
+++ b/lib/common/widgets/video_card_v.dart
@@ -60,17 +60,13 @@ class VideoCardV extends StatelessWidget {
       // 动态
       case 'picture':
         try {
-          String dynamicType = 'picture';
           String uri = videoItem.uri;
-          String id = '';
           if (videoItem.uri.startsWith('bilibili://article/')) {
             // https://www.bilibili.com/read/cv27063554
-            dynamicType = 'read';
             RegExp regex = RegExp(r'\d+');
             Match match = regex.firstMatch(videoItem.uri)!;
             String matchedNumber = match.group(0)!;
             videoItem.param = int.parse(matchedNumber);
-            id = 'cv${videoItem.param}';
           }
           if (uri.startsWith('http')) {
             String path = Uri.parse(uri).path;
@@ -88,11 +84,10 @@ class VideoCardV extends StatelessWidget {
               return;
             }
           }
-          Get.toNamed('/htmlRender', parameters: {
-            'url': uri,
+          Get.toNamed('/read', parameters: {
             'title': videoItem.title,
-            'id': id,
-            'dynamicType': dynamicType
+            'id': videoItem.param,
+            'articleType': 'read'
           });
         } catch (err) {
           SmartDialog.showToast(err.toString());
@@ -287,9 +282,9 @@ class VideoStat extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       children: [
-        StatView(theme: 'gray', view: videoItem.stat.view),
+        StatView(view: videoItem.stat.view),
         const SizedBox(width: 8),
-        StatDanMu(theme: 'gray', danmu: videoItem.stat.danmu),
+        StatDanMu(danmu: videoItem.stat.danmu),
         if (videoItem is RecVideoItemModel) ...<Widget>[
           crossAxisCount > 1 ? const Spacer() : const SizedBox(width: 8),
           RichText(
diff --git a/lib/http/api.dart b/lib/http/api.dart
index 93226946..df0b9c85 100644
--- a/lib/http/api.dart
+++ b/lib/http/api.dart
@@ -555,14 +555,41 @@ class Api {
   static const String messageSystemAPi =
       '${HttpString.messageBaseUrl}/x/sys-msg/query_unified_notify';
 
+  /// 系统通知 个人
+  static const String userMessageSystemAPi =
+      '${HttpString.messageBaseUrl}/x/sys-msg/query_user_notify';
+
   /// 系统通知标记已读
   static const String systemMarkRead =
       '${HttpString.messageBaseUrl}/x/sys-msg/update_cursor';
 
+  /// 编辑收藏夹
+  static const String editFavFolder = '/x/v3/fav/folder/edit';
+
+  /// 新建收藏夹
+  static const String addFavFolder = '/x/v3/fav/folder/add';
+
   /// 直播间弹幕信息
   static const String getDanmuInfo =
       '${HttpString.liveBaseUrl}/xlive/web-room/v1/index/getDanmuInfo';
 
   /// 直播间发送弹幕
   static const String sendLiveMsg = '${HttpString.liveBaseUrl}/msg/send';
+
+  /// 我的关注 - 正在直播
+  static const String getFollowingLive =
+      '${HttpString.liveBaseUrl}/xlive/web-ucenter/user/following';
+
+  /// 稍后再看&收藏夹视频列表
+  static const String mediaList = '/x/v2/medialist/resource/list';
+
+  /// 用户专栏
+  static const String opusList = '/x/polymer/web-dynamic/v1/opus/feed/space';
+
+  ///
+  static const String getViewInfo = '/x/article/viewinfo';
+
+  /// 直播间记录
+  static const String liveRoomEntry =
+      '${HttpString.liveBaseUrl}/xlive/web-room/v1/index/roomEntryAction';
 }
diff --git a/lib/http/fav.dart b/lib/http/fav.dart
new file mode 100644
index 00000000..6f49d68a
--- /dev/null
+++ b/lib/http/fav.dart
@@ -0,0 +1,67 @@
+import 'index.dart';
+
+class FavHttp {
+  /// 编辑收藏夹
+  static Future editFolder({
+    required String title,
+    required String intro,
+    required String mediaId,
+    String? cover,
+    int? privacy,
+  }) async {
+    var res = await Request().post(
+      Api.editFavFolder,
+      queryParameters: {
+        'title': title,
+        'intro': intro,
+        'media_id': mediaId,
+        'cover': cover ?? '',
+        'privacy': privacy ?? 0,
+        'csrf': await Request.getCsrf(),
+      },
+    );
+    if (res.data['code'] == 0) {
+      return {
+        'status': true,
+        'data': res.data['data'],
+      };
+    } else {
+      return {
+        'status': false,
+        'data': [],
+        'msg': res.data['message'],
+      };
+    }
+  }
+
+  /// 新建收藏夹
+  static Future addFolder({
+    required String title,
+    required String intro,
+    String? cover,
+    int? privacy,
+  }) async {
+    var res = await Request().post(
+      Api.addFavFolder,
+      queryParameters: {
+        'title': title,
+        'intro': intro,
+        'cover': cover ?? '',
+        'privacy': privacy ?? 0,
+        'csrf': await Request.getCsrf(),
+      },
+    );
+    if (res.data['code'] == 0) {
+      return {
+        'status': true,
+        'data': res.data['data'],
+      };
+    } else {
+      return {
+        'status': false,
+        'data': [],
+        'msg': res.data['message'],
+      };
+    }
+  }
+}
diff --git a/lib/http/live.dart b/lib/http/live.dart
index f6fc4ea4..1405e9ea 100644
--- a/lib/http/live.dart
+++ b/lib/http/live.dart
@@ -1,3 +1,5 @@
+import 'package:pilipala/models/live/follow.dart';
+
 import '../models/live/item.dart';
 import '../models/live/room_info.dart';
 import '../models/live/room_info_h5.dart';
@@ -117,4 +119,38 @@ class LiveHttp {
       };
     }
   }
+
+  // 我的关注 正在直播
+  static Future liveFollowing({int? pn, int? ps}) async {
+    var res = await Request().get(Api.getFollowingLive, data: {
+      'page': pn,
+      'page_size': ps,
+      'platform': 'web',
+      'ignoreRecord': 1,
+      'hit_ab': true,
+    });
+    if (res.data['code'] == 0) {
+      return {
+        'status': true,
+        'data': LiveFollowingModel.fromJson(res.data['data'])
+      };
+    } else {
+      return {
+        'status': false,
+        'data': [],
+        'msg': res.data['message'],
+      };
+    }
+  }
+
+  // 直播历史记录
+  static Future liveRoomEntry({required int roomId}) async {
+    await Request().post(Api.liveRoomEntry, queryParameters: {
+      'room_id': roomId,
+      'platform': 'pc',
+      'csrf_token': await Request.getCsrf(),
+      'csrf': await Request.getCsrf(),
+      'visit_id': '',
+    });
+  }
 }
diff --git a/lib/http/member.dart b/lib/http/member.dart
index e87aa42e..459d6747 100644
--- a/lib/http/member.dart
+++ b/lib/http/member.dart
@@ -1,5 +1,8 @@
+import 'dart:convert';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:hive/hive.dart';
+import 'package:html/parser.dart';
+import 'package:pilipala/models/member/article.dart';
 import 'package:pilipala/models/member/like.dart';
 import '../common/constants.dart';
 import '../models/dynamics/result.dart';
@@ -556,4 +559,60 @@ class MemberHttp {
       };
     }
   }
+
+  static Future getWWebid({required int mid}) async {
+    var res = await Request().get('https://space.bilibili.com/$mid/article');
+    String? headContent = parse(res.data).head?.outerHtml;
+    final regex = RegExp(
+        r'<script id="__RENDER_DATA__" type="application/json">(.*?)</script>');
+    if (headContent != null) {
+      final match = regex.firstMatch(headContent);
+      if (match != null && match.groupCount >= 1) {
+        final content = match.group(1);
+        String decodedString = Uri.decodeComponent(content!);
+        Map<String, dynamic> map = jsonDecode(decodedString);
+        return {'status': true, 'data': map['access_id']};
+      } else {
+        return {'status': false, 'data': '请检查登录状态'};
+      }
+    }
+    return {'status': false, 'data': '请检查登录状态'};
+  }
+
+  // 获取用户专栏
+  static Future getMemberArticle({
+    required int mid,
+    required int pn,
+    required String wWebid,
+    String? offset,
+  }) async {
+    Map params = await WbiSign().makSign({
+      'host_mid': mid,
+      'page': pn,
+      'offset': offset,
+      'web_location': 333.999,
+      'w_webid': wWebid,
+    });
+    var res = await Request().get(Api.opusList, data: {
+      'host_mid': mid,
+      'page': pn,
+      'offset': offset,
+      'web_location': 333.999,
+      'w_webid': wWebid,
+      'w_rid': params['w_rid'],
+      'wts': params['wts'],
+    });
+    if (res.data['code'] == 0) {
+      return {
+        'status': true,
+        'data': MemberArticleDataModel.fromJson(res.data['data'])
+      };
+    } else {
+      return {
+        'status': false,
+        'data': [],
+        'msg': res.data['message'] ?? '请求异常',
+      };
+    }
+  }
 }
diff --git a/lib/http/msg.dart b/lib/http/msg.dart
index 2de9cd49..869b5a28 100644
--- a/lib/http/msg.dart
+++ b/lib/http/msg.dart
@@ -330,4 +330,27 @@ class MsgHttp {
       };
     }
   }
+
+  static Future messageSystemAccount() async {
+    var res = await Request().get(Api.userMessageSystemAPi, data: {
+      'csrf': await Request.getCsrf(),
+      'page_size': 20,
+      'build': 0,
+      'mobi_app': 'web',
+    });
+    if (res.data['code'] == 0) {
+      try {
+        return {
+          'status': true,
+          'data': res.data['data']['system_notify_list']
+              .map<MessageSystemModel>((e) => MessageSystemModel.fromJson(e))
+              .toList(),
+        };
+      } catch (err) {
+        return {'status': false, 'date': [], 'msg': err.toString()};
+      }
+    } else {
+      return {'status': false, 'date': [], 'msg': res.data['message']};
+    }
+  }
 }
diff --git a/lib/http/read.dart b/lib/http/read.dart
new file mode 100644
index 00000000..68e72e59
--- /dev/null
+++ b/lib/http/read.dart
@@ -0,0 +1,116 @@
+import 'dart:convert';
+import 'package:html/parser.dart';
+import 'package:pilipala/models/read/opus.dart';
+import 'package:pilipala/models/read/read.dart';
+import 'package:pilipala/utils/wbi_sign.dart';
+import 'index.dart';
+
+class ReadHttp {
+  static List<String> extractScriptContents(String htmlContent) {
+    RegExp scriptRegExp = RegExp(r'<script>([\s\S]*?)<\/script>');
+    Iterable<Match> matches = scriptRegExp.allMatches(htmlContent);
+    List<String> scriptContents = [];
+    for (Match match in matches) {
+      String scriptContent = match.group(1)!;
+      scriptContents.add(scriptContent);
+    }
+    return scriptContents;
+  }
+
+  // 解析专栏 opus格式
+  static Future parseArticleOpus({required String id}) async {
+    var res = await Request().get('https://www.bilibili.com/opus/$id', extra: {
+      'ua': 'pc',
+    });
+    String? headContent = parse(res.data).head?.outerHtml;
+    var document = parse(headContent);
+    var linkTags = document.getElementsByTagName('link');
+    bool isCv = false;
+    String cvId = '';
+    for (var linkTag in linkTags) {
+      var attributes = linkTag.attributes;
+      if (attributes.containsKey('rel') &&
+          attributes['rel'] == 'canonical' &&
+          attributes.containsKey('data-vue-meta') &&
+          attributes['data-vue-meta'] == 'true') {
+        final String cvHref = linkTag.attributes['href']!;
+        RegExp regex = RegExp(r'cv(\d+)');
+        RegExpMatch? match = regex.firstMatch(cvHref);
+        if (match != null) {
+          cvId = match.group(1)!;
+        } else {
+          print('No match found.');
+        }
+        isCv = true;
+        break;
+      }
+    }
+    String scriptContent =
+        extractScriptContents(parse(res.data).body!.outerHtml)[0];
+    int startIndex = scriptContent.indexOf('{');
+    int endIndex = scriptContent.lastIndexOf('};');
+    String jsonContent = scriptContent.substring(startIndex, endIndex + 1);
+    // 解析JSON字符串为Map
+    Map<String, dynamic> jsonData = json.decode(jsonContent);
+    return {
+      'status': true,
+      'data': OpusDataModel.fromJson(jsonData),
+      'isCv': isCv,
+      'cvId': cvId,
+    };
+  }
+
+  // 解析专栏 cv格式
+  static Future parseArticleCv({required String id}) async {
+    var res = await Request().get(
+      'https://www.bilibili.com/read/cv$id',
+      extra: {'ua': 'pc'},
+    );
+    String scriptContent =
+        extractScriptContents(parse(res.data).body!.outerHtml)[0];
+    int startIndex = scriptContent.indexOf('{');
+    int endIndex = scriptContent.lastIndexOf('};');
+    String jsonContent = scriptContent.substring(startIndex, endIndex + 1);
+    // 解析JSON字符串为Map
+    Map<String, dynamic> jsonData = json.decode(jsonContent);
+    return {
+      'status': true,
+      'data': ReadDataModel.fromJson(jsonData),
+    };
+  }
+
+  //
+  static Future getViewInfo({required String id}) async {
+    Map params = await WbiSign().makSign({
+      'id': id,
+      'mobi_app': 'pc',
+      'from': 'web',
+      'gaia_source': 'main_web',
+      'web_location': 333.976,
+    });
+    var res = await Request().get(
+      Api.getViewInfo,
+      data: {
+        'id': id,
+        'mobi_app': 'pc',
+        'from': 'web',
+        'gaia_source': 'main_web',
+        'web_location': 333.976,
+        'w_rid': params['w_rid'],
+        'wts': params['wts'],
+      },
+    );
+    if (res.data['code'] == 0) {
+      return {
+        'status': true,
+        'data': res.data['data'],
+      };
+    } else {
+      return {
+        'status': false,
+        'data': [],
+        'msg': res.data['message'],
+      };
+    }
+  }
+}
diff --git a/lib/http/search.dart b/lib/http/search.dart
index 403e6a37..00e51497 100644
--- a/lib/http/search.dart
+++ b/lib/http/search.dart
@@ -143,7 +143,11 @@ class SearchHttp {
     }
     final dynamic res =
         await Request().get(Api.ab2c, data: <String, dynamic>{...data});
-    return res.data['data'].first['cid'];
+    if (res.data['code'] == 0) {
+      return res.data['data'].first['cid'];
+    } else {
+      return -1;
+    }
   }
 
   static Future<Map<String, dynamic>> bangumiInfo(
diff --git a/lib/http/user.dart b/lib/http/user.dart
index 972acfdd..f4535905 100644
--- a/lib/http/user.dart
+++ b/lib/http/user.dart
@@ -1,4 +1,9 @@
+import 'dart:convert';
+import 'dart:developer';
+
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:html/parser.dart';
+import 'package:pilipala/models/video/later.dart';
 import '../common/constants.dart';
 import '../models/model_hot_video_item.dart';
 import '../models/user/fav_detail.dart';
@@ -57,6 +62,8 @@ class UserHttp {
       if (res.data['data'] != null) {
         data = FavFolderData.fromJson(res.data['data']);
         return {'status': true, 'data': data};
+      } else {
+        return {'status': false, 'msg': '收藏夹为空'};
       }
     } else {
       return {
@@ -428,4 +435,106 @@ class UserHttp {
       return {'status': false, 'msg': res.data['message']};
     }
   }
+
+  // 稍后再看播放全部
+  // static Future toViewPlayAll({required int oid, required String bvid}) async {
+  //   var res = await Request().get(
+  //     Api.watchLaterHtml,
+  //     data: {
+  //       'oid': oid,
+  //       'bvid': bvid,
+  //     },
+  //   );
+  //   String scriptContent =
+  //       extractScriptContents(parse(res.data).body!.outerHtml)[0];
+  //   int startIndex = scriptContent.indexOf('{');
+  //   int endIndex = scriptContent.lastIndexOf('};');
+  //   String jsonContent = scriptContent.substring(startIndex, endIndex + 1);
+  //   // 解析JSON字符串为Map
+  //   Map<String, dynamic> jsonData = json.decode(jsonContent);
+  //   // 输出解析后的数据
+  //   return {
+  //     'status': true,
+  //     'data': jsonData['resourceList']
+  //         .map((e) => MediaVideoItemModel.fromJson(e))
+  //         .toList()
+  //   };
+  // }
+
+  static List<String> extractScriptContents(String htmlContent) {
+    RegExp scriptRegExp = RegExp(r'<script>([\s\S]*?)<\/script>');
+    Iterable<Match> matches = scriptRegExp.allMatches(htmlContent);
+    List<String> scriptContents = [];
+    for (Match match in matches) {
+      String scriptContent = match.group(1)!;
+      scriptContents.add(scriptContent);
+    }
+    return scriptContents;
+  }
+
+  // 稍后再看列表
+  static Future getMediaList({
+    required int type,
+    required int bizId,
+    required int ps,
+    int? oid,
+  }) async {
+    var res = await Request().get(
+      Api.mediaList,
+      data: {
+        'mobi_app': 'web',
+        'type': type,
+        'biz_id': bizId,
+        'oid': oid ?? '',
+        'otype': 2,
+        'ps': ps,
+        'direction': false,
+        'desc': true,
+        'sort_field': 1,
+        'tid': 0,
+        'with_current': false,
+      },
+    );
+    if (res.data['code'] == 0) {
+      return {
+        'status': true,
+        'data': res.data['data']['media_list'] != null
+            ? res.data['data']['media_list']
+                .map<MediaVideoItemModel>(
+                    (e) => MediaVideoItemModel.fromJson(e))
+                .toList()
+            : []
+      };
+    } else {
+      return {'status': false, 'msg': res.data['message']};
+    }
+  }
+
+  // 解析收藏夹视频
+  static Future parseFavVideo({
+    required int mediaId,
+    required int oid,
+    required String bvid,
+  }) async {
+    var res = await Request().get(
+      'https://www.bilibili.com/list/ml$mediaId',
+      data: {
+        'oid': mediaId,
+        'bvid': bvid,
+      },
+    );
+    String scriptContent =
+        extractScriptContents(parse(res.data).body!.outerHtml)[0];
+    int startIndex = scriptContent.indexOf('{');
+    int endIndex = scriptContent.lastIndexOf('};');
+    String jsonContent = scriptContent.substring(startIndex, endIndex + 1);
+    // 解析JSON字符串为Map
+    Map<String, dynamic> jsonData = json.decode(jsonContent);
+    return {
+      'status': true,
+      'data': jsonData['resourceList']
+          .map<MediaVideoItemModel>((e) => MediaVideoItemModel.fromJson(e))
+          .toList()
+    };
+  }
 }
diff --git a/lib/main.dart b/lib/main.dart
index 05c0476c..fe93da22 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -20,7 +20,7 @@ import 'package:pilipala/pages/main/view.dart';
 import 'package:pilipala/services/service_locator.dart';
 import 'package:pilipala/utils/app_scheme.dart';
 import 'package:pilipala/utils/data.dart';
-import 'package:pilipala/utils/global_data.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 import 'package:pilipala/utils/storage.dart';
 import 'package:media_kit/media_kit.dart';
 import 'package:pilipala/utils/recommend_filter.dart';
@@ -33,7 +33,6 @@ void main() async {
   await SystemChrome.setPreferredOrientations(
       [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
   await GStrorage.init();
-  await setupServiceLocator();
   clearLogs();
   Request();
   await Request.setCookie();
@@ -65,6 +64,7 @@ void main() async {
   }
 
   PiliSchame.init();
+  await GlobalDataCache().initialize();
 }
 
 class MyApp extends StatelessWidget {
@@ -266,10 +266,10 @@ class BuildMainApp extends StatelessWidget {
         VideoDetailPage.routeObserver,
         SearchPage.routeObserver,
       ],
-      onInit: () {
+      onReady: () async {
         RecommendFilter();
         Data.init();
-        GlobalData();
+        setupServiceLocator();
       },
     );
   }
diff --git a/lib/models/live/follow.dart b/lib/models/live/follow.dart
new file mode 100644
index 00000000..4a941b8b
--- /dev/null
+++ b/lib/models/live/follow.dart
@@ -0,0 +1,126 @@
+class LiveFollowingModel {
+  int? count;
+  List<LiveFollowingItemModel>? list;
+  int? liveCount;
+  int? neverLivedCount;
+  List? neverLivedFaces;
+  int? pageSize;
+  String? title;
+  int? totalPage;
+
+  LiveFollowingModel({
+    this.count,
+    this.list,
+    this.liveCount,
+    this.neverLivedCount,
+    this.neverLivedFaces,
+    this.pageSize,
+    this.title,
+    this.totalPage,
+  });
+
+  LiveFollowingModel.fromJson(Map<String, dynamic> json) {
+    count = json['count'];
+    if (json['list'] != null) {
+      list = <LiveFollowingItemModel>[];
+      json['list'].forEach((v) {
+        list!.add(LiveFollowingItemModel.fromJson(v));
+      });
+    }
+    liveCount = json['live_count'];
+    neverLivedCount = json['never_lived_count'];
+    if (json['never_lived_faces'] != null) {
+      neverLivedFaces = <dynamic>[];
+      json['never_lived_faces'].forEach((v) {
+        neverLivedFaces!.add(v);
+      });
+    }
+    pageSize = json['pageSize'];
+    title = json['title'];
+    totalPage = json['totalPage'];
+  }
+}
+
+class LiveFollowingItemModel {
+  int? roomId;
+  int? uid;
+  String? uname;
+  String? title;
+  String? face;
+  int? liveStatus;
+  int? recordNum;
+  String? recentRecordId;
+  int? isAttention;
+  int? clipNum;
+  int? fansNum;
+  String? areaName;
+  String? areaValue;
+  String? tags;
+  String? recentRecordIdV2;
+  int? recordNumV2;
+  int? recordLiveTime;
+  String? areaNameV2;
+  String? roomNews;
+  String? watchIcon;
+  String? textSmall;
+  String? roomCover;
+  String? pic;
+  int? parentAreaId;
+  int? areaId;
+
+  LiveFollowingItemModel({
+    this.roomId,
+    this.uid,
+    this.uname,
+    this.title,
+    this.face,
+    this.liveStatus,
+    this.recordNum,
+    this.recentRecordId,
+    this.isAttention,
+    this.clipNum,
+    this.fansNum,
+    this.areaName,
+    this.areaValue,
+    this.tags,
+    this.recentRecordIdV2,
+    this.recordNumV2,
+    this.recordLiveTime,
+    this.areaNameV2,
+    this.roomNews,
+    this.watchIcon,
+    this.textSmall,
+    this.roomCover,
+    this.pic,
+    this.parentAreaId,
+    this.areaId,
+  });
+
+  LiveFollowingItemModel.fromJson(Map<String, dynamic> json) {
+    roomId = json['roomid'];
+    uid = json['uid'];
+    uname = json['uname'];
+    title = json['title'];
+    face = json['face'];
+    liveStatus = json['live_status'];
+    recordNum = json['record_num'];
+    recentRecordId = json['recent_record_id'];
+    isAttention = json['is_attention'];
+    clipNum = json['clipnum'];
+    fansNum = json['fans_num'];
+    areaName = json['area_name'];
+    areaValue = json['area_value'];
+    tags = json['tags'];
+    recentRecordIdV2 = json['recent_record_id_v2'];
+    recordNumV2 = json['record_num_v2'];
+    recordLiveTime = json['record_live_time'];
+    areaNameV2 = json['area_name_v2'];
+    roomNews = json['room_news'];
+    watchIcon = json['watch_icon'];
+    textSmall = json['text_small'];
+    roomCover = json['room_cover'];
+    pic = json['room_cover'];
+    parentAreaId = json['parent_area_id'];
+    areaId = json['area_id'];
+  }
+}
diff --git a/lib/models/live/room_info.dart b/lib/models/live/room_info.dart
index 7209ba08..362ba983 100644
--- a/lib/models/live/room_info.dart
+++ b/lib/models/live/room_info.dart
@@ -1,11 +1,13 @@
 class RoomInfoModel {
   RoomInfoModel({
     this.roomId,
+    this.isPortrait,
     this.liveStatus,
     this.liveTime,
     this.playurlInfo,
   });
   int? roomId;
+  bool? isPortrait;
   int? liveStatus;
   int? liveTime;
   PlayurlInfo? playurlInfo;
@@ -13,6 +15,7 @@ class RoomInfoModel {
   RoomInfoModel.fromJson(Map<String, dynamic> json) {
     roomId = json['room_id'];
     liveStatus = json['live_status'];
+    isPortrait = json['is_portrait'];
     liveTime = json['live_time'];
     playurlInfo = PlayurlInfo.fromJson(json['playurl_info']);
   }
diff --git a/lib/models/member/article.dart b/lib/models/member/article.dart
new file mode 100644
index 00000000..8489385e
--- /dev/null
+++ b/lib/models/member/article.dart
@@ -0,0 +1,46 @@
+class MemberArticleDataModel {
+  MemberArticleDataModel({
+    this.hasMore,
+    this.items,
+    this.offset,
+    this.updateNum,
+  });
+
+  bool? hasMore;
+  List<MemberArticleItemModel>? items;
+  String? offset;
+  int? updateNum;
+
+  MemberArticleDataModel.fromJson(Map<String, dynamic> json) {
+    hasMore = json['has_more'];
+    items = json['items']
+        .map<MemberArticleItemModel>((e) => MemberArticleItemModel.fromJson(e))
+        .toList();
+    offset = json['offset'];
+    updateNum = json['update_num'];
+  }
+}
+
+class MemberArticleItemModel {
+  MemberArticleItemModel({
+    this.content,
+    this.cover,
+    this.jumpUrl,
+    this.opusId,
+    this.stat,
+  });
+
+  String? content;
+  Map? cover;
+  String? jumpUrl;
+  String? opusId;
+  Map? stat;
+
+  MemberArticleItemModel.fromJson(Map<String, dynamic> json) {
+    content = json['content'];
+    cover = json['cover'];
+    jumpUrl = json['jump_url'];
+    opusId = json['opus_id'];
+    stat = json['stat'];
+  }
+}
diff --git a/lib/models/msg/system.dart b/lib/models/msg/system.dart
index 20427707..12b1ac77 100644
--- a/lib/models/msg/system.dart
+++ b/lib/models/msg/system.dart
@@ -5,7 +5,7 @@ class MessageSystemModel {
   int? cursor;
   int? type;
   String? title;
-  Map? content;
+  dynamic content;
   Source? source;
   String? timeAt;
   int? cardType;
@@ -45,7 +45,9 @@ class MessageSystemModel {
         cursor: jsons["cursor"],
         type: jsons["type"],
         title: jsons["title"],
-        content: json.decode(jsons["content"]),
+        content: isValidJson(jsons["content"])
+            ? json.decode(jsons["content"])
+            : jsons["content"],
         source: Source.fromJson(jsons["source"]),
         timeAt: jsons["time_at"],
         cardType: jsons["card_type"],
@@ -75,3 +77,12 @@ class Source {
         logo: json["logo"],
       );
 }
+
+bool isValidJson(String str) {
+  try {
+    json.decode(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
diff --git a/lib/models/read/opus.dart b/lib/models/read/opus.dart
new file mode 100644
index 00000000..e7b9aca1
--- /dev/null
+++ b/lib/models/read/opus.dart
@@ -0,0 +1,485 @@
+class OpusDataModel {
+  OpusDataModel({
+    this.id,
+    this.detail,
+    this.type,
+    this.theme,
+    this.themeMode,
+  });
+
+  String? id;
+  OpusDetailDataModel? detail;
+  int? type;
+  String? theme;
+  String? themeMode;
+
+  OpusDataModel.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    detail = json['detail'] != null
+        ? OpusDetailDataModel.fromJson(json['detail'])
+        : null;
+    type = json['type'];
+    theme = json['theme'];
+    themeMode = json['themeMode'];
+  }
+}
+
+class OpusDetailDataModel {
+  OpusDetailDataModel({
+    this.basic,
+    this.idStr,
+    this.modules,
+    this.type,
+  });
+
+  Basic? basic;
+  String? idStr;
+  List<OpusModuleDataModel>? modules;
+  int? type;
+
+  OpusDetailDataModel.fromJson(Map<String, dynamic> json) {
+    basic = json['basic'] != null ? Basic.fromJson(json['basic']) : null;
+    idStr = json['id_str'];
+    if (json['modules'] != null) {
+      modules = <OpusModuleDataModel>[];
+      json['modules'].forEach((v) {
+        modules!.add(OpusModuleDataModel.fromJson(v));
+      });
+    }
+    type = json['type'];
+  }
+}
+
+class Basic {
+  Basic({
+    this.commentIdStr,
+    this.commentType,
+    this.ridStr,
+    this.title,
+    this.uid,
+  });
+
+  String? commentIdStr;
+  int? commentType;
+  String? ridStr;
+  String? title;
+  int? uid;
+
+  Basic.fromJson(Map<String, dynamic> json) {
+    commentIdStr = json['comment_id_str'];
+    commentType = json['comment_type'];
+    ridStr = json['rid_str'];
+    title = json['title'];
+    uid = json['uid'];
+  }
+}
+
+class OpusModuleDataModel {
+  OpusModuleDataModel({
+    this.moduleTitle,
+    this.moduleAuthor,
+    this.moduleContent,
+    this.moduleExtend,
+    this.moduleBottom,
+    this.moduleStat,
+  });
+
+  ModuleTop? moduleTop;
+  ModuleTitle? moduleTitle;
+  ModuleAuthor? moduleAuthor;
+  ModuleContent? moduleContent;
+  ModuleExtend? moduleExtend;
+  ModuleBottom? moduleBottom;
+  ModuleStat? moduleStat;
+
+  OpusModuleDataModel.fromJson(Map<String, dynamic> json) {
+    moduleTop = json['module_top'] != null
+        ? ModuleTop.fromJson(json['module_top'])
+        : null;
+    moduleTitle = json['module_title'] != null
+        ? ModuleTitle.fromJson(json['module_title'])
+        : null;
+    moduleAuthor = json['module_author'] != null
+        ? ModuleAuthor.fromJson(json['module_author'])
+        : null;
+    moduleContent = json['module_content'] != null
+        ? ModuleContent.fromJson(json['module_content'])
+        : null;
+    moduleExtend = json['module_extend'] != null
+        ? ModuleExtend.fromJson(json['module_extend'])
+        : null;
+    moduleBottom = json['module_bottom'] != null
+        ? ModuleBottom.fromJson(json['module_bottom'])
+        : null;
+    moduleStat = json['module_stat'] != null
+        ? ModuleStat.fromJson(json['module_stat'])
+        : null;
+  }
+}
+
+class ModuleTop {
+  ModuleTop({
+    this.type,
+    this.video,
+  });
+
+  int? type;
+  Map? video;
+
+  ModuleTop.fromJson(Map<String, dynamic> json) {
+    type = json['type'];
+    video = json['video'];
+  }
+}
+
+class ModuleTitle {
+  ModuleTitle({
+    this.text,
+  });
+
+  String? text;
+
+  ModuleTitle.fromJson(Map<String, dynamic> json) {
+    text = json['text'];
+  }
+}
+
+class ModuleAuthor {
+  ModuleAuthor({
+    this.face,
+    this.mid,
+    this.name,
+    this.pubTime,
+  });
+
+  String? face;
+  int? mid;
+  String? name;
+  String? pubTime;
+
+  ModuleAuthor.fromJson(Map<String, dynamic> json) {
+    face = json['face'];
+    mid = json['mid'];
+    name = json['name'];
+    pubTime = json['pub_time'];
+  }
+}
+
+class ModuleContent {
+  ModuleContent({
+    this.paragraphs,
+    this.moduleType,
+  });
+
+  List<ModuleParagraph>? paragraphs;
+  String? moduleType;
+
+  ModuleContent.fromJson(Map<String, dynamic> json) {
+    if (json['paragraphs'] != null) {
+      paragraphs = <ModuleParagraph>[];
+      json['paragraphs'].forEach((v) {
+        paragraphs!.add(ModuleParagraph.fromJson(v));
+      });
+    }
+    moduleType = json['module_type'];
+  }
+}
+
+class ModuleParagraph {
+  ModuleParagraph({
+    this.align,
+    this.paraType,
+    this.pic,
+    this.text,
+  });
+
+  // 0 左对齐  1 居中  2 右对齐
+  int? align;
+  int? paraType;
+  Pics? pic;
+  ModuleParagraphText? text;
+  LinkCard? linkCard;
+
+  ModuleParagraph.fromJson(Map<String, dynamic> json) {
+    align = json['align'];
+    paraType = json['para_type'] == null && json['link_card'] != null
+        ? 3
+        : json['para_type'];
+    pic = json['pic'] != null ? Pics.fromJson(json['pic']) : null;
+    text = json['text'] != null
+        ? ModuleParagraphText.fromJson(json['text'])
+        : null;
+    linkCard =
+        json['link_card'] != null ? LinkCard.fromJson(json['link_card']) : null;
+  }
+}
+
+class Pics {
+  Pics({
+    this.pics,
+    this.style,
+  });
+
+  List<Pic>? pics;
+  int? style;
+
+  Pics.fromJson(Map<String, dynamic> json) {
+    if (json['pics'] != null) {
+      pics = <Pic>[];
+      json['pics'].forEach((v) {
+        pics!.add(Pic.fromJson(v));
+      });
+    }
+    style = json['style'];
+  }
+}
+
+class Pic {
+  Pic({
+    this.height,
+    this.size,
+    this.url,
+    this.width,
+    this.aspectRatio,
+    this.scale,
+  });
+
+  int? height;
+  double? size;
+  String? url;
+  int? width;
+  double? aspectRatio;
+  double? scale;
+
+  Pic.fromJson(Map<String, dynamic> json) {
+    height = json['height'];
+    size = json['size'];
+    url = json['url'];
+    width = json['width'];
+    aspectRatio = json['width'] / json['height'];
+    scale = customDivision(json['width'], 600);
+  }
+}
+
+class LinkCard {
+  LinkCard({
+    this.cover,
+    this.descSecond,
+    this.duration,
+    this.jumpUrl,
+    this.title,
+  });
+
+  String? cover;
+  String? descSecond;
+  String? duration;
+  String? jumpUrl;
+  String? title;
+
+  LinkCard.fromJson(Map<String, dynamic> json) {
+    cover = json['card']['cover'];
+    descSecond = json['card']['desc_second'];
+    duration = json['card']['duration'];
+    jumpUrl = json['card']['jump_url'];
+    title = json['card']['title'];
+  }
+}
+
+class ModuleParagraphText {
+  ModuleParagraphText({
+    this.nodes,
+  });
+
+  List<ModuleParagraphTextNode>? nodes;
+
+  ModuleParagraphText.fromJson(Map<String, dynamic> json) {
+    if (json['nodes'] != null) {
+      nodes = <ModuleParagraphTextNode>[];
+      json['nodes'].forEach((v) {
+        nodes!.add(ModuleParagraphTextNode.fromJson(v));
+      });
+    }
+  }
+}
+
+class ModuleParagraphTextNode {
+  ModuleParagraphTextNode({
+    this.type,
+    this.nodeType,
+    this.word,
+  });
+
+  String? type;
+  int? nodeType;
+  ModuleParagraphTextNodeWord? word;
+
+  ModuleParagraphTextNode.fromJson(Map<String, dynamic> json) {
+    type = json['type'];
+    nodeType = json['node_type'];
+    word = json['word'] != null
+        ? ModuleParagraphTextNodeWord.fromJson(json['word'])
+        : null;
+  }
+}
+
+class ModuleParagraphTextNodeWord {
+  ModuleParagraphTextNodeWord({
+    this.color,
+    this.fontSize,
+    this.style,
+    this.words,
+  });
+
+  String? color;
+  int? fontSize;
+  ModuleParagraphTextNodeWordStyle? style;
+  String? words;
+
+  ModuleParagraphTextNodeWord.fromJson(Map<String, dynamic> json) {
+    color = json['color'];
+    fontSize = json['font_size'];
+    style = json['style'] != null
+        ? ModuleParagraphTextNodeWordStyle.fromJson(json['style'])
+        : null;
+    words = json['words'];
+  }
+}
+
+class ModuleParagraphTextNodeWordStyle {
+  ModuleParagraphTextNodeWordStyle({
+    this.bold,
+  });
+
+  bool? bold;
+
+  ModuleParagraphTextNodeWordStyle.fromJson(Map<String, dynamic> json) {
+    bold = json['bold'];
+  }
+}
+
+class ModuleExtend {
+  ModuleExtend({
+    this.items,
+  });
+
+  List<ModuleExtendItem>? items;
+
+  ModuleExtend.fromJson(Map<String, dynamic> json) {
+    if (json['items'] != null) {
+      items = <ModuleExtendItem>[];
+      json['items'].forEach((v) {
+        items!.add(ModuleExtendItem.fromJson(v));
+      });
+    }
+  }
+}
+
+class ModuleExtendItem {
+  ModuleExtendItem({
+    this.bizId,
+    this.bizType,
+    this.icon,
+    this.jumpUrl,
+    this.text,
+  });
+
+  dynamic bizId;
+  int? bizType;
+  dynamic icon;
+  String? jumpUrl;
+  String? text;
+
+  ModuleExtendItem.fromJson(Map<String, dynamic> json) {
+    bizId = json['biz_id'];
+    bizType = json['biz_type'];
+    icon = json['icon'];
+    jumpUrl = json['jump_url'];
+    text = json['text'];
+  }
+}
+
+class ModuleBottom {
+  ModuleBottom({
+    this.shareInfo,
+  });
+
+  ShareInfo? shareInfo;
+
+  ModuleBottom.fromJson(Map<String, dynamic> json) {
+    shareInfo = json['share_info'] != null
+        ? ShareInfo.fromJson(json['share_info'])
+        : null;
+  }
+}
+
+class ShareInfo {
+  ShareInfo({
+    this.pic,
+    this.summary,
+    this.title,
+  });
+
+  String? pic;
+  String? summary;
+  String? title;
+
+  ShareInfo.fromJson(Map<String, dynamic> json) {
+    pic = json['pic'];
+    summary = json['summary'];
+    title = json['title'];
+  }
+}
+
+class ModuleStat {
+  ModuleStat({
+    this.coin,
+    this.comment,
+    this.favorite,
+    this.forward,
+    this.like,
+  });
+
+  StatItem? coin;
+  StatItem? comment;
+  StatItem? favorite;
+  StatItem? forward;
+  StatItem? like;
+
+  ModuleStat.fromJson(Map<String, dynamic> json) {
+    coin = json['coin'] != null ? StatItem.fromJson(json['coin']) : null;
+    comment =
+        json['comment'] != null ? StatItem.fromJson(json['comment']) : null;
+    favorite =
+        json['favorite'] != null ? StatItem.fromJson(json['favorite']) : null;
+    forward =
+        json['forward'] != null ? StatItem.fromJson(json['forward']) : null;
+    like = json['like'] != null ? StatItem.fromJson(json['like']) : null;
+  }
+}
+
+class StatItem {
+  StatItem({
+    this.count,
+    this.forbidden,
+    this.status,
+  });
+
+  int? count;
+  bool? forbidden;
+  bool? status;
+
+  StatItem.fromJson(Map<String, dynamic> json) {
+    count = json['count'];
+    forbidden = json['forbidden'];
+    status = json['status'];
+  }
+}
+
+double customDivision(int a, int b) {
+  double result = a / b;
+  if (result < 1) {
+    return result;
+  } else {
+    return 1.0;
+  }
+}
diff --git a/lib/models/read/read.dart b/lib/models/read/read.dart
new file mode 100644
index 00000000..fe351da4
--- /dev/null
+++ b/lib/models/read/read.dart
@@ -0,0 +1,286 @@
+import 'package:pilipala/models/member/info.dart';
+
+import 'opus.dart';
+
+class ReadDataModel {
+  ReadDataModel({
+    this.cvid,
+    this.readInfo,
+    this.readViewInfo,
+    this.upInfo,
+    this.catalogList,
+    this.recommendInfoList,
+    this.hiddenInteraction,
+    this.isModern,
+  });
+
+  int? cvid;
+  ReadInfo? readInfo;
+  Map? readViewInfo;
+  Map? upInfo;
+  List<dynamic>? catalogList;
+  List<dynamic>? recommendInfoList;
+  bool? hiddenInteraction;
+  bool? isModern;
+
+  ReadDataModel.fromJson(Map<String, dynamic> json) {
+    cvid = json['cvid'];
+    readInfo =
+        json['readInfo'] != null ? ReadInfo.fromJson(json['readInfo']) : null;
+    readViewInfo = json['readViewInfo'];
+    upInfo = json['upInfo'];
+    if (json['catalogList'] != null) {
+      catalogList = <dynamic>[];
+      json['catalogList'].forEach((v) {
+        catalogList!.add(v);
+      });
+    }
+    if (json['recommendInfoList'] != null) {
+      recommendInfoList = <dynamic>[];
+      json['recommendInfoList'].forEach((v) {
+        recommendInfoList!.add(v);
+      });
+    }
+    hiddenInteraction = json['hiddenInteraction'];
+    isModern = json['isModern'];
+  }
+}
+
+class ReadInfo {
+  ReadInfo({
+    this.id,
+    this.category,
+    this.title,
+    this.summary,
+    this.bannerUrl,
+    this.author,
+    this.publishTime,
+    this.ctime,
+    this.mtime,
+    this.stats,
+    this.attributes,
+    this.words,
+    this.originImageUrls,
+    this.content,
+    this.opus,
+    this.dynIdStr,
+    this.totalArtNum,
+  });
+
+  int? id;
+  Map? category;
+  String? title;
+  String? summary;
+  String? bannerUrl;
+  Author? author;
+  int? publishTime;
+  int? ctime;
+  int? mtime;
+  Map? stats;
+  int? attributes;
+  int? words;
+  List<String>? originImageUrls;
+  String? content;
+  Opus? opus;
+  String? dynIdStr;
+  int? totalArtNum;
+
+  ReadInfo.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    category = json['category'];
+    title = json['title'];
+    summary = json['summary'];
+    bannerUrl = json['banner_url'];
+    author = Author.fromJson(json['author']);
+    publishTime = json['publish_time'];
+    ctime = json['ctime'];
+    mtime = json['mtime'];
+    stats = json['stats'];
+    attributes = json['attributes'];
+    words = json['words'];
+    if (json['origin_image_urls'] != null) {
+      originImageUrls = <String>[];
+      json['origin_image_urls'].forEach((v) {
+        originImageUrls!.add(v);
+      });
+    }
+    content = json['content'];
+    opus = json['opus'] != null ? Opus.fromJson(json['opus']) : null;
+    dynIdStr = json['dyn_id_str'];
+    totalArtNum = json['total_art_num'];
+  }
+}
+
+class Author {
+  Author({
+    this.mid,
+    this.name,
+    this.face,
+    this.vip,
+    this.fans,
+    this.level,
+  });
+
+  int? mid;
+  String? name;
+  String? face;
+  Vip? vip;
+  int? fans;
+  int? level;
+
+  Author.fromJson(Map<String, dynamic> json) {
+    mid = json['mid'];
+    name = json['name'];
+    face = json['face'];
+    vip = json['vip'] != null ? Vip.fromJson(json['vip']) : null;
+    fans = json['fans'];
+    level = json['level'];
+  }
+}
+
+class Opus {
+  // "opus_id": 976625853207150600,
+  // "opus_source": 2,
+  // "title": "真的很想骂人 但又没什么好骂的",
+  // "content": {
+  //     "paragraphs": [{
+  //         "para_type": 1,
+  //         "text": {
+  //             "nodes": [{
+  //                 "node_type": 1,
+  //                 "word": {
+  //                     "words": "21年玩到今年4月的号没了  ow1的时候45的号 玩了三年  后面第9赛季一个英杰5的号（虽然是偷的 但我任何违规行为都没有还是给我封了）  最近玩的号叫velleity  只和队友打天梯以及训练赛 又没了 连带着我一个一把没玩过只玩过一场训练赛的小号也没了  实在是无话可说了...",
+  //                     "font_size": 17,
+  //                     "style": {},
+  //                     "font_level": "regular"
+  //                 }
+  //             }]
+  //         }
+  //     }, {
+  //         "para_type": 2,
+  //         "pic": {
+  //             "pics": [{
+  //                 "url": "https:\u002F\u002Fi0.hdslb.com\u002Fbfs\u002Fnew_dyn\u002Fba4e57459451fe74dcb70fd20bde9823316082117.jpg",
+  //                 "width": 1600,
+  //                 "height": 1000,
+  //                 "size": 588.482421875
+  //             }],
+  //             "style": 1
+  //         }
+  //     }, {
+  //         "para_type": 1,
+  //         "text": {
+  //             "nodes": [{
+  //                 "node_type": 1,
+  //                 "word": {
+  //                     "words": "\n",
+  //                     "font_size": 17,
+  //                     "style": {},
+  //                     "font_level": "regular"
+  //                 }
+  //             }]
+  //         }
+  //     }, {
+  //         "para_type": 2,
+  //         "pic": {
+  //             "pics": [{
+  //                 "url": "https:\u002F\u002Fi0.hdslb.com\u002Fbfs\u002Fnew_dyn\u002F0945be6b621091ddb8189482a87a36fb316082117.jpg",
+  //                 "width": 1600,
+  //                 "height": 1002,
+  //                 "size": 665.7861328125
+  //             }],
+  //             "style": 1
+  //         }
+  //     }, {
+  //         "para_type": 1,
+  //         "text": {
+  //             "nodes": [{
+  //                 "node_type": 1,
+  //                 "word": {
+  //                     "words": "\n",
+  //                     "font_size": 17,
+  //                     "style": {},
+  //                     "font_level": "regular"
+  //                 }
+  //             }]
+  //         }
+  //     }, {
+  //         "para_type": 2,
+  //         "pic": {
+  //             "pics": [{
+  //                 "url": "https:\u002F\u002Fi0.hdslb.com\u002Fbfs\u002Fnew_dyn\u002Ffa60649f8786578a764a1e68a2c5d23f316082117.jpg",
+  //                 "width": 1600,
+  //                 "height": 999,
+  //                 "size": 332.970703125
+  //             }],
+  //             "style": 1
+  //         }
+  //     }, {
+  //         "para_type": 1,
+  //         "text": {
+  //             "nodes": [{
+  //                 "node_type": 1,
+  //                 "word": {
+  //                     "words": "\n",
+  //                     "font_size": 17,
+  //                     "style": {},
+  //                     "font_level": "regular"
+  //                 }
+  //             }]
+  //         }
+  //     }]
+  // },
+  // "pub_info": {
+  //     "uid": 316082117,
+  //     "pub_time": 1726226826
+  // },
+  // "article": {
+  //     "category_id": 15,
+  //     "cover": [{
+  //         "url": "https:\u002F\u002Fi0.hdslb.com\u002Fbfs\u002Fnew_dyn\u002Fbanner\u002Feb10074186a62f98c18e1b5b9deb38be316082117.png",
+  //         "width": 1071,
+  //         "height": 315,
+  //         "size": 225.625
+  //     }]
+  // },
+  // "version": {
+  //     "cvid": 38660379,
+  //     "version_id": 101683514411343360
+  // }
+  Opus({
+    this.opusId,
+    this.opusSource,
+    this.title,
+    this.content,
+  });
+
+  int? opusId;
+  int? opusSource;
+  String? title;
+  Content? content;
+
+  Opus.fromJson(Map<String, dynamic> json) {
+    opusId = json['opus_id'];
+    opusSource = json['opus_source'];
+    title = json['title'];
+    content =
+        json['content'] != null ? Content.fromJson(json['content']) : null;
+  }
+}
+
+class Content {
+  Content({
+    this.paragraphs,
+  });
+
+  List<ModuleParagraph>? paragraphs;
+
+  Content.fromJson(Map<String, dynamic> json) {
+    if (json['paragraphs'] != null) {
+      paragraphs = <ModuleParagraph>[];
+      json['paragraphs'].forEach((v) {
+        paragraphs!.add(ModuleParagraph.fromJson(v));
+      });
+    }
+  }
+}
diff --git a/lib/models/video/later.dart b/lib/models/video/later.dart
new file mode 100644
index 00000000..f722a231
--- /dev/null
+++ b/lib/models/video/later.dart
@@ -0,0 +1,270 @@
+class MediaVideoItemModel {
+  MediaVideoItemModel({
+    this.id,
+    this.offset,
+    this.index,
+    this.intro,
+    this.attr,
+    this.tid,
+    this.copyRight,
+    this.cntInfo,
+    this.cover,
+    this.duration,
+    this.pubtime,
+    this.likeState,
+    this.favState,
+    this.page,
+    this.pages,
+    this.title,
+    this.type,
+    this.upper,
+    this.link,
+    this.bvId,
+    this.shortLink,
+    this.rights,
+    this.elecInfo,
+    this.coin,
+    this.progressPercent,
+    this.badge,
+    this.forbidFav,
+    this.moreType,
+    this.businessOid,
+  });
+
+  int? id;
+  int? offset;
+  int? index;
+  String? intro;
+  int? attr;
+  int? tid;
+  int? copyRight;
+  Map? cntInfo;
+  String? cover;
+  int? duration;
+  int? pubtime;
+  int? likeState;
+  int? favState;
+  int? page;
+  List<Page>? pages;
+  String? title;
+  int? type;
+  Upper? upper;
+  String? link;
+  String? bvId;
+  String? shortLink;
+  Rights? rights;
+  dynamic elecInfo;
+  Coin? coin;
+  double? progressPercent;
+  dynamic badge;
+  bool? forbidFav;
+  int? moreType;
+  int? businessOid;
+
+  factory MediaVideoItemModel.fromJson(Map<String, dynamic> json) =>
+      MediaVideoItemModel(
+        id: json["id"],
+        offset: json["offset"],
+        index: json["index"],
+        intro: json["intro"],
+        attr: json["attr"],
+        tid: json["tid"],
+        copyRight: json["copy_right"],
+        cntInfo: json["cnt_info"],
+        cover: json["cover"],
+        duration: json["duration"],
+        pubtime: json["pubtime"],
+        likeState: json["like_state"],
+        favState: json["fav_state"],
+        page: json["page"],
+        // json["pages"] 可能为null
+        pages: json["pages"] == null
+            ? []
+            : List<Page>.from(json["pages"].map((x) => Page.fromJson(x))),
+        title: json["title"],
+        type: json["type"],
+        upper: Upper.fromJson(json["upper"]),
+        link: json["link"],
+        bvId: json["bv_id"],
+        shortLink: json["short_link"],
+        rights: Rights.fromJson(json["rights"]),
+        elecInfo: json["elec_info"],
+        coin: Coin.fromJson(json["coin"]),
+        progressPercent: json["progress_percent"].toDouble(),
+        badge: json["badge"],
+        forbidFav: json["forbid_fav"],
+        moreType: json["more_type"],
+        businessOid: json["business_oid"],
+      );
+}
+
+class Coin {
+  Coin({
+    this.maxNum,
+    this.coinNumber,
+  });
+
+  int? maxNum;
+  int? coinNumber;
+
+  factory Coin.fromJson(Map<String, dynamic> json) => Coin(
+        maxNum: json["max_num"],
+        coinNumber: json["coin_number"],
+      );
+}
+
+class Page {
+  Page({
+    this.id,
+    this.title,
+    this.intro,
+    this.duration,
+    this.link,
+    this.page,
+    this.metas,
+    this.from,
+    this.dimension,
+  });
+
+  int? id;
+  String? title;
+  String? intro;
+  int? duration;
+  String? link;
+  int? page;
+  List<Meta>? metas;
+  String? from;
+  Dimension? dimension;
+
+  factory Page.fromJson(Map<String, dynamic> json) => Page(
+        id: json["id"],
+        title: json["title"],
+        intro: json["intro"],
+        duration: json["duration"],
+        link: json["link"],
+        page: json["page"],
+        metas: List<Meta>.from(json["metas"].map((x) => Meta.fromJson(x))),
+        from: json["from"],
+        dimension: Dimension.fromJson(json["dimension"]),
+      );
+}
+
+class Dimension {
+  Dimension({
+    this.width,
+    this.height,
+    this.rotate,
+  });
+
+  int? width;
+  int? height;
+  int? rotate;
+
+  factory Dimension.fromJson(Map<String, dynamic> json) => Dimension(
+        width: json["width"],
+        height: json["height"],
+        rotate: json["rotate"],
+      );
+}
+
+class Meta {
+  Meta({
+    this.quality,
+    this.size,
+  });
+
+  int? quality;
+  int? size;
+
+  factory Meta.fromJson(Map<String, dynamic> json) => Meta(
+        quality: json["quality"],
+        size: json["size"],
+      );
+}
+
+class Rights {
+  Rights({
+    this.bp,
+    this.elec,
+    this.download,
+    this.movie,
+    this.pay,
+    this.ugcPay,
+    this.hd5,
+    this.noReprint,
+    this.autoplay,
+    this.noBackground,
+  });
+
+  int? bp;
+  int? elec;
+  int? download;
+  int? movie;
+  int? pay;
+  int? ugcPay;
+  int? hd5;
+  int? noReprint;
+  int? autoplay;
+  int? noBackground;
+
+  factory Rights.fromJson(Map<String, dynamic> json) => Rights(
+        bp: json["bp"],
+        elec: json["elec"],
+        download: json["download"],
+        movie: json["movie"],
+        pay: json["pay"],
+        ugcPay: json["ugc_pay"],
+        hd5: json["hd5"],
+        noReprint: json["no_reprint"],
+        autoplay: json["autoplay"],
+        noBackground: json["no_background"],
+      );
+}
+
+class Upper {
+  Upper({
+    this.mid,
+    this.name,
+    this.face,
+    this.followed,
+    this.fans,
+    this.vipType,
+    this.vipStatue,
+    this.vipDueDate,
+    this.vipPayType,
+    this.officialRole,
+    this.officialTitle,
+    this.officialDesc,
+    this.displayName,
+  });
+
+  int? mid;
+  String? name;
+  String? face;
+  int? followed;
+  int? fans;
+  int? vipType;
+  int? vipStatue;
+  int? vipDueDate;
+  int? vipPayType;
+  int? officialRole;
+  String? officialTitle;
+  String? officialDesc;
+  String? displayName;
+
+  factory Upper.fromJson(Map<String, dynamic> json) => Upper(
+        mid: json["mid"],
+        name: json["name"],
+        face: json["face"],
+        followed: json["followed"],
+        fans: json["fans"],
+        vipType: json["vip_type"],
+        vipStatue: json["vip_statue"],
+        vipDueDate: json["vip_due_date"],
+        vipPayType: json["vip_pay_type"],
+        officialRole: json["official_role"],
+        officialTitle: json["official_title"],
+        officialDesc: json["official_desc"],
+        displayName: json["display_name"],
+      );
+}
diff --git a/lib/pages/bangumi/introduction/view.dart b/lib/pages/bangumi/introduction/view.dart
index 95d4d898..94ee24de 100644
--- a/lib/pages/bangumi/introduction/view.dart
+++ b/lib/pages/bangumi/introduction/view.dart
@@ -255,13 +255,11 @@ class _BangumiInfoState extends State<BangumiInfo> {
                         Row(
                           children: [
                             StatView(
-                              theme: 'gray',
                               view: widget.bangumiDetail!.stat!['views'],
                               size: 'medium',
                             ),
                             const SizedBox(width: 6),
                             StatDanMu(
-                              theme: 'gray',
                               danmu: widget.bangumiDetail!.stat!['danmakus'],
                               size: 'medium',
                             ),
diff --git a/lib/pages/bangumi/introduction/widgets/intro_detail.dart b/lib/pages/bangumi/introduction/widgets/intro_detail.dart
index 07684a86..409474a9 100644
--- a/lib/pages/bangumi/introduction/widgets/intro_detail.dart
+++ b/lib/pages/bangumi/introduction/widgets/intro_detail.dart
@@ -60,13 +60,11 @@ class IntroDetail extends StatelessWidget {
                   Row(
                     children: [
                       StatView(
-                        theme: 'gray',
                         view: bangumiDetail!.stat!['views'],
                         size: 'medium',
                       ),
                       const SizedBox(width: 6),
                       StatDanMu(
-                        theme: 'gray',
                         danmu: bangumiDetail!.stat!['danmakus'],
                         size: 'medium',
                       ),
diff --git a/lib/pages/dynamics/controller.dart b/lib/pages/dynamics/controller.dart
index 1cf9db9f..df5b154e 100644
--- a/lib/pages/dynamics/controller.dart
+++ b/lib/pages/dynamics/controller.dart
@@ -146,20 +146,26 @@ class DynamicsController extends GetxController {
       /// 专栏文章查看
       case 'DYNAMIC_TYPE_ARTICLE':
         String title = item.modules.moduleDynamic.major.opus.title;
-        String url = item.modules.moduleDynamic.major.opus.jumpUrl;
-        if (url.contains('opus') || url.contains('read')) {
+        String jumpUrl = item.modules.moduleDynamic.major.opus.jumpUrl;
+        String url =
+            jumpUrl.startsWith('//') ? jumpUrl.split('//').last : jumpUrl;
+        if (jumpUrl.contains('opus') || jumpUrl.contains('read')) {
           RegExp digitRegExp = RegExp(r'\d+');
-          Iterable<Match> matches = digitRegExp.allMatches(url);
+          Iterable<Match> matches = digitRegExp.allMatches(jumpUrl);
           String number = matches.first.group(0)!;
-          if (url.contains('read')) {
-            number = 'cv$number';
+          if (jumpUrl.contains('read')) {
+            Get.toNamed('/read', parameters: {
+              'title': title,
+              'id': number,
+              'articleType': url.split('/')[1]
+            });
+          } else {
+            Get.toNamed('/opus', parameters: {
+              'title': title,
+              'id': number,
+              'articleType': 'opus'
+            });
           }
-          Get.toNamed('/htmlRender', parameters: {
-            'url': url.startsWith('//') ? url.split('//').last : url,
-            'title': title,
-            'id': number,
-            'dynamicType': url.split('//').last.split('/')[1]
-          });
         } else {
           Get.toNamed(
             '/webview',
diff --git a/lib/pages/dynamics/widgets/video_panel.dart b/lib/pages/dynamics/widgets/video_panel.dart
index 828fb283..75f16a3b 100644
--- a/lib/pages/dynamics/widgets/video_panel.dart
+++ b/lib/pages/dynamics/widgets/video_panel.dart
@@ -86,7 +86,7 @@ Widget videoSeasonWidget(item, context, type, {floor = 1}) {
               height: width / StyleString.aspectRatio,
               src: content.cover,
             ),
-            if (content.badge != null && type == 'pgc')
+            if (content.badge != null && content.badge['text'] != null)
               PBadge(
                 text: content.badge['text'],
                 top: 8.0,
diff --git a/lib/pages/fav/view.dart b/lib/pages/fav/view.dart
index 7010ba0d..f6164609 100644
--- a/lib/pages/fav/view.dart
+++ b/lib/pages/fav/view.dart
@@ -55,6 +55,22 @@ class _FavPageState extends State<FavPage> {
                   tooltip: 'Ta的订阅',
                 )
               : const SizedBox.shrink()),
+
+          // 新建收藏夹
+          Obx(() => _favController.isOwner.value
+              ? IconButton(
+                  onPressed: () async {
+                    await Get.toNamed('/favEdit');
+                    _favController.hasMore.value = true;
+                    _favController.currentPage = 1;
+                    setState(() {
+                      _futureBuilderFuture = _favController.queryFavFolder();
+                    });
+                  },
+                  icon: const Icon(Icons.add_outlined),
+                  tooltip: '新建收藏夹',
+                )
+              : const SizedBox.shrink()),
           IconButton(
             onPressed: () => Get.toNamed(
                 '/favSearch?searchType=1&mediaId=${_favController.favFolderData.value.list!.first.id}'),
diff --git a/lib/pages/fav/widgets/item.dart b/lib/pages/fav/widgets/item.dart
index 9d453fb5..25b92a5c 100644
--- a/lib/pages/fav/widgets/item.dart
+++ b/lib/pages/fav/widgets/item.dart
@@ -74,7 +74,7 @@ class VideoContent extends StatelessWidget {
   Widget build(BuildContext context) {
     return Expanded(
       child: Padding(
-        padding: const EdgeInsets.fromLTRB(10, 2, 6, 0),
+        padding: const EdgeInsets.fromLTRB(10, 2, 6, 10),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -94,6 +94,15 @@ class VideoContent extends StatelessWidget {
                 color: Theme.of(context).colorScheme.outline,
               ),
             ),
+            const Spacer(),
+            Text(
+              [23, 1].contains(favFolderItem.attr) ? '私密' : '公开',
+              textAlign: TextAlign.start,
+              style: TextStyle(
+                fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
+                color: Theme.of(context).colorScheme.outline,
+              ),
+            ),
           ],
         ),
       ),
diff --git a/lib/pages/fav_detail/controller.dart b/lib/pages/fav_detail/controller.dart
index 3f87c226..4d639bff 100644
--- a/lib/pages/fav_detail/controller.dart
+++ b/lib/pages/fav_detail/controller.dart
@@ -6,17 +6,17 @@ import 'package:pilipala/http/video.dart';
 import 'package:pilipala/models/user/fav_detail.dart';
 import 'package:pilipala/models/user/fav_folder.dart';
 import 'package:pilipala/pages/fav/index.dart';
+import 'package:pilipala/utils/utils.dart';
 
 class FavDetailController extends GetxController {
   FavFolderItemData? item;
-  Rx<FavDetailData> favDetailData = FavDetailData().obs;
 
   int? mediaId;
   late String heroTag;
   int currentPage = 1;
   bool isLoadingMore = false;
   RxMap favInfo = {}.obs;
-  RxList favList = [].obs;
+  RxList<FavDetailItemData> favList = <FavDetailItemData>[].obs;
   RxString loadingText = '加载中...'.obs;
   RxInt mediaCount = 0.obs;
   late String isOwner;
@@ -115,4 +115,35 @@ class FavDetailController extends GetxController {
       },
     );
   }
+
+  onEditFavFolder() async {
+    Get.toNamed(
+      '/favEdit',
+      arguments: {
+        'mediaId': mediaId.toString(),
+        'title': item!.title,
+        'intro': item!.intro,
+        'cover': item!.cover,
+        'privacy': item!.attr,
+      },
+    );
+  }
+
+  Future toViewPlayAll() async {
+    final FavDetailItemData firstItem = favList.first;
+    final String heroTag = Utils.makeHeroTag(firstItem.bvid);
+    Get.toNamed(
+      '/video?bvid=${firstItem.bvid}&cid=${firstItem.cid}',
+      arguments: {
+        'videoItem': firstItem,
+        'heroTag': heroTag,
+        'sourceType': 'fav',
+        'mediaId': favInfo['id'],
+        'oid': firstItem.id,
+        'favTitle': favInfo['title'],
+        'favInfo': favInfo,
+        'count': favInfo['media_count'],
+      },
+    );
+  }
 }
diff --git a/lib/pages/fav_detail/view.dart b/lib/pages/fav_detail/view.dart
index 3029c21f..8f0d3cd1 100644
--- a/lib/pages/fav_detail/view.dart
+++ b/lib/pages/fav_detail/view.dart
@@ -106,6 +106,11 @@ class _FavDetailPageState extends State<FavDetailPage> {
                 position: PopupMenuPosition.under,
                 onSelected: (String type) {},
                 itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+                  PopupMenuItem<String>(
+                    onTap: () => _favDetailController.onEditFavFolder(),
+                    value: 'edit',
+                    child: const Text('编辑收藏夹'),
+                  ),
                   PopupMenuItem<String>(
                     onTap: () => _favDetailController.onDelFavFolder(),
                     value: 'pause',
@@ -255,6 +260,15 @@ class _FavDetailPageState extends State<FavDetailPage> {
           )
         ],
       ),
+      floatingActionButton: Obx(
+        () => _favDetailController.mediaCount > 0
+            ? FloatingActionButton.extended(
+                onPressed: _favDetailController.toViewPlayAll,
+                label: const Text('播放全部'),
+                icon: const Icon(Icons.playlist_play),
+              )
+            : const SizedBox(),
+      ),
     );
   }
 }
diff --git a/lib/pages/fav_detail/widget/fav_video_card.dart b/lib/pages/fav_detail/widget/fav_video_card.dart
index 9779c549..ecb4dd4a 100644
--- a/lib/pages/fav_detail/widget/fav_video_card.dart
+++ b/lib/pages/fav_detail/widget/fav_video_card.dart
@@ -203,13 +203,9 @@ class VideoContent extends StatelessWidget {
                   padding: const EdgeInsets.only(top: 2),
                   child: Row(
                     children: [
-                      StatView(
-                        theme: 'gray',
-                        view: videoItem.cntInfo['play'],
-                      ),
+                      StatView(view: videoItem.cntInfo['play']),
                       const SizedBox(width: 8),
-                      StatDanMu(
-                          theme: 'gray', danmu: videoItem.cntInfo['danmaku']),
+                      StatDanMu(danmu: videoItem.cntInfo['danmaku']),
                       const Spacer(),
                     ],
                   ),
diff --git a/lib/pages/fav_edit/controller.dart b/lib/pages/fav_edit/controller.dart
new file mode 100644
index 00000000..4772caee
--- /dev/null
+++ b/lib/pages/fav_edit/controller.dart
@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/http/fav.dart';
+
+class FavEditController extends GetxController {
+  final GlobalKey formKey = GlobalKey<FormState>();
+  final TextEditingController titleController = TextEditingController();
+  final TextEditingController contentController = TextEditingController();
+
+  final FocusNode titleTextFieldNode = FocusNode();
+  final FocusNode contentTextFieldNode = FocusNode();
+
+  // 默认新建
+  RxString type = 'add'.obs;
+
+  String? mediaId;
+  String cover = ''; // 封面
+  String title = ''; // 名称
+  String intro = ''; // 简介
+  RxInt privacy = 0.obs; // 是否公开 0公开 1私密
+
+  @override
+  void onInit() {
+    super.onInit();
+    var args = Get.arguments;
+    if (args != null) {
+      type.value = 'edit';
+      mediaId = args['mediaId'];
+      title = args['title'];
+      intro = args['intro'];
+      cover = args['cover'];
+      privacy.value = args['privacy'];
+      titleController.text = title;
+      contentController.text = intro;
+    }
+  }
+
+  void onSubmit() async {
+    // 表单验证
+    if ((formKey.currentState as FormState).validate()) {
+      if (type.value == 'edit') {
+        await editFolder();
+      } else {
+        await addFolder();
+      }
+    }
+  }
+
+  Future<void> editFolder() async {
+    var res = await FavHttp.editFolder(
+      title: title,
+      intro: intro,
+      mediaId: mediaId!,
+      cover: cover,
+    );
+    if (res['status']) {
+      SmartDialog.showToast('编辑成功');
+      Get.back();
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
+  Future<void> addFolder() async {
+    var res = await FavHttp.addFolder(
+      title: title,
+      intro: intro,
+    );
+    if (res['status']) {
+      SmartDialog.showToast('新建成功');
+      Get.back();
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+}
diff --git a/lib/pages/fav_edit/index.dart b/lib/pages/fav_edit/index.dart
new file mode 100644
index 00000000..872df8d4
--- /dev/null
+++ b/lib/pages/fav_edit/index.dart
@@ -0,0 +1,4 @@
+library fav_edit;
+
+export './controller.dart';
+export './view.dart';
diff --git a/lib/pages/fav_edit/view.dart b/lib/pages/fav_edit/view.dart
new file mode 100644
index 00000000..3ef7cda3
--- /dev/null
+++ b/lib/pages/fav_edit/view.dart
@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import 'controller.dart';
+
+class FavEditPage extends StatefulWidget {
+  const FavEditPage({super.key});
+
+  @override
+  State<FavEditPage> createState() => _FavEditPageState();
+}
+
+class _FavEditPageState extends State<FavEditPage> {
+  final FavEditController _favEditController = Get.put(FavEditController());
+  String title = '';
+  String content = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0,
+        scrolledUnderElevation: 0,
+        title: Obx(
+          () => _favEditController.type.value == 'add'
+              ? Text(
+                  '新建收藏夹',
+                  style: Theme.of(context).textTheme.titleMedium,
+                )
+              : Text(
+                  '编辑收藏夹',
+                  style: Theme.of(context).textTheme.titleMedium,
+                ),
+        ),
+        centerTitle: false,
+        actions: [
+          Obx(
+            () => _favEditController.privacy.value == 0
+                ? IconButton(
+                    onPressed: () {
+                      _favEditController.privacy.value = 1;
+                    },
+                    icon: const Icon(Icons.lock_open_outlined))
+                : IconButton(
+                    onPressed: () {
+                      _favEditController.privacy.value = 0;
+                    },
+                    icon: Icon(
+                      Icons.lock_outlined,
+                      color: Theme.of(context).colorScheme.error,
+                    )),
+          ),
+          TextButton(
+              onPressed: _favEditController.onSubmit, child: const Text('保存')),
+          const SizedBox(width: 14),
+        ],
+      ),
+      body: Form(
+        key: _favEditController.formKey, //设置globalKey，用于后面获取FormState
+        autovalidateMode: AutovalidateMode.disabled,
+        child: Column(
+          children: [
+            Container(
+              padding: const EdgeInsets.fromLTRB(14, 10, 14, 5),
+              decoration: BoxDecoration(
+                border: Border(
+                  bottom: BorderSide(
+                    color: Theme.of(context).dividerColor.withOpacity(0.2),
+                  ),
+                ),
+              ),
+              child: TextFormField(
+                autofocus: true,
+                controller: _favEditController.titleController,
+                focusNode: _favEditController.titleTextFieldNode,
+                decoration: const InputDecoration(
+                  hintText: "收藏夹名称",
+                  enabledBorder: InputBorder.none,
+                  focusedBorder: InputBorder.none,
+                ),
+                // 校验标题
+                validator: (v) {
+                  return v!.trim().isNotEmpty ? null : "请输入收藏夹名称";
+                },
+                onChanged: (val) {
+                  _favEditController.title = val;
+                },
+              ),
+            ),
+            Expanded(
+              child: Container(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 14, vertical: 5),
+                  child: TextFormField(
+                    controller: _favEditController.contentController,
+                    minLines: 1,
+                    maxLines: 5,
+                    decoration: const InputDecoration(
+                        hintText: '输入收藏夹简介', border: InputBorder.none),
+                    style: Theme.of(context).textTheme.bodyLarge,
+                    onChanged: (val) {
+                      _favEditController.intro = val;
+                    },
+                  )),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/follow/widgets/follow_item.dart b/lib/pages/follow/widgets/follow_item.dart
index 3d393277..6ee93a98 100644
--- a/lib/pages/follow/widgets/follow_item.dart
+++ b/lib/pages/follow/widgets/follow_item.dart
@@ -49,7 +49,10 @@ class FollowItem extends StatelessWidget {
               child: TextButton(
                 onPressed: () async {
                   await showFlexibleBottomSheet(
-                    bottomSheetColor: Colors.transparent,
+                    bottomSheetBorderRadius: const BorderRadius.only(
+                      topLeft: Radius.circular(16),
+                      topRight: Radius.circular(16),
+                    ),
                     minHeight: 1,
                     initHeight: 1,
                     maxHeight: 1,
diff --git a/lib/pages/history/widgets/item.dart b/lib/pages/history/widgets/item.dart
index baebfedb..50466a6b 100644
--- a/lib/pages/history/widgets/item.dart
+++ b/lib/pages/history/widgets/item.dart
@@ -43,14 +43,17 @@ class HistoryItem extends StatelessWidget {
         }
         if (videoItem.history.business.contains('article')) {
           int cid = videoItem.history.cid ??
-              // videoItem.history.oid ??
+              videoItem.history.oid ??
               await SearchHttp.ab2c(aid: aid, bvid: bvid);
+          if (cid == -1) {
+            return SmartDialog.showToast('无法获取文章内容');
+          }
           Get.toNamed(
-            '/webview',
+            '/read',
             parameters: {
-              'url': 'https://www.bilibili.com/read/cv$cid',
-              'type': 'note',
-              'pageTitle': videoItem.title
+              'title': videoItem.title,
+              'id': cid.toString(),
+              'articleType': 'read',
             },
           );
         } else if (videoItem.history.business == 'live') {
diff --git a/lib/pages/later/controller.dart b/lib/pages/later/controller.dart
index f7dfea9f..dd8f3c5a 100644
--- a/lib/pages/later/controller.dart
+++ b/lib/pages/later/controller.dart
@@ -6,6 +6,7 @@ import 'package:pilipala/http/user.dart';
 import 'package:pilipala/models/model_hot_video_item.dart';
 import 'package:pilipala/models/user/info.dart';
 import 'package:pilipala/utils/storage.dart';
+import 'package:pilipala/utils/utils.dart';
 
 class LaterController extends GetxController {
   final ScrollController scrollController = ScrollController();
@@ -48,7 +49,7 @@ class LaterController extends GetxController {
               aid != null ? '即将移除该视频，确定是否移除' : '即将删除所有已观看视频，此操作不可恢复。确定是否删除？'),
           actions: [
             TextButton(
-              onPressed: () => SmartDialog.dismiss(),
+              onPressed: SmartDialog.dismiss,
               child: Text(
                 '取消',
                 style: TextStyle(color: Theme.of(context).colorScheme.outline),
@@ -87,7 +88,7 @@ class LaterController extends GetxController {
           content: const Text('确定要清空你的稍后再看列表吗？'),
           actions: [
             TextButton(
-              onPressed: () => SmartDialog.dismiss(),
+              onPressed: SmartDialog.dismiss,
               child: Text(
                 '取消',
                 style: TextStyle(color: Theme.of(context).colorScheme.outline),
@@ -109,4 +110,19 @@ class LaterController extends GetxController {
       },
     );
   }
+
+  // 稍后再看播放全部
+  Future toViewPlayAll() async {
+    final HotVideoItemModel firstItem = laterList.first;
+    final String heroTag = Utils.makeHeroTag(firstItem.bvid);
+    Get.toNamed(
+      '/video?bvid=${firstItem.bvid}&cid=${firstItem.cid}',
+      arguments: {
+        'videoItem': firstItem,
+        'heroTag': heroTag,
+        'sourceType': 'watchLater',
+        'count': laterList.length,
+      },
+    );
+  }
 }
diff --git a/lib/pages/later/view.dart b/lib/pages/later/view.dart
index 0a02cb79..771d8631 100644
--- a/lib/pages/later/view.dart
+++ b/lib/pages/later/view.dart
@@ -128,6 +128,15 @@ class _LaterPageState extends State<LaterPage> {
           )
         ],
       ),
+      floatingActionButton: Obx(
+        () => _laterController.laterList.isNotEmpty
+            ? FloatingActionButton.extended(
+                onPressed: _laterController.toViewPlayAll,
+                label: const Text('播放全部'),
+                icon: const Icon(Icons.playlist_play),
+              )
+            : const SizedBox(),
+      ),
     );
   }
 }
diff --git a/lib/pages/live/controller.dart b/lib/pages/live/controller.dart
index 74fb6e9a..0ca9c815 100644
--- a/lib/pages/live/controller.dart
+++ b/lib/pages/live/controller.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:hive/hive.dart';
 import 'package:pilipala/http/live.dart';
+import 'package:pilipala/models/live/follow.dart';
 import 'package:pilipala/models/live/item.dart';
 import 'package:pilipala/utils/storage.dart';
 
@@ -11,6 +12,8 @@ class LiveController extends GetxController {
   int _currentPage = 1;
   RxInt crossAxisCount = 2.obs;
   RxList<LiveItemModel> liveList = <LiveItemModel>[].obs;
+  RxList<LiveFollowingItemModel> liveFollowingList =
+      <LiveFollowingItemModel>[].obs;
   bool flag = false;
   OverlayEntry? popupDialog;
   Box setting = GStrorage.setting;
@@ -44,6 +47,7 @@ class LiveController extends GetxController {
   // 下拉刷新
   Future onRefresh() async {
     queryLiveList('init');
+    fetchLiveFollowing();
   }
 
   // 上拉加载
@@ -61,4 +65,17 @@ class LiveController extends GetxController {
           duration: const Duration(milliseconds: 500), curve: Curves.easeInOut);
     }
   }
+
+  //
+  Future fetchLiveFollowing() async {
+    var res = await LiveHttp.liveFollowing(pn: 1, ps: 20);
+    if (res['status']) {
+      liveFollowingList.value =
+          (res['data'].list as List<LiveFollowingItemModel>)
+              .where((LiveFollowingItemModel item) =>
+                  item.liveStatus == 1 && item.recordLiveTime == 0) // 根据条件过滤
+              .toList();
+    }
+    return res;
+  }
 }
diff --git a/lib/pages/live/view.dart b/lib/pages/live/view.dart
index 83605495..51316fe3 100644
--- a/lib/pages/live/view.dart
+++ b/lib/pages/live/view.dart
@@ -6,6 +6,8 @@ import 'package:get/get.dart';
 import 'package:pilipala/common/constants.dart';
 import 'package:pilipala/common/skeleton/video_card_v.dart';
 import 'package:pilipala/common/widgets/http_error.dart';
+import 'package:pilipala/common/widgets/network_img_layer.dart';
+import 'package:pilipala/models/live/follow.dart';
 import 'package:pilipala/utils/main_stream.dart';
 
 import 'controller.dart';
@@ -22,6 +24,7 @@ class _LivePageState extends State<LivePage>
     with AutomaticKeepAliveClientMixin {
   final LiveController _liveController = Get.put(LiveController());
   late Future _futureBuilderFuture;
+  late Future _futureBuilderFuture2;
   late ScrollController scrollController;
 
   @override
@@ -31,6 +34,7 @@ class _LivePageState extends State<LivePage>
   void initState() {
     super.initState();
     _futureBuilderFuture = _liveController.queryLiveList('init');
+    _futureBuilderFuture2 = _liveController.fetchLiveFollowing();
     scrollController = _liveController.scrollController;
     scrollController.addListener(
       () {
@@ -69,6 +73,7 @@ class _LivePageState extends State<LivePage>
         child: CustomScrollView(
           controller: _liveController.scrollController,
           slivers: [
+            buildFollowingList(),
             SliverPadding(
               // 单列布局 EdgeInsets.zero
               padding:
@@ -147,4 +152,148 @@ class _LivePageState extends State<LivePage>
       ),
     );
   }
+
+  // 关注的up直播
+  Widget buildFollowingList() {
+    return SliverPadding(
+      padding: const EdgeInsets.only(top: 16),
+      sliver: SliverToBoxAdapter(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Obx(
+              () => Text.rich(
+                TextSpan(
+                  children: [
+                    const TextSpan(
+                      text: ' 我的关注 ',
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 15,
+                      ),
+                    ),
+                    TextSpan(
+                      text: ' ${_liveController.liveFollowingList.length}',
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: Theme.of(context).colorScheme.primary,
+                      ),
+                    ),
+                    TextSpan(
+                      text: '人正在直播',
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: Theme.of(context).colorScheme.outline,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            FutureBuilder(
+              future: _futureBuilderFuture2,
+              builder: (context, snapshot) {
+                if (snapshot.connectionState == ConnectionState.done) {
+                  if (snapshot.data == null) {
+                    return const SizedBox();
+                  }
+                  Map? data = snapshot.data;
+                  if (data?['status']) {
+                    RxList list = _liveController.liveFollowingList;
+                    // ignore: invalid_use_of_protected_member
+                    return Obx(() => LiveFollowingListView(list: list.value));
+                  } else {
+                    return SizedBox(
+                      height: 80,
+                      child: Center(
+                        child: Text(
+                          data?['msg'] ?? '',
+                          style: TextStyle(
+                            color: Theme.of(context).colorScheme.outline,
+                            fontSize: 12,
+                          ),
+                        ),
+                      ),
+                    );
+                  }
+                } else {
+                  return const SizedBox();
+                }
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class LiveFollowingListView extends StatelessWidget {
+  final List list;
+
+  const LiveFollowingListView({super.key, required this.list});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 100,
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        itemBuilder: (context, index) {
+          final LiveFollowingItemModel item = list[index];
+          return Padding(
+            padding: const EdgeInsets.fromLTRB(3, 12, 3, 0),
+            child: Column(
+              children: [
+                InkWell(
+                  onTap: () {
+                    Get.toNamed(
+                      '/liveRoom?roomid=${item.roomId}',
+                      arguments: {
+                        'liveItem': item,
+                        'heroTag': item.roomId.toString()
+                      },
+                    );
+                  },
+                  child: Container(
+                    width: 54,
+                    height: 54,
+                    padding: const EdgeInsets.all(2),
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(27),
+                      border: Border.all(
+                        color: Theme.of(context).colorScheme.primary,
+                        width: 1.5,
+                      ),
+                    ),
+                    child: NetworkImgLayer(
+                      width: 50,
+                      height: 50,
+                      type: 'avatar',
+                      src: list[index].face,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 6),
+                SizedBox(
+                  width: 62,
+                  child: Text(
+                    list[index].uname,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    textAlign: TextAlign.center,
+                    style: const TextStyle(
+                      fontSize: 12,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+        itemCount: list.length,
+      ),
+    );
+  }
 }
diff --git a/lib/pages/live_room/controller.dart b/lib/pages/live_room/controller.dart
index 5d4e2b67..34379f64 100644
--- a/lib/pages/live_room/controller.dart
+++ b/lib/pages/live_room/controller.dart
@@ -48,6 +48,7 @@ class LiveRoomController extends GetxController {
   // 直播间弹幕开关 默认打开
   RxBool danmakuSwitch = true.obs;
   late String buvid;
+  RxBool isPortrait = false.obs;
 
   @override
   void onInit() {
@@ -58,11 +59,12 @@ class LiveRoomController extends GetxController {
     if (Get.arguments != null) {
       liveItem = Get.arguments['liveItem'];
       heroTag = Get.arguments['heroTag'] ?? '';
-      if (liveItem != null && liveItem.pic != null && liveItem.pic != '') {
-        cover = liveItem.pic;
-      }
-      if (liveItem != null && liveItem.cover != null && liveItem.cover != '') {
-        cover = liveItem.cover;
+      if (liveItem != null) {
+        cover = (liveItem.pic != null && liveItem.pic != '')
+            ? liveItem.pic
+            : (liveItem.cover != null && liveItem.cover != '')
+                ? liveItem.cover
+                : null;
       }
       Request.getBuvid().then((value) => buvid = value);
     }
@@ -95,11 +97,13 @@ class LiveRoomController extends GetxController {
       autoplay: true,
     );
     plPlayerController.isOpenDanmu.value = danmakuSwitch.value;
+    heartBeat();
   }
 
   Future queryLiveInfo() async {
     var res = await LiveHttp.liveRoomInfo(roomId: roomId, qn: currentQn);
     if (res['status']) {
+      isPortrait.value = res['data'].isPortrait;
       List<CodecItem> codec =
           res['data'].playurlInfo.playurl.stream.first.format.first.codec;
       CodecItem item = codec.first;
@@ -278,8 +282,20 @@ class LiveRoomController extends GetxController {
     }
   }
 
+  // 历史记录
+  void heartBeat() {
+    LiveHttp.liveRoomEntry(roomId: roomId);
+  }
+
+  String encodeToBase64(String input) {
+    List<int> bytes = utf8.encode(input);
+    String base64Str = base64.encode(bytes);
+    return base64Str;
+  }
+
   @override
   void onClose() {
+    heartBeat();
     plSocket?.onClose();
     super.onClose();
   }
diff --git a/lib/pages/live_room/view.dart b/lib/pages/live_room/view.dart
index abbcce13..cff0c410 100644
--- a/lib/pages/live_room/view.dart
+++ b/lib/pages/live_room/view.dart
@@ -115,6 +115,9 @@ class _LiveRoomPageState extends State<LiveRoomPage>
           plPlayerController = _liveRoomController.plPlayerController;
           return PLVideoPlayer(
             controller: plPlayerController,
+            alignment: _liveRoomController.isPortrait.value
+                ? Alignment.topCenter
+                : Alignment.center,
             bottomControl: BottomControl(
               controller: plPlayerController,
               liveRoomCtr: _liveRoomController,
@@ -178,64 +181,18 @@ class _LiveRoomPageState extends State<LiveRoomPage>
                     ),
             ),
           ),
+
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              AppBar(
-                centerTitle: false,
-                titleSpacing: 0,
-                backgroundColor: Colors.transparent,
-                foregroundColor: Colors.white,
-                toolbarHeight:
-                    MediaQuery.of(context).orientation == Orientation.portrait
-                        ? 56
-                        : 0,
-                title: FutureBuilder(
-                  future: _futureBuilder,
-                  builder: (context, snapshot) {
-                    if (snapshot.data == null) {
-                      return const SizedBox();
-                    }
-                    Map data = snapshot.data as Map;
-                    if (data['status']) {
-                      return Obx(
-                        () => Row(
-                          children: [
-                            NetworkImgLayer(
-                              width: 34,
-                              height: 34,
-                              type: 'avatar',
-                              src: _liveRoomController
-                                  .roomInfoH5.value.anchorInfo!.baseInfo!.face,
-                            ),
-                            const SizedBox(width: 10),
-                            Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                Text(
-                                  _liveRoomController.roomInfoH5.value
-                                      .anchorInfo!.baseInfo!.uname!,
-                                  style: const TextStyle(fontSize: 14),
-                                ),
-                                const SizedBox(height: 1),
-                                if (_liveRoomController
-                                        .roomInfoH5.value.watchedShow !=
-                                    null)
-                                  Text(
-                                    _liveRoomController.roomInfoH5.value
-                                            .watchedShow!['text_large'] ??
-                                        '',
-                                    style: const TextStyle(fontSize: 12),
-                                  ),
-                              ],
-                            ),
-                          ],
-                        ),
-                      );
-                    } else {
-                      return const SizedBox();
-                    }
-                  },
+              Obx(
+                () => SizedBox(
+                  height: MediaQuery.of(context).padding.top +
+                      (_liveRoomController.isPortrait.value ||
+                              MediaQuery.of(context).orientation ==
+                                  Orientation.landscape
+                          ? 0
+                          : kToolbarHeight),
                 ),
               ),
               PopScope(
@@ -249,66 +206,141 @@ class _LiveRoomPageState extends State<LiveRoomPage>
                     verticalScreen();
                   }
                 },
-                child: SizedBox(
-                  width: Get.size.width,
-                  height: MediaQuery.of(context).orientation ==
-                          Orientation.landscape
-                      ? Get.size.height
-                      : Get.size.width * 9 / 16,
-                  child: videoPlayerPanel,
+                child: Obx(
+                  () => Container(
+                    width: Get.size.width,
+                    height: MediaQuery.of(context).orientation ==
+                            Orientation.landscape
+                        ? Get.size.height
+                        : !_liveRoomController.isPortrait.value
+                            ? Get.size.width * 9 / 16
+                            : Get.size.height -
+                                MediaQuery.of(context).padding.top,
+                    clipBehavior: Clip.hardEdge,
+                    decoration: const BoxDecoration(
+                      borderRadius: BorderRadius.all(Radius.circular(6)),
+                    ),
+                    child: videoPlayerPanel,
+                  ),
                 ),
               ),
-              // 显示消息的列表
-              buildMessageListUI(
+            ],
+          ),
+          // 定位 快速滑动到底部
+          Positioned(
+            right: 20,
+            bottom: MediaQuery.of(context).padding.bottom + 80,
+            child: SlideTransition(
+              position: Tween<Offset>(
+                begin: const Offset(0, 4),
+                end: const Offset(0, 0),
+              ).animate(CurvedAnimation(
+                parent: fabAnimationCtr,
+                curve: Curves.easeInOut,
+              )),
+              child: ElevatedButton.icon(
+                onPressed: () {
+                  _scrollToBottom();
+                },
+                icon: const Icon(Icons.keyboard_arrow_down), // 图标
+                label: const Text('新消息'), // 文字
+                style: ElevatedButton.styleFrom(
+                  // primary: Colors.blue, // 按钮背景颜色
+                  // onPrimary: Colors.white, // 按钮文字颜色
+                  padding: const EdgeInsets.fromLTRB(14, 12, 20, 12), // 按钮内边距
+                ),
+              ),
+            ),
+          ),
+          // 顶栏
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: AppBar(
+              centerTitle: false,
+              titleSpacing: 0,
+              backgroundColor: Colors.transparent,
+              foregroundColor: Colors.white,
+              toolbarHeight:
+                  MediaQuery.of(context).orientation == Orientation.portrait
+                      ? 56
+                      : 0,
+              title: FutureBuilder(
+                future: _futureBuilder,
+                builder: (context, snapshot) {
+                  if (snapshot.data == null) {
+                    return const SizedBox();
+                  }
+                  Map data = snapshot.data as Map;
+                  if (data['status']) {
+                    return Obx(
+                      () => Row(
+                        children: [
+                          NetworkImgLayer(
+                            width: 34,
+                            height: 34,
+                            type: 'avatar',
+                            src: _liveRoomController
+                                .roomInfoH5.value.anchorInfo!.baseInfo!.face,
+                          ),
+                          const SizedBox(width: 10),
+                          Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                _liveRoomController.roomInfoH5.value.anchorInfo!
+                                    .baseInfo!.uname!,
+                                style: const TextStyle(fontSize: 14),
+                              ),
+                              const SizedBox(height: 1),
+                              if (_liveRoomController
+                                      .roomInfoH5.value.watchedShow !=
+                                  null)
+                                Text(
+                                  _liveRoomController.roomInfoH5.value
+                                          .watchedShow!['text_large'] ??
+                                      '',
+                                  style: const TextStyle(fontSize: 12),
+                                ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    );
+                  } else {
+                    return const SizedBox();
+                  }
+                },
+              ),
+            ),
+          ),
+          // 消息列表
+          Obx(
+            () => Positioned(
+              top: MediaQuery.of(context).padding.top +
+                  kToolbarHeight +
+                  (_liveRoomController.isPortrait.value
+                      ? Get.size.width
+                      : Get.size.width * 9 / 16),
+              bottom: 90 + MediaQuery.of(context).padding.bottom,
+              left: 0,
+              right: 0,
+              child: buildMessageListUI(
                 context,
                 _liveRoomController,
                 _scrollController,
               ),
-              // Container(
-              //   padding: const EdgeInsets.only(
-              //       left: 14, right: 14, top: 4, bottom: 4),
-              //   margin: const EdgeInsets.only(
-              //     bottom: 6,
-              //     left: 14,
-              //   ),
-              //   decoration: BoxDecoration(
-              //     color: Colors.grey.withOpacity(0.1),
-              //     borderRadius: const BorderRadius.all(Radius.circular(20)),
-              //   ),
-              //   child: Obx(
-              //     () => AnimatedSwitcher(
-              //       duration: const Duration(milliseconds: 300),
-              //       transitionBuilder:
-              //           (Widget child, Animation<double> animation) {
-              //         return FadeTransition(opacity: animation, child: child);
-              //       },
-              //       child: Text.rich(
-              //         key:
-              //             ValueKey(_liveRoomController.joinRoomTip['userName']),
-              //         TextSpan(
-              //           style: const TextStyle(color: Colors.white),
-              //           children: [
-              //             TextSpan(
-              //               text:
-              //                   '${_liveRoomController.joinRoomTip['userName']} ',
-              //               style: TextStyle(
-              //                 color: Colors.white.withOpacity(0.6),
-              //               ),
-              //             ),
-              //             TextSpan(
-              //               text:
-              //                   '${_liveRoomController.joinRoomTip['message']}',
-              //               style: const TextStyle(color: Colors.white),
-              //             ),
-              //           ],
-              //         ),
-              //       ),
-              //     ),
-              //   ),
-              // ),
-              const SizedBox(height: 10),
-              // 弹幕输入框
-              Container(
+            ),
+          ),
+          // 消息输入框
+          Visibility(
+            visible: MediaQuery.of(context).orientation == Orientation.portrait,
+            child: Positioned(
+              bottom: 0,
+              left: 0,
+              right: 0,
+              child: Container(
                 padding: EdgeInsets.only(
                     left: 14,
                     right: 14,
@@ -384,32 +416,6 @@ class _LiveRoomPageState extends State<LiveRoomPage>
                   ],
                 ),
               ),
-            ],
-          ),
-          // 定位 快速滑动到底部
-          Positioned(
-            right: 20,
-            bottom: MediaQuery.of(context).padding.bottom + 80,
-            child: SlideTransition(
-              position: Tween<Offset>(
-                begin: const Offset(0, 4),
-                end: const Offset(0, 0),
-              ).animate(CurvedAnimation(
-                parent: fabAnimationCtr,
-                curve: Curves.easeInOut,
-              )),
-              child: ElevatedButton.icon(
-                onPressed: () {
-                  _scrollToBottom();
-                },
-                icon: const Icon(Icons.keyboard_arrow_down), // 图标
-                label: const Text('新消息'), // 文字
-                style: ElevatedButton.styleFrom(
-                  // primary: Colors.blue, // 按钮背景颜色
-                  // onPrimary: Colors.white, // 按钮文字颜色
-                  padding: const EdgeInsets.fromLTRB(14, 12, 20, 12), // 按钮内边距
-                ),
-              ),
             ),
           ),
         ],
@@ -467,7 +473,9 @@ Widget buildMessageListUI(
                   alignment: Alignment.centerLeft,
                   child: Container(
                     decoration: BoxDecoration(
-                      color: Colors.grey.withOpacity(0.1),
+                      color: liveRoomController.isPortrait.value
+                          ? Colors.black.withOpacity(0.3)
+                          : Colors.grey.withOpacity(0.1),
                       borderRadius: const BorderRadius.all(Radius.circular(20)),
                     ),
                     margin: EdgeInsets.only(
diff --git a/lib/pages/main/view.dart b/lib/pages/main/view.dart
index 00eafa0d..3da667e8 100644
--- a/lib/pages/main/view.dart
+++ b/lib/pages/main/view.dart
@@ -10,7 +10,6 @@ import 'package:pilipala/pages/media/index.dart';
 import 'package:pilipala/pages/rank/index.dart';
 import 'package:pilipala/utils/event_bus.dart';
 import 'package:pilipala/utils/feed_back.dart';
-import 'package:pilipala/utils/global_data.dart';
 import 'package:pilipala/utils/storage.dart';
 import './controller.dart';
 
@@ -30,6 +29,7 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
 
   int? _lastSelectTime; //上次点击时间
   Box setting = GStrorage.setting;
+  late bool enableMYBar;
 
   @override
   void initState() {
@@ -37,6 +37,7 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
     _lastSelectTime = DateTime.now().millisecondsSinceEpoch;
     _mainController.pageController =
         PageController(initialPage: _mainController.selectedIndex);
+    enableMYBar = setting.get(SettingBoxKey.enableMYBar, defaultValue: true);
   }
 
   void setIndex(int value) async {
@@ -171,7 +172,7 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
                     curve: Curves.easeInOutCubicEmphasized,
                     duration: const Duration(milliseconds: 500),
                     offset: Offset(0, snapshot.data ? 0 : 1),
-                    child: GlobalData().enableMYBar
+                    child: enableMYBar
                         ? Obx(
                             () => NavigationBar(
                               onDestinationSelected: (value) => setIndex(value),
diff --git a/lib/pages/member/controller.dart b/lib/pages/member/controller.dart
index ada869b5..3b7f24a4 100644
--- a/lib/pages/member/controller.dart
+++ b/lib/pages/member/controller.dart
@@ -240,4 +240,6 @@ class MemberController extends GetxController {
   }
 
   void pushfavPage() => Get.toNamed('/fav?mid=$mid');
+  // 跳转图文专栏
+  void pushArticlePage() => Get.toNamed('/memberArticle?mid=$mid');
 }
diff --git a/lib/pages/member/view.dart b/lib/pages/member/view.dart
index 85a9eba4..fafba9dc 100644
--- a/lib/pages/member/view.dart
+++ b/lib/pages/member/view.dart
@@ -171,32 +171,44 @@ class _MemberPageState extends State<MemberPage>
                     ),
 
                     /// 视频
-                    Obx(() => ListTile(
-                          onTap: _memberController.pushArchivesPage,
-                          title: Text(
-                              '${_memberController.isOwner.value ? '我' : 'Ta'}的投稿'),
-                          trailing: const Icon(Icons.arrow_forward_outlined,
-                              size: 19),
-                        )),
+                    Obx(
+                      () => ListTile(
+                        onTap: _memberController.pushArchivesPage,
+                        title: Text(
+                            '${_memberController.isOwner.value ? '我' : 'Ta'}的投稿'),
+                        trailing:
+                            const Icon(Icons.arrow_forward_outlined, size: 19),
+                      ),
+                    ),
 
                     /// 他的收藏夹
-                    Obx(() => ListTile(
-                          onTap: _memberController.pushfavPage,
-                          title: Text(
-                              '${_memberController.isOwner.value ? '我' : 'Ta'}的收藏'),
-                          trailing: const Icon(Icons.arrow_forward_outlined,
-                              size: 19),
-                        )),
+                    Obx(
+                      () => ListTile(
+                        onTap: _memberController.pushfavPage,
+                        title: Text(
+                            '${_memberController.isOwner.value ? '我' : 'Ta'}的收藏'),
+                        trailing:
+                            const Icon(Icons.arrow_forward_outlined, size: 19),
+                      ),
+                    ),
 
                     /// 专栏
-                    Obx(() => ListTile(
+                    Obx(
+                      () => ListTile(
+                        onTap: _memberController.pushArticlePage,
                         title: Text(
-                            '${_memberController.isOwner.value ? '我' : 'Ta'}的专栏'))),
+                            '${_memberController.isOwner.value ? '我' : 'Ta'}的专栏'),
+                        trailing:
+                            const Icon(Icons.arrow_forward_outlined, size: 19),
+                      ),
+                    ),
 
                     /// 合集
-                    Obx(() => ListTile(
-                        title: Text(
-                            '${_memberController.isOwner.value ? '我' : 'Ta'}的合集'))),
+                    Obx(
+                      () => ListTile(
+                          title: Text(
+                              '${_memberController.isOwner.value ? '我' : 'Ta'}的合集')),
+                    ),
                     MediaQuery.removePadding(
                       removeTop: true,
                       removeBottom: true,
diff --git a/lib/pages/member_article/controller.dart b/lib/pages/member_article/controller.dart
new file mode 100644
index 00000000..cffce2fe
--- /dev/null
+++ b/lib/pages/member_article/controller.dart
@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/http/member.dart';
+import 'package:pilipala/models/member/article.dart';
+
+class MemberArticleController extends GetxController {
+  final ScrollController scrollController = ScrollController();
+  late int mid;
+  int pn = 1;
+  String? offset;
+  bool hasMore = true;
+  String? wWebid;
+  RxBool isLoading = false.obs;
+  RxList<MemberArticleItemModel> articleList = <MemberArticleItemModel>[].obs;
+
+  @override
+  void onInit() {
+    super.onInit();
+    mid = int.parse(Get.parameters['mid']!);
+  }
+
+  // 获取wWebid
+  Future getWWebid() async {
+    var res = await MemberHttp.getWWebid(mid: mid);
+    if (res['status']) {
+      wWebid = res['data'];
+    } else {
+      wWebid = '-1';
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
+  Future getMemberArticle(type) async {
+    if (isLoading.value) {
+      return;
+    }
+    isLoading.value = true;
+    if (wWebid == null) {
+      await getWWebid();
+    }
+    if (type == 'init') {
+      pn = 1;
+      articleList.clear();
+    }
+    var res = await MemberHttp.getMemberArticle(
+      mid: mid,
+      pn: pn,
+      offset: offset,
+      wWebid: wWebid!,
+    );
+    if (res['status']) {
+      offset = res['data'].offset;
+      hasMore = res['data'].hasMore!;
+      if (type == 'init') {
+        articleList.value = res['data'].items;
+      }
+      if (type == 'onLoad') {
+        articleList.addAll(res['data'].items);
+      }
+      pn += 1;
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+    isLoading.value = false;
+    return res;
+  }
+}
diff --git a/lib/pages/member_article/index.dart b/lib/pages/member_article/index.dart
new file mode 100644
index 00000000..bfc2f344
--- /dev/null
+++ b/lib/pages/member_article/index.dart
@@ -0,0 +1,4 @@
+library member_article;
+
+export './controller.dart';
+export './view.dart';
diff --git a/lib/pages/member_article/view.dart b/lib/pages/member_article/view.dart
new file mode 100644
index 00000000..e23e208d
--- /dev/null
+++ b/lib/pages/member_article/view.dart
@@ -0,0 +1,176 @@
+import 'package:easy_debounce/easy_throttle.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/common/skeleton/skeleton.dart';
+import 'package:pilipala/common/widgets/http_error.dart';
+import 'package:pilipala/common/widgets/network_img_layer.dart';
+import 'package:pilipala/common/widgets/no_data.dart';
+import 'package:pilipala/utils/utils.dart';
+
+import 'controller.dart';
+
+class MemberArticlePage extends StatefulWidget {
+  const MemberArticlePage({super.key});
+
+  @override
+  State<MemberArticlePage> createState() => _MemberArticlePageState();
+}
+
+class _MemberArticlePageState extends State<MemberArticlePage> {
+  late MemberArticleController _memberArticleController;
+  late Future _futureBuilderFuture;
+  late ScrollController scrollController;
+  late int mid;
+
+  @override
+  void initState() {
+    super.initState();
+    mid = int.parse(Get.parameters['mid']!);
+    final String heroTag = Utils.makeHeroTag(mid);
+    _memberArticleController = Get.put(MemberArticleController(), tag: heroTag);
+    _futureBuilderFuture = _memberArticleController.getMemberArticle('init');
+    scrollController = _memberArticleController.scrollController;
+
+    scrollController.addListener(_scrollListener);
+  }
+
+  void _scrollListener() {
+    if (scrollController.position.pixels >=
+        scrollController.position.maxScrollExtent - 200) {
+      EasyThrottle.throttle(
+          'member_archives', const Duration(milliseconds: 500), () {
+        _memberArticleController.getMemberArticle('onLoad');
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        titleSpacing: 0,
+        centerTitle: false,
+        title: const Text('Ta的图文', style: TextStyle(fontSize: 16)),
+      ),
+      body: FutureBuilder(
+        future: _futureBuilderFuture,
+        builder: (BuildContext context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.done) {
+            if (snapshot.data != null) {
+              return _buildContent(snapshot.data as Map);
+            } else {
+              return _buildError(snapshot.data['msg']);
+            }
+          } else {
+            return ListView.builder(
+              itemCount: 10,
+              itemBuilder: (BuildContext context, int index) {
+                return _buildSkeleton();
+              },
+            );
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildContent(Map data) {
+    RxList list = _memberArticleController.articleList;
+    if (data['status']) {
+      return Obx(
+        () => list.isNotEmpty
+            ? ListView.separated(
+                controller: scrollController,
+                itemCount: list.length,
+                separatorBuilder: (BuildContext context, int index) {
+                  return Divider(
+                    height: 10,
+                    color: Theme.of(context).dividerColor.withOpacity(0.15),
+                  );
+                },
+                itemBuilder: (BuildContext context, int index) {
+                  return _buildListItem(list[index]);
+                },
+              )
+            : const CustomScrollView(
+                physics: NeverScrollableScrollPhysics(),
+                slivers: [
+                  NoData(),
+                ],
+              ),
+      );
+    } else {
+      return _buildError(data['msg']);
+    }
+  }
+
+  Widget _buildListItem(dynamic item) {
+    return ListTile(
+      onTap: () {
+        Get.toNamed('/opus', parameters: {
+          'title': item.content,
+          'id': item.opusId,
+          'articleType': 'opus',
+        });
+      },
+      leading: NetworkImgLayer(
+        width: 50,
+        height: 50,
+        type: 'emote',
+        src: item.cover['url'],
+      ),
+      title: Text(
+        item.content,
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+      ),
+      subtitle: Padding(
+        padding: const EdgeInsets.only(top: 4),
+        child: Text(
+          '${item.stat["like"]}人点赞',
+          style: TextStyle(
+            fontSize: 12,
+            color: Theme.of(context).colorScheme.outline,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildError(String errMsg) {
+    return CustomScrollView(
+      physics: const NeverScrollableScrollPhysics(),
+      slivers: [
+        SliverToBoxAdapter(
+          child: HttpError(
+            errMsg: errMsg,
+            fn: () {},
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildSkeleton() {
+    return Skeleton(
+      child: ListTile(
+        leading: Container(
+          width: 50,
+          height: 50,
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.onInverseSurface,
+            borderRadius: BorderRadius.circular(4),
+          ),
+        ),
+        title: Container(
+          height: 16,
+          color: Theme.of(context).colorScheme.onInverseSurface,
+        ),
+        subtitle: Container(
+          height: 11,
+          color: Theme.of(context).colorScheme.onInverseSurface,
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/member_coin/widgets/item.dart b/lib/pages/member_coin/widgets/item.dart
index de28585c..6d732694 100644
--- a/lib/pages/member_coin/widgets/item.dart
+++ b/lib/pages/member_coin/widgets/item.dart
@@ -69,10 +69,7 @@ class MemberCoinsItem extends StatelessWidget {
                   const SizedBox(height: 4),
                   Row(
                     children: [
-                      StatView(
-                        view: coinItem.view,
-                        theme: 'gray',
-                      ),
+                      StatView(view: coinItem.view),
                       const Spacer(),
                       Text(
                         Utils.CustomStamp_str(
diff --git a/lib/pages/member_like/widgets/item.dart b/lib/pages/member_like/widgets/item.dart
index 57798bb7..3b3c81da 100644
--- a/lib/pages/member_like/widgets/item.dart
+++ b/lib/pages/member_like/widgets/item.dart
@@ -69,10 +69,7 @@ class MemberLikeItem extends StatelessWidget {
                   const SizedBox(height: 4),
                   Row(
                     children: [
-                      StatView(
-                        view: likeItem.stat!.view,
-                        theme: 'gray',
-                      ),
+                      StatView(view: likeItem.stat!.view),
                       const Spacer(),
                       Text(
                         Utils.CustomStamp_str(
diff --git a/lib/pages/member_seasons/widgets/item.dart b/lib/pages/member_seasons/widgets/item.dart
index 85b763b7..8d877773 100644
--- a/lib/pages/member_seasons/widgets/item.dart
+++ b/lib/pages/member_seasons/widgets/item.dart
@@ -78,10 +78,7 @@ class MemberSeasonsItem extends StatelessWidget {
                   const SizedBox(height: 4),
                   Row(
                     children: [
-                      StatView(
-                        view: seasonItem.view,
-                        theme: 'gray',
-                      ),
+                      StatView(view: seasonItem.view),
                       const Spacer(),
                       Text(
                         Utils.CustomStamp_str(
diff --git a/lib/pages/message/system/controller.dart b/lib/pages/message/system/controller.dart
index f63a659a..c4731120 100644
--- a/lib/pages/message/system/controller.dart
+++ b/lib/pages/message/system/controller.dart
@@ -1,3 +1,4 @@
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
 import 'package:pilipala/http/msg.dart';
 import 'package:pilipala/models/msg/system.dart';
@@ -5,18 +6,44 @@ import 'package:pilipala/models/msg/system.dart';
 class MessageSystemController extends GetxController {
   RxList<MessageSystemModel> systemItems = <MessageSystemModel>[].obs;
 
-  Future queryMessageSystem({String type = 'init'}) async {
-    var res = await MsgHttp.messageSystem();
-    if (res['status']) {
-      if (type == 'init') {
-        systemItems.value = res['data'];
-      } else {
-        systemItems.addAll(res['data']);
-      }
+  Future<void> queryAndProcessMessages({String type = 'init'}) async {
+    // 并行调用两个接口
+    var results = await Future.wait([
+      queryMessageSystem(type: type),
+      queryMessageSystemAccount(type: type),
+    ]);
+
+    // 对返回的数据进行处理
+    var systemRes = results[0];
+    var accountRes = results[1];
+
+    if (systemRes['status'] || accountRes['status']) {
+      // 处理返回的数据
+      List<MessageSystemModel> combinedData = [
+        ...systemRes['data'],
+        ...accountRes['data']
+      ];
+      combinedData.sort((a, b) => b.cursor!.compareTo(a.cursor!));
+      systemItems.addAll(combinedData);
+      systemItems.refresh();
       if (systemItems.isNotEmpty) {
         systemMarkRead(systemItems.first.cursor!);
       }
+    } else {
+      SmartDialog.showToast(systemRes['msg'] ?? accountRes['msg']);
     }
+    return systemRes;
+  }
+
+  // 获取系统消息
+  Future queryMessageSystem({String type = 'init'}) async {
+    var res = await MsgHttp.messageSystem();
+    return res;
+  }
+
+  // 获取系统消息 个人
+  Future queryMessageSystemAccount({String type = 'init'}) async {
+    var res = await MsgHttp.messageSystemAccount();
     return res;
   }
 
diff --git a/lib/pages/message/system/view.dart b/lib/pages/message/system/view.dart
index f7b94e5a..ee10b639 100644
--- a/lib/pages/message/system/view.dart
+++ b/lib/pages/message/system/view.dart
@@ -20,7 +20,7 @@ class _MessageSystemPageState extends State<MessageSystemPage> {
   @override
   void initState() {
     super.initState();
-    _futureBuilderFuture = _messageSystemCtr.queryMessageSystem();
+    _futureBuilderFuture = _messageSystemCtr.queryAndProcessMessages();
   }
 
   @override
@@ -31,7 +31,7 @@ class _MessageSystemPageState extends State<MessageSystemPage> {
       ),
       body: RefreshIndicator(
         onRefresh: () async {
-          await _messageSystemCtr.queryMessageSystem();
+          await _messageSystemCtr.queryAndProcessMessages();
         },
         child: FutureBuilder(
           future: _futureBuilderFuture,
@@ -42,7 +42,6 @@ class _MessageSystemPageState extends State<MessageSystemPage> {
               }
               if (snapshot.data['status']) {
                 final systemItems = _messageSystemCtr.systemItems;
-                print(systemItems.length);
                 return Obx(
                   () => ListView.separated(
                     controller: scrollController,
@@ -115,7 +114,7 @@ class SystemItem extends StatelessWidget {
             style: TextStyle(color: Theme.of(context).colorScheme.outline),
           ),
           const SizedBox(height: 6),
-          Text(item.content!['web']),
+          Text(item.content is String ? item.content : item.content!['web']),
         ],
       ),
     );
diff --git a/lib/pages/opus/controller.dart b/lib/pages/opus/controller.dart
new file mode 100644
index 00000000..86dd67a5
--- /dev/null
+++ b/lib/pages/opus/controller.dart
@@ -0,0 +1,100 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/http/read.dart';
+import 'package:pilipala/models/read/opus.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:pilipala/plugin/pl_gallery/hero_dialog_route.dart';
+import 'package:pilipala/plugin/pl_gallery/interactiveviewer_gallery.dart';
+
+class OpusController extends GetxController {
+  late String url;
+  RxString title = ''.obs;
+  late String id;
+  late String articleType;
+  Rx<OpusDataModel> opusData = OpusDataModel().obs;
+  final ScrollController scrollController = ScrollController();
+  late StreamController<bool> appbarStream = StreamController<bool>.broadcast();
+
+  @override
+  void onInit() {
+    super.onInit();
+    title.value = Get.parameters['title'] ?? '';
+    id = Get.parameters['id']!;
+    articleType = Get.parameters['articleType']!;
+    if (articleType == 'opus') {
+      url = 'https://www.bilibili.com/opus/$id';
+    }
+    scrollController.addListener(_scrollListener);
+  }
+
+  Future fetchOpusData() async {
+    var res = await ReadHttp.parseArticleOpus(id: id);
+    if (res['status']) {
+      List<String> keys = res.keys.toList();
+      if (keys.contains('isCv') && res['isCv']) {
+        Get.offNamed('/read', parameters: {
+          'id': res['cvId'],
+          'title': title.value,
+          'articleType': 'cv',
+        });
+      } else {
+        opusData.value = res['data'];
+      }
+    }
+    return res;
+  }
+
+  void _scrollListener() {
+    final double offset = scrollController.position.pixels;
+    if (offset > 100) {
+      appbarStream.add(true);
+    } else {
+      appbarStream.add(false);
+    }
+  }
+
+  void onPreviewImg(picList, initIndex, context) {
+    Navigator.of(context).push(
+      HeroDialogRoute<void>(
+        builder: (BuildContext context) => InteractiveviewerGallery(
+          sources: picList,
+          initIndex: initIndex,
+          itemBuilder: (
+            BuildContext context,
+            int index,
+            bool isFocus,
+            bool enablePageView,
+          ) {
+            return GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () {
+                if (enablePageView) {
+                  Navigator.of(context).pop();
+                }
+              },
+              child: Center(
+                child: Hero(
+                  tag: picList[index],
+                  child: CachedNetworkImage(
+                    fadeInDuration: const Duration(milliseconds: 0),
+                    imageUrl: picList[index],
+                    fit: BoxFit.contain,
+                  ),
+                ),
+              ),
+            );
+          },
+          onPageChanged: (int pageIndex) {},
+        ),
+      ),
+    );
+  }
+
+  @override
+  void onClose() {
+    scrollController.removeListener(_scrollListener);
+    appbarStream.close();
+    super.onClose();
+  }
+}
diff --git a/lib/pages/opus/index.dart b/lib/pages/opus/index.dart
new file mode 100644
index 00000000..a65b57a0
--- /dev/null
+++ b/lib/pages/opus/index.dart
@@ -0,0 +1,4 @@
+library opus;
+
+export 'controller.dart';
+export 'view.dart';
diff --git a/lib/pages/opus/text_helper.dart b/lib/pages/opus/text_helper.dart
new file mode 100644
index 00000000..0ec8b088
--- /dev/null
+++ b/lib/pages/opus/text_helper.dart
@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:pilipala/models/read/opus.dart';
+
+class TextHelper {
+  static Alignment getAlignment(int? align) {
+    switch (align) {
+      case 1:
+        return Alignment.center;
+      case 0:
+        return Alignment.centerLeft;
+      case 2:
+        return Alignment.centerRight;
+      default:
+        return Alignment.centerLeft;
+    }
+  }
+
+  static TextSpan buildTextSpan(
+      ModuleParagraphTextNode node, int? align, BuildContext context) {
+    // 获取node的所有key
+    if (node.nodeType != null) {
+      return TextSpan(
+        text: node.word?.words ?? '',
+        style: TextStyle(
+          fontSize:
+              node.word?.fontSize != null ? node.word!.fontSize! * 0.95 : 14,
+          fontWeight: node.word?.style?.bold != null
+              ? FontWeight.bold
+              : FontWeight.normal,
+          height: align == 1 ? 2 : 1.5,
+          color: node.word?.color != null
+              ? Color(int.parse(node.word!.color!.substring(1, 7), radix: 16) +
+                  0xFF000000)
+              : Theme.of(context).colorScheme.onBackground,
+        ),
+      );
+    } else {
+      switch (node.type) {
+        case 'TEXT_NODE_TYPE_WORD':
+          return TextSpan(
+            text: node.word?.words ?? '',
+            style: TextStyle(
+              fontSize: node.word?.fontSize != null
+                  ? node.word!.fontSize! * 0.95
+                  : 14,
+              fontWeight: node.word?.style?.bold != null
+                  ? FontWeight.bold
+                  : FontWeight.normal,
+              height: align == 1 ? 2 : 1.5,
+              color: node.word?.color != null
+                  ? Color(
+                      int.parse(node.word!.color!.substring(1, 7), radix: 16) +
+                          0xFF000000)
+                  : Theme.of(context).colorScheme.onBackground,
+            ),
+          );
+        default:
+          return const TextSpan(text: '');
+      }
+    }
+  }
+}
diff --git a/lib/pages/opus/view.dart b/lib/pages/opus/view.dart
new file mode 100644
index 00000000..8535230f
--- /dev/null
+++ b/lib/pages/opus/view.dart
@@ -0,0 +1,286 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/common/widgets/network_img_layer.dart';
+import 'package:pilipala/models/read/opus.dart';
+import 'controller.dart';
+import 'text_helper.dart';
+
+class OpusPage extends StatefulWidget {
+  const OpusPage({super.key});
+
+  @override
+  State<OpusPage> createState() => _OpusPageState();
+}
+
+class _OpusPageState extends State<OpusPage> {
+  final OpusController controller = Get.put(OpusController());
+  late Future _futureBuilderFuture;
+
+  @override
+  void initState() {
+    super.initState();
+    _futureBuilderFuture = controller.fetchOpusData();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: _buildAppBar(),
+      body: SingleChildScrollView(
+        controller: controller.scrollController,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildTitle(),
+            _buildFutureContent(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  AppBar _buildAppBar() {
+    return AppBar(
+      title: StreamBuilder(
+        stream: controller.appbarStream.stream.distinct(),
+        initialData: false,
+        builder: (BuildContext context, AsyncSnapshot snapshot) {
+          return AnimatedOpacity(
+            opacity: snapshot.data ? 1 : 0,
+            curve: Curves.easeOut,
+            duration: const Duration(milliseconds: 500),
+            child: Obx(
+              () => Text(
+                controller.title.value,
+                style: const TextStyle(fontSize: 16),
+              ),
+            ),
+          );
+        },
+      ),
+      actions: [
+        IconButton(
+          icon: const Icon(Icons.more_vert_rounded),
+          onPressed: () {},
+        ),
+        const SizedBox(width: 16),
+      ],
+    );
+  }
+
+  Widget _buildTitle() {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
+      child: Obx(
+        () => Text(
+          controller.title.value,
+          style: const TextStyle(
+            fontSize: 24,
+            fontWeight: FontWeight.bold,
+            letterSpacing: 1,
+            height: 1.5,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFutureContent() {
+    return FutureBuilder(
+      future: _futureBuilderFuture,
+      builder: (BuildContext context, AsyncSnapshot snapshot) {
+        if (snapshot.connectionState == ConnectionState.done) {
+          if (snapshot.data == null) {
+            return const SizedBox();
+          }
+          if (snapshot.data['status']) {
+            return _buildContent(controller.opusData.value);
+          } else {
+            return _buildError(snapshot.data['message']);
+          }
+        } else {
+          return _buildLoading();
+        }
+      },
+    );
+  }
+
+  Widget _buildContent(OpusDataModel opusData) {
+    if (opusData.detail == null) {
+      return const SizedBox();
+    }
+    final modules = opusData.detail!.modules!;
+    late ModuleContent moduleContent;
+    // 获取所有的图片链接
+    final List<String> picList = [];
+    final int moduleIndex =
+        modules.indexWhere((module) => module.moduleContent != null);
+    if (moduleIndex != -1) {
+      moduleContent = modules[moduleIndex].moduleContent!;
+      for (var paragraph in moduleContent.paragraphs!) {
+        if (paragraph.paraType == 2) {
+          for (var pic in paragraph.pic!.pics!) {
+            picList.add(pic.url!);
+          }
+        }
+      }
+    } else {
+      print('No moduleContent found');
+    }
+
+    return Padding(
+      padding: EdgeInsets.fromLTRB(
+          16, 0, 16, MediaQuery.of(context).padding.bottom + 40),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(bottom: 30),
+            child: _buildStatsWidget(opusData),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(bottom: 20),
+            child: _buildAuthorWidget(opusData),
+          ),
+          ...moduleContent.paragraphs!.map(
+            (ModuleParagraph paragraph) {
+              return Column(
+                children: [
+                  if (paragraph.paraType == 1) ...[
+                    Container(
+                      alignment: TextHelper.getAlignment(paragraph.align),
+                      margin: const EdgeInsets.only(bottom: 10),
+                      child: Text.rich(
+                        TextSpan(
+                          children: paragraph.text?.nodes?.map((node) {
+                                return TextHelper.buildTextSpan(
+                                    node, paragraph.align, context);
+                              }).toList() ??
+                              [],
+                        ),
+                      ),
+                    )
+                  ] else if (paragraph.paraType == 2) ...[
+                    ...paragraph.pic?.pics?.map(
+                          (Pic pic) => Center(
+                            child: Padding(
+                              padding:
+                                  const EdgeInsets.only(top: 10, bottom: 10),
+                              child: InkWell(
+                                onTap: () {
+                                  controller.onPreviewImg(
+                                    picList,
+                                    picList.indexOf(pic.url!),
+                                    context,
+                                  );
+                                },
+                                child: NetworkImgLayer(
+                                  src: pic.url,
+                                  width: (Get.size.width - 32) * pic.scale!,
+                                  height: (Get.size.width - 32) *
+                                      pic.scale! /
+                                      pic.aspectRatio!,
+                                  type: 'emote',
+                                ),
+                              ),
+                            ),
+                          ),
+                        ) ??
+                        [],
+                  ] else
+                    const SizedBox(),
+                ],
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAuthorWidget(OpusDataModel opusData) {
+    final modules = opusData.detail!.modules!;
+    late ModuleAuthor moduleAuthor;
+    final int moduleIndex =
+        modules.indexWhere((module) => module.moduleAuthor != null);
+    if (moduleIndex != -1) {
+      moduleAuthor = modules[moduleIndex].moduleAuthor!;
+    } else {
+      return const SizedBox();
+    }
+    return Row(
+      children: [
+        NetworkImgLayer(
+          width: 48,
+          height: 48,
+          type: 'avatar',
+          src: moduleAuthor.face,
+        ),
+        const SizedBox(width: 10),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              moduleAuthor.name!,
+              style: const TextStyle(
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+            StyledText(moduleAuthor.pubTime!),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _buildStatsWidget(OpusDataModel opusData) {
+    final modules = opusData.detail!.modules!;
+    final ModuleStat moduleStat = modules.last.moduleStat!;
+    return Row(
+      children: [
+        StyledText('${moduleStat.comment!.count}评论'),
+        const SizedBox(width: 10),
+        StyledText('${moduleStat.like!.count}赞'),
+        const SizedBox(width: 10),
+        StyledText('${moduleStat.favorite!.count}转发'),
+      ],
+    );
+  }
+
+  Widget _buildError(String message) {
+    return SizedBox(
+      height: 100,
+      child: Center(
+        child: Text(message),
+      ),
+    );
+  }
+
+  Widget _buildLoading() {
+    return const SizedBox(
+      height: 100,
+      child: Center(
+        child: CircularProgressIndicator(),
+      ),
+    );
+  }
+}
+
+class StyledText extends StatelessWidget {
+  final String text;
+
+  const StyledText(this.text, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      style: TextStyle(
+        fontSize: 13,
+        color: Theme.of(context).colorScheme.outline,
+      ),
+    );
+  }
+}
diff --git a/lib/pages/read/controller.dart b/lib/pages/read/controller.dart
new file mode 100644
index 00000000..a0e4ef8e
--- /dev/null
+++ b/lib/pages/read/controller.dart
@@ -0,0 +1,94 @@
+import 'dart:async';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/http/read.dart';
+import 'package:pilipala/models/read/read.dart';
+import 'package:pilipala/plugin/pl_gallery/hero_dialog_route.dart';
+import 'package:pilipala/plugin/pl_gallery/interactiveviewer_gallery.dart';
+
+class ReadPageController extends GetxController {
+  late String url;
+  RxString title = ''.obs;
+  late String id;
+  late String articleType;
+  Rx<ReadDataModel> cvData = ReadDataModel().obs;
+  final ScrollController scrollController = ScrollController();
+  late StreamController<bool> appbarStream = StreamController<bool>.broadcast();
+
+  @override
+  void onInit() {
+    super.onInit();
+    title.value = Get.parameters['title'] ?? '';
+    id = Get.parameters['id']!;
+    articleType = Get.parameters['articleType']!;
+    scrollController.addListener(_scrollListener);
+    fetchViewInfo();
+  }
+
+  Future fetchCvData() async {
+    var res = await ReadHttp.parseArticleCv(id: id);
+    if (res['status']) {
+      cvData.value = res['data'];
+      title.value = cvData.value.readInfo!.title!;
+    }
+    return res;
+  }
+
+  void _scrollListener() {
+    final double offset = scrollController.position.pixels;
+    if (offset > 100) {
+      appbarStream.add(true);
+    } else {
+      appbarStream.add(false);
+    }
+  }
+
+  void onPreviewImg(picList, initIndex, context) {
+    Navigator.of(context).push(
+      HeroDialogRoute<void>(
+        builder: (BuildContext context) => InteractiveviewerGallery(
+          sources: picList,
+          initIndex: initIndex,
+          itemBuilder: (
+            BuildContext context,
+            int index,
+            bool isFocus,
+            bool enablePageView,
+          ) {
+            return GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () {
+                if (enablePageView) {
+                  Navigator.of(context).pop();
+                }
+              },
+              child: Center(
+                child: Hero(
+                  tag: picList[index],
+                  child: CachedNetworkImage(
+                    fadeInDuration: const Duration(milliseconds: 0),
+                    imageUrl: picList[index],
+                    fit: BoxFit.contain,
+                  ),
+                ),
+              ),
+            );
+          },
+          onPageChanged: (int pageIndex) {},
+        ),
+      ),
+    );
+  }
+
+  void fetchViewInfo() {
+    ReadHttp.getViewInfo(id: id);
+  }
+
+  @override
+  void onClose() {
+    scrollController.removeListener(_scrollListener);
+    appbarStream.close();
+    super.onClose();
+  }
+}
diff --git a/lib/pages/read/index.dart b/lib/pages/read/index.dart
new file mode 100644
index 00000000..3603c994
--- /dev/null
+++ b/lib/pages/read/index.dart
@@ -0,0 +1,4 @@
+library read;
+
+export 'controller.dart';
+export 'view.dart';
diff --git a/lib/pages/read/view.dart b/lib/pages/read/view.dart
new file mode 100644
index 00000000..7c1e0601
--- /dev/null
+++ b/lib/pages/read/view.dart
@@ -0,0 +1,342 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/common/widgets/html_render.dart';
+import 'package:pilipala/common/widgets/network_img_layer.dart';
+import 'package:pilipala/models/read/opus.dart';
+import 'package:pilipala/models/read/read.dart';
+import 'package:pilipala/pages/opus/text_helper.dart';
+import 'package:pilipala/utils/utils.dart';
+import 'controller.dart';
+
+class ReadPage extends StatefulWidget {
+  const ReadPage({super.key});
+
+  @override
+  State<ReadPage> createState() => _ReadPageState();
+}
+
+class _ReadPageState extends State<ReadPage> {
+  final ReadPageController controller = Get.put(ReadPageController());
+  late Future _futureBuilderFuture;
+
+  @override
+  void initState() {
+    super.initState();
+    _futureBuilderFuture = controller.fetchCvData();
+  }
+
+  List<String> extractDataSrc(String input) {
+    final regex = RegExp(r'data-src="([^"]*)"');
+    final matches = regex.allMatches(input);
+    return matches.map((match) {
+      final dataSrc = match.group(1)!;
+      return dataSrc.startsWith('//') ? 'https:$dataSrc' : dataSrc;
+    }).toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: _buildAppBar(),
+      body: SingleChildScrollView(
+        controller: controller.scrollController,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildTitle(),
+            _buildFutureContent(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  AppBar _buildAppBar() {
+    return AppBar(
+      title: StreamBuilder(
+        stream: controller.appbarStream.stream.distinct(),
+        initialData: false,
+        builder: (BuildContext context, AsyncSnapshot snapshot) {
+          return AnimatedOpacity(
+            opacity: snapshot.data ? 1 : 0,
+            curve: Curves.easeOut,
+            duration: const Duration(milliseconds: 500),
+            child: Obx(
+              () => Text(
+                controller.title.value,
+                style: const TextStyle(fontSize: 16),
+              ),
+            ),
+          );
+        },
+      ),
+      actions: [
+        IconButton(
+          icon: const Icon(Icons.more_vert_rounded),
+          onPressed: () {},
+        ),
+        const SizedBox(width: 16),
+      ],
+    );
+  }
+
+  Widget _buildTitle() {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
+      child: Obx(
+        () => Text(
+          controller.title.value,
+          style: const TextStyle(
+            fontSize: 24,
+            fontWeight: FontWeight.bold,
+            letterSpacing: 1,
+            height: 1.5,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFutureContent() {
+    return FutureBuilder(
+      future: _futureBuilderFuture,
+      builder: (BuildContext context, AsyncSnapshot snapshot) {
+        if (snapshot.connectionState == ConnectionState.done) {
+          if (snapshot.data == null) {
+            return const SizedBox();
+          }
+          if (snapshot.data['status']) {
+            return _buildContent(snapshot.data['data']);
+          } else {
+            return _buildError(snapshot.data['message']);
+          }
+        } else {
+          return _buildLoading();
+        }
+      },
+    );
+  }
+
+  Widget _buildContent(ReadDataModel cvData) {
+    final List<String> picList = _extractPicList(cvData);
+    final List<String> imgList = extractDataSrc(cvData.readInfo!.content!);
+
+    return Padding(
+      padding: EdgeInsets.fromLTRB(
+          16, 0, 16, MediaQuery.of(context).padding.bottom + 40),
+      child: cvData.readInfo!.opus == null
+          ? _buildNonOpusContent(cvData, imgList)
+          : _buildOpusContent(cvData, picList),
+    );
+  }
+
+  List<String> _extractPicList(ReadDataModel cvData) {
+    final List<String> picList = [];
+    if (cvData.readInfo!.opus != null) {
+      final List<ModuleParagraph> paragraphs =
+          cvData.readInfo!.opus!.content!.paragraphs!;
+      for (var paragraph in paragraphs) {
+        if (paragraph.paraType == 2) {
+          for (var pic in paragraph.pic!.pics!) {
+            picList.add(pic.url!);
+          }
+        }
+      }
+    }
+    return picList;
+  }
+
+  Widget _buildNonOpusContent(ReadDataModel cvData, List<String> imgList) {
+    return Column(
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(bottom: 30),
+          child: _buildStatsWidget(cvData),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(bottom: 20),
+          child: _buildAuthorWidget(cvData),
+        ),
+        HtmlRender(
+          htmlContent: cvData.readInfo!.content!,
+          imgList: imgList,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildOpusContent(ReadDataModel cvData, List<String> picList) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(bottom: 30),
+          child: _buildStatsWidget(cvData),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(bottom: 20),
+          child: _buildAuthorWidget(cvData),
+        ),
+        ...cvData.readInfo!.opus!.content!.paragraphs!.map(
+          (ModuleParagraph paragraph) {
+            return Column(
+              children: [
+                if (paragraph.paraType == 1)
+                  _buildTextParagraph(paragraph)
+                else if (paragraph.paraType == 2)
+                  ..._buildPics(paragraph, picList)
+                else
+                  const SizedBox(),
+              ],
+            );
+          },
+        ),
+      ],
+    );
+  }
+
+  Widget _buildTextParagraph(ModuleParagraph paragraph) {
+    return Container(
+      alignment: TextHelper.getAlignment(paragraph.align),
+      margin: const EdgeInsets.only(bottom: 10),
+      child: Text.rich(
+        TextSpan(
+          children: paragraph.text?.nodes?.map((node) {
+                return TextHelper.buildTextSpan(node, paragraph.align, context);
+              }).toList() ??
+              [],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildError(String message) {
+    return SizedBox(
+      height: 100,
+      child: Center(
+        child: Text(message),
+      ),
+    );
+  }
+
+  Widget _buildLoading() {
+    return const SizedBox(
+      height: 100,
+      child: Center(
+        child: CircularProgressIndicator(),
+      ),
+    );
+  }
+
+  Widget _buildStatsWidget(ReadDataModel cvData) {
+    return Row(
+      children: [
+        StyledText(Utils.CustomStamp_str(
+          timestamp: cvData.readInfo!.publishTime!,
+          date: 'YY-MM-DD hh:mm',
+          toInt: false,
+        )),
+        const SizedBox(width: 10),
+        StyledText('${Utils.numFormat(cvData.readInfo!.stats!['view'])}浏览'),
+        const StyledText(' · '),
+        StyledText('${cvData.readInfo!.stats!['like']}点赞'),
+        // const StyledText(' · '),
+        // StyledText('${cvData.readInfo!.stats!['reply']}评论'),
+      ],
+    );
+  }
+
+  Widget _buildAuthorWidget(ReadDataModel cvData) {
+    final Author author = cvData.readInfo!.author!;
+    return Row(
+      children: [
+        NetworkImgLayer(
+          width: 48,
+          height: 48,
+          type: 'avatar',
+          src: author.face,
+        ),
+        const SizedBox(width: 10),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Text(
+                  author.name!,
+                  style: TextStyle(
+                    color: author.vip!.nicknameColor != null
+                        ? Color(author.vip!.nicknameColor!)
+                        : null,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+                const SizedBox(width: 6),
+                Image.asset(
+                  'assets/images/lv/lv${author.level}.png',
+                  height: 11,
+                ),
+              ],
+            ),
+            Row(
+              children: [
+                StyledText('粉丝: ${Utils.numFormat(author.fans)}'),
+                const SizedBox(width: 10),
+                StyledText(
+                    '文章: ${Utils.numFormat(cvData.readInfo!.totalArtNum)}'),
+              ],
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  List<Widget> _buildPics(ModuleParagraph paragraph, List<String> picList) {
+    return paragraph.pic?.pics
+            ?.map(
+              (Pic pic) => Center(
+                child: Padding(
+                  padding: const EdgeInsets.only(top: 10, bottom: 10),
+                  child: InkWell(
+                    onTap: () {
+                      controller.onPreviewImg(
+                        picList,
+                        picList.indexOf(pic.url!),
+                        context,
+                      );
+                    },
+                    child: NetworkImgLayer(
+                      src: pic.url,
+                      width: (Get.size.width - 32) * pic.scale!,
+                      height:
+                          (Get.size.width - 32) * pic.scale! / pic.aspectRatio!,
+                      type: 'emote',
+                    ),
+                  ),
+                ),
+              ),
+            )
+            .toList() ??
+        [];
+  }
+}
+
+class StyledText extends StatelessWidget {
+  final String text;
+
+  const StyledText(this.text, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      style: TextStyle(
+        fontSize: 13,
+        color: Theme.of(context).colorScheme.outline,
+      ),
+    );
+  }
+}
diff --git a/lib/pages/search_panel/widgets/article_panel.dart b/lib/pages/search_panel/widgets/article_panel.dart
index c7074229..dd53de66 100644
--- a/lib/pages/search_panel/widgets/article_panel.dart
+++ b/lib/pages/search_panel/widgets/article_panel.dart
@@ -14,11 +14,10 @@ Widget searchArticlePanel(BuildContext context, ctr, list) {
     itemBuilder: (context, index) {
       return InkWell(
         onTap: () {
-          Get.toNamed('/htmlRender', parameters: {
-            'url': 'www.bilibili.com/read/cv${list[index].id}',
+          Get.toNamed('/read', parameters: {
             'title': list[index].subTitle,
-            'id': 'cv${list[index].id}',
-            'dynamicType': 'read'
+            'id': list[index].id.toString(),
+            'articleType': 'read'
           });
         },
         child: Padding(
diff --git a/lib/pages/setting/pages/action_menu_set.dart b/lib/pages/setting/pages/action_menu_set.dart
index 7a4fd9ba..3655df73 100644
--- a/lib/pages/setting/pages/action_menu_set.dart
+++ b/lib/pages/setting/pages/action_menu_set.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:hive/hive.dart';
 import 'package:pilipala/models/common/action_type.dart';
-import 'package:pilipala/utils/global_data.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 import '../../../utils/storage.dart';
 
 class ActionMenuSetPage extends StatefulWidget {
@@ -38,7 +38,7 @@ class _ActionMenuSetPageState extends State<ActionMenuSetPage> {
         .map<String>((i) => (i['value'] as ActionType).value)
         .toList();
     setting.put(SettingBoxKey.actionTypeSort, sortedTabbar);
-    GlobalData().actionTypeSort = sortedTabbar;
+    GlobalDataCache().actionTypeSort = sortedTabbar;
     SmartDialog.showToast('操作成功');
   }
 
diff --git a/lib/pages/setting/pages/navigation_bar_set.dart b/lib/pages/setting/pages/navigation_bar_set.dart
index 09e92bc3..05407c16 100644
--- a/lib/pages/setting/pages/navigation_bar_set.dart
+++ b/lib/pages/setting/pages/navigation_bar_set.dart
@@ -74,7 +74,6 @@ class _NavigationbarSetPageState extends State<NavigationBarSetPage> {
           },
           title: Text(defaultNavTabs[i]['label']),
           secondary: const Icon(Icons.drag_indicator_rounded),
-          enabled: defaultNavTabs[i]['id'] != 0,
         )
       ]
     ];
diff --git a/lib/pages/setting/pages/play_gesture_set.dart b/lib/pages/setting/pages/play_gesture_set.dart
index f688c43c..e671bfb2 100644
--- a/lib/pages/setting/pages/play_gesture_set.dart
+++ b/lib/pages/setting/pages/play_gesture_set.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
-import 'package:pilipala/utils/global_data.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 
 import '../../../models/common/gesture_mode.dart';
 import '../../../utils/storage.dart';
@@ -64,11 +64,11 @@ class _PlayGesturePageState extends State<PlayGesturePage> {
                 },
               );
               if (result != null) {
-                GlobalData().fullScreenGestureMode = FullScreenGestureMode
+                GlobalDataCache().fullScreenGestureMode = FullScreenGestureMode
                     .values
                     .firstWhere((element) => element.values == result);
                 fullScreenGestureMode =
-                    GlobalData().fullScreenGestureMode.index;
+                    GlobalDataCache().fullScreenGestureMode.index;
                 setting.put(
                     SettingBoxKey.fullScreenGestureMode, fullScreenGestureMode);
                 setState(() {});
diff --git a/lib/pages/setting/play_setting.dart b/lib/pages/setting/play_setting.dart
index cb8a3996..a3c75ab5 100644
--- a/lib/pages/setting/play_setting.dart
+++ b/lib/pages/setting/play_setting.dart
@@ -9,7 +9,7 @@ import 'package:pilipala/models/video/play/quality.dart';
 import 'package:pilipala/pages/setting/widgets/select_dialog.dart';
 import 'package:pilipala/plugin/pl_player/index.dart';
 import 'package:pilipala/services/service_locator.dart';
-import 'package:pilipala/utils/global_data.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 import 'package:pilipala/utils/storage.dart';
 
 import '../../models/live/quality.dart';
@@ -162,7 +162,7 @@ class _PlaySettingState extends State<PlaySetting> {
               setKey: SettingBoxKey.enablePlayerControlAnimation,
               defaultVal: true,
               callFn: (bool val) {
-                GlobalData().enablePlayerControlAnimation = val;
+                GlobalDataCache().enablePlayerControlAnimation = val;
               }),
           SetSwitchItem(
             title: '港澳台模式',
diff --git a/lib/pages/setting/style_setting.dart b/lib/pages/setting/style_setting.dart
index 64e4bdb8..80f3b1ed 100644
--- a/lib/pages/setting/style_setting.dart
+++ b/lib/pages/setting/style_setting.dart
@@ -8,7 +8,7 @@ import 'package:pilipala/models/common/theme_type.dart';
 import 'package:pilipala/pages/setting/pages/color_select.dart';
 import 'package:pilipala/pages/setting/widgets/select_dialog.dart';
 import 'package:pilipala/pages/setting/widgets/slide_dialog.dart';
-import 'package:pilipala/utils/global_data.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 import 'package:pilipala/utils/storage.dart';
 
 import '../../models/common/dynamic_badge_mode.dart';
@@ -176,7 +176,7 @@ class _StyleSettingState extends State<StyleSetting> {
                                   SettingBoxKey.defaultPicQa, picQuality);
                               Get.back();
                               settingController.picQuality.value = picQuality;
-                              GlobalData().imgQuality = picQuality;
+                              GlobalDataCache().imgQuality = picQuality;
                               SmartDialog.showToast('设置成功');
                             },
                             child: const Text('确定'),
diff --git a/lib/pages/subscription_detail/widget/sub_video_card.dart b/lib/pages/subscription_detail/widget/sub_video_card.dart
index dcdee4ef..268c4a00 100644
--- a/lib/pages/subscription_detail/widget/sub_video_card.dart
+++ b/lib/pages/subscription_detail/widget/sub_video_card.dart
@@ -154,13 +154,9 @@ class VideoContent extends StatelessWidget {
                   padding: const EdgeInsets.only(top: 2),
                   child: Row(
                     children: [
-                      StatView(
-                        theme: 'gray',
-                        view: videoItem.cntInfo['play'],
-                      ),
+                      StatView(view: videoItem.cntInfo['play']),
                       const SizedBox(width: 8),
-                      StatDanMu(
-                          theme: 'gray', danmu: videoItem.cntInfo['danmaku']),
+                      StatDanMu(danmu: videoItem.cntInfo['danmaku']),
                       const Spacer(),
                     ],
                   ),
diff --git a/lib/pages/video/detail/controller.dart b/lib/pages/video/detail/controller.dart
index 2c81140d..c8be4f43 100644
--- a/lib/pages/video/detail/controller.dart
+++ b/lib/pages/video/detail/controller.dart
@@ -7,9 +7,11 @@ import 'package:get/get.dart';
 import 'package:hive/hive.dart';
 import 'package:ns_danmaku/ns_danmaku.dart';
 import 'package:pilipala/http/constants.dart';
+import 'package:pilipala/http/user.dart';
 import 'package:pilipala/http/video.dart';
 import 'package:pilipala/models/common/reply_type.dart';
 import 'package:pilipala/models/common/search_type.dart';
+import 'package:pilipala/models/video/later.dart';
 import 'package:pilipala/models/video/play/quality.dart';
 import 'package:pilipala/models/video/play/url.dart';
 import 'package:pilipala/models/video/reply/item.dart';
@@ -24,7 +26,10 @@ import '../../../models/video/subTitile/content.dart';
 import '../../../http/danmaku.dart';
 import '../../../plugin/pl_player/models/bottom_control_type.dart';
 import '../../../utils/id_utils.dart';
+import 'introduction/controller.dart';
+import 'reply/controller.dart';
 import 'widgets/header_control.dart';
+import 'widgets/watch_later_list.dart';
 
 class VideoDetailController extends GetxController
     with GetSingleTickerProviderStateMixin {
@@ -37,9 +42,10 @@ class VideoDetailController extends GetxController
   Map videoItem = {};
   // 视频类型 默认投稿视频
   SearchType videoType = Get.arguments['videoType'] ?? SearchType.video;
+  // 页面来源 稍后再看 收藏夹
+  RxString sourceType = 'normal'.obs;
 
   /// tabs相关配置
-  int tabInitialIndex = 0;
   late TabController tabCtr;
   RxList<String> tabs = <String>['简介', '评论'].obs;
 
@@ -110,6 +116,9 @@ class VideoDetailController extends GetxController
   RxDouble sheetHeight = 0.0.obs;
   RxString archiveSourceType = 'dash'.obs;
   ScrollController? replyScrillController;
+  List<MediaVideoItemModel> mediaList = <MediaVideoItemModel>[];
+  RxBool isWatchLaterVisible = false.obs;
+  RxString watchLaterTitle = ''.obs;
 
   @override
   void onInit() {
@@ -119,9 +128,7 @@ class VideoDetailController extends GetxController
     if (argMap.containsKey('videoItem')) {
       var args = argMap['videoItem'];
       updateCover(args.pic);
-    }
-
-    if (argMap.containsKey('pic')) {
+    } else if (argMap.containsKey('pic')) {
       updateCover(argMap['pic']);
     }
 
@@ -160,6 +167,21 @@ class VideoDetailController extends GetxController
       bvid: bvid,
       videoType: videoType,
     );
+
+    sourceType.value = argMap['sourceType'] ?? 'normal';
+    isWatchLaterVisible.value =
+        sourceType.value == 'watchLater' || sourceType.value == 'fav';
+    if (sourceType.value == 'watchLater') {
+      watchLaterTitle.value = '稍后再看';
+      fetchMediaList();
+    }
+    if (sourceType.value == 'fav') {
+      watchLaterTitle.value = argMap['favTitle'];
+      queryFavVideoList();
+    }
+    tabCtr.addListener(() {
+      onTabChanged();
+    });
   }
 
   showReplyReplyPanel(oid, fRpid, firstFloor, currentReply, loadMore) {
@@ -561,4 +583,101 @@ class VideoDetailController extends GetxController
           duration: const Duration(milliseconds: 300), curve: Curves.ease);
     }
   }
+
+  void toggeleWatchLaterVisible(bool val) {
+    if (sourceType.value == 'watchLater' || sourceType.value == 'fav') {
+      isWatchLaterVisible.value = !isWatchLaterVisible.value;
+    }
+  }
+
+  // 获取稍后再看列表
+  Future fetchMediaList() async {
+    final Map argMap = Get.arguments;
+    var count = argMap['count'];
+    var res = await UserHttp.getMediaList(
+      type: 2,
+      bizId: userInfo.mid,
+      ps: count,
+    );
+    if (res['status']) {
+      mediaList = res['data'].reversed.toList();
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
+  // 稍后再看面板展开
+  showMediaListPanel() {
+    replyReplyBottomSheetCtr =
+        scaffoldKey.currentState?.showBottomSheet((BuildContext context) {
+      return MediaListPanel(
+        sheetHeight: sheetHeight.value,
+        mediaList: mediaList,
+        changeMediaList: changeMediaList,
+        panelTitle: watchLaterTitle.value,
+        bvid: bvid,
+        mediaId: Get.arguments['mediaId'],
+        hasMore: mediaList.length != Get.arguments['count'],
+      );
+    });
+    replyReplyBottomSheetCtr?.closed.then((value) {
+      isWatchLaterVisible.value = true;
+    });
+  }
+
+  // 切换稍后再看
+  Future changeMediaList(bvidVal, cidVal, aidVal, coverVal) async {
+    final VideoIntroController videoIntroCtr =
+        Get.find<VideoIntroController>(tag: heroTag);
+    bvid = bvidVal;
+    oid.value = aidVal ?? IdUtils.bv2av(bvid);
+    cid.value = cidVal;
+    danmakuCid.value = cidVal;
+    cover.value = coverVal;
+    queryVideoUrl();
+    clearSubtitleContent();
+    await getSubtitle();
+    setSubtitleContent();
+    // 重新请求评论
+    try {
+      /// 未渲染回复组件时可能异常
+      final VideoReplyController videoReplyCtr =
+          Get.find<VideoReplyController>(tag: heroTag);
+      videoReplyCtr.aid = aidVal;
+      videoReplyCtr.queryReplyList(type: 'init');
+    } catch (_) {}
+    videoIntroCtr.lastPlayCid.value = cidVal;
+    videoIntroCtr.bvid = bvidVal;
+    replyReplyBottomSheetCtr!.close();
+    await videoIntroCtr.queryVideoIntro();
+  }
+
+  // 获取收藏夹视频列表
+  Future queryFavVideoList() async {
+    final Map argMap = Get.arguments;
+    var mediaId = argMap['mediaId'];
+    var oid = argMap['oid'];
+    var res = await UserHttp.parseFavVideo(
+      mediaId: mediaId,
+      oid: oid,
+      bvid: bvid,
+    );
+    if (res['status']) {
+      mediaList = res['data'];
+    }
+  }
+
+  // 监听tabBarView切换
+  void onTabChanged() {
+    isWatchLaterVisible.value = tabCtr.index == 0;
+  }
+
+  @override
+  void onClose() {
+    super.onClose();
+    plPlayerController.dispose();
+    tabCtr.removeListener(() {
+      onTabChanged();
+    });
+  }
 }
diff --git a/lib/pages/video/detail/introduction/controller.dart b/lib/pages/video/detail/introduction/controller.dart
index a80ee41a..04a1249a 100644
--- a/lib/pages/video/detail/introduction/controller.dart
+++ b/lib/pages/video/detail/introduction/controller.dart
@@ -33,7 +33,7 @@ class VideoIntroController extends GetxController {
   // 视频详情 请求返回
   Rx<VideoDetailData> videoDetail = VideoDetailData().obs;
   // up主粉丝数
-  Map userStat = {'follower': '-'};
+  RxInt follower = 0.obs;
   // 是否点赞
   RxBool hasLike = false.obs;
   // 是否投币
@@ -115,7 +115,7 @@ class VideoIntroController extends GetxController {
   Future queryUserStat() async {
     var result = await UserHttp.userStat(mid: videoDetail.value.owner!.mid!);
     if (result['status']) {
-      userStat = result['data'];
+      follower.value = result['data']['follower'];
     }
   }
 
@@ -519,7 +519,10 @@ class VideoIntroController extends GetxController {
   // 设置关注分组
   void setFollowGroup() {
     showFlexibleBottomSheet(
-      bottomSheetColor: Colors.transparent,
+      bottomSheetBorderRadius: const BorderRadius.only(
+        topLeft: Radius.circular(16),
+        topRight: Radius.circular(16),
+      ),
       minHeight: 0.6,
       initHeight: 0.6,
       maxHeight: 1,
diff --git a/lib/pages/video/detail/introduction/view.dart b/lib/pages/video/detail/introduction/view.dart
index a89b4d28..04cf92fe 100644
--- a/lib/pages/video/detail/introduction/view.dart
+++ b/lib/pages/video/detail/introduction/view.dart
@@ -20,7 +20,7 @@ import 'package:pilipala/models/video_detail_res.dart';
 import 'package:pilipala/pages/video/detail/introduction/controller.dart';
 import 'package:pilipala/pages/video/detail/widgets/ai_detail.dart';
 import 'package:pilipala/utils/feed_back.dart';
-import 'package:pilipala/utils/global_data.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 import 'package:pilipala/utils/storage.dart';
 import 'package:pilipala/utils/utils.dart';
 import '../../../../http/user.dart';
@@ -144,7 +144,6 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
   final Box<dynamic> setting = GStrorage.setting;
   late double sheetHeight;
   late final dynamic owner;
-  late final dynamic follower;
   late int mid;
   late String memberHeroTag;
   late bool enableAi;
@@ -177,7 +176,6 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
     sheetHeight = localCache.get('sheetHeight');
 
     owner = widget.videoDetail!.owner;
-    follower = Utils.numFormat(videoIntroController.userStat['follower']);
     enableAi = setting.get(SettingBoxKey.enableAi, defaultValue: true);
     _expandableCtr = ExpandableController(initialExpanded: false);
 
@@ -230,7 +228,10 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
 
   void _showFavPanel() {
     showFlexibleBottomSheet(
-      bottomSheetColor: Colors.transparent,
+      bottomSheetBorderRadius: const BorderRadius.only(
+        topLeft: Radius.circular(16),
+        topRight: Radius.circular(16),
+      ),
       minHeight: 0.6,
       initHeight: 0.6,
       maxHeight: 1,
@@ -321,7 +322,7 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
               expanded: Text(
                 widget.videoDetail!.title!,
                 softWrap: true,
-                maxLines: 4,
+                maxLines: 10,
                 style: const TextStyle(
                   fontSize: 18,
                   fontWeight: FontWeight.bold,
@@ -346,13 +347,11 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
                   child: Row(
                     children: [
                       StatView(
-                        theme: 'gray',
                         view: widget.videoDetail!.stat!.view,
                         size: 'medium',
                       ),
                       const SizedBox(width: 10),
                       StatDanMu(
-                        theme: 'gray',
                         danmu: widget.videoDetail!.stat!.danmaku,
                         size: 'medium',
                       ),
@@ -469,13 +468,16 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
                       fadeOutDuration: Duration.zero,
                     ),
                     const SizedBox(width: 10),
-                    Text(owner.name, style: const TextStyle(fontSize: 13)),
+                    Text(widget.videoDetail!.owner!.name!,
+                        style: const TextStyle(fontSize: 13)),
                     const SizedBox(width: 6),
-                    Text(
-                      follower,
-                      style: TextStyle(
-                        fontSize: t.textTheme.labelSmall!.fontSize,
-                        color: outline,
+                    Obx(
+                      () => Text(
+                        Utils.numFormat(videoIntroController.follower.value),
+                        style: TextStyle(
+                          fontSize: t.textTheme.labelSmall!.fontSize,
+                          color: outline,
+                        ),
                       ),
                     ),
                     const Spacer(),
@@ -569,7 +571,7 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
   }
 
   Widget actionGrid(BuildContext context, videoIntroController) {
-    final actionTypeSort = GlobalData().actionTypeSort;
+    final actionTypeSort = GlobalDataCache().actionTypeSort;
 
     Widget progressWidget(progress) {
       return SizedBox(
diff --git a/lib/pages/video/detail/introduction/widgets/fav_panel.dart b/lib/pages/video/detail/introduction/widgets/fav_panel.dart
index a4e98df7..2cf7d236 100644
--- a/lib/pages/video/detail/introduction/widgets/fav_panel.dart
+++ b/lib/pages/video/detail/introduction/widgets/fav_panel.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
 import 'package:hive/hive.dart';
 import 'package:pilipala/common/widgets/http_error.dart';
@@ -26,128 +27,118 @@ class _FavPanelState extends State<FavPanel> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      clipBehavior: Clip.hardEdge,
-      decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surface,
-        borderRadius: const BorderRadius.only(
-          topLeft: Radius.circular(16),
-          topRight: Radius.circular(16),
+    return Column(
+      children: [
+        AppBar(
+          centerTitle: false,
+          elevation: 0,
+          automaticallyImplyLeading: false,
+          leadingWidth: 0,
+          title: Text(
+            '选择收藏夹',
+            style: Theme.of(context)
+                .textTheme
+                .titleMedium!
+                .copyWith(fontWeight: FontWeight.bold),
+          ),
         ),
-      ),
-      child: Column(
-        children: [
-          AppBar(
-            centerTitle: false,
-            elevation: 0,
-            automaticallyImplyLeading: false,
-            leadingWidth: 0,
-            title: Text(
-              '选择收藏夹',
-              style: Theme.of(context)
-                  .textTheme
-                  .titleMedium!
-                  .copyWith(fontWeight: FontWeight.bold),
-            ),
-          ),
-          Expanded(
-            child: Material(
-              child: FutureBuilder(
-                future: _futureBuilderFuture,
-                builder: (BuildContext context, AsyncSnapshot snapshot) {
-                  if (snapshot.connectionState == ConnectionState.done) {
-                    Map data = snapshot.data as Map;
-                    if (data['status']) {
-                      return Obx(
-                        () => ListView.builder(
-                          controller: widget.scrollController,
-                          itemCount:
-                              widget.ctr!.favFolderData.value.list!.length,
-                          itemBuilder: (context, index) {
-                            final item =
-                                widget.ctr!.favFolderData.value.list![index];
-                            return ListTile(
-                              onTap: () => widget.ctr!
-                                  .onChoose(item.favState != 1, index),
-                              dense: true,
-                              leading: const Icon(Icons.folder_outlined),
-                              minLeadingWidth: 0,
-                              title: Text(widget.ctr!.favFolderData.value
-                                  .list![index].title!),
-                              subtitle: Text(
-                                '${item.mediaCount}个内容 ',
+        Expanded(
+          child: Material(
+            child: FutureBuilder(
+              future: _futureBuilderFuture,
+              builder: (BuildContext context, AsyncSnapshot snapshot) {
+                if (snapshot.connectionState == ConnectionState.done) {
+                  Map data = snapshot.data as Map;
+                  if (data['status']) {
+                    return Obx(
+                      () => ListView.builder(
+                        controller: widget.scrollController,
+                        itemCount: widget.ctr!.favFolderData.value.list!.length,
+                        itemBuilder: (context, index) {
+                          final item =
+                              widget.ctr!.favFolderData.value.list![index];
+                          return ListTile(
+                            onTap: () =>
+                                widget.ctr!.onChoose(item.favState != 1, index),
+                            dense: true,
+                            leading: Icon([23, 1].contains(item.attr)
+                                ? Icons.lock_outline
+                                : Icons.folder_outlined),
+                            minLeadingWidth: 0,
+                            title: Text(item.title!),
+                            subtitle: Text(
+                              '${item.mediaCount}个内容 - ${[
+                                23,
+                                1
+                              ].contains(item.attr) ? '私密' : '公开'}',
+                            ),
+                            trailing: Transform.scale(
+                              scale: 0.9,
+                              child: Checkbox(
+                                value: item.favState == 1,
+                                onChanged: (bool? checkValue) =>
+                                    widget.ctr!.onChoose(checkValue!, index),
                               ),
-                              trailing: Transform.scale(
-                                scale: 0.9,
-                                child: Checkbox(
-                                  value: widget.ctr!.favFolderData.value
-                                          .list![index].favState ==
-                                      1,
-                                  onChanged: (bool? checkValue) =>
-                                      widget.ctr!.onChoose(checkValue!, index),
-                                ),
-                              ),
-                            );
-                          },
-                        ),
-                      );
-                    } else {
-                      return HttpError(
-                        errMsg: data['msg'],
-                        fn: () => setState(() {}),
-                      );
-                    }
+                            ),
+                          );
+                        },
+                      ),
+                    );
                   } else {
-                    // 骨架屏
-                    return const Text('请求中');
+                    return HttpError(
+                      errMsg: data['msg'],
+                      fn: () => setState(() {}),
+                    );
                   }
-                },
+                } else {
+                  // 骨架屏
+                  return const Text('请求中');
+                }
+              },
+            ),
+          ),
+        ),
+        Divider(
+          height: 1,
+          color: Theme.of(context).disabledColor.withOpacity(0.08),
+        ),
+        Padding(
+          padding: EdgeInsets.only(
+            left: 20,
+            right: 20,
+            top: 12,
+            bottom: MediaQuery.of(context).padding.bottom + 12,
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: <Widget>[
+              TextButton(
+                onPressed: () => Get.back(),
+                style: TextButton.styleFrom(
+                  padding: const EdgeInsets.only(left: 30, right: 30),
+                  backgroundColor:
+                      Theme.of(context).colorScheme.onInverseSurface, // 设置按钮背景色
+                ),
+                child: const Text('取消'),
               ),
-            ),
-          ),
-          Divider(
-            height: 1,
-            color: Theme.of(context).disabledColor.withOpacity(0.08),
-          ),
-          Padding(
-            padding: EdgeInsets.only(
-              left: 20,
-              right: 20,
-              top: 12,
-              bottom: MediaQuery.of(context).padding.bottom + 12,
-            ),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.end,
-              children: <Widget>[
-                TextButton(
-                  onPressed: () => Get.back(),
-                  style: TextButton.styleFrom(
-                    padding: const EdgeInsets.only(left: 30, right: 30),
-                    backgroundColor: Theme.of(context)
-                        .colorScheme
-                        .onInverseSurface, // 设置按钮背景色
-                  ),
-                  child: const Text('取消'),
+              const SizedBox(width: 10),
+              TextButton(
+                onPressed: () async {
+                  feedBack();
+                  await widget.ctr!.actionFavVideo();
+                },
+                style: TextButton.styleFrom(
+                  padding: const EdgeInsets.only(left: 30, right: 30),
+                  foregroundColor: Theme.of(context).colorScheme.onPrimary,
+                  backgroundColor:
+                      Theme.of(context).colorScheme.primary, // 设置按钮背景色
                 ),
-                const SizedBox(width: 10),
-                TextButton(
-                  onPressed: () async {
-                    feedBack();
-                    await widget.ctr!.actionFavVideo();
-                  },
-                  style: TextButton.styleFrom(
-                    padding: const EdgeInsets.only(left: 30, right: 30),
-                    foregroundColor: Theme.of(context).colorScheme.onPrimary,
-                    backgroundColor:
-                        Theme.of(context).colorScheme.primary, // 设置按钮背景色
-                  ),
-                  child: const Text('确认选择'),
-                ),
-              ],
-            ),
+                child: const Text('确认'),
+              ),
+            ],
           ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }
diff --git a/lib/pages/video/detail/introduction/widgets/group_panel.dart b/lib/pages/video/detail/introduction/widgets/group_panel.dart
index 4bb0980c..c007d52d 100644
--- a/lib/pages/video/detail/introduction/widgets/group_panel.dart
+++ b/lib/pages/video/detail/introduction/widgets/group_panel.dart
@@ -54,112 +54,101 @@ class _GroupPanelState extends State<GroupPanel> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      clipBehavior: Clip.hardEdge,
-      decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surface,
-        borderRadius: const BorderRadius.only(
-          topLeft: Radius.circular(16),
-          topRight: Radius.circular(16),
+    return Column(
+      children: <Widget>[
+        AppBar(
+          centerTitle: false,
+          elevation: 0,
+          leading: IconButton(
+              onPressed: () => Get.back(),
+              icon: const Icon(Icons.close_outlined)),
+          title: Text('设置关注分组', style: Theme.of(context).textTheme.titleMedium),
         ),
-      ),
-      child: Column(
-        children: <Widget>[
-          AppBar(
-            centerTitle: false,
-            elevation: 0,
-            leading: IconButton(
-                onPressed: () => Get.back(),
-                icon: const Icon(Icons.close_outlined)),
-            title:
-                Text('设置关注分组', style: Theme.of(context).textTheme.titleMedium),
-          ),
-          Expanded(
-            child: Material(
-              child: FutureBuilder(
-                future: _futureBuilderFuture,
-                builder: (BuildContext context, AsyncSnapshot snapshot) {
-                  if (snapshot.connectionState == ConnectionState.done) {
-                    Map data = snapshot.data as Map;
-                    if (data['status']) {
-                      tagsList = data['data'];
-                      return ListView.builder(
-                        controller: widget.scrollController,
-                        itemCount: data['data'].length,
-                        itemBuilder: (context, index) {
-                          return ListTile(
-                            onTap: () {
-                              data['data'][index].checked =
-                                  !data['data'][index].checked;
-                              showDefault =
-                                  !data['data'].any((e) => e.checked == true);
-                              setState(() {});
-                            },
-                            dense: true,
-                            leading: const Icon(Icons.group_outlined),
-                            minLeadingWidth: 0,
-                            title: Text(data['data'][index].name),
-                            subtitle: data['data'][index].tip != ''
-                                ? Text(data['data'][index].tip)
-                                : null,
-                            trailing: Transform.scale(
-                              scale: 0.9,
-                              child: Checkbox(
-                                value: data['data'][index].checked,
-                                onChanged: (bool? checkValue) {
-                                  data['data'][index].checked = checkValue;
-                                  showDefault = !data['data']
-                                      .any((e) => e.checked == true);
-                                  setState(() {});
-                                },
-                              ),
+        Expanded(
+          child: Material(
+            child: FutureBuilder(
+              future: _futureBuilderFuture,
+              builder: (BuildContext context, AsyncSnapshot snapshot) {
+                if (snapshot.connectionState == ConnectionState.done) {
+                  Map data = snapshot.data as Map;
+                  if (data['status']) {
+                    tagsList = data['data'];
+                    return ListView.builder(
+                      controller: widget.scrollController,
+                      itemCount: data['data'].length,
+                      itemBuilder: (context, index) {
+                        return ListTile(
+                          onTap: () {
+                            data['data'][index].checked =
+                                !data['data'][index].checked;
+                            showDefault =
+                                !data['data'].any((e) => e.checked == true);
+                            setState(() {});
+                          },
+                          dense: true,
+                          leading: const Icon(Icons.group_outlined),
+                          minLeadingWidth: 0,
+                          title: Text(data['data'][index].name),
+                          subtitle: data['data'][index].tip != ''
+                              ? Text(data['data'][index].tip)
+                              : null,
+                          trailing: Transform.scale(
+                            scale: 0.9,
+                            child: Checkbox(
+                              value: data['data'][index].checked,
+                              onChanged: (bool? checkValue) {
+                                data['data'][index].checked = checkValue;
+                                showDefault =
+                                    !data['data'].any((e) => e.checked == true);
+                                setState(() {});
+                              },
                             ),
-                          );
-                        },
-                      );
-                    } else {
-                      return HttpError(
-                        errMsg: data['msg'],
-                        fn: () => setState(() {}),
-                      );
-                    }
+                          ),
+                        );
+                      },
+                    );
                   } else {
-                    // 骨架屏
-                    return const Text('请求中');
+                    return HttpError(
+                      errMsg: data['msg'],
+                      fn: () => setState(() {}),
+                    );
                   }
-                },
-              ),
+                } else {
+                  // 骨架屏
+                  return const Text('请求中');
+                }
+              },
             ),
           ),
-          Divider(
-            height: 1,
-            color: Theme.of(context).disabledColor.withOpacity(0.08),
+        ),
+        Divider(
+          height: 1,
+          color: Theme.of(context).disabledColor.withOpacity(0.08),
+        ),
+        Padding(
+          padding: EdgeInsets.only(
+            left: 20,
+            right: 20,
+            top: 12,
+            bottom: MediaQuery.of(context).padding.bottom + 12,
           ),
-          Padding(
-            padding: EdgeInsets.only(
-              left: 20,
-              right: 20,
-              top: 12,
-              bottom: MediaQuery.of(context).padding.bottom + 12,
-            ),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.end,
-              children: [
-                TextButton(
-                  onPressed: () => onSave(),
-                  style: TextButton.styleFrom(
-                    padding: const EdgeInsets.only(left: 30, right: 30),
-                    foregroundColor: Theme.of(context).colorScheme.onPrimary,
-                    backgroundColor:
-                        Theme.of(context).colorScheme.primary, // 设置按钮背景色
-                  ),
-                  child: Text(showDefault ? '保存至默认分组' : '保存'),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              TextButton(
+                onPressed: () => onSave(),
+                style: TextButton.styleFrom(
+                  padding: const EdgeInsets.only(left: 30, right: 30),
+                  foregroundColor: Theme.of(context).colorScheme.onPrimary,
+                  backgroundColor:
+                      Theme.of(context).colorScheme.primary, // 设置按钮背景色
                 ),
-              ],
-            ),
+                child: Text(showDefault ? '保存至默认分组' : '保存'),
+              ),
+            ],
           ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }
diff --git a/lib/pages/video/detail/view.dart b/lib/pages/video/detail/view.dart
index 91c5ae00..5476adc9 100644
--- a/lib/pages/video/detail/view.dart
+++ b/lib/pages/video/detail/view.dart
@@ -68,6 +68,10 @@ class _VideoDetailPageState extends State<VideoDetailPage>
   late final AppLifecycleListener _lifecycleListener;
   late double statusHeight;
 
+  // 稍后再看控制器
+  // late AnimationController _laterCtr;
+  // late Animation<Offset> _laterOffsetAni;
+
   @override
   void initState() {
     super.initState();
@@ -104,6 +108,7 @@ class _VideoDetailPageState extends State<VideoDetailPage>
     }
     WidgetsBinding.instance.addObserver(this);
     lifecycleListener();
+    // watchLaterControllerInit();
   }
 
   // 获取视频资源，初始化播放器
@@ -211,6 +216,7 @@ class _VideoDetailPageState extends State<VideoDetailPage>
           vdCtr.bottomList.removeAt(3);
         }
       }
+      vdCtr.toggeleWatchLaterVisible(!isFullScreen);
     });
   }
 
@@ -236,6 +242,8 @@ class _VideoDetailPageState extends State<VideoDetailPage>
     appbarStream.close();
     WidgetsBinding.instance.removeObserver(this);
     _lifecycleListener.dispose();
+    // _laterCtr.dispose();
+    // _laterOffsetAni.removeListener(() {});
     super.dispose();
   }
 
@@ -482,6 +490,21 @@ class _VideoDetailPageState extends State<VideoDetailPage>
     );
   }
 
+  /// 稍后再看控制器初始化
+  // void watchLaterControllerInit() {
+  //   _laterCtr = AnimationController(
+  //     duration: const Duration(milliseconds: 300),
+  //     vsync: this,
+  //   );
+  //   _laterOffsetAni = Tween<Offset>(
+  //     begin: const Offset(0.0, 1.0),
+  //     end: Offset.zero,
+  //   ).animate(CurvedAnimation(
+  //     parent: _laterCtr,
+  //     curve: Curves.easeInOut,
+  //   ));
+  // }
+
   @override
   Widget build(BuildContext context) {
     final sizeContext = MediaQuery.sizeOf(context);
@@ -595,6 +618,7 @@ class _VideoDetailPageState extends State<VideoDetailPage>
               child: AppBar(
                 backgroundColor: Colors.black,
                 elevation: 0,
+                scrolledUnderElevation: 0,
               ),
             ),
             body: ExtendedNestedScrollView(
@@ -757,6 +781,62 @@ class _VideoDetailPageState extends State<VideoDetailPage>
                 null,
               );
             }),
+          ),
+
+          /// 稍后再看列表
+          Obx(
+            () => Visibility(
+              visible: vdCtr.sourceType.value == 'watchLater' ||
+                  vdCtr.sourceType.value == 'fav',
+              child: AnimatedPositioned(
+                duration: const Duration(milliseconds: 400),
+                curve: Curves.easeInOut,
+                left: 12,
+                bottom: vdCtr.isWatchLaterVisible.value
+                    ? MediaQuery.of(context).padding.bottom + 12
+                    : -100,
+                child: Material(
+                  color: Colors.transparent,
+                  child: InkWell(
+                    onTap: () {
+                      vdCtr.toggeleWatchLaterVisible(
+                          !vdCtr.isWatchLaterVisible.value);
+                      vdCtr.showMediaListPanel();
+                    },
+                    borderRadius: const BorderRadius.all(Radius.circular(14)),
+                    child: Container(
+                      width: Get.width - 24,
+                      height: 54,
+                      padding: const EdgeInsets.symmetric(horizontal: 16),
+                      decoration: BoxDecoration(
+                        color: Theme.of(context)
+                            .colorScheme
+                            .secondaryContainer
+                            .withOpacity(0.95),
+                        borderRadius:
+                            const BorderRadius.all(Radius.circular(14)),
+                      ),
+                      child: Row(children: [
+                        const Icon(Icons.playlist_play, size: 24),
+                        const SizedBox(width: 10),
+                        Text(
+                          vdCtr.watchLaterTitle.value,
+                          style: TextStyle(
+                            color: Theme.of(context)
+                                .colorScheme
+                                .onSecondaryContainer,
+                            fontWeight: FontWeight.bold,
+                            letterSpacing: 0.2,
+                          ),
+                        ),
+                        const Spacer(),
+                        const Icon(Icons.keyboard_arrow_up_rounded, size: 26),
+                      ]),
+                    ),
+                  ),
+                ),
+              ),
+            ),
           )
         ],
       ),
diff --git a/lib/pages/video/detail/widgets/watch_later_list.dart b/lib/pages/video/detail/widgets/watch_later_list.dart
new file mode 100644
index 00000000..b367ae40
--- /dev/null
+++ b/lib/pages/video/detail/widgets/watch_later_list.dart
@@ -0,0 +1,229 @@
+import 'package:easy_debounce/easy_throttle.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/common/constants.dart';
+import 'package:pilipala/common/widgets/badge.dart';
+import 'package:pilipala/common/widgets/network_img_layer.dart';
+import 'package:pilipala/common/widgets/stat/danmu.dart';
+import 'package:pilipala/common/widgets/stat/view.dart';
+import 'package:pilipala/http/search.dart';
+import 'package:pilipala/http/user.dart';
+import 'package:pilipala/models/video/later.dart';
+import 'package:pilipala/utils/utils.dart';
+
+class MediaListPanel extends StatefulWidget {
+  const MediaListPanel({
+    this.sheetHeight,
+    required this.mediaList,
+    this.changeMediaList,
+    this.panelTitle,
+    this.bvid,
+    this.mediaId,
+    this.hasMore = false,
+    super.key,
+  });
+
+  final double? sheetHeight;
+  final List<MediaVideoItemModel> mediaList;
+  final Function? changeMediaList;
+  final String? panelTitle;
+  final String? bvid;
+  final int? mediaId;
+  final bool hasMore;
+
+  @override
+  State<MediaListPanel> createState() => _MediaListPanelState();
+}
+
+class _MediaListPanelState extends State<MediaListPanel> {
+  RxList<MediaVideoItemModel> mediaList = <MediaVideoItemModel>[].obs;
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    mediaList.value = widget.mediaList;
+    _scrollController.addListener(() {
+      if (_scrollController.position.pixels >=
+          _scrollController.position.maxScrollExtent - 200) {
+        if (widget.hasMore) {
+          EasyThrottle.throttle(
+              'queryFollowDynamic', const Duration(seconds: 1), () {
+            loadMore();
+          });
+        }
+      }
+    });
+  }
+
+  void loadMore() async {
+    var res = await UserHttp.getMediaList(
+      type: 3,
+      bizId: widget.mediaId!,
+      ps: 20,
+      oid: mediaList.last.id,
+    );
+    if (res['status']) {
+      if (res['data'].isNotEmpty) {
+        mediaList.addAll(res['data']);
+      }
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: widget.sheetHeight,
+      color: Theme.of(context).colorScheme.surface,
+      child: Column(
+        children: [
+          AppBar(
+            toolbarHeight: 45,
+            automaticallyImplyLeading: false,
+            centerTitle: false,
+            title: Text(
+              widget.panelTitle ?? '稍后再看',
+              style: Theme.of(context).textTheme.titleSmall,
+            ),
+            actions: [
+              IconButton(
+                icon: const Icon(Icons.close, size: 20),
+                onPressed: () {
+                  Navigator.pop(context);
+                },
+              ),
+              const SizedBox(width: 14),
+            ],
+          ),
+          Expanded(
+            child: Material(
+              color: Theme.of(context).colorScheme.surface,
+              child: Obx(
+                () => ListView.builder(
+                  controller: _scrollController,
+                  itemCount: mediaList.length,
+                  itemBuilder: ((context, index) {
+                    var item = mediaList[index];
+                    return InkWell(
+                      onTap: () async {
+                        String bvid = item.bvId!;
+                        int? aid = item.id;
+                        String cover = item.cover ?? '';
+                        final int cid =
+                            await SearchHttp.ab2c(aid: aid, bvid: bvid);
+                        widget.changeMediaList?.call(bvid, cid, aid, cover);
+                      },
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 10, vertical: 8),
+                        child: LayoutBuilder(
+                          builder: (BuildContext context,
+                              BoxConstraints boxConstraints) {
+                            const double width = 120;
+                            return Container(
+                              constraints: const BoxConstraints(minHeight: 88),
+                              height: width / StyleString.aspectRatio,
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.start,
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: <Widget>[
+                                  AspectRatio(
+                                    aspectRatio: StyleString.aspectRatio,
+                                    child: LayoutBuilder(
+                                      builder: (BuildContext context,
+                                          BoxConstraints boxConstraints) {
+                                        final double maxWidth =
+                                            boxConstraints.maxWidth;
+                                        final double maxHeight =
+                                            boxConstraints.maxHeight;
+                                        return Stack(
+                                          children: [
+                                            NetworkImgLayer(
+                                              src: item.cover ?? '',
+                                              width: maxWidth,
+                                              height: maxHeight,
+                                            ),
+                                            PBadge(
+                                              text: Utils.timeFormat(
+                                                  item.duration!),
+                                              right: 6.0,
+                                              bottom: 6.0,
+                                              type: 'gray',
+                                            ),
+                                          ],
+                                        );
+                                      },
+                                    ),
+                                  ),
+                                  Expanded(
+                                    child: Padding(
+                                      padding: const EdgeInsets.fromLTRB(
+                                          10, 0, 6, 0),
+                                      child: Column(
+                                        crossAxisAlignment:
+                                            CrossAxisAlignment.start,
+                                        children: [
+                                          Text(
+                                            item.title as String,
+                                            textAlign: TextAlign.start,
+                                            maxLines: 2,
+                                            overflow: TextOverflow.ellipsis,
+                                            style: TextStyle(
+                                              fontWeight: FontWeight.w500,
+                                              color: item.bvId == widget.bvid
+                                                  ? Theme.of(context)
+                                                      .colorScheme
+                                                      .primary
+                                                  : null,
+                                            ),
+                                          ),
+                                          const Spacer(),
+                                          Text(
+                                            item.upper?.name as String,
+                                            style: TextStyle(
+                                              fontSize: Theme.of(context)
+                                                  .textTheme
+                                                  .labelMedium!
+                                                  .fontSize,
+                                              color: Theme.of(context)
+                                                  .colorScheme
+                                                  .outline,
+                                            ),
+                                          ),
+                                          const SizedBox(height: 2),
+                                          Row(
+                                            children: [
+                                              StatView(
+                                                  view: item.cntInfo!['play']
+                                                      as int),
+                                              const SizedBox(width: 8),
+                                              StatDanMu(
+                                                  danmu:
+                                                      item.cntInfo!['danmaku']
+                                                          as int),
+                                            ],
+                                          ),
+                                        ],
+                                      ),
+                                    ),
+                                  )
+                                ],
+                              ),
+                            );
+                          },
+                        ),
+                      ),
+                    );
+                  }),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/pages/whisper/view.dart b/lib/pages/whisper/view.dart
index 7082619f..e97aa79b 100644
--- a/lib/pages/whisper/view.dart
+++ b/lib/pages/whisper/view.dart
@@ -217,6 +217,7 @@ class SessionItem extends StatelessWidget {
     final String heroTag = Utils.makeHeroTag(sessionItem.accountInfo?.mid ?? 0);
     final content = sessionItem.lastMsg.content;
     final msgStatus = sessionItem.lastMsg.msgStatus;
+    final int msgType = sessionItem.lastMsg.msgType;
 
     return ListTile(
       onTap: () {
@@ -251,13 +252,15 @@ class SessionItem extends StatelessWidget {
       subtitle: Text(
           msgStatus == 1
               ? '你撤回了一条消息'
-              : content != null && content != ''
-                  ? (content['text'] ??
-                      content['content'] ??
-                      content['title'] ??
-                      content['reply_content'] ??
-                      '不支持的消息类型')
-                  : '不支持的消息类型',
+              : msgType == 2
+                  ? '[图片]'
+                  : content != null && content != ''
+                      ? (content['text'] ??
+                          content['content'] ??
+                          content['title'] ??
+                          content['reply_content'] ??
+                          '不支持的消息类型')
+                      : '不支持的消息类型',
           maxLines: 1,
           overflow: TextOverflow.ellipsis,
           style: Theme.of(context)
diff --git a/lib/pages/whisper_detail/controller.dart b/lib/pages/whisper_detail/controller.dart
index 32e0ceb0..ec828afb 100644
--- a/lib/pages/whisper_detail/controller.dart
+++ b/lib/pages/whisper_detail/controller.dart
@@ -22,6 +22,7 @@ class WhisperDetailController extends GetxController {
   final TextEditingController replyContentController = TextEditingController();
   Box userInfoCache = GStrorage.userInfo;
   List emoteList = [];
+  List<String> picList = [];
 
   @override
   void onInit() {
@@ -41,6 +42,18 @@ class WhisperDetailController extends GetxController {
     var res = await MsgHttp.sessionMsg(talkerId: talkerId);
     if (res['status']) {
       messageList.value = res['data'].messages;
+      // 找出图片
+      try {
+        for (var item in messageList) {
+          if (item.msgType == 2) {
+            picList.add(item.content['url']);
+          }
+        }
+        picList = picList.reversed.toList();
+      } catch (e) {
+        print('e: $e');
+      }
+
       if (messageList.isNotEmpty) {
         ackSessionMsg();
         if (res['data'].eInfos != null) {
diff --git a/lib/pages/whisper_detail/view.dart b/lib/pages/whisper_detail/view.dart
index 912b5dc5..3ea59343 100644
--- a/lib/pages/whisper_detail/view.dart
+++ b/lib/pages/whisper_detail/view.dart
@@ -193,27 +193,21 @@ class _WhisperDetailPageState extends State<WhisperDetailPage>
                             ? const SizedBox()
                             : Align(
                                 alignment: Alignment.topCenter,
-                                child: ListView.builder(
+                                child: ListView.separated(
                                   itemCount: messageList.length,
                                   shrinkWrap: true,
                                   reverse: true,
                                   itemBuilder: (_, int i) {
-                                    if (i == 0) {
-                                      return Column(
-                                        children: [
-                                          ChatItem(
-                                              item: messageList[i],
-                                              e_infos: _whisperDetailController
-                                                  .eInfos),
-                                          const SizedBox(height: 20),
-                                        ],
-                                      );
-                                    } else {
-                                      return ChatItem(
-                                          item: messageList[i],
-                                          e_infos:
-                                              _whisperDetailController.eInfos);
-                                    }
+                                    return ChatItem(
+                                      item: messageList[i],
+                                      e_infos: _whisperDetailController.eInfos,
+                                      ctr: _whisperDetailController,
+                                    );
+                                  },
+                                  separatorBuilder: (_, int i) {
+                                    return i == 0
+                                        ? const SizedBox(height: 20)
+                                        : const SizedBox.shrink();
                                   },
                                 ),
                               ),
diff --git a/lib/pages/whisper_detail/widget/chat_item.dart b/lib/pages/whisper_detail/widget/chat_item.dart
index 94347aff..7ddd1d83 100644
--- a/lib/pages/whisper_detail/widget/chat_item.dart
+++ b/lib/pages/whisper_detail/widget/chat_item.dart
@@ -2,14 +2,18 @@
 // ignore_for_file: constant_identifier_names
 
 import 'dart:convert';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
 import 'package:pilipala/common/widgets/network_img_layer.dart';
+import 'package:pilipala/plugin/pl_gallery/hero_dialog_route.dart';
+import 'package:pilipala/plugin/pl_gallery/interactiveviewer_gallery.dart';
 import 'package:pilipala/utils/route_push.dart';
 import 'package:pilipala/utils/utils.dart';
 import 'package:pilipala/utils/storage.dart';
 import '../../../http/search.dart';
+import '../controller.dart';
 
 enum MsgType {
   invalid(value: 0, label: "空空的~"),
@@ -42,10 +46,12 @@ enum MsgType {
 class ChatItem extends StatelessWidget {
   dynamic item;
   List? e_infos;
+  WhisperDetailController ctr;
 
   ChatItem({
     super.key,
-    this.item,
+    required this.item,
+    required this.ctr,
     this.e_infos,
   });
 
@@ -157,10 +163,48 @@ class ChatItem extends StatelessWidget {
         case MsgType.text:
           return richTextMessage(context);
         case MsgType.pic:
-          return NetworkImgLayer(
-            width: 220,
-            height: 220 * content['height'] / content['width'],
-            src: content['url'],
+          return InkWell(
+            onTap: () {
+              Navigator.of(context).push(
+                HeroDialogRoute<void>(
+                  builder: (BuildContext context) => InteractiveviewerGallery(
+                    sources: ctr.picList,
+                    initIndex: ctr.picList.indexOf(content['url']),
+                    itemBuilder: (
+                      BuildContext context,
+                      int index,
+                      bool isFocus,
+                      bool enablePageView,
+                    ) {
+                      return GestureDetector(
+                        behavior: HitTestBehavior.opaque,
+                        onTap: () {
+                          if (enablePageView) {
+                            Navigator.of(context).pop();
+                          }
+                        },
+                        child: Center(
+                          child: Hero(
+                            tag: ctr.picList[index],
+                            child: CachedNetworkImage(
+                              fadeInDuration: const Duration(milliseconds: 0),
+                              imageUrl: ctr.picList[index],
+                              fit: BoxFit.contain,
+                            ),
+                          ),
+                        ),
+                      );
+                    },
+                    onPageChanged: (int pageIndex) {},
+                  ),
+                ),
+              );
+            },
+            child: NetworkImgLayer(
+              width: 220,
+              height: 220 * content['height'] / content['width'],
+              src: content['url'],
+            ),
           );
         case MsgType.share_v2:
           return Column(
diff --git a/lib/plugin/pl_player/controller.dart b/lib/plugin/pl_player/controller.dart
index a5de33fd..8dff954a 100644
--- a/lib/plugin/pl_player/controller.dart
+++ b/lib/plugin/pl_player/controller.dart
@@ -18,6 +18,7 @@ import 'package:pilipala/plugin/pl_player/index.dart';
 import 'package:pilipala/plugin/pl_player/models/play_repeat.dart';
 import 'package:pilipala/services/service_locator.dart';
 import 'package:pilipala/utils/feed_back.dart';
+import 'package:pilipala/utils/global_data_cache.dart';
 import 'package:pilipala/utils/storage.dart';
 import 'package:screen_brightness/screen_brightness.dart';
 import 'package:status_bar_control/status_bar_control.dart';
@@ -277,50 +278,19 @@ class PlPlayerController {
 
   // 添加一个私有构造函数
   PlPlayerController._internal(this.videoType) {
-    isOpenDanmu.value =
-        setting.get(SettingBoxKey.enableShowDanmaku, defaultValue: false);
-    blockTypes =
-        localCache.get(LocalCacheKey.danmakuBlockType, defaultValue: []);
-    showArea = localCache.get(LocalCacheKey.danmakuShowArea, defaultValue: 0.5);
-    // 不透明度
-    opacityVal =
-        localCache.get(LocalCacheKey.danmakuOpacity, defaultValue: 1.0);
-    // 字体大小
-    fontSizeVal =
-        localCache.get(LocalCacheKey.danmakuFontScale, defaultValue: 1.0);
-    // 弹幕时间
-    danmakuDurationVal =
-        localCache.get(LocalCacheKey.danmakuDuration, defaultValue: 4.0);
-    // 描边粗细
-    strokeWidth = localCache.get(LocalCacheKey.strokeWidth, defaultValue: 1.5);
-    playRepeat = PlayRepeat.values.toList().firstWhere(
-          (e) =>
-              e.value ==
-              videoStorage.get(VideoBoxKey.playRepeat,
-                  defaultValue: PlayRepeat.pause.value),
-        );
-    _playbackSpeed.value =
-        videoStorage.get(VideoBoxKey.playSpeedDefault, defaultValue: 1.0);
-    enableAutoLongPressSpeed = setting
-        .get(SettingBoxKey.enableAutoLongPressSpeed, defaultValue: false);
-    if (!enableAutoLongPressSpeed) {
-      _longPressSpeed.value = videoStorage
-          .get(VideoBoxKey.longPressSpeedDefault, defaultValue: 2.0);
-    }
-    // 自定义倍速集合
-    speedsList = List<double>.from(videoStorage
-        .get(VideoBoxKey.customSpeedsList, defaultValue: <double>[]));
-    // 默认倍速
-    speedsList = List<double>.from(videoStorage
-        .get(VideoBoxKey.customSpeedsList, defaultValue: <double>[]));
-    //playSpeedSystem
-    final List<double> playSpeedSystem =
-        videoStorage.get(VideoBoxKey.playSpeedSystem, defaultValue: playSpeed);
-
-    // for (final PlaySpeed i in PlaySpeed.values) {
-    speedsList.addAll(playSpeedSystem);
-    // }
-
+    final cache = GlobalDataCache();
+    isOpenDanmu.value = cache.isOpenDanmu;
+    blockTypes = cache.blockTypes;
+    showArea = cache.showArea;
+    opacityVal = cache.opacityVal;
+    fontSizeVal = cache.fontSizeVal;
+    danmakuDurationVal = cache.danmakuDurationVal;
+    strokeWidth = cache.strokeWidth;
+    playRepeat = cache.playRepeat;
+    _playbackSpeed.value = cache.playbackSpeed;
+    enableAutoLongPressSpeed = cache.enableAutoLongPressSpeed;
+    _longPressSpeed.value = cache.longPressSpeed;
+    speedsList = cache.speedsList;
     // _playerEventSubs = onPlayerStatusChanged.listen((PlayerStatus status) {
     //   if (status == PlayerStatus.playing) {
     //     WakelockPlus.enable();
diff --git a/lib/plugin/pl_player/view.dart b/lib/plugin/pl_player/view.dart
index f3e0946b..dd5b617e 100644
--- a/lib/plugin/pl_player/view.dart
+++ b/lib/plugin/pl_player/view.dart
@@ -19,13 +19,14 @@ import 'package:pilipala/utils/feed_back.dart';
 import 'package:pilipala/utils/storage.dart';
 import 'package:screen_brightness/screen_brightness.dart';
 
-import '../../utils/global_data.dart';
+import '../../utils/global_data_cache.dart';
 import 'models/bottom_control_type.dart';
 import 'models/bottom_progress_behavior.dart';
 import 'widgets/app_bar_ani.dart';
 import 'widgets/backward_seek.dart';
 import 'widgets/bottom_control.dart';
 import 'widgets/common_btn.dart';
+import 'widgets/control_bar.dart';
 import 'widgets/forward_seek.dart';
 import 'widgets/play_pause_btn.dart';
 
@@ -40,6 +41,7 @@ class PLVideoPlayer extends StatefulWidget {
     this.customWidgets,
     this.showEposideCb,
     this.fullScreenCb,
+    this.alignment = Alignment.center,
     super.key,
   });
 
@@ -54,6 +56,7 @@ class PLVideoPlayer extends StatefulWidget {
   final List<Widget>? customWidgets;
   final Function? showEposideCb;
   final Function? fullScreenCb;
+  final Alignment? alignment;
 
   @override
   State<PLVideoPlayer> createState() => _PLVideoPlayerState();
@@ -87,7 +90,7 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
   late bool enableBackgroundPlay;
   late double screenWidth;
   final FullScreenGestureMode fullScreenGestureMode =
-      GlobalData().fullScreenGestureMode;
+      GlobalDataCache().fullScreenGestureMode;
 
   // 用于记录上一次全屏切换手势触发时间，避免误触
   DateTime? lastFullScreenToggleTime;
@@ -132,7 +135,7 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
     screenWidth = Get.size.width;
     animationController = AnimationController(
       vsync: this,
-      duration: GlobalData().enablePlayerControlAnimation
+      duration: GlobalDataCache().enablePlayerControlAnimation
           ? const Duration(milliseconds: 150)
           : const Duration(milliseconds: 10),
     );
@@ -392,6 +395,7 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
             key: ValueKey(_.videoFit.value),
             controller: videoController,
             controls: NoVideoControls,
+            alignment: widget.alignment!,
             pauseUponEnteringBackgroundMode: !enableBackgroundPlay,
             resumeUponEnteringForegroundMode: true,
             subtitleViewConfiguration: const SubtitleViewConfiguration(
@@ -484,104 +488,27 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
 
         /// 音量🔊 控制条展示
         Obx(
-          () => Align(
-            child: AnimatedOpacity(
-              curve: Curves.easeInOut,
-              opacity: _volumeIndicator.value ? 1.0 : 0.0,
-              duration: const Duration(milliseconds: 150),
-              child: Container(
-                alignment: Alignment.center,
-                decoration: BoxDecoration(
-                  color: const Color(0x88000000),
-                  borderRadius: BorderRadius.circular(64.0),
-                ),
-                height: 34.0,
-                width: 70.0,
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: <Widget>[
-                    Container(
-                      height: 34.0,
-                      width: 28.0,
-                      alignment: Alignment.centerRight,
-                      child: Icon(
-                        _volumeValue.value == 0.0
-                            ? Icons.volume_off
-                            : _volumeValue.value < 0.5
-                                ? Icons.volume_down
-                                : Icons.volume_up,
-                        color: const Color(0xFFFFFFFF),
-                        size: 20.0,
-                      ),
-                    ),
-                    Expanded(
-                      child: Text(
-                        '${(_volumeValue.value * 100.0).round()}%',
-                        textAlign: TextAlign.center,
-                        style: const TextStyle(
-                          fontSize: 13.0,
-                          color: Color(0xFFFFFFFF),
-                        ),
-                      ),
-                    ),
-                    const SizedBox(width: 6.0),
-                  ],
-                ),
-              ),
-            ),
+          () => ControlBar(
+            visible: _volumeIndicator.value,
+            icon: _volumeValue.value < 1.0 / 3.0
+                ? Icons.volume_mute
+                : _volumeValue.value < 2.0 / 3.0
+                    ? Icons.volume_down
+                    : Icons.volume_up,
+            value: _volumeValue.value,
           ),
         ),
 
         /// 亮度🌞 控制条展示
         Obx(
-          () => Align(
-            child: AnimatedOpacity(
-              curve: Curves.easeInOut,
-              opacity: _brightnessIndicator.value ? 1.0 : 0.0,
-              duration: const Duration(milliseconds: 150),
-              child: Container(
-                alignment: Alignment.center,
-                decoration: BoxDecoration(
-                  color: const Color(0x88000000),
-                  borderRadius: BorderRadius.circular(64.0),
-                ),
-                height: 34.0,
-                width: 70.0,
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: <Widget>[
-                    Container(
-                      height: 30.0,
-                      width: 28.0,
-                      alignment: Alignment.centerRight,
-                      child: Icon(
-                        _brightnessValue.value < 1.0 / 3.0
-                            ? Icons.brightness_low
-                            : _brightnessValue.value < 2.0 / 3.0
-                                ? Icons.brightness_medium
-                                : Icons.brightness_high,
-                        color: const Color(0xFFFFFFFF),
-                        size: 18.0,
-                      ),
-                    ),
-                    const SizedBox(width: 2.0),
-                    Expanded(
-                      child: Text(
-                        '${(_brightnessValue.value * 100.0).round()}%',
-                        textAlign: TextAlign.center,
-                        style: const TextStyle(
-                          fontSize: 13.0,
-                          color: Color(0xFFFFFFFF),
-                        ),
-                      ),
-                    ),
-                    const SizedBox(width: 6.0),
-                  ],
-                ),
-              ),
-            ),
+          () => ControlBar(
+            visible: _brightnessIndicator.value,
+            icon: _brightnessValue.value < 1.0 / 3.0
+                ? Icons.brightness_low
+                : _brightnessValue.value < 2.0 / 3.0
+                    ? Icons.brightness_medium
+                    : Icons.brightness_high,
+            value: _brightnessValue.value,
           ),
         ),
 
diff --git a/lib/plugin/pl_player/widgets/control_bar.dart b/lib/plugin/pl_player/widgets/control_bar.dart
new file mode 100644
index 00000000..44e2abfa
--- /dev/null
+++ b/lib/plugin/pl_player/widgets/control_bar.dart
@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+class ControlBar extends StatelessWidget {
+  final bool visible;
+  final IconData icon;
+  final double value;
+
+  const ControlBar({
+    Key? key,
+    required this.visible,
+    required this.icon,
+    required this.value,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Color color = const Color(0xFFFFFFFF);
+    return Align(
+      child: AnimatedOpacity(
+        curve: Curves.easeInOut,
+        opacity: visible ? 1.0 : 0.0,
+        duration: const Duration(milliseconds: 150),
+        child: IntrinsicWidth(
+          child: Container(
+            padding: const EdgeInsets.fromLTRB(10, 2, 10, 2),
+            decoration: BoxDecoration(
+              color: const Color(0x88000000),
+              borderRadius: BorderRadius.circular(64.0),
+            ),
+            height: 34.0,
+            child: Row(
+              children: <Widget>[
+                Icon(icon, color: color, size: 18.0),
+                const SizedBox(width: 4.0),
+                Container(
+                  constraints: const BoxConstraints(minWidth: 30.0),
+                  child: Text(
+                    '${(value * 100.0).round()}%',
+                    textAlign: TextAlign.center,
+                    style: TextStyle(fontSize: 13.0, color: color),
+                  ),
+                )
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/router/app_pages.dart b/lib/router/app_pages.dart
index 7840c126..25f42d56 100644
--- a/lib/router/app_pages.dart
+++ b/lib/router/app_pages.dart
@@ -3,11 +3,15 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:hive/hive.dart';
+import 'package:pilipala/pages/fav_edit/index.dart';
 import 'package:pilipala/pages/follow_search/view.dart';
+import 'package:pilipala/pages/member_article/index.dart';
 import 'package:pilipala/pages/message/at/index.dart';
 import 'package:pilipala/pages/message/like/index.dart';
 import 'package:pilipala/pages/message/reply/index.dart';
 import 'package:pilipala/pages/message/system/index.dart';
+import 'package:pilipala/pages/opus/index.dart';
+import 'package:pilipala/pages/read/index.dart';
 import 'package:pilipala/pages/setting/pages/logs.dart';
 
 import '../pages/about/index.dart';
@@ -183,6 +187,15 @@ class Routes {
     // 系统通知
     CustomGetPage(
         name: '/messageSystem', page: () => const MessageSystemPage()),
+    // 收藏夹编辑
+    CustomGetPage(name: '/favEdit', page: () => const FavEditPage()),
+
+    // 专栏
+    CustomGetPage(name: '/opus', page: () => const OpusPage()),
+    CustomGetPage(name: '/read', page: () => const ReadPage()),
+    // 用户专栏
+    CustomGetPage(
+        name: '/memberArticle', page: () => const MemberArticlePage()),
   ];
 }
 
diff --git a/lib/utils/app_scheme.dart b/lib/utils/app_scheme.dart
index 17d20bcd..67b8a5d5 100644
--- a/lib/utils/app_scheme.dart
+++ b/lib/utils/app_scheme.dart
@@ -82,14 +82,11 @@ class PiliSchame {
         case 'opus':
           if (path.startsWith('/detail')) {
             var opusId = path.split('/').last;
-            Get.toNamed(
-              '/webview',
-              parameters: {
-                'url': 'https://www.bilibili.com/opus/$opusId',
-                'type': 'url',
-                'pageTitle': '',
-              },
-            );
+            Get.toNamed('/opus', arguments: {
+              'title': '',
+              'id': opusId,
+              'articleType': 'opus',
+            });
           }
           break;
         case 'search':
@@ -97,12 +94,14 @@ class PiliSchame {
           break;
         case 'article':
           final String id = path.split('/').last.split('?').first;
-          Get.toNamed('/htmlRender', parameters: {
-            'url': 'https://www.bilibili.com/read/cv$id',
-            'title': 'cv$id',
-            'id': 'cv$id',
-            'dynamicType': 'read'
-          });
+          Get.toNamed(
+            '/read',
+            parameters: {
+              'title': 'cv$id',
+              'id': id,
+              'dynamicType': 'read',
+            },
+          );
           break;
         case 'pgc':
           if (path.contains('ep')) {
@@ -243,12 +242,12 @@ class PiliSchame {
           break;
         case 'read':
           print('专栏');
-          String id = 'cv${Utils.matchNum(query!['id']!).first}';
-          Get.toNamed('/htmlRender', parameters: {
+          String id = Utils.matchNum(query!['id']!).first.toString();
+          Get.toNamed('/read', parameters: {
             'url': value.dataString!,
             'title': '',
             'id': id,
-            'dynamicType': 'read'
+            'articleType': 'read'
           });
           break;
         case 'space':
diff --git a/lib/utils/global_data.dart b/lib/utils/global_data.dart
deleted file mode 100644
index 97bff5a5..00000000
--- a/lib/utils/global_data.dart
+++ /dev/null
@@ -1,24 +0,0 @@
-import 'package:hive/hive.dart';
-import 'package:pilipala/utils/storage.dart';
-import '../models/common/index.dart';
-
-Box setting = GStrorage.setting;
-
-class GlobalData {
-  int imgQuality = 10;
-  FullScreenGestureMode fullScreenGestureMode =
-      FullScreenGestureMode.values.last;
-  bool enablePlayerControlAnimation = true;
-  final bool enableMYBar =
-      setting.get(SettingBoxKey.enableMYBar, defaultValue: true);
-  List<String> actionTypeSort = setting.get(SettingBoxKey.actionTypeSort,
-      defaultValue: ['like', 'coin', 'collect', 'watchLater', 'share']);
-  // 私有构造函数
-  GlobalData._();
-
-  // 单例实例
-  static final GlobalData _instance = GlobalData._();
-
-  // 获取全局实例
-  factory GlobalData() => _instance;
-}
diff --git a/lib/utils/global_data_cache.dart b/lib/utils/global_data_cache.dart
new file mode 100644
index 00000000..9d925a0f
--- /dev/null
+++ b/lib/utils/global_data_cache.dart
@@ -0,0 +1,106 @@
+import 'package:hive/hive.dart';
+import 'package:pilipala/models/user/info.dart';
+import 'package:pilipala/plugin/pl_player/models/play_repeat.dart';
+import 'package:pilipala/plugin/pl_player/models/play_speed.dart';
+import 'package:pilipala/utils/storage.dart';
+import '../models/common/index.dart';
+
+Box setting = GStrorage.setting;
+Box localCache = GStrorage.localCache;
+Box videoStorage = GStrorage.video;
+Box userInfoCache = GStrorage.userInfo;
+
+class GlobalDataCache {
+  late int imgQuality;
+  late FullScreenGestureMode fullScreenGestureMode;
+  late bool enablePlayerControlAnimation;
+  late List<String> actionTypeSort;
+
+  /// 播放器相关
+  // 弹幕开关
+  late bool isOpenDanmu;
+  // 弹幕屏蔽类型
+  late List<dynamic> blockTypes;
+  // 弹幕展示区域
+  late double showArea;
+  // 弹幕透明度
+  late double opacityVal;
+  // 弹幕字体大小
+  late double fontSizeVal;
+  // 弹幕显示时间
+  late double danmakuDurationVal;
+  // 弹幕描边宽度
+  late double strokeWidth;
+  // 播放器循环模式
+  late PlayRepeat playRepeat;
+  // 播放器默认播放速度
+  late double playbackSpeed;
+  // 播放器自动长按速度
+  late bool enableAutoLongPressSpeed;
+  // 播放器长按速度
+  late double longPressSpeed;
+  // 播放器速度列表
+  late List<double> speedsList;
+  // 用户信息
+  UserInfoData? userInfo;
+
+  // 私有构造函数
+  GlobalDataCache._();
+
+  // 单例实例
+  static final GlobalDataCache _instance = GlobalDataCache._();
+
+  // 获取全局实例
+  factory GlobalDataCache() => _instance;
+
+  // 异步初始化方法
+  Future<void> initialize() async {
+    imgQuality = await setting.get(SettingBoxKey.defaultPicQa,
+        defaultValue: 10); // 设置全局变量
+    fullScreenGestureMode = FullScreenGestureMode.values[setting.get(
+        SettingBoxKey.fullScreenGestureMode,
+        defaultValue: FullScreenGestureMode.values.last.index) as int];
+    enablePlayerControlAnimation = setting
+        .get(SettingBoxKey.enablePlayerControlAnimation, defaultValue: true);
+    actionTypeSort = await setting.get(SettingBoxKey.actionTypeSort,
+        defaultValue: ['like', 'coin', 'collect', 'watchLater', 'share']);
+
+    isOpenDanmu =
+        await setting.get(SettingBoxKey.enableShowDanmaku, defaultValue: false);
+    blockTypes =
+        await localCache.get(LocalCacheKey.danmakuBlockType, defaultValue: []);
+    showArea =
+        await localCache.get(LocalCacheKey.danmakuShowArea, defaultValue: 0.5);
+    opacityVal =
+        await localCache.get(LocalCacheKey.danmakuOpacity, defaultValue: 1.0);
+    fontSizeVal =
+        await localCache.get(LocalCacheKey.danmakuFontScale, defaultValue: 1.0);
+    danmakuDurationVal =
+        await localCache.get(LocalCacheKey.danmakuDuration, defaultValue: 4.0);
+    strokeWidth =
+        await localCache.get(LocalCacheKey.strokeWidth, defaultValue: 1.5);
+
+    var defaultPlayRepeat = await videoStorage.get(VideoBoxKey.playRepeat,
+        defaultValue: PlayRepeat.pause.value);
+    playRepeat = PlayRepeat.values
+        .toList()
+        .firstWhere((e) => e.value == defaultPlayRepeat);
+    playbackSpeed =
+        await videoStorage.get(VideoBoxKey.playSpeedDefault, defaultValue: 1.0);
+    enableAutoLongPressSpeed = await setting
+        .get(SettingBoxKey.enableAutoLongPressSpeed, defaultValue: false);
+    if (!enableAutoLongPressSpeed) {
+      longPressSpeed = await videoStorage.get(VideoBoxKey.longPressSpeedDefault,
+          defaultValue: 2.0);
+    } else {
+      longPressSpeed = 2.0;
+    }
+    speedsList = List<double>.from(await videoStorage
+        .get(VideoBoxKey.customSpeedsList, defaultValue: <double>[]));
+    final List<double> playSpeedSystem = await videoStorage
+        .get(VideoBoxKey.playSpeedSystem, defaultValue: playSpeed);
+    speedsList.addAll(playSpeedSystem);
+
+    userInfo = userInfoCache.get('userInfoCache');
+  }
+}
diff --git a/lib/utils/highlight.dart b/lib/utils/highlight.dart
new file mode 100644
index 00000000..c19b2f43
--- /dev/null
+++ b/lib/utils/highlight.dart
@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+import 'package:re_highlight/languages/all.dart';
+import 'package:re_highlight/re_highlight.dart';
+import 'package:re_highlight/styles/all.dart';
+
+TextSpan? highlightExistingText(String text, List<String> languages) {
+  final Highlight highlight = Highlight();
+  highlight.registerLanguages(builtinAllLanguages);
+  final HighlightResult result = highlight.highlightAuto(text, languages);
+  final TextSpanRenderer renderer =
+      TextSpanRenderer(const TextStyle(), builtinAllThemes['github']!);
+  result.render(renderer);
+  return renderer.span;
+}
diff --git a/lib/utils/storage.dart b/lib/utils/storage.dart
index a132c5da..d9b9e100 100644
--- a/lib/utils/storage.dart
+++ b/lib/utils/storage.dart
@@ -2,8 +2,6 @@ import 'dart:io';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:pilipala/models/user/info.dart';
-import '../models/common/gesture_mode.dart';
-import 'global_data.dart';
 
 class GStrorage {
   static late final Box<dynamic> userInfo;
@@ -42,13 +40,6 @@ class GStrorage {
     );
     // 视频设置
     video = await Hive.openBox('video');
-    GlobalData().imgQuality =
-        setting.get(SettingBoxKey.defaultPicQa, defaultValue: 10); // 设置全局变量
-    GlobalData().fullScreenGestureMode = FullScreenGestureMode.values[
-        setting.get(SettingBoxKey.fullScreenGestureMode,
-            defaultValue: FullScreenGestureMode.values.last.index) as int];
-    GlobalData().enablePlayerControlAnimation = setting
-        .get(SettingBoxKey.enablePlayerControlAnimation, defaultValue: true);
   }
 
   static void regAdapter() {
diff --git a/pubspec.lock b/pubspec.lock
index 6b3bc06f..b9d48c78 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -1234,6 +1234,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "4.1.0"
+  re_highlight:
+    dependency: "direct main"
+    description:
+      name: re_highlight
+      sha256: "6c4ac3f76f939fb7ca9df013df98526634e17d8f7460e028bd23a035870024f2"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "0.0.3"
   rxdart:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 65daca1e..617b0c7d 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -149,6 +149,8 @@ dependencies:
   bottom_sheet: ^4.0.4
   web_socket_channel: ^2.4.5
   brotli: ^0.6.0
+  # 文本语法高亮
+  re_highlight: ^0.0.3
 
 dev_dependencies:
   flutter_test: