Fix i18n styles (#8)

Co-authored-by: Germey <germey@acedata.cloud>

change/@acedatacloud-hub-b0473fe5-4c2b-4f97-8a44-faf2797d6ad5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix translate issues",
+  "packageName": "@acedatacloud/hub",
+  "email": "germey@acedata.cloud",
+  "dependentChangeType": "patch"
+}

src/components/application/Status.vue

@@ -9,8 +9,10 @@
   <div v-else-if="application" class="status">
     <span class="info">
       {{ $t('common.message.usedAmount') }}: {{ application?.used_amount?.toFixed(6) }}
+      {{ $t(`service.unit.` + application?.service?.unit + 's') }}
       {{ $t('common.message.remainingAmount') }}:
       {{ application?.remaining_amount?.toFixed(6) }}
+      {{ $t(`service.unit.` + application?.service?.unit + 's') }}
     </span>
     <span class="actions">
       <el-button size="small" type="primary" @click="onBuyMore(application)">{{

src/components/chat/Introduction.vue

@@ -92,10 +92,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .introduction {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: 80%;
+  margin: auto;
+  padding: 30px 0;
+  padding: 60px;
 
   .title {
     height: 70px;
@@ -108,14 +108,13 @@ export default defineComponent({
 
   .introduction-items {
     height: fit-content;
-    margin-bottom: 100px;
     .icon {
       font-size: 20px;
     }
     .subtitle {
       text-align: center;
       font-size: 18px;
-      margin-bottom: 20px;
+      margin-bottom: 40px;
     }
     .introduction-item {
       margin-bottom: 15px;

src/components/chat/ModelSelector.vue

@@ -10,7 +10,7 @@
       <el-button :class="{ group: true, active: group.value === activeGroup }" @click="onSwitchGroup(group)">
         <font-awesome-icon :icon="group.icon" :class="'icon ' + group.value" />
         <span v-if="group.value === activeGroup">
-          {{ model.displayName }}
+          {{ model.getDisplayName() }}
         </span>
         <span v-else>
           {{ group.label }}
@@ -31,10 +31,10 @@
               </div>
               <div class="info">
                 <p class="name">
-                  {{ groupModel.displayName }}
+                  {{ groupModel.getDisplayName() }}
                 </p>
                 <p class="description">
-                  {{ groupModel.description }}
+                  {{ groupModel.getDescription() }}
                 </p>
               </div>
             </div>

src/components/common/Navigator.vue

@@ -4,7 +4,7 @@
     <chevron v-else class="chevron" direction="left" @click="onCollapseMenu"></chevron>
     <div class="top">
       <div v-if="!collapsed">
-        <img src="@/assets/images/logo.svg" class="logo" @click="onHome" />
+        <img src="@/assets/images/logo.png" class="logo" @click="onHome" />
       </div>
       <el-menu v-if="!collapsed" :default-active="activeIndex">
         <el-menu-item
@@ -211,7 +211,7 @@ export default defineComponent({
   position: relative;
 
   .el-menu {
-    width: 150px;
+    width: 180px;
     border-right: none;
     .el-menu-item {
       height: 50px;
@@ -228,7 +228,7 @@ export default defineComponent({
 
   .logo {
     width: 80%;
-    max-height: 40px;
+    max-height: 50px;
     cursor: pointer;
     margin: 10px auto 20px auto;
     display: block;