fix(加班申请、工作报告、我的绩效): 重构页面样式、修复一系列bug、对不合理的地方进行调整。

src/views/personal-center/my-performance/modules/performance-action-dialog.vue

@@ -80,7 +80,7 @@ watch(visible, isVisible => {
     <ElForm ref="formRef" :model="form" :rules="rules" label-position="top">
       <ElDescriptions :column="1" border>
         <ElDescriptionsItem label="绩效月份">{{ props.rowData?.periodMonth || '--' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="员工">{{ props.rowData?.employeeName || '--' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="下属">{{ props.rowData?.employeeName || '--' }}</ElDescriptionsItem>
         <ElDescriptionsItem label="实际得分">{{ props.rowData?.actualScoreTotal ?? '--' }}</ElDescriptionsItem>
       </ElDescriptions>
 

src/views/personal-center/my-performance/modules/performance-excel-editor-drawer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import type { FormRules } from 'element-plus';
+import JSZip from 'jszip';
 import '@univerjs/preset-sheets-core/lib/index.css';
 import {
   createPerformanceSheet,
@@ -58,8 +59,9 @@ const createForm = reactive({
 
 const createFormRules = computed<FormRules>(() => ({
   periodMonth: [createRequiredRule('请选择绩效月份')],
-  employeeId: [createRequiredRule('请选择员工')]
+  employeeId: [createRequiredRule('请选择下属')]
 }));
+const ASSESSED_EMPLOYEE_TEXT_PATTERN = /(被考核人\s*[：:]\s*)(.+)/u;
 
 let univerInstance: any = null;
 let univerAPI: any = null;
@@ -68,6 +70,7 @@ let createUniverFn: any = null;
 let UniverSheetsCorePresetFn: any = null;
 let univerLocales: Record<string, unknown> | null = null;
 let excelRuntimeLoading: Promise<void> | null = null;
+const DEFAULT_SHEET_ZOOM_RATIO = 0.4;
 
 const isCreateMode = computed(() => props.mode === 'create');
 const drawerTitle = computed(() => {
@@ -160,6 +163,167 @@ function transformUniverToExcel(snapshot: any, fileName: string) {
   });
 }
 
+async function normalizeExcelBuffer(buffer: BlobPart): Promise<ArrayBuffer> {
+  if (buffer instanceof ArrayBuffer) {
+    return buffer;
+  }
+
+  if (ArrayBuffer.isView(buffer)) {
+    return new Uint8Array(buffer.buffer, buffer.byteOffset, buffer.byteLength).slice().buffer;
+  }
+
+  if (buffer instanceof Blob) {
+    return buffer.arrayBuffer();
+  }
+
+  throw new Error('Excel 导出结果格式不受支持');
+}
+
+function applySheetZoomRatio(snapshot: any, zoomRatio = DEFAULT_SHEET_ZOOM_RATIO) {
+  const data = snapshot || {};
+
+  if (data.sheets && typeof data.sheets === 'object') {
+    Object.values(data.sheets).forEach((sheet: any) => {
+      if (sheet && typeof sheet === 'object') {
+        sheet.zoomRatio = zoomRatio;
+      }
+    });
+  }
+
+  return data;
+}
+
+function replaceAssessedEmployeeText(value: string, employeeName: string) {
+  if (!ASSESSED_EMPLOYEE_TEXT_PATTERN.test(value)) {
+    return value;
+  }
+
+  return value.replace(ASSESSED_EMPLOYEE_TEXT_PATTERN, `$1${employeeName}`);
+}
+
+function injectAssessedEmployeeName(snapshot: any, employeeName: string) {
+  if (!snapshot || !employeeName) return snapshot;
+
+  const visited = new WeakSet<object>();
+
+  const walk = (target: unknown) => {
+    if (typeof target === 'string') {
+      return replaceAssessedEmployeeText(target, employeeName);
+    }
+
+    if (!target || typeof target !== 'object') {
+      return target;
+    }
+
+    if (visited.has(target as object)) {
+      return target;
+    }
+
+    visited.add(target as object);
+
+    if (Array.isArray(target)) {
+      target.forEach((item, index) => {
+        target[index] = walk(item);
+      });
+
+      return target;
+    }
+
+    Object.entries(target).forEach(([key, value]) => {
+      (target as Record<string, unknown>)[key] = walk(value);
+    });
+
+    return target;
+  };
+
+  return walk(snapshot);
+}
+
+function findFirstElementByLocalName(parent: Element | Document, localName: string) {
+  return Array.from(parent.childNodes).find(
+    node => node.nodeType === Node.ELEMENT_NODE && (node as Element).localName === localName
+  ) as Element | undefined;
+}
+
+function ensureChildElement(document: XMLDocument, parent: Element, localName: string) {
+  const existing = Array.from(parent.childNodes).find(
+    node => node.nodeType === Node.ELEMENT_NODE && (node as Element).localName === localName
+  ) as Element | undefined;
+
+  if (existing) return existing;
+
+  const namespace = parent.namespaceURI || document.documentElement?.namespaceURI || null;
+  const element = namespace ? document.createElementNS(namespace, localName) : document.createElement(localName);
+  parent.appendChild(element);
+
+  return element;
+}
+
+function createXmlRoot(document: XMLDocument, localName: string, namespace?: string | null) {
+  const root = namespace ? document.createElementNS(namespace, localName) : document.createElement(localName);
+  document.appendChild(root);
+
+  return root;
+}
+
+function applyWorksheetZoomXml(xmlText: string, zoomScale: number) {
+  const document = new DOMParser().parseFromString(xmlText, 'application/xml');
+  const root =
+    document.documentElement && document.documentElement.localName !== 'parsererror'
+      ? document.documentElement
+      : createXmlRoot(document, 'worksheet', 'http://schemas.openxmlformats.org/spreadsheetml/2006/main');
+  const sheetViews = ensureChildElement(document, root, 'sheetViews');
+  const sheetView =
+    findFirstElementByLocalName(sheetViews, 'sheetView') || ensureChildElement(document, sheetViews, 'sheetView');
+
+  sheetView.setAttribute('workbookViewId', sheetView.getAttribute('workbookViewId') || '0');
+  sheetView.setAttribute('zoomScale', String(zoomScale));
+  sheetView.setAttribute('zoomScaleNormal', String(zoomScale));
+  sheetView.setAttribute('zoomScalePageLayoutView', String(zoomScale));
+
+  return new XMLSerializer().serializeToString(document);
+}
+
+function applyWorkbookZoomXml(xmlText: string, zoomScale: number) {
+  const document = new DOMParser().parseFromString(xmlText, 'application/xml');
+  const root =
+    document.documentElement && document.documentElement.localName !== 'parsererror'
+      ? document.documentElement
+      : createXmlRoot(document, 'workbook', 'http://schemas.openxmlformats.org/spreadsheetml/2006/main');
+  const bookViews = ensureChildElement(document, root, 'bookViews');
+  const workbookView =
+    findFirstElementByLocalName(bookViews, 'workbookView') || ensureChildElement(document, bookViews, 'workbookView');
+
+  workbookView.setAttribute('zoomScale', String(zoomScale));
+  workbookView.setAttribute('zoomScaleNormal', String(zoomScale));
+
+  return new XMLSerializer().serializeToString(document);
+}
+
+async function applyExcelZoomMetadata(buffer: BlobPart, zoomRatio = DEFAULT_SHEET_ZOOM_RATIO) {
+  const zoomScale = Math.max(10, Math.min(400, Math.round(zoomRatio * 100)));
+  const zip = await JSZip.loadAsync(await normalizeExcelBuffer(buffer));
+  const worksheetPaths = Object.keys(zip.files).filter(path => /^xl\/worksheets\/sheet\d+\.xml$/u.test(path));
+
+  await Promise.all(
+    worksheetPaths.map(async path => {
+      const entry = zip.file(path);
+      if (!entry) return;
+
+      const xmlText = await entry.async('string');
+      zip.file(path, applyWorksheetZoomXml(xmlText, zoomScale));
+    })
+  );
+
+  const workbookEntry = zip.file('xl/workbook.xml');
+  if (workbookEntry) {
+    const workbookXml = await workbookEntry.async('string');
+    zip.file('xl/workbook.xml', applyWorkbookZoomXml(workbookXml, zoomScale));
+  }
+
+  return zip.generateAsync({ type: 'arraybuffer' });
+}
+
 function createWorkbook(snapshot: any) {
   if (!containerRef.value) return;
 
@@ -185,15 +349,8 @@ function createWorkbook(snapshot: any) {
     throw new Error('Univer 工作簿初始化失败');
   }
 
-  // 在 snapshot 数据中预设缩放比例 40%，避免调用不可用的 zoom API
-  const data = snapshot || {};
-  if (data.sheets) {
-    Object.values(data.sheets).forEach((sheet: any) => {
-      if (sheet && typeof sheet === 'object') {
-        sheet.zoomRatio = 0.4;
-      }
-    });
-  }
+  // 在 snapshot 数据中预设缩放比例，保证在线查看和导出文件使用同一套缩放值
+  const data = applySheetZoomRatio(snapshot);
 
   univer.createUnit(unitType, data);
 }
@@ -251,6 +408,15 @@ function getCreateEmployeeName() {
   return props.subordinateOptions.find(opt => opt.value === createForm.employeeId)?.label || '';
 }
 
+function applyCreateEmployeeName(snapshot: any) {
+  if (!isCreateMode.value) return snapshot;
+
+  const employeeName = getCreateEmployeeName();
+  if (!employeeName) return snapshot;
+
+  return injectAssessedEmployeeName(snapshot, employeeName);
+}
+
 function createInitialFileName() {
   const sheet = currentSheet.value;
   if (sheet) {
@@ -317,7 +483,7 @@ async function loadWorkbook() {
     });
     const snapshot = await transformExcelToUniver(file);
     await nextTick();
-    createWorkbook(snapshot);
+    createWorkbook(applyCreateEmployeeName(snapshot));
   } catch (error) {
     errorMessage.value = error instanceof Error ? error.message : 'Excel 解析失败';
   } finally {
@@ -331,7 +497,7 @@ async function ensureCreatedSheet() {
   }
 
   if (!createForm.periodMonth || !createForm.employeeId) {
-    throw new Error('请先填写绩效月份和员工');
+    throw new Error('请先填写绩效月份和下属');
   }
 
   const createResult = await createPerformanceSheet({
@@ -373,10 +539,11 @@ async function executeSave(): Promise<Api.Performance.Sheet.Sheet | null> {
 
   await ensureExcelRuntime();
   const sheet = await ensureCreatedSheet();
-  const snapshot = workbook.save();
+  const snapshot = applySheetZoomRatio(workbook.save());
   const fileName = createInitialFileName();
   const buffer = await transformUniverToExcel(snapshot, fileName);
-  const file = new File([buffer], fileName, {
+  const excelBuffer = await applyExcelZoomMetadata(buffer);
+  const file = new File([excelBuffer], fileName, {
     type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
   });
   const uploadResult = await uploadFile(file, `performance/sheets/${sheet.periodMonth}`);
@@ -451,6 +618,22 @@ watch(visible, async isVisible => {
   await loadWorkbook();
 });
 
+watch(
+  () => createForm.employeeId,
+  async (employeeId, previousEmployeeId) => {
+    if (!visible.value || !isCreateMode.value || !employeeId || employeeId === previousEmployeeId) {
+      return;
+    }
+
+    const workbook = getActiveWorkbook();
+    if (!workbook) return;
+
+    const snapshot = workbook.save();
+    await nextTick();
+    createWorkbook(applyCreateEmployeeName(snapshot));
+  }
+);
+
 onBeforeUnmount(() => {
   window.removeEventListener('resize', syncViewportWidth);
   disposeUniver();
@@ -483,8 +666,8 @@ onMounted(() => {
             placeholder="选择绩效月份"
           />
         </ElFormItem>
-        <ElFormItem label="员工" prop="employeeId" class="performance-excel-editor__form-item">
-          <ElSelect v-model="createForm.employeeId" filterable placeholder="选择员工" style="width: 200px">
+        <ElFormItem label="下属" prop="employeeId" class="performance-excel-editor__form-item">
+          <ElSelect v-model="createForm.employeeId" filterable placeholder="选择下属" style="width: 200px">
             <ElOption v-for="opt in props.subordinateOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
           </ElSelect>
         </ElFormItem>

src/views/personal-center/my-performance/modules/performance-record-dialog.vue

@@ -38,7 +38,7 @@ watch(visible, isVisible => {
 <template>
   <BusinessFormDialog
     v-model="visible"
-    title="员工反馈历史"
+    title="下属反馈历史"
     preset="lg"
     append-to-body
     :show-footer="false"

src/views/personal-center/my-performance/modules/performance-search.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import type { SearchField } from '@/components/custom/table-search-fields.vue';
 import TableSearchFields from '@/components/custom/table-search-fields.vue';
-import { performanceStatusOptions } from './performance-shared';
 
 defineOptions({ name: 'PerformanceSearch' });
 
@@ -12,13 +11,17 @@ interface Option {
 }
 
 interface Props {
+  teamMode?: boolean;
   subordinateOptions?: Option[];
   deptOptions?: Option[];
+  statusOptions?: Option[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  teamMode: false,
   subordinateOptions: () => [],
-  deptOptions: () => []
+  deptOptions: () => [],
+  statusOptions: () => []
 });
 
 const model = defineModel<Api.Performance.Sheet.SearchParams>('model', { required: true });
@@ -28,7 +31,7 @@ const emit = defineEmits<{
   search: [];
 }>();
 
-const fields = computed<SearchField[]>(() => [
+const baseFields = computed<SearchField[]>(() => [
   {
     key: 'periodMonthRange',
     label: '绩效月份',
@@ -37,11 +40,18 @@ const fields = computed<SearchField[]>(() => [
     valueFormat: 'YYYY-MM-DD',
     placeholder: '选择月份区间'
   },
-  { key: 'employeeId', label: '员工', type: 'select', placeholder: '请选择员工', options: props.subordinateOptions },
+  { key: 'statusCode', label: '状态', type: 'select', placeholder: '请选择状态', options: props.statusOptions }
+]);
+
+const teamFields = computed<SearchField[]>(() => [
+  baseFields.value[0],
+  { key: 'employeeId', label: '下属', type: 'select', placeholder: '请选择下属', options: props.subordinateOptions },
   { key: 'employeeDeptId', label: '部门', type: 'select', placeholder: '请选择部门', options: props.deptOptions },
   { key: 'managerName', label: '直属上级', type: 'input', placeholder: '请输入直属上级' },
-  { key: 'statusCode', label: '状态', type: 'select', placeholder: '请选择状态', options: performanceStatusOptions }
+  baseFields.value[1]
 ]);
+
+const fields = computed<SearchField[]>(() => (props.teamMode ? teamFields.value : baseFields.value));
 </script>
 
 <template>

src/views/personal-center/my-performance/modules/performance-shared.ts

@@ -30,6 +30,19 @@ export const performanceStatusOptions: Array<{
   { label: '已退回', value: 'rejected' }
 ];
 
+export function getPerformanceStatusOptions(
+  statusList: Api.Performance.Sheet.StatusDict[] = []
+): Array<{ label: string; value: string }> {
+  if (!statusList.length) {
+    return performanceStatusOptions.map(item => ({ ...item, value: String(item.value) }));
+  }
+
+  return statusList.map(item => ({
+    label: item.statusName,
+    value: String(item.statusCode)
+  }));
+}
+
 export const performanceActionNameMap: Record<string, string> = {
   send: '发送',
   resend: '重新发送',

src/views/personal-center/my-performance/modules/performance-summary.vue

@@ -25,8 +25,16 @@ const remindingKey = ref('');
 
 const deptOrgAverageCount = computed(() => props.summary?.deptOrgAverages?.length ?? 0);
 
+const periodLabel = computed(() => {
+  const start = props.periodMonthStart;
+  const end = props.periodMonthEnd;
+  if (!start) return '';
+  if (!end || start === end) return start;
+  return `${start} 至 ${end}`;
+});
+
 const cards = computed(() => [
-  { label: '本月绩效表总数', value: props.summary?.totalSheetCount ?? 0 },
+  { label: '绩效表总数', value: props.summary?.totalSheetCount ?? 0 },
   { label: '待发送数', value: props.summary?.pendingSendCount ?? 0, key: 'pending_send' as const },
   { label: '待确认数', value: props.summary?.pendingConfirmCount ?? 0, key: 'pending_confirm' as const },
   { label: '已确认率', value: `${props.summary?.confirmedRate ?? '0.00'}%` },
@@ -55,6 +63,7 @@ async function handleRemind(type: Api.Performance.Common.RemindType, userIds?: s
 
 <template>
   <div v-loading="props.loading" class="performance-summary">
+    <div v-if="periodLabel" class="performance-summary__period">{{ periodLabel }}</div>
     <div class="performance-summary__grid">
       <div v-for="card in cards" :key="card.label" class="performance-summary__item">
         <div class="performance-summary__label">{{ card.label }}</div>
@@ -194,6 +203,11 @@ async function handleRemind(type: Api.Performance.Common.RemindType, userIds?: s
   gap: 12px;
 }
 
+.performance-summary__period {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
 .performance-summary__grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));

src/views/personal-center/my-performance/modules/performance-template-dialog.vue

@@ -9,9 +9,10 @@ import {
   uploadPerformanceTemplate
 } from '@/service/api';
 import { useUIPaginatedTable } from '@/hooks/common/table';
+import { useAuth } from '@/hooks/business/auth';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
 import BusinessTableActionCell, { type BusinessTableAction } from '@/components/custom/business-table-action-cell';
-import { formatDateTime } from './performance-shared';
+import { PerformancePermission, formatDateTime } from './performance-shared';
 
 defineOptions({ name: 'PerformanceTemplateDialog' });
 
@@ -22,6 +23,9 @@ const emit = defineEmits<{
 }>();
 
 type TemplatePageResponse = Awaited<ReturnType<typeof fetchPerformanceTemplatePage>>;
+const { hasAuth } = useAuth();
+const canQueryTemplate = computed(() => hasAuth(PerformancePermission.TemplateQuery));
+const canUpdateTemplate = computed(() => hasAuth(PerformancePermission.TemplateUpdate));
 
 const searchParams = reactive<Api.Performance.Template.SearchParams>({
   pageNo: 1,
@@ -79,7 +83,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
       prop: 'activeFlag',
       label: '状态',
       width: 100,
-      formatter: row => <ElTag type={row.activeFlag ? 'success' : 'info'}>{row.activeFlag ? '当前' : '历史'}</ElTag>
+      formatter: row => <ElTag type={row.activeFlag ? 'success' : 'info'}>{row.activeFlag ? '已启用' : '已禁用'}</ElTag>
     },
     { prop: 'uploadUserName', label: '上传人', width: 110 },
     {
@@ -101,7 +105,14 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
 
 const selectedFileName = computed(() => uploadForm.file?.name || '');
 
+async function loadTemplatePage(page = 1) {
+  if (!canQueryTemplate.value) return;
+  await getDataByPage(page);
+}
+
 function getTemplateActions(row: Api.Performance.Template.Template): BusinessTableAction[] {
+  if (!canUpdateTemplate.value) return [];
+
   return [
     {
       key: 'activate',
@@ -125,6 +136,8 @@ function handleFileChange(file: UploadFile, _files: UploadFiles) {
 }
 
 async function handleUploadTemplate() {
+  if (!canUpdateTemplate.value) return;
+
   if (!uploadForm.file) {
     window.$message?.warning('请选择 Excel 模板文件');
     return;
@@ -159,11 +172,13 @@ async function handleUploadTemplate() {
     activeFlag: true,
     file: null
   });
-  await getDataByPage(1);
+  await loadTemplatePage(1);
   emit('updated');
 }
 
 async function handleActivate(row: Api.Performance.Template.Template) {
+  if (!canUpdateTemplate.value) return;
+
   activatingId.value = row.id;
   const { error } = await activatePerformanceTemplate(row.id);
   activatingId.value = '';
@@ -171,13 +186,13 @@ async function handleActivate(row: Api.Performance.Template.Template) {
   if (error) return;
 
   window.$message?.success('绩效模板已启用');
-  await getDataByPage(searchParams.pageNo ?? 1);
+  await loadTemplatePage(searchParams.pageNo ?? 1);
   emit('updated');
 }
 
 watch(visible, isVisible => {
-  if (isVisible) {
-    getDataByPage(1);
+  if (isVisible && canQueryTemplate.value) {
+    loadTemplatePage(1);
   }
 });
 </script>
@@ -192,32 +207,59 @@ watch(visible, isVisible => {
     max-body-height="76vh"
   >
     <div class="performance-template-dialog">
-      <ElCard shadow="never">
+      <ElCard v-if="canUpdateTemplate" shadow="never">
         <ElForm :model="uploadForm" label-position="top" class="performance-template-dialog__upload-form">
           <div class="performance-template-dialog__upload-grid">
             <ElFormItem label="模板名称" class="performance-template-dialog__field">
               <ElInput v-model="uploadForm.templateName" placeholder="请输入模板名称" />
             </ElFormItem>
 
-            <ElFormItem label="Excel 文件" class="performance-template-dialog__field">
-              <div class="performance-template-dialog__file-picker">
+            <ElFormItem class="performance-template-dialog__field">
+              <template #label>
+                <div class="performance-template-dialog__label">
+                  <span>Excel 文件</span>
+                </div>
+              </template>
+              <div class="performance-template-dialog__file-row">
                 <ElUpload
+                  class="performance-template-dialog__upload-trigger"
                   :auto-upload="false"
                   :show-file-list="false"
                   accept=".xlsx,.xls"
                   :limit="1"
                   :on-change="handleFileChange"
                 >
-                  <ElButton plain>
+                  <ElButton plain class="performance-template-dialog__upload-button">
                     <template #icon>
                       <icon-mdi-upload class="text-icon" />
                     </template>
                     选择文件
                   </ElButton>
                 </ElUpload>
-                <div class="performance-template-dialog__file-hint">
-                  {{ selectedFileName || '支持 .xlsx、.xls，选择后会在这里显示文件名' }}
+                <div class="performance-template-dialog__file-name-wrapper">
+                  <ElTooltip
+                    :disabled="!selectedFileName"
+                    :content="selectedFileName"
+                    placement="top"
+                    effect="light"
+                    popper-class="performance-template-dialog__file-tooltip"
+                  >
+                    <div
+                      class="performance-template-dialog__file-name"
+                      :class="{ 'performance-template-dialog__file-name--placeholder': !selectedFileName }"
+                    >
+                      <span class="performance-template-dialog__file-name-text">
+                        {{ selectedFileName || '未选择文件' }}
+                      </span>
+                    </div>
+                  </ElTooltip>
                 </div>
+                <ElTooltip placement="top" effect="light">
+                  <template #content>支持 .xlsx、.xls，选择后会在这里显示文件名</template>
+                  <button type="button" class="performance-template-dialog__hint-button" aria-label="Excel 文件说明">
+                    <icon-mdi-information-outline />
+                  </button>
+                </ElTooltip>
               </div>
             </ElFormItem>
 
@@ -245,12 +287,12 @@ watch(visible, isVisible => {
         </ElForm>
       </ElCard>
 
-      <ElCard shadow="never" body-class="business-table-card-body">
+      <ElCard v-if="canQueryTemplate" shadow="never" body-class="business-table-card-body">
         <template #header>
           <div class="flex items-center justify-between gap-12px">
             <p class="text-16px font-600">模板列表</p>
             <ElSpace wrap alignment="center">
-              <ElButton @click="getDataByPage()">
+              <ElButton @click="loadTemplatePage(searchParams.pageNo ?? 1)">
                 <template #icon>
                   <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
                 </template>
@@ -279,6 +321,8 @@ watch(visible, isVisible => {
           />
         </div>
       </ElCard>
+
+      <ElEmpty v-if="!canQueryTemplate && !canUpdateTemplate" :image-size="80" description="当前账号没有绩效模板权限" />
     </div>
   </BusinessFormDialog>
 </template>
@@ -304,38 +348,122 @@ watch(visible, isVisible => {
   margin-bottom: 0;
 }
 
+.performance-template-dialog__field :deep(.el-form-item__label) {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding-bottom: 6px;
+  line-height: 22px;
+}
+
+.performance-template-dialog__field :deep(.el-form-item__content) {
+  min-height: 36px;
+  align-items: stretch;
+  width: 100%;
+}
+
 .performance-template-dialog__field--full {
   grid-column: 1 / -1;
 }
 
-.performance-template-dialog__file-picker {
-  display: grid;
-  gap: 10px;
+.performance-template-dialog__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.performance-template-dialog__file-hint {
-  min-height: 40px;
+.performance-template-dialog__file-row {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr) 24px;
+  align-items: stretch;
+  gap: 6px;
+  min-height: 36px;
+  width: 100% !important;
+  min-width: 0 !important;
+}
+
+.performance-template-dialog__upload-trigger {
+  display: block;
+}
+
+.performance-template-dialog__upload-trigger :deep(.el-upload) {
+  display: block;
+}
+
+.performance-template-dialog__upload-button {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+}
+
+.performance-template-dialog__file-name-wrapper {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.performance-template-dialog__file-name-wrapper :deep(.el-tooltip__trigger) {
+  display: block;
+  width: 100% !important;
+  min-width: 0 !important;
+}
+
+.performance-template-dialog__file-name {
   display: flex;
   align-items: center;
+  min-width: 0;
+  width: 100% !important;
+  height: 36px;
   padding: 0 12px;
   overflow: hidden;
-  border: 1px dashed var(--el-border-color);
+  border: 1px solid var(--el-border-color);
   border-radius: 8px;
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-secondary);
-  font-size: 12px;
-  line-height: 1.5;
+  background: var(--el-fill-color-blank);
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+}
+
+.performance-template-dialog__file-name-text {
+  display: block;
+  width: 100%;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.performance-template-dialog__file-name--placeholder {
+  color: var(--el-text-color-placeholder);
+}
+
+.performance-template-dialog__hint-button {
+  width: 24px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.performance-template-dialog__hint-button:hover {
+  background: var(--el-fill-color-light);
+  color: var(--el-color-primary);
+}
+
 .performance-template-dialog__switch-field {
   align-self: stretch;
 }
 
 .performance-template-dialog__switch-box {
-  height: 100%;
-  min-height: 72px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -346,6 +474,7 @@ watch(visible, isVisible => {
   background: var(--el-fill-color-blank);
   color: var(--el-text-color-regular);
   font-size: 13px;
+  line-height: 1;
 }
 
 .performance-template-dialog__actions {
@@ -378,7 +507,7 @@ watch(visible, isVisible => {
   }
 
   .performance-template-dialog__switch-box {
-    min-height: 56px;
+    height: 36px;
   }
 }
 </style>