update ui

frontend/src/language/en.json

@@ -27,6 +27,7 @@
     "describe_2": "Let's get started with AI Presenters",
     "dashboard": "Dashboard",
     "makeVideo": "Make Video",
+    "article": "Make Article",
     "makeArticle": "Make Article",
     "progress": "Progress",
     "userProfile": "User Profile",

frontend/src/language/zh.json

@@ -27,7 +27,8 @@
     "describe_2": "開始使用 AI Presenters",
     "dashboard": "首頁",
     "makeVideo": "製作影片",
-    "makeArticle": "製作文章",
+    "article": "上傳文章",
+    "makeArticle": "製作口碑文章",
     "progress": "影片清單",
     "userProfile": "會員資料",
     "editProfile": "編輯資料",

frontend/src/views/main/Dashboard.vue

@@ -23,45 +23,98 @@ const greetedUser = computed(() => {
 
 <template>
   <v-container fluid>
-    <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>
+    <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>
+            <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-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>50</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 class="mt-3">
+            <strong>300</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>
 
@@ -73,4 +126,23 @@ const greetedUser = computed(() => {
     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>

frontend/src/views/main/Main.vue

@@ -108,15 +108,15 @@ const routeGuardAdmin = async (
             <v-list-item to="/main/make-video" prepend-icon="video_call">
               <v-list-item-title>{{ t("makeVideo") }}</v-list-item-title>
             </v-list-item>
-            <v-list-item to="/main/make-article" prepend-icon="article">
-              <v-list-item-title>{{ t("makeArticle") }}</v-list-item-title>
-            </v-list-item>
             <v-list-item to="/main/progress" prepend-icon="list">
               <v-list-item-title>{{ t("progress") }}</v-list-item-title>
             </v-list-item>
-            <v-list-item to="/main/profile/view" prepend-icon="person">
-              <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
+            <v-list-item to="/main/make-article" prepend-icon="article">
+              <v-list-item-title>{{ t("article") }}</v-list-item-title>
             </v-list-item>
+            <!-- <v-list-item to="/main/profile/view" prepend-icon="person">
+              <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
+            </v-list-item> -->
             <v-list-item to="/main/profile/edit" prepend-icon="edit">
               <v-list-item-title>{{ t("editProfile") }}</v-list-item-title>
             </v-list-item>