在多个页面中通过骨架屏优化加载状态。

在章节、礼物代付详情、阅读和搜索结果页面，用骨架屏替换传统加载指示器，以提升数据获取过程中的用户体验。
更新骨架屏样式，使加载状态更加美观。
实现章节和配置信息的缓存策略，以优化性能并减少冷启动问题。

miniprogram/pages/read/read.wxml

@@ -24,8 +24,26 @@
 
   <!-- 阅读内容 -->
   <view class="read-content">
-    <!-- 章节标题 -->
-    <view class="chapter-header">
+    <!-- 骨架屏：加载中时展示，模拟章节标题+正文布局 -->
+    <view class="skeleton-wrap" wx:if="{{accessState === 'unknown' && loading}}">
+      <view class="skeleton-header">
+        <view class="skeleton-meta"></view>
+        <view class="skeleton-title"></view>
+      </view>
+      <view class="skeleton-lines">
+        <view class="skeleton skeleton-1"></view>
+        <view class="skeleton skeleton-2"></view>
+        <view class="skeleton skeleton-3"></view>
+        <view class="skeleton skeleton-4"></view>
+        <view class="skeleton skeleton-5"></view>
+        <view class="skeleton skeleton-6"></view>
+        <view class="skeleton skeleton-7"></view>
+        <view class="skeleton skeleton-8"></view>
+      </view>
+    </view>
+
+    <!-- 章节标题（加载完成后） -->
+    <view class="chapter-header" wx:elif="{{!loading}}">
       <view class="chapter-meta">
         <text class="chapter-id">{{section.id}}</text>
         <text class="tag tag-free" wx:if="{{section.isFree}}">免费</text>
@@ -33,15 +51,6 @@
       <text class="chapter-title" user-select>{{section.title}}</text>
     </view>
 
-    <!-- 加载状态 -->
-    <view class="loading-state" wx:if="{{accessState === 'unknown' && loading}}">
-      <view class="skeleton skeleton-1"></view>
-      <view class="skeleton skeleton-2"></view>
-      <view class="skeleton skeleton-3"></view>
-      <view class="skeleton skeleton-4"></view>
-      <view class="skeleton skeleton-5"></view>
-    </view>
-
     <!-- 完整内容 - 免费或已购买（支持 @ mention / #linkTag / 图片） -->
     <view class="article" wx:if="{{accessState === 'free' || accessState === 'unlocked_purchased'}}">
       <view class="paragraph" wx:for="{{contentSegments}}" wx:key="index">