履约配置优化

2026-05-03 23:03:21 +08:00
parent 0f0253bffe
commit f07a4f8dcb
27 changed files with 2767 additions and 633 deletions
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import AdminFulfillmentBindingsView from '@/views/admin/AdminFulfillmentBindingsView.vue'
+import AdminKuaishouCloudFulfillmentView from '@/views/admin/AdminKuaishouCloudFulfillmentView.vue'
+
+type FulfillmentTabKey = 'legacy' | 'kuaishou-cloud'
+
+const route = useRoute()
+const router = useRouter()
+const TAB_OPTIONS: Array<{ key: FulfillmentTabKey; label: string; desc: string }> = [
+  {
+    key: 'legacy',
+    label: '旧履约规则',
+    desc: '这里维护原有统一履约绑定，支持腾讯领取、人工发货，以及旧任务匹配逻辑。',
+  },
+  {
+    key: 'kuaishou-cloud',
+    label: '快手 Cloud 新履约',
+    desc: '这里维护快手下单后走 cloudtentacles 绑定、发货、退号的新流程，不会覆盖旧规则。',
+  },
+]
+
+const activeTab = computed<FulfillmentTabKey>({
+  get() {
+    const value = String(route.query.tab || '').trim()
+    return value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
+  },
+  set(value) {
+    const next = value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
+    void router.replace({
+      path: '/admin/platform-fulfillment',
+      query: next === 'legacy' ? {} : { tab: next },
+    })
+  },
+})
+</script>
+
+<template>
+  <section class="hub-panel">
+    <header class="hub-hero">
+      <div>
+        <h1>履约配置中心</h1>
+        <p>旧规则和快手 Cloud 新流程都放在这里维护，不再拆成两个侧边栏入口。</p>
+      </div>
+      <div class="hero-tags">
+        <span>一个入口</span>
+        <span>两套配置并存</span>
+        <span>互不覆盖</span>
+      </div>
+    </header>
+
+    <section class="hub-card">
+      <div class="tab-copy">
+        <h3>{{ TAB_OPTIONS.find((item) => item.key === activeTab)?.label }}</h3>
+        <p>{{ TAB_OPTIONS.find((item) => item.key === activeTab)?.desc }}</p>
+      </div>
+
+      <el-tabs v-model="activeTab" class="hub-tabs">
+        <el-tab-pane label="旧履约规则" name="legacy">
+          <AdminFulfillmentBindingsView />
+        </el-tab-pane>
+        <el-tab-pane label="快手 Cloud 新履约" name="kuaishou-cloud">
+          <AdminKuaishouCloudFulfillmentView />
+        </el-tab-pane>
+      </el-tabs>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.hub-panel {
+  display: grid;
+  gap: 16px;
+}
+
+.hub-hero,
+.hub-card {
+  padding: 20px;
+  border-radius: 24px;
+  border: 1px solid rgba(86, 108, 138, 0.12);
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.hub-hero {
+  display: grid;
+  gap: 14px;
+  background:
+    radial-gradient(circle at top right, rgba(26, 127, 255, 0.1), transparent 26%),
+    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,247,255,.96));
+}
+
+.hub-hero h1,
+.tab-copy h3 {
+  margin: 0;
+  color: #17324d;
+}
+
+.hub-hero p,
+.tab-copy p {
+  margin: 8px 0 0;
+  color: #64748b;
+  line-height: 1.6;
+}
+
+.hero-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.hero-tags span {
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(23, 92, 211, 0.08);
+  color: #175cd3;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.hub-card {
+  display: grid;
+  gap: 16px;
+}
+
+.tab-copy {
+  display: grid;
+  gap: 4px;
+}
+
+:deep(.hub-tabs .el-tabs__content) {
+  padding-top: 12px;
+}
+</style>