新增电子试验主文件目录与文件归档

frontend/src/api/etmf.test.ts

@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+const apiPatch = vi.fn();
+
+vi.mock("./axios", () => ({
+  apiGet,
+  apiPost,
+  apiPatch,
+}));
+
+describe("etmf api", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("uses canonical eTMF URLs", async () => {
+    const { fetchEtmfTree, fetchEtmfNodeDocuments, createEtmfNode, updateEtmfNode, createEtmfDocument } = await import("./etmf");
+
+    fetchEtmfTree("study-1");
+    fetchEtmfNodeDocuments("node-1", { site_id: "site-1" });
+    createEtmfNode({ study_id: "study-1", code: "01", name: "项目管理" });
+    updateEtmfNode("node-1", { name: "项目管理文件" });
+    createEtmfDocument("node-1", {
+      trial_id: "study-1",
+      doc_no: "DOC-001",
+      doc_type: "Protocol",
+      title: "研究方案",
+      scope_type: "GLOBAL",
+    });
+
+    expect(apiGet).toHaveBeenCalledWith("/api/v1/etmf/tree", { params: { study_id: "study-1" } });
+    expect(apiGet).toHaveBeenCalledWith("/api/v1/etmf/nodes/node-1/documents", { params: { site_id: "site-1" } });
+    expect(apiPost).toHaveBeenCalledWith("/api/v1/etmf/nodes", { study_id: "study-1", code: "01", name: "项目管理" });
+    expect(apiPatch).toHaveBeenCalledWith("/api/v1/etmf/nodes/node-1", { name: "项目管理文件" });
+    expect(apiPost).toHaveBeenCalledWith(
+      "/api/v1/etmf/nodes/node-1/documents",
+      expect.objectContaining({ doc_no: "DOC-001" })
+    );
+  });
+});

frontend/src/api/etmf.ts

@@ -0,0 +1,18 @@
+import { apiGet, apiPatch, apiPost } from "./axios";
+import type { DocumentSummary } from "../types/documents";
+import type { EtmfDocumentCreatePayload, EtmfNodeCreatePayload, EtmfNodeUpdatePayload, EtmfTreeNode } from "../types/etmf";
+
+export const fetchEtmfTree = (studyId: string) =>
+  apiGet<EtmfTreeNode[]>("/api/v1/etmf/tree", { params: { study_id: studyId } });
+
+export const fetchEtmfNodeDocuments = (nodeId: string, params: Record<string, any> = {}) =>
+  apiGet<DocumentSummary[]>(`/api/v1/etmf/nodes/${nodeId}/documents`, { params });
+
+export const createEtmfNode = (payload: EtmfNodeCreatePayload) =>
+  apiPost<EtmfTreeNode>("/api/v1/etmf/nodes", payload);
+
+export const updateEtmfNode = (nodeId: string, payload: EtmfNodeUpdatePayload) =>
+  apiPatch<EtmfTreeNode>(`/api/v1/etmf/nodes/${nodeId}`, payload);
+
+export const createEtmfDocument = (nodeId: string, payload: EtmfDocumentCreatePayload) =>
+  apiPost<DocumentSummary>(`/api/v1/etmf/nodes/${nodeId}/documents`, payload);

frontend/src/types/documents.ts

@@ -18,6 +18,7 @@ export interface DocumentSummary {
   id: string;
   trial_id: string;
   site_id?: string | null;
+  etmf_node_id?: string | null;
   doc_type: string;
   title: string;
   scope_type: DocumentScopeType;

frontend/src/types/etmf.ts

@@ -0,0 +1,63 @@
+import type { DocumentScopeType, DocumentSummary } from "./documents";
+
+export type EtmfNodeStatus = "NOT_REQUIRED" | "MISSING" | "UPLOADED" | "EFFECTIVE" | "INACTIVE";
+
+export interface EtmfTreeNode {
+  id: string;
+  study_id: string;
+  parent_id?: string | null;
+  code: string;
+  name: string;
+  description?: string | null;
+  scope_type: DocumentScopeType;
+  required: boolean;
+  expected_doc_type?: string | null;
+  sort_order: number;
+  is_active: boolean;
+  status: EtmfNodeStatus;
+  document_count: number;
+  effective_document_count: number;
+  created_at: string;
+  updated_at: string;
+  children: EtmfTreeNode[];
+}
+
+export interface EtmfNodeCreatePayload {
+  study_id: string;
+  parent_id?: string | null;
+  code: string;
+  name: string;
+  description?: string | null;
+  scope_type?: DocumentScopeType;
+  required?: boolean;
+  expected_doc_type?: string | null;
+  sort_order?: number;
+  is_active?: boolean;
+}
+
+export interface EtmfNodeUpdatePayload {
+  parent_id?: string | null;
+  code?: string;
+  name?: string;
+  description?: string | null;
+  scope_type?: DocumentScopeType;
+  required?: boolean;
+  expected_doc_type?: string | null;
+  sort_order?: number;
+  is_active?: boolean;
+}
+
+export type EtmfDocumentCreatePayload = {
+  trial_id: string;
+  site_id?: string | null;
+  doc_no: string;
+  doc_type: string;
+  title: string;
+  scope_type: DocumentScopeType;
+  owner_id?: string | null;
+  description?: string | null;
+};
+
+export interface EtmfNodeDocumentList {
+  documents: DocumentSummary[];
+}

frontend/src/views/ia/EtmfPlaceholder.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./EtmfPlaceholder.vue"), "utf8");
+
+describe("EtmfPlaceholder", () => {
+  it("renders a functional eTMF workspace instead of the generic placeholder", () => {
+    const source = readSource();
+
+    expect(source).toContain("fetchEtmfTree");
+    expect(source).toContain("fetchEtmfNodeDocuments");
+    expect(source).toContain("createEtmfDocument");
+    expect(source).toContain("etmf-tree-panel");
+    expect(source).toContain("etmf-document-table");
+    expect(source).toContain("etmf-node-detail");
+    expect(source).toContain("selectedNode");
+    expect(source).toContain("statusType");
+    expect(source).not.toContain("ModulePlaceholder");
+  });
+});

frontend/src/views/ia/EtmfPlaceholder.vue

@@ -1,13 +1,847 @@
 <template>
-  <ModulePlaceholder
-    :title="TEXT.modules.etmf.title"
-    :subtitle="TEXT.modules.etmf.subtitle"
-    :list-title="TEXT.modules.etmf.listTitle"
-    :empty-description="TEXT.modules.etmf.emptyDescription"
-  />
+  <div class="page ctms-page-shell page--flush">
+    <div class="main-content-flat unified-shell">
+      <div class="filter-container unified-action-bar bar--flush etmf-action-bar">
+        <div class="etmf-toolbar">
+          <div class="etmf-toolbar-main">
+            <div class="etmf-filter-item">
+            <el-select v-model="filters.siteId" :placeholder="TEXT.common.fields.site" clearable filterable class="filter-select-comp" @change="loadNodeDocuments">
+              <template #prefix>
+                <el-icon><OfficeBuilding /></el-icon>
+              </template>
+              <el-option :label="TEXT.common.labels.allSites" value="" />
+              <el-option v-for="site in siteOptions" :key="site.id" :label="site.name" :value="site.id" />
+            </el-select>
+          </div>
+            <div class="etmf-filter-item">
+            <el-select v-model="filters.status" :placeholder="TEXT.common.fields.status" clearable class="filter-select-comp">
+              <template #prefix>
+                <el-icon><CircleCheck /></el-icon>
+              </template>
+              <el-option :label="TEXT.common.labels.all" value="" />
+              <el-option v-for="option in statusOptions" :key="option.value" :label="option.label" :value="option.value" />
+            </el-select>
+          </div>
+          </div>
+          <div class="etmf-toolbar-actions">
+            <el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
+            <el-button :icon="Refresh" @click="load">{{ TEXT.common.actions.refresh }}</el-button>
+            <el-button :disabled="!canCreate" @click="openNodeDialog">
+              <el-icon class="el-icon--left"><FolderAdd /></el-icon>
+              {{ TEXT.modules.etmf.actions.newNode }}
+            </el-button>
+            <el-button type="primary" :disabled="!canCreate || !selectedNode" @click="openDocumentDialog">
+              <el-icon class="el-icon--left"><DocumentAdd /></el-icon>
+              {{ TEXT.modules.etmf.actions.newDocument }}
+            </el-button>
+          </div>
+        </div>
+        <div class="etmf-status-strip">
+          <div v-for="card in overviewCards" :key="card.key" class="etmf-status-card" :class="`etmf-status-card--${card.key}`">
+            <div class="status-card-value">{{ card.value }}</div>
+            <div class="status-card-label">{{ card.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <section class="unified-section section--flush etmf-workspace">
+        <aside class="etmf-tree-panel">
+          <div class="panel-heading panel-heading--compact">
+            <div>
+              <div class="panel-title">{{ TEXT.modules.etmf.treeTitle }}</div>
+              <div class="panel-subtitle">{{ totalNodeCount }} 个目录节点</div>
+            </div>
+          </div>
+          <div v-if="!filteredTree.length && !treeLoading" class="etmf-empty-block etmf-empty-block--tree">
+            <div class="empty-icon">
+              <el-icon><FolderAdd /></el-icon>
+            </div>
+            <div class="empty-title">暂无 TMF 目录</div>
+            <div class="empty-desc">先建立项目归档目录，再在目录下归档文件。</div>
+            <el-button v-if="canCreate" size="small" type="primary" @click="openNodeDialog">{{ TEXT.modules.etmf.actions.newNode }}</el-button>
+          </div>
+          <el-tree
+            v-else
+            v-loading="treeLoading"
+            :data="filteredTree"
+            node-key="id"
+            :props="treeProps"
+            default-expand-all
+            highlight-current
+            class="etmf-tree"
+            @node-click="selectNode"
+          >
+            <template #default="{ data }">
+              <div class="tree-node-row">
+                <span class="tree-node-code">{{ data.code }}</span>
+                <span class="tree-node-name">{{ data.name }}</span>
+                <span class="tree-node-count">{{ data.document_count }}</span>
+                <el-tag size="small" effect="plain" :type="statusType(data.status)">
+                  {{ statusLabel(data.status) }}
+                </el-tag>
+              </div>
+            </template>
+          </el-tree>
+        </aside>
+
+        <main class="etmf-document-panel">
+          <div class="panel-heading">
+            <div>
+              <div class="panel-title">{{ selectedNode?.name || TEXT.modules.etmf.noNodeSelected }}</div>
+              <div class="panel-subtitle">
+                {{ selectedNode ? `${selectedNode.code} · ${scopeLabel(selectedNode.scope_type)}` : TEXT.modules.etmf.selectNodeHint }}
+              </div>
+            </div>
+            <div v-if="selectedNode" class="document-panel-meta">
+              <span>{{ selectedNode.document_count }} 份文件</span>
+              <span>{{ selectedNode.effective_document_count }} 个生效版本</span>
+              <el-tag effect="plain" :type="statusType(selectedNode.status)">
+                {{ statusLabel(selectedNode.status) }}
+              </el-tag>
+            </div>
+          </div>
+
+          <el-table
+            :data="documents"
+            v-loading="documentLoading"
+            class="ctms-table etmf-document-table"
+            table-layout="fixed"
+            @row-click="goDocument"
+          >
+            <el-table-column prop="title" :label="TEXT.modules.fileVersionManagement.columns.title" show-overflow-tooltip />
+            <el-table-column prop="doc_type" :label="TEXT.modules.fileVersionManagement.columns.docType" width="140">
+              <template #default="{ row }">
+                <el-tag effect="plain" type="info">{{ displayText(row.doc_type, TEXT.enums.documentType) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="TEXT.modules.fileVersionManagement.columns.site" width="160" show-overflow-tooltip>
+              <template #default="{ row }">{{ displaySite(row.site_id) }}</template>
+            </el-table-column>
+            <el-table-column :label="TEXT.modules.fileVersionManagement.columns.currentVersion" width="120">
+              <template #default="{ row }">
+                <span v-if="row.current_effective_version">{{ row.current_effective_version.version_no }}</span>
+                <span v-else class="text-secondary">{{ TEXT.common.fallback }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="updated_at" :label="TEXT.common.labels.updatedAt" width="150">
+              <template #default="{ row }">{{ formatDate(row.updated_at) }}</template>
+            </el-table-column>
+            <template #empty>
+              <div class="etmf-empty-block etmf-empty-block--documents">
+                <div class="empty-icon">
+                  <el-icon><DocumentAdd /></el-icon>
+                </div>
+                <div class="empty-title">{{ selectedNode ? TEXT.modules.etmf.emptyDocuments : TEXT.modules.etmf.selectNodeHint }}</div>
+                <div class="empty-desc">{{ selectedNode ? "当前目录下还没有归档文件。" : "选择目录后可查看文件、版本与中心范围。" }}</div>
+                <el-button v-if="selectedNode && canCreate" size="small" type="primary" @click.stop="openDocumentDialog">
+                  {{ TEXT.modules.etmf.actions.newDocument }}
+                </el-button>
+              </div>
+            </template>
+          </el-table>
+        </main>
+
+        <aside class="etmf-node-detail">
+          <div class="panel-title">{{ TEXT.modules.etmf.detailTitle }}</div>
+          <template v-if="selectedNode">
+            <dl class="node-meta">
+              <div>
+                <dt>{{ TEXT.modules.etmf.fields.code }}</dt>
+                <dd>{{ selectedNode.code }}</dd>
+              </div>
+              <div>
+                <dt>{{ TEXT.modules.etmf.fields.scope }}</dt>
+                <dd>{{ scopeLabel(selectedNode.scope_type) }}</dd>
+              </div>
+              <div>
+                <dt>{{ TEXT.modules.etmf.fields.required }}</dt>
+                <dd>{{ selectedNode.required ? TEXT.common.labels.yes : TEXT.common.labels.no }}</dd>
+              </div>
+              <div>
+                <dt>{{ TEXT.modules.etmf.fields.documentCount }}</dt>
+                <dd>{{ selectedNode.document_count }}</dd>
+              </div>
+              <div>
+                <dt>{{ TEXT.modules.etmf.fields.effectiveCount }}</dt>
+                <dd>{{ selectedNode.effective_document_count }}</dd>
+              </div>
+            </dl>
+            <div class="node-status-note" :class="`node-status-note--${selectedNode.status.toLowerCase()}`">
+              {{ statusDescription(selectedNode.status) }}
+            </div>
+          </template>
+          <div v-else class="etmf-empty-block etmf-empty-block--detail">
+            <div class="empty-icon">
+              <el-icon><CircleCheck /></el-icon>
+            </div>
+            <div class="empty-title">等待选择目录</div>
+            <div class="empty-desc">{{ TEXT.modules.etmf.selectNodeHint }}</div>
+          </div>
+        </aside>
+      </section>
+    </div>
+
+    <el-dialog v-model="nodeDialogVisible" :title="TEXT.modules.etmf.dialog.nodeTitle" width="520px" destroy-on-close class="ctms-dialog">
+      <el-form :model="nodeForm" label-width="96px" class="ctms-form">
+        <el-form-item :label="TEXT.modules.etmf.fields.parent">
+          <el-input :model-value="selectedNode?.name || TEXT.modules.etmf.rootNode" disabled />
+        </el-form-item>
+        <el-form-item :label="TEXT.modules.etmf.fields.code">
+          <el-input v-model="nodeForm.code" />
+        </el-form-item>
+        <el-form-item :label="TEXT.modules.etmf.fields.name">
+          <el-input v-model="nodeForm.name" />
+        </el-form-item>
+        <el-form-item :label="TEXT.modules.etmf.fields.scope">
+          <el-select v-model="nodeForm.scope_type" style="width: 100%">
+            <el-option :label="TEXT.enums.scopeType.GLOBAL" value="GLOBAL" />
+            <el-option :label="TEXT.enums.scopeType.SITE" value="SITE" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="TEXT.modules.etmf.fields.required">
+          <el-switch v-model="nodeForm.required" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="nodeDialogVisible = false">{{ TEXT.common.actions.cancel }}</el-button>
+        <el-button type="primary" :loading="savingNode" @click="submitNode">{{ TEXT.common.actions.confirm }}</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="documentDialogVisible" :title="TEXT.modules.etmf.dialog.documentTitle" width="560px" destroy-on-close class="ctms-dialog">
+      <el-form :model="documentForm" label-width="96px" class="ctms-form">
+        <el-form-item :label="TEXT.modules.etmf.fields.node">
+          <el-input :model-value="selectedNode?.name || TEXT.common.fallback" disabled />
+        </el-form-item>
+        <el-form-item :label="TEXT.modules.fileVersionManagement.fields.docNo">
+          <el-input v-model="documentForm.doc_no" />
+        </el-form-item>
+        <el-form-item :label="TEXT.modules.fileVersionManagement.fields.title">
+          <el-input v-model="documentForm.title" />
+        </el-form-item>
+        <el-form-item :label="TEXT.modules.fileVersionManagement.fields.docType">
+          <el-select v-model="documentForm.doc_type" style="width: 100%">
+            <el-option v-for="item in docTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="selectedNode?.scope_type === 'SITE'" :label="TEXT.common.fields.site">
+          <el-select v-model="documentForm.site_id" filterable style="width: 100%">
+            <el-option v-for="site in siteOptions" :key="site.id" :label="site.name" :value="site.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="documentDialogVisible = false">{{ TEXT.common.actions.cancel }}</el-button>
+        <el-button type="primary" :loading="savingDocument" @click="submitDocument">{{ TEXT.common.actions.confirm }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-import ModulePlaceholder from "../../components/ModulePlaceholder.vue";
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { CircleCheck, DocumentAdd, FolderAdd, OfficeBuilding, Refresh } from "@element-plus/icons-vue";
+import { createEtmfDocument, createEtmfNode, fetchEtmfNodeDocuments, fetchEtmfTree } from "../../api/etmf";
+import { fetchSites } from "../../api/sites";
 import { TEXT } from "../../locales";
+import { useStudyStore } from "../../store/study";
+import type { DocumentScopeType, DocumentSummary } from "../../types/documents";
+import type { EtmfNodeStatus, EtmfTreeNode } from "../../types/etmf";
+import { displayText } from "../../utils/display";
+import { usePermission } from "../../utils/permission";
+
+const router = useRouter();
+const study = useStudyStore();
+const { can } = usePermission();
+const treeLoading = ref(false);
+const documentLoading = ref(false);
+const savingNode = ref(false);
+const savingDocument = ref(false);
+const tree = ref<EtmfTreeNode[]>([]);
+const documents = ref<DocumentSummary[]>([]);
+const selectedNode = ref<EtmfTreeNode | null>(null);
+const siteOptions = ref<Array<{ id: string; name: string }>>([]);
+const nodeDialogVisible = ref(false);
+const documentDialogVisible = ref(false);
+const filters = reactive({
+  siteId: study.currentSite?.id || "",
+  status: "",
+});
+
+const nodeForm = reactive({
+  code: "",
+  name: "",
+  scope_type: "GLOBAL" as DocumentScopeType,
+  required: false,
+});
+
+const documentForm = reactive({
+  doc_no: "",
+  title: "",
+  doc_type: "",
+  site_id: "",
+});
+
+const treeProps = { label: "name", children: "children" };
+const canCreate = computed(() => can("documents.create"));
+const studyId = computed(() => study.currentStudy?.id || "");
+const statusOptions = computed(() =>
+  Object.entries(TEXT.modules.etmf.status).map(([value, label]) => ({ value, label }))
+);
+const docTypeOptions = Object.entries(TEXT.enums.documentType).map(([value, label]) => ({ value, label }));
+const siteMap = computed(() =>
+  siteOptions.value.reduce((acc: Record<string, string>, site) => {
+    acc[site.id] = site.name;
+    return acc;
+  }, {})
+);
+
+const flattenNodes = (nodes: EtmfTreeNode[]): EtmfTreeNode[] =>
+  nodes.flatMap((node) => [node, ...flattenNodes(node.children || [])]);
+const flatNodes = computed(() => flattenNodes(tree.value));
+const totalNodeCount = computed(() => flatNodes.value.length);
+const overviewCards = computed(() => [
+  { key: "nodes", label: "目录", value: totalNodeCount.value },
+  { key: "missing", label: TEXT.modules.etmf.status.MISSING, value: flatNodes.value.filter((node) => node.status === "MISSING").length },
+  { key: "uploaded", label: TEXT.modules.etmf.status.UPLOADED, value: flatNodes.value.filter((node) => node.status === "UPLOADED").length },
+  { key: "effective", label: TEXT.modules.etmf.status.EFFECTIVE, value: flatNodes.value.filter((node) => node.status === "EFFECTIVE").length },
+]);
+
+const filterTreeByStatus = (nodes: EtmfTreeNode[]): EtmfTreeNode[] => {
+  if (!filters.status) return nodes;
+  return nodes
+    .map((node) => {
+      const children = filterTreeByStatus(node.children || []);
+      if (node.status === filters.status || children.length) {
+        return { ...node, children };
+      }
+      return null;
+    })
+    .filter((node): node is EtmfTreeNode => !!node);
+};
+
+const filteredTree = computed(() => filterTreeByStatus(tree.value));
+
+const firstNode = (nodes: EtmfTreeNode[]): EtmfTreeNode | null => {
+  for (const node of nodes) {
+    return node;
+  }
+  return null;
+};
+
+const statusLabel = (status: EtmfNodeStatus) => TEXT.modules.etmf.status[status] || status;
+const statusType = (status: EtmfNodeStatus) => {
+  if (status === "EFFECTIVE") return "success";
+  if (status === "MISSING") return "danger";
+  if (status === "UPLOADED") return "warning";
+  if (status === "INACTIVE") return "info";
+  return "";
+};
+const statusDescription = (status: EtmfNodeStatus) => TEXT.modules.etmf.statusDescriptions[status] || "";
+const scopeLabel = (scope: DocumentScopeType) => TEXT.enums.scopeType[scope] || scope;
+const displaySite = (siteId?: string | null) => (siteId ? siteMap.value[siteId] || siteId : TEXT.common.fallback);
+const formatDate = (value?: string | null) => (value ? value.slice(0, 10) : TEXT.common.fallback);
+
+const loadSites = async () => {
+  if (!studyId.value) return;
+  try {
+    const { data } = await fetchSites(studyId.value, { limit: 500 });
+    siteOptions.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    siteOptions.value = [];
+  }
+};
+
+const loadNodeDocuments = async () => {
+  if (!selectedNode.value) {
+    documents.value = [];
+    return;
+  }
+  documentLoading.value = true;
+  try {
+    const params = filters.siteId ? { site_id: filters.siteId } : {};
+    const { data } = await fetchEtmfNodeDocuments(selectedNode.value.id, params);
+    documents.value = Array.isArray(data) ? data : [];
+  } catch (e: any) {
+    documents.value = [];
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+  } finally {
+    documentLoading.value = false;
+  }
+};
+
+const loadTree = async () => {
+  if (!studyId.value) return;
+  treeLoading.value = true;
+  try {
+    const { data } = await fetchEtmfTree(studyId.value);
+    tree.value = data || [];
+    selectedNode.value = selectedNode.value
+      ? findNode(tree.value, selectedNode.value.id) || firstNode(tree.value)
+      : firstNode(tree.value);
+    await loadNodeDocuments();
+  } catch (e: any) {
+    tree.value = [];
+    selectedNode.value = null;
+    documents.value = [];
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+  } finally {
+    treeLoading.value = false;
+  }
+};
+
+const findNode = (nodes: EtmfTreeNode[], id: string): EtmfTreeNode | null => {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    const matched = findNode(node.children || [], id);
+    if (matched) return matched;
+  }
+  return null;
+};
+
+const load = async () => {
+  await loadSites();
+  await loadTree();
+};
+
+const selectNode = async (node: EtmfTreeNode) => {
+  selectedNode.value = node;
+  await loadNodeDocuments();
+};
+
+const resetFilters = () => {
+  filters.siteId = "";
+  filters.status = "";
+  loadNodeDocuments();
+};
+
+const openNodeDialog = () => {
+  nodeForm.code = "";
+  nodeForm.name = "";
+  nodeForm.scope_type = selectedNode.value?.scope_type || "GLOBAL";
+  nodeForm.required = false;
+  nodeDialogVisible.value = true;
+};
+
+const submitNode = async () => {
+  if (!studyId.value || !nodeForm.code.trim() || !nodeForm.name.trim()) {
+    ElMessage.warning(TEXT.common.messages.required);
+    return;
+  }
+  savingNode.value = true;
+  try {
+    await createEtmfNode({
+      study_id: studyId.value,
+      parent_id: selectedNode.value?.id || null,
+      code: nodeForm.code.trim(),
+      name: nodeForm.name.trim(),
+      scope_type: nodeForm.scope_type,
+      required: nodeForm.required,
+    });
+    nodeDialogVisible.value = false;
+    await loadTree();
+    ElMessage.success(TEXT.common.messages.createSuccess);
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
+  } finally {
+    savingNode.value = false;
+  }
+};
+
+const openDocumentDialog = () => {
+  if (!selectedNode.value) return;
+  documentForm.doc_no = "";
+  documentForm.title = "";
+  documentForm.doc_type = selectedNode.value.expected_doc_type || "";
+  documentForm.site_id = filters.siteId || "";
+  documentDialogVisible.value = true;
+};
+
+const submitDocument = async () => {
+  if (!studyId.value || !selectedNode.value || !documentForm.doc_no.trim() || !documentForm.title.trim() || !documentForm.doc_type) {
+    ElMessage.warning(TEXT.common.messages.required);
+    return;
+  }
+  if (selectedNode.value.scope_type === "SITE" && !documentForm.site_id) {
+    ElMessage.warning(TEXT.modules.etmf.messages.siteRequired);
+    return;
+  }
+  savingDocument.value = true;
+  try {
+    await createEtmfDocument(selectedNode.value.id, {
+      trial_id: studyId.value,
+      site_id: selectedNode.value.scope_type === "SITE" ? documentForm.site_id : null,
+      doc_no: documentForm.doc_no.trim(),
+      doc_type: documentForm.doc_type,
+      title: documentForm.title.trim(),
+      scope_type: selectedNode.value.scope_type,
+    });
+    documentDialogVisible.value = false;
+    await loadTree();
+    ElMessage.success(TEXT.common.messages.createSuccess);
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
+  } finally {
+    savingDocument.value = false;
+  }
+};
+
+const goDocument = (row: DocumentSummary) => {
+  if (row?.id) router.push(`/documents/${row.id}`);
+};
+
+watch(
+  () => study.currentSite,
+  (site) => {
+    filters.siteId = site?.id || "";
+    loadNodeDocuments();
+  }
+);
+
+watch(studyId, load);
+
+onMounted(load);
 </script>
+
+<style scoped>
+.etmf-action-bar {
+  display: grid;
+  gap: 12px;
+  padding: 14px 20px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--ctms-border-light);
+}
+
+.etmf-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  width: 100%;
+}
+
+.etmf-toolbar-main,
+.etmf-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.etmf-toolbar-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.etmf-filter-item {
+  width: 240px;
+  min-width: 180px;
+}
+
+.etmf-filter-item :deep(.el-select) {
+  width: 100%;
+}
+
+.etmf-status-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(120px, 1fr));
+  gap: 10px;
+}
+
+.etmf-status-card {
+  min-height: 64px;
+  display: grid;
+  align-content: center;
+  gap: 2px;
+  padding: 10px 14px;
+  border: 1px solid #e4eaf2;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+}
+
+.status-card-value {
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 750;
+  color: #172033;
+}
+
+.status-card-label {
+  font-size: 12px;
+  color: #68758a;
+}
+
+.etmf-status-card--missing .status-card-value {
+  color: #c24141;
+}
+
+.etmf-status-card--uploaded .status-card-value {
+  color: #b7791f;
+}
+
+.etmf-status-card--effective .status-card-value {
+  color: #24764b;
+}
+
+.etmf-workspace {
+  display: grid;
+  grid-template-columns: minmax(280px, 340px) minmax(520px, 1fr) minmax(260px, 320px);
+  min-height: calc(100vh - 260px);
+  border-top: 0;
+  background: #fff;
+}
+
+.etmf-tree-panel,
+.etmf-document-panel,
+.etmf-node-detail {
+  min-width: 0;
+  padding: 16px;
+}
+
+.etmf-tree-panel {
+  border-right: 1px solid var(--ctms-border-light);
+  background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
+}
+
+.etmf-document-panel {
+  border-right: 1px solid var(--ctms-border-light);
+  background: #fff;
+}
+
+.panel-heading {
+  min-height: 48px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.panel-heading--compact {
+  min-height: 38px;
+  margin-bottom: 10px;
+}
+
+.panel-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+}
+
+.panel-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+}
+
+.etmf-tree {
+  --el-tree-node-hover-bg-color: #eef4ff;
+  background: transparent;
+  padding-top: 2px;
+}
+
+.etmf-tree :deep(.el-tree-node__content) {
+  height: 34px;
+  border-radius: 7px;
+  margin: 2px 0;
+}
+
+.etmf-tree :deep(.is-current > .el-tree-node__content) {
+  background: #eaf2ff;
+  box-shadow: inset 3px 0 0 #4f7ecf;
+}
+
+.tree-node-row {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr) 28px max-content;
+  align-items: center;
+  gap: 8px;
+  padding-right: 8px;
+}
+
+.tree-node-code {
+  font-size: 12px;
+  font-weight: 700;
+  color: #315f9f;
+}
+
+.tree-node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ctms-text-main);
+}
+
+.tree-node-count {
+  height: 20px;
+  min-width: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #edf2f7;
+  color: #526174;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.document-panel-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  font-size: 12px;
+  color: #69778d;
+}
+
+.etmf-document-table {
+  width: 100%;
+}
+
+.node-meta {
+  display: grid;
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.node-meta div {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: 10px;
+}
+
+.node-meta dt {
+  color: var(--ctms-text-secondary);
+}
+
+.node-meta dd {
+  min-width: 0;
+  margin: 0;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  overflow-wrap: anywhere;
+}
+
+.node-status-note {
+  border-left: 3px solid #8aa0bd;
+  background: #f6f8fb;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--ctms-text-main);
+}
+
+.node-status-note--effective {
+  border-left-color: #2f8f5b;
+}
+
+.node-status-note--missing {
+  border-left-color: #c84646;
+}
+
+.node-status-note--uploaded {
+  border-left-color: #c58b20;
+}
+
+.etmf-empty-block {
+  min-height: 168px;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  padding: 22px;
+  text-align: center;
+  color: #7b8797;
+}
+
+.etmf-empty-block--tree {
+  min-height: 280px;
+  border: 1px dashed #d8e0eb;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.etmf-empty-block--documents {
+  min-height: 420px;
+}
+
+.etmf-empty-block--detail {
+  min-height: 280px;
+}
+
+.empty-icon {
+  width: 44px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background: #eef3f9;
+  color: #6b7c91;
+  font-size: 22px;
+}
+
+.empty-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #2f3a4c;
+}
+
+.empty-desc {
+  max-width: 320px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: #7b8797;
+}
+
+@media (max-width: 1180px) {
+  .etmf-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .etmf-toolbar-actions {
+    justify-content: flex-start;
+  }
+
+  .etmf-workspace {
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+  }
+
+  .etmf-node-detail {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--ctms-border-light);
+  }
+}
+
+@media (max-width: 760px) {
+  .etmf-status-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .etmf-toolbar-main {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .etmf-filter-item {
+    width: 100%;
+  }
+
+  .etmf-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .etmf-tree-panel,
+  .etmf-document-panel {
+    border-right: 0;
+    border-bottom: 1px solid var(--ctms-border-light);
+  }
+}
+</style>