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

#1 大幅改进页面显示效果 (#1)

Browse Source 
Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
Mplan
2026-05-30 00:39:20 +08:00
parent 2a9f8d6a9c
commit e087dd46e2
28 changed files with 400 additions and 1366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cloud/CloudEditModal.vue
+2 -2
View File
@@ -251,8 +251,8 @@ watch(() => props.initialValue, value => {
</div>
<div class="flex items-center justify-end gap-3 border-t border-slate-200 px-6 py-4">
<NButton secondary strong @click="close">取消</NButton>
<NButton type="primary" secondary strong :loading="saving" @click="save">
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="close">取消</NButton>
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" :loading="saving" @click="save">
保存修改
</NButton>
</div>
src/components/cloud/EncyclopediaProgressCard.vue
+1 -1
View File
@@ -29,7 +29,7 @@ const currentColor = computed(() => progressColor(props.isLoggedIn ? props.perce
</script>
<template>
<NCard class="border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
<NCard class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-slate-500">当前进度</p>
src/components/cloud/MapPickerModal.vue
+3 -2
View File
@@ -194,11 +194,12 @@ onBeforeUnmount(() => {
<div class="flex items-center justify-between border-t border-slate-200 px-6 py-4">
<p class="text-sm text-slate-500">{{ footerText }}</p>
<div class="flex gap-3">
<NButton secondary strong @click="close">取消</NButton>
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="close">取消</NButton>
<NButton
type="primary"
type="default"
secondary
strong
class="oc-panel-button oc-panel-button--sky"
:disabled="pickedLat === null || pickedLng === null"
@click="confirm"
>
src/components/cloud/QuickUploadModal.vue
+2 -2
View File
@@ -375,8 +375,8 @@ onBeforeUnmount(() => {
</div>
<div class="flex items-center justify-end gap-3 border-t border-slate-200 bg-slate-50 px-5 py-4">
<NButton secondary strong :disabled="uploading" @click="close">关闭</NButton>
<NButton type="primary" secondary strong :disabled="uploading || items.length === 0" @click="handleSubmit">
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" :disabled="uploading" @click="close">关闭</NButton>
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" :disabled="uploading || items.length === 0" @click="handleSubmit">
{{ uploading ? '上传中...' : '提交审核' }}
</NButton>
</div>
src/components/layout/AppHeader.vue
+30 -7
View File
@@ -138,8 +138,31 @@ async function handleLogout() {
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<RouterLink to="/" class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center border border-slate-300 bg-[linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)] text-xl shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]">
☁️
<div class="flex h-10 w-10 items-center justify-center border border-slate-300 bg-[linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)] shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]">
<svg
class="h-8 w-8"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
shape-rendering="crispEdges"
aria-hidden="true"
>
<rect x="11" y="3" width="1" height="1" fill="#f59e0b" />
<rect x="10" y="4" width="3" height="1" fill="#fbbf24" />
<rect x="11" y="5" width="1" height="1" fill="#f59e0b" />
<rect x="5" y="7" width="7" height="1" fill="#38bdf8" />
<rect x="4" y="8" width="8" height="1" fill="#38bdf8" />
<rect x="4" y="9" width="7" height="1" fill="#38bdf8" />
<rect x="5" y="10" width="4" height="1" fill="#38bdf8" />
<rect x="5" y="5" width="4" height="1" fill="#ffffff" />
<rect x="4" y="6" width="7" height="1" fill="#ffffff" />
<rect x="3" y="7" width="8" height="1" fill="#ffffff" />
<rect x="3" y="8" width="7" height="1" fill="#ffffff" />
<rect x="4" y="9" width="5" height="1" fill="#ffffff" />
<rect x="4" y="11" width="8" height="1" fill="#7dd3fc" opacity="0.55" />
</svg>
</div>
<div>
<div class="text-[11px] uppercase tracking-[0.22em] text-slate-500">Live Sky Atlas</div>
@@ -186,7 +209,7 @@ async function handleLogout() {
class="no-underline"
>
<span
class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium uppercase tracking-[0.12em] text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium uppercase tracking-[0.12em] text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-[background-color,color,transform,box-shadow] hover:-translate-x-px hover:-translate-y-px hover:bg-sky-50 hover:text-sky-900 hover:shadow-[5px_5px_0_0_rgba(14,165,233,0.18)] md:h-10 md:px-4"
:class="route.name === 'upload' ? 'ring-1 ring-sky-300' : ''"
>
上传
@@ -203,8 +226,8 @@ async function handleLogout() {
>
<button
type="button"
class="inline-flex h-8 max-w-[8.5rem] items-center gap-2 border border-teal-100 bg-white/80 px-3 text-sm font-medium text-teal-800 shadow-[3px_3px_0_0_rgba(20,184,166,0.08)] transition-colors hover:border-teal-200 hover:bg-teal-50 md:h-10 md:max-w-none"
:class="route.name === 'profile' || route.name === 'profile-settings' ? 'bg-teal-50 ring-1 ring-teal-200' : ''"
class="inline-flex h-8 max-w-[8.5rem] items-center gap-2 border border-teal-100 bg-white/80 px-3 text-sm font-medium text-teal-700 shadow-[3px_3px_0_0_rgba(20,184,166,0.08)] transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-x-px hover:-translate-y-px hover:border-teal-200 hover:bg-teal-50/70 hover:text-teal-800 hover:shadow-[4px_4px_0_0_rgba(20,184,166,0.12)] md:h-10 md:max-w-none"
:class="route.name === 'profile' || route.name === 'profile-settings' ? 'border-teal-200 bg-teal-50/80 text-teal-800 ring-1 ring-teal-200 shadow-[4px_4px_0_0_rgba(20,184,166,0.12)]' : ''"
aria-haspopup="menu"
:aria-expanded="accountCardOpen"
>
@@ -288,7 +311,7 @@ async function handleLogout() {
class="no-underline"
>
<span
class="inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3 text-sm font-medium text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800 md:h-10 md:px-4"
class="inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3 text-sm font-medium text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-x-px hover:-translate-y-px hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800 hover:shadow-[4px_4px_0_0_rgba(15,23,42,0.08)] md:h-10 md:px-4"
:class="route.name === 'login' ? 'bg-teal-50 ring-1 ring-teal-200 text-teal-800' : ''"
>
登录
@@ -299,7 +322,7 @@ async function handleLogout() {
class="no-underline"
>
<span
class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-[background-color,color,transform,box-shadow] hover:-translate-x-px hover:-translate-y-px hover:bg-sky-50 hover:text-sky-900 hover:shadow-[5px_5px_0_0_rgba(14,165,233,0.18)] md:h-10 md:px-4"
:class="route.name === 'register' ? 'ring-1 ring-sky-300' : ''"
>
注册
src/components/profile/ContributionHeatmap.vue
+18 -6
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { NButton, NButtonGroup, NSelect } from 'naive-ui'
import { NButton, NSelect } from 'naive-ui'
export interface ContributionHeatmapCell {
date: string
@@ -284,7 +284,7 @@ function formatMonthTooltip(monthKey: string) {
</script>
<template>
<div class="border border-slate-200 bg-white p-6 shadow-sm">
<div class="oc-panel-card border border-slate-200 bg-white p-6 shadow-sm">
<div class="flex flex-wrap items-start justify-between gap-6">
<div class="min-w-0 flex-1">
<h3 class="text-2xl font-bold text-slate-900">{{ title }}</h3>
@@ -295,14 +295,26 @@ function formatMonthTooltip(monthKey: string) {
</div>
<div class="flex flex-wrap items-center justify-end gap-3">
<NButtonGroup>
<NButton :type="viewMode === 'year' ? 'primary' : 'default'" secondary strong @click="viewMode = 'year'">
<div class="flex flex-wrap items-center gap-2">
<NButton
secondary
strong
type="default"
:class="viewMode === 'year' ? 'oc-panel-button oc-panel-button--teal' : 'oc-panel-button oc-panel-button--neutral'"
@click="viewMode = 'year'"
>
年度视图
</NButton>
<NButton :type="viewMode === 'month' ? 'primary' : 'default'" secondary strong @click="viewMode = 'month'">
<NButton
secondary
strong
type="default"
:class="viewMode === 'month' ? 'oc-panel-button oc-panel-button--teal' : 'oc-panel-button oc-panel-button--neutral'"
@click="viewMode = 'month'"
>
月度视图
</NButton>
</NButtonGroup>
</div>
<NSelect
v-model:value="selectedYear"
:options="yearOptions"