cfc/cfc-web/src/views/Layout.vue

<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="logo">浠艾福</div>
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        background-color="transparent"
        text-color="#64748B"
        active-text-color="#6366F1"
        @select="handleMenuSelect"
      >
        <template v-for="item in menuItems">
          <el-submenu v-if="item.children && hasPerm(item.perm)" :key="item.title" :index="item.title">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.label || item.title }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.path"
              :index="child.path"
            >
              <i :class="child.icon"></i>
              <span slot="title">{{ child.label }}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else-if="hasPerm(item.perm)" :key="item.path" :index="item.path">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.label }}</span>
      </el-menu-item>
    </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="header-right">
          <el-button v-if="hasPerm('service:*')" type="text" class="invite-code-btn" @click="showInviteCode" icon="el-icon-share">
            邀请码
          </el-button>
          <el-dropdown trigger="click" @command="handleProfileCommand">
            <span class="el-dropdown-link username">
              {{ displayUserLabel }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile" icon="el-icon-user">个人信息</el-dropdown-item>
              <el-dropdown-item command="password" icon="el-icon-key">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout" icon="el-icon-switch-button" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!-- 邀请码 dialog -->
        <el-dialog title="我的邀请码" :visible.sync="inviteCodeVisible" width="500px" :close-on-click-modal="false">
          <div v-loading="inviteCodeLoading">
            <div v-if="inviteCodeData" class="invite-code-content">
              <div class="invite-code-section">
                <div class="invite-code-label">团队邀请码</div>
                <div class="invite-code-value">
                  <span class="code-text">{{ inviteCodeData.code || '无' }}</span>
                  <el-button size="mini" type="primary" @click="copyCode(inviteCodeData.code)" plain>复制</el-button>
                </div>
                <div class="invite-code-desc">
                  家庭用户通过此码加入您的团队
                </div>
              </div>
            </div>
            <div v-else-if="!inviteCodeLoading" class="no-invite-code">
              <i class="el-icon-warning-outline"></i>
              <p>暂无邀请码，请先生成</p>
              <el-button type="primary" @click="generateInviteCode">生成邀请码</el-button>
            </div>
          </div>
        </el-dialog>
      </el-header>

      <!-- 个人信息 dialog -->
      <el-dialog title="个人信息" :visible.sync="profileDialogVisible" width="400px">
        <el-form :model="profileForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="profileForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="profileForm.realName" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="profileForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="profileForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="profileForm.email"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="profileDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUpdateInfo" :loading="submitting">保存</el-button>
        </span>
      </el-dialog>

      <!-- 修改密码 dialog -->
      <el-dialog title="修改密码" :visible.sync="passwordDialogVisible" width="400px">
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" show-password></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmChangePassword" :loading="submitting">确定</el-button>
        </span>
      </el-dialog>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getAdminInfo, changePassword } from '@/api/auth'
import { updateAdminInfo } from '@/api/admin'
import { getMyInviteCode } from '@/api/guide'
import { getEffectivePermissions, hasPermission, getRoleLabel } from '@/utils/permissions'

export default {
  data() {
    return {
      menuItems: [
        // 全局通用
        { path: '/dashboard', label: '首页', icon: 'el-icon-s-home', perm: 'dashboard' },

        // admin 专属
        { title: '家庭管理', icon: 'el-icon-s-home', perm: 'family:*',
          children: [
            { path: '/families', label: '家庭列表', icon: 'el-icon-s-home', perm: 'family:list' },
            { path: '/children', label: '孩子管理', icon: 'el-icon-s-custom', perm: 'family:children' },
            { path: '/points', label: '积分管理', icon: 'el-icon-s-money', perm: 'family:points' },
          ]},
        { title: '任务管理', icon: 'el-icon-s-order', perm: 'task:*',
          children: [
            { path: '/tasks', label: '任务列表', icon: 'el-icon-s-order', perm: 'task:list' },
            { path: '/task-templates', label: '任务模板', icon: 'el-icon-document', perm: 'task:templates' },
          ]},
        { title: '奖励管理', icon: 'el-icon-s-goods', perm: 'reward:*',
          children: [
            { path: '/rewards', label: '奖励列表', icon: 'el-icon-s-goods', perm: 'reward:list' },
          ]},

        // teacher + nutritionist 共享
        { title: '我的家庭', icon: 'el-icon-s-home', perm: 'service:family',
          children: [
            { path: '/my-families', label: '授权家庭', icon: 'el-icon-s-home', perm: 'service:family' },
          ]},

        // teacher 专属
        { path: '/growth-records', label: '成长记录', icon: 'el-icon-document', perm: 'growth:records' },
        { path: '/growth-plans', label: '成长计划', icon: 'el-icon-document', perm: 'growth:plans' },
        { title: '服务管理', icon: 'el-icon-s-home', perm: 'service:*',
          children: [
            { path: '/teacher-families', label: '我的家庭', icon: 'el-icon-s-home', perm: 'service:families' },
            { path: '/teacher-team', label: '我的团队', icon: 'el-icon-s-custom', perm: 'service:team' },
          ]},
        { title: '业务管理', icon: 'el-icon-s-marketing', perm: 'biz:*',
          children: [
            { path: '/teacher-packages', label: '套餐管理', icon: 'el-icon-s-marketing', perm: 'biz:packages' },
            { path: '/teacher-orders', label: '订单佣金', icon: 'el-icon-s-order', perm: 'biz:orders' },
          ]},
        { title: '测评管理', icon: 'el-icon-edit', perm: 'assessment:*',
          children: [
            { path: '/teacher-assessment', label: 'DAN测评', icon: 'el-icon-edit', perm: 'assessment:dan' },
            { path: '/teacher-consult', label: '家长咨询', icon: 'el-icon-chat-dot-round', perm: 'assessment:consult' },
          ]},
        { path: '/teacher-messages', label: '消息中心', icon: 'el-icon-chat-dot-round', perm: 'messages' },

        // nutritionist 专属
        { title: '健康档案', icon: 'el-icon-document', perm: 'health:*',
          children: [
            { path: '/health-reports', label: '健康报告', icon: 'el-icon-document', perm: 'health:reports' },
            { path: '/health-indicators', label: '健康指标', icon: 'el-icon-data-line', perm: 'health:indicators' },
            { path: '/health-checkins', label: '健康打卡', icon: 'el-icon-s-order', perm: 'health:checkins' },
          ]},
        { path: '/energy-sandbox', label: '五维能量', icon: 'el-icon-data-line', perm: 'energy' },

        // article_manager 专属
        { title: '文章管理', icon: 'el-icon-document', perm: 'articles:*',
          children: [
            { path: '/article-categories', label: '文章分类', icon: 'el-icon-document', perm: 'articles:categories' },
            { path: '/article-manage', label: '文章管理', icon: 'el-icon-document', perm: 'articles:manage' },
          ]},

        // activity_manager 专属
        { title: '活动管理', icon: 'el-icon-s-home', perm: 'activity:*',
          children: [
            { path: '/activities', label: '活动列表', icon: 'el-icon-s-home', perm: 'activity:list' },
            { path: '/activity-review', label: '活动审核', icon: 'el-icon-s-check', perm: 'activity:review' },
          ]},

        // diet 管理 (admin)
        { title: '饮食管理', icon: 'el-icon-s-management', perm: 'diet:*',
          children: [
            { path: '/foods', label: '食材管理', icon: 'el-icon-s-management', perm: 'diet:foods' },
            { path: '/recipes', label: '食谱管理', icon: 'el-icon-s-management', perm: 'diet:recipes' },
            { path: '/seasonal-foods', label: '应季食材', icon: 'el-icon-s-management', perm: 'diet:seasonal' },
          ]},

        // system 管理 (仅 admin)
        { title: '系统管理', icon: 'el-icon-s-tools', perm: 'system:*',
          children: [
            { path: '/users', label: '用户管理', icon: 'el-icon-user', perm: 'system:users' },
            { path: '/package-audit', label: '套餐审核', icon: 'el-icon-s-check', perm: 'system:audit' },
            { path: '/guide-audit', label: '规划师审核', icon: 'el-icon-s-check', perm: 'system:audit' },
            { path: '/vendor-review', label: '服务商审核', icon: 'el-icon-s-check', perm: 'system:audit' },
            { path: '/operation-logs', label: '操作日志', icon: 'el-icon-s-order', perm: 'system:logs' },
            { path: '/product-manage', label: '商品管理', icon: 'el-icon-s-goods', perm: 'system:products' },
            { path: '/order-manage', label: '订单管理', icon: 'el-icon-s-order', perm: 'system:orders' },
            { path: '/danshop-category', label: 'DanShop分类', icon: 'el-icon-s-goods', perm: 'system:danshop' },
            { path: '/danshop-profit-rule', label: '分润规则', icon: 'el-icon-s-marketing', perm: 'system:danshop' },
            { path: '/danshop-logistics', label: '物流管理', icon: 'el-icon-s-order', perm: 'system:danshop' },
            { path: '/sys-config', label: '系统配置', icon: 'el-icon-s-tools', perm: 'system:config' },
            { path: '/energy-sandbox', label: '五维能量', icon: 'el-icon-data-line', perm: 'system:energy' },
            { path: '/education-systems', label: '教育体系', icon: 'el-icon-s-management', perm: 'system:education' },
            { path: '/zodiac-configs', label: '星座配置', icon: 'el-icon-s-management', perm: 'system:config' },
            { path: '/bazi-configs', label: '八字配置', icon: 'el-icon-s-management', perm: 'system:config' },
            { path: '/blood-type-configs', label: '血型配置', icon: 'el-icon-s-management', perm: 'system:config' },
          ]},
      ],
      profileDialogVisible: false,
      passwordDialogVisible: false,
      submitting: false,
      profileForm: {
        nickname: '',
        phone: '',
        email: '',
        username: '',
        realName: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      inviteCodeVisible: false,
      inviteCodeLoading: false,
      inviteCodeData: null,
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    activeMenu() {
      return this.$route.path
    },
    currentRole() {
      return localStorage.getItem('role') || 'admin'
    },
    vendorType() {
      return localStorage.getItem('vendorType') || ''
    },
    effectivePerms() {
      const rolesStr = localStorage.getItem('roles')
      const roles = rolesStr ? JSON.parse(rolesStr) : [this.currentRole]
      return getEffectivePermissions(roles)
    },
    displayRoles() {
      const rolesStr = localStorage.getItem('roles')
      const roles = rolesStr ? JSON.parse(rolesStr) : [this.currentRole]
      return roles.map(function(r) { return getRoleLabel(r) }).join(' / ')
    },
    displayUserLabel() {
      const adminName = localStorage.getItem('adminName')
      if (adminName) {
        return adminName + ' (' + this.displayRoles + ')'
      }
      return this.displayRoles
    }
  },
  methods: {
    hasPerm(required) {
      return hasPermission(this.effectivePerms, required)
    },
    handleMenuSelect(index) {
      if (index && index.startsWith('/')) {
        this.$router.push(index)
      }
    },
    handleProfileCommand(command) {
      if (command === 'profile') {
        this.loadAdminInfo()
        this.profileDialogVisible = true
      } else if (command === 'password') {
        this.passwordForm = { oldPassword: '', newPassword: '', confirmPassword: '' }
        this.passwordDialogVisible = true
      } else if (command === 'logout') {
        this.handleLogout()
      }
    },
    async loadAdminInfo() {
      try {
        const res = await getAdminInfo()
        this.profileForm = {
          nickname: res.data.nickname || '',
          phone: res.data.phone || '',
          email: res.data.email || '',
          username: res.data.username || '',
          realName: res.data.realName || ''
        }
      } catch (e) {
        this.$message.error('加载个人信息失败')
      }
    },
    async confirmUpdateInfo() {
      this.submitting = true
      try {
        await updateAdminInfo({
          nickname: this.profileForm.nickname,
          phone: this.profileForm.phone,
          email: this.profileForm.email
        })
        if (this.profileForm.nickname) {
          localStorage.setItem('adminName', this.profileForm.nickname)
        }
        this.$message.success('保存成功')
        this.profileDialogVisible = false
      } catch (e) {
        this.$message.error(e.message || '保存失败')
      } finally {
        this.submitting = false
      }
    },
    async confirmChangePassword() {
      this.$refs.passwordForm.validate(async (valid) => {
        if (!valid) return
        this.submitting = true
        try {
          await changePassword({
            oldPassword: this.passwordForm.oldPassword,
            newPassword: this.passwordForm.newPassword
          })
          this.$message.success('密码修改成功')
          this.passwordDialogVisible = false
        } catch (e) {
          this.$message.error(e.message || '密码修改失败')
        } finally {
          this.submitting = false
        }
      })
    },
    async showInviteCode() {
      this.inviteCodeVisible = true
      this.inviteCodeLoading = true
      this.inviteCodeData = null
      try {
        const res = await getMyInviteCode()
        if (res.data) {
          this.inviteCodeData = res.data
        }
      } catch (e) {
        this.$message.error('获取邀请码失败')
      } finally {
        this.inviteCodeLoading = false
      }
    },
    async generateInviteCode() {
      this.inviteCodeLoading = true
      try {
        const res = await getMyInviteCode()
        if (res.data) {
          this.inviteCodeData = res.data
          this.$message.success('邀请码已生成')
        }
      } catch (e) {
        this.$message.error('生成邀请码失败')
      } finally {
        this.inviteCodeLoading = false
      }
    },
    copyCode(code) {
      if (!code) return
      const input = document.createElement('input')
      input.value = code
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('已复制邀请码')
    },
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token')
        localStorage.removeItem('role')
        localStorage.removeItem('roles')
        localStorage.removeItem('adminId')
        localStorage.removeItem('adminName')
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style>
/* 全局防御：防止 Element UI 弹窗或组件残留 DOM 产生遮罩覆盖 */
.v-modal {
  display: none !important;
}

.layout-container {
  height: 100vh;
}

.el-aside {
  background-color: #304156;
  overflow: hidden;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  background-color: #2b3a4a;
}

.el-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
}

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

.username {
  margin-right: 20px;
  color: #606266;
}

.invite-code-btn {
  color: #6366F1;
  font-size: 13px;
}
.invite-code-btn:hover {
  color: #4F46E5;
}

.invite-code-content {
  padding: 8px 0;
}

.invite-code-section {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.invite-code-label {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 12px;
}

.invite-code-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.code-text {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #1E293B;
  font-family: monospace;
}

.no-invite-code {
  text-align: center;
  padding: 24px;
  color: #94A3B8;
}
.no-invite-code i {
  font-size: 48px;
  margin-bottom: 12px;
}
.no-invite-code p {
  margin-bottom: 16px;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
  position: relative;
  z-index: 1;
}
</style>