Update navbar style (#56)

Co-authored-by: AceDataCloud <office@acedata.cloud>

.github/workflows/publish.yaml

@@ -31,7 +31,7 @@ jobs:
         run: |
           git config --global user.name 'GitHub Actions'
           git config --global user.email 'actions@github.com'
-          git remote set-url origin "https://$REPO_PAT@github.com/acedatacloud/HubFrontend"
+          git remote set-url origin "https://$REPO_PAT@github.com/AceDataCloud/Nexior"
         env:
           REPO_PAT: ${{ secrets.REPO_PAT }}
 

change/@acedatacloud-nexior-83ca5fdf-39e0-40a7-add1-51802f01f17a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add a navbar on top",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}

src/components/chat/SidePanel.vue

@@ -190,7 +190,6 @@ export default defineComponent({
   padding: 10px;
   width: 250px;
   height: 100%;
-  border-right: 1px solid var(--el-border-color);
 
   @media (max-width: 767px) {
     border-right: none;

src/components/common/Logo.vue

@@ -8,18 +8,12 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   emits: ['click'],
-  data() {
-    return {
-      url1: 'https://cdn.acedata.cloud/logo.png/thumb_450x_',
-      url2: 'https://cdn.acedata.cloud/logo2.png/thumb_450x_'
-    };
-  },
   computed: {
     dark() {
       return getCookie('THEME') === 'dark';
     },
     url() {
-      return this.dark ? this.url2 : this.url1;
+      return this.$store.state.site?.logo;
     }
   }
 });

src/components/common/LogoTiny.vue

@@ -0,0 +1,20 @@
+<template>
+  <img :src="url" class="logo tiny" @click="$emit('click')" />
+</template>
+
+<script lang="ts">
+import { getCookie } from 'typescript-cookie';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  emits: ['click'],
+  computed: {
+    dark() {
+      return getCookie('THEME') === 'dark';
+    },
+    url() {
+      return this.$store.state.site?.favicon;
+    }
+  }
+});
+</script>

src/components/common/Navigator.vue

@@ -6,6 +6,9 @@
       <div v-if="!collapsed">
         <logo @click="onHome" />
       </div>
+      <div v-else>
+        <logo-tiny @click="onHome" />
+      </div>
       <el-menu v-if="!collapsed" :default-active="activeIndex">
         <el-menu-item
           v-for="(link, linkIndex) in links"
@@ -35,6 +38,10 @@
           <font-awesome-icon icon="fa-solid fa-compass" class="mr-2" />
           <template #title>{{ $t('common.nav.console') }}</template>
         </el-menu-item>
+        <el-menu-item @click="onSite">
+          <font-awesome-icon icon="fa-solid fa-gear" class="mr-2" />
+          <template #title>{{ $t('common.nav.site') }}</template>
+        </el-menu-item>
         <el-menu-item v-if="showDistribution" @click="onDistribution">
           <font-awesome-icon icon="fa-solid fa-coins" class="mr-2" />
           <template #title>{{ $t('common.nav.distribution') }}</template>
@@ -114,12 +121,14 @@ import {
 } from '@/router/constants';
 import Chevron from './Chevron.vue';
 import Logo from './Logo.vue';
+import LogoTiny from './LogoTiny.vue';
 
 export default defineComponent({
   name: 'Navigator',
   components: {
     ElButton,
     Logo,
+    LogoTiny,
     DarkSelector,
     ElTooltip,
     LocaleSelector,
@@ -247,7 +256,7 @@ export default defineComponent({
   position: relative;
 
   .el-menu {
-    width: 180px;
+    width: 150px;
     border-right: none;
     background: none;
     .el-menu-item {
@@ -276,6 +285,11 @@ export default defineComponent({
     cursor: pointer;
     margin: 10px auto 20px auto;
     display: block;
+    &.tiny {
+      margin: 0 auto 10px auto;
+      width: 40px;
+      height: 40px;
+    }
   }
 
   .top,

src/components/console/SidePanel.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="side-panel">
+    <div class="pl-16 pr-16">
+      <logo @click="onHome" />
+    </div>
     <div class="links">
       <a
         v-for="(link, linkIndex) in links"
@@ -34,6 +37,7 @@ import {
 } from '@/router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { BASE_URL_HUB } from '@/constants';
+import Logo from '../common/Logo.vue';
 
 interface ILink {
   key: string;
@@ -47,7 +51,8 @@ interface ILink {
 export default defineComponent({
   name: 'Navigator',
   components: {
-    FontAwesomeIcon
+    FontAwesomeIcon,
+    Logo
   },
   computed: {
     isOfficial() {
@@ -116,9 +121,8 @@ $padding-left: 10px;
 
 .logo {
   width: 100%;
-  height: 60px;
   cursor: pointer;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 }
 
 .links {

src/components/midjourney/tasks/TaskPreview.vue

@@ -211,7 +211,7 @@ export default defineComponent({
       return this.$store.state.midjourney.application;
     },
     mode() {
-      switch (this.modelValue?.mode) {
+      switch (this.modelValue?.request?.mode) {
         case MidjourneyImagineMode.FAST:
           return MIDJOURNEY_MODE_FAST;
         case MidjourneyImagineMode.TURBO:

src/layouts/Chat.vue

@@ -64,6 +64,7 @@ export default defineComponent({
     width: 250px;
     height: 100%;
     overflow-y: scroll;
+    border-right: 1px solid var(--el-border-color);
   }
 
   .chat {

src/layouts/Main.vue

@@ -8,7 +8,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Navigator from '@/components/common/Navigator.vue';
-
 export default defineComponent({
   name: 'LayoutMain',
   components: {

src/pages/console/order/Detail.vue

@@ -61,7 +61,7 @@
             <el-row v-if="order?.state === OrderState.PENDING || order?.state === OrderState.FAILED">
               <el-col :span="14" :offset="5">
                 <el-divider border-style="dashed" />
-                <div v-if="order.price && order.price > 0 && !order.pay_way" class="payways mb-6">
+                <div v-if="showPayWays && order.price && order.price > 0 && !order.pay_way" class="payways mb-6">
                   <div
                     v-if="true"
                     :class="{
@@ -156,6 +156,7 @@ interface IData {
   order: IOrder | undefined;
   loading: boolean;
   paying: boolean;
+  showPayWays: boolean;
   prepaying: boolean;
   applicationType: typeof IApplicationType;
 }
@@ -178,9 +179,10 @@ export default defineComponent({
   data(): IData {
     return {
       PayWay: PayWay,
-      payWay: PayWay.WechatPay,
+      payWay: PayWay.Stripe,
       OrderState: OrderState,
       order: undefined,
+      showPayWays: false,
       loading: false,
       paying: false,
       prepaying: false,

src/plugins/font-awesome.ts

@@ -10,6 +10,7 @@ import {
 import { faDiscord as faBrandsDiscord } from '@fortawesome/free-brands-svg-icons';
 import {
   faLaptopCode as faSolidLaptopCode,
+  faOutdent as faSolidOutdent,
   faChevronRight as faSolidChevronRight,
   faMoon as faSolidMoon,
   faFan as faSolidFan,
@@ -67,6 +68,7 @@ import {
 library.add(faRegularCopy);
 library.add(faSolidAngleDown);
 library.add(faSolidStore);
+library.add(faSolidOutdent);
 library.add(faSolidChevronRight);
 library.add(faSolidPlaneDeparture);
 library.add(faSolidCube);