diff --git a/src/api/erf/erf.js b/src/api/erf/erf.js
index e421b62..91b9b07 100644
--- a/src/api/erf/erf.js
+++ b/src/api/erf/erf.js
@@ -60,10 +60,15 @@ export const getPendingApplyList = data => createAPI(`/erf/expApply/getPendingAp
 // =====================================================
 
 /**
- * 查询三方确认列表
+ * 查询三方确认列表（按申请单号）
  */
 export const getTriConfirmList = data => createAPI(`/erf/triConfirm/getTriConfirmList`, 'post', data)
 
+/**
+ * 查询登录人待确认的工序列表
+ */
+export const getPendingTriConfirmList = data => createAPI(`/erf/triConfirm/getPendingTriConfirmList`, 'post', data)
+
 /**
  * 三方确认操作
  */
diff --git a/src/views/modules/erf/components/expTriConfirm.vue b/src/views/modules/erf/components/expTriConfirm.vue
index 3b53896..e9f6e3b 100644
--- a/src/views/modules/erf/components/expTriConfirm.vue
+++ b/src/views/modules/erf/components/expTriConfirm.vue
@@ -44,13 +44,12 @@
         align="center"
         header-align="center">
         <template slot-scope="scope">
-          <span v-if="scope.row.prodApproverName" style="color: #67C23A;">
-            ✓ {{ scope.row.prodApproverName }}
+          <span v-if="scope.row.prodConfirmed" style="color: #67C23A;">
+           {{ scope.row.prodApproverName }} ✓
           </span>
-          <span v-else-if="canConfirmProcess(scope.row)" style="color: #E6A23C;">
-            待确认
+          <span v-else >
+            {{ scope.row.prodApproverName }}
           </span>
-          <span v-else style="color: #909399;">-</span>
         </template>
       </el-table-column>
 
@@ -61,13 +60,12 @@
         align="center"
         header-align="center">
         <template slot-scope="scope">
-          <span v-if="scope.row.qaApproverName" style="color: #67C23A;">
-            ✓ {{ scope.row.qaApproverName }}
+          <span v-if="scope.row.qaConfirmed" style="color: #67C23A;">
+            {{ scope.row.qaApproverName }} ✓
           </span>
-          <span v-else-if="canConfirmProcess(scope.row)" style="color: #E6A23C;">
-            待确认
+          <span v-else >
+            {{ scope.row.qaApproverName }}
           </span>
-          <span v-else style="color: #909399;">-</span>
         </template>
       </el-table-column>
 
@@ -78,13 +76,12 @@
         align="center"
         header-align="center">
         <template slot-scope="scope">
-          <span v-if="scope.row.techApproverName" style="color: #67C23A;">
-            ✓ {{ scope.row.techApproverName }}
+          <span v-if="scope.row.techConfirmed" style="color: #67C23A;">
+            {{ scope.row.techApproverName }} ✓
           </span>
-          <span v-else-if="canConfirmProcess(scope.row)" style="color: #E6A23C;">
-            待确认
+          <span v-else>
+            {{ scope.row.techApproverName }}
           </span>
-          <span v-else style="color: #909399;">-</span>
         </template>
       </el-table-column>
 
@@ -95,7 +92,7 @@
         align="center"
         header-align="center">
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.confirmStatus === 'CONFIRMED'" type="success" size="small">
+          <el-tag v-if="scope.row.confirmStatus === '已确认'" type="success" size="small">
             已完成
           </el-tag>
           <el-tag v-else-if="canConfirmProcess(scope.row)" type="warning" size="small">
@@ -321,7 +318,14 @@
 
         <el-table-column
           prop="userName"
-          label="姓名"
+          label="用户账号"
+          align="center"
+          header-align="center">
+        </el-table-column>
+
+        <el-table-column
+          prop="userDisplay"
+          label="用户名"
           align="center"
           header-align="center">
         </el-table-column>
@@ -484,8 +488,14 @@ export default {
   watch: {
     applyNo: {
       immediate: true,
-      handler(val) {
-        if (val) {
+      handler(val, oldVal) {
+        // 只有当 applyNo 真正变化时才重新加载
+        if (val && val !== oldVal) {
+          console.log('📋 applyNo 变化，重新加载工序列表:', oldVal, '->', val)
+          this.loadProcessList()
+        } else if (val && !oldVal) {
+          // 首次加载
+          console.log('📋 首次加载工序列表:', val)
           this.loadProcessList()
         }
       }
@@ -581,7 +591,7 @@ export default {
      * 规则：第一道工序直接可确认，其他工序需要上一道完成
      */
     canConfirmProcess(row) {
-      if (row.confirmStatus === 'CONFIRMED') {
+      if (row.confirmStatus === '已确认') {
         return false  // 已完成的不能再确认
       }
 
@@ -593,7 +603,7 @@ export default {
       const previousProcess = this.processList.find(p => p.processSeq === row.processSeq - 1)
 
       // 上一道工序必须已完成
-      return previousProcess && previousProcess.confirmStatus === 'CONFIRMED'
+      return previousProcess && previousProcess.confirmStatus === '已确认'
     },
 
     /**
diff --git a/src/views/modules/erf/expApplyList.vue b/src/views/modules/erf/expApplyList.vue
index 2d8d8fa..dbdd056 100644
--- a/src/views/modules/erf/expApplyList.vue
+++ b/src/views/modules/erf/expApplyList.vue
@@ -670,7 +670,7 @@ export default {
       // ✅ 如果是High Risk，先验证工序
       if (row.experimentType === 'High Risk') {
         console.log('🔍 检测到High Risk申请单，开始验证工序...')
-        
+
         // 通过API查询工序列表进行验证（不依赖子组件是否已加载）
         this.validateHighRiskProcessByApi(row.applyNo).then(isValid => {
           if (!isValid) {
@@ -681,7 +681,7 @@ export default {
             })
             return
           }
-          
+
           console.log('✅ High Risk验证通过，继续下达流程')
           // 验证通过后继续下达流程
           this.proceedSubmit(row)
@@ -698,7 +698,7 @@ export default {
 
     /**
      * 通过API验证High Risk工序
-     * 
+     *
      * @param {String} applyNo 申请单号
      * @return {Promise<Boolean>} 验证结果
      */
@@ -709,13 +709,13 @@ export default {
           if (data && data.code === 0) {
             const processList = data.list || []
             console.log('📊 查询到工序数量:', processList.length)
-            
+
             // 检查是否至少有一条完整的工序
             const completeProcesses = processList.filter(process => {
-              const isComplete = process.prodApproverName && 
-                     process.qaApproverName && 
+              const isComplete = process.prodApproverName &&
+                     process.qaApproverName &&
                      process.techApproverName
-              
+
               if (isComplete) {
                 console.log('✅ 完整工序:', process.processStep, {
                   车间: process.prodApproverName,
@@ -723,12 +723,12 @@ export default {
                   技术: process.techApproverName
                 })
               }
-              
+
               return isComplete
             })
-            
+
             console.log(`📈 完整工序数量: ${completeProcesses.length}/${processList.length}`)
-            
+
             // 至少需要一条完整的工序
             resolve(completeProcesses.length > 0)
           } else {
@@ -963,9 +963,18 @@ export default {
         this.$refs.dataTable.setCurrentRow(row)
       })
 
-      // 如果当前在审批状态tab，刷新审批状态和日志
+      // 根据当前tab刷新对应的数据
       if (this.activeName === 'approvalStatus') {
+        // 刷新审批状态和日志
         this.loadFlowStatus()
+      } else if (this.activeName === 'triConfirm') {
+        // 刷新三方确认数据
+        this.$nextTick(() => {
+          if (this.$refs.triConfirm && this.$refs.triConfirm.loadProcessList) {
+            console.log('🔄 行切换，刷新三方确认数据')
+            this.$refs.triConfirm.loadProcessList()
+          }
+        })
       } else {
         // 否则自动切换到项目详情tab
         this.activeName = 'attachment'
@@ -983,6 +992,16 @@ export default {
       if (tab.name === 'approvalStatus' && this.currentRow.applyNo) {
         this.loadFlowStatus()
       }
+      
+      // 切换到三方确认tab时刷新数据
+      if (tab.name === 'triConfirm' && this.currentRow.applyNo) {
+        this.$nextTick(() => {
+          if (this.$refs.triConfirm && this.$refs.triConfirm.loadProcessList) {
+            console.log('🔄 Tab切换，刷新三方确认数据')
+            this.$refs.triConfirm.loadProcessList()
+          }
+        })
+      }
     },
 
     /**
@@ -1080,6 +1099,7 @@ export default {
       const types = {
         '下达': 'primary',
         '批准': 'success',
+        '确认': 'success',
         '驳回': 'danger',
         '撤回': 'warning',
         '提醒': 'info',
diff --git a/src/views/modules/erf/triConfirm.vue b/src/views/modules/erf/triConfirm.vue
index 23bef9a..bc00dbb 100644
--- a/src/views/modules/erf/triConfirm.vue
+++ b/src/views/modules/erf/triConfirm.vue
@@ -1,148 +1,229 @@
 <template>
-  <div class="mod-config">
-    <!-- 查询条件 -->
-    <el-form :inline="true" label-position="top">
-      <el-form-item label="申请单号">
-        <el-input v-model="searchData.applyNo" placeholder="请输入申请单号" style="width: 200px"></el-input>
-      </el-form-item>
-
-      <el-form-item label=" ">
-        <el-button @click="getConfirmList" type="primary">查询</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 三方确认表格 -->
-    <el-table
-      :data="dataList"
-      v-loading="dataListLoading"
-      border
-      style="width: 100%;"
-      :height="height">
-
-      <el-table-column
-        prop="applyNo"
-        label="申请单号"
-        min-width="140"
-        align="center"
-        header-align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="processStep"
-        label="工序名称"
-        min-width="120"
-        align="center"
-        header-align="center">
-      </el-table-column>
-
-      <el-table-column
-        label="生产确认"
-        min-width="180"
-        align="center"
-        header-align="center">
-        <template slot-scope="scope">
-          <div v-if="getConfirmStatus(scope.row, 'PROD')">
-            <el-tag type="success" size="small">已确认</el-tag>
-            <div style="font-size: 12px; color: #999;">
-              {{ getApproverName(scope.row, 'PROD') }}
+  <div class="tri-confirm-container">
+    <!-- 页面标题和统计 -->
+    <div class="page-header">
+      <div class="header-left">
+        <h2 class="page-title">
+          <i class="el-icon-s-check"></i> 三方确认
+        </h2>
+        <p class="page-subtitle">High Risk 生产质量技术三方确认管理</p>
+      </div>
+      <div class="header-right">
+        <div class="stat-cards">
+          <div class="stat-card stat-total">
+            <div class="stat-icon"><i class="el-icon-document"></i></div>
+            <div class="stat-content">
+              <div class="stat-value">{{ dataList.length }}</div>
+              <div class="stat-label">待确认工序</div>
             </div>
           </div>
-          <el-button
-            v-else
-            type="text"
-            size="small"
-            @click="openConfirmDialog(scope.row, 'PROD')">
-            确认
-          </el-button>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        label="质量确认"
-        min-width="180"
-        align="center"
-        header-align="center">
-        <template slot-scope="scope">
-          <div v-if="getConfirmStatus(scope.row, 'QA')">
-            <el-tag type="success" size="small">已确认</el-tag>
-            <div style="font-size: 12px; color: #999;">
-              {{ getApproverName(scope.row, 'QA') }}
+          <div class="stat-card stat-can-confirm">
+            <div class="stat-icon"><i class="el-icon-success"></i></div>
+            <div class="stat-content">
+              <div class="stat-value">{{ canConfirmCount }}</div>
+              <div class="stat-label">可立即确认</div>
             </div>
           </div>
-          <el-button
-            v-else
-            type="text"
-            size="small"
-            @click="openConfirmDialog(scope.row, 'QA')">
-            确认
-          </el-button>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        label="技术确认"
-        min-width="180"
-        align="center"
-        header-align="center">
-        <template slot-scope="scope">
-          <div v-if="getConfirmStatus(scope.row, 'TECH')">
-            <el-tag type="success" size="small">已确认</el-tag>
-            <div style="font-size: 12px; color: #999;">
-              {{ getApproverName(scope.row, 'TECH') }}
+          <div class="stat-card stat-waiting">
+            <div class="stat-icon"><i class="el-icon-time"></i></div>
+            <div class="stat-content">
+              <div class="stat-value">{{ waitingCount }}</div>
+              <div class="stat-label">等待上道工序</div>
             </div>
           </div>
-          <el-button
-            v-else
-            type="text"
-            size="small"
-            @click="openConfirmDialog(scope.row, 'TECH')">
-            确认
-          </el-button>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        label="整体状态"
-        min-width="120"
-        align="center"
-        header-align="center">
-        <template slot-scope="scope">
-          <el-tag
-            :type="isAllConfirmed(scope.row) ? 'success' : 'warning'"
-            size="small">
-            {{ isAllConfirmed(scope.row) ? '已完成' : '待确认' }}
-          </el-tag>
-        </template>
-      </el-table-column>
-    </el-table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 查询条件表单 -->
+    <div class="search-section">
+      <el-collapse v-model="searchExpanded">
+        <el-collapse-item name="1">
+          <template slot="title">
+            <i class="el-icon-search"></i>
+            <span style="margin-left: 8px; font-weight: 500;">筛选条件</span>
+          </template>
+          <el-form :inline="true" label-position="top" class="search-form">
+            <el-form-item label="申请单号">
+              <el-input v-model="queryData.applyNo" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
+            </el-form-item>
+
+            <el-form-item label="试验类型">
+              <el-select v-model="queryData.experimentType" placeholder="请选择" clearable style="width: 120px">
+                <el-option label="全部" value=""></el-option>
+                <el-option label="High Risk" value="High Risk"></el-option>
+                <el-option label="Low Risk" value="Low Risk"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="试验名称">
+              <el-input v-model="queryData.title" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
+            </el-form-item>
+
+            <el-form-item label=" ">
+              <el-button @click="handleQuery" type="primary" icon="el-icon-search">查询</el-button>
+              <el-button @click="resetQuery" type="default" icon="el-icon-refresh-left">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+
+    <!-- 卡片列表 -->
+    <div class="cards-container" v-loading="dataListLoading">
+      <transition-group name="card-list" tag="div" class="cards-grid">
+        <div
+          v-for="item in filteredDataList"
+          :key="item.applyNo + '-' + item.processStep"
+          class="confirm-card"
+          :class="{'high-risk': item.experimentType === 'High Risk', 'disabled': !item.canConfirm}">
+
+          <!-- 卡片头部 -->
+          <div class="card-header">
+            <div class="card-title-area">
+              <el-tag
+                :type="item.experimentType === 'High Risk' ? 'danger' : 'success'"
+                size="middle"
+                effect="dark"
+                class="risk-tag">
+                <i :class="item.experimentType === 'High Risk' ? 'el-icon-warning' : 'el-icon-success'"></i>
+                {{ item.experimentType }}
+              </el-tag>
+              <span class="apply-no">{{ item.applyNo }}</span>
+            </div>
+            <el-tag
+              :type="getRoleTagType(item.currentRole)"
+              size="middle"
+              effect="plain"
+              class="role-tag">
+              {{ getRoleName(item.currentRole) }}
+            </el-tag>
+          </div>
+
+          <!-- 卡片主体内容 -->
+          <div class="card-body">
+            <h3 class="experiment-title">
+              <i class="el-icon-document"></i>
+              {{ item.title }}
+            </h3>
+
+            <div class="process-info">
+              <div class="process-badge">
+                <i class="el-icon-s-operation"></i>
+                <span class="process-label">工序 {{ item.processSeq }}</span>
+              </div>
+              <div class="process-name">{{ item.processStep }}</div>
+            </div>
+
+            <div class="card-details">
+              <div class="detail-row">
+                <span class="detail-label">
+                  <i class="el-icon-box"></i>
+                  项目编号
+                </span>
+                <span class="detail-value">{{ item.projectNo || '-' }}</span>
+              </div>
+
+              <div class="detail-row">
+                <span class="detail-label">
+                  <i class="el-icon-goods"></i>
+                  产品型号
+                </span>
+                <span class="detail-value" :title="item.productType">{{ item.productType || '-' }}</span>
+              </div>
+
+              <div class="detail-row">
+                <span class="detail-label">
+                  <i class="el-icon-user"></i>
+                  申请人
+                </span>
+                <span class="detail-value">{{ item.creatorName }}</span>
+              </div>
+            </div>
+
+            <!-- 三方确认状态 -->
+            <div class="tri-status">
+              <div class="status-item" :class="{'confirmed': item.prodConfirmed}">
+                <i :class="item.prodConfirmed ? 'el-icon-circle-check' : 'el-icon-remove-outline'"></i>
+                <span>生产</span>
+              </div>
+              <div class="status-item" :class="{'confirmed': item.qaConfirmed}">
+                <i :class="item.qaConfirmed ? 'el-icon-circle-check' : 'el-icon-remove-outline'"></i>
+                <span>质量</span>
+              </div>
+              <div class="status-item" :class="{'confirmed': item.techConfirmed}">
+                <i :class="item.techConfirmed ? 'el-icon-circle-check' : 'el-icon-remove-outline'"></i>
+                <span>技术</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 卡片底部 -->
+          <div class="card-footer">
+            <div class="status-tip" v-if="!item.canConfirm">
+              <i class="el-icon-time"></i>
+              等待第{{ item.processSeq - 1 }}道工序完成
+            </div>
+            <div class="status-tip ready" v-else>
+              <i class="el-icon-success"></i>
+              可以确认
+            </div>
+            <div class="action-buttons">
+              <el-button
+                type="success"
+                size="small"
+                plain
+                icon="el-icon-check"
+                class="confirm-btn"
+                :disabled="!item.canConfirm"
+                @click="openConfirmDialog(item)">
+                确认
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </transition-group>
+
+      <!-- 空状态 -->
+      <div v-if="!dataListLoading && filteredDataList.length === 0" class="empty-state">
+        <i class="el-icon-document-checked empty-icon"></i>
+        <p class="empty-text">暂无待确认工序</p>
+        <p class="empty-subtext">您已完成所有三方确认任务</p>
+      </div>
+    </div>
 
     <!-- 确认弹窗 -->
     <el-dialog
       :title="'三方确认 - ' + getRoleName(confirmData.roleType)"
       :visible.sync="confirmDialogVisible"
-      width="600px"
+      width="700px"
       :close-on-click-modal="false"
       v-drag>
 
+      <!-- 申请单和工序信息 -->
+      <div class="confirm-info">
+        <el-descriptions :column="2" border size="small">
+          <el-descriptions-item label="申请单号">{{ confirmData.applyNo }}</el-descriptions-item>
+          <el-descriptions-item label="试验类型">
+            <el-tag :type="confirmData.experimentType === 'High Risk' ? 'danger' : 'success'" size="small">
+              {{ confirmData.experimentType }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="试验名称" :span="2">{{ confirmData.title }}</el-descriptions-item>
+          <el-descriptions-item label="工序顺序">第 {{ confirmData.processSeq }} 道</el-descriptions-item>
+          <el-descriptions-item label="工序名称">{{ confirmData.processStep }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 确认表单 -->
+      <el-divider content-position="left">确认信息</el-divider>
       <el-form :model="confirmData" label-position="top" style="margin-left: 5px; margin-top: -5px;">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="申请单号">
-              <span>{{ confirmData.applyNo }}</span>
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="工序">
-              <span>{{ confirmData.processStep }}</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="确认角色">
-              <span>{{ getRoleName(confirmData.roleType) }}</span>
+              <el-tag :type="getRoleTagType(confirmData.roleType)" size="medium">
+                {{ getRoleName(confirmData.roleType) }}
+              </el-tag>
             </el-form-item>
           </el-col>
 
@@ -158,21 +239,23 @@
 
         <el-row :gutter="20">
           <el-col :span="24">
-            <el-form-item label="确认意见">
+            <el-form-item label="确认意见" required>
               <el-input
                 v-model="confirmData.comment"
                 type="textarea"
-                :rows="4"
-            placeholder="请输入确认意见">
-          </el-input>
-        </el-form-item>
+                :rows="3"
+                placeholder="请输入确认意见"
+                maxlength="500"
+                show-word-limit>
+              </el-input>
+            </el-form-item>
           </el-col>
         </el-row>
       </el-form>
 
-      <el-footer style="height: 40px; margin-top: 10px; text-align: center">
-        <el-button type="primary" @click="doConfirm" :loading="confirmLoading">
-          {{ confirmLoading ? '确认中...' : '确认' }}
+      <el-footer style="height: 40px; margin-top: 60px; text-align: center">
+        <el-button type="success" @click="doConfirm" :loading="confirmLoading" icon="el-icon-check">
+          {{ confirmLoading ? '确认中...' : '确认提交' }}
         </el-button>
         <el-button type="primary" @click="confirmDialogVisible = false" :disabled="confirmLoading">关闭</el-button>
       </el-footer>
@@ -181,54 +264,86 @@
 </template>
 
 <script>
-import { getTriConfirmList, confirmTriApproval } from '@/api/erf/erf'
+import { getPendingTriConfirmList, confirmTriApproval } from '@/api/erf/erf'
 
 export default {
   name: 'TriConfirm',
 
   data() {
     return {
-      searchData: {
-        applyNo: ''
+      searchExpanded: ['1'], // 搜索条件默认展开
+
+      // 查询条件
+      queryData: {
+        applyNo: '',
+        experimentType: '',
+        title: ''
       },
 
+      // 数据列表
       dataList: [],
+      filteredDataList: [],
       dataListLoading: false,
 
+      // 确认弹窗
       confirmDialogVisible: false,
       confirmData: {
         applyNo: '',
         processStep: '',
+        processSeq: null,
         roleType: '',
         sampleOk: true,
         comment: '',
         approverUserId: this.$store.state.user.id,
-        approverName: this.$store.state.user.name
+        approverName: this.$store.state.user.name,
+        // 用于展示的信息
+        experimentType: '',
+        title: ''
       },
-      confirmLoading: false,
+      confirmLoading: false
+    }
+  },
+
+  computed: {
+    /**
+     * 计算可立即确认的数量
+     */
+    canConfirmCount() {
+      return this.filteredDataList.filter(item => item.canConfirm).length
+    },
 
-      height: window.innerHeight - 200
+    /**
+     * 计算等待上道工序的数量
+     */
+    waitingCount() {
+      return this.filteredDataList.filter(item => !item.canConfirm).length
     }
   },
 
+  activated() {
+    this.getDataList()
+  },
+
   methods: {
     /**
-     * 获取确认列表
+     * 获取待确认列表
      */
-    getConfirmList() {
-      if (!this.searchData.applyNo) {
-        this.$message.warning('请输入申请单号')
-        return
-      }
-
+    getDataList() {
       this.dataListLoading = true
 
-      getTriConfirmList({ applyNo: this.searchData.applyNo }).then(({data}) => {
+      const params = {
+        currentUserId: this.$store.state.user.id,
+        site: this.$store.state.user.site
+      }
+
+      getPendingTriConfirmList(params).then(({data}) => {
         this.dataListLoading = false
         if (data && data.code === 0) {
           this.dataList = data.list || []
+          this.filterData() // 应用筛选条件
         } else {
           this.dataList = []
+          this.filteredDataList = []
           this.$message.error(data.msg || '查询失败')
         }
       }).catch(error => {
@@ -237,18 +352,74 @@ export default {
       })
     },
 
+    /**
+     * 处理查询按钮点击（重新从后端获取数据）
+     */
+    handleQuery() {
+      this.getDataList()
+    },
+
+    /**
+     * 筛选数据（前端筛选）
+     */
+    filterData() {
+      let result = [...this.dataList]
+
+      // 申请单号筛选
+      if (this.queryData.applyNo) {
+        const keyword = this.queryData.applyNo.toLowerCase()
+        result = result.filter(item =>
+          item.applyNo && item.applyNo.toLowerCase().includes(keyword)
+        )
+      }
+
+      // 试验类型筛选
+      if (this.queryData.experimentType) {
+        result = result.filter(item => item.experimentType === this.queryData.experimentType)
+      }
+
+      // 试验名称筛选
+      if (this.queryData.title) {
+        const keyword = this.queryData.title.toLowerCase()
+        result = result.filter(item =>
+          item.title && item.title.toLowerCase().includes(keyword)
+        )
+      }
+
+      this.filteredDataList = result
+    },
+
+    /**
+     * 重置查询条件
+     */
+    resetQuery() {
+      this.queryData.applyNo = ''
+      this.queryData.experimentType = ''
+      this.queryData.title = ''
+      this.getDataList()
+    },
+
     /**
      * 打开确认对话框
      */
-    openConfirmDialog(row, roleType) {
+    openConfirmDialog(item) {
+      if (!item.canConfirm) {
+        this.$message.warning(`请等待第${item.processSeq - 1}道工序完成三方确认后再操作`)
+        return
+      }
+
       this.confirmData = {
-        applyNo: row.applyNo,
-        processStep: row.processStep,
-        roleType: roleType,
+        applyNo: item.applyNo,
+        processStep: item.processStep,
+        processSeq: item.processSeq,
+        roleType: item.currentRole,
         sampleOk: true,
         comment: '',
         approverUserId: this.$store.state.user.id,
-        approverName: this.$store.state.user.name
+        approverName: this.$store.state.user.name,
+        // 用于展示的信息
+        experimentType: item.experimentType,
+        title: item.title
       }
       this.confirmDialogVisible = true
     },
@@ -257,7 +428,7 @@ export default {
      * 执行确认
      */
     doConfirm() {
-      if (!this.confirmData.comment) {
+      if ((!this.confirmData.comment || this.confirmData.comment.trim() === '') && !this.confirmData.sampleOk) {
         this.$message.warning('请输入确认意见')
         return
       }
@@ -269,7 +440,7 @@ export default {
         if (data && data.code === 0) {
           this.$message.success('确认成功')
           this.confirmDialogVisible = false
-          this.getConfirmList()
+          this.getDataList() // 重新加载列表
         } else {
           this.$message.error(data.msg || '确认失败')
         }
@@ -279,30 +450,6 @@ export default {
       })
     },
 
-    /**
-     * 获取确认状态
-     */
-    getConfirmStatus(row, roleType) {
-      // TODO: 从row中获取对应角色的确认状态
-      return row[roleType.toLowerCase() + 'Confirmed']
-    },
-
-    /**
-     * 获取确认人姓名
-     */
-    getApproverName(row, roleType) {
-      return row[roleType.toLowerCase() + 'ApproverName'] || ''
-    },
-
-    /**
-     * 判断是否全部确认
-     */
-    isAllConfirmed(row) {
-      return this.getConfirmStatus(row, 'PROD') &&
-             this.getConfirmStatus(row, 'QA') &&
-             this.getConfirmStatus(row, 'TECH')
-    },
-
     /**
      * 获取角色名称
      */
@@ -313,12 +460,552 @@ export default {
         'TECH': '技术负责人'
       }
       return names[roleType] || roleType
+    },
+
+    /**
+     * 获取角色标签类型
+     */
+    getRoleTagType(roleType) {
+      const types = {
+        'PROD': 'warning',
+        'QA': 'success',
+        'TECH': 'primary'
+      }
+      return types[roleType] || 'info'
     }
   }
 }
 </script>
 
 <style scoped>
-.mod-config {
+/* 整体容器 */
+.tri-confirm-container {
+  padding: 15px;
+  background: #f5f7fa;
+  min-height: calc(100vh - 80px);
+}
+
+/* ===== 页面头部 ===== */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 5px 20px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+}
+
+.header-left {
+  color: #303133;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.page-title i {
+  font-size: 22px;
+  color: #409EFF;
+}
+
+.page-subtitle {
+  margin: 6px 0 0 0;
+  font-size: 13px;
+  color: #909399;
+}
+
+.header-right {
+  display: flex;
+  gap: 12px;
+}
+
+/* ===== 统计卡片 ===== */
+.stat-cards {
+  display: flex;
+  gap: 12px;
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  min-width: 140px;
+}
+
+.stat-card:hover {
+  border-color: #409EFF;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+}
+
+.stat-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 20px;
+  color: white;
+}
+
+.stat-total .stat-icon {
+  background: #409EFF;
+}
+
+.stat-can-confirm .stat-icon {
+  background: #67C23A;
+}
+
+.stat-waiting .stat-icon {
+  background: #E6A23C;
+}
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+/* ===== 搜索区域 ===== */
+.search-section {
+  margin-bottom: 15px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  overflow: hidden;
+}
+
+.search-section >>> .el-collapse-item__header {
+  padding: 0 15px;
+  height: 45px;
+  line-height: 45px;
+  background: white;
+  border-bottom: 1px solid #ebeef5;
+  font-size: 13px;
+  color: #303133;
+  font-weight: 500;
+}
+
+.search-section >>> .el-collapse-item__content {
+  padding: 15px;
+  background: #FFFFFF;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.search-form >>> .el-form-item {
+  margin-bottom: 10px;
+}
+
+/* ===== 卡片容器 ===== */
+.cards-container {
+  min-height: 400px;
+  position: relative;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+/* ===== 确认卡片 ===== */
+.confirm-card {
+  background: white;
+  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #EBEEF5;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.confirm-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background: #67C23A;
+  transition: all 0.3s ease;
+  border-radius: 4px 0 0 4px;
+}
+
+.confirm-card.high-risk::before {
+  background: #F56C6C;
+}
+
+.confirm-card.disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.confirm-card.disabled::before {
+  background: #909399;
+}
+
+.confirm-card:hover:not(.disabled) {
+  border-color: #409EFF;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+}
+
+/* 卡片头部 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.card-title-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.risk-tag {
+  font-weight: 500;
+  padding: 0px 12px;
+  font-size: 13px;
+}
+
+.risk-tag i {
+  margin-right: 4px;
+}
+
+.apply-no {
+  font-size: 13px;
+  color: #606266;
+  font-family: 'Courier New', monospace;
+  font-weight: 500;
+}
+
+.role-tag {
+  font-weight: 500;
+  padding: 0px 12px;
+  font-size: 13px;
+}
+
+/* 卡片主体 */
+.card-body {
+  margin-bottom: 4px;
+}
+
+.experiment-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 4px 0;
+  line-height: 1.5;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.experiment-title i {
+  color: #409EFF;
+  margin-top: 2px;
+  font-size: 16px;
+}
+
+.process-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border-radius: 4px;
+  background: #F5F7FA;
+  //border-radius: 3px;
+  transition: all 0.2s ease;
+}
+
+.process-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.process-badge i {
+  font-size: 16px;
+}
+
+.process-name {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  padding: 6px 10px;
+  background: #F5F7FA;
+  border-radius: 3px;
+  transition: all 0.2s ease;
+}
+
+.detail-row:hover {
+  background: #ECF5FF;
+}
+
+.detail-label {
+  color: #909399;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 500;
+}
+
+.detail-label i {
+  color: #409EFF;
+  font-size: 14px;
+}
+
+.detail-value {
+  color: #606266;
+  font-weight: 500;
+  text-align: right;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 三方确认状态 */
+.tri-status {
+  display: flex;
+  justify-content: space-around;
+  padding: 5px;
+  background: #F5F7FA;
+  border-radius: 4px;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  color: #909399;
+  font-size: 13px;
+  transition: all 0.3s ease;
+}
+
+.status-item i {
+  font-size: 24px;
+}
+
+.status-item.confirmed {
+  color: #67C23A;
+}
+
+.status-item.confirmed i {
+  animation: checkBounce 0.6s ease;
+}
+
+@keyframes checkBounce {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+}
+
+/* 卡片底部 */
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 6px;
+  border-top: 1px solid #EBEEF5;
+}
+
+.status-tip {
+  font-size: 12px;
+  color: #E6A23C;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 500;
+}
+
+.status-tip i {
+  font-size: 14px;
+}
+
+.status-tip.ready {
+  color: #67C23A;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.confirm-btn {
+  background: #f0f9ff;
+  border-color: #b3e19d;
+  color: #67C23A;
+  font-weight: 500;
+  padding: 7px 20px;
+  font-size: 13px;
+  transition: all 0.3s ease;
+}
+
+.confirm-btn:hover:not(:disabled) {
+  background: #67C23A;
+  border-color: #67C23A;
+  color: #FFFFFF;
+}
+
+.confirm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ===== 空状态 ===== */
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+}
+
+.empty-icon {
+  font-size: 64px;
+  color: #c0c4cc;
+  margin-bottom: 12px;
+}
+
+.empty-text {
+  font-size: 15px;
+  color: #606266;
+  margin: 0 0 6px 0;
+  font-weight: 500;
+}
+
+.empty-subtext {
+  font-size: 13px;
+  color: #909399;
+  margin: 0;
+}
+
+/* ===== 卡片动画 ===== */
+.card-list-enter-active {
+  animation: cardFadeIn 0.4s ease;
+}
+
+.card-list-leave-active {
+  animation: cardFadeOut 0.3s ease;
+}
+
+@keyframes cardFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cardFadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* ===== 弹窗样式 ===== */
+.confirm-info {
+  margin-bottom: 20px;
+}
+
+.confirm-info >>> .el-descriptions {
+  font-size: 13px;
+}
+
+/* ===== 响应式设计 ===== */
+@media screen and (max-width: 1600px) {
+  .cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+
+  .page-header {
+    flex-direction: column;
+    gap: 15px;
+    align-items: flex-start;
+  }
+
+  .stat-cards {
+    width: 100%;
+    overflow-x: auto;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stat-cards {
+    flex-direction: column;
+  }
+
+  .stat-card {
+    width: 100%;
+  }
 }
 </style>