feat(desktop): add semi-transparent overlay for exiting entry detail view

When viewing entry details in wide mode, a semi-transparent overlay is now displayed over the subscription list area. This overlay includes:
- Visual indication with semi-transparent background and blur effect
- Exit hint with arrow icon and text prompting users to click to return
- Click anywhere on the overlay to navigate back to the entry list
- Multi-language support (EN, ZH-CN, JA)

This improves UX by providing a clear and intuitive way to exit the detail view.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DIYgod 2025-08-20 22:51:44 +08:00
parent bdc17c0f12
commit a3a6a2aedb
No known key found for this signature in database
4 changed files with 29 additions and 1 deletions

View File

@ -22,6 +22,8 @@ import {
useTimelineColumnTempShow,
} from "~/atoms/sidebar"
import { FloatingLayerScope } from "~/constants"
import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
import { useRouteParams } from "~/hooks/biz/useRouteParams"
import { useBatchUpdateSubscription } from "~/hooks/biz/useSubscriptionActions"
import { useI18n } from "~/hooks/common"
import { NetworkStatusIndicator } from "~/modules/app/NetworkStatusIndicator"
@ -103,6 +105,9 @@ const FeedResponsiveResizerContainer = ({
const feedColumnShow = useTimelineColumnShow()
const feedColumnTempShow = useTimelineColumnTempShow()
const { entryId, isPendingEntry } = useRouteParams()
const navigate = useNavigateEntry()
const t = useI18n()
useEffect(() => {
if (feedColumnShow) {
@ -165,7 +170,6 @@ const FeedResponsiveResizerContainer = ({
timer = clearTimeout(timer)
}
}, [feedColumnShow])
const t = useI18n()
return (
<>
@ -185,6 +189,24 @@ const FeedResponsiveResizerContainer = ({
}}
>
<Slot className={!feedColumnShow ? "!bg-sidebar" : ""}>{children}</Slot>
{/* Semi-transparent overlay with exit hint when in wide mode with entry selected */}
{entryId && !isPendingEntry && (
<div
className="absolute inset-0 z-20 cursor-pointer bg-white/50 backdrop-blur-[2px] transition-colors duration-200 hover:bg-white/70"
onClick={() => navigate({ entryId: null })}
>
<div className="flex items-center justify-center px-4 pt-16">
<div className="flex flex-col items-center gap-2 rounded-lg px-4 py-3">
<div className="text-text flex items-center gap-2">
<i className="i-mgc-arrow-left-cute-re text-lg" />
<span className="text-sm font-medium">{t("entry.exit_detail")}</span>
</div>
<span className="text-text-secondary text-xs">{t("entry.click_to_return")}</span>
</div>
</div>
</div>
)}
</div>
<div

View File

@ -111,6 +111,8 @@
"discover.target.feeds": "Feeds",
"discover.target.label": "Search for",
"discover.target.lists": "Lists",
"entry.click_to_return": "Click to return to entry list",
"entry.exit_detail": "Exit Detail View",
"entry_actions.copied_notify": "{{which}} copied to clipboard.",
"entry_actions.copy_link": "Copy Link",
"entry_actions.copy_title": "Copy Title",

View File

@ -111,6 +111,8 @@
"discover.target.feeds": "フィード",
"discover.target.label": "検索対象",
"discover.target.lists": "リスト",
"entry.click_to_return": "クリックしてエントリリストに戻る",
"entry.exit_detail": "詳細を終了",
"entry_actions.copied_notify": "{{which}} をクリップボードにコピーしました。",
"entry_actions.copy_link": "リンクをコピー",
"entry_actions.copy_title": "タイトルをコピー",

View File

@ -111,6 +111,8 @@
"discover.target.feeds": "订阅源",
"discover.target.label": "搜索",
"discover.target.lists": "列表",
"entry.click_to_return": "点击返回条目列表",
"entry.exit_detail": "退出详情",
"entry_actions.copied_notify": "{{which}}已复制到剪贴板。",
"entry_actions.copy_link": "复制链接",
"entry_actions.copy_title": "复制标题",