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

fix(ui): finalize visual contracts and map toolbar

Browse Source
This commit is contained in:
Mplan
2026-07-29 23:15:14 +08:00
parent 2da2cef338
commit dbb4ff724b
17 changed files with 92 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cloud/CloudEditModal.vue
+1 -1
View File
@@ -234,7 +234,7 @@ watch(() => props.initialValue, value => {
<textarea
v-model="form.description"
rows="4"
class="w-full resize-none border border-slate-300 px-3 py-2.5 text-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500"
class="oc-field-control resize-none"
placeholder="描述一下这张图片..."
></textarea>
</div>
src/components/cloud/ImageDetailModal.vue
+12 -6
View File
@@ -181,13 +181,13 @@ onBeforeUnmount(() => {
@click="close"
>
<div
class="image-detail-shell relative w-fit max-w-[92vw] overflow-hidden rounded-[30px] shadow-2xl"
class="image-detail-shell relative w-fit max-w-[92vw] overflow-hidden shadow-2xl"
@click.stop
>
<button
type="button"
@click="close"
class="image-detail-close-button oc-overlay-button absolute right-4 top-4 z-30 h-10 w-10 rounded-full [&_svg]:stroke-[2.5]"
class="image-detail-close-button oc-overlay-button absolute right-4 top-4 z-30 h-10 w-10 [&_svg]:stroke-[2.5]"
aria-label="关闭大图"
title="关闭大图"
>
@@ -223,7 +223,7 @@ onBeforeUnmount(() => {
<button
type="button"
@click="toggleInfo"
class="oc-overlay-button absolute bottom-4 right-4 z-30 h-11 w-11 rounded-full drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)]"
class="image-detail-info-button oc-overlay-button absolute bottom-4 right-4 z-30 h-11 w-11 drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)]"
:aria-label="infoOpen ? '隐藏详细信息' : '查看详细信息'"
:title="infoOpen ? '隐藏详细信息' : '查看详细信息'"
>
@@ -242,7 +242,7 @@ onBeforeUnmount(() => {
<h2 class="text-xl font-bold text-slate-900">{{ title }}</h2>
<span
v-if="badgeLabel"
class="rounded-full border px-3 py-1 text-xs font-medium"
class="border px-3 py-1 text-xs font-medium"
:class="badgeClass"
>
{{ badgeLabel }}
@@ -254,7 +254,7 @@ onBeforeUnmount(() => {
<button
type="button"
@click="infoOpen = false"
class="oc-icon-button oc-icon-button--small absolute right-3 top-3 rounded-full"
class="image-detail-panel-close oc-icon-button oc-icon-button--small absolute right-3 top-3"
aria-label="隐藏详细信息"
title="隐藏详细信息"
>
@@ -301,7 +301,13 @@ onBeforeUnmount(() => {
transform: translateY(10px) scale(0.97);
}
.image-detail-close-button.image-detail-close-button {
.image-detail-shell.image-detail-shell {
border-radius: 30px !important;
}
.image-detail-close-button.image-detail-close-button,
.image-detail-info-button.image-detail-info-button,
.image-detail-panel-close.image-detail-panel-close {
border-radius: 9999px !important;
}
</style>
src/components/layout/AppHeader.vue
+7 -7
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { NIcon, NSpace } from 'naive-ui'
import { Logout, Settings, Shield, User } from '@vicons/tabler'
import { ChevronDown, Logout, Settings, Shield, User } from '@vicons/tabler'
import { useAuthStore } from '@/stores/auth'
import { RouterLink, useRoute, useRouter } from 'vue-router'
@@ -138,7 +138,7 @@ 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-sky-200 bg-sky-100 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]">
<div class="oc-brand-mark">
<svg
class="h-8 w-8"
viewBox="0 0 16 16"
@@ -170,7 +170,7 @@ async function handleLogout() {
</div>
</RouterLink>
<nav class="hidden items-center gap-2 border border-slate-200 bg-white px-2 py-2 shadow-[6px_6px_0_0_rgba(15,23,42,0.05)] md:flex">
<nav class="oc-panel-card hidden items-center gap-2 border border-slate-200 bg-white px-2 py-2 md:flex">
<RouterLink
to="/"
class="oc-nav-link"
@@ -228,7 +228,7 @@ async function handleLogout() {
<button
type="button"
class="oc-header-button oc-header-button--teal max-w-[8.5rem] gap-2 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(52,116,93,0.16)]' : ''"
:class="route.name === 'profile' || route.name === 'profile-settings' ? 'border-teal-200 bg-teal-50/80 text-teal-800 ring-1 ring-teal-200' : ''"
aria-haspopup="menu"
:aria-expanded="accountCardOpen"
>
@@ -243,7 +243,7 @@ async function handleLogout() {
class="absolute right-0 top-full z-50 w-72 pt-3"
role="menu"
>
<div class="border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]">
<div class="oc-floating-panel border border-slate-200 bg-white">
<div class="border-b border-slate-200 bg-[linear-gradient(180deg,#f2faf6_0%,#ffffff_100%)] px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-11 w-11 shrink-0 items-center justify-center border border-teal-200 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-lg font-bold text-teal-800">
@@ -375,10 +375,10 @@ async function handleLogout() {
>
<button
type="button"
class="pointer-events-auto flex items-center gap-2 border border-slate-300 bg-white/94 px-3 py-1.5 text-xs font-medium tracking-[0.16em] text-slate-700 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)] backdrop-blur transition-colors hover:border-teal-300 hover:bg-teal-50 hover:text-teal-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
class="oc-header-button oc-header-button--neutral pointer-events-auto gap-2 bg-white/94 text-xs tracking-[0.16em] backdrop-blur"
@click="showHeader(true)"
>
<span>▼</span>
<NIcon size="15"><ChevronDown /></NIcon>
<span>展开导航</span>
</button>
</div>