Dashboard.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <script setup>
  2. import { ref, reactive, computed, onMounted } from "vue";
  3. import { useMainStore } from "@/stores/store";
  4. // import axios from "axios";
  5. import Navbar from "@/components/Navbar.vue";
  6. const store = useMainStore();
  7. // let token = localStorage.getItem("token");
  8. let username = ref("");
  9. onMounted(async () => {
  10. await store.getProfile();
  11. username.value = store.profile.username;
  12. });
  13. // (async () => {
  14. // try {
  15. // const response = await axios.get(
  16. // `https://cmm.ai:8088/api/information?token=${token}`
  17. // );
  18. // console.log("response", response.data.msg);
  19. // if (!response.data.msg) {
  20. // store.logout();
  21. // return;
  22. // }
  23. // store.setProfile(response.data.msg);
  24. // username.value = response.data.msg.username;
  25. // } catch (error) {
  26. // console.error(error);
  27. // }
  28. // })();
  29. const firstName = computed(() => {
  30. const firstChar = username.value.charAt(0);
  31. return firstChar.toUpperCase();
  32. });
  33. let items = [
  34. { type: "divider" },
  35. {
  36. title: "個人檔案",
  37. icon: "mdi-account",
  38. url: "/user/profile",
  39. value: 1,
  40. },
  41. {
  42. title: "學習護照",
  43. icon: "mdi-book",
  44. url: "/user/passport",
  45. value: 2,
  46. },
  47. // {
  48. // title: "我的提案",
  49. // icon: "mdi-list-box",
  50. // url: "/user/proposal",
  51. // value: 3,
  52. // },
  53. {
  54. title: "我的開課",
  55. icon: "mdi-school",
  56. url: "/user/courses",
  57. value: 3,
  58. },
  59. {
  60. title: "我的收藏",
  61. icon: "mdi-bookmark",
  62. url: "/user/favorite-class",
  63. value: 4,
  64. },
  65. // {
  66. // title: "帳戶設定",
  67. // icon: "mdi-cog",
  68. // url: "/user/setting",
  69. // value: 5,
  70. // },
  71. { type: "divider" },
  72. ];
  73. </script>
  74. <template>
  75. <Navbar />
  76. <v-container fluid class="pa-8 pa-sm-16 dashboard-container">
  77. <v-row>
  78. <v-col cols="12" md="2">
  79. <v-card class="pa-5">
  80. <div class="user-info">
  81. <div class="img">
  82. <span> {{ firstName }}</span>
  83. </div>
  84. <p class="name">{{ username }}</p>
  85. </div>
  86. <v-list class="w-100 mt-1">
  87. <v-list-item v-for="(item, index) in items" :key="index">
  88. <v-divider v-if="item.type === 'divider'"></v-divider>
  89. <div v-else class="d-flex justify-center">
  90. <router-link :to="item.url" class="d-flex">
  91. <v-icon color="gray" class="me-2">{{ item.icon }}</v-icon>
  92. <v-list-item-title>{{ item.title }}</v-list-item-title>
  93. </router-link>
  94. </div>
  95. </v-list-item>
  96. <v-list-item>
  97. <div class="d-flex justify-center">
  98. <button class="d-flex" @click="store.logout()">
  99. <v-icon color="gray" class="me-2">mdi-logout</v-icon>
  100. <v-list-item-title>登出</v-list-item-title>
  101. </button>
  102. <!-- <router-link to="/" class="d-flex">
  103. <v-icon color="gray" class="me-2">mdi-logout</v-icon>
  104. <v-list-item-title>登出</v-list-item-title>
  105. </router-link> -->
  106. </div>
  107. </v-list-item>
  108. </v-list>
  109. </v-card>
  110. </v-col>
  111. <v-col cols="12" md="10">
  112. <router-view></router-view>
  113. </v-col>
  114. </v-row>
  115. </v-container>
  116. </template>
  117. <style lang="scss">
  118. .dashboard-container {
  119. max-width: 100% !important;
  120. letter-spacing: 0.0625em;
  121. .title {
  122. display: flex;
  123. justify-content: center;
  124. h4 {
  125. margin: 1.25em 0;
  126. padding-bottom: 1.25em;
  127. display: inline-block;
  128. font-size: 1.375em;
  129. font-weight: 500;
  130. text-align: center;
  131. border-bottom: 0.1875em solid var(--purple);
  132. }
  133. }
  134. .user-info {
  135. display: flex;
  136. flex-direction: column;
  137. align-items: center;
  138. .img {
  139. width: 4.375em;
  140. height: 4.375em;
  141. background-color: var(--purple);
  142. display: flex;
  143. align-items: center;
  144. justify-content: center;
  145. border-radius: 6.25em;
  146. span {
  147. color: #fff;
  148. font-size: 2.125em;
  149. font-weight: 500;
  150. }
  151. }
  152. .name {
  153. font-size: 1.75em;
  154. margin-top: 0.9375em;
  155. }
  156. }
  157. .v-card {
  158. padding: 1.5625em;
  159. .v-btn {
  160. font-size: 1.125em;
  161. }
  162. }
  163. .v-list {
  164. a,
  165. button {
  166. transition: all 0.3s;
  167. &:hover {
  168. opacity: 0.8;
  169. }
  170. }
  171. }
  172. }
  173. </style>