From ee6b77f51f4fc26563f295b18002f7a6945966e9 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sun, 24 Aug 2025 13:14:25 +0800
Subject: [PATCH] Fix detail ux (#266)

---
 ...-0417c1e6-df68-4b66-98a9-fb73503d48cb.json |  7 +++
 src/components/chat/Message.vue               |  2 +-
 src/components/common/BotPlaceholder.vue      | 52 +++----------------
 src/components/common/Consumption.vue         |  2 +-
 src/components/common/ImageWrapper.vue        |  4 ++
 src/components/common/Navigator.vue           |  1 +
 src/components/midjourney/tasks/TaskItem.vue  |  1 -
 src/layouts/Console.vue                       | 14 ++---
 src/layouts/Main.vue                          |  5 +-
 src/layouts/Midjourney.vue                    |  1 +
 src/store/common/actions.ts                   | 10 +++-
 src/utils/application.ts                      |  1 +
 12 files changed, 40 insertions(+), 60 deletions(-)
 create mode 100644 change/@acedatacloud-nexior-0417c1e6-df68-4b66-98a9-fb73503d48cb.json

diff --git a/change/@acedatacloud-nexior-0417c1e6-df68-4b66-98a9-fb73503d48cb.json b/change/@acedatacloud-nexior-0417c1e6-df68-4b66-98a9-fb73503d48cb.json
new file mode 100644
index 00000000..57b27590
--- /dev/null
+++ b/change/@acedatacloud-nexior-0417c1e6-df68-4b66-98a9-fb73503d48cb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix detail ux",
+  "packageName": "@acedatacloud/nexior",
+  "email": "cqc@cuiqingcai.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
index f44ab116..bfd778a4 100644
--- a/src/components/chat/Message.vue
+++ b/src/components/chat/Message.vue
@@ -319,7 +319,7 @@ export default defineComponent({
   }
   &.user {
     .main {
-      align-items: end;
+      align-items: flex-end;
     }
     .content {
       background-color: var(--el-bg-color-page);
diff --git a/src/components/common/BotPlaceholder.vue b/src/components/common/BotPlaceholder.vue
index 31a7b26b..9060c4b7 100644
--- a/src/components/common/BotPlaceholder.vue
+++ b/src/components/common/BotPlaceholder.vue
@@ -1,17 +1,17 @@
 <template>
-  <div v-for="_ in 3" :key="_" class="placeholder">
-    <div class="left">
+  <div v-for="_ in 3" :key="_" class="flex mb-[10px]">
+    <div class="w-[70px] p-[10px]">
       <el-skeleton animated>
         <template #template>
-          <el-skeleton-item variant="image" class="avatar" />
+          <el-skeleton-item variant="image" class="w-[50px] h-[50px] rounded-full" />
         </template>
       </el-skeleton>
     </div>
-    <div class="main">
+    <div class="flex-1 p-[10px]">
       <el-skeleton animated>
         <template #template>
-          <el-skeleton-item variant="p" class="title" />
-          <el-skeleton-item variant="image" class="icon" />
+          <el-skeleton-item variant="p" class="w-[200px] h-[20px] mb-[15px]" />
+          <el-skeleton-item variant="p" class="w-full h-[200px] max-w-[300px]" />
         </template>
       </el-skeleton>
     </div>
@@ -27,46 +27,6 @@ export default defineComponent({
   components: {
     ElSkeleton,
     ElSkeletonItem
-  },
-  data() {
-    return {};
   }
 });
 </script>
-
-<style lang="scss" scoped>
-.placeholder {
-  display: flex;
-  flex-direction: row;
-  .left {
-    width: 70px;
-    padding: 10px;
-
-    .avatar {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-    }
-  }
-
-  .main {
-    width: calc(100% - 70px);
-    flex: 1;
-    padding: 10px;
-    margin-bottom: 10px;
-
-    .icon {
-      display: flex;
-      height: 200px;
-      width: 300px;
-    }
-
-    .title {
-      display: block;
-      width: 200px;
-      height: 20px;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/components/common/Consumption.vue b/src/components/common/Consumption.vue
index 4d5a5a4b..fbb40412 100644
--- a/src/components/common/Consumption.vue
+++ b/src/components/common/Consumption.vue
@@ -2,7 +2,7 @@
   <div v-if="value !== null && value !== undefined" class="text-center text-[var(--el-text-color-secondary)] mb-1">
     <font-awesome-icon icon="fa-solid fa-coins" class="text-xs mr-1" />
     <span class="text-xs">
-      {{ value }}
+      {{ value.toFixed(2) }}
       {{ $t(`service.unit.${service?.unit || 'credits'}`) }}
     </span>
   </div>
diff --git a/src/components/common/ImageWrapper.vue b/src/components/common/ImageWrapper.vue
index 2cc3af19..a5ab14c7 100644
--- a/src/components/common/ImageWrapper.vue
+++ b/src/components/common/ImageWrapper.vue
@@ -65,6 +65,10 @@ export default defineComponent({
     min-height: 200px;
     min-width: 200px;
     border-radius: 10px;
+    @media (max-width: 767px) {
+      max-width: 100%;
+      height: auto;
+    }
   }
   .btn-raw {
     position: absolute;
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
index df9c37cc..9d35ecd8 100644
--- a/src/components/common/Navigator.vue
+++ b/src/components/common/Navigator.vue
@@ -261,6 +261,7 @@ export default defineComponent({
   display: flex;
   align-items: center;
   position: relative;
+  background-color: var(--el-bg-color);
 
   .top {
     .avatar {
diff --git a/src/components/midjourney/tasks/TaskItem.vue b/src/components/midjourney/tasks/TaskItem.vue
index 7e565e4d..8068cd76 100644
--- a/src/components/midjourney/tasks/TaskItem.vue
+++ b/src/components/midjourney/tasks/TaskItem.vue
@@ -54,7 +54,6 @@
           v-if="modelValue?.response?.raw_image_url"
           :src="modelValue?.response?.image_url"
           :raw-src="modelValue?.response?.raw_image_url"
-          class="image"
         />
         <div v-if="modelValue?.response?.actions" :class="{ operations: true, full }">
           <el-tooltip
diff --git a/src/layouts/Console.vue b/src/layouts/Console.vue
index f9960a71..2acf7db9 100644
--- a/src/layouts/Console.vue
+++ b/src/layouts/Console.vue
@@ -84,7 +84,7 @@ export default defineComponent({
       }
       .panel {
         width: 100%;
-        height: 100%;
+        // height: 100%;
       }
     }
   }
@@ -113,11 +113,11 @@ export default defineComponent({
     width: fit-content;
   }
 
-  @media (max-width: 767px) {
-    .panel {
-      width: 100%;
-      height: 100%;
-    }
-  }
+  // @media (max-width: 767px) {
+  //   .panel {
+  //     width: 100%;
+  //     height: 100%;
+  //   }
+  // }
 }
 </style>
diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue
index 3079515f..45c05b7b 100644
--- a/src/layouts/Main.vue
+++ b/src/layouts/Main.vue
@@ -90,7 +90,7 @@ export default defineComponent({
       Promise.all([
         this.$store.dispatch('getApplications'),
         this.$store.dispatch(`${this.appName}/getApplications`)
-      ]).finally(() => {
+      ]).finally(async () => {
         console.debug('Fetched all applications', this.applications);
         // Check if we need to apply for a global application
         if (this.$store.state.applications?.length === 0) {
@@ -104,8 +104,9 @@ export default defineComponent({
         console.debug('final application', finalApplication);
         if (finalApplication) {
           console.debug('set final application', finalApplication, finalApplication?.type);
-          this.$store.dispatch(`${this.appName}/setApplication`, finalApplication);
+          await this.$store.dispatch(`${this.appName}/setApplication`, finalApplication);
         }
+        console.debug('finished initialization');
         this.initialized = true;
       });
     },
diff --git a/src/layouts/Midjourney.vue b/src/layouts/Midjourney.vue
index 40c938d6..5aba5476 100644
--- a/src/layouts/Midjourney.vue
+++ b/src/layouts/Midjourney.vue
@@ -67,6 +67,7 @@ export default defineComponent({
     }
     .results {
       display: block;
+      width: 100%;
     }
     .menu {
       display: block;
diff --git a/src/store/common/actions.ts b/src/store/common/actions.ts
index c5c8ebd7..c66cc68b 100644
--- a/src/store/common/actions.ts
+++ b/src/store/common/actions.ts
@@ -10,7 +10,7 @@ import {
 } from '@/operators';
 import { IApplication, IApplicationScope, IApplicationType, ICredential, IToken, IUser, Status } from '@/models';
 import { getSiteOrigin } from '@/utils/site';
-import { loginRedirect } from '@/utils';
+import { getBaseUrlAuth, loginRedirect } from '@/utils';
 import { SURFACE_ANDROID, SURFACE_IOS } from '@/constants';
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 
@@ -222,9 +222,15 @@ export const logout = async ({ dispatch }: ActionContext<IRootState, IRootState>
   await dispatch('kling/resetAll');
   await dispatch('luma/resetAll');
   await dispatch('pika/resetAll');
+  await dispatch('pixverse/resetAll');
   await dispatch('qrart/resetAll');
   await dispatch('suno/resetAll');
-  await dispatch('login');
+  await dispatch('veo/resetAll');
+  const currentUrl = window.location.href;
+  const baseUrlAuth = getBaseUrlAuth();
+  const loginUrl = `${baseUrlAuth}/auth/login?redirect=${currentUrl}`;
+  const redirectUrl = `${baseUrlAuth}/auth/logout?redirect=${loginUrl}`;
+  window.location.href = redirectUrl;
 };
 
 export default {
diff --git a/src/utils/application.ts b/src/utils/application.ts
index a58aa072..c2a75948 100644
--- a/src/utils/application.ts
+++ b/src/utils/application.ts
@@ -101,4 +101,5 @@ export function getFinalApplication(
     console.debug('application with Usage type', application4);
     return application4;
   }
+  return application1 || application2 || application3 || application4;
 }