html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-09-14 20:21:02 +08:00
parent 349e8f60df
commit bd6d54ac33
16 changed files with 208 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/overseas-warehouse/components/OrderReferenceText.vue
+2 -1
View File
@@ -6,6 +6,7 @@ const props = withDefaults(defineProps<{
value?: string | null
emptyText?: string
copyable?: boolean
compact?: boolean
copyLabel?: string
}>(), { value: null, emptyText: '—', copyable: false, copyLabel: '尾程单号' })
@@ -18,7 +19,7 @@ const fullTitle = computed(() => displayValue.value === props.emptyText ? undefi
</script>
<template>
<span class="order-reference-text" :title="fullTitle"><span class="order-reference-text__value">{{ displayValue }}</span><CopyButton v-if="copyable && fullTitle" class="order-reference-text__copy" :value="displayValue" :label="copyLabel" button-text="" /></span>
<span class="order-reference-text" :title="fullTitle"><span class="order-reference-text__value">{{ displayValue }}</span><CopyButton v-if="copyable && fullTitle" class="order-reference-text__copy" :text="compact" :size="compact ? 'small' : undefined" :value="displayValue" :label="copyLabel" button-text="" /></span>
</template>
<style scoped>
src/modules/overseas-warehouse/components/OverseasDetailShell.vue
+16 -14
View File
@@ -2,6 +2,7 @@
import '@/styles/adminDensity.css'
import { ArrowLeft } from '@lucide/vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import ContractPendingNotice from './ContractPendingNotice.vue'
withDefaults(defineProps<{
@@ -19,8 +20,15 @@ defineEmits<{ back: [] }>()
</script>
<template>
<AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense }">
<header class="overseas-detail-head">
<AdminPage as="div" class="overseas-detail-page" :class="{ 'admin-density': dense }" :aria-label="title">
<header v-if="dense" class="density-detail-header">
<div class="overseas-detail-title density-detail-heading">
<el-button link class="density-back" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回列表</el-button>
<h1 class="density-detail-title"><slot name="reference">{{ referenceValue }}</slot></h1>
<StatusBadge v-if="statusText" :status="statusText" />
</div>
</header>
<header v-else class="overseas-detail-head">
<el-button :class="{ 'density-back': dense }" :link="dense" :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回</el-button>
<div class="overseas-detail-title">
<h1>{{ title }}</h1>
@@ -28,7 +36,7 @@ defineEmits<{ back: [] }>()
</div>
<span class="overseas-detail-status" :class="{ 'is-live': !pending }" role="status">{{ statusText }}</span>
</header>
<slot name="overview" />
<ContractPendingNotice v-if="pending" :domain="domain" />
<slot />
</AdminPage>
@@ -37,17 +45,11 @@ defineEmits<{ back: [] }>()
<style scoped>
.overseas-detail-page { min-width: 0; }
.overseas-detail-head { display: flex; min-height: 44px; align-items: center; gap: 12px; }
.overseas-detail-title { min-width: 0; flex: 1; }
.overseas-detail-title h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
.overseas-detail-title p { display: flex; min-width: 0; align-items: baseline; gap: 4px; margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
.overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
.overseas-detail-head .overseas-detail-title { min-width: 0; flex: 1; }
.overseas-detail-head .overseas-detail-title h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
.overseas-detail-head .overseas-detail-title p { display: flex; min-width: 0; align-items: baseline; gap: 4px; margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
.overseas-detail-head .overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
.overseas-detail-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 10px; border: 1px solid #f3d19e; border-radius: 999px; background: #fdf6ec; color: #b88230; font-size: 12px; font-weight: 600; white-space: nowrap; }
.overseas-detail-status.is-live { border-color: var(--el-color-success-light-7); background: var(--el-color-success-light-9); color: var(--el-color-success-dark-2); }
.overseas-detail-page.admin-density { background: var(--admin-surface); border: 1px solid var(--cc-border); gap: 0; }
.admin-density .overseas-detail-head { padding: var(--admin-space-3) var(--admin-space-5); gap: var(--admin-space-5); border-bottom: 1px solid var(--cc-border); flex-wrap: wrap; }
.admin-density .overseas-detail-title { display: flex; flex: 0 1 auto; align-items: baseline; flex-wrap: wrap; gap: var(--admin-space-5); }
.admin-density .overseas-detail-title h1 { font-size: var(--admin-font-section); font-weight: 500; }
.admin-density .overseas-detail-title p { margin: 0; font-size: var(--admin-font-caption); }
.admin-density .overseas-detail-title strong { font-size: var(--admin-font-title); overflow-wrap: anywhere; }
.admin-density .overseas-detail-status { font-size: var(--admin-font-caption); }
.overseas-detail-page.admin-density { background: var(--admin-surface); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); gap: 0; }
</style>