Sakurasan
fbda293072
前端（新增 ui/yohaku/，各视图按 ui_id=vivid 分支渲染；classic 与后台不受影响） - 令牌层：设计稿数值原样落地，28 个 --v-* 为站主接口（自定义 CSS 可覆盖， 放 @layer 让出优先级）；另加防线，中和 styles.css 裸选择器 （h1 衬线 / body 行高 / 后台 .stat/.toolbar/.chip 卡片）漏进余白元素 - 顶栏（滚动收缩态）/ 阅读进度（顶部 2px + READ n%）/ 页脚 - 首页：hero（统计条）/ 筛选（类型分段 + 标签 chips + 搜索）/ 长文卡片与短文纸条 / 分页 / 作品展示区（3 件 + 查看所有，参照 diygod.cc）； 面板栅格改 1.6fr 1fr 1fr 且高度自适应内容（标签云明显大一圈） - 文章页：三栏「纸」—— 左时间线（前后各两篇）/ 中纸张 / 右目录与阅读进度； 短文详情不显示标题（h1 视觉隐藏保留无障碍） - 全部规则收敛在 html[data-ui='vivid'] 前缀下；无 !important 后端 - GET /api/posts/:slug 增 neighbors（前后各两篇，详情页侧栏时间线用） - SPA 缓存头：index.html no-cache，assets/ 带 hash 长期 immutable （此前无缓存头，浏览器会一直拿旧构建） 其他 - 站主自定义 CSS 管线（customCss.js + ui/sections.js，按分区注入，仅 vivid） - 删除旧 vivid 覆盖层实现（VividNav/Hero/Footer/Timeline/Toc、ui/vivid.css） - 设计稿原型附于仓库根 index.html；作品表清掉外链 diygod.cc 的示例封面， 改用本地占位图（public/covers/）
105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<script setup>
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import LeftNav from '../components/LeftNav.vue'
|
|
import RightRail from '../components/RightRail.vue'
|
|
import ProjectCard from '../components/ProjectCard.vue'
|
|
import { publicApi } from '../api'
|
|
import YohakuProjects from '../ui/yohaku/YohakuProjects.vue'
|
|
import { applyDocTitle, site } from '../site'
|
|
|
|
const projects = ref([])
|
|
// vivid（余白）是另一套 DOM，数据来源不变，只在视图层分叉
|
|
const isVivid = computed(() => site.ui_id === 'vivid')
|
|
|
|
const loading = ref(true)
|
|
const error = ref('')
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const data = await publicApi.projects()
|
|
projects.value = data.projects || []
|
|
} catch (e) {
|
|
error.value = e.message || '加载失败'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
applyDocTitle('作品')
|
|
</script>
|
|
|
|
<template>
|
|
<YohakuProjects v-if="isVivid" :projects="projects" />
|
|
|
|
<div v-else class="shell">
|
|
<div class="layout">
|
|
<LeftNav />
|
|
|
|
<main class="main">
|
|
<header class="head">
|
|
<h1 class="page-title">作品</h1>
|
|
<p class="sub">做过的一些东西。</p>
|
|
</header>
|
|
|
|
<div v-if="loading" class="loading">载入中…</div>
|
|
<div v-else-if="error" class="empty">{{ error }}</div>
|
|
<div v-else-if="!projects.length" class="empty">还没有作品。</div>
|
|
|
|
<div v-else class="grid">
|
|
<ProjectCard v-for="p in projects" :key="p.id" :project="p" />
|
|
</div>
|
|
</main>
|
|
|
|
<RightRail />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.main {
|
|
min-width: 0;
|
|
border-left: 1px solid var(--line);
|
|
border-right: 1px solid var(--line);
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: var(--paper);
|
|
backdrop-filter: blur(6px);
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sub {
|
|
margin: 2px 0 0;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
padding: 22px 16px;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
.main {
|
|
border: 0;
|
|
}
|
|
}
|
|
</style>
|