food-hub-ui/src/views/profile/index.vue

<template>
  <div class="profile-view common-mobile-view">
    <profile-card />

    <el-tabs v-model="activeName"
             stretch class="profile-tabs"
             @tab-click="handleClick">
      <el-tab-pane label="基本资料" name="basic">
        <div class="menu-card card-item">
          <div class="menu-item" @click="infoClick">
            <i class="fas fa-user"></i>
            <span>基本资料</span>
            <i class="fas fa-chevron-right"></i>
          </div>

          <div class="menu-divider"></div>

          <div class="menu-item">
            <i class="fas fa-cog"></i>
            <span>账户设置</span>
            <i class="fas fa-chevron-right"></i>
          </div>

          <div class="menu-divider"></div>

          <div class="menu-item" @click="passwordClick">
            <i class="fas fa-key"></i>
            <span>更改密码</span>
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="朋友圈" name="moment">
        <moment-list />
      </el-tab-pane>
      <el-tab-pane label="菜谱收藏" name="recipe">
        <recipe-list />
      </el-tab-pane>
      <el-tab-pane label="系统设置" name="system">
        <div class="menu-card card-item">
          <div class="menu-item">
            <i class="fa-solid fa-comment-dots"></i>
            <span>反馈意见</span>
            <i class="fas fa-chevron-right"></i>
          </div>

          <div class="menu-divider"></div>

          <div class="menu-item">
            <i class="fa-solid fa-file-arrow-down"></i>
            <span>软件下载</span>
            <i class="fas fa-chevron-right"></i>
          </div>

          <div class="menu-divider"></div>

          <div class="menu-item" @click="refreshClick">
            <i class="fa-solid fa-arrows-rotate"></i>
            <span>检查更新</span>
            <i class="fas fa-chevron-right"></i>
          </div>

          <div class="menu-divider"></div>

          <div class="menu-item" @click="logoutClick">
            <i class="fas fa-sign-out-alt"></i>
            <span>退出登录</span>
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="version">版本号 {{ appStore.version }}</div>
  </div>
</template>

<script lang="ts" setup>
import ProfileCard from '@/components/Profile/ProfileCard.vue'
import RecipeList from '@/components/Food/RecipeList.vue'
import MomentList from '@/components/Moment/MomentList.vue'
import { useUserStore } from '@/store/user.ts'
import { useAppStore } from '@/store/app.ts'
import { useAuthStore } from '@/store/auth'
import { useFoodStore } from '@/store/food.ts'
import { useRouter } from 'vue-router'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { onMounted, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const userStore = useUserStore()
const authStore = useAuthStore()
const appStore = useAppStore()
const foodStore = useFoodStore()
const router = useRouter()

const activeName = ref('basic')

onMounted(() => {
  userStore.queryUser(userStore.getUserId() as number)
})

const infoClick = () => {
  router.push('/profile/info')
}

const passwordClick = () => {
  // appStore.isShowMobileBack = true
  // router.push('/mobile-home/profile/password')
}

const handleClick = async (tab: TabsPaneContext) => {
  switch (tab.paneName) {
    case 'moment':
      await foodStore.queryMoment(userStore.getUserId())
      break
    case 'recipe':
      await foodStore.queryRecipeUserFavourite()
      break
    default:
      break
  }
}

const refreshClick = async () => {
  await router.push('/')
  location.reload()
}

const logoutClick = () => {
  commonElMessageBox('请确认是否退出系统？').then(async () => {
    userStore.removeAll()
    await authStore.handleLogout(userStore.userInfo.username)
    await router.push('/')
  })
}
</script>

<style lang="scss">
.profile-view {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .menu-card {
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 5px;

    .menu-item {
      padding: 10px;
      display: grid;
      grid-template-columns: 20px 1fr 15px;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      font-size: 1.2rem;

      i {
        color: var(--el-color-primary);
      }

      span {
        color: var(--color-text);
      }
    }

    .menu-divider {
      height: 1px;
      background-color: #E8E8E8;
      margin: 0 5px;
    }
  }

  .version {
    align-self: center;
    color: #999;
  }
}
</style>