费用管理内容优化-初步

2026-01-13 16:49:55 +08:00
parent 0c7c03069a
commit 1db36f40b0
43 changed files with 5229 additions and 26 deletions
@@ -0,0 +1,32 @@
+import { apiDelete, apiGet, apiPost } from "./axios";
+import type { FeeApiResponse } from "../types/api";
+
+export const listFeeAttachments = (entityType: string, entityId: string) =>
+  apiGet<FeeApiResponse<any[]>>("/api/v1/fees/attachments", { params: { entity_type: entityType, entity_id: entityId } });
+
+export const uploadFeeAttachment = (
+  entityType: string,
+  entityId: string,
+  fileType: string,
+  file: File,
+  options?: Record<string, any>
+) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("entity_type", entityType);
+  formData.append("entity_id", entityId);
+  formData.append("file_type", fileType);
+  return apiPost<FeeApiResponse<any>>("/api/v1/fees/attachments", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+    ...options,
+  });
+};
+
+export const deleteFeeAttachment = (attachmentId: string) => apiDelete(`/api/v1/fees/attachments/${attachmentId}`);
+
+export const getFeeAttachmentDownloadUrl = (attachmentId: string) => {
+  const token = localStorage.getItem("ctms_token");
+  return token
+    ? `/api/v1/fees/attachments/${attachmentId}/download?token=${token}`
+    : `/api/v1/fees/attachments/${attachmentId}/download`;
+};
@@ -0,0 +1,50 @@
+import { apiDelete, apiGet, apiPatch, apiPost } from "./axios";
+import type { FeeApiResponse } from "../types/api";
+
+export interface ContractFeePayload {
+  project_id: string;
+  center_id: string;
+  contract_amount: number;
+  contract_cases: number;
+  actual_cases?: number | null;
+  settlement_amount?: number | null;
+  final_payment_amount?: number | null;
+}
+
+export interface ContractFeeUpdatePayload {
+  contract_amount?: number;
+  contract_cases?: number;
+  actual_cases?: number | null;
+  settlement_amount?: number | null;
+  final_payment_amount?: number | null;
+}
+
+export interface ContractPaymentPayload {
+  amount: number;
+  paid_date?: string | null;
+  verified_date?: string | null;
+  is_paid?: boolean;
+  is_verified?: boolean;
+  remark?: string | null;
+}
+
+export const listContractFees = (params: { projectId: string; centerId?: string; q?: string }) =>
+  apiGet<FeeApiResponse<any[]>>("/api/v1/fees/contracts", { params });
+
+export const getContractFee = (contractId: string) => apiGet<FeeApiResponse<any>>(`/api/v1/fees/contracts/${contractId}`);
+
+export const createContractFee = (payload: ContractFeePayload) =>
+  apiPost<FeeApiResponse<any>>("/api/v1/fees/contracts", payload);
+
+export const updateContractFee = (contractId: string, payload: ContractFeeUpdatePayload) =>
+  apiPatch<FeeApiResponse<any>>(`/api/v1/fees/contracts/${contractId}`, payload);
+
+export const deleteContractFee = (contractId: string) => apiDelete(`/api/v1/fees/contracts/${contractId}`);
+
+export const createContractPayment = (contractId: string, payload: ContractPaymentPayload) =>
+  apiPost<FeeApiResponse<any>>(`/api/v1/fees/contracts/${contractId}/payments`, payload);
+
+export const updateContractPayment = (paymentId: string, payload: ContractPaymentPayload) =>
+  apiPatch<FeeApiResponse<any>>(`/api/v1/fees/payments/${paymentId}`, payload);
+
+export const deleteContractPayment = (paymentId: string) => apiDelete(`/api/v1/fees/payments/${paymentId}`);
@@ -0,0 +1,45 @@
+import { apiDelete, apiGet, apiPatch, apiPost } from "./axios";
+import type { FeeApiResponse } from "../types/api";
+
+export interface SpecialExpensePayload {
+  project_id: string;
+  center_id?: string | null;
+  category: string;
+  amount: number;
+  happen_date?: string | null;
+  description?: string | null;
+  is_paid?: boolean;
+  paid_date?: string | null;
+  is_verified?: boolean;
+  verified_date?: string | null;
+}
+
+export interface SpecialExpenseUpdatePayload {
+  center_id?: string | null;
+  category?: string;
+  amount?: number;
+  happen_date?: string | null;
+  description?: string | null;
+  is_paid?: boolean;
+  paid_date?: string | null;
+  is_verified?: boolean;
+  verified_date?: string | null;
+}
+
+export const listSpecialExpenses = (params: {
+  projectId: string;
+  centerId?: string;
+  category?: string;
+  dateFrom?: string;
+  dateTo?: string;
+}) => apiGet<FeeApiResponse<any[]>>("/api/v1/fees/special", { params });
+
+export const getSpecialExpense = (expenseId: string) => apiGet<FeeApiResponse<any>>(`/api/v1/fees/special/${expenseId}`);
+
+export const createSpecialExpense = (payload: SpecialExpensePayload) =>
+  apiPost<FeeApiResponse<any>>("/api/v1/fees/special", payload);
+
+export const updateSpecialExpense = (expenseId: string, payload: SpecialExpenseUpdatePayload) =>
+  apiPatch<FeeApiResponse<any>>(`/api/v1/fees/special/${expenseId}`, payload);
+
+export const deleteSpecialExpense = (expenseId: string) => apiDelete(`/api/v1/fees/special/${expenseId}`);
@@ -1,8 +1,13 @@
 <template>
-  <el-card class="kpi-card" shadow="never">
+  <el-card class="kpi-card" :class="[`type-${type}`]" shadow="hover">
    <div class="kpi-header">
-      <span class="kpi-title">{{ title }}</span>
-      <el-icon v-if="icon" class="kpi-icon"><component :is="icon" /></el-icon>
+      <div class="kpi-title-wrapper">
+        <div class="kpi-icon-wrapper" v-if="icon">
+          <el-icon class="kpi-icon"><component :is="icon" /></el-icon>
+        </div>
+        <span class="kpi-title">{{ title }}</span>
+      </div>
+      <slot name="header-suffix"></slot>
    </div>
    <div class="kpi-content">
      <div v-if="loading" class="kpi-loading">
@@ -22,6 +27,8 @@
 </template>

 <script setup lang="ts">
+import { computed } from 'vue';
+
 interface Props {
  title: string;
  value: string | number;
@@ -29,38 +36,85 @@ interface Props {
  loading?: boolean;
  icon?: any;
  unit?: string;
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
 }

-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+});
 </script>

 <style scoped>
 .kpi-card {
  border: 1px solid var(--ctms-border-color);
-  transition: var(--ctms-transition);
+  transition: all 0.3s ease;
  height: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  --el-card-padding: 12px 16px; 
 }

+.kpi-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: transparent;
+  transition: background-color 0.3s ease;
+}
+
+.kpi-card.type-primary::before { background-color: var(--el-color-primary); }
+.kpi-card.type-success::before { background-color: var(--el-color-success); }
+.kpi-card.type-warning::before { background-color: var(--el-color-warning); }
+.kpi-card.type-danger::before { background-color: var(--el-color-danger); }
+.kpi-card.type-info::before { background-color: var(--el-color-info); }
+
 .kpi-card:hover {
-  border-color: var(--ctms-border-color-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }

+.kpi-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.kpi-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background-color: var(--ctms-bg-color-page);
+  color: var(--ctms-text-secondary);
+}
+
+.type-primary .kpi-icon-wrapper { color: var(--el-color-primary); background-color: var(--el-color-primary-light-9); }
+.type-success .kpi-icon-wrapper { color: var(--el-color-success); background-color: var(--el-color-success-light-9); }
+.type-warning .kpi-icon-wrapper { color: var(--el-color-warning); background-color: var(--el-color-warning-light-9); }
+.type-danger .kpi-icon-wrapper { color: var(--el-color-danger); background-color: var(--el-color-danger-light-9); }
+.type-info .kpi-icon-wrapper { color: var(--el-color-info); background-color: var(--el-color-info-light-9); }
+
 .kpi-title {
  color: var(--ctms-text-secondary);
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 500;
 }

 .kpi-icon {
  font-size: 16px;
-  color: var(--ctms-text-secondary);
 }

 .kpi-content {
@@ -75,24 +129,26 @@ defineProps<Props>();
 }

 .kpi-value {
-  font-size: 28px;
-  font-weight: 600;
+  font-size: 32px;
+  font-weight: 700;
  color: var(--ctms-text-main);
  line-height: 1.2;
+  font-family: var(--el-font-family);
 }

 .kpi-unit {
  font-size: 14px;
  color: var(--ctms-text-secondary);
  font-weight: 500;
+  margin-left: 2px;
 }

 .kpi-subtext {
  color: var(--ctms-text-secondary);
-  font-size: 12px;
+  font-size: 13px;
  margin-top: 8px;
  padding-top: 8px;
-  border-top: 1px dashed var(--ctms-border-color);
+  border-top: 1px solid var(--ctms-border-color-lighter);
 }

 .kpi-loading {
@@ -39,13 +39,13 @@
            <el-icon><House /></el-icon>
            <span>{{ TEXT.menu.projectOverview }}</span>
          </el-menu-item>
-          <el-sub-menu index="finance">
+          <el-sub-menu index="fees">
            <template #title>
              <el-icon><Coin /></el-icon>
              <span>{{ TEXT.menu.finance }}</span>
            </template>
-            <el-menu-item index="/finance/contracts">{{ TEXT.menu.financeContracts }}</el-menu-item>
-            <el-menu-item index="/finance/special">{{ TEXT.menu.financeSpecials }}</el-menu-item>
+            <el-menu-item index="/fees/contracts">{{ TEXT.menu.feeContracts }}</el-menu-item>
+            <el-menu-item index="/fees/special">{{ TEXT.menu.feeSpecials }}</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="drug">
            <template #title>
@@ -170,8 +170,10 @@ const isCollapsed = ref(localStorage.getItem("ctms_sidebar_collapsed") === "1");
 const activeMenu = computed(() => {
  const path = route.path;
  if (path.startsWith("/project/")) return "/project/overview";
-  if (path.startsWith("/finance/contracts")) return "/finance/contracts";
-  if (path.startsWith("/finance/special")) return "/finance/special";
+  if (path.startsWith("/fees/contracts")) return "/fees/contracts";
+  if (path.startsWith("/fees/special")) return "/fees/special";
+  if (path.startsWith("/finance/contracts")) return "/fees/contracts";
+  if (path.startsWith("/finance/special")) return "/fees/special";
  if (path.startsWith("/drug/shipments")) return "/drug/shipments";
  if (path.startsWith("/file-versions")) return "/file-versions";
  if (path.startsWith("/startup/feasibility") || path.startsWith("/startup/ethics")) return "/startup/feasibility-ethics";
@@ -36,7 +36,7 @@ const actions = [
  { label: TEXT.menu.startupMeetingAuth, path: "/startup/meeting-auth", icon: Timer },
  { label: TEXT.menu.subjects, path: "/subjects", icon: UserFilled },
  { label: TEXT.menu.drugShipments, path: "/drug/shipments", icon: Management },
-  { label: TEXT.menu.finance, path: "/finance/contracts", icon: Money },
+  { label: TEXT.menu.finance, path: "/fees/contracts", icon: Money },
  { label: TEXT.menu.knowledge, path: "/knowledge/medical-consult", icon: Collection },
 ];

@@ -1,6 +1,6 @@
 <template>
  <div class="state state-error">
-    <el-icon class="state-icon"><CircleCloseFilled /></el-icon>
+    <el-icon class="state-icon"><CircleClose /></el-icon>
    <div class="state-title">{{ title }}</div>
    <div v-if="description" class="state-desc">{{ description }}</div>
    <div v-if="$slots.action" class="state-action">
@@ -10,7 +10,7 @@
 </template>

 <script setup lang="ts">
-import { CircleCloseFilled } from "@element-plus/icons-vue";
+import { CircleClose } from "@element-plus/icons-vue";
 import { TEXT } from "../locales";

 withDefaults(
@@ -32,6 +32,7 @@ withDefaults(
  align-items: center;
  justify-content: center;
  padding: 40px 12px;
+  color: var(--ctms-text-secondary);
  text-align: center;
 }

@@ -24,8 +24,11 @@
          {{ displayDateTime(scope.row.uploaded_at) }}
        </template>
      </el-table-column>
-      <el-table-column :label="TEXT.common.labels.actions" width="180">
+      <el-table-column :label="TEXT.common.labels.actions" width="220">
        <template #default="scope">
+          <el-button link type="primary" size="small" @click="preview(scope.row)">
+            {{ TEXT.common.actions.view }}
+          </el-button>
          <el-button link type="primary" size="small" @click="download(scope.row)">{{ TEXT.common.actions.download }}</el-button>
          <el-button
            v-if="canDelete(scope.row)"
@@ -40,6 +43,19 @@
      </el-table-column>
    </el-table>
  </el-card>
+
+  <el-dialog v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
+    <div v-if="previewError" class="preview-error">
+      {{ previewError }}
+    </div>
+    <template v-else>
+      <img v-if="previewType === 'image'" :src="previewUrl" class="preview-media" />
+      <iframe v-else-if="previewType === 'pdf'" :src="previewUrl" class="preview-frame" />
+      <div v-else class="preview-error">
+        {{ TEXT.common.messages.previewNotSupported }}
+      </div>
+    </template>
+  </el-dialog>
 </template>

 <script setup lang="ts">
@@ -65,6 +81,11 @@ const loading = ref(false);
 const auth = useAuthStore();
 const study = useStudyStore();
 const members = ref<any[]>([]);
+const previewVisible = ref(false);
+const previewUrl = ref("");
+const previewType = ref<"image" | "pdf" | "other">("other");
+const previewTitle = ref(TEXT.common.labels.preview);
+const previewError = ref("");

 const load = async () => {
  if (!props.studyId || !props.entityId) return;
@@ -107,6 +128,25 @@ const download = (row: any) => {
  window.open(url, "_blank");
 };

+const detectPreviewType = (row: any) => {
+  const mime = (row?.mime_type || row?.content_type || "").toLowerCase();
+  if (mime.startsWith("image/")) return "image";
+  if (mime === "application/pdf") return "pdf";
+  return "other";
+};
+
+const preview = (row: any) => {
+  previewError.value = "";
+  previewType.value = detectPreviewType(row);
+  previewTitle.value = row?.filename || TEXT.common.labels.preview;
+  const token = localStorage.getItem("ctms_token");
+  previewUrl.value = row?.url || (token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`);
+  if (previewType.value === "other") {
+    previewError.value = TEXT.common.messages.previewNotSupported;
+  }
+  previewVisible.value = true;
+};
+
 const canDelete = (row: any) => {
  const userId = auth.user?.id;
  const role = auth.user?.role;
@@ -141,4 +181,24 @@ onMounted(async () => {
  align-items: center;
  margin-bottom: 8px;
 }
+
+.preview-frame {
+  width: 100%;
+  height: 520px;
+  border: none;
+}
+
+.preview-media {
+  max-width: 100%;
+  max-height: 520px;
+  display: block;
+  margin: 0 auto;
+}
+
+.preview-error {
+  color: var(--ctms-text-secondary);
+  font-size: 13px;
+  padding: 12px 0;
+  text-align: center;
+}
 </style>
@@ -0,0 +1,322 @@
+<template>
+  <div class="fee-attachments">
+    <el-card v-for="group in groups" :key="group.key" class="group-card">
+      <div class="group-header">
+        <div>
+          <div class="group-title">{{ group.label }}</div>
+          <div v-if="group.description" class="group-desc">{{ group.description }}</div>
+        </div>
+        <el-upload
+          :http-request="(options: any) => doUpload(group.key, options)"
+          :show-file-list="false"
+          :limit="1"
+          :disabled="readonly || isUploading(group.key)"
+          :auto-upload="true"
+        >
+          <el-button size="small" type="primary" :loading="isUploading(group.key)" :disabled="readonly">
+            {{ TEXT.common.actions.upload }}
+          </el-button>
+        </el-upload>
+      </div>
+      <el-progress
+        v-if="progressMap[group.key] && progressMap[group.key] < 100"
+        :percentage="progressMap[group.key]"
+        :stroke-width="6"
+      />
+      <StateLoading v-if="loading" :rows="3" />
+      <template v-else>
+        <div v-if="(grouped[group.key] || []).length === 0" class="group-empty">
+          <StateEmpty :description="group.emptyText" />
+        </div>
+        <el-table v-else :data="grouped[group.key]" style="width: 100%">
+          <el-table-column prop="filename" :label="TEXT.common.labels.filename" min-width="160" />
+          <el-table-column :label="TEXT.common.labels.size" width="110">
+            <template #default="scope">{{ formatFileSize(scope.row.size || scope.row.file_size) }}</template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.labels.uploader" width="140">
+            <template #default="scope">
+              {{ uploaderLabel(scope.row) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.labels.actions" width="160">
+            <template #default="scope">
+              <el-button link type="primary" size="small" @click="preview(scope.row)">
+                {{ TEXT.common.actions.view }}
+              </el-button>
+              <el-button link type="primary" size="small" @click="download(scope.row)">
+                {{ TEXT.common.actions.download }}
+              </el-button>
+              <el-button
+                v-if="canDelete(scope.row)"
+                link
+                type="danger"
+                size="small"
+                @click="remove(scope.row)"
+              >
+                {{ TEXT.common.actions.delete }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-card>
+  </div>
+
+  <el-dialog v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
+    <div v-if="previewError" class="preview-error">
+      {{ previewError }}
+    </div>
+    <template v-else>
+      <img v-if="previewType === 'image'" :src="previewUrl" class="preview-media" />
+      <iframe v-else-if="previewType === 'pdf'" :src="previewUrl" class="preview-frame" />
+      <div v-else class="preview-error">
+        {{ TEXT.common.messages.previewNotSupported }}
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { listFeeAttachments, uploadFeeAttachment, deleteFeeAttachment, getFeeAttachmentDownloadUrl } from "../../api/feeAttachments";
+import { listMembers } from "../../api/members";
+import { useAuthStore } from "../../store/auth";
+import { useStudyStore } from "../../store/study";
+import { formatFileSize } from "../attachments/attachmentUtils";
+import { displayUser, getMemberDisplayName, getUserDisplayName } from "../../utils/display";
+import StateEmpty from "../StateEmpty.vue";
+import StateLoading from "../StateLoading.vue";
+import { TEXT } from "../../locales";
+
+interface AttachmentGroup {
+  key: string;
+  label: string;
+  description?: string;
+  emptyText?: string;
+}
+
+const props = defineProps<{
+  entityType: string;
+  entityId: string;
+  groups: AttachmentGroup[];
+  readonly?: boolean;
+  maxSizeMb?: number;
+}>();
+
+const loading = ref(false);
+const grouped = reactive<Record<string, any[]>>({});
+const progressMap = reactive<Record<string, number>>({});
+const auth = useAuthStore();
+const study = useStudyStore();
+const members = ref<any[]>([]);
+const previewVisible = ref(false);
+const previewUrl = ref("");
+const previewType = ref<"image" | "pdf" | "other">("other");
+const previewTitle = ref(TEXT.common.labels.preview);
+const previewError = ref("");
+
+const isUploading = (key: string) => (progressMap[key] || 0) > 0 && (progressMap[key] || 0) < 100;
+
+const loadMembers = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await listMembers(studyId, { limit: 500 });
+    members.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    members.value = [];
+  }
+};
+
+const load = async () => {
+  if (!props.entityType || !props.entityId) return;
+  loading.value = true;
+  try {
+    const { data } = await listFeeAttachments(props.entityType, props.entityId);
+    const items = Array.isArray(data?.data) ? data?.data : [];
+    props.groups.forEach((group) => {
+      grouped[group.key] = items.filter((item: any) => item.file_type === group.key || item.fileType === group.key);
+    });
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const uploaderLabel = (row: any) => {
+  const memberMap = members.value.reduce<Record<string, string>>((acc, cur) => {
+    const username = getMemberDisplayName(cur);
+    if (cur?.user_id && username) acc[cur.user_id] = username;
+    return acc;
+  }, {});
+  if (row?.uploaded_by && typeof row.uploaded_by === "object") {
+    return getUserDisplayName(row.uploaded_by) || row.uploaded_by.id || TEXT.common.fallback;
+  }
+  return displayUser(row.uploaded_by_id || row.uploaded_by, { members: memberMap });
+};
+
+const doUpload = async (fileType: string, options: any) => {
+  const file: File = options.file;
+  if (!file || props.readonly) return;
+  const maxSize = props.maxSizeMb ?? 50;
+  if (file.size > maxSize * 1024 * 1024) {
+    ElMessage.error(`${TEXT.common.messages.fileTooLarge} ${maxSize}MB`);
+    return;
+  }
+  progressMap[fileType] = 0;
+  try {
+    await uploadFeeAttachment(props.entityType, props.entityId, fileType, file, {
+      onUploadProgress: (evt: ProgressEvent) => {
+        if (evt.total) {
+          progressMap[fileType] = Math.round((evt.loaded / evt.total) * 100);
+        }
+      },
+    });
+    ElMessage.success(TEXT.common.messages.uploadSuccess);
+    await load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.uploadFailed);
+  } finally {
+    progressMap[fileType] = 0;
+  }
+};
+
+const detectPreviewType = (row: any) => {
+  const mime = (row?.mime_type || row?.content_type || "").toLowerCase();
+  if (mime.startsWith("image/")) return "image";
+  if (mime === "application/pdf") return "pdf";
+  return "other";
+};
+
+const preview = (row: any) => {
+  previewError.value = "";
+  previewType.value = detectPreviewType(row);
+  previewTitle.value = row?.filename || TEXT.common.labels.preview;
+  previewUrl.value = row?.url || getFeeAttachmentDownloadUrl(row.id);
+  if (previewType.value === "other") {
+    previewError.value = TEXT.common.messages.previewNotSupported;
+  }
+  previewVisible.value = true;
+};
+
+const download = (row: any) => {
+  if (row?.url) {
+    window.open(row.url, "_blank");
+    return;
+  }
+  window.open(getFeeAttachmentDownloadUrl(row.id), "_blank");
+};
+
+const canDelete = (row: any) => {
+  if (props.readonly) return false;
+  const userId = auth.user?.id;
+  const role = auth.user?.role;
+  const projectRole = study.currentStudyRole || (study.currentStudy as any)?.role_in_study;
+  const ownerId =
+    row.uploaded_by_id || (row.uploaded_by && typeof row.uploaded_by === "object" ? row.uploaded_by.id : row.uploaded_by);
+  return userId === ownerId || role === "ADMIN" || projectRole === "PM";
+};
+
+const remove = async (row: any) => {
+  const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
+  if (!ok) return;
+  try {
+    await deleteFeeAttachment(row.id);
+    ElMessage.success(TEXT.common.messages.deleteSuccess);
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
+  }
+};
+
+watch(
+  () => [props.entityType, props.entityId],
+  () => {
+    load();
+  }
+);
+
+onMounted(async () => {
+  await loadMembers();
+  load();
+});
+</script>
+
+<style scoped>
+.fee-attachments {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+
+
+.group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+  gap: 8px;
+}
+
+.group-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.group-desc {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+  margin-top: 4px;
+}
+
+.group-empty {
+  padding: 0;
+}
+
+/* Compact Empty State Override */
+.group-empty :deep(.state) {
+  padding: 16px 0 !important;
+  min-height: auto !important;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.group-empty :deep(.state-icon) {
+  font-size: 20px !important;
+  margin-bottom: 0 !important;
+}
+
+.group-empty :deep(.state-title) {
+  font-size: 13px !important;
+  font-weight: normal !important;
+  margin: 0 !important;
+}
+
+.group-empty :deep(.state-desc) {
+  display: none; /* Hide description in compact mode if desired, or keep it small */
+}
+
+.preview-frame {
+  width: 100%;
+  height: 520px;
+  border: none;
+}
+
+.preview-media {
+  max-width: 100%;
+  max-height: 520px;
+  display: block;
+  margin: 0 auto;
+}
+
+.preview-error {
+  color: var(--ctms-text-secondary);
+  font-size: 13px;
+  padding: 12px 0;
+  text-align: center;
+}
+</style>
@@ -23,6 +23,7 @@ export const TEXT = {
      submit: "提交",
      view: "查看",
      refresh: "刷新",
+      retry: "重试",
      quote: "引用",
      more: "查看更多",
      exitProject: "退出当前项目",
@@ -53,6 +54,8 @@ export const TEXT = {
      sessionExpired: "登录已过期，请重新登录",
      requestFailed: "请求失败，请稍后重试",
      invalidStateAction: "当前状态不允许该操作",
+      required: "必填项",
+      previewNotSupported: "该文件暂不支持内嵌预览，请下载查看",
    },
    confirm: {
      delete: "确认删除该记录？",
@@ -68,6 +71,7 @@ export const TEXT = {
      uploader: "上传人",
      uploadedAt: "上传时间",
      actions: "操作",
+      preview: "预览",
      filename: "文件名",
      role: "角色",
      quickActions: "通往业务模块的快捷入口",
@@ -80,6 +84,7 @@ export const TEXT = {
      collapseSidebar: "收缩侧边栏",
      userInitialFallback: "用",
      userFallback: "用户",
+      basicInfo: "基本信息",
    },
    units: {
      case: "例",
@@ -235,8 +240,10 @@ export const TEXT = {
    currentProject: "当前项目",
    projectOverview: "项目总览",
    finance: "费用管理",
-    financeContracts: "合同费用",
-    financeSpecials: "特殊费用",
+    financeContracts: "合同管理",
+    financeSpecials: "特殊费用管理",
+    feeContracts: "合同管理",
+    feeSpecials: "特殊费用管理",
    drug: "药品管理",
    drugShipments: "运输/流向",
    fileVersionManagement: "文件版本管理",
@@ -320,6 +327,97 @@ export const TEXT = {
      detailTitle: "特殊费用详情",
      detailSubtitle: "查看费用记录与附件",
    },
+    feeContracts: {
+      title: "合同管理",
+      subtitle: "按中心维护合同费用与分期付款",
+      empty: "暂无合同费用数据，点击创建",
+      newTitle: "新增合同费用",
+      editTitle: "编辑合同费用",
+      formSubtitle: "维护合同费用与分期付款信息",
+      detailTitle: "合同费用详情",
+      detailSubtitle: "查看合同费用与分期付款信息",
+      overviewTitle: "费用总览",
+      totalContractAmount: "合同金额总计",
+      totalPaidAmount: "已付金额总计",
+      totalUnpaidAmount: "未付金额总计",
+      totalVerifiedAmount: "已核销金额总计",
+      centerCount: "中心数",
+      contractAmount: "合同金额",
+      contractCases: "合同例数",
+      actualCases: "实际例数",
+      settlementAmount: "结算费用",
+      finalPaymentAmount: "尾款费用",
+      caseProgress: "合同/实际例数",
+      paidSummary: "已付/未付",
+      paidTotal: "已付合计",
+      unpaidBalance: "未付余额",
+      verifySummary: "核销情况",
+      verifiedTotal: "已核销合计",
+      unverifiedBalance: "未核销余额",
+      recentDates: "最近日期",
+      lastPaid: "最近打款",
+      lastVerified: "最近核销",
+      paymentTitle: "分期付款",
+      paymentEmpty: "暂无分期付款记录",
+      paymentSeq: "第",
+      paymentSeqUnit: "笔",
+      paidFlag: "打款状态",
+      verifiedFlag: "核销状态",
+      isPaid: "已打款",
+      isVerified: "已核销",
+      amountInvalid: "金额需大于等于 0",
+      paidDateRequired: "请填写打款日期",
+      verifiedDateRequired: "请填写核销日期",
+      verifyRequiresPaid: "核销前需先打款",
+      paymentValidationFailed: "请完善分期付款信息",
+      attachmentTitle: "合同附件",
+      attachmentContract: "合同",
+      attachmentContractDesc: "上传合同扫描件或签署页",
+      attachmentContractEmpty: "暂无合同附件",
+      attachmentVoucher: "凭证",
+      attachmentVoucherDesc: "上传打款凭证或收据",
+      attachmentVoucherEmpty: "暂无凭证附件",
+      attachmentInvoice: "发票",
+      attachmentInvoiceDesc: "上传发票或税务凭证",
+      attachmentInvoiceEmpty: "暂无发票附件",
+      uploadHint: "保存后可上传合同/凭证/发票附件",
+    },
+    feeSpecials: {
+      title: "特殊费用管理",
+      subtitle: "记录差旅、餐费、会议、物品等费用",
+      empty: "暂无特殊费用记录",
+      newTitle: "新增特殊费用",
+      editTitle: "编辑特殊费用",
+      formSubtitle: "维护特殊费用与核销信息",
+      detailTitle: "特殊费用详情",
+      detailSubtitle: "查看费用记录与附件",
+      overviewTitle: "费用总览",
+      totalAmount: "费用总计",
+      paidAmount: "已打款金额",
+      verifiedAmount: "已核销金额",
+      attachmentTotal: "附件总数",
+      recordCount: "记录数",
+      attachmentTitle: "费用附件",
+      attachmentCount: "附件数",
+      paidFlag: "打款状态",
+      verifiedFlag: "核销状态",
+      isPaid: "已打款",
+      isVerified: "已核销",
+      paidDateRequired: "请填写打款日期",
+      verifiedDateRequired: "请填写核销日期",
+      verifyRequiresPaid: "核销前需先打款",
+      validationFailed: "请完善费用状态信息",
+      attachmentVoucher: "凭证",
+      attachmentVoucherDesc: "上传报销凭证或收据",
+      attachmentVoucherEmpty: "暂无凭证附件",
+      attachmentInvoice: "发票",
+      attachmentInvoiceDesc: "上传发票或税务凭证",
+      attachmentInvoiceEmpty: "暂无发票附件",
+      attachmentOther: "其他",
+      attachmentOtherDesc: "上传其他支持性材料",
+      attachmentOtherEmpty: "暂无其他附件",
+      uploadHint: "保存后可上传凭证/发票/其他附件",
+    },
    drugShipments: {
      title: "药品运输/流向",
      subtitle: "登记寄送与回收信息",
@@ -681,6 +779,8 @@ export const TEXT = {
      projectMembersManage: "仅 ADMIN / PM 可调整项目成员",
      siteManage: "仅 ADMIN / PM 可管理中心",
      siteCraBind: "仅 ADMIN / PM 可绑定 CRA",
+      feeContractsWrite: "仅 ADMIN / PM 可维护合同费用",
+      feeSpecialsWrite: "仅 ADMIN / PM 可维护特殊费用",
      default: "当前角色无权执行该操作",
    },
    profile: {
@@ -772,6 +872,13 @@ export const TEXT = {
      TRANSPORT: "交通",
      OTHER: "其他",
    },
+    feeSpecialCategory: {
+      travel: "差旅",
+      meal: "餐费",
+      meeting: "会议",
+      supplies: "物品",
+      other: "其他",
+    },
    projectStatus: {
      DRAFT: "草稿",
      ACTIVE: "进行中",
@@ -19,6 +19,12 @@ import ProfileSettings from "../views/ProfileSettings.vue";
 import ProjectOverview from "../views/ia/ProjectOverview.vue";
 import FinanceContracts from "../views/ia/FinanceContracts.vue";
 import FinanceSpecial from "../views/ia/FinanceSpecial.vue";
+import FeeContracts from "../views/fees/ContractFees.vue";
+import FeeContractForm from "../views/fees/ContractFeeForm.vue";
+import FeeContractDetail from "../views/fees/ContractFeeDetail.vue";
+import FeeSpecials from "../views/fees/SpecialExpenses.vue";
+import FeeSpecialForm from "../views/fees/SpecialExpenseForm.vue";
+import FeeSpecialDetail from "../views/fees/SpecialExpenseDetail.vue";
 import DrugShipments from "../views/ia/DrugShipments.vue";
 import FileVersionManagement from "../views/ia/FileVersionManagement.vue";
 import StartupFeasibilityEthics from "../views/ia/StartupFeasibilityEthics.vue";
@@ -98,6 +104,30 @@ const routes: RouteRecordRaw[] = [
        component: FinanceContracts,
        meta: { title: TEXT.menu.financeContracts, requiresStudy: true },
      },
+      {
+        path: "fees/contracts",
+        name: "FeeContracts",
+        component: FeeContracts,
+        meta: { title: TEXT.menu.feeContracts, requiresStudy: true },
+      },
+      {
+        path: "fees/contracts/new",
+        name: "FeeContractNew",
+        component: FeeContractForm,
+        meta: { title: TEXT.common.actions.add + TEXT.menu.feeContracts, requiresStudy: true },
+      },
+      {
+        path: "fees/contracts/:contractId",
+        name: "FeeContractDetail",
+        component: FeeContractDetail,
+        meta: { title: TEXT.modules.feeContracts.detailTitle, requiresStudy: true },
+      },
+      {
+        path: "fees/contracts/:contractId/edit",
+        name: "FeeContractEdit",
+        component: FeeContractForm,
+        meta: { title: TEXT.common.actions.edit + TEXT.menu.feeContracts, requiresStudy: true },
+      },
      {
        path: "finance/contracts/new",
        name: "FinanceContractNew",
@@ -122,6 +152,30 @@ const routes: RouteRecordRaw[] = [
        component: FinanceSpecial,
        meta: { title: TEXT.menu.financeSpecials, requiresStudy: true },
      },
+      {
+        path: "fees/special",
+        name: "FeeSpecials",
+        component: FeeSpecials,
+        meta: { title: TEXT.menu.feeSpecials, requiresStudy: true },
+      },
+      {
+        path: "fees/special/new",
+        name: "FeeSpecialNew",
+        component: FeeSpecialForm,
+        meta: { title: TEXT.common.actions.add + TEXT.menu.feeSpecials, requiresStudy: true },
+      },
+      {
+        path: "fees/special/:expenseId",
+        name: "FeeSpecialDetail",
+        component: FeeSpecialDetail,
+        meta: { title: TEXT.modules.feeSpecials.detailTitle, requiresStudy: true },
+      },
+      {
+        path: "fees/special/:expenseId/edit",
+        name: "FeeSpecialEdit",
+        component: FeeSpecialForm,
+        meta: { title: TEXT.common.actions.edit + TEXT.menu.feeSpecials, requiresStudy: true },
+      },
      {
        path: "finance/special/new",
        name: "FinanceSpecialNew",
@@ -3,6 +3,12 @@ export interface ApiListResponse<T> {
  total: number;
 }

+export interface FeeApiResponse<T> {
+  data?: T | null;
+  error?: string | Record<string, any> | null;
+  meta?: Record<string, any> | null;
+}
+
 export interface ApiError {
  code: string;
  message: string;
@@ -16,6 +16,8 @@ const PERMISSIONS: Record<string, string[]> = {
  "project.members.manage": ["ADMIN", "PM"],
  "site.manage": ["ADMIN", "PM"],
  "site.cra.bind": ["ADMIN", "PM"],
+  "fees.contract.write": ["ADMIN", "PM"],
+  "fees.special.write": ["ADMIN", "PM"],
 };

 const REASONS: Record<string, string> = {
@@ -29,6 +31,8 @@ const REASONS: Record<string, string> = {
  "project.members.manage": TEXT.modules.permissions.projectMembersManage,
  "site.manage": TEXT.modules.permissions.siteManage,
  "site.cra.bind": TEXT.modules.permissions.siteCraBind,
+  "fees.contract.write": TEXT.modules.permissions.feeContractsWrite,
+  "fees.special.write": TEXT.modules.permissions.feeSpecialsWrite,
 };

 export const usePermission = () => {
@@ -0,0 +1,305 @@
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ TEXT.modules.feeContracts.detailTitle }}</h1>
+        <p class="page-subtitle">{{ TEXT.modules.feeContracts.detailSubtitle }}</p>
+      </div>
+      <div class="actions">
+        <el-button type="primary" :disabled="!canWrite" @click="goEdit" class="header-action-btn copy-btn">
+          <el-icon class="el-icon--left"><Edit /></el-icon>
+          {{ TEXT.common.actions.edit }}
+        </el-button>
+        <el-button @click="goBack" class="header-action-btn">
+          {{ TEXT.common.actions.back }}
+        </el-button>
+      </div>
+    </div>
+
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="load">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <template v-else>
+      <el-card class="detail-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
+          </div>
+        </template>
+        <el-descriptions :column="2" border class="custom-descriptions">
+          <el-descriptions-item :label="TEXT.common.fields.site" label-class-name="desc-label">
+            {{ centerName || TEXT.common.fallback }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.modules.feeContracts.contractAmount" label-class-name="desc-label">
+            <span class="amount-text">{{ formatAmountWan(detail.contract_amount) }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.modules.feeContracts.contractCases" label-class-name="desc-label">
+            {{ detail.contract_cases ?? TEXT.common.fallback }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.modules.feeContracts.actualCases" label-class-name="desc-label">
+            {{ detail.actual_cases ?? TEXT.common.fallback }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.modules.feeContracts.settlementAmount" label-class-name="desc-label">
+            <span class="amount-text">{{ formatAmountWan(detail.settlement_amount) }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.modules.feeContracts.finalPaymentAmount" label-class-name="desc-label">
+            <span class="amount-text">{{ formatAmountWan(detail.final_payment_amount) }}</span>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card class="section-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="header-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
+          </div>
+        </template>
+        <el-table :data="detail.payments" style="width: 100%" :header-cell-style="{ background: '#f8f9fb' }">
+          <el-table-column :label="TEXT.modules.feeContracts.paymentSeq" width="120">
+            <template #default="scope">
+              <span class="seq-tag">{{ TEXT.modules.feeContracts.paymentSeq }}{{ scope.row.seq }}{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.fields.amount" width="160" align="right">
+            <template #default="scope">
+              <span class="amount-text">{{ formatAmountWan(scope.row.amount) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.modules.feeContracts.paidFlag" width="200">
+            <template #default="scope">
+              <div v-if="scope.row.is_paid" class="status-cell">
+                <el-tag type="success" size="small">{{ TEXT.modules.feeContracts.isPaid }}</el-tag>
+                <span class="status-date">{{ displayDate(scope.row.paid_date) }}</span>
+              </div>
+              <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.modules.feeContracts.verifiedFlag" width="200">
+            <template #default="scope">
+              <div v-if="scope.row.is_verified" class="status-cell">
+                <el-tag type="info" size="small">{{ TEXT.modules.feeContracts.isVerified }}</el-tag>
+                <span class="status-date">{{ displayDate(scope.row.verified_date) }}</span>
+              </div>
+              <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.fields.remark" min-width="200" show-overflow-tooltip>
+            <template #default="scope">{{ scope.row.remark || TEXT.common.fallback }}</template>
+          </el-table-column>
+        </el-table>
+        <StateEmpty v-if="detail.payments.length === 0" :description="TEXT.modules.feeContracts.paymentEmpty" />
+      </el-card>
+
+      <el-card class="section-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
+          </div>
+        </template>
+        <FeeAttachmentPanel
+          v-if="contractId"
+          :entity-type="'contract_fee'"
+          :entity-id="contractId"
+          :groups="attachmentGroups"
+        />
+      </el-card>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Edit } from "@element-plus/icons-vue";
+import { getContractFee } from "../../api/feeContracts";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import { usePermission } from "../../utils/permission";
+import { displayDate } from "../../utils/display";
+import StateEmpty from "../../components/StateEmpty.vue";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
+import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
+import { TEXT } from "../../locales";
+
+const route = useRoute();
+const router = useRouter();
+const study = useStudyStore();
+const { can } = usePermission();
+const canWrite = computed(() => can("fees.contract.write"));
+
+const contractId = route.params.contractId as string;
+const loading = ref(false);
+const errorMessage = ref("");
+const detail = reactive<any>({
+  contract_amount: 0,
+  contract_cases: 0,
+  actual_cases: null,
+  settlement_amount: null,
+  final_payment_amount: null,
+  payments: [],
+});
+const sites = ref<any[]>([]);
+
+const attachmentGroups = [
+  {
+    key: "contract",
+    label: TEXT.modules.feeContracts.attachmentContract,
+    description: TEXT.modules.feeContracts.attachmentContractDesc,
+    emptyText: TEXT.modules.feeContracts.attachmentContractEmpty,
+  },
+  {
+    key: "voucher",
+    label: TEXT.modules.feeContracts.attachmentVoucher,
+    description: TEXT.modules.feeContracts.attachmentVoucherDesc,
+    emptyText: TEXT.modules.feeContracts.attachmentVoucherEmpty,
+  },
+  {
+    key: "invoice",
+    label: TEXT.modules.feeContracts.attachmentInvoice,
+    description: TEXT.modules.feeContracts.attachmentInvoiceDesc,
+    emptyText: TEXT.modules.feeContracts.attachmentInvoiceEmpty,
+  },
+];
+
+const centerName = computed(() => {
+  const match = sites.value.find((site) => site.id === detail.center_id);
+  return match?.name || "";
+});
+
+const loadSites = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await fetchSites(studyId, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
+const load = async () => {
+  if (!contractId) return;
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const { data } = await getContractFee(contractId);
+    Object.assign(detail, data?.data || {});
+    if (!Array.isArray(detail.payments)) detail.payments = [];
+  } catch (e: any) {
+    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const formatAmountWan = (value: any) => {
+  const numberValue = Number(value);
+  if (Number.isNaN(numberValue)) return TEXT.common.fallback;
+  return (numberValue / 10000).toFixed(2);
+};
+
+const goEdit = () => router.push(`/fees/contracts/${contractId}/edit`);
+const goBack = () => router.push("/fees/contracts");
+
+onMounted(async () => {
+  await loadSites();
+  load();
+});
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+}
+
+.page-subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.header-action-btn {
+  height: 36px;
+  border-radius: 8px;
+  padding: 0 16px;
+}
+
+.detail-card, .section-card {
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 4px 0;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  border-left: 4px solid var(--el-color-primary);
+  padding-left: 12px;
+}
+
+.custom-descriptions :deep(.desc-label) {
+  background-color: var(--ctms-bg-color-page) !important;
+  color: var(--ctms-text-secondary);
+  width: 150px;
+  font-weight: 500;
+}
+
+.amount-text {
+  font-family: var(--el-font-family);
+  font-weight: 600;
+}
+
+.seq-tag {
+  color: var(--ctms-text-secondary);
+  font-size: 13px;
+}
+
+.status-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.status-date {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+  font-family: var(--el-font-family);
+}
+
+.text-muted {
+  color: var(--ctms-text-placeholder);
+  font-size: 13px;
+}
+</style>
@@ -0,0 +1,635 @@
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ isEdit ? TEXT.modules.feeContracts.editTitle : TEXT.modules.feeContracts.newTitle }}</h1>
+        <p class="page-subtitle">{{ TEXT.modules.feeContracts.formSubtitle }}</p>
+      </div>
+      <div class="actions">
+        <el-button @click="goBack" class="header-action-btn">{{ TEXT.common.actions.back }}</el-button>
+      </div>
+    </div>
+
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="loadDetail">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <template v-else>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="top">
+        <el-card class="form-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
+            </div>
+          </template>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item :label="TEXT.common.fields.site" prop="center_id" required>
+                <el-select v-model="form.center_id" :disabled="isEdit" :placeholder="TEXT.common.placeholders.select" class="full-width">
+                  <el-option
+                    v-for="site in sites"
+                    :key="site.id"
+                    :label="site.name || TEXT.common.fallback"
+                    :value="site.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.modules.feeContracts.contractAmount" prop="contract_amount" required>
+                <el-input-number v-model="form.contract_amount" :min="0" :precision="2" :step="1000" class="full-width" controls-position="right" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases" required>
+                <el-input-number v-model="form.contract_cases" :min="0" :step="1" class="full-width" controls-position="right" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
+                <el-input-number v-model="form.actual_cases" :min="0" :step="1" class="full-width" controls-position="right" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.modules.feeContracts.settlementAmount" prop="settlement_amount">
+                <el-input-number v-model="form.settlement_amount" :min="0" :precision="2" :step="1000" class="full-width" controls-position="right" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.modules.feeContracts.finalPaymentAmount" prop="final_payment_amount">
+                <el-input-number v-model="form.final_payment_amount" :min="0" :precision="2" :step="1000" class="full-width" controls-position="right" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="form-card section-margin" shadow="never">
+          <template #header>
+            <div class="card-header actions-header">
+              <span class="header-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
+              <el-button type="primary" @click="addPayment">
+                <el-icon class="el-icon--left"><Plus /></el-icon>
+                {{ TEXT.common.actions.add }}
+              </el-button>
+            </div>
+          </template>
+
+          <div v-if="payments.length === 0" class="section-empty">
+            <StateEmpty :description="TEXT.modules.feeContracts.paymentEmpty" />
+          </div>
+          
+          <div v-else class="payment-list">
+            <transition-group name="list">
+              <div v-for="(payment, index) in payments" :key="payment.tempId" class="payment-item">
+                <div class="payment-item-header">
+                  <div class="payment-seq">
+                    <span class="seq-circle">{{ index + 1 }}</span>
+                    <span class="seq-text">{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
+                  </div>
+                  <el-button link type="danger" @click="removePayment(index)">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </div>
+                
+                <el-row :gutter="16">
+                  <el-col :span="8">
+                    <el-form-item :label="TEXT.common.fields.amount" :error="paymentErrors[index]?.amount">
+                      <el-input-number v-model="payment.amount" :min="0" :precision="2" class="full-width" controls-position="right" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item :label="TEXT.modules.feeContracts.paidFlag" :error="paymentErrors[index]?.paid_date">
+                      <div class="status-control">
+                        <el-checkbox v-model="payment.is_paid" @change="() => onPaidToggle(payment)">
+                          {{ TEXT.modules.feeContracts.isPaid }}
+                        </el-checkbox>
+                        <el-date-picker
+                          v-if="payment.is_paid"
+                          v-model="payment.paid_date"
+                          type="date"
+                          value-format="YYYY-MM-DD"
+                          :placeholder="TEXT.common.placeholders.select"
+                          class="status-picker"
+                          size="small"
+                        />
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item :label="TEXT.modules.feeContracts.verifiedFlag" :error="paymentErrors[index]?.verified_date">
+                      <div class="status-control">
+                        <el-checkbox v-model="payment.is_verified" @change="() => onVerifiedToggle(payment)">
+                          {{ TEXT.modules.feeContracts.isVerified }}
+                        </el-checkbox>
+                        <el-date-picker
+                          v-if="payment.is_verified"
+                          v-model="payment.verified_date"
+                          type="date"
+                          value-format="YYYY-MM-DD"
+                          :placeholder="TEXT.common.placeholders.select"
+                          class="status-picker"
+                          size="small"
+                        />
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                
+                <el-form-item :label="TEXT.common.fields.remark" class="mb-0">
+                  <el-input v-model="payment.remark" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
+                </el-form-item>
+                
+                <div v-if="paymentErrors[index]?.verification" class="payment-error">
+                  {{ paymentErrors[index].verification }}
+                </div>
+              </div>
+            </transition-group>
+          </div>
+        </el-card>
+
+        <el-card class="form-card section-margin" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
+            </div>
+          </template>
+          <FeeAttachmentPanel
+            v-if="form.id"
+            :entity-type="'contract_fee'"
+            :entity-id="form.id"
+            :groups="attachmentGroups"
+          />
+
+          <StateEmpty v-else :description="TEXT.modules.feeContracts.uploadHint" class="compact-empty" />
+        </el-card>
+
+        <div class="footer-actions">
+          <el-button @click="goBack">{{ TEXT.common.actions.cancel }}</el-button>
+          <el-button type="primary" :loading="saving" @click="submit" class="save-btn">
+            {{ TEXT.common.actions.save }}
+          </el-button>
+        </div>
+      </el-form>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { Plus, Delete } from "@element-plus/icons-vue";
+import {
+  createContractFee,
+  createContractPayment,
+  deleteContractPayment,
+  getContractFee,
+  updateContractFee,
+  updateContractPayment,
+} from "../../api/feeContracts";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import StateEmpty from "../../components/StateEmpty.vue";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
+import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
+import { TEXT } from "../../locales";
+
+const route = useRoute();
+const router = useRouter();
+const study = useStudyStore();
+
+const loading = ref(false);
+const saving = ref(false);
+const errorMessage = ref("");
+const sites = ref<any[]>([]);
+
+const formRef = ref();
+const form = reactive({
+  id: "",
+  project_id: "",
+  center_id: "",
+  contract_amount: 0,
+  contract_cases: 0,
+  actual_cases: null as number | null,
+  settlement_amount: null as number | null,
+  final_payment_amount: null as number | null,
+});
+
+const payments = ref<any[]>([]);
+const removedPaymentIds = ref<string[]>([]);
+const paymentErrors = ref<Record<string, string>[]>([]);
+
+const contractId = computed(() => route.params.contractId as string | undefined);
+const isEdit = computed(() => !!contractId.value);
+
+const attachmentGroups = [
+  {
+    key: "contract",
+    label: TEXT.modules.feeContracts.attachmentContract,
+    description: TEXT.modules.feeContracts.attachmentContractDesc,
+    emptyText: TEXT.modules.feeContracts.attachmentContractEmpty,
+  },
+  {
+    key: "voucher",
+    label: TEXT.modules.feeContracts.attachmentVoucher,
+    description: TEXT.modules.feeContracts.attachmentVoucherDesc,
+    emptyText: TEXT.modules.feeContracts.attachmentVoucherEmpty,
+  },
+  {
+    key: "invoice",
+    label: TEXT.modules.feeContracts.attachmentInvoice,
+    description: TEXT.modules.feeContracts.attachmentInvoiceDesc,
+    emptyText: TEXT.modules.feeContracts.attachmentInvoiceEmpty,
+  },
+];
+
+const rules = {
+  center_id: [{ required: true, message: TEXT.common.messages.required, trigger: "change" }],
+  contract_amount: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
+  contract_cases: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
+};
+
+const loadSites = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await fetchSites(studyId, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
+const loadDetail = async () => {
+  if (!contractId.value) return;
+  loading.value = true;
+  errorMessage.value = "";
+  removedPaymentIds.value = [];
+  paymentErrors.value = [];
+  try {
+    const { data } = await getContractFee(contractId.value);
+    const detail = data?.data || {};
+    Object.assign(form, {
+      id: detail.id || contractId.value,
+      project_id: detail.project_id || study.currentStudy?.id || "",
+      center_id: detail.center_id || "",
+      contract_amount: Number(detail.contract_amount || 0) / 10000,
+      contract_cases: Number(detail.contract_cases || 0),
+      actual_cases: detail.actual_cases ?? null,
+      settlement_amount: detail.settlement_amount !== null && detail.settlement_amount !== undefined ? Number(detail.settlement_amount) / 10000 : null,
+      final_payment_amount: detail.final_payment_amount !== null && detail.final_payment_amount !== undefined ? Number(detail.final_payment_amount) / 10000 : null,
+    });
+    payments.value = (detail.payments || []).map((payment: any) => ({
+      id: payment.id,
+      tempId: payment.id,
+      amount: Number(payment.amount || 0),
+      paid_date: payment.paid_date || "",
+      verified_date: payment.verified_date || "",
+      is_paid: !!payment.is_paid,
+      is_verified: !!payment.is_verified,
+      remark: payment.remark || "",
+    }));
+  } catch (e: any) {
+    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const addPayment = () => {
+  payments.value.push({
+    tempId: `${Date.now()}-${Math.random()}`,
+    amount: 0,
+    paid_date: "",
+    verified_date: "",
+    is_paid: false,
+    is_verified: false,
+    remark: "",
+  });
+};
+
+const removePayment = (index: number) => {
+  const payment = payments.value[index];
+  if (payment?.id) {
+    removedPaymentIds.value.push(payment.id);
+  }
+  payments.value.splice(index, 1);
+};
+
+const onPaidToggle = (payment: any) => {
+  if (!payment.is_paid) {
+    payment.paid_date = "";
+    payment.is_verified = false;
+    payment.verified_date = "";
+  }
+};
+
+const onVerifiedToggle = (payment: any) => {
+  if (payment.is_verified && !payment.is_paid) {
+    payment.is_paid = true;
+  }
+  if (!payment.is_verified) {
+    payment.verified_date = "";
+  }
+};
+
+const validatePayments = () => {
+  const errors: Record<string, string>[] = [];
+  let ok = true;
+  payments.value.forEach((payment, index) => {
+    const entry: Record<string, string> = {};
+    if (payment.amount === null || payment.amount === undefined || Number(payment.amount) < 0) {
+      entry.amount = TEXT.modules.feeContracts.amountInvalid;
+      ok = false;
+    }
+    if (payment.is_paid && !payment.paid_date) {
+      entry.paid_date = TEXT.modules.feeContracts.paidDateRequired;
+      ok = false;
+    }
+    if (payment.is_verified && !payment.verified_date) {
+      entry.verified_date = TEXT.modules.feeContracts.verifiedDateRequired;
+      ok = false;
+    }
+    if (payment.is_verified && !payment.is_paid) {
+      entry.verification = TEXT.modules.feeContracts.verifyRequiresPaid;
+      ok = false;
+    }
+    errors[index] = entry;
+  });
+  paymentErrors.value = errors;
+  return ok;
+};
+
+const submit = async () => {
+  if (!study.currentStudy?.id) return;
+  const formOk = await formRef.value?.validate?.().catch(() => false);
+  if (!formOk) return;
+  if (!validatePayments()) {
+    ElMessage.error(TEXT.modules.feeContracts.paymentValidationFailed);
+    return;
+  }
+  saving.value = true;
+  try {
+    const payload = {
+      project_id: study.currentStudy.id,
+      center_id: form.center_id,
+      contract_amount: Number(form.contract_amount || 0) * 10000,
+      contract_cases: Number(form.contract_cases || 0),
+      actual_cases: form.actual_cases === null ? null : Number(form.actual_cases),
+      settlement_amount: form.settlement_amount === null ? null : Number(form.settlement_amount) * 10000,
+      final_payment_amount: form.final_payment_amount === null ? null : Number(form.final_payment_amount) * 10000,
+    };
+    const updatePayload = {
+      contract_amount: payload.contract_amount,
+      contract_cases: payload.contract_cases,
+      actual_cases: payload.actual_cases,
+      settlement_amount: payload.settlement_amount,
+      final_payment_amount: payload.final_payment_amount,
+    };
+
+    let savedId = contractId.value || form.id;
+    if (isEdit.value && savedId) {
+      await updateContractFee(savedId, updatePayload);
+    } else {
+      const { data } = await createContractFee(payload);
+      savedId = data?.data?.id;
+      form.id = savedId || "";
+    }
+
+    if (savedId) {
+      for (const paymentId of removedPaymentIds.value) {
+        await deleteContractPayment(paymentId);
+      }
+      removedPaymentIds.value = [];
+      for (const payment of payments.value) {
+        const paymentPayload = {
+          amount: Number(payment.amount || 0),
+          paid_date: payment.paid_date || null,
+          verified_date: payment.verified_date || null,
+          is_paid: !!payment.is_paid,
+          is_verified: !!payment.is_verified,
+          remark: payment.remark || null,
+        };
+        if (payment.id) {
+          await updateContractPayment(payment.id, paymentPayload);
+        } else {
+          const { data } = await createContractPayment(savedId, paymentPayload);
+          payment.id = data?.data?.id;
+        }
+      }
+    }
+
+    ElMessage.success(TEXT.common.messages.saveSuccess);
+    if (savedId) {
+      router.push(`/fees/contracts/${savedId}`);
+    } else {
+      goBack();
+    }
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const goBack = () => router.push("/fees/contracts");
+
+onMounted(async () => {
+  await loadSites();
+  if (isEdit.value) {
+    await loadDetail();
+  } else {
+    form.project_id = study.currentStudy?.id || "";
+  }
+});
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+}
+
+.page-subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+}
+
+.header-action-btn {
+  height: 36px;
+  border-radius: 8px;
+}
+
+.form-card {
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+  overflow: hidden;
+}
+
+.section-margin {
+  margin-top: 24px;
+}
+
+.card-header {
+  padding: 4px 0;
+}
+
+.actions-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  border-left: 4px solid var(--el-color-primary);
+  padding-left: 12px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.section-empty {
+  padding: 24px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.payment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.payment-item {
+  border: 1px solid var(--ctms-border-color);
+  border-radius: 8px;
+  padding: 16px;
+  background-color: var(--ctms-bg-color-page);
+  transition: all 0.3s;
+}
+
+.payment-item:hover {
+  border-color: var(--ctms-border-color-hover);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+.payment-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.payment-seq {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.seq-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--el-color-primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.seq-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ctms-text-main);
+}
+
+.status-control {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status-picker {
+  width: 100%;
+}
+
+.payment-error {
+  color: var(--ctms-danger);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  padding-bottom: 32px;
+}
+
+.save-btn {
+  padding: 0 32px;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.compact-empty :deep(.state) {
+  padding: 24px 0 !important;
+  flex-direction: row;
+  gap: 12px;
+}
+.compact-empty :deep(.state-icon) {
+  font-size: 24px !important;
+  margin-bottom: 0 !important;
+}
+.compact-empty :deep(.state-title) {
+  font-size: 14px !important;
+  font-weight: normal !important;
+  margin: 0 !important;
+}
+.compact-empty :deep(.state-desc) {
+  margin: 0 !important;
+  font-size: 14px !important;
+}
+</style>
@@ -0,0 +1,441 @@
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ TEXT.modules.feeContracts.title }}</h1>
+        <p class="page-subtitle">{{ TEXT.modules.feeContracts.subtitle }}</p>
+      </div>
+      <el-button type="primary" :disabled="!canWrite" @click="goNew" class="header-action-btn">
+        <el-icon class="el-icon--left"><Plus /></el-icon>
+        {{ TEXT.modules.feeContracts.newTitle }}
+      </el-button>
+    </div>
+
+    <div class="overview">
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="`${TEXT.modules.feeContracts.totalContractAmount} (${TEXT.modules.feeContracts.centerCount} ${overview.centerCount})`"
+            :value="formatAmountWan(overview.totalContractAmount)"
+            unit="万元"
+            :loading="loading"
+            :icon="Coin"
+            type="primary"
+          />
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="TEXT.modules.feeContracts.totalPaidAmount"
+            :value="formatAmountWan(overview.totalPaidAmount)"
+            unit="万元"
+            :loading="loading"
+            :icon="Wallet"
+            type="success"
+          />
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="TEXT.modules.feeContracts.totalUnpaidAmount"
+            :value="formatAmountWan(overview.totalUnpaidAmount)"
+            unit="万元"
+            :loading="loading"
+            :icon="CircleClose"
+            type="warning"
+          />
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="TEXT.modules.feeContracts.totalVerifiedAmount"
+            :value="formatAmountWan(overview.totalVerifiedAmount)"
+            unit="万元"
+            :loading="loading"
+            :icon="CircleCheck"
+            type="info"
+          />
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-card class="filter-card" shadow="never">
+      <el-form :inline="true" :model="filters" class="filter-form">
+        <el-form-item label="" class="filter-item">
+          <el-select v-model="filters.centerId" clearable :placeholder="TEXT.common.fields.site" class="filter-select">
+            <template #prefix>
+              <el-icon><Location /></el-icon>
+            </template>
+            <el-option
+              v-for="site in sites"
+              :key="site.id"
+              :label="site.name || TEXT.common.fallback"
+              :value="site.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" class="filter-item">
+          <el-input v-model="filters.q" :placeholder="TEXT.common.placeholders.keyword" clearable class="filter-input">
+             <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="filter-actions">
+          <el-button type="primary" @click="load">{{ TEXT.common.actions.search }}</el-button>
+          <el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="load">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <el-card v-else class="table-card" shadow="never">
+      <el-table :data="contracts" style="width: 100%" @row-click="onRowClick" :header-cell-style="{ background: '#f8f9fb' }">
+        <el-table-column prop="center_name" :label="TEXT.common.fields.site" min-width="180">
+          <template #default="scope">
+            <div class="site-cell">
+              <span class="site-name">{{ scope.row.center_name || TEXT.common.fallback }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.modules.feeContracts.contractAmount" width="160" align="right">
+          <template #default="scope">
+            <span class="amount-text">{{ formatAmountWan(scope.row.contract_amount) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.modules.feeContracts.caseProgress" min-width="150" align="center">
+          <template #default="scope">
+             <el-tag effect="plain" type="info">
+              {{ displayCases(scope.row.contract_cases, scope.row.actual_cases) }}
+             </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.modules.feeContracts.paidSummary" min-width="180">
+          <template #default="scope">
+            <div class="summary-line">
+              <span>{{ TEXT.modules.feeContracts.paidTotal }}</span>
+              <span class="amount-highlight success">{{ formatAmountWan(scope.row.paid_total) }}</span>
+            </div>
+            <div class="summary-line">
+              <span>{{ TEXT.modules.feeContracts.unpaidBalance }}</span>
+              <span class="amount-highlight warning" v-if="scope.row.unpaid_balance > 0">{{ formatAmountWan(scope.row.unpaid_balance) }}</span>
+              <span class="amount-muted" v-else>0.00</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.modules.feeContracts.verifySummary" min-width="180">
+          <template #default="scope">
+            <div class="summary-line">
+              <span>{{ TEXT.modules.feeContracts.verifiedTotal }}</span>
+              <span class="amount-highlight info">{{ formatAmountWan(scope.row.verified_total) }}</span>
+            </div>
+            <div class="summary-line">
+              <span>{{ TEXT.modules.feeContracts.unverifiedBalance }}</span>
+              <span class="amount-highlight warning" v-if="scope.row.unverified_balance > 0">{{ formatAmountWan(scope.row.unverified_balance) }}</span>
+               <span class="amount-muted" v-else>0.00</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.modules.feeContracts.recentDates" min-width="200">
+           <template #default="scope">
+            <div class="date-line">
+              <span class="date-label">{{ TEXT.modules.feeContracts.lastPaid }}</span>
+              <span class="date-value">{{ displayDate(scope.row.last_paid_date) }}</span>
+            </div>
+            <div class="date-line">
+              <span class="date-label">{{ TEXT.modules.feeContracts.lastVerified }}</span>
+              <span class="date-value">{{ displayDate(scope.row.last_verified_date) }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.fields.remark" min-width="180" show-overflow-tooltip>
+          <template #default="scope">
+            {{ scope.row.remark || TEXT.common.fallback }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.actions.delete" width="120">
+          <template #default="scope">
+            <el-button
+              link
+              type="danger"
+              size="small"
+              :disabled="!canWrite"
+              @click.stop="remove(scope.row)"
+            >
+              {{ TEXT.common.actions.delete }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <StateEmpty v-if="contracts.length === 0" :description="TEXT.modules.feeContracts.empty" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Coin, Wallet, CircleCheck, CircleClose, Plus, Location, Search } from "@element-plus/icons-vue";
+import { deleteContractFee, listContractFees } from "../../api/feeContracts";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import { usePermission } from "../../utils/permission";
+import { displayDate } from "../../utils/display";
+import StateEmpty from "../../components/StateEmpty.vue";
+import StateLoading from "../../components/StateLoading.vue";
+import StateError from "../../components/StateError.vue";
+import KpiCard from "../../components/KpiCard.vue";
+import { TEXT } from "../../locales";
+
+const router = useRouter();
+const study = useStudyStore();
+const { can } = usePermission();
+const canWrite = computed(() => can("fees.contract.write"));
+
+const loading = ref(false);
+const errorMessage = ref("");
+const contracts = ref<any[]>([]);
+const sites = ref<any[]>([]);
+
+const filters = reactive({
+  centerId: "",
+  q: "",
+});
+
+const toNumber = (value: any) => {
+  const numberValue = Number(value);
+  return Number.isNaN(numberValue) ? 0 : numberValue;
+};
+
+const overview = computed(() => {
+  const totals = contracts.value.reduce(
+    (acc, item) => {
+      acc.totalContractAmount += toNumber(item.contract_amount);
+      acc.totalPaidAmount += toNumber(item.paid_total);
+      acc.totalUnpaidAmount += toNumber(item.unpaid_balance);
+      acc.totalVerifiedAmount += toNumber(item.verified_total);
+      return acc;
+    },
+    {
+      totalContractAmount: 0,
+      totalPaidAmount: 0,
+      totalUnpaidAmount: 0,
+      totalVerifiedAmount: 0,
+    }
+  );
+  return {
+    ...totals,
+    centerCount: contracts.value.length,
+  };
+});
+
+const loadSites = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await fetchSites(studyId, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
+const load = async () => {
+  const projectId = study.currentStudy?.id;
+  if (!projectId) return;
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const { data } = await listContractFees({
+      projectId,
+      centerId: filters.centerId || undefined,
+      q: filters.q || undefined,
+    });
+    contracts.value = data?.data || [];
+  } catch (e: any) {
+    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetFilters = () => {
+  filters.centerId = "";
+  filters.q = "";
+  load();
+};
+
+const goNew = () => router.push("/fees/contracts/new");
+const goDetail = (id: string) => router.push(`/fees/contracts/${id}`);
+const onRowClick = (row: any) => {
+  if (!row?.id) return;
+  goDetail(row.id);
+};
+
+const remove = async (row: any) => {
+  if (!row?.id || !canWrite.value) return;
+  const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
+  if (!ok) return;
+  try {
+    await deleteContractFee(row.id);
+    ElMessage.success(TEXT.common.messages.deleteSuccess);
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
+  }
+};
+
+const displayCases = (contractCases: any, actualCases: any) => {
+  const contractValue = Number(contractCases ?? 0);
+  const actualValue = Number(actualCases ?? 0);
+  if (Number.isNaN(contractValue) || Number.isNaN(actualValue)) {
+    return TEXT.common.fallback;
+  }
+  return `${actualValue}/${contractValue}`;
+};
+
+const formatAmountWan = (value: any) => {
+  const numberValue = Number(value);
+  if (Number.isNaN(numberValue)) return TEXT.common.fallback;
+  return (numberValue / 10000).toFixed(2);
+};
+
+onMounted(async () => {
+  await loadSites();
+  load();
+});
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+}
+
+.header-action-btn {
+  height: 36px;
+  padding: 0 20px;
+  border-radius: 8px;
+}
+
+.overview {
+  margin-bottom: 4px;
+}
+
+.filter-card {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.filter-card :deep(.el-card__body) {
+  padding: 0;
+}
+
+.filter-form {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  background: white;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+}
+
+.filter-item {
+  margin-bottom: 0 !important;
+  margin-right: 0 !important;
+}
+
+.filter-select,
+.filter-input {
+  width: 240px;
+}
+
+.filter-actions {
+  margin-left: auto !important;
+  margin-bottom: 0 !important;
+}
+
+.table-card {
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+  overflow: hidden;
+}
+
+.site-cell {
+  font-weight: 500;
+  color: var(--ctms-text-main);
+}
+
+.amount-text {
+  font-family: var(--el-font-family);
+  font-weight: 500;
+}
+
+.summary-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  margin-bottom: 4px;
+  color: var(--ctms-text-regular);
+}
+
+.summary-line:last-child {
+  margin-bottom: 0;
+}
+
+.amount-highlight {
+  font-weight: 600;
+  font-family: var(--el-font-family);
+}
+
+.amount-highlight.success { color: var(--el-color-success); }
+.amount-highlight.warning { color: var(--el-color-warning); }
+.amount-highlight.info { color: var(--el-color-info); }
+.amount-muted { color: var(--ctms-text-placeholder); }
+
+.date-line {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.date-label {
+  color: var(--ctms-text-secondary);
+}
+
+.date-value {
+  color: var(--ctms-text-regular);
+  font-family: var(--el-font-family);
+}
+</style>
@@ -0,0 +1,283 @@
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ TEXT.modules.feeSpecials.detailTitle }}</h1>
+        <p class="page-subtitle">{{ TEXT.modules.feeSpecials.detailSubtitle }}</p>
+      </div>
+      <div class="actions">
+        <el-button type="primary" :disabled="!canWrite" @click="goEdit" class="header-action-btn copy-btn">
+          <el-icon class="el-icon--left"><Edit /></el-icon>
+          {{ TEXT.common.actions.edit }}
+        </el-button>
+        <el-button @click="goBack" class="header-action-btn">
+          {{ TEXT.common.actions.back }}
+        </el-button>
+      </div>
+    </div>
+
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="load">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <template v-else>
+      <el-card class="detail-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
+            <div class="status-badges">
+              <el-tag v-if="detail.is_paid" type="success" effect="dark" size="default">{{ TEXT.modules.feeSpecials.isPaid }}</el-tag>
+              <el-tag v-else type="info" effect="plain" size="default">{{ TEXT.modules.feeSpecials.unpaid }}</el-tag>
+              
+              <el-tag v-if="detail.is_verified" type="info" effect="dark" size="default">{{ TEXT.modules.feeSpecials.isVerified }}</el-tag>
+              <el-tag v-else type="info" effect="plain" size="default">{{ TEXT.modules.feeSpecials.unverified }}</el-tag>
+            </div>
+          </div>
+        </template>
+        <el-descriptions :column="2" border class="custom-descriptions">
+          <el-descriptions-item :label="TEXT.common.fields.occurDate" label-class-name="desc-label">
+            <span class="date-text">{{ displayDate(detail.happen_date) }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.common.fields.site" label-class-name="desc-label">
+            {{ centerName || TEXT.common.fallback }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.common.fields.category" label-class-name="desc-label">
+            <el-tag size="small" :type="getCategoryType(detail.category)" effect="light">
+              {{ displayEnum(TEXT.enums.feeSpecialCategory, detail.category) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.common.fields.amount" label-class-name="desc-label">
+            <span class="amount-text">{{ formatAmount(detail.amount) }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.modules.feeSpecials.paidFlag" label-class-name="desc-label">
+             <span v-if="detail.is_paid">
+              {{ displayDate(detail.paid_date) }}
+            </span>
+            <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.modules.feeSpecials.verifiedFlag" label-class-name="desc-label">
+             <span v-if="detail.is_verified">
+              {{ displayDate(detail.verified_date) }}
+            </span>
+            <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item :label="TEXT.common.fields.description" :span="2" label-class-name="desc-label">
+            {{ detail.description || TEXT.common.fallback }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card class="section-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="header-title">{{ TEXT.modules.feeSpecials.attachmentTitle }}</span>
+          </div>
+        </template>
+        <FeeAttachmentPanel
+          v-if="expenseId"
+          :entity-type="'special_expense'"
+          :entity-id="expenseId"
+          :groups="attachmentGroups"
+        />
+      </el-card>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Edit } from "@element-plus/icons-vue";
+import { getSpecialExpense } from "../../api/feeSpecials";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import { usePermission } from "../../utils/permission";
+import { displayDate, displayEnum } from "../../utils/display";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
+import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
+import { TEXT } from "../../locales";
+
+const route = useRoute();
+const router = useRouter();
+const study = useStudyStore();
+const { can } = usePermission();
+const canWrite = computed(() => can("fees.special.write"));
+
+const expenseId = route.params.expenseId as string;
+const loading = ref(false);
+const errorMessage = ref("");
+const detail = reactive<any>({
+  happen_date: "",
+  center_id: "",
+  category: "",
+  amount: 0,
+  description: "",
+  is_paid: false,
+  paid_date: "",
+  is_verified: false,
+  verified_date: "",
+});
+const sites = ref<any[]>([]);
+
+const attachmentGroups = [
+  {
+    key: "voucher",
+    label: TEXT.modules.feeSpecials.attachmentVoucher,
+    description: TEXT.modules.feeSpecials.attachmentVoucherDesc,
+    emptyText: TEXT.modules.feeSpecials.attachmentVoucherEmpty,
+  },
+  {
+    key: "invoice",
+    label: TEXT.modules.feeSpecials.attachmentInvoice,
+    description: TEXT.modules.feeSpecials.attachmentInvoiceDesc,
+    emptyText: TEXT.modules.feeSpecials.attachmentInvoiceEmpty,
+  },
+  {
+    key: "other",
+    label: TEXT.modules.feeSpecials.attachmentOther,
+    description: TEXT.modules.feeSpecials.attachmentOtherDesc,
+    emptyText: TEXT.modules.feeSpecials.attachmentOtherEmpty,
+  },
+];
+
+const centerName = computed(() => {
+  const match = sites.value.find((site) => site.id === detail.center_id);
+  return match?.name || "";
+});
+
+const loadSites = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await fetchSites(studyId, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
+const load = async () => {
+  if (!expenseId) return;
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const { data } = await getSpecialExpense(expenseId);
+    Object.assign(detail, data?.data || {});
+  } catch (e: any) {
+    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const formatAmount = (value: any) => {
+  const numberValue = Number(value);
+  if (Number.isNaN(numberValue)) return TEXT.common.fallback;
+  return numberValue.toFixed(2);
+};
+
+const getCategoryType = (category: string) => {
+  if (category === 'travel') return 'warning';
+  if (category === 'meeting') return 'success';
+  if (category === 'material') return 'primary';
+  return 'info';
+};
+
+const goEdit = () => router.push(`/fees/special/${expenseId}/edit`);
+const goBack = () => router.push("/fees/special");
+
+onMounted(async () => {
+  await loadSites();
+  load();
+});
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+}
+
+.page-subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.header-action-btn {
+  height: 36px;
+  border-radius: 8px;
+  padding: 0 16px;
+}
+
+.detail-card, .section-card {
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  border-left: 4px solid var(--el-color-primary);
+  padding-left: 12px;
+}
+
+.status-badges {
+  display: flex;
+  gap: 8px;
+}
+
+.custom-descriptions :deep(.desc-label) {
+  background-color: var(--ctms-bg-color-page) !important;
+  color: var(--ctms-text-secondary);
+  width: 150px;
+  font-weight: 500;
+}
+
+.amount-text {
+  font-family: var(--el-font-family);
+  font-weight: 600;
+}
+
+.date-text {
+  font-family: var(--el-font-family);
+}
+
+.text-muted {
+  color: var(--ctms-text-placeholder);
+  font-size: 13px;
+}
+</style>
@@ -0,0 +1,495 @@
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ isEdit ? TEXT.modules.feeSpecials.editTitle : TEXT.modules.feeSpecials.newTitle }}</h1>
+        <p class="page-subtitle">{{ TEXT.modules.feeSpecials.formSubtitle }}</p>
+      </div>
+      <div class="actions">
+        <el-button @click="goBack" class="header-action-btn">{{ TEXT.common.actions.back }}</el-button>
+      </div>
+    </div>
+
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="loadDetail">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <template v-else>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="top">
+        <el-card class="form-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
+            </div>
+          </template>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item :label="TEXT.common.fields.site">
+                <el-select v-model="form.center_id" clearable :placeholder="TEXT.common.placeholders.select" class="full-width">
+                  <el-option
+                    v-for="site in sites"
+                    :key="site.id"
+                    :label="site.name || TEXT.common.fallback"
+                    :value="site.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.common.fields.occurDate" prop="happen_date">
+                <el-date-picker v-model="form.happen_date" type="date" value-format="YYYY-MM-DD" class="full-width" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.common.fields.category" prop="category" required>
+                <el-select v-model="form.category" :placeholder="TEXT.common.placeholders.select" class="full-width">
+                  <el-option v-for="option in categoryOptions" :key="option.value" :label="option.label" :value="option.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="TEXT.common.fields.amount" prop="amount" required>
+                <el-input-number v-model="form.amount" :min="0" :precision="2" class="full-width" controls-position="right" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item :label="TEXT.common.fields.description">
+                <el-input v-model="form.description" type="textarea" :rows="3" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="form-card section-margin" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span class="header-title">{{ TEXT.common.fields.status }}</span>
+            </div>
+          </template>
+          <div class="status-section">
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <div class="status-box">
+                  <div class="status-header">
+                    <span class="status-title">{{ TEXT.modules.feeSpecials.paidFlag }}</span>
+                    <el-switch v-model="form.is_paid" @change="onPaidToggle" />
+                  </div>
+                   <el-form-item :label="TEXT.common.fields.occurDate" :error="specialErrors.paid_date" class="status-form-item">
+                    <el-date-picker
+                      v-model="form.paid_date"
+                      type="date"
+                      value-format="YYYY-MM-DD"
+                      :placeholder="TEXT.common.placeholders.select"
+                      :disabled="!form.is_paid"
+                      class="full-width"
+                    />
+                  </el-form-item>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="status-box">
+                  <div class="status-header">
+                    <span class="status-title">{{ TEXT.modules.feeSpecials.verifiedFlag }}</span>
+                     <el-switch v-model="form.is_verified" @change="onVerifiedToggle" />
+                  </div>
+                  <el-form-item :label="TEXT.common.fields.occurDate" :error="specialErrors.verified_date" class="status-form-item">
+                    <el-date-picker
+                      v-model="form.verified_date"
+                      type="date"
+                      value-format="YYYY-MM-DD"
+                      :placeholder="TEXT.common.placeholders.select"
+                      :disabled="!form.is_verified"
+                      class="full-width"
+                    />
+                  </el-form-item>
+                </div>
+              </el-col>
+            </el-row>
+            <div v-if="specialErrors.verification" class="payment-error">
+              {{ specialErrors.verification }}
+            </div>
+          </div>
+        </el-card>
+
+        <el-card class="form-card section-margin" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span class="header-title">{{ TEXT.modules.feeSpecials.attachmentTitle }}</span>
+            </div>
+          </template>
+          <FeeAttachmentPanel
+            v-if="form.id"
+            :entity-type="'special_expense'"
+            :entity-id="form.id"
+            :groups="attachmentGroups"
+          />
+
+          <StateEmpty v-else :description="TEXT.modules.feeSpecials.uploadHint" class="compact-empty" />
+        </el-card>
+
+        <div class="footer-actions">
+          <el-button @click="goBack">{{ TEXT.common.actions.cancel }}</el-button>
+          <el-button type="primary" :loading="saving" @click="submit" class="save-btn">
+            {{ TEXT.common.actions.save }}
+          </el-button>
+        </div>
+      </el-form>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { createSpecialExpense, getSpecialExpense, updateSpecialExpense } from "../../api/feeSpecials";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import StateEmpty from "../../components/StateEmpty.vue";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
+import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
+import { TEXT } from "../../locales";
+
+const route = useRoute();
+const router = useRouter();
+const study = useStudyStore();
+
+const loading = ref(false);
+const saving = ref(false);
+const errorMessage = ref("");
+const sites = ref<any[]>([]);
+
+const formRef = ref();
+const form = reactive({
+  id: "",
+  project_id: "",
+  center_id: "",
+  category: "travel",
+  amount: 0,
+  happen_date: "",
+  description: "",
+  is_paid: false,
+  paid_date: "",
+  is_verified: false,
+  verified_date: "",
+});
+
+const specialErrors = reactive({
+  paid_date: "",
+  verified_date: "",
+  verification: "",
+});
+
+const expenseId = computed(() => route.params.expenseId as string | undefined);
+const isEdit = computed(() => !!expenseId.value);
+
+const attachmentGroups = [
+  {
+    key: "voucher",
+    label: TEXT.modules.feeSpecials.attachmentVoucher,
+    description: TEXT.modules.feeSpecials.attachmentVoucherDesc,
+    emptyText: TEXT.modules.feeSpecials.attachmentVoucherEmpty,
+  },
+  {
+    key: "invoice",
+    label: TEXT.modules.feeSpecials.attachmentInvoice,
+    description: TEXT.modules.feeSpecials.attachmentInvoiceDesc,
+    emptyText: TEXT.modules.feeSpecials.attachmentInvoiceEmpty,
+  },
+  {
+    key: "other",
+    label: TEXT.modules.feeSpecials.attachmentOther,
+    description: TEXT.modules.feeSpecials.attachmentOtherDesc,
+    emptyText: TEXT.modules.feeSpecials.attachmentOtherEmpty,
+  },
+];
+
+const categoryOptions = Object.keys(TEXT.enums.feeSpecialCategory).map((value) => ({
+  value,
+  label: (TEXT.enums.feeSpecialCategory as any)[value],
+}));
+
+const rules = {
+  category: [{ required: true, message: TEXT.common.messages.required, trigger: "change" }],
+  amount: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
+};
+
+const loadSites = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await fetchSites(studyId, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
+const loadDetail = async () => {
+  if (!expenseId.value) return;
+  loading.value = true;
+  errorMessage.value = "";
+  resetSpecialErrors();
+  try {
+    const { data } = await getSpecialExpense(expenseId.value);
+    const detail = data?.data || {};
+    Object.assign(form, {
+      id: detail.id || expenseId.value,
+      project_id: detail.project_id || study.currentStudy?.id || "",
+      center_id: detail.center_id || "",
+      category: detail.category || "travel",
+      amount: Number(detail.amount || 0),
+      happen_date: detail.happen_date || "",
+      description: detail.description || "",
+      is_paid: !!detail.is_paid,
+      paid_date: detail.paid_date || "",
+      is_verified: !!detail.is_verified,
+      verified_date: detail.verified_date || "",
+    });
+  } catch (e: any) {
+    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetSpecialErrors = () => {
+  specialErrors.paid_date = "";
+  specialErrors.verified_date = "";
+  specialErrors.verification = "";
+};
+
+const onPaidToggle = () => {
+  if (!form.is_paid) {
+    form.paid_date = "";
+    form.is_verified = false;
+    form.verified_date = "";
+  }
+};
+
+const onVerifiedToggle = () => {
+  if (form.is_verified && !form.is_paid) {
+    form.is_paid = true;
+  }
+  if (!form.is_verified) {
+    form.verified_date = "";
+  }
+};
+
+const validateSpecial = () => {
+  resetSpecialErrors();
+  let ok = true;
+  if (form.is_paid && !form.paid_date) {
+    specialErrors.paid_date = TEXT.modules.feeSpecials.paidDateRequired;
+    ok = false;
+  }
+  if (form.is_verified && !form.verified_date) {
+    specialErrors.verified_date = TEXT.modules.feeSpecials.verifiedDateRequired;
+    ok = false;
+  }
+  if (form.is_verified && !form.is_paid) {
+    specialErrors.verification = TEXT.modules.feeSpecials.verifyRequiresPaid;
+    ok = false;
+  }
+  return ok;
+};
+
+const submit = async () => {
+  if (!study.currentStudy?.id) return;
+  const formOk = await formRef.value?.validate?.().catch(() => false);
+  if (!formOk) return;
+  if (!validateSpecial()) {
+    ElMessage.error(TEXT.modules.feeSpecials.validationFailed);
+    return;
+  }
+  saving.value = true;
+  try {
+    const payload = {
+      project_id: study.currentStudy.id,
+      center_id: form.center_id || null,
+      category: form.category,
+      amount: Number(form.amount || 0),
+      happen_date: form.happen_date || null,
+      description: form.description || null,
+      is_paid: !!form.is_paid,
+      paid_date: form.paid_date || null,
+      is_verified: !!form.is_verified,
+      verified_date: form.verified_date || null,
+    };
+    const updatePayload = {
+      center_id: payload.center_id,
+      category: payload.category,
+      amount: payload.amount,
+      happen_date: payload.happen_date,
+      description: payload.description,
+      is_paid: payload.is_paid,
+      paid_date: payload.paid_date,
+      is_verified: payload.is_verified,
+      verified_date: payload.verified_date,
+    };
+
+    let savedId = expenseId.value || form.id;
+    if (isEdit.value && savedId) {
+      await updateSpecialExpense(savedId, updatePayload);
+    } else {
+      const { data } = await createSpecialExpense(payload);
+      savedId = data?.data?.id;
+      form.id = savedId || "";
+    }
+
+    ElMessage.success(TEXT.common.messages.saveSuccess);
+    if (savedId) {
+      router.push(`/fees/special/${savedId}`);
+    } else {
+      goBack();
+    }
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const goBack = () => router.push("/fees/special");
+
+onMounted(async () => {
+  await loadSites();
+  if (isEdit.value) {
+    await loadDetail();
+  } else {
+    form.project_id = study.currentStudy?.id || "";
+  }
+});
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+}
+
+.page-subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+}
+
+.header-action-btn {
+  height: 36px;
+  border-radius: 8px;
+  padding: 0 16px;
+}
+
+.form-card {
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+  overflow: hidden;
+}
+
+.section-margin {
+  margin-top: 24px;
+}
+
+.card-header {
+  padding: 4px 0;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  border-left: 4px solid var(--el-color-primary);
+  padding-left: 12px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.status-section {
+  padding: 8px 0;
+}
+
+.status-box {
+  background-color: var(--ctms-bg-color-page);
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid var(--ctms-border-color);
+  height: 100%;
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.status-title {
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.status-form-item {
+  margin-bottom: 0 !important;
+}
+
+.payment-error {
+  color: var(--ctms-danger);
+  font-size: 12px;
+  margin-top: 12px;
+}
+
+.footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  padding-bottom: 32px;
+}
+
+.save-btn {
+  padding: 0 32px;
+}
+
+.compact-empty :deep(.state) {
+  padding: 24px 0 !important;
+  flex-direction: row;
+  gap: 12px;
+}
+.compact-empty :deep(.state-icon) {
+  font-size: 24px !important;
+  margin-bottom: 0 !important;
+}
+.compact-empty :deep(.state-title) {
+  font-size: 14px !important;
+  font-weight: normal !important;
+  margin: 0 !important;
+}
+.compact-empty :deep(.state-desc) {
+  margin: 0 !important;
+  font-size: 14px !important;
+}
+</style>
@@ -0,0 +1,447 @@
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ TEXT.modules.feeSpecials.title }}</h1>
+        <p class="page-subtitle">{{ TEXT.modules.feeSpecials.subtitle }}</p>
+      </div>
+      <el-button type="primary" :disabled="!canWrite" @click="goNew" class="header-action-btn">
+        <el-icon class="el-icon--left"><Plus /></el-icon>
+        {{ TEXT.modules.feeSpecials.newTitle }}
+      </el-button>
+    </div>
+
+    <div class="overview">
+      <div class="overview-header">
+        <span class="overview-title">{{ TEXT.modules.feeSpecials.overviewTitle }}</span>
+        <el-tag effect="plain" type="info" size="small">{{ TEXT.modules.feeSpecials.recordCount }} {{ overview.recordCount }}</el-tag>
+      </div>
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="TEXT.modules.feeSpecials.totalAmount"
+            :value="formatAmount(overview.totalAmount)"
+            unit="元"
+            :loading="loading"
+            :icon="Coin"
+            type="primary"
+          />
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="TEXT.modules.feeSpecials.paidAmount"
+            :value="formatAmount(overview.paidAmount)"
+            unit="元"
+            :loading="loading"
+            :icon="Wallet"
+            type="success"
+          />
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="TEXT.modules.feeSpecials.verifiedAmount"
+            :value="formatAmount(overview.verifiedAmount)"
+            unit="元"
+            :loading="loading"
+            :icon="CircleCheck"
+            type="info"
+          />
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <KpiCard
+            :title="TEXT.modules.feeSpecials.attachmentTotal"
+            :value="overview.attachmentTotal"
+            :loading="loading"
+            :icon="Document"
+            type="warning"
+          />
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-card class="filter-card" shadow="never">
+      <el-form :inline="true" :model="filters" class="filter-form">
+        <el-form-item label="" class="filter-item">
+          <el-select v-model="filters.centerId" clearable :placeholder="TEXT.common.fields.site" class="filter-select">
+            <template #prefix>
+              <el-icon><Location /></el-icon>
+            </template>
+            <el-option
+              v-for="site in sites"
+              :key="site.id"
+              :label="site.name || TEXT.common.fallback"
+              :value="site.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" class="filter-item">
+          <el-select v-model="filters.category" clearable :placeholder="TEXT.common.fields.category" class="filter-select">
+            <template #prefix>
+              <el-icon><Menu /></el-icon>
+            </template>
+            <el-option v-for="option in categoryOptions" :key="option.value" :label="option.label" :value="option.value" />
+          </el-select>
+        </el-form-item>
+         <el-form-item label="" class="filter-item">
+          <el-date-picker
+            v-model="filters.dateRange"
+            type="daterange"
+            unlink-panels
+            value-format="YYYY-MM-DD"
+            :start-placeholder="TEXT.common.placeholders.startDate"
+            :end-placeholder="TEXT.common.placeholders.endDate"
+            class="filter-date"
+          />
+        </el-form-item>
+        <el-form-item class="filter-actions">
+          <el-button type="primary" @click="load">{{ TEXT.common.actions.search }}</el-button>
+          <el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="load">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <el-card v-else class="table-card" shadow="never">
+      <el-table :data="expenses" style="width: 100%" @row-click="onRowClick" :header-cell-style="{ background: '#f8f9fb' }">
+        <el-table-column :label="TEXT.common.fields.occurDate" width="140">
+          <template #default="scope">
+            <span class="date-text">{{ displayDate(scope.row.happen_date) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.fields.site" min-width="160">
+          <template #default="scope">
+            <span class="site-text">{{ scope.row.center_name || TEXT.common.fallback }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.fields.category" width="140">
+          <template #default="scope">
+            <el-tag size="small" :type="getCategoryType(scope.row.category)" effect="light" class="category-tag">
+              {{ displayEnum(TEXT.enums.feeSpecialCategory, scope.row.category) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.fields.amount" width="140" align="right">
+          <template #default="scope">
+            <span class="amount-text">{{ formatAmount(scope.row.amount) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" :label="TEXT.common.fields.remark" min-width="200" show-overflow-tooltip>
+          <template #default="scope">
+            {{ scope.row.description || TEXT.common.fallback }}
+          </template>
+        </el-table-column>
+        <el-table-column width="140" align="center" :label="TEXT.common.labels.status">
+          <template #default="scope">
+            <el-tooltip :content="scope.row.is_paid ? `${TEXT.modules.feeSpecials.isPaid} (${displayDate(scope.row.paid_date)})` : TEXT.modules.feeSpecials.unpaid" placement="top">
+              <el-icon :class="scope.row.is_paid ? 'status-icon success' : 'status-icon muted'"><Wallet /></el-icon>
+            </el-tooltip>
+             <el-tooltip :content="scope.row.is_verified ? `${TEXT.modules.feeSpecials.isVerified} (${displayDate(scope.row.verified_date)})` : TEXT.modules.feeSpecials.unverified" placement="top">
+              <el-icon :class="scope.row.is_verified ? 'status-icon info' : 'status-icon muted'"><CircleCheck /></el-icon>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.modules.feeSpecials.attachmentCount" width="120" align="center">
+          <template #default="scope">
+            <el-tag v-if="scope.row.attachments_count > 0" effect="plain" type="info" round size="small">
+              {{ scope.row.attachments_count }}
+            </el-tag>
+            <span v-else class="text-muted">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.actions.delete" width="120">
+          <template #default="scope">
+            <el-button
+              link
+              type="danger"
+              size="small"
+              :disabled="!canWrite"
+              @click.stop="remove(scope.row)"
+            >
+              {{ TEXT.common.actions.delete }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <StateEmpty v-if="expenses.length === 0" :description="TEXT.modules.feeSpecials.empty" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Coin, Wallet, CircleCheck, Document, Plus, Location, Menu } from "@element-plus/icons-vue";
+import { deleteSpecialExpense, listSpecialExpenses } from "../../api/feeSpecials";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import { usePermission } from "../../utils/permission";
+import { displayDate, displayEnum } from "../../utils/display";
+import StateEmpty from "../../components/StateEmpty.vue";
+import StateLoading from "../../components/StateLoading.vue";
+import StateError from "../../components/StateError.vue";
+import KpiCard from "../../components/KpiCard.vue";
+import { TEXT } from "../../locales";
+
+const router = useRouter();
+const study = useStudyStore();
+const { can } = usePermission();
+const canWrite = computed(() => can("fees.special.write"));
+
+const loading = ref(false);
+const errorMessage = ref("");
+const expenses = ref<any[]>([]);
+const sites = ref<any[]>([]);
+
+const filters = reactive({
+  centerId: "",
+  category: "",
+  dateRange: [] as string[],
+});
+
+const categoryOptions = Object.keys(TEXT.enums.feeSpecialCategory).map((value) => ({
+  value,
+  label: TEXT.enums.feeSpecialCategory[value],
+}));
+
+const toNumber = (value: any) => {
+  const numberValue = Number(value);
+  return Number.isNaN(numberValue) ? 0 : numberValue;
+};
+
+const overview = computed(() => {
+  const totals = expenses.value.reduce(
+    (acc, item) => {
+      acc.totalAmount += toNumber(item.amount);
+      if (item.is_paid) acc.paidAmount += toNumber(item.amount);
+      if (item.is_verified) acc.verifiedAmount += toNumber(item.amount);
+      acc.attachmentTotal += toNumber(item.attachments_count);
+      return acc;
+    },
+    {
+      totalAmount: 0,
+      paidAmount: 0,
+      verifiedAmount: 0,
+      attachmentTotal: 0,
+    }
+  );
+  return {
+    ...totals,
+    recordCount: expenses.value.length,
+  };
+});
+
+const loadSites = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  try {
+    const { data } = await fetchSites(studyId, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    sites.value = [];
+  }
+};
+
+const load = async () => {
+  const projectId = study.currentStudy?.id;
+  if (!projectId) return;
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const [dateFrom, dateTo] = filters.dateRange || [];
+    const { data } = await listSpecialExpenses({
+      projectId,
+      centerId: filters.centerId || undefined,
+      category: filters.category || undefined,
+      dateFrom: dateFrom || undefined,
+      dateTo: dateTo || undefined,
+    });
+    expenses.value = data?.data || [];
+  } catch (e: any) {
+    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetFilters = () => {
+  filters.centerId = "";
+  filters.category = "";
+  filters.dateRange = [];
+  load();
+};
+
+const goNew = () => router.push("/fees/special/new");
+const goDetail = (id: string) => router.push(`/fees/special/${id}`);
+const onRowClick = (row: any) => {
+  if (!row?.id) return;
+  goDetail(row.id);
+};
+
+const remove = async (row: any) => {
+  if (!row?.id || !canWrite.value) return;
+  const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
+  if (!ok) return;
+  try {
+    await deleteSpecialExpense(row.id);
+    ElMessage.success(TEXT.common.messages.deleteSuccess);
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
+  }
+};
+
+const formatAmount = (value: any) => {
+  const numberValue = Number(value);
+  if (Number.isNaN(numberValue)) return TEXT.common.fallback;
+  return numberValue.toFixed(2);
+};
+
+const getCategoryType = (category: string) => {
+  if (category === 'travel') return 'warning';
+  if (category === 'meeting') return 'success';
+  if (category === 'material') return 'primary';
+  return 'info';
+};
+
+onMounted(async () => {
+  await loadSites();
+  load();
+});
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+}
+
+.header-action-btn {
+  height: 36px;
+  padding: 0 20px;
+  border-radius: 8px;
+}
+
+.overview {
+  margin-bottom: 4px;
+}
+
+.overview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 4px 8px;
+}
+
+.overview-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.filter-card {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.filter-card :deep(.el-card__body) {
+  padding: 0;
+}
+
+.filter-form {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  background: white;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+}
+
+.filter-item {
+  margin-bottom: 0 !important;
+  margin-right: 0 !important;
+}
+
+.filter-select {
+  width: 200px;
+}
+
+.filter-date {
+  width: 280px;
+}
+
+.filter-actions {
+  margin-left: auto !important;
+  margin-bottom: 0 !important;
+}
+
+.table-card {
+  border-radius: 12px;
+  border: 1px solid var(--ctms-border-color);
+  overflow: hidden;
+}
+
+.date-text {
+  font-family: var(--el-font-family);
+  color: var(--ctms-text-regular);
+}
+
+.site-text {
+  font-weight: 500;
+  color: var(--ctms-text-main);
+}
+
+.amount-text {
+  font-family: var(--el-font-family);
+  font-weight: 500;
+}
+
+.category-tag {
+  font-weight: 500;
+}
+
+.status-icon {
+  font-size: 18px;
+  margin: 0 6px;
+  outline: none;
+}
+
+.status-icon.success { color: var(--el-color-success); }
+.status-icon.info { color: var(--el-color-info); }
+.status-icon.muted { color: var(--ctms-border-color); opacity: 0.6; }
+
+.text-muted {
+  color: var(--ctms-text-placeholder);
+}
+</style>