smartcut-frontend/apps/worker-app/src/views/ProfileView.vue

<template>
  <WorkerLayout>
    <div class="profile-view">
      <!-- 用户信息卡片 -->
      <a-card>
        <div class="user-info">
          <a-avatar size="large" class="user-avatar">
            {{ authStore.user?.name?.charAt(0) }}
          </a-avatar>
          <div class="user-detail">
            <h3>{{ authStore.user?.name }}</h3>
            <p>{{ authStore.user?.phone }}</p>
            <a-tag color="blue">工人</a-tag>
          </div>
        </div>
      </a-card>

      <!-- 功能菜单 -->
      <a-card class="mt-3">
        <a-list>
          <a-list-item @click="router.push('/change-password')">
            <a-list-item-meta>
              <template #avatar><KeyOutlined /></template>
              <template #title>修改密码</template>
            </a-list-item-meta>
            <template #action><RightOutlined /></template>
          </a-list-item>

          <a-list-item v-if="authStore.user?.must_change_password">
            <a-list-item-meta>
              <template #avatar><WarningOutlined /></template>
              <template #title>
                <a-badge status="warning" text="需要修改密码" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-card>

      <!-- 退出登录 -->
      <a-card class="mt-3">
        <a-button danger size="large" block @click="handleLogout">
          退出登录
        </a-button>
      </a-card>
    </div>
  </WorkerLayout>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { KeyOutlined, RightOutlined, WarningOutlined } from '@ant-design/icons-vue';
import { useAuthStore } from '@/stores/auth';
import WorkerLayout from '@/components/WorkerLayout.vue';

const router = useRouter();
const authStore = useAuthStore();

async function handleLogout() {
  await authStore.logout();
  message.success('已退出登录');
  router.push({
    name: 'Login',
    query: { factory: authStore.currentFactoryId || '' }
  });
}
</script>

<style scoped lang="postcss">
.profile-view { padding: 0; }
.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-avatar {
  background-color: #1e3a5f;
  font-size: 24px;
}
.user-detail h3 {
  margin: 0;
  font-size: 18px;
}
.user-detail p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
}
.mt-3 {
  margin-top: 12px;
}
</style>