feat(员工档案): 新增员工档案页面及功能

- 添加员工档案页面，包含基本信息、综合评价、工作履历等模块
- 实现时间范围切换和组织选择功能
- 使用echarts展示个人能力雷达图
- 更新环境配置和端口设置
- 修改token key以支持多项目区分

.env.development

@@ -1,6 +1,9 @@
 # 页面标题
 VITE_APP_TITLE = 安检分级质控系统-管理端
 
+# 项目标识（用于区分不同项目的登录状态）
+VITE_APP_TOKEN_KEY = 'chongqing'
+
 # 开发环境配置
 VITE_APP_ENV = 'development'
 

.env.production

@@ -1,6 +1,9 @@
 # 页面标题
 VITE_APP_TITLE = 安检分级质控系统-管理端
 
+# 项目标识（用于区分不同项目的登录状态）
+VITE_APP_TOKEN_KEY = 'chongqing'
+
 # 生产环境配置
 VITE_APP_ENV = 'production'
 
@@ -8,4 +11,4 @@ VITE_APP_ENV = 'production'
 VITE_APP_BASE_API = '/prod-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
-VITE_BUILD_COMPRESS = gzip
+VITE_BUILD_COMPRESS = gzip

.env.staging

@@ -1,6 +1,9 @@
 # 页面标题
 VITE_APP_TITLE = 安检分级质控系统-管理端
 
+# 项目标识（用于区分不同项目的登录状态）
+VITE_APP_TOKEN_KEY = 'chongqing'
+
 # 生产环境配置
 VITE_APP_ENV = 'staging'
 
@@ -8,4 +11,4 @@ VITE_APP_ENV = 'staging'
 VITE_APP_BASE_API = '/stage-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
-VITE_BUILD_COMPRESS = gzip
+VITE_BUILD_COMPRESS = gzip

src/utils/auth.js

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'Admin-Token'
+const TokenKey = 'Admin-Token-' + import.meta.env.VITE_APP_TOKEN_KEY
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/views/portraitManagement/employeeProfile/index.vue

@@ -0,0 +1,532 @@
+<template>
+  <div class="employee-profile">
+    <div class="top-bar">
+      <div class="time-selector">
+        <span class="label">切换时间范围</span>
+        <el-button size="small" @click="selectTime('week')" :type="currentTime === 'week' ? 'primary' : 'default'">近一周</el-button>
+        <el-button size="small" @click="selectTime('month')" :type="currentTime === 'month' ? 'primary' : 'default'">近一月</el-button>
+        <el-button size="small" @click="selectTime('quarter')" :type="currentTime === 'quarter' ? 'primary' : 'default'">近三月</el-button>
+        <el-button size="small" @click="selectTime('year')" :type="currentTime === 'year' ? 'primary' : 'default'">近一年</el-button>
+        <el-button size="small" type="default">自定义时间范围</el-button>
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          size="small"
+          style="margin-left: 10px;"
+        />
+      </div>
+      <div class="org-selector">
+        <el-select v-model="selectedOrg" placeholder="请选择组织" size="small" style="width: 200px;">
+          <el-option label="旅检一科" value="dept1" />
+          <el-option label="旅检二科" value="dept2" />
+          <el-option label="旅检三科" value="dept3" />
+        </el-select>
+      </div>
+    </div>
+
+    <div class="main-content">
+      <div class="row">
+        <div class="card basic-info-card">
+          <div class="avatar-section">
+            <img class="avatar" src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=portrait%20of%20asian%20male%20in%20business%20suit&image_size=square" alt="头像" />
+          </div>
+          <div class="info-section">
+            <h2 class="name">陈雨桐</h2>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="label">所属部门及队：</span>
+                <span class="value">旅检一科/雨桐班组/鹏飞小组</span>
+              </div>
+              <div class="info-item">
+                <span class="label">出生日期：</span>
+                <span class="value">1990年10月18日</span>
+              </div>
+              <div class="info-item">
+                <span class="label">技能等级：</span>
+                <span class="value">二级</span>
+              </div>
+              <div class="info-item">
+                <span class="label">学历：</span>
+                <span class="value">本科</span>
+              </div>
+              <div class="info-item">
+                <span class="label">专业：</span>
+                <span class="value">物流运输</span>
+              </div>
+            </div>
+            <div class="tags">
+              <span class="label">标签：</span>
+              <el-tag size="small" type="primary">通道组长</el-tag>
+              <el-tag size="small" type="warning">旅检</el-tag>
+            </div>
+          </div>
+        </div>
+
+        <div class="card score-card">
+          <h3 class="card-title">综合评价</h3>
+          <div class="score-display">
+            <span class="score">78<span class="plus">+2</span></span>
+          </div>
+        </div>
+
+        <div class="card extra-info-card">
+          <h3 class="card-title">补充信息</h3>
+          <div class="extra-info-list">
+            <div class="extra-item"><span class="label">政治面貌：</span><span class="value">党员</span></div>
+            <div class="extra-item"><span class="label">性别：</span><span class="value">男</span></div>
+            <div class="extra-item"><span class="label">籍贯：</span><span class="value">重庆市</span></div>
+            <div class="extra-item"><span class="label">民族：</span><span class="value">汉族</span></div>
+            <div class="extra-item"><span class="label">年龄：</span><span class="value">28岁</span></div>
+            <div class="extra-item"><span class="label">司龄：</span><span class="value">6年</span></div>
+            <div class="extra-item"><span class="label">性格特征：</span><span class="value">检查员型</span></div>
+            <div class="extra-item"><span class="label">工作风格：</span><span class="value">尽责型</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="card work-experience-card">
+          <h3 class="card-title">工作履历</h3>
+          <div class="experience-list">
+            <div class="experience-item">2020.11入职/司龄6年/开机年限5年/现任班组长</div>
+            <div class="experience-item">2020.11入职/司龄6年/开机年限5年/现任班组长</div>
+          </div>
+        </div>
+
+        <div class="card ability-card">
+          <h3 class="card-title">个人能力</h3>
+          <div ref="abilityChart" class="chart-container"></div>
+        </div>
+
+        <div class="card award-card">
+          <h3 class="card-title">获奖记录</h3>
+          <table class="award-table">
+            <thead>
+              <tr>
+                <th>站级</th>
+                <th>个人荣誉</th>
+                <th>航站楼加分</th>
+                <th>8分</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>站级</td>
+                <td>个人荣誉</td>
+                <td>小额奖励</td>
+                <td>100元</td>
+              </tr>
+              <tr>
+                <td>部门级</td>
+                <td>个人荣誉</td>
+                <td>小额奖励</td>
+                <td>100元</td>
+              </tr>
+              <tr>
+                <td>部门级</td>
+                <td>个人荣誉</td>
+                <td>小额奖励</td>
+                <td>100元</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="card position-card">
+          <h3 class="card-title">业务岗位</h3>
+          <div class="position-list">
+            <div class="position-item">证件检查岗位</div>
+            <div class="position-item">防爆检查岗位</div>
+            <div class="position-item">人身检查岗位</div>
+            <div class="position-item">开包检查岗位</div>
+            <div class="position-item">X射线安检仪操作岗位</div>
+          </div>
+        </div>
+
+        <div class="card training-card">
+          <h3 class="card-title">培训情况</h3>
+          <div class="training-item">
+            <span class="item-label">季度考核：</span>
+            <span class="item-value">90分</span>
+            <span class="item-value">图像成绩 95分</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import * as echarts from 'echarts';
+
+defineOptions({ name: 'EmployeeProfile' });
+
+const currentTime = ref('year');
+const dateRange = ref([]);
+const selectedOrg = ref('dept1');
+const abilityChart = ref(null);
+let chart = null;
+
+const selectTime = (time) => {
+  currentTime.value = time;
+};
+
+const initChart = () => {
+  if (!abilityChart.value) return;
+  chart = echarts.init(abilityChart.value);
+  const option = {
+    radar: {
+      indicator: [
+        { name: '安全防控能力', max: 100 },
+        { name: '服务响应能力', max: 100 },
+        { name: '业务实操能力', max: 100 },
+        { name: '作风践行能力', max: 100 },
+        { name: '身心调节能力', max: 100 }
+      ],
+      center: ['50%', '55%'],
+      radius: '70%',
+      splitNumber: 4,
+      axisLine: {
+        lineStyle: {
+          color: '#ddd'
+        }
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)']
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#ddd'
+        }
+      },
+      name: {
+        textStyle: {
+          color: '#333',
+          fontSize: 12
+        }
+      }
+    },
+    series: [
+      {
+        type: 'radar',
+        data: [
+          {
+            value: [84, 75, 68, 74, 80],
+            name: '个人能力',
+            areaStyle: {
+              color: 'rgba(80, 180, 255, 0.4)'
+            },
+            lineStyle: {
+              color: '#50b4ff',
+              width: 2
+            },
+            itemStyle: {
+              color: '#50b4ff'
+            }
+          }
+        ],
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  };
+  chart.setOption(option);
+};
+
+const handleResize = () => {
+  if (chart) {
+    chart.resize();
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+  });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.employee-profile {
+  padding: 20px;
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 15px 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  .time-selector {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .label {
+      font-size: 14px;
+      color: #666;
+      margin-right: 8px;
+    }
+  }
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.row {
+  display: flex;
+  gap: 20px;
+}
+
+.card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  flex: 1;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #409eff;
+  margin: 0 0 20px 0;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -4px;
+    width: 8px;
+    height: 20px;
+    background: #409eff;
+    border-radius: 2px;
+  }
+}
+
+.basic-info-card {
+  display: flex;
+  gap: 20px;
+  flex: 1.5;
+
+  .avatar-section {
+    flex-shrink: 0;
+
+    .avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      border: 3px solid #409eff;
+      object-fit: cover;
+    }
+  }
+
+  .info-section {
+    flex: 1;
+
+    .name {
+      font-size: 24px;
+      font-weight: bold;
+      color: #333;
+      margin: 0 0 15px 0;
+    }
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
+      margin-bottom: 15px;
+
+      .info-item {
+        font-size: 14px;
+        color: #666;
+
+        .label {
+          color: #999;
+        }
+        .value {
+          color: #333;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .tags {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .label {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+  }
+}
+
+.score-card {
+  flex: 0.8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .score-display {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .score {
+      font-size: 48px;
+      font-weight: bold;
+      color: #ff9900;
+    }
+    .plus {
+      font-size: 24px;
+      color: #67c23a;
+    }
+  }
+}
+
+.extra-info-card {
+  flex: 1;
+
+  .extra-info-list {
+    .extra-item {
+      padding: 8px 0;
+      font-size: 14px;
+      color: #666;
+      border-bottom: 1px dashed #eee;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .label {
+        color: #999;
+      }
+      .value {
+        color: #333;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.work-experience-card {
+  flex: 1;
+
+  .experience-list {
+    .experience-item {
+      padding: 10px 15px;
+      background: #f0f7ff;
+      border-radius: 6px;
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: #333;
+    }
+  }
+}
+
+.ability-card {
+  flex: 1.2;
+
+  .chart-container {
+    height: 300px;
+    width: 100%;
+  }
+}
+
+.award-card {
+  flex: 1;
+
+  .award-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+
+    th, td {
+      padding: 10px 8px;
+      text-align: center;
+      border: 1px solid #ddd;
+    }
+
+    th {
+      background: #ffeae8;
+      color: #333;
+      font-weight: 500;
+    }
+
+    td {
+      background: #fff;
+      color: #666;
+    }
+  }
+}
+
+.position-card {
+  flex: 1;
+
+  .position-list {
+    .position-item {
+      padding: 12px 15px;
+      background: #fceee7;
+      border-radius: 8px;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: #333;
+      text-align: center;
+    }
+  }
+}
+
+.training-card {
+  flex: 1;
+
+  .training-item {
+    padding: 15px;
+    background: #f0f7ff;
+    border-radius: 8px;
+    font-size: 14px;
+
+    .item-label {
+      color: #666;
+    }
+    .item-value {
+      color: #333;
+      font-weight: 500;
+      margin-left: 8px;
+    }
+  }
+}
+</style>

vite.config.js

@@ -42,7 +42,7 @@ export default defineConfig(({ mode, command }) => {
     },
     // vite 相关配置
     server: {
-      port: 8111,
+      port: 8113,
       host: true,
       open: true,
       proxy: {