ntcri/src/views/User/Dashboard.vue

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useMainStore } from "@/stores/store";
// import axios from "axios";
import Navbar from "@/components/Navbar.vue";

const store = useMainStore();
// let token = localStorage.getItem("token");
let username = ref("");

onMounted(async () => {
  await store.getProfile();
  username.value = store.profile.username;
});

// (async () => {
//   try {
//     const response = await axios.get(
//       `https://cmm.ai:8088/api/information?token=${token}`
//     );
//     console.log("response", response.data.msg);
//     if (!response.data.msg) {
//       store.logout();
//       return;
//     }
//     store.setProfile(response.data.msg);
//     username.value = response.data.msg.username;
//   } catch (error) {
//     console.error(error);
//   }
// })();

const firstName = computed(() => {
  const firstChar = username.value.charAt(0);
  return firstChar.toUpperCase();
});

let items = [
  { type: "divider" },
  {
    title: "個人檔案",
    icon: "mdi-account",
    url: "/user/profile",
    value: 1,
  },
  {
    title: "學習護照",
    icon: "mdi-book",
    url: "/user/passport",
    value: 2,
  },
  // {
  //   title: "我的提案",
  //   icon: "mdi-list-box",
  //   url: "/user/proposal",
  //   value: 3,
  // },
  {
    title: "我的開課",
    icon: "mdi-school",
    url: "/user/courses",
    value: 3,
  },
  {
    title: "我的收藏",
    icon: "mdi-bookmark",
    url: "/user/favorite-class",
    value: 4,
  },
  // {
  //   title: "帳戶設定",
  //   icon: "mdi-cog",
  //   url: "/user/setting",
  //   value: 5,
  // },
  { type: "divider" },
];
</script>

<template>
  <Navbar />
  <v-container fluid class="pa-8 pa-sm-16 dashboard-container">
    <v-row>
      <v-col cols="12" md="2">
        <v-card class="pa-5">
          <div class="user-info">
            <div class="img">
              <span> {{ firstName }}</span>
            </div>
            <p class="name">{{ username }}</p>
          </div>

          <v-list class="w-100 mt-1">
            <v-list-item v-for="(item, index) in items" :key="index">
              <v-divider v-if="item.type === 'divider'"></v-divider>
              <div v-else class="d-flex justify-center">
                <router-link :to="item.url" class="d-flex">
                  <v-icon color="gray" class="me-2">{{ item.icon }}</v-icon>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </router-link>
              </div>
            </v-list-item>
            <v-list-item>
              <div class="d-flex justify-center">
                <button class="d-flex" @click="store.logout()">
                  <v-icon color="gray" class="me-2">mdi-logout</v-icon>
                  <v-list-item-title>登出</v-list-item-title>
                </button>
                <!-- <router-link to="/" class="d-flex">
                  <v-icon color="gray" class="me-2">mdi-logout</v-icon>
                  <v-list-item-title>登出</v-list-item-title>
                </router-link> -->
              </div>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>

      <v-col cols="12" md="10">
        <router-view></router-view>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss">
.dashboard-container {
  max-width: 100% !important;
  letter-spacing: 0.0625em;

  .title {
    display: flex;
    justify-content: center;
    h4 {
      margin: 1.25em 0;
      padding-bottom: 1.25em;
      display: inline-block;
      font-size: 1.375em;
      font-weight: 500;
      text-align: center;
      border-bottom: 0.1875em solid var(--purple);
    }
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 4.375em;
      height: 4.375em;
      background-color: var(--purple);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6.25em;
      span {
        color: #fff;
        font-size: 2.125em;
        font-weight: 500;
      }
    }
    .name {
      font-size: 1.75em;
      margin-top: 0.9375em;
    }
  }

  .v-card {
    padding: 1.5625em;
    .v-btn {
      font-size: 1.125em;
    }
  }

  .v-list {
    a,
    button {
      transition: all 0.3s;
      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>