Kingsmai/yphsalumni.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): adopt Nuxt UI prose styles and apply various fixes

Browse Source 
Replaces custom `markdown.css` with the default prose styling from Nuxt UI to simplify the styling architecture. This commit also includes several other fixes and improvements:

- fix(members): Correctly
handle empty `graduateYear` strings in the member list.
- fix(layout): Wrap `NuxtPage` in a div to resolve page transition issues.
- feat(seo): Add a meta title to the homepage.
- docs(content): Correct
the title and add an image to an event page.
This commit is contained in:
xiaomai
2025-11-15 13:25:42 +08:00
parent 2ac1428c34
commit c7da09d327
8 changed files with 72 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/css/main.css
View File

@@ -1,4 +1,4 @@
@import "./markdown.css";
/* @import "./markdown.css"; */
@import "tailwindcss";
@import "@nuxt/ui";

565
app/assets/css/markdown.css
View File

@@ -1,565 +0,0 @@
/* markdown.css
默认：明亮 / 白色背景主题
同时提供：.dark .prose 覆盖（如需启用 class-based dark 模式）
依赖：全局定义的 CSS 变量 --color-primary 和 --color-secondary
*/
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* ---------- 默认：明亮主题（Light） ---------- */
/* 美化 prose 内容样式 */
.prose {
@apply text-gray-800 leading-relaxed;
font-feature-settings:
"kern" 1,
"liga" 1;
color: inherit;
}
/* 标题层级 */
.prose h1 {
@apply text-4xl font-bold mt-8 mb-6 pb-4 border-b border-gray-200;
background-image: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
}
.prose h2 {
@apply text-3xl font-bold text-gray-900 mt-10 mb-5 pb-3 border-b border-gray-200 relative;
}
.prose h2::before {
content: "";
@apply absolute bottom-0 left-0 w-12 h-0.5 rounded-full;
background-image: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
}
.prose h3 {
@apply text-2xl font-semibold text-gray-800 mt-8 mb-4;
color: rgba(31, 41, 55, 0.95);
}
.prose h4 {
@apply text-xl font-semibold text-gray-700 mt-7 mb-3;
}
.prose h5 {
@apply text-lg font-medium text-gray-700 mt-6 mb-3;
}
.prose h6 {
@apply text-base font-medium text-gray-600 mt-5 mb-2 italic;
}
/* 段落和文本 */
.prose p {
@apply text-gray-700 leading-relaxed mb-5;
text-align: justify;
}
.prose strong {
@apply font-bold px-1 rounded;
background: linear-gradient(
90deg,
rgba(252, 239, 145, 0.22),
rgba(251, 158, 58, 0.12)
);
color: rgba(31, 41, 55, 0.95);
}
.prose em {
@apply italic px-1 rounded;
color: var(--color-secondary);
background: rgba(251, 158, 58, 0.08);
}
.prose del {
@apply line-through px-1 rounded;
color: #ef4444;
background: rgba(239, 68, 68, 0.06);
}
/* 链接 */
.prose a {
@apply font-medium relative transition-all duration-300;
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
.prose a:hover {
color: var(--color-primary);
transform: translateY(1px);
}
.prose a::after {
content: "";
@apply absolute bottom-0 left-0 w-0 h-0.5 transition-all duration-300;
background: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
}
.prose a:hover::after {
@apply w-full;
}
/* 外部链接图标 */
.prose a[href^="http"]::before {
content: "↗";
@apply inline-block mr-1 text-xs translate-y-[2px] opacity-70;
}
.prose h1 a,
.prose h2 a,
.prose h3 a,
.prose h4 a,
.prose h5 a,
.prose h6 a {
text-decoration: none;
}
/* 列表 */
.prose ul {
@apply list-none space-y-3 mb-6;
}
.prose ul li {
@apply relative pl-6;
}
.prose ul li::before {
content: "";
@apply absolute left-0 top-3 w-1.5 h-1.5 rounded-full;
background: var(--color-secondary);
}
.prose ol {
@apply list-decimal list-inside space-y-3 mb-6;
counter-reset: list-counter;
}
.prose ol li {
@apply relative pl-8;
counter-increment: list-counter;
}
.prose ol li::before {
content: counter(list-counter);
@apply absolute left-0 top-0 w-6 h-6 text-white text-xs rounded-full flex items-center justify-center font-bold;
background-image: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
}
/* 代码块（浅色风格） */
.prose pre {
@apply rounded-xl p-6 my-8 border shadow-sm overflow-x-auto;
border: 1px solid rgba(229, 231, 235, 1); /* gray-200 */
background: linear-gradient(180deg, #ffffff, #f8fafc);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
backdrop-filter: blur(6px);
}
.prose code {
@apply px-2 py-1 rounded text-sm font-mono;
background: rgba(243, 244, 246, 0.8); /* gray-50-ish */
border: 1px solid rgba(229, 231, 235, 1);
color: #0f172a;
}
.prose pre code {
@apply bg-transparent p-0 text-current border-none;
color: #0f172a;
}
/* 引用块（浅色友好） */
.prose blockquote {
@apply pl-6 italic text-gray-700 my-8 py-4 pr-6 rounded-r-xl relative overflow-hidden;
border-left: 4px solid transparent;
border-image: linear-gradient(
to bottom,
rgba(252, 239, 145, 0.9),
rgba(251, 158, 58, 0.9)
)
1;
background: linear-gradient(
90deg,
rgba(252, 239, 145, 0.06),
rgba(255, 255, 255, 0)
);
}
.prose blockquote::before {
content: '"';
@apply absolute -top-4 -left-2 text-6xl opacity-20 font-serif;
color: var(--color-primary);
}
.prose blockquote p {
@apply mb-3 last:mb-0 relative z-10;
}
/* 图片 */
.prose img {
@apply rounded-2xl my-8 mx-auto transition-all duration-500 border-2;
border-color: rgba(226, 232, 240, 0.6); /* gray-200 */
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.prose img:hover {
@apply scale-[1.02];
border-color: var(--color-secondary);
}
.prose figure {
@apply my-8 text-center;
}
.prose figcaption {
@apply text-sm text-gray-500 mt-3 italic;
}
/* 表格 */
.prose table {
@apply w-full border-collapse my-8 text-sm rounded-xl overflow-hidden shadow-sm;
}
.prose thead {
background-image: linear-gradient(
90deg,
rgba(252, 239, 145, 0.18),
rgba(251, 158, 58, 0.12)
);
}
.prose th {
@apply border px-6 py-4 text-left font-bold text-gray-800 text-sm uppercase tracking-wider;
border-color: rgba(226, 232, 240, 0.6);
background: rgba(250, 250, 250, 0.8);
}
.prose td {
@apply border px-6 py-4 text-gray-700;
border-color: rgba(226, 232, 240, 0.4);
}
.prose tr:nth-child(even) {
@apply bg-gray-50;
}
.prose tr:hover {
background: rgba(251, 158, 58, 0.06);
transition: background 0.2s;
}
/* 分割线 */
.prose hr {
@apply border-gray-200 my-12 relative;
}
.prose hr::before {
content: "";
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full opacity-20;
background-image: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
}
/* 任务列表（checkbox） */
.prose input[type="checkbox"] {
@apply mr-3 rounded w-5 h-5 transition-all duration-200;
background: #fff;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.prose input[type="checkbox"]:checked {
background-image: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
border: none;
}
.prose .task-list-item {
@apply list-none pl-0 flex items-start;
}
.prose .task-list-item input[type="checkbox"] {
@apply mt-0.5 flex-shrink-0;
}
/* 强调和标记 */
.prose mark {
@apply px-2 py-1 rounded font-medium;
background: linear-gradient(
120deg,
rgba(252, 239, 145, 0.22),
rgba(251, 158, 58, 0.18)
);
color: #8a4b00;
}
/* 键盘按键 */
.prose kbd {
@apply border rounded-lg px-3 py-1.5 text-sm font-mono shadow-sm;
background: rgba(247, 249, 250, 0.9);
border-color: rgba(226, 232, 240, 0.8);
color: #0f172a;
}
/* 动画定义 */
@keyframes gradientShift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* 滚动条（浅色） */
.prose pre::-webkit-scrollbar {
@apply h-2;
}
.prose pre::-webkit-scrollbar-track {
@apply rounded-full;
background: rgba(243, 244, 246, 0.9);
}
.prose pre::-webkit-scrollbar-thumb {
border-radius: 9999px;
background-image: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
}
/* 移动端优化 */
@media (max-width: 768px) {
.prose {
@apply text-base;
}
.prose h1 {
@apply text-3xl;
}
.prose h2 {
@apply text-2xl;
}
.prose h3 {
@apply text-xl;
}
.prose pre {
@apply p-4;
}
}
/* 打印优化 */
@media print {
.prose {
@apply text-black;
}
.prose a {
@apply text-black no-underline;
}
.prose pre {
@apply bg-gray-100 border border-gray-300;
}
}
/* ---------- 可选：深色模式覆盖（.dark class 优先） ---------- */
/* 如果你使用 Tailwind 的 class-based dark 模式（<html class="dark">），.dark .prose 会生效 */
/* 也可替换为 @media (prefers-color-scheme: dark) {...} 来自动跟随系统 dark 模式 */
.dark .prose {
@apply text-gray-200;
color: inherit;
}
.dark .prose h1 {
border-color: rgba(55, 65, 81, 0.5);
}
.dark .prose h2 {
color: #fff;
border-color: rgba(55, 65, 81, 0.4);
}
.dark .prose p {
@apply text-gray-300;
}
.dark .prose pre {
border: 1px solid rgba(55, 65, 81, 0.6);
background: linear-gradient(
135deg,
rgba(17, 24, 39, 0.9),
rgba(31, 41, 55, 0.9)
);
box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
}
.dark .prose code {
background: rgba(31, 41, 55, 0.6);
border: 1px solid rgba(55, 65, 81, 0.5);
color: #e6eef8;
}
.dark .prose blockquote {
border-image: linear-gradient(
to bottom,
var(--color-primary),
var(--color-secondary)
)
1;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.02),
rgba(255, 255, 255, 0)
);
color: rgba(255, 255, 255, 0.9);
}
.dark .prose table thead {
background-image: linear-gradient(
90deg,
rgba(252, 239, 145, 0.06),
rgba(251, 158, 58, 0.04)
);
}
.dark .prose tr:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
.dark .prose td,
.dark .prose th {
color: rgba(255, 255, 255, 0.9);
}
.dark .prose img {
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
border-color: rgba(55, 65, 81, 0.5);
}
.dark .prose kbd {
background: rgba(31, 41, 55, 0.7);
border-color: rgba(55, 65, 81, 0.6);
color: #e6eef8;
}
/* 滚动条（深色） */
.dark .prose pre::-webkit-scrollbar-track {
background: rgba(17, 24, 39, 0.8);
}
.dark .prose pre::-webkit-scrollbar-thumb {
background-image: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
}
@media (prefers-color-scheme: dark) {
.prose {
@apply text-gray-200;
color: inherit;
}
.prose h1 {
border-color: rgba(55, 65, 81, 0.5);
}
.prose h2 {
color: #fff;
border-color: rgba(55, 65, 81, 0.4);
}
.prose p {
@apply text-gray-300;
}
.prose pre {
border: 1px solid rgba(55, 65, 81, 0.6);
background: linear-gradient(
135deg,
rgba(17, 24, 39, 0.9),
rgba(31, 41, 55, 0.9)
);
box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
}
.prose code {
background: rgba(31, 41, 55, 0.6);
border: 1px solid rgba(55, 65, 81, 0.5);
color: #e6eef8;
}
.prose blockquote {
border-image: linear-gradient(
to bottom,
var(--color-primary),
var(--color-secondary)
)
1;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.02),
rgba(255, 255, 255, 0)
);
color: rgba(255, 255, 255, 0.9);
}
.prose table thead {
background-image: linear-gradient(
90deg,
rgba(252, 239, 145, 0.06),
rgba(251, 158, 58, 0.04)
);
}
.prose tr:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
.prose td,
.prose th {
color: rgba(255, 255, 255, 0.9);
}
.prose img {
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
border-color: rgba(55, 65, 81, 0.5);
}
.prose kbd {
background: rgba(31, 41, 55, 0.7);
border-color: rgba(55, 65, 81, 0.6);
color: #e6eef8;
}
/* 滚动条（深色） */
.prose pre::-webkit-scrollbar-track {
background: rgba(17, 24, 39, 0.8);
}
.prose pre::-webkit-scrollbar-thumb {
background-image: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
}
}

4
app/layouts/default.vue
View File

@@ -52,7 +52,9 @@
<UMain>
<Transition name="page" mode="out-in">
<NuxtPage />
<div>
<NuxtPage />
</div>
</Transition>
</UMain>

4
app/pages/index.vue
View File

@@ -36,6 +36,10 @@
<script lang="ts" setup>
import type { BlogPostProps } from "@nuxt/ui";
useSeoMeta({
title: "首页",
});
const heroCta = ref([
{
label: "立即加入我们",

4
app/pages/members/index.vue
View File

@@ -77,12 +77,12 @@ const columns: TableColumn<Member>[] = [
// 初中毕业
// 如果 row.original.graduateYear 不能转换成数字，就写成初中毕业
// 否则计算届别
return isNaN(Number(row.original.graduateYear))
return isNaN(Number(row.original.graduateYear)) || row.original.graduateYear.trim() == ""
? "初中毕业"
: `初中第 ${Number(row.original.graduateYear) - 1958} 届`;
case "s":
// 高中毕业
return isNaN(Number(row.original.graduateYear))
return isNaN(Number(row.original.graduateYear)) || row.original.graduateYear.trim() == ""
? "高中毕业"
: `高中第 ${Number(row.original.graduateYear) - 1965} 届`;
case "dj1":