Mplan/opencloud
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(styles): 建立统一的生产级样式体系 (#4)

Browse Source 
## 变更内容

- 将全局样式拆分为设计令牌、基础规则和语义组件层
- 集中管理 Naive UI 主题配置
- 迁移页面容器、表单、信息面板和按钮等重复样式
- 增加样式体系文档与自动契约检查

## 验证

- `npm run check:styles`
- `npm run build`Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
Mplan
2026-07-23 02:41:04 +08:00
parent 51743645e2
commit 16b3dd4aaa
27 changed files with 828 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/encyclopedia/CloudTypeView.vue
+14 -14
View File
@@ -200,11 +200,11 @@ watch(() => route.params.id, () => {
<NCard class="mt-8 border border-slate-200">
<p class="text-sm text-slate-500">你的收集状态</p>
<template v-if="isUnlocked && collectionEntry">
<p class="mt-2 text-2xl font-bold text-slate-900">已解锁</p>
<p class="oc-stat-value">已解锁</p>
<p class="mt-2 text-sm text-slate-600">首次解锁于 {{ formatDate(collectionEntry.unlocked_at) }}</p>
</template>
<template v-else>
<p class="mt-2 text-2xl font-bold text-slate-900">尚未解锁</p>
<p class="oc-stat-value">尚未解锁</p>
<p class="mt-2 text-sm text-slate-600">拍到并上传这种云朵后，这枚徽章就会被点亮。</p>
</template>
</NCard>
@@ -215,11 +215,11 @@ watch(() => route.params.id, () => {
<section class="mt-6 grid gap-4 md:grid-cols-3">
<NCard class="border border-slate-200 shadow-sm">
<p class="text-sm text-slate-500">稀有度</p>
<p class="mt-2 text-2xl font-bold text-slate-900">{{ rarityMeta[cloudType.rarity].label }}</p>
<p class="oc-stat-value">{{ rarityMeta[cloudType.rarity].label }}</p>
</NCard>
<NCard class="border border-slate-200 shadow-sm">
<p class="text-sm text-slate-500">公开云图</p>
<p class="mt-2 text-2xl font-bold text-slate-900">{{ publicCount }}</p>
<p class="oc-stat-value">{{ publicCount }}</p>
</NCard>
<NCard class="border border-slate-200 shadow-sm">
<p class="text-sm text-slate-500">首次解锁</p>
@@ -233,7 +233,7 @@ watch(() => route.params.id, () => {
<div class="mb-4 flex items-end justify-between gap-4">
<div>
<h2 class="text-2xl font-bold text-slate-900">该类型云图画廊</h2>
<p class="mt-1 text-sm text-slate-500">来自社区公开可见的已通过云图。</p>
<p class="oc-field-help">来自社区公开可见的已通过云图。</p>
</div>
</div>
@@ -281,20 +281,20 @@ watch(() => route.params.id, () => {
@close="selectedGalleryItem = null"
>
<div class="grid gap-4 sm:grid-cols-2">
<div class="border border-slate-200 bg-slate-50 p-4">
<p class="text-xs uppercase tracking-[0.18em] text-slate-500">上传时间</p>
<div class="oc-inset-panel">
<p class="oc-section-label">上传时间</p>
<p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(selectedGalleryItem.created_at) }}</p>
</div>
<div class="border border-slate-200 bg-slate-50 p-4">
<p class="text-xs uppercase tracking-[0.18em] text-slate-500">拍摄时间</p>
<div class="oc-inset-panel">
<p class="oc-section-label">拍摄时间</p>
<p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(selectedGalleryItem.captured_at) }}</p>
</div>
<div class="border border-slate-200 bg-slate-50 p-4">
<p class="text-xs uppercase tracking-[0.18em] text-slate-500">位置</p>
<div class="oc-inset-panel">
<p class="oc-section-label">位置</p>
<p class="mt-2 text-sm font-medium text-slate-900">{{ selectedGalleryItem.location_name || '未填写位置名称' }}</p>
</div>
<div class="border border-slate-200 bg-slate-50 p-4">
<p class="text-xs uppercase tracking-[0.18em] text-slate-500">模糊化经纬度</p>
<div class="oc-inset-panel">
<p class="oc-section-label">模糊化经纬度</p>
<p class="mt-2 text-sm font-medium text-slate-900">
纬度 {{ formatCoordinate(selectedGalleryItem.latitude) }} / 经度 {{ formatCoordinate(selectedGalleryItem.longitude) }}
</p>
@@ -302,7 +302,7 @@ watch(() => route.params.id, () => {
</div>
<div class="mt-5 border border-slate-200 bg-white p-5">
<p class="text-xs uppercase tracking-[0.18em] text-slate-500">图片说明</p>
<p class="oc-section-label">图片说明</p>
<p class="mt-3 text-sm leading-7 text-slate-700">
{{ selectedGalleryItem.description || '上传者没有留下额外说明。' }}
</p>
src/views/encyclopedia/EncyclopediaView.vue
+6 -6
View File
@@ -62,13 +62,13 @@ onMounted(async () => {
<template>
<div class="relative">
<div class="bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] border-b border-sky-100">
<div class="max-w-6xl mx-auto px-4 py-10">
<div class="oc-page-hero">
<div class="oc-container oc-container--content oc-page-hero__inner">
<div class="grid gap-6 lg:grid-cols-[1.4fr_0.9fr] lg:items-start">
<div>
<p class="text-sm font-medium tracking-[0.24em] text-sky-700 uppercase">Cloud Encyclopedia</p>
<h1 class="mt-3 text-4xl font-bold text-slate-900">云朵图鉴</h1>
<p class="mt-4 max-w-2xl text-slate-600 leading-7">
<p class="oc-page-eyebrow">Cloud Encyclopedia</p>
<h1 class="oc-page-title">云朵图鉴</h1>
<p class="oc-page-description">
收集 10 种基础云属。每拍到一种新的云型，图鉴里就会点亮一枚徽章，并记录你第一次遇见它的时间。
</p>
</div>
@@ -83,7 +83,7 @@ onMounted(async () => {
</div>
</div>
<div class="max-w-6xl mx-auto px-4 py-8">
<div class="oc-container oc-container--content oc-page-content">
<NAlert
v-if="encyclopediaStore.collectionError && authStore.isLoggedIn"
class="mb-6"