video-maker/frontend/src/views/main/Dashboard.vue

<script setup lang="ts">
import { computed } from "vue";
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);
const userProfile = mainStoreRef.readUserProfile;

const greetedUser = computed(() => {
  const userProfile = mainStoreRef.readUserProfile;

  if (userProfile.value) {
    if (userProfile.value!.full_name) {
      return userProfile.value!.full_name;
    } else {
      return userProfile.value.email;
    }
  }
});
</script>

<template>
  <v-container fluid>
    <v-row dense>
      <v-col cols="12">
        <v-card class="ma-3 pa-3">
          <v-card-title primary-title>
            <h3>Welcome {{ greetedUser }}</h3>
          </v-card-title>
          <v-card-text class="my-3">
            <h4 class="">
              {{ t("userName") }}
            </h4>
            <span v-if="userProfile && userProfile.full_name">
              {{ userProfile.full_name }}
            </span>
            <div v-else>-</div>

            <h4 class="mt-3">
              {{ t("emailAddress") }}
            </h4>
            <span v-if="userProfile && userProfile.email">
              {{ userProfile.email }}
            </span>
            <div v-else>-</div>
          </v-card-text>
          <v-card-actions>
            <v-btn to="/main/profile/edit" variant="outlined" color="primary">{{
              t("edit")
            }}</v-btn>
            <v-btn
              to="/main/profile/password"
              variant="flat"
              color="primary"
              class="ms-3"
              >{{ t("changePassword") }}</v-btn
            >
          </v-card-actions>
          <!-- <v-card-actions>
        <v-btn to="/main/profile/view">View Profile</v-btn>
        <v-btn to="/main/profile/edit">Edit Profile</v-btn>
        <v-btn to="/main/profile/password">Change Password</v-btn>
      </v-card-actions> -->
        </v-card>
      </v-col>
      <v-col cols="6">
        <v-card class="ma-3 pa-3 second-item">
          <v-card-title primary-title>
            <h3>已使用秒數</h3>
          </v-card-title>
          <v-card-text class="mt-3">
            <strong>0</strong><small>秒</small>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn
              prepend-icon="format_list_bulleted"
              to="/main/progress"
              variant="outlined"
              class="mt-3"
              color="primary"
            >
              查看詳情
            </v-btn>
            <!-- <v-btn
              to="/main/profile/password"
              variant="flat"
              color="primary"
              style="padding: 0 15px"
              >{{ t("changePassword") }}</v-btn
            > -->
          </v-card-actions>
        </v-card>
      </v-col>
      <v-col cols="6">
        <v-card class="ma-3 pa-3 second-item">
          <v-card-title primary-title>
            <h3>可使用秒數</h3>
          </v-card-title>
          <v-card-text
            v-if="userProfile"
            class="mt-3"
          >
            <strong>{{ userProfile.available_time }}</strong
            ><small>秒</small>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn
              variant="flat"
              color="primary"
              class="mt-3"
              prepend-icon="add"
              >我要加值</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss" scoped>
.v-toolbar__content {
  background-image: linear-gradient(
    -225deg,
    rgb(234, 84, 19) 35%,
    rgb(178, 69, 146) 100%
  );
}

.v-btn {
  padding: 0 15px;
}

h4 {
  font-size: 16px;
}

.second-item {
  strong {
    font-size: 30px;
    font-weight: 500;
  }
  small {
    font-size: 16px;
    margin-left: 5px;
  }
}
</style>