Fix detail ux (#266)

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"
+}

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);

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>

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>

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;

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 {

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

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>

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;
       });
     },

src/layouts/Midjourney.vue

@@ -67,6 +67,7 @@ export default defineComponent({
     }
     .results {
       display: block;
+      width: 100%;
     }
     .menu {
       display: block;

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 {

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;
 }