Skip to content

Commit c2d4dcc

Browse files
yyyCodeyyyCode
authored
Merge pull request #39 from yyyCode/feat/home-forum-entry
feat(frontend): 首页 Bug 案例前新增论坛入口屏（极光毛玻璃 + 实时话题）
2 parents 0061851 + 2a1237c commit c2d4dcc

2 files changed

Lines changed: 290 additions & 2 deletions

File tree

‎vue/src/assets/blog.css‎

Lines changed: 243 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -907,7 +907,249 @@ html.homepage-scroll-snap {
907907
}
908908
}
909909

910-
/* ===== 第 5 屏：Bug 案例入口（整屏，展示最新一篇 Bug 复盘） ===== */
910+
/* ===== 第 6 屏：论坛入口（极光渐变 + 毛玻璃，苹果画风；区别于终端/榜单/bento 三种旧入口） ===== */
911+
.home-screen-forum {
912+
--forum-blue: #3370ff;
913+
--forum-sky: #38bdf8;
914+
background: var(--bg);
915+
display: flex;
916+
align-items: center;
917+
justify-content: center;
918+
padding: 48px 24px;
919+
overflow: hidden;
920+
}
921+
[data-theme='dark'] .home-screen-forum {
922+
--forum-blue: #5b8cff;
923+
--forum-sky: #4fc3f7;
924+
}
925+
926+
/* 漂浮的极光光斑（毛玻璃后景，供卡片取样，缓慢漂移制造"光斑流动"） */
927+
.home-forum-orb {
928+
position: absolute;
929+
z-index: 0;
930+
border-radius: 50%;
931+
pointer-events: none;
932+
will-change: transform;
933+
}
934+
.home-forum-orb--a {
935+
width: 600px;
936+
height: 600px;
937+
left: -160px;
938+
bottom: -200px;
939+
background: radial-gradient(circle at 30% 30%, rgba(51, 112, 255, 0.5), rgba(51, 112, 255, 0) 66%);
940+
animation: forum-drift-a 26s ease-in-out infinite alternate;
941+
}
942+
.home-forum-orb--b {
943+
width: 560px;
944+
height: 560px;
945+
right: -160px;
946+
top: -200px;
947+
background: radial-gradient(circle at 60% 40%, rgba(56, 189, 248, 0.42), rgba(56, 189, 248, 0) 66%);
948+
animation: forum-drift-b 32s ease-in-out infinite alternate;
949+
}
950+
[data-theme='dark'] .home-forum-orb--a {
951+
background: radial-gradient(circle at 30% 30%, rgba(91, 140, 255, 0.42), rgba(91, 140, 255, 0) 66%);
952+
}
953+
[data-theme='dark'] .home-forum-orb--b {
954+
background: radial-gradient(circle at 60% 40%, rgba(79, 195, 247, 0.36), rgba(79, 195, 247, 0) 66%);
955+
}
956+
957+
@keyframes forum-drift-a {
958+
from { transform: translate3d(0, 0, 0) scale(1); }
959+
to { transform: translate3d(46px, -30px, 0) scale(1.08); }
960+
}
961+
@keyframes forum-drift-b {
962+
from { transform: translate3d(0, 0, 0) scale(1); }
963+
to { transform: translate3d(-40px, 30px, 0) scale(1.1); }
964+
}
965+
966+
/* 毛玻璃卡片：半透明 + backdrop-blur，颜色与质感都区别于项目/公司/终端三种卡片 */
967+
.home-forum-card {
968+
position: relative;
969+
z-index: 1;
970+
width: 100%;
971+
max-width: 720px;
972+
box-sizing: border-box;
973+
padding: clamp(34px, 5vw, 56px) clamp(26px, 5vw, 58px);
974+
border-radius: 30px;
975+
text-align: center;
976+
color: var(--text);
977+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34));
978+
border: 1px solid rgba(255, 255, 255, 0.85);
979+
box-shadow: 0 24px 64px rgba(64, 52, 138, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
980+
-webkit-backdrop-filter: blur(24px) saturate(1.5);
981+
backdrop-filter: blur(24px) saturate(1.5);
982+
}
983+
[data-theme='dark'] .home-forum-card {
984+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
985+
border-color: rgba(255, 255, 255, 0.16);
986+
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
987+
}
988+
/* 浏览器不支持 backdrop-filter 时退回高不透明实底，保证文字可读 */
989+
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
990+
.home-forum-card {
991+
background: rgba(255, 255, 255, 0.94);
992+
}
993+
[data-theme='dark'] .home-forum-card {
994+
background: rgba(24, 26, 34, 0.94);
995+
}
996+
}
997+
998+
.home-forum-kicker {
999+
margin: 0;
1000+
font-size: 12px;
1001+
font-weight: 700;
1002+
letter-spacing: 0.24em;
1003+
text-transform: uppercase;
1004+
color: var(--forum-blue);
1005+
}
1006+
1007+
.home-forum-title {
1008+
margin: 16px 0 0;
1009+
font-size: clamp(36px, 6vw, 62px);
1010+
font-weight: 800;
1011+
line-height: 1.16;
1012+
letter-spacing: 0.02em;
1013+
color: var(--text);
1014+
}
1015+
/* 后半句做蓝→青渐变字，作为整屏视觉亮点 */
1016+
.home-forum-grad {
1017+
background: linear-gradient(92deg, var(--forum-blue), var(--forum-sky));
1018+
-webkit-background-clip: text;
1019+
background-clip: text;
1020+
-webkit-text-fill-color: transparent;
1021+
color: transparent;
1022+
}
1023+
1024+
.home-forum-sub {
1025+
margin: 16px auto 0;
1026+
max-width: 470px;
1027+
font-size: 15px;
1028+
line-height: 1.8;
1029+
color: var(--muted);
1030+
}
1031+
1032+
/* "正在聊"：最新话题实时预览（拉取失败/为空时整块隐藏） */
1033+
.home-forum-topics {
1034+
margin: 24px auto 0;
1035+
max-width: 470px;
1036+
text-align: left;
1037+
}
1038+
.home-forum-topics-cap {
1039+
display: flex;
1040+
align-items: center;
1041+
gap: 7px;
1042+
margin: 0 2px 8px;
1043+
font-size: 12px;
1044+
font-weight: 600;
1045+
letter-spacing: 0.08em;
1046+
color: var(--muted);
1047+
}
1048+
.home-forum-live {
1049+
width: 8px;
1050+
height: 8px;
1051+
border-radius: 50%;
1052+
background: #34c759;
1053+
animation: forum-live 1.6s ease-in-out infinite;
1054+
}
1055+
@keyframes forum-live {
1056+
50% { opacity: 0.25; transform: scale(0.8); }
1057+
}
1058+
.home-forum-topic {
1059+
display: flex;
1060+
align-items: baseline;
1061+
justify-content: space-between;
1062+
gap: 14px;
1063+
width: 100%;
1064+
box-sizing: border-box;
1065+
margin: 0;
1066+
padding: 11px 12px;
1067+
font: inherit;
1068+
text-align: left;
1069+
color: var(--text);
1070+
background: transparent;
1071+
border: none;
1072+
border-bottom: 1px solid rgba(120, 116, 158, 0.16);
1073+
border-radius: 12px;
1074+
cursor: pointer;
1075+
transition: background 0.16s ease;
1076+
}
1077+
[data-theme='dark'] .home-forum-topic {
1078+
border-bottom-color: rgba(255, 255, 255, 0.10);
1079+
}
1080+
.home-forum-topic:last-of-type {
1081+
border-bottom: none;
1082+
}
1083+
.home-forum-topic:hover {
1084+
background: rgba(51, 112, 255, 0.10);
1085+
}
1086+
.home-forum-topic-title {
1087+
flex: 1;
1088+
min-width: 0;
1089+
font-size: 15px;
1090+
font-weight: 600;
1091+
overflow: hidden;
1092+
text-overflow: ellipsis;
1093+
white-space: nowrap;
1094+
}
1095+
.home-forum-topic-meta {
1096+
flex: none;
1097+
font-size: 12px;
1098+
color: var(--muted);
1099+
}
1100+
1101+
/* CTA 胶囊：蓝→青渐变（同全站主色系，玻璃质感与其它入口区分） */
1102+
.home-forum-cta {
1103+
display: inline-flex;
1104+
align-items: center;
1105+
margin-top: 26px;
1106+
padding: 12px 28px;
1107+
border-radius: 999px;
1108+
font-size: 15px;
1109+
font-weight: 700;
1110+
color: #fff;
1111+
background: linear-gradient(135deg, var(--forum-blue), var(--forum-sky));
1112+
box-shadow: 0 10px 26px rgba(51, 112, 255, 0.32);
1113+
text-decoration: none;
1114+
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
1115+
}
1116+
.home-forum-cta::after {
1117+
content: '→';
1118+
margin-left: 6px;
1119+
transition: transform 0.18s ease;
1120+
}
1121+
.home-forum-cta:hover {
1122+
transform: translateY(-2px);
1123+
box-shadow: 0 14px 30px rgba(51, 112, 255, 0.42);
1124+
opacity: 0.96;
1125+
}
1126+
.home-forum-cta:hover::after {
1127+
transform: translateX(3px);
1128+
}
1129+
1130+
@media (max-width: 680px) {
1131+
.home-screen-forum {
1132+
padding: 40px 18px;
1133+
}
1134+
.home-forum-orb--a {
1135+
width: 360px;
1136+
height: 360px;
1137+
left: -160px;
1138+
bottom: -140px;
1139+
}
1140+
.home-forum-orb--b {
1141+
width: 340px;
1142+
height: 340px;
1143+
right: -160px;
1144+
top: -140px;
1145+
}
1146+
.home-forum-card {
1147+
padding: 30px 22px;
1148+
border-radius: 24px;
1149+
}
1150+
}
1151+
1152+
/* ===== 第 7 屏：Bug 案例入口（整屏，展示最新一篇 Bug 复盘） ===== */
9111153
.home-screen-bugs {
9121154
background: var(--bg);
9131155
display: flex;

‎vue/src/views/HomeView.vue‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,35 @@
181181
</div>
182182
</section>
183183

184-
<!-- 第 6 屏：Bug 案例（明确入口标题 + 整块大终端日志） -->
184+
<!-- 第 6 屏：论坛入口（极光渐变 + 毛玻璃，区别于终端/榜单/bento 三种旧入口） -->
185+
<section class="home-screen home-screen-forum">
186+
<div class="home-forum-orb home-forum-orb--a" aria-hidden="true"></div>
187+
<div class="home-forum-orb home-forum-orb--b" aria-hidden="true"></div>
188+
189+
<div class="home-forum-card">
190+
<p class="home-forum-kicker">Open Forum · 自由交流</p>
191+
<h2 class="home-forum-title">有想法，<br /><span class="home-forum-grad">说出来。</span></h2>
192+
<p class="home-forum-sub">这里欢迎每一种声音 —— 提问、分享、吐槽，都有人回应。</p>
193+
194+
<div v-if="latestTopics.length" class="home-forum-topics">
195+
<p class="home-forum-topics-cap"><span class="home-forum-live" aria-hidden="true"></span>正在聊</p>
196+
<button
197+
v-for="t in latestTopics"
198+
:key="t.id"
199+
type="button"
200+
class="home-forum-topic"
201+
@click="goTopic(t.id)"
202+
>
203+
<span class="home-forum-topic-title">{{ t.title }}</span>
204+
<span class="home-forum-topic-meta">{{ t.commentCount || 0 }} 条回复</span>
205+
</button>
206+
</div>
207+
208+
<router-link to="/forum" class="home-forum-cta">去论坛聊聊</router-link>
209+
</div>
210+
</section>
211+
212+
<!-- 第 7 屏：Bug 案例（明确入口标题 + 整块大终端日志） -->
185213
<section class="home-screen home-screen-bugs">
186214
<div class="home-bugs">
187215
<div class="home-bugs-head">
@@ -233,6 +261,7 @@ import { useRouter } from 'vue-router'
233261
import { fetchArticles, fetchArticleDetail, fetchArticlesByType, coverUrl } from '../api/article'
234262
import { fetchProjects } from '../api/project'
235263
import { fetchSmallCompanies, formatScale, logoUrl } from '../api/smallCompany'
264+
import { fetchForumTopics } from '../api/forum'
236265
237266
const router = useRouter()
238267
const siteConfig = inject('siteConfig')
@@ -335,6 +364,22 @@ async function loadLatestBug() {
335364
}
336365
}
337366
367+
// ---- 第 6 屏：论坛入口（实时取最新 3 条讨论做预览，为空/失败时自动隐藏该块） ----
368+
const latestTopics = ref([])
369+
370+
async function loadLatestForumTopics() {
371+
try {
372+
const resp = await fetchForumTopics({ page: 0, size: 3 })
373+
latestTopics.value = (resp?.items || []).slice(0, 3)
374+
} catch {
375+
latestTopics.value = []
376+
}
377+
}
378+
379+
function goTopic(id) {
380+
router.push(`/forum/topic/${id}`)
381+
}
382+
338383
onMounted(async () => {
339384
enableHomepageSnap()
340385
loading.value = true
@@ -356,6 +401,7 @@ onMounted(async () => {
356401
loadLatestBug()
357402
loadProjects()
358403
loadCompanies()
404+
loadLatestForumTopics()
359405
})
360406
361407
onUnmounted(() => {

0 commit comments

Comments
 (0)