更新ui样式,并修复已知问题 (#8)

Reviewed-on: #8
This commit was merged in pull request #8.
This commit is contained in:
2026-07-30 22:35:51 +08:00
parent ccf7049ae0
commit cd70f89a28
42 changed files with 971 additions and 450 deletions
+12 -12
View File
@@ -198,7 +198,7 @@ onBeforeUnmount(() => {
class="fixed inset-0 z-[130] flex items-center justify-center bg-slate-950/55 px-4 py-6 backdrop-blur-sm"
@click="close"
>
<div class="w-full max-w-3xl overflow-hidden border border-slate-200 bg-white shadow-2xl" @click.stop>
<div class="oc-modal-shell w-full max-w-3xl overflow-hidden" @click.stop>
<div class="flex items-start justify-between border-b border-slate-200 px-5 py-4">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-700">Quick Upload</p>
@@ -207,7 +207,7 @@ onBeforeUnmount(() => {
</div>
<button
type="button"
class="quick-upload-close oc-icon-button"
class="oc-icon-button"
aria-label="关闭快捷上传"
title="关闭快捷上传"
@click="close"
@@ -228,7 +228,13 @@ onBeforeUnmount(() => {
<span class="font-medium text-slate-700">正在上传 {{ currentItemIndex }} / {{ totalItems }}</span>
<span class="font-medium text-sky-700">{{ overallProgress }}%</span>
</div>
<NProgress type="line" :percentage="overallProgress" :show-indicator="false" color="#0ea5e9" rail-color="#dbeafe" />
<NProgress
type="line"
:percentage="overallProgress"
:show-indicator="false"
color="var(--oc-color-info)"
rail-color="var(--oc-color-border)"
/>
</div>
<div
@@ -251,9 +257,9 @@ onBeforeUnmount(() => {
<div class="overflow-hidden border border-slate-900 bg-slate-950">
<img :src="activeItem.preview" alt="图片预览" class="h-56 w-full object-contain" />
</div>
<div class="mt-3 flex items-center justify-between gap-2">
<button type="button" class="oc-text-button text-sm" @click="fileInput?.click()">重新选择</button>
<button type="button" class="oc-text-button oc-text-button--danger text-sm" @click="handleRemove(activeItem.id)">移除</button>
<div class="mt-3 flex items-center gap-2">
<button type="button" class="oc-panel-button oc-panel-button--neutral flex-1" @click="fileInput?.click()">重新选择</button>
<button type="button" class="oc-panel-button oc-panel-button--danger flex-1" @click="handleRemove(activeItem.id)">移除</button>
</div>
</div>
@@ -394,9 +400,3 @@ onBeforeUnmount(() => {
/>
</Teleport>
</template>
<style scoped>
.quick-upload-close.quick-upload-close {
border-radius: 9999px !important;
}
</style>