404 lines
12 KiB
Vue
404 lines
12 KiB
Vue
|
<!-- layouts/article.vue -->
|
|||
|
|
<template>
|
|||
|
|
<div ref="rootRef" class="article-root">
|
|||
|
|
<main ref="gridRef" class="a-grid" :style="{ '--rightw': rightwStyle }">
|
|||
|
|
<!-- 左列：自带滚动条（包含：固定导航 + 文章内容?-->
|
|||
|
|
<section class="a-left">
|
|||
|
|
<!-- 固定（sticky）白色毛玻璃导航：跟着左列滚动 -->
|
|||
|
|
<header class="glass-topbar">
|
|||
|
|
<div class="shell">
|
|||
|
|
<div class="glass-bar">
|
|||
|
|
<NuxtLink to="/" class="brand" aria-label="Aivise">
|
|||
|
|
<span class="dot" />
|
|||
|
|
<span class="brand-text">Aivise</span>
|
|||
|
|
</NuxtLink>
|
|||
|
|
|
|||
|
|
<nav class="menu" aria-label="主菜单">
|
|||
|
|
<NuxtLink
|
|||
|
|
v-for="m in menus"
|
|||
|
|
:key="m.to"
|
|||
|
|
:to="m.to"
|
|||
|
|
class="link"
|
|||
|
|
:class="{ active: isActive(m.to) }"
|
|||
|
|
>{{ m.label }}</NuxtLink>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<div class="actions">
|
|||
|
|
<a class="pill" href="#" @click.prevent>领取福利</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- 文章内容（随左列滚动?-->
|
|||
|
|
<div class="a-article">
|
|||
|
|
<slot />
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 右列：内嵌评论（使用项目里的 RightDrawer.vue?-->
|
|||
|
|
<aside ref="asideRef" :class="['a-right', { collapsed: isCollapsedRef }]" >
|
|||
|
|
<template v-if="drawerReady">
|
|||
|
|
<RightDrawer
|
|||
|
|
class="rd-embed"
|
|||
|
|
:teleport="false"
|
|||
|
|
:append-to-body="false"
|
|||
|
|
:to="null"
|
|||
|
|
:mask="false"
|
|||
|
|
:fixed="false"
|
|||
|
|
:open="true"
|
|||
|
|
:visible="true"
|
|||
|
|
:model-value="true"
|
|||
|
|
width="100%"
|
|||
|
|
height="100%"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<div class="rd-placeholder" aria-hidden="true" />
|
|||
|
|
</template>
|
|||
|
|
</aside>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import RightDrawer from '../components/RightDrawer.vue'
|
|||
|
|
import { useRightDrawer } from '@/composables/useRightDrawer'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const drawerState = useRightDrawer()
|
|||
|
|
|
|||
|
|
const menus = [
|
|||
|
|
{ label: '首页', to: '/' },
|
|||
|
|
{ label: '资讯广场', to: '/market' },
|
|||
|
|
{ label: '社区', to: '/community' },
|
|||
|
|
{ label: '使用教程', to: '/docs' },
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
const isActive = (to) => (to === '/' ? route.path === '/' : route.path.startsWith(to))
|
|||
|
|
|
|||
|
|
/* ====== 同步右栏真实宽度?CSS 变量 --rightw（保持你的自适应列宽?====== */
|
|||
|
|
const rootRef = ref(null)
|
|||
|
|
const gridRef = ref(null)
|
|||
|
|
const asideRef = ref(null)
|
|||
|
|
let ro
|
|||
|
|
const drawerReady = ref(false)
|
|||
|
|
const lastExpandedWidth = ref(420)
|
|||
|
|
const isCollapsedRef = drawerState.isCollapsed || ref(false)
|
|||
|
|
const COLLAPSED_W = 60
|
|||
|
|
const rightwStyle = computed(() => {
|
|||
|
|
if (isCollapsedRef.value) return `${COLLAPSED_W}px`
|
|||
|
|
const w = Math.max(120, Math.round(lastExpandedWidth.value || 420))
|
|||
|
|
return `${w}px`
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function setRightWidth(px) {
|
|||
|
|
const w = Number.isFinite(px) && px > 80 ? Math.round(px) : lastExpandedWidth.value
|
|||
|
|
if (w) lastExpandedWidth.value = w
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ====== ?出场动画 ====== */
|
|||
|
|
const ENTER_MS = 160
|
|||
|
|
const LEAVE_MS = 260 // 整页缩写动画时间
|
|||
|
|
|
|||
|
|
let removeGuard
|
|||
|
|
|
|||
|
|
function playEnterAnimation () {
|
|||
|
|
// 维持右栏的轻弹入（可要可不要，保持你现状?
|
|||
|
|
const aside = asideRef.value
|
|||
|
|
if (!aside) return
|
|||
|
|
aside.classList.add('pop-seed')
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
aside.classList.add('pop-in')
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aside.classList.remove('pop-seed')
|
|||
|
|
aside.classList.remove('pop-in')
|
|||
|
|
}, ENTER_MS + 20)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function playPageShrinkLeave () {
|
|||
|
|
// 整页缩写 ?消失
|
|||
|
|
return new Promise(resolve => {
|
|||
|
|
const root = rootRef.value
|
|||
|
|
const grid = gridRef.value
|
|||
|
|
if (!root) return resolve()
|
|||
|
|
|
|||
|
|
// 防止过程中布局抖动：锁一下右列当前宽?
|
|||
|
|
if (grid) {
|
|||
|
|
const cur = getComputedStyle(grid).getPropertyValue('--rightw')
|
|||
|
|
if (cur) grid.style.setProperty('--rightw', cur.trim())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
root.classList.add('page-leave')
|
|||
|
|
setTimeout(() => {
|
|||
|
|
root.classList.remove('page-leave')
|
|||
|
|
resolve()
|
|||
|
|
}, LEAVE_MS)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
drawerReady.value = true
|
|||
|
|
// 防止遗留的离场状态导致页面不可见
|
|||
|
|
if (rootRef.value?.classList.contains('page-leave')) {
|
|||
|
|
rootRef.value.classList.remove('page-leave')
|
|||
|
|
}
|
|||
|
|
// 初始宽度兜底
|
|||
|
|
const existed = parseFloat(getComputedStyle(gridRef.value).getPropertyValue('--rightw'))
|
|||
|
|
const init = Number.isFinite(existed) && existed > 80 ? existed : 420
|
|||
|
|
lastExpandedWidth.value = init
|
|||
|
|
|
|||
|
|
// 观察右栏内容宽度变化（折?展开?
|
|||
|
|
const target = asideRef.value?.firstElementChild || asideRef.value
|
|||
|
|
if (target && 'ResizeObserver' in window) {
|
|||
|
|
ro = new ResizeObserver(entries => {
|
|||
|
|
for (const e of entries) {
|
|||
|
|
const w = e.contentRect?.width ?? target.offsetWidth
|
|||
|
|
// 离开动画期间不再同步，避免冲突
|
|||
|
|
if (rootRef.value?.classList.contains('page-leave')) continue
|
|||
|
|
if (!isCollapsedRef.value && w > 80) {
|
|||
|
|
lastExpandedWidth.value = w
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
ro.observe(target)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await nextTick()
|
|||
|
|
playEnterAnimation()
|
|||
|
|
|
|||
|
|
// 禁用路由守卫中的离场动画，使用共享元素转场代替
|
|||
|
|
// removeGuard = router.beforeEach(async (to, from) => {
|
|||
|
|
// const toArticle = String(to?.path || '').startsWith('/articles/')
|
|||
|
|
// if (from.fullPath === route.fullPath && !toArticle) {
|
|||
|
|
// await playPageShrinkLeave()
|
|||
|
|
// if (removeGuard) { removeGuard(); removeGuard = undefined }
|
|||
|
|
// }
|
|||
|
|
// return true
|
|||
|
|
// })
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
if (ro) ro.disconnect()
|
|||
|
|
if (removeGuard) { removeGuard(); removeGuard = undefined }
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 抽屉收起/展开时动态调整右栏宽度：通过 rightwStyle 绑定
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* ===== 页面级：整页不滚，把滚动交给左列 ===== */
|
|||
|
|
.article-root{
|
|||
|
|
background: var(--soft-page-bg);
|
|||
|
|
height: 100vh;
|
|||
|
|
/* 将滚动限制在左侧文章区，右侧抽屉保持固定 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
/* 为缩写动画准?*/
|
|||
|
|
will-change: transform, opacity, border-radius, box-shadow;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 右侧留“约 5%”呼吸间距；右列宽度?--rightw 决定（默?clamp?*/
|
|||
|
|
.a-grid{
|
|||
|
|
--rightw: clamp(380px, 35vw, 480px);
|
|||
|
|
height: 100%;
|
|||
|
|
width: 103%;
|
|||
|
|
margin: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0px clamp(24px, 5vw, 50px) 14px 8px; /* ?| ?| ?| ?*/
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: minmax(0, 1fr) var(--rightw);
|
|||
|
|
gap: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 左列（滚动容器） ===== */
|
|||
|
|
.a-left{
|
|||
|
|
min-width: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
overscroll-behavior: contain;
|
|||
|
|
scroll-behavior: smooth;
|
|||
|
|
scroll-padding-top: 64px;
|
|||
|
|
padding-right: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部白色毛玻璃胶囊条 */
|
|||
|
|
.glass-topbar{
|
|||
|
|
position: sticky; top: 0; z-index: 30;
|
|||
|
|
padding-top: 6px; margin-bottom: 12px;
|
|||
|
|
background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0));
|
|||
|
|
}
|
|||
|
|
.shell{ max-width: 100%; margin: 0; padding: 0; }
|
|||
|
|
.glass-bar{
|
|||
|
|
height: 56px;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: auto 1fr auto;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.92), rgba(255,255,255,.72) 70%),
|
|||
|
|
rgba(255,255,255,.75);
|
|||
|
|
border: 1px solid rgba(17,24,39,.08);
|
|||
|
|
backdrop-filter: blur(12px);
|
|||
|
|
-webkit-backdrop-filter: blur(12px);
|
|||
|
|
box-shadow: 0 6px 24px rgba(17,24,39,.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 品牌 */
|
|||
|
|
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
|
|||
|
|
.dot{ width:30px; height:30px; border-radius:12px; background: linear-gradient(135deg,#6da2ff 0%, #7733ff 100%); }
|
|||
|
|
.brand-text{ color:#111827; font-weight:800; letter-spacing:.4px; font-size:18px; }
|
|||
|
|
|
|||
|
|
/* 菜单 */
|
|||
|
|
.menu{ min-width: 0; display:flex; gap: 26px; justify-content:center; align-items:center; }
|
|||
|
|
.link{
|
|||
|
|
position: relative; color: rgba(17,24,39,.82);
|
|||
|
|
text-decoration: none; font-weight: 600; letter-spacing:.2px;
|
|||
|
|
padding: 8px 2px; transition: color .15s ease; white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.link:hover{ color:#111827; }
|
|||
|
|
.link.active{ color:#0f172a; }
|
|||
|
|
.link.active::after{
|
|||
|
|
content:""; position:absolute; left: 6px; right: 6px; bottom: 2px; height: 6px; border-radius: 6px;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(16px 8px at 20% 50%, rgba(99,102,241,.35), transparent 70%),
|
|||
|
|
radial-gradient(16px 8px at 80% 50%, rgba(99,102,241,.35), transparent 70%),
|
|||
|
|
linear-gradient(90deg, rgba(99,102,241,.45), rgba(99,102,241,.15));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 右侧操作按钮（导航右侧） */
|
|||
|
|
.actions{ display:flex; gap: 12px; }
|
|||
|
|
.pill{
|
|||
|
|
display:inline-flex; align-items:center; justify-content:center;
|
|||
|
|
height: 40px; padding: 0 18px;
|
|||
|
|
text-decoration:none; color:#0f172a; font-weight:700;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
border: 1px solid rgba(17,24,39,.12);
|
|||
|
|
background: rgba(255,255,255,.7);
|
|||
|
|
backdrop-filter: blur(8px);
|
|||
|
|
transition: background .15s ease, border-color .15s ease, transform .12s ease;
|
|||
|
|
}
|
|||
|
|
.pill:hover{
|
|||
|
|
background: rgba(255,255,255,.95);
|
|||
|
|
border-color: rgba(17,24,39,.22);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
.pill:active{ transform: translateY(0); }
|
|||
|
|
|
|||
|
|
/* ===== 右列：内嵌评论容?===== */
|
|||
|
|
.a-right{
|
|||
|
|
min-width: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
align-self: start;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-left: 1px solid #eef0f3;
|
|||
|
|
background: var(--soft-page-bg);
|
|||
|
|
display:flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ?RightDrawer 在右栏中 100% 填充 */
|
|||
|
|
.rd-embed{
|
|||
|
|
height: 100%;
|
|||
|
|
display:flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.rd-placeholder{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 文章与导航间?*/
|
|||
|
|
.a-article{ padding-top: 2px; }
|
|||
|
|
|
|||
|
|
/* ===== 自定义滚动条（左列） ===== */
|
|||
|
|
:root{
|
|||
|
|
--sb-track: transparent;
|
|||
|
|
--sb-thumb: #d1d5db;
|
|||
|
|
--sb-thumb-hover: #9ca3af;
|
|||
|
|
--sb-corner: transparent;
|
|||
|
|
}
|
|||
|
|
.a-left{
|
|||
|
|
scrollbar-width: thin;
|
|||
|
|
scrollbar-color: var(--sb-thumb) var(--sb-track);
|
|||
|
|
}
|
|||
|
|
.a-left::-webkit-scrollbar{ width:10px; height:10px; }
|
|||
|
|
.a-left::-webkit-scrollbar-track{ background: var(--sb-track); }
|
|||
|
|
.a-left::-webkit-scrollbar-thumb{
|
|||
|
|
background-color: var(--sb-thumb);
|
|||
|
|
border-radius: 999px;
|
|||
|
|
border: 2px solid var(--sb-track);
|
|||
|
|
}
|
|||
|
|
.a-left:hover::-webkit-scrollbar-thumb{ background-color: var(--sb-thumb-hover); }
|
|||
|
|
.a-left::-webkit-scrollbar-corner{ background: var(--sb-corner); }
|
|||
|
|
|
|||
|
|
/* 小屏：隐藏右列，仅左列（可滚?*/
|
|||
|
|
@media (max-width: 960px){
|
|||
|
|
.a-grid{
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
padding: 8px;
|
|||
|
|
}
|
|||
|
|
.a-right{ display: none; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ====== 右栏轻弹入（保留原来的灵动） ====== */
|
|||
|
|
.a-right.pop-seed .rd-embed{
|
|||
|
|
transform: translateX(14px) scale(0.985);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.a-right.pop-in .rd-embed{
|
|||
|
|
transition: transform .16s cubic-bezier(.2,.8,.2,1),
|
|||
|
|
opacity .16s cubic-bezier(.2,.8,.2,1);
|
|||
|
|
transform: translateX(0) scale(1);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ====== 整页“缩写消失”离场动?====== */
|
|||
|
|
.article-root.page-leave{
|
|||
|
|
/* 向右上角缩写：基点靠近右上，略微位移更“像回收?*/
|
|||
|
|
transform-origin: 96% 6%;
|
|||
|
|
animation: pageZoomOut .26s cubic-bezier(.22,1,.36,1) forwards;
|
|||
|
|
/* 可选淡出背景的投影?*/
|
|||
|
|
box-shadow: 0 20px 60px rgba(17,24,39,.10);
|
|||
|
|
border-radius: 0; /* ?0 过渡?16px */
|
|||
|
|
}
|
|||
|
|
@keyframes pageZoomOut{
|
|||
|
|
0%{
|
|||
|
|
transform: translate(0,0) scale(1);
|
|||
|
|
opacity: 1;
|
|||
|
|
border-radius: 0px;
|
|||
|
|
}
|
|||
|
|
100%{
|
|||
|
|
transform: translate(14px, -10px) scale(.86);
|
|||
|
|
opacity: 0;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- 兜底样式（非 scoped）：确保 RightDrawer 内嵌 -->
|
|||
|
|
<style>
|
|||
|
|
.right-drawer, .rd-root, .drawer-root,
|
|||
|
|
.right-drawer__panel, .rd-panel, .drawer-panel{
|
|||
|
|
position: static !important;
|
|||
|
|
inset: auto !important;
|
|||
|
|
width: 100% !important;
|
|||
|
|
height: 100% !important;
|
|||
|
|
max-width: 100% !important;
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
border: none !important;
|
|||
|
|
}
|
|||
|
|
.right-drawer__mask, .rd-mask, .drawer-mask,
|
|||
|
|
.right-drawer--fixed, .rd-fixed, .drawer-fixed{
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
.right-drawer, .rd-root, .drawer-root{ z-index: 1 !important; }
|
|||
|
|
</style>
|