From 70c92fb33f2dd9c4cf1906462505ebcf8bde493e Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Wed, 7 Oct 2026 12:14:36 +0800
Subject: [PATCH] feat(web-admin): add UnifiedProtocolPage shell with
 cell-storage and research-donation tabs.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../protocol-audit/UnifiedProtocolPage.vue    | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 web-admin/src/views/cell-storage/protocol-audit/UnifiedProtocolPage.vue

diff --git a/web-admin/src/views/cell-storage/protocol-audit/UnifiedProtocolPage.vue b/web-admin/src/views/cell-storage/protocol-audit/UnifiedProtocolPage.vue
new file mode 100644
index 00000000..b2d130ea
--- /dev/null
+++ b/web-admin/src/views/cell-storage/protocol-audit/UnifiedProtocolPage.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="unified-protocol-page">
+    <div class="panel-pill-tabs panel-pill-tabs--lg">
+      <div class="panel-pill-tabs__track" role="tablist" aria-label="协议来源">
+        <button
+          v-for="item in tabs"
+          :key="item.key"
+          type="button"
+          role="tab"
+          class="panel-pill-tabs__btn"
+          :class="{ 'is-active': activeSource === item.key }"
+          :aria-selected="activeSource === item.key"
+          @click="switchSource(item.key)"
+        >
+          {{ item.title }}
+        </button>
+      </div>
+    </div>
+
+    <!-- v-if：仅挂载当前 Tab，避免双列表同时请求 -->
+    <ProtocolAuditTab v-if="activeSource === 'cell_storage'" />
+    <DonationProtocolTab v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import ProtocolAuditTab from './ProtocolAuditTab.vue'
+  import DonationProtocolTab from './DonationProtocolTab.vue'
+
+  defineOptions({ name: 'UnifiedProtocolPage' })
+
+  const props = defineProps<{
+    defaultSource: 'cell_storage' | 'research_donation'
+  }>()
+
+  type SourceKey = 'cell_storage' | 'research_donation'
+
+  const tabs: Array<{ key: SourceKey; title: string }> = [
+    { key: 'cell_storage', title: '细胞存储' },
+    { key: 'research_donation', title: '科研捐赠' }
+  ]
+
+  const route = useRoute()
+  const router = useRouter()
+  const activeSource = ref<SourceKey>(props.defaultSource)
+
+  function switchSource(key: SourceKey) {
+    if (activeSource.value === key) return
+    activeSource.value = key
+    router.replace({ query: { ...route.query, tab: key } })
+  }
+
+  onMounted(() => {
+    const tab = String(route.query.tab || '')
+    if (tab === 'cell_storage' || tab === 'research_donation') {
+      activeSource.value = tab
+      return
+    }
+    activeSource.value = props.defaultSource
+  })
+</script>