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/auth/ForgotPasswordView.vue
+4 -4
View File
@@ -85,14 +85,14 @@ onUnmounted(() => {
</p>
<div class="mt-8 grid gap-4 sm:grid-cols-2">
<div class="border border-slate-200 bg-white px-4 py-3">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Step 1</div>
<div class="oc-stat-label">Step 1</div>
<div class="mt-2 text-lg font-bold text-slate-900">发送邮件</div>
<div class="mt-1 text-sm text-slate-500">使用注册邮箱请求重置链接</div>
<div class="oc-field-help">使用注册邮箱请求重置链接</div>
</div>
<div class="border border-slate-200 bg-white px-4 py-3">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Step 2</div>
<div class="oc-stat-label">Step 2</div>
<div class="mt-2 text-lg font-bold text-slate-900">设置新密码</div>
<div class="mt-1 text-sm text-slate-500">在专用页面完成新密码更新</div>
<div class="oc-field-help">在专用页面完成新密码更新</div>
</div>
</div>
</section>
src/views/auth/LoginView.vue
+6 -6
View File
@@ -44,14 +44,14 @@ async function handleLogin() {
</div>
<div class="mt-8 flex gap-4">
<div class="border border-slate-200 bg-white px-4 py-3">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Collection</div>
<div class="mt-2 text-2xl font-bold text-slate-900">10</div>
<div class="mt-1 text-sm text-slate-500">基础云属待收集</div>
<div class="oc-stat-label">Collection</div>
<div class="oc-stat-value">10</div>
<div class="oc-field-help">基础云属待收集</div>
</div>
<div class="border border-slate-200 bg-white px-4 py-3">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Mode</div>
<div class="mt-2 text-2xl font-bold text-slate-900">Atlas</div>
<div class="mt-1 text-sm text-slate-500">地图、图鉴、画廊一体</div>
<div class="oc-stat-label">Mode</div>
<div class="oc-stat-value">Atlas</div>
<div class="oc-field-help">地图、图鉴、画廊一体</div>
</div>
</div>
</section>
src/views/auth/RegisterView.vue
+6 -6
View File
@@ -61,14 +61,14 @@ async function handleRegister() {
</div>
<div class="mt-8 flex gap-4">
<div class="border border-slate-200 bg-white px-4 py-3">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Review</div>
<div class="mt-2 text-2xl font-bold text-slate-900">Queue</div>
<div class="mt-1 text-sm text-slate-500">上传后进入审核队列</div>
<div class="oc-stat-label">Review</div>
<div class="oc-stat-value">Queue</div>
<div class="oc-field-help">上传后进入审核队列</div>
</div>
<div class="border border-slate-200 bg-white px-4 py-3">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Profile</div>
<div class="mt-2 text-2xl font-bold text-slate-900">Journal</div>
<div class="mt-1 text-sm text-slate-500">自动生成个人天空日志</div>
<div class="oc-stat-label">Profile</div>
<div class="oc-stat-value">Journal</div>
<div class="oc-field-help">自动生成个人天空日志</div>
</div>
</div>
</section>