优化

2026-08-19 16:45:51 +08:00
parent d1de19dc82
commit 65cd9ecefa
79 changed files with 3397 additions and 38 deletions
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import AppDialog from '@/shared/components/AppDialog.vue'
+
+withDefaults(defineProps<{
+  title: string
+  width: string
+  domain: string
+  confirmText?: string
+}>(), {
+  confirmText: '保存',
+})
+
+const open = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <AppDialog v-model="open" :title="title" :width="width" :confirm-text="confirmText" confirm-disabled>
+    <el-alert type="warning" :closable="false" show-icon :title="`${domain}写接口待接入`">
+      <p>弹框按原型保留字段与尺寸；端点、状态机和幂等契约冻结前不可提交，也不会在本地模拟保存成功。</p>
+    </el-alert>
+    <div class="pending-form"><slot /></div>
+  </AppDialog>
+</template>
+
+<style scoped>
+.pending-form { margin-top: 16px; }
+.pending-form :deep(.el-select), .pending-form :deep(.el-input-number) { width: 100%; }
+.pending-form :deep(.el-alert p) { margin: 0; }
+</style>
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ domain: string }>()
+</script>
+
+<template>
+  <el-alert class="contract-pending" type="warning" :closable="false" show-icon>
+    <template #title>{{ domain }}海外区域接口待接入</template>
+    <p>页面已按四期原型冻结字段与布局；在海外 API、Token 与权限资源补齐前，不展示演示数据，也不会模拟查询或写操作成功。</p>
+  </el-alert>
+</template>
+
+<style scoped>
+.contract-pending p { margin: 5px 0 0; color: var(--el-text-color-regular); font-size: 13px; line-height: 1.55; }
+</style>
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ArrowLeft } from '@lucide/vue'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import ContractPendingNotice from './ContractPendingNotice.vue'
+
+defineProps<{
+  title: string
+  referenceLabel: string
+  referenceValue: string
+  backLabel: string
+  domain: string
+}>()
+
+defineEmits<{ back: [] }>()
+</script>
+
+<template>
+  <AdminPage as="div" class="overseas-detail-page">
+    <header class="overseas-detail-head">
+      <el-button :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回</el-button>
+      <div class="overseas-detail-title">
+        <h1>{{ title }}</h1>
+        <p>{{ referenceLabel }} <strong>{{ referenceValue }}</strong></p>
+      </div>
+      <span class="overseas-detail-status" role="status">接口待接入</span>
+    </header>
+
+    <ContractPendingNotice :domain="domain" />
+    <slot />
+  </AdminPage>
+</template>
+
+<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 { margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
+.overseas-detail-title strong { color: var(--cc-text); overflow-wrap: anywhere; }
+.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; }
+</style>
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import OverseasDetailShell from './OverseasDetailShell.vue'
+
+interface DetailGroup {
+  title: string
+  fields: string[]
+}
+
+defineProps<{
+  title: string
+  referenceLabel: string
+  referenceValue: string
+  backLabel: string
+  domain: string
+  groups: DetailGroup[]
+}>()
+
+defineEmits<{ back: [] }>()
+</script>
+
+<template>
+  <OverseasDetailShell
+    :title="title"
+    :reference-label="referenceLabel"
+    :reference-value="referenceValue"
+    :back-label="backLabel"
+    :domain="domain"
+    @back="$emit('back')"
+  >
+    <section class="read-only-detail" :aria-label="title">
+      <section v-for="group in groups" :key="group.title" class="detail-group" :aria-label="group.title">
+        <h2>{{ group.title }}</h2>
+        <dl class="detail-fields"><div v-for="field in group.fields" :key="field"><dt>{{ field }}</dt><dd>—</dd></div></dl>
+      </section>
+    </section>
+  </OverseasDetailShell>
+</template>
+
+<style scoped>
+.read-only-detail { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--cc-border); background: #fff; }
+.detail-group { min-width: 0; padding: 16px 18px 18px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
+.detail-group:nth-child(even) { border-right: 0; }
+.detail-group h2 { margin: 0 0 12px; color: var(--cc-text); font-size: 15px; }
+.detail-fields { margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
+.detail-fields > div { display: grid; min-width: 0; min-height: 46px; grid-template-columns: 126px minmax(0, 1fr); border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
+.detail-fields dt, .detail-fields dd { display: flex; min-width: 0; align-items: center; padding: 8px 10px; }
+.detail-fields dt { background: #f8fafc; color: var(--cc-muted); font-size: 12px; }
+.detail-fields dd { margin: 0; color: var(--cc-text); overflow-wrap: anywhere; }
+</style>