diff --git a/antis-ncc-admin/.env.development b/antis-ncc-admin/.env.development
index bd6266d..2f8e237 100644
--- a/antis-ncc-admin/.env.development
+++ b/antis-ncc-admin/.env.development
@@ -1,5 +1,6 @@
 # 开发
 
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
-VUE_APP_BASE_API = 'http://lvqian.antissoft.com'
+# VUE_APP_BASE_API = 'http://lvqian.antissoft.com'
+VUE_APP_BASE_API = 'http://localhost:2011'
 VUE_APP_BASE_WSS = 'ws://192.168.110.45:2011/websocket'
diff --git a/antis-ncc-admin/src/api/extend/salaryCalculation.js b/antis-ncc-admin/src/api/extend/salaryCalculation.js
index 0dd37a4..77ce7a3 100644
--- a/antis-ncc-admin/src/api/extend/salaryCalculation.js
+++ b/antis-ncc-admin/src/api/extend/salaryCalculation.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 保存金三角开卡业绩统计数据
 export function saveGoldTriangleStatistics(statisticsMonth) {
   return request({
-    url: '/api/Extend/LqStatistics/save-gold-triangle-statistics',
+    url: '/api/Extend/LqStatistics/save-gold-triangle-stats',
     method: 'POST',
     data: { statisticsMonth }
   })
@@ -12,7 +12,7 @@ export function saveGoldTriangleStatistics(statisticsMonth) {
 // 保存健康师个人开单业绩统计数据
 export function savePersonalPerformanceStatistics(statisticsMonth) {
   return request({
-    url: '/api/Extend/LqStatistics/save-personal-performance-statistics',
+    url: '/api/Extend/LqStatistics/save-personal-performance-stats',
     method: 'POST',
     data: { statisticsMonth }
   })
@@ -21,7 +21,7 @@ export function savePersonalPerformanceStatistics(statisticsMonth) {
 // 保存科技部开单业绩统计数据
 export function saveTechPerformanceStatistics(statisticsMonth) {
   return request({
-    url: '/api/Extend/LqStatistics/save-tech-performance-statistics',
+    url: '/api/Extend/LqStatistics/save-tech-performance-stats',
     method: 'POST',
     data: { statisticsMonth }
   })
diff --git a/antis-ncc-admin/src/utils/define.js b/antis-ncc-admin/src/utils/define.js
index 63c75ae..0b81f74 100644
--- a/antis-ncc-admin/src/utils/define.js
+++ b/antis-ncc-admin/src/utils/define.js
@@ -1,7 +1,7 @@
 // 开发环境接口配置
 // JAVA Boot版本对应后端接口地址
 // JAVA Cloud对应网关地址
-const APIURl = 'http://localhost:8061'
+const APIURl = 'http://localhost:2011'
 
 module.exports = {
   APIURl: APIURl,
diff --git a/antis-ncc-admin/src/views/salaryCalculation/index.vue b/antis-ncc-admin/src/views/salaryCalculation/index.vue
index 61d6ca8..d52a753 100644
--- a/antis-ncc-admin/src/views/salaryCalculation/index.vue
+++ b/antis-ncc-admin/src/views/salaryCalculation/index.vue
@@ -1,199 +1,349 @@
 <template>
-  <div class="NCC-common-layout">
-    <div class="NCC-common-layout-center">
-      <!-- 页面标题 -->
-      <div class="page-header">
-        <h2 class="page-title">
-          <i class="el-icon-calculator"></i>
-          工资计算系统
-        </h2>
-        <p class="page-description">统计各类业绩数据，为工资计算提供基础数据支撑</p>
+  <div class="salary-calculation-container">
+    <!-- 页面头部 -->
+    <div class="header-card">
+      <h1 class="title">工资计算与统计系统</h1>
+      <p class="subtitle">智能生成各类业绩统计数据，一键完成工资计算</p>
+    </div>
+
+    <!-- 月份选择区域 -->
+    <el-card class="box-card month-selector-card">
+      <div slot="header" class="clearfix">
+        <span><i class="el-icon-date"></i> 选择统计月份</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="resetMonth">重置</el-button>
       </div>
+      <div class="month-picker-wrapper">
+        <el-date-picker
+          v-model="statisticsMonth"
+          type="month"
+          placeholder="选择月份"
+          format="yyyy年MM月"
+          value-format="yyyyMM"
+          :clearable="false"
+          class="month-picker"
+        >
+        </el-date-picker>
+      </div>
+    </el-card>
 
-      <!-- 统计月份选择 -->
-      <div class="NCC-common-search-box">
-        <el-form :inline="true" class="statistics-form">
-          <el-form-item label="统计月份">
-            <el-date-picker
-              v-model="statisticsMonth"
-              type="month"
-              placeholder="选择月份"
-              format="yyyyMM"
-              value-format="yyyyMM"
-              :clearable="false"
-              class="month-picker"
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-button 
-              type="primary" 
-              icon="el-icon-refresh" 
-              @click="refreshMonth"
-              :loading="loading"
+    <!-- 主要内容区域 - 左右布局 -->
+    <div class="main-content">
+      <!-- 左侧：统计操作区域 -->
+      <div class="left-panel">
+        <!-- 一键计算工资 -->
+        <el-card class="box-card calculate-card">
+          <div slot="header" class="clearfix">
+            <span><i class="el-icon-cpu"></i> 一键计算工资</span>
+          </div>
+          <div class="calculate-content">
+            <p class="calculate-desc">按顺序执行所有统计方法，生成完整的工资数据</p>
+            <el-button
+              type="primary"
+              size="large"
+              :loading="isCalculating"
+              @click="handleCalculateSalary"
+              class="calculate-button"
+              :disabled="!statisticsMonth"
             >
-              刷新月份
+              <i class="el-icon-magic-stick"></i> 
+              {{ isCalculating ? '计算中...' : '一键计算工资' }}
             </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-
-      <!-- 统计按钮区域 -->
-      <div class="statistics-buttons">
-        <div class="button-grid">
-          <!-- 金三角开卡业绩统计 -->
-          <div class="statistics-card gold-triangle">
-            <div class="card-header">
-              <i class="el-icon-trophy"></i>
-              <h3>金三角开卡业绩统计</h3>
+            <div v-if="calculationProgress.length > 0" class="progress-info">
+              <div class="progress-title">计算进度：</div>
+              <div v-for="(step, index) in calculationProgress" :key="index" class="progress-step">
+                <i :class="getProgressIcon(step.status)" :style="{ color: getProgressColor(step.status) }"></i>
+                <span :class="{ 'completed': step.status === 'completed', 'failed': step.status === 'failed' }">
+                  {{ step.name }}
+                </span>
+              </div>
             </div>
-            <div class="card-content">
-              <p class="card-description">统计金三角团队的开卡业绩数据</p>
-              <el-button 
-                type="primary" 
-                size="large" 
+          </div>
+        </el-card>
+
+        <!-- 单独统计操作 -->
+        <el-card class="box-card statistics-card">
+          <div slot="header" class="clearfix">
+            <span><i class="el-icon-s-operation"></i> 单独统计操作</span>
+          </div>
+          <div class="statistics-grid">
+            <div class="stat-item blue-item">
+              <div class="stat-header">
+                <i class="el-icon-s-data"></i>
+                <span>金三角开卡业绩</span>
+              </div>
+              <el-button
+                type="primary"
                 :loading="loadingStates.goldTriangle"
                 @click="handleGoldTriangleStatistics"
-                class="statistics-btn"
+                class="stat-button"
+                :disabled="!statisticsMonth"
               >
-                <i class="el-icon-data-analysis"></i>
-                开始统计
+                立即统计
               </el-button>
             </div>
-          </div>
 
-          <!-- 健康师个人开单业绩统计 -->
-          <div class="statistics-card personal-performance">
-            <div class="card-header">
-              <i class="el-icon-user"></i>
-              <h3>健康师个人开单业绩统计</h3>
-            </div>
-            <div class="card-content">
-              <p class="card-description">统计健康师个人开单业绩，包含基础业绩和合作业绩</p>
-              <el-button 
-                type="success" 
-                size="large" 
+            <div class="stat-item green-item">
+              <div class="stat-header">
+                <i class="el-icon-user"></i>
+                <span>健康师个人开单业绩</span>
+              </div>
+              <el-button
+                type="success"
                 :loading="loadingStates.personalPerformance"
                 @click="handlePersonalPerformanceStatistics"
-                class="statistics-btn"
+                class="stat-button"
+                :disabled="!statisticsMonth"
               >
-                <i class="el-icon-data-analysis"></i>
-                开始统计
+                立即统计
               </el-button>
             </div>
-          </div>
 
-          <!-- 科技部开单业绩统计 -->
-          <div class="statistics-card tech-performance">
-            <div class="card-header">
-              <i class="el-icon-cpu"></i>
-              <h3>科技部开单业绩统计</h3>
-            </div>
-            <div class="card-content">
-              <p class="card-description">统计科技部老师的开单业绩数据</p>
-              <el-button 
-                type="warning" 
-                size="large" 
+            <div class="stat-item orange-item">
+              <div class="stat-header">
+                <i class="el-icon-s-promotion"></i>
+                <span>科技部开单业绩</span>
+              </div>
+              <el-button
+                type="warning"
                 :loading="loadingStates.techPerformance"
                 @click="handleTechPerformanceStatistics"
-                class="statistics-btn"
+                class="stat-button"
+                :disabled="!statisticsMonth"
               >
-                <i class="el-icon-data-analysis"></i>
-                开始统计
+                立即统计
+              </el-button>
+            </div>
+
+            <!-- 预留位置，用于未来添加更多统计方法 -->
+            <div class="stat-item placeholder-item">
+              <div class="stat-header">
+                <i class="el-icon-plus"></i>
+                <span>更多统计方法</span>
+              </div>
+              <el-button
+                type="info"
+                disabled
+                class="stat-button"
+              >
+                敬请期待
               </el-button>
             </div>
           </div>
-        </div>
+        </el-card>
       </div>
 
-      <!-- 结果显示区域 -->
-      <div class="result-section">
-        <div class="result-header">
-          <h3>
-            <i class="el-icon-document"></i>
-            统计结果
-          </h3>
-          <el-button 
-            type="text" 
-            icon="el-icon-delete" 
-            @click="clearResults"
-            v-if="resultData.length > 0"
-          >
-            清空结果
-          </el-button>
-        </div>
-        
-        <div class="result-content" v-if="resultData.length > 0">
-          <div 
-            v-for="(result, index) in resultData" 
-            :key="index" 
-            class="result-item"
-            :class="result.type"
-          >
-            <div class="result-header-item">
-              <div class="result-title">
-                <i :class="getResultIcon(result.type)"></i>
-                {{ result.title }}
-              </div>
-              <div class="result-time">{{ result.time }}</div>
+      <!-- 右侧：结果显示区域 -->
+      <div class="right-panel">
+        <el-card class="box-card result-card">
+          <div slot="header" class="clearfix">
+            <span><i class="el-icon-document"></i> 统计结果</span>
+            <div class="header-actions">
+              <el-button type="text" @click="exportResults" :disabled="results.length === 0">
+                <i class="el-icon-download"></i> 导出
+              </el-button>
+              <el-button type="text" @click="clearResults">
+                <i class="el-icon-delete"></i> 清空
+              </el-button>
             </div>
-            <div class="result-body">
-              <div class="result-status" :class="result.success ? 'success' : 'error'">
-                <i :class="result.success ? 'el-icon-success' : 'el-icon-error'"></i>
-                {{ result.success ? '统计成功' : '统计失败' }}
-              </div>
-              <div class="result-details">
-                <pre class="result-json">{{ formatResult(result.data) }}</pre>
+          </div>
+          <div class="result-list" ref="resultList">
+            <div v-if="results.length === 0" class="no-results">
+              <i class="el-icon-document-copy"></i>
+              <p>暂无统计结果</p>
+              <p class="no-results-desc">请选择月份并点击上方按钮进行统计</p>
+            </div>
+            <div v-for="(result, index) in results" :key="index" :class="['result-item', result.success ? 'success-item' : 'error-item']">
+              <div class="result-header">
+                <i :class="[result.success ? 'el-icon-success' : 'el-icon-error', 'result-icon']"></i>
+                <span class="result-title">{{ result.title }}</span>
+                <span class="result-time">{{ result.time }}</span>
               </div>
+              <pre class="result-content">{{ formatJson(result.data) }}</pre>
             </div>
           </div>
-        </div>
-
-        <div v-else class="empty-result">
-          <i class="el-icon-document-copy"></i>
-          <p>暂无统计结果，请点击上方按钮开始统计</p>
-        </div>
+        </el-card>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { 
-  saveGoldTriangleStatistics, 
-  savePersonalPerformanceStatistics, 
-  saveTechPerformanceStatistics 
+import {
+  saveGoldTriangleStatistics,
+  savePersonalPerformanceStatistics,
+  saveTechPerformanceStatistics
 } from '@/api/extend/salaryCalculation'
 
 export default {
   name: 'SalaryCalculation',
   data() {
     return {
-      // 统计月份，默认为当前月份
       statisticsMonth: this.getCurrentMonth(),
-      // 加载状态
-      loading: false,
       loadingStates: {
         goldTriangle: false,
         personalPerformance: false,
         techPerformance: false
       },
-      // 结果数据
-      resultData: []
+      results: [], // 存储统计结果，最多保留10条
+      isCalculating: false, // 一键计算状态
+      calculationProgress: [] // 计算进度
     }
   },
   methods: {
-    // 获取当前月份
+    resetMonth() {
+      this.statisticsMonth = this.getCurrentMonth()
+      this.$message.info('已重置为当前月份')
+    },
     getCurrentMonth() {
       const now = new Date()
       const year = now.getFullYear()
       const month = String(now.getMonth() + 1).padStart(2, '0')
       return `${year}${month}`
     },
+    clearResults() {
+      this.results = []
+      this.calculationProgress = []
+      this.$message.info('已清空所有统计结果')
+    },
+    addResult(newResult) {
+      this.results.unshift(newResult) // 添加到数组开头
+      if (this.results.length > 10) {
+        this.results.pop() // 保持最多10条记录
+      }
+      this.$nextTick(() => {
+        this.$refs.resultList.scrollTop = 0 // 滚动到顶部显示最新结果
+      })
+    },
+    formatJson(json) {
+      if (typeof json !== 'string') {
+        json = JSON.stringify(json, null, 2)
+      }
+      return json
+    },
+    exportResults() {
+      if (this.results.length === 0) {
+        this.$message.warning('没有可导出的结果')
+        return
+      }
+      // 这里可以实现导出功能
+      this.$message.success('导出功能开发中...')
+    },
 
-    // 刷新月份
-    refreshMonth() {
-      this.statisticsMonth = this.getCurrentMonth()
-      this.$message.success('月份已刷新为当前月份')
+    // 一键计算工资
+    async handleCalculateSalary() {
+      if (!this.statisticsMonth) {
+        this.$message.error('请先选择统计月份')
+        return
+      }
+
+      this.isCalculating = true
+      this.calculationProgress = []
+      this.results = [] // 清空之前的结果
+
+      // 定义统计步骤
+      const steps = [
+        {
+          name: '金三角开卡业绩统计',
+          method: 'handleGoldTriangleStatistics',
+          type: 'gold-triangle'
+        },
+        {
+          name: '健康师个人开单业绩统计',
+          method: 'handlePersonalPerformanceStatistics',
+          type: 'personal-performance'
+        },
+        {
+          name: '科技部开单业绩统计',
+          method: 'handleTechPerformanceStatistics',
+          type: 'tech-performance'
+        }
+      ]
+
+      try {
+        // 按顺序执行每个统计步骤
+        for (let i = 0; i < steps.length; i++) {
+          const step = steps[i]
+          
+          // 更新进度状态
+          this.calculationProgress.push({
+            name: step.name,
+            status: 'running'
+          })
+
+          try {
+            // 调用对应的统计方法
+            await this[step.method]()
+            
+            // 标记为完成
+            this.calculationProgress[i].status = 'completed'
+            
+            // 等待一秒再执行下一步
+            if (i < steps.length - 1) {
+              await new Promise(resolve => setTimeout(resolve, 1000))
+            }
+          } catch (error) {
+            // 标记为失败
+            this.calculationProgress[i].status = 'failed'
+            this.$message.error(`${step.name}失败: ${error.message}`)
+            
+            // 如果某个步骤失败，询问是否继续
+            const continueCalc = await this.$confirm(
+              `${step.name}执行失败，是否继续执行后续统计？`,
+              '统计失败',
+              {
+                confirmButtonText: '继续',
+                cancelButtonText: '停止',
+                type: 'warning'
+              }
+            ).catch(() => false)
+            
+            if (!continueCalc) {
+              break
+            }
+          }
+        }
+
+        // 检查是否所有步骤都完成
+        const completedCount = this.calculationProgress.filter(p => p.status === 'completed').length
+        if (completedCount === steps.length) {
+          this.$message.success('工资计算完成！所有统计步骤都已成功执行')
+        } else {
+          this.$message.warning(`工资计算部分完成，成功执行了 ${completedCount}/${steps.length} 个统计步骤`)
+        }
+
+      } catch (error) {
+        this.$message.error('工资计算过程中发生错误')
+      } finally {
+        this.isCalculating = false
+      }
+    },
+
+    // 获取进度图标
+    getProgressIcon(status) {
+      switch (status) {
+        case 'running':
+          return 'el-icon-loading'
+        case 'completed':
+          return 'el-icon-success'
+        case 'failed':
+          return 'el-icon-error'
+        default:
+          return 'el-icon-time'
+      }
+    },
+
+    // 获取进度颜色
+    getProgressColor(status) {
+      switch (status) {
+        case 'running':
+          return '#409EFF'
+        case 'completed':
+          return '#67C23A'
+        case 'failed':
+          return '#F56C6C'
+        default:
+          return '#909399'
+      }
     },
 
     // 金三角开卡业绩统计
@@ -218,6 +368,7 @@ export default {
           time: new Date().toLocaleString()
         })
         this.$message.error('金三角开卡业绩统计失败')
+        throw error // 重新抛出错误，用于一键计算时的错误处理
       } finally {
         this.loadingStates.goldTriangle = false
       }
@@ -245,6 +396,7 @@ export default {
           time: new Date().toLocaleString()
         })
         this.$message.error('健康师个人开单业绩统计失败')
+        throw error
       } finally {
         this.loadingStates.personalPerformance = false
       }
@@ -272,334 +424,363 @@ export default {
           time: new Date().toLocaleString()
         })
         this.$message.error('科技部开单业绩统计失败')
+        throw error
       } finally {
         this.loadingStates.techPerformance = false
       }
-    },
-
-    // 添加结果
-    addResult(result) {
-      this.resultData.unshift(result)
-      // 限制结果数量，最多保留10条
-      if (this.resultData.length > 10) {
-        this.resultData = this.resultData.slice(0, 10)
-      }
-    },
-
-    // 清空结果
-    clearResults() {
-      this.resultData = []
-      this.$message.success('结果已清空')
-    },
-
-    // 获取结果图标
-    getResultIcon(type) {
-      const iconMap = {
-        'gold-triangle': 'el-icon-trophy',
-        'personal-performance': 'el-icon-user',
-        'tech-performance': 'el-icon-cpu'
-      }
-      return iconMap[type] || 'el-icon-document'
-    },
-
-    // 格式化结果显示
-    formatResult(data) {
-      if (typeof data === 'string') {
-        return data
-      }
-      return JSON.stringify(data, null, 2)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.page-header {
-  text-align: center;
-  margin-bottom: 30px;
-  padding: 20px 0;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 12px;
-  color: white;
-  
-  .page-title {
-    margin: 0 0 10px 0;
-    font-size: 28px;
-    font-weight: 600;
-    
-    i {
-      margin-right: 10px;
-      font-size: 32px;
+.salary-calculation-container {
+  padding: 20px;
+  background-color: #f0f2f5;
+  min-height: calc(100vh - 50px);
+  font-family: 'Arial', sans-serif;
+
+  .header-card {
+    background: linear-gradient(135deg, #409EFF, #79BBFF);
+    color: #fff;
+    padding: 30px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+    text-align: center;
+    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2);
+
+    .title {
+      font-size: 2.5em;
+      margin-bottom: 10px;
+      font-weight: bold;
     }
-  }
-  
-  .page-description {
-    margin: 0;
-    font-size: 16px;
-    opacity: 0.9;
-  }
-}
 
-.statistics-form {
-  background: white;
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-  
-  .month-picker {
-    width: 200px;
+    .subtitle {
+      font-size: 1.1em;
+      opacity: 0.9;
+    }
   }
-}
 
-.statistics-buttons {
-  margin-bottom: 30px;
-  
-  .button-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 20px;
-  }
-}
+  .box-card {
+    border-radius: 10px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
-.statistics-card {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  overflow: hidden;
-  
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
-  }
-  
-  .card-header {
-    padding: 20px 20px 15px;
-    border-bottom: 1px solid #f0f0f0;
-    
-    i {
-      font-size: 24px;
-      margin-right: 10px;
+    ::v-deep .el-card__header {
+      background-color: #fff;
+      border-bottom: 1px solid #ebeef5;
+      padding: 18px 20px;
+      font-size: 1.1em;
+      font-weight: bold;
+      color: #303133;
     }
-    
-    h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-      display: inline-block;
+
+    ::v-deep .el-card__body {
+      padding: 20px;
     }
   }
-  
-  .card-content {
-    padding: 20px;
-    
-    .card-description {
-      color: #666;
-      margin: 0 0 20px 0;
-      line-height: 1.6;
+
+  .month-selector-card {
+    .month-picker-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-    
-    .statistics-btn {
+    .month-picker {
       width: 100%;
-      height: 50px;
-      font-size: 16px;
-      font-weight: 600;
-      border-radius: 8px;
-      
-      i {
-        margin-right: 8px;
-        font-size: 18px;
-      }
+      max-width: 300px;
     }
   }
-  
-  // 不同卡片的主题色
-  &.gold-triangle {
-    .card-header i {
-      color: #409EFF;
+
+  // 主要内容区域 - 左右布局
+  .main-content {
+    display: flex;
+    gap: 20px;
+    min-height: 600px;
+
+    .left-panel {
+      flex: 1;
+      min-width: 0; // 防止flex子项溢出
     }
-  }
-  
-  &.personal-performance {
-    .card-header i {
-      color: #67C23A;
+
+    .right-panel {
+      flex: 1;
+      min-width: 0;
     }
   }
-  
-  &.tech-performance {
-    .card-header i {
-      color: #E6A23C;
+
+  // 一键计算工资卡片
+  .calculate-card {
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, #67C23A, #85CE61);
+    color: white;
+
+    ::v-deep .el-card__header {
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }
-  }
-}
 
-.result-section {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  
-  .result-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e9ecef;
-    
-    h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: #333;
-      
-      i {
-        margin-right: 8px;
-        color: #409EFF;
+    .calculate-content {
+      text-align: center;
+
+      .calculate-desc {
+        color: rgba(255, 255, 255, 0.9);
+        margin-bottom: 20px;
+        font-size: 1.1em;
+      }
+
+      .calculate-button {
+        width: 100%;
+        height: 60px;
+        font-size: 1.3em;
+        font-weight: bold;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.2);
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        color: white;
+
+        &:hover:not(:disabled) {
+          background: rgba(255, 255, 255, 0.3);
+          border-color: rgba(255, 255, 255, 0.5);
+        }
+
+        &:disabled {
+          opacity: 0.6;
+        }
+      }
+
+      .progress-info {
+        margin-top: 20px;
+        text-align: left;
+
+        .progress-title {
+          font-weight: bold;
+          margin-bottom: 10px;
+          color: rgba(255, 255, 255, 0.9);
+        }
+
+        .progress-step {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          font-size: 0.95em;
+
+          i {
+            margin-right: 8px;
+            font-size: 1.1em;
+          }
+
+          span {
+            color: rgba(255, 255, 255, 0.9);
+
+            &.completed {
+              color: #fff;
+              font-weight: bold;
+            }
+
+            &.failed {
+              color: #ffeb3b;
+              font-weight: bold;
+            }
+          }
+        }
       }
     }
   }
-  
-  .result-content {
-    max-height: 600px;
-    overflow-y: auto;
-  }
-  
-  .result-item {
-    border-bottom: 1px solid #f0f0f0;
-    
-    &:last-child {
-      border-bottom: none;
+
+  // 统计操作卡片
+  .statistics-card {
+    .statistics-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+
+      .stat-item {
+        background: #fff;
+        border-radius: 8px;
+        padding: 15px;
+        text-align: center;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .stat-header {
+          margin-bottom: 15px;
+
+          i {
+            font-size: 1.5em;
+            margin-bottom: 8px;
+            display: block;
+          }
+
+          span {
+            font-weight: bold;
+            font-size: 0.9em;
+            color: #333;
+          }
+        }
+
+        .stat-button {
+          width: 100%;
+          height: 40px;
+          font-size: 0.9em;
+          border-radius: 6px;
+        }
+
+        // 不同主题色
+        &.blue-item {
+          border-color: #409EFF;
+          .stat-header i { color: #409EFF; }
+        }
+
+        &.green-item {
+          border-color: #67C23A;
+          .stat-header i { color: #67C23A; }
+        }
+
+        &.orange-item {
+          border-color: #E6A23C;
+          .stat-header i { color: #E6A23C; }
+        }
+
+        &.placeholder-item {
+          border-color: #C0C4CC;
+          background: #f5f7fa;
+          .stat-header i { color: #C0C4CC; }
+        }
+      }
     }
-    
-    .result-header-item {
+  }
+
+  // 结果显示卡片
+  .result-card {
+    height: 100%;
+
+    .header-actions {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 15px 20px;
-      background: #fafafa;
-      
-      .result-title {
-        font-weight: 600;
-        color: #333;
-        
+      gap: 10px;
+    }
+
+    .result-list {
+      max-height: 500px;
+      overflow-y: auto;
+      padding-right: 10px;
+
+      .no-results {
+        text-align: center;
+        color: #909399;
+        padding: 40px 20px;
+
         i {
-          margin-right: 8px;
+          font-size: 3em;
+          margin-bottom: 15px;
+          color: #ddd;
+        }
+
+        p {
+          margin: 5px 0;
+          font-size: 1.1em;
+        }
+
+        .no-results-desc {
+          font-size: 0.9em;
+          color: #bbb;
         }
       }
-      
-      .result-time {
-        color: #999;
-        font-size: 14px;
-      }
-    }
-    
-    .result-body {
-      padding: 20px;
-      
-      .result-status {
-        display: flex;
-        align-items: center;
+
+      .result-item {
+        border-left: 5px solid;
+        padding: 15px;
         margin-bottom: 15px;
-        font-weight: 600;
-        
-        i {
-          margin-right: 8px;
-          font-size: 16px;
+        border-radius: 8px;
+        background-color: #f9f9f9;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+        &.success-item {
+          border-color: #67C23A;
         }
-        
-        &.success {
-          color: #67C23A;
+        &.error-item {
+          border-color: #F56C6C;
         }
-        
-        &.error {
-          color: #F56C6C;
+
+        .result-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          font-weight: bold;
+          color: #303133;
+
+          .result-icon {
+            font-size: 1.2em;
+            margin-right: 8px;
+            &.el-icon-success {
+              color: #67C23A;
+            }
+            &.el-icon-error {
+              color: #F56C6C;
+            }
+          }
+
+          .result-title {
+            font-size: 1.1em;
+            flex-grow: 1;
+          }
+
+          .result-time {
+            font-size: 0.9em;
+            color: #909399;
+          }
         }
-      }
-      
-      .result-details {
-        .result-json {
-          background: #f8f9fa;
-          border: 1px solid #e9ecef;
-          border-radius: 6px;
-          padding: 15px;
-          margin: 0;
-          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-          font-size: 13px;
-          line-height: 1.5;
-          color: #333;
+
+        .result-content {
+          background-color: #eee;
+          padding: 10px;
+          border-radius: 5px;
           white-space: pre-wrap;
           word-break: break-all;
-          max-height: 300px;
-          overflow-y: auto;
+          font-family: 'Consolas', 'Monaco', monospace;
+          font-size: 0.9em;
+          color: #333;
         }
       }
     }
-    
-    // 不同类型的结果项样式
-    &.gold-triangle {
-      .result-header-item {
-        border-left: 4px solid #409EFF;
-      }
-    }
-    
-    &.personal-performance {
-      .result-header-item {
-        border-left: 4px solid #67C23A;
-      }
-    }
-    
-    &.tech-performance {
-      .result-header-item {
-        border-left: 4px solid #E6A23C;
-      }
-    }
   }
-  
-  .empty-result {
-    text-align: center;
-    padding: 60px 20px;
-    color: #999;
-    
-    i {
-      font-size: 48px;
-      margin-bottom: 20px;
-      color: #ddd;
-    }
-    
-    p {
-      margin: 0;
-      font-size: 16px;
-    }
+}
+
+// 响应式调整
+@media (max-width: 1200px) {
+  .main-content {
+    flex-direction: column;
   }
 }
 
-// 响应式设计
 @media (max-width: 768px) {
-  .button-grid {
-    grid-template-columns: 1fr;
+  .salary-calculation-container {
+    padding: 10px;
   }
   
-  .page-header {
-    .page-title {
-      font-size: 24px;
+  .header-card {
+    padding: 20px;
+    .title {
+      font-size: 1.8em;
     }
-    
-    .page-description {
-      font-size: 14px;
+    .subtitle {
+      font-size: 0.9em;
     }
   }
   
-  .statistics-card {
-    .card-header h3 {
-      font-size: 16px;
-    }
-    
-    .card-content .statistics-btn {
-      height: 45px;
-      font-size: 14px;
-    }
+  .statistics-grid {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .calculate-button {
+    height: 50px !important;
+    font-size: 1.1em !important;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqStatistics/SalaryStatisticsInput.cs b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqStatistics/SalaryStatisticsInput.cs
new file mode 100644
index 0000000..d3787f8
--- /dev/null
+++ b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqStatistics/SalaryStatisticsInput.cs
@@ -0,0 +1,17 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace NCC.Extend.Entitys.Dto.LqStatistics
+{
+    /// <summary>
+    /// 工资统计输入参数
+    /// </summary>
+    public class SalaryStatisticsInput
+    {
+        /// <summary>
+        /// 统计月份(YYYYMM格式)
+        /// </summary>
+        [Required(ErrorMessage = "统计月份不能为空")]
+        [StringLength(6, MinimumLength = 6, ErrorMessage = "统计月份格式错误，请使用YYYYMM格式")]
+        public string StatisticsMonth { get; set; }
+    }
+}
diff --git a/netcore/src/Modularity/Extend/NCC.Extend/LqStatisticsService.cs b/netcore/src/Modularity/Extend/NCC.Extend/LqStatisticsService.cs
index 0ad0d63..c905dc6 100644
--- a/netcore/src/Modularity/Extend/NCC.Extend/LqStatisticsService.cs
+++ b/netcore/src/Modularity/Extend/NCC.Extend/LqStatisticsService.cs
@@ -1211,14 +1211,16 @@ namespace NCC.Extend.LqStatistics
         /// <response code="200">成功保存统计数据</response>
         /// <response code="400">参数错误</response>
         /// <response code="500">服务器内部错误</response>
-        [HttpPost("save-gold-triangle-statistics")]
-        public async Task<dynamic> SaveGoldTriangleStatistics(string statisticsMonth)
+        [HttpPost("save-gold-triangle-stats")]
+        public async Task<dynamic> SaveGoldTriangleStatistics([FromBody] SalaryStatisticsInput input)
         {
-            if (string.IsNullOrEmpty(statisticsMonth) || statisticsMonth.Length != 6)
+            if (input == null || string.IsNullOrEmpty(input.StatisticsMonth) || input.StatisticsMonth.Length != 6)
             {
                 throw NCCException.Oh("统计月份格式错误，请使用YYYYMM格式");
             }
 
+            var statisticsMonth = input.StatisticsMonth;
+
             try
             {
                 // 使用数据库聚合方式，直接在数据库中完成所有统计计算
@@ -1389,14 +1391,16 @@ namespace NCC.Extend.LqStatistics
         /// <response code="200">成功保存统计数据</response>
         /// <response code="400">参数错误</response>
         /// <response code="500">服务器内部错误</response>
-        [HttpPost("save-personal-performance-statistics")]
-        public async Task<dynamic> SavePersonalPerformanceStatistics(string statisticsMonth)
+        [HttpPost("save-personal-performance-stats")]
+        public async Task<dynamic> SavePersonalPerformanceStatistics([FromBody] SalaryStatisticsInput input)
         {
-            if (string.IsNullOrEmpty(statisticsMonth) || statisticsMonth.Length != 6)
+            if (input == null || string.IsNullOrEmpty(input.StatisticsMonth) || input.StatisticsMonth.Length != 6)
             {
                 throw NCCException.Oh("统计月份格式错误，请使用YYYYMM格式");
             }
 
+            var statisticsMonth = input.StatisticsMonth;
+
             try
             {
                 // 使用数据库聚合方式，直接在数据库中完成所有统计计算
@@ -1662,14 +1666,16 @@ namespace NCC.Extend.LqStatistics
         /// <response code="200">成功保存统计数据</response>
         /// <response code="400">参数错误</response>
         /// <response code="500">服务器内部错误</response>
-        [HttpPost("save-tech-performance-statistics")]
-        public async Task<dynamic> SaveTechPerformanceStatistics(string statisticsMonth)
+        [HttpPost("save-tech-performance-stats")]
+        public async Task<dynamic> SaveTechPerformanceStatistics([FromBody] SalaryStatisticsInput input)
         {
-            if (string.IsNullOrEmpty(statisticsMonth) || statisticsMonth.Length != 6)
+            if (input == null || string.IsNullOrEmpty(input.StatisticsMonth) || input.StatisticsMonth.Length != 6)
             {
                 throw NCCException.Oh("统计月份格式错误，请使用YYYYMM格式");
             }
 
+            var statisticsMonth = input.StatisticsMonth;
+
             try
             {
                 // 使用数据库聚合方式，只统计开单业绩（开卡流水）