refactor: 企业级目录重构与播放/关于页体验升级

- 按 app / shared / entities / features 分层，路由懒加载并抽出布局组件
- 请求层改为可插拔拦截器，统一错误类型、超时取消与端点拆分
- 抽取播放器、骨架屏、网格等复用组件，点赞收藏接入统一交互反馈
- 关于页重做为无边框极光风格，补充 iOS / Google Play 下载入口
- 修复播放页滚轮切集吞事件、页面误滚动、后台持续播放与声音记忆问题
- 语言按本地偏好与 IP 识别，国旗改为内联 SVG
- 清理未使用的旧站点文件，补充 ESLint 配置

src/features/shorts/components/ShortSlide.jsx

@@ -0,0 +1,62 @@
+// Author: fruit.com.cn
+import { Bookmark, MessageCircle, Share2, ThumbsUp } from 'lucide-react';
+import { useLocale } from '../../../app/providers/AppProviders';
+import { VideoPlayer } from '../../../shared/components/player/VideoPlayer';
+import { useEngagement } from '../../../shared/hooks/useEngagement';
+import { formatCount } from '../../../shared/lib/format';
+import { reportWatchProgress } from '../../../shared/lib/watchProgress';
+
+export function ShortSlide({ video, active, followed, onToggleFollow, onOpenComments, onShare }) {
+  const { locale } = useLocale();
+  const src = video.preview?.playUrl;
+  const likeTargetId = video.preview?.id || video.id;
+  const { liked, likeCount, saved, saveCount, toggleLike, toggleSave } = useEngagement({
+    likeTargetType: video.preview?.id ? 'EPISODE' : 'DRAMA',
+    likeTargetId,
+    dramaId: video.id,
+    initialLikeCount: video.likeCount,
+    initialSaveCount: video.favoriteCount,
+  });
+
+  return (
+    <article className="short-slide" data-id={video.id}>
+      <div className="short-slide-stage">
+        <div className="short-slide-info">
+          <div className="short-channel">
+            <span className="short-avatar">{video.channel?.[0] || 'Y'}</span>
+            <span className="short-channel-name">{video.channel}</span>
+            <button className={`short-follow ${followed ? 'followed' : ''}`} onClick={onToggleFollow} type="button">{followed ? locale.subscribed : locale.subscribe}</button>
+          </div>
+          <h1>{video.title}</h1>
+        </div>
+        <div className="short-column">
+          <div className="short-player-wrap">
+            <div className="short-slide-player">
+              {src
+                ? <VideoPlayer src={src} poster={video.image} autoPlay={active} onProgress={(position, duration, flush) => reportWatchProgress(video.preview?.id, position, duration, 'shorts', flush)} />
+                : <div className="short-slide-placeholder"><img src={video.image} alt={video.title} /><span>{video.title}</span></div>}
+            </div>
+          </div>
+        </div>
+        <div className="short-rail">
+          <button className={saved ? 'active' : ''} onClick={toggleSave} type="button" aria-label={locale.save}>
+            <span className="rail-icon"><Bookmark size={22} fill={saved ? 'currentColor' : 'none'} /></span>
+            <small>{formatCount(saveCount, locale.code)}</small>
+          </button>
+          <button className={liked ? 'active' : ''} onClick={toggleLike} type="button" aria-label={locale.like}>
+            <span className="rail-icon"><ThumbsUp size={22} fill={liked ? 'currentColor' : 'none'} /></span>
+            <small>{formatCount(likeCount, locale.code)}</small>
+          </button>
+          <button onClick={onOpenComments} type="button" aria-label={locale.comments}>
+            <span className="rail-icon"><MessageCircle size={22} /></span>
+            <small>{formatCount(video.commentCount, locale.code)}</small>
+          </button>
+          <button onClick={onShare} type="button" aria-label={locale.share}>
+            <span className="rail-icon"><Share2 size={22} /></span>
+            <small>{locale.share}</small>
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}