KCGL/inventory-web/src/App.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { InfoFilled, SwitchButton, UserFilled, Lock, User, ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { getMyProfile, changeMyPassword } from '@/api/auth'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 计算属性：判断当前是否是登录页
const isLoginPage = computed(() => {
  return route.path === '/login'
})

// 页面加载时刷新权限
onMounted(() => {
  if (userStore.token) {
    userStore.refreshUserPermissions()
  }
})

// ================================================================
// 个人中心 / 修改密码
// ================================================================
const profileDialogVisible = ref(false)
const profileLoading = ref(false)
const passwordLoading = ref(false)

interface ProfileData {
  id: number
  username: string
  display_name: string
  department: string
}

const profileForm = ref<ProfileData>({
  id: 0,
  username: '',
  display_name: '',
  department: ''
})

const passwordForm = ref({
  old_password: '',
  new_password: '',
  confirm_password: ''
})

const passwordFormRef = ref()

// 打开个人中心弹窗
const openProfileDialog = async () => {
  profileDialogVisible.value = true
  profileLoading.value = true
  passwordForm.value = { old_password: '', new_password: '', confirm_password: '' }

  try {
    const res: any = await getMyProfile()
    const data = res.data || res
    if (data && data.data) {
      profileForm.value = data.data
    }
  } catch (e: any) {
    ElMessage.error(e?.message || '获取个人资料失败')
  } finally {
    profileLoading.value = false
  }
}

// 提交修改密码
const submitPasswordChange = async () => {
  const { old_password, new_password, confirm_password } = passwordForm.value

  if (!old_password || !new_password || !confirm_password) {
    ElMessage.warning('请填写所有密码字段')
    return
  }

  if (new_password.length < 6) {
    ElMessage.warning('新密码长度不能少于6位')
    return
  }

  if (new_password !== confirm_password) {
    ElMessage.warning('新密码与确认密码不一致')
    return
  }

  passwordLoading.value = true
  try {
    const res: any = await changeMyPassword({
      old_password,
      new_password,
      confirm_password
    })
    const msg = res?.data?.msg || res?.msg || '修改成功'
    ElMessage.success(msg)

    // 如果是普通用户修改成功，提示重新登录
    if (msg.includes('重新登录')) {
      profileDialogVisible.value = false
      setTimeout(() => {
        userStore.logout()
        router.replace('/login')
      }, 1500)
    } else {
      // 超级管理员等特殊提示，直接清空表单
      passwordForm.value = { old_password: '', new_password: '', confirm_password: '' }
    }
  } catch (e: any) {
    const errMsg = e?.response?.data?.msg || e?.message || '修改失败'
    ElMessage.error(errMsg)
  } finally {
    passwordLoading.value = false
  }
}

// ================================================================
// 退出登录
// ================================================================
const handleLogout = () => {
  ElMessageBox.confirm(
      '确定要退出系统吗？',
      '提示',
      {
        confirmButtonText: '确定退出',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        userStore.logout()
        ElMessage({ type: 'success', message: '已安全退出' })
        await router.replace('/login')
      })
      .catch(() => {})
}
</script>

<template>
  <div class="app-wrapper">
    <header v-if="!isLoginPage" class="app-header">
      <div class="logo-container">
        <router-link to="/" class="home-link">
          <img src="@/assets/iris.png" class="logo" alt="Logo" />
          <span class="system-title">IRIS 库存管理系统</span>
        </router-link>
      </div>

      <div class="header-right">
        <!-- 用户下拉菜单 -->
        <el-dropdown trigger="click" @command="(cmd: string) => { if (cmd === 'profile') openProfileDialog(); if (cmd === 'logout') handleLogout(); }">
          <div class="user-profile">
            <el-avatar :size="32" :icon="UserFilled" class="user-avatar" />
            <span class="user-name">{{ userStore.username || '管理员' }}</span>
            <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon> 个人中心
              </el-dropdown-item>
              <el-dropdown-item command="logout" divided>
                <el-icon><SwitchButton /></el-icon> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <main class="app-content">
      <router-view />
    </main>

    <footer v-if="!isLoginPage" class="app-footer">
      <span class="version-tag">
        <el-icon style="vertical-align: middle; margin-right: 4px"><InfoFilled /></el-icon>
        当前版本:V3.4(3.23盘库修改最终章部署版）
      </span>
    </footer>

    <!-- ================================================================ -->
    <!-- 个人中心 / 修改密码 弹窗 -->
    <!-- 【严格脱敏】不展示系统角色字段 -->
    <!-- ================================================================ -->
    <el-dialog
        v-model="profileDialogVisible"
        title="个人中心"
        width="480px"
        :close-on-click-modal="!passwordLoading"
        destroy-on-close
        class="profile-dialog"
    >
      <div v-loading="profileLoading">
        <!-- 个人信息（只读） -->
        <div class="profile-info-section">
          <div class="section-title">
            <el-icon><User /></el-icon> 个人信息
          </div>
          <el-descriptions :column="1" border class="profile-descriptions">
            <el-descriptions-item label="姓名/账号">
              <el-tag type="info" effect="plain">{{ profileForm.display_name || '-' }}</el-tag>
              <span class="account-hint">（账号: {{ profileForm.username || '-' }}）</span>
            </el-descriptions-item>
            <el-descriptions-item label="所属部门">
              <el-tag type="success" effect="light">{{ profileForm.department || '-' }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 【严格脱敏】系统角色字段已移除，不在此展示 -->
        </div>

        <el-divider>
          <el-icon><Lock /></el-icon> 修改密码
        </el-divider>

        <!-- 修改密码表单 -->
        <el-form
            ref="passwordFormRef"
            :model="passwordForm"
            label-width="110px"
            class="password-form"
        >
          <el-form-item label="旧密码" prop="old_password">
            <el-input
                v-model="passwordForm.old_password"
                type="password"
                placeholder="请输入当前密码"
                show-password
                clearable
            />
          </el-form-item>

          <el-form-item label="新密码" prop="new_password">
            <el-input
                v-model="passwordForm.new_password"
                type="password"
                placeholder="请输入新密码（至少6位）"
                show-password
                clearable
            />
          </el-form-item>

          <el-form-item label="确认新密码" prop="confirm_password">
            <el-input
                v-model="passwordForm.confirm_password"
                type="password"
                placeholder="请再次输入新密码"
                show-password
                clearable
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="profileDialogVisible = false" :disabled="passwordLoading">
            取消
          </el-button>
          <el-button
              type="primary"
              :loading="passwordLoading"
              @click="submitPasswordChange"
              class="confirm-btn"
          >
            <el-icon v-if="!passwordLoading"><Lock /></el-icon>
            确认修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #f5f7fa;
}

.app-header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  flex-shrink: 0;
  z-index: 1000;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.home-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  height: 100%;
  user-select: none;
}

.logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.user-profile:hover {
  background-color: #f0f2f5;
}

.user-avatar {
  background-color: #409eff;
}

.user-name {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.dropdown-arrow {
  font-size: 12px;
  color: #909399;
  margin-left: 2px;
}

.app-content {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.app-footer {
  height: 30px;
  background-color: #f0f2f5;
  border-top: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: #909399;
  z-index: 1000;
}

.version-tag {
  display: flex;
  align-items: center;
}

/* 个人中心弹窗样式 */
.profile-info-section {
  margin-bottom: 8px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}

.profile-descriptions .account-hint {
  margin-left: 8px;
  font-size: 12px;
  color: #909399;
}

.password-form {
  margin-top: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>