Merge remote-tracking branch 'origin/main'

src/views/system-resource/device-management/detail.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="device-detail-container">
+    <a-card title="设备基本信息">
+      <a-descriptions :data="basicInfo" layout="vertical" bordered />
+    </a-card>
+
+    <a-card title="设备状态信息" style="margin-top: 16px">
+      <a-descriptions :data="statusInfo" layout="vertical" bordered />
+    </a-card>
+
+    <a-card title="设备详细信息" style="margin-top: 16px">
+      <a-tabs>
+        <a-tab-pane key="maintenance" tab="维护记录">
+          <div class="maintenance-section">
+            <a-button type="primary" @click="handleAddMaintenance">
+              添加维护记录
+            </a-button>
+            <a-divider />
+            <a-table :data="maintenanceRecords" :columns="maintenanceColumns" row-key="id" size="small" />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="usage" tab="使用记录">
+          <div class="usage-section">
+            <a-table :data="usageRecords" :columns="usageColumns" row-key="id" size="small" />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="location" tab="位置变更">
+          <div class="location-section">
+            <a-table :data="locationRecords" :columns="locationColumns" row-key="id" size="small" />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="files" tab="相关文件">
+          <div class="files-section">
+            <a-upload
+              :file-list="fileList"
+              :custom-request="handleFileUpload"
+              :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
+            >
+              <a-button>
+                <template #icon>
+                  <IconUpload />
+                </template>
+                上传文件
+              </a-button>
+            </a-upload>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { IconUpload } from '@arco-design/web-vue/es/icon'
+import { getEquipmentDetail } from '@/apis/equipment'
+import type { EquipmentResp } from '@/types/equipment.d'
+
+defineOptions({ name: 'DeviceDetail' })
+
+const route = useRoute()
+const deviceId = route.params.id as string
+
+// 设备基本信息
+const basicInfo = ref([
+  { label: '设备名称', value: '' },
+  { label: '设备类型', value: '' },
+  { label: '设备型号', value: '' },
+  { label: '序列号', value: '' },
+  { label: '品牌', value: '' },
+  { label: '资产编号', value: '' },
+  { label: '负责人', value: '' },
+  { label: '物理位置', value: '' },
+  { label: '配置规格', value: '' },
+  { label: '备注', value: '' },
+])
+
+// 设备状态信息
+const statusInfo = ref([
+  { label: '设备状态', value: '' },
+  { label: '使用状态', value: '' },
+  { label: '位置状态', value: '' },
+  { label: '健康状态', value: '' },
+  { label: '当前使用人', value: '' },
+  { label: '所属项目', value: '' },
+  { label: '创建时间', value: '' },
+  { label: '更新时间', value: '' },
+])
+
+// 维护记录
+const maintenanceRecords = ref([
+  {
+    id: 1,
+    maintenanceType: '定期保养',
+    maintenancePerson: '张师傅',
+    maintenanceTime: '2024-06-01 10:00:00',
+    description: '更换机油，检查设备运行状态',
+    cost: 500,
+    status: '已完成',
+  },
+  {
+    id: 2,
+    maintenanceType: '故障维修',
+    maintenancePerson: '李师傅',
+    maintenanceTime: '2024-05-15 14:30:00',
+    description: '修复传感器故障',
+    cost: 1200,
+    status: '已完成',
+  },
+])
+
+const maintenanceColumns = [
+  { title: '维护类型', dataIndex: 'maintenanceType', key: 'maintenanceType' },
+  { title: '维护人员', dataIndex: 'maintenancePerson', key: 'maintenancePerson' },
+  { title: '维护时间', dataIndex: 'maintenanceTime', key: 'maintenanceTime' },
+  { title: '维护描述', dataIndex: 'description', key: 'description' },
+  { title: '维护费用', dataIndex: 'cost', key: 'cost' },
+  { title: '状态', dataIndex: 'status', key: 'status' },
+]
+
+// 使用记录
+const usageRecords = ref([
+  {
+    id: 1,
+    userName: '张三',
+    projectName: '项目A',
+    startTime: '2024-06-01 09:00:00',
+    endTime: '2024-06-01 18:00:00',
+    usagePurpose: '现场检测',
+  },
+  {
+    id: 2,
+    userName: '李四',
+    projectName: '项目B',
+    startTime: '2024-05-30 08:00:00',
+    endTime: '2024-05-30 17:00:00',
+    usagePurpose: '安全巡检',
+  },
+])
+
+const usageColumns = [
+  { title: '使用人', dataIndex: 'userName', key: 'userName' },
+  { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
+  { title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
+  { title: '结束时间', dataIndex: 'endTime', key: 'endTime' },
+  { title: '使用目的', dataIndex: 'usagePurpose', key: 'usagePurpose' },
+]
+
+// 位置变更记录
+const locationRecords = ref([
+  {
+    id: 1,
+    oldLocation: '仓库A',
+    newLocation: '现场B',
+    changeTime: '2024-06-01 08:00:00',
+    changeReason: '项目需要',
+    operator: '管理员',
+  },
+  {
+    id: 2,
+    oldLocation: '现场B',
+    newLocation: '仓库A',
+    changeTime: '2024-05-30 18:00:00',
+    changeReason: '项目结束',
+    operator: '管理员',
+  },
+])
+
+const locationColumns = [
+  { title: '原位置', dataIndex: 'oldLocation', key: 'oldLocation' },
+  { title: '新位置', dataIndex: 'newLocation', key: 'newLocation' },
+  { title: '变更时间', dataIndex: 'changeTime', key: 'changeTime' },
+  { title: '变更原因', dataIndex: 'changeReason', key: 'changeReason' },
+  { title: '操作人', dataIndex: 'operator', key: 'operator' },
+]
+
+// 文件列表
+const fileList = ref([
+  {
+    uid: '1',
+    name: '设备说明书.pdf',
+    status: 'done',
+    url: 'https://example.com/manual.pdf',
+  },
+  {
+    uid: '2',
+    name: '维护记录.xlsx',
+    status: 'done',
+    url: 'https://example.com/maintenance.xlsx',
+  },
+])
+
+// 获取设备类型文本
+const getEquipmentTypeText = (type: string) => {
+  const typeMap: Record<string, string> = {
+    1: '检测设备',
+    2: '安全设备',
+    3: '车辆',
+  }
+  return typeMap[type] || type
+}
+
+// 获取设备状态文本
+const getEquipmentStatusText = (status: string) => {
+  const statusMap: Record<string, string> = {
+    normal: '正常',
+    maintenance: '维修中',
+    scrapped: '报废',
+  }
+  return statusMap[status] || status
+}
+
+// 获取使用状态文本
+const getUseStatusText = (status: string) => {
+  return status === '1' ? '使用中' : '空闲'
+}
+
+// 获取位置状态文本
+const getLocationStatusText = (status: string) => {
+  const statusMap: Record<string, string> = {
+    in_stock: '库存中',
+    allocated: '已分配',
+    repair: '维修中',
+    scrap: '待报废',
+    scrapped: '已报废',
+    borrowed: '外借中',
+    lost: '丢失',
+  }
+  return statusMap[status] || status
+}
+
+// 获取健康状态文本
+const getHealthStatusText = (status: string) => {
+  const statusMap: Record<string, string> = {
+    excellent: '优秀',
+    good: '良好',
+    normal: '一般',
+    poor: '较差',
+    bad: '差',
+  }
+  return statusMap[status] || status
+}
+
+// 加载设备详情
+const loadDeviceDetail = async () => {
+  try {
+    const res = await getEquipmentDetail(deviceId)
+    const device = res.data as EquipmentResp
+
+    // 更新基本信息
+    basicInfo.value = [
+      { label: '设备名称', value: device.equipmentName },
+      { label: '设备类型', value: getEquipmentTypeText(device.equipmentType) },
+      { label: '设备型号', value: device.equipmentModel },
+      { label: '序列号', value: device.equipmentSn },
+      { label: '品牌', value: device.brand || '-' },
+      { label: '资产编号', value: device.assetCode || '-' },
+      { label: '负责人', value: device.responsiblePerson || '-' },
+      { label: '物理位置', value: device.physicalLocation || '-' },
+      { label: '配置规格', value: device.specification || '-' },
+      { label: '备注', value: device.assetRemark || '-' },
+    ]
+
+    // 更新状态信息
+    statusInfo.value = [
+      { label: '设备状态', value: getEquipmentStatusText(device.equipmentStatus) },
+      { label: '使用状态', value: getUseStatusText(device.useStatus) },
+      { label: '位置状态', value: getLocationStatusText(device.locationStatus || '') },
+      { label: '健康状态', value: getHealthStatusText(device.healthStatus || '') },
+      { label: '当前使用人', value: device.name || '-' },
+      { label: '所属项目', value: device.projectName || '-' },
+      { label: '创建时间', value: device.createTime || '-' },
+      { label: '更新时间', value: device.updateTime || '-' },
+    ]
+  } catch (error) {
+    console.error('加载设备详情失败:', error)
+  }
+}
+
+// 添加维护记录
+const handleAddMaintenance = () => {
+  // TODO: 实现添加维护记录的逻辑
+  console.log('添加维护记录')
+}
+
+// 文件上传处理
+const handleFileUpload = (options: any) => {
+  // TODO: 实现文件上传逻辑
+  console.log('文件上传:', options)
+}
+
+onMounted(() => {
+  if (deviceId) {
+    loadDeviceDetail()
+  }
+})
+</script>
+
+<style scoped>
+.device-detail-container {
+  padding: 16px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.maintenance-section,
+.usage-section,
+.location-section,
+.files-section {
+  padding: 16px 0;
+}
+</style>

src/views/system/post/PostDetailDrawer.vue

@@ -2,13 +2,14 @@
   <a-drawer
     v-model:visible="visible"
     title="岗位详情"
-    width="620px"
+    width="720px"
     unmount-on-close
     class="post-detail-drawer"
     @close="() => visible = false"
   >
     <a-spin :loading="loading" class="detail-container">
       <div class="detail-card">
+        <!-- 岗位标题和状态 -->
         <div class="detail-header">
           <div class="post-name">{{ primaryInfo?.name || '-' }}</div>
           <a-tag class="status-tag" :color="getStatusColor(primaryInfo?.status)">
@@ -16,40 +17,198 @@
           </a-tag>
         </div>
 
-        <div class="detail-group">
-          <div class="group-title">基本信息</div>
-          <div class="info-grid">
-            <div class="info-item">
-              <div class="info-label">岗位ID</div>
-              <div class="info-value">{{ primaryInfo?.id || '-' }}</div>
-            </div>
-            <div class="info-item">
-              <div class="info-label">岗位排序</div>
-              <div class="info-value">{{ primaryInfo?.sort || '-' }}</div>
-            </div>
-          </div>
-        </div>
+        <!-- 标签页菜单 -->
+        <a-tabs v-model:active-key="activeTab" class="detail-tabs" type="card">
+          <!-- 1. 基本信息 -->
+          <a-tab-pane key="basic" title="基本信息">
+            <div class="tab-content">
+              <div class="info-grid">
+                <div class="info-item">
+                  <div class="info-label">岗位名称</div>
+                  <div class="info-value">{{ primaryInfo?.name || '-' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">所属部门</div>
+                  <div class="info-value">{{ primaryInfo?.department || '技术部' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">直接上级岗位</div>
+                  <div class="info-value">{{ primaryInfo?.superior || '技术总监' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">岗位等级/职级</div>
+                  <div class="info-value">{{ primaryInfo?.level || 'P5' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">编写日期/版本号</div>
+                  <div class="info-value">{{ primaryInfo?.version || '2024-06-01 / V1.0' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">岗位编号</div>
+                  <div class="info-value">{{ primaryInfo?.id || '10001' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">工作地点</div>
+                  <div class="info-value">{{ primaryInfo?.location || '上海/远程' }}</div>
+                </div>
+              </div>
               
-        <div v-if="primaryInfo?.remark" class="detail-group">
-          <div class="group-title">岗位说明</div>
-          <div class="remark-container">
-            <div class="remark-content">{{ primaryInfo.remark }}</div>
-          </div>
-        </div>
+              <!-- 岗位目的 -->
+              <div class="section-title">岗位目的</div>
+              <div class="content-container">
+                <div class="content-text">{{ primaryInfo?.summary || '负责公司核心产品开发，支撑业务增长。' }}</div>
+              </div>
+            </div>
+          </a-tab-pane>
 
-        <div class="detail-group">
-          <div class="group-title">时间信息</div>
-          <div class="info-grid">
-            <div class="info-item">
-              <div class="info-label">创建时间</div>
-              <div class="info-value">{{ primaryInfo?.createTime || '-' }}</div>
+          <!-- 2. 工作职责 -->
+          <a-tab-pane key="tasks" title="工作职责">
+            <div class="tab-content">
+              <!-- 主要职责与工作任务 -->
+              <div class="section-title">主要职责与工作任务</div>
+              <div class="content-container">
+                <ul>
+                  <li v-for="(task, idx) in (primaryInfo?.tasks || ['负责XXX产品的需求分析、架构设计、核心模块编码和单元测试。','制定并执行季度社交媒体营销计划，提升品牌曝光度和用户互动率。'])" :key="idx">{{ task }}</li>
+                </ul>
+              </div>
+              
+              <!-- 工作权限 -->
+              <div class="section-title">工作权限</div>
+              <div class="content-container">
+                <ul>
+                  <li v-for="(perm, idx) in (primaryInfo?.permissions || ['有权审批部门内5000元以下的采购申请。','有权对项目团队成员的工作任务进行分配和调整。'])" :key="idx">{{ perm }}</li>
+                </ul>
+              </div>
+              
+              <!-- 汇报关系 -->
+              <div class="section-title">汇报关系</div>
+              <div class="info-grid">
+                <div class="info-item">
+                  <div class="info-label">直接上级</div>
+                  <div class="info-value">{{ primaryInfo?.superior || '技术总监' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">直接下级</div>
+                  <div class="info-value">{{ primaryInfo?.subordinates || '无' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">协作关系</div>
+                  <div class="info-value">{{ primaryInfo?.collaboration || '与产品部、销售部、客服部紧密合作' }}</div>
+                </div>
+              </div>
             </div>
-            <div class="info-item">
-              <div class="info-label">更新时间</div>
-              <div class="info-value">{{primaryInfo?.updateTime || '-' }}</div>
+          </a-tab-pane>
+
+          <!-- 3. 任职资格 -->
+          <a-tab-pane key="qualifications" title="任职资格">
+            <div class="tab-content">
+              <div class="info-grid">
+                <div class="info-item">
+                  <div class="info-label">教育背景</div>
+                  <div class="info-value">{{ primaryInfo?.education || '本科及以上学历，计算机相关专业' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">工作经验</div>
+                  <div class="info-value">{{ primaryInfo?.experience || '5年以上相关工作经验' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">专业知识与技能</div>
+                  <div class="info-value">{{ primaryInfo?.skills || '精通Java/Python，良好的沟通与团队协作能力' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">证书/执照</div>
+                  <div class="info-value">{{ primaryInfo?.certificates || 'PMP、注册会计师等' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">其他要求</div>
+                  <div class="info-value">{{ primaryInfo?.otherRequirements || '英语流利，能适应短期出差' }}</div>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          </a-tab-pane>
+
+          <!-- 4. 工作条件 -->
+          <a-tab-pane key="conditions" title="工作条件">
+            <div class="tab-content">
+              <div class="info-grid">
+                <div class="info-item">
+                  <div class="info-label">工作环境</div>
+                  <div class="info-value">{{ primaryInfo?.workEnv || '办公室/远程' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">工作时间</div>
+                  <div class="info-value">{{ primaryInfo?.workTime || '标准工时，偶有加班' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">出差要求</div>
+                  <div class="info-value">{{ primaryInfo?.travel || '偶尔出差' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">体力要求</div>
+                  <div class="info-value">{{ primaryInfo?.physical || '无特殊要求' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">特殊设备/工具</div>
+                  <div class="info-value">{{ primaryInfo?.tools || '电脑、办公软件' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">健康与安全</div>
+                  <div class="info-value">{{ primaryInfo?.health || '注意用眼卫生' }}</div>
+                </div>
+              </div>
+            </div>
+          </a-tab-pane>
+
+          <!-- 5. 绩效与薪酬 -->
+          <a-tab-pane key="performance" title="绩效与薪酬">
+            <div class="tab-content">
+              <!-- 绩效衡量标准 -->
+              <div class="section-title">绩效衡量标准</div>
+              <div class="content-container">
+                <div class="content-text">{{ primaryInfo?.performance || '根据项目按时交付率、代码质量、产品性能指标提升情况进行评估。' }}</div>
+              </div>
+              
+              <!-- 薪酬范围 -->
+              <div class="section-title">薪酬范围</div>
+              <div class="content-container">
+                <div class="content-text salary-value">{{ primaryInfo?.salaryRange || '20-30万/年' }}</div>
+              </div>
+            </div>
+          </a-tab-pane>
+
+          <!-- 6. 企业文化与发展 -->
+          <a-tab-pane key="culture" title="企业文化与发展">
+            <div class="tab-content">
+              <!-- 公司文化与价值观要求 -->
+              <div class="section-title">公司文化与价值观要求</div>
+              <div class="content-container">
+                <div class="content-text">{{ primaryInfo?.culture || '客户第一、创新、诚信、合作' }}</div>
+              </div>
+              
+              <!-- 职业发展路径 -->
+              <div class="section-title">职业发展路径</div>
+              <div class="content-container">
+                <div class="content-text">{{ primaryInfo?.careerPath || '可晋升为高级工程师、技术经理，或横向发展至产品/项目管理岗位。' }}</div>
+              </div>
+            </div>
+          </a-tab-pane>
+
+          <!-- 7. 时间信息 -->
+          <a-tab-pane key="time" title="时间信息">
+            <div class="tab-content">
+              <div class="info-grid">
+                <div class="info-item">
+                  <div class="info-label">创建时间</div>
+                  <div class="info-value">{{ primaryInfo?.createTime || '-' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">更新时间</div>
+                  <div class="info-value">{{ primaryInfo?.updateTime || '-' }}</div>
+                </div>
+              </div>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
       </div>
     </a-spin>
 
@@ -65,30 +224,57 @@
 import { nextTick, ref } from 'vue'
 import { getPostDetail } from '@/apis/system/post'
 import { useLoading } from '@/hooks'
-//import { formatDate } from '@/utils/date'
 
 defineOptions({ name: 'PostDetailDrawer' })
 
 const visible = ref(false)
 const { loading, setLoading } = useLoading()
 const primaryInfo = ref<any>(null)
+const activeTab = ref('basic')
 
 // 获取详情
 const getDetail = async (id: string) => {
   try {
     setLoading(true)
     primaryInfo.value = null
-
     const response = await getPostDetail(id)
     const data = response?.data || response
-
     if (data && typeof data === 'object') {
       primaryInfo.value = {
-        id: data.postId ?? data.id,
-        name: data.postName ?? data.name,
-        sort: data.postSort,
+        id: data.postId ?? data.id ?? '10001',
+        name: data.postName ?? data.name ?? '-',
         status: data.status,
-        remark: data.remark,
+        department: data.department ?? '技术部',
+        superior: data.superior ?? '技术总监',
+        level: data.level ?? 'P5',
+        version: data.version ?? '2024-06-01 / V1.0',
+        location: data.location ?? '上海/远程',
+        summary: data.summary ?? '负责公司核心产品开发，支撑业务增长。',
+        tasks: data.tasks ?? [
+          '负责XXX产品的需求分析、架构设计、核心模块编码和单元测试。',
+          '制定并执行季度社交媒体营销计划，提升品牌曝光度和用户互动率。'
+        ],
+        permissions: data.permissions ?? [
+          '有权审批部门内5000元以下的采购申请。',
+          '有权对项目团队成员的工作任务进行分配和调整。'
+        ],
+        subordinates: data.subordinates ?? '无',
+        collaboration: data.collaboration ?? '与产品部、销售部、客服部紧密合作',
+        education: data.education ?? '本科及以上学历，计算机相关专业',
+        experience: data.experience ?? '5年以上相关工作经验',
+        skills: data.skills ?? '精通Java/Python，良好的沟通与团队协作能力',
+        certificates: data.certificates ?? 'PMP、注册会计师等',
+        otherRequirements: data.otherRequirements ?? '英语流利，能适应短期出差',
+        workEnv: data.workEnv ?? '办公室/远程',
+        workTime: data.workTime ?? '标准工时，偶有加班',
+        travel: data.travel ?? '偶尔出差',
+        physical: data.physical ?? '无特殊要求',
+        tools: data.tools ?? '电脑、办公软件',
+        health: data.health ?? '注意用眼卫生',
+        performance: data.performance ?? '根据项目按时交付率、代码质量、产品性能指标提升情况进行评估。',
+        careerPath: data.careerPath ?? '可晋升为高级工程师、技术经理，或横向发展至产品/项目管理岗位。',
+        salaryRange: data.salaryRange ?? '20-30万/年',
+        culture: data.culture ?? '客户第一、创新、诚信、合作',
         createTime: data.createTime,
         updateTime: data.updateTime,
       }
@@ -114,15 +300,14 @@ const getStatusColor = (status: number | string) => {
   return 'rgb(150, 150, 150)'
 }
 
-// 关闭抽屉
 const handleClose = () => {
   visible.value = false
 }
 
-// 查看详情
 const onDetail = async (id: string) => {
   if (!id) return
   visible.value = true
+  activeTab.value = 'basic' // 重置到第一个标签页
   await nextTick()
   await getDetail(id)
 }
@@ -158,13 +343,13 @@ defineExpose({
 .detail-header {
   display: flex;
   align-items: center;
-  margin-bottom: 28px;
-  padding-bottom: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
   border-bottom: 1px solid var(--border-color);
 }
 
 .post-name {
-  font-size: 22px;
+  font-size: 20px;
   font-weight: 600;
   color: var(--value-color);
   margin-right: 15px;
@@ -180,37 +365,34 @@ defineExpose({
   color: white !important;
 }
 
-.detail-group {
-  margin-bottom: 25px;
-  position: relative;
-  background-color: var(--group-bg);
-  border-radius: 8px;
-  padding: 12px 16px;
+.detail-tabs {
+  margin-top: 10px;
 }
 
-.detail-group:last-child {
-  margin-bottom: 0;
+.tab-content {
+  padding: 20px 0;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.group-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--group-title-color);
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
+/* 自定义滚动条样式 */
+.tab-content::-webkit-scrollbar {
+  width: 6px;
 }
 
-.group-title::before {
-  content: '';
-  display: inline-block;
-  width: 4px;
-  height: 16px;
-  background-color: var(--primary-color);
-  margin-right: 8px;
-  border-radius: 2px;
+.tab-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.tab-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.tab-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .info-grid {
@@ -256,17 +438,38 @@ defineExpose({
   word-break: break-word;
 }
 
-.remark-container {
+.salary-value {
+  color: #e74c3c;
+  font-weight: 600;
+}
+
+.content-container {
   padding: 16px;
   background: white;
   border-radius: 6px;
   border: 1px solid var(--border-color);
 }
 
-.remark-content {
+.content-text {
   color: var(--value-color);
   line-height: 1.7;
   font-size: 15px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--group-title-color);
+  margin-top: 20px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.section-title:first-child {
+  margin-top: 0;
 }
 
 .footer-actions {
@@ -274,4 +477,52 @@ defineExpose({
   justify-content: flex-end;
   padding: 16px 24px;
 }
+
+/* 标签页样式优化 */
+:deep(.arco-tabs-nav) {
+  background-color: var(--light-bg);
+  border-radius: 8px;
+  padding: 4px;
+  margin-bottom: 16px;
+}
+
+:deep(.arco-tabs-nav-tab) {
+  background-color: transparent;
+  border: none;
+}
+
+:deep(.arco-tabs-tab) {
+  border-radius: 6px;
+  margin: 0 2px;
+  padding: 8px 16px;
+  font-weight: 400;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  color: #666;
+}
+
+:deep(.arco-tabs-tab:hover) {
+  background-color: rgba(52, 152, 219, 0.1);
+  color: var(--primary-color);
+  font-weight: 500;
+}
+
+:deep(.arco-tabs-tab-active) {
+  background-color: var(--primary-color);
+  color: white !important;
+  border-color: var(--primary-color);
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
+  font-weight: 700 !important;
+  font-size: 15px !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.arco-tabs-content) {
+  padding: 0;
+}
+
+:deep(.arco-tabs-tabpane) {
+  padding: 0;
+}
 </style>