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

style(ui): refine navigation and page visuals

Browse Source
This commit is contained in:
Mplan
2026-07-18 20:24:44 +08:00
parent 3ff02e3dd5
commit 1667f9f820
7 changed files with 15 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/favicon.svg
+3 -15
View File
@@ -1,17 +1,5 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 16 16"
shape-rendering="crispEdges"
>
<title>OpenCloud Pixel Favicon</title>
<rect x="1" y="1" width="14" height="14" fill="#e0f2fe" />
<rect x="1" y="1" width="14" height="1" fill="#0f172a" />
<rect x="1" y="14" width="14" height="1" fill="#0f172a" />
<rect x="1" y="2" width="1" height="12" fill="#0f172a" />
<rect x="14" y="2" width="1" height="12" fill="#0f172a" />
<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" />
@@ -28,4 +16,4 @@
<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>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 923 B

src/components/layout/AppHeader.vue
+3 -3
View File
@@ -13,7 +13,7 @@ const isMapRoute = computed(() => route.name === 'map')
const headerHidden = ref(false)
const headerPinnedOpen = ref(false)
const accountCardOpen = ref(false)
const activeNavClass = 'bg-teal-100 text-teal-800 ring-1 ring-teal-200'
const activeNavClass = 'bg-teal-50 text-teal-800 ring-1 ring-teal-100'
const inactiveNavClass = 'text-slate-600 hover:bg-teal-50 hover:text-teal-800'
const displayUsername = computed(() => authStore.profile?.username || authStore.user?.email || 'OpenCloud 用户')
@@ -313,7 +313,7 @@ async function handleLogout() {
>
<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-[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' : ''"
:class="route.name === 'login' ? 'bg-teal-50 ring-0 ring-teal-100 text-teal-800' : ''"
>
登录
</span>
@@ -324,7 +324,7 @@ async function handleLogout() {
>
<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-[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' : ''"
:class="route.name === 'register' ? 'ring-0 ring-sky-300' : ''"
>
注册
</span>
src/style.css
+2 -2
View File
@@ -38,7 +38,7 @@ body {
.oc-primary-button--teal.n-button {
border-color: rgb(153 246 228) !important;
background: rgb(242 250 247) !important;
background: rgb(255, 255, 255) !important;
color: rgb(17 94 89) !important;
box-shadow: 4px 4px 0 0 rgba(20, 184, 166, 0.1) !important;
}
@@ -56,7 +56,7 @@ body {
.oc-primary-button--sky.n-button {
border-color: rgb(186 230 253) !important;
background: rgb(224 242 254) !important;
background: rgb(255, 255, 255) !important;
color: rgb(7 89 133) !important;
box-shadow: 4px 4px 0 0 rgba(14, 165, 233, 0.14) !important;
}
src/views/admin/AdminView.vue
+2 -2
View File
@@ -414,9 +414,9 @@ onMounted(loadAdminData)
<div>
<p class="text-sm font-semibold uppercase tracking-[0.24em] text-sky-700">Admin Console</p>
<h1 class="mt-3 text-4xl font-bold text-slate-950">管理后台</h1>
<p class="mt-4 max-w-2xl text-sm leading-7 text-slate-600">
<!-- <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-600">
集中处理社区云图审核、图片可见性、用户角色和运行数据。所有操作都由 FastAPI 服务统一处理。
</p>
</p> -->
</div>
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" :loading="loading" @click="loadAdminData">
src/views/auth/LoginView.vue
+2 -2
View File
@@ -37,9 +37,9 @@ async function handleLogin() {
登录后继续记录
<span class="block text-teal-700">你眼中的每一朵云</span>
</h1>
<p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
<!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
在地图、图鉴和画廊之间同步你的观测记录。上传新的云图后，图鉴会自动点亮，画廊也会按时间收纳你的作品。
</p>
</p> -->
<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>
src/views/auth/RegisterView.vue
+2 -2
View File
@@ -55,9 +55,9 @@ async function handleRegister() {
加入天空探索者
<span class="block text-sky-700">建立你的云图档案</span>
</h1>
<p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
<!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
注册后即可上传云图、点亮图鉴、在社区画廊里按时间展示你的观测记录。所有页面都会围绕你的个人云层档案同步更新。
</p>
</p> -->
</div>
<div class="mt-8 flex gap-4">
<div class="border border-slate-200 bg-white px-4 py-3">
src/views/map/MapView.vue
+1 -1
View File
@@ -479,7 +479,7 @@ onUnmounted(() => {
</button>
</div>
<div class="absolute bottom-6 right-16 z-10 flex justify-end pointer-events-none">
<div class="absolute bottom-6 right-19 z-10 flex justify-end pointer-events-none">
<div class="pointer-events-auto flex items-center justify-end gap-3">
<Transition name="map-timeline-controls">
<div v-if="timelineControlsOpen" class="flex items-center gap-3">