commit

src/components/common/Navigator.vue

@@ -35,6 +35,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="onDistribution">
+          <font-awesome-icon icon="fa-solid fa-coins" class="mr-2" />
+          <template #title>{{ $t('common.nav.distribution') }}</template>
+        </el-menu-item>
         <el-menu-item @click="onLogout">
           <font-awesome-icon icon="fa-solid fa-arrow-right-from-bracket" class="mr-2" />
           <template #title>{{ $t('common.nav.logOut') }}</template>
@@ -49,8 +53,12 @@
           </el-button>
         </el-tooltip>
       </div>
-      <div v-if="$config.navigation?.help" class="link">
-        <help-entry />
+      <div v-if="showDistribution" class="link">
+        <el-tooltip effect="dark" :content="$t('common.nav.distribution')" placement="right">
+          <el-button class="button" @click="onDistribution">
+            <font-awesome-icon icon="fa-solid fa-coins" />
+          </el-button>
+        </el-tooltip>
       </div>
       <div v-if="authenticated" class="link">
         <el-tooltip effect="dark" :content="$t('common.nav.logOut')" placement="right">
@@ -71,6 +79,7 @@ import {
   ROUTE_CHAT_CONVERSATION,
   ROUTE_CHAT_CONVERSATION_NEW,
   ROUTE_CONSOLE_ROOT,
+  ROUTE_DISTRIBUTION_INDEX,
   ROUTE_INDEX,
   ROUTE_MIDJOURNEY_HISTORY,
   ROUTE_MIDJOURNEY_INDEX
@@ -82,7 +91,6 @@ export default defineComponent({
   name: 'Navigator',
   components: {
     ElButton,
-    HelpEntry,
     ElTooltip,
     FontAwesomeIcon,
     ElMenu,
@@ -123,6 +131,16 @@ export default defineComponent({
     authenticated() {
       return !!this.$store.state.token.access;
     },
+    showDistribution() {
+      return (
+        // config is enabled
+        this.$config.navigation.distribution &&
+        // if forcedInviterId is set, only the forced inviter can see the distribution menu
+        // if forcedInviterId is not set, everyone can see the distribution menu
+        (!this.$config.distribution?.forceInviterId ||
+          this.$store.getters.user?.id === this.$config.distribution?.forceInviterId)
+      );
+    },
     collapsed: {
       get() {
         return this.$store.state.setting?.navigationCollapsed;
@@ -140,6 +158,11 @@ export default defineComponent({
         name: ROUTE_INDEX
       });
     },
+    onDistribution() {
+      this.$router.push({
+        name: ROUTE_DISTRIBUTION_INDEX
+      });
+    },
     async onOpenMenu() {
       this.collapsed = false;
     },

src/components/console/SidePanel.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="side-panel">
-    <div>
-      <img src="@/assets/images/logo.svg" class="logo" @click="onHome" />
-    </div>
     <div class="links">
       <a
         v-for="(link, linkIndex) in links"
@@ -29,12 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {
-  ROUTE_CONSOLE_APPLICATION_LIST,
-  ROUTE_CONSOLE_ORDER_LIST,
-  ROUTE_INDEX,
-  ROUTE_CONSOLE_DISTRIBUTION_INDEX
-} from '@/router';
+import { ROUTE_CONSOLE_APPLICATION_LIST, ROUTE_CONSOLE_ORDER_LIST, ROUTE_INDEX } from '@/router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { BASE_URL_HUB } from '@/constants';
 
@@ -78,17 +70,6 @@ export default defineComponent({
         }
       ];
 
-      // if forcedInviterId is set, only the forced inviter can see the distribution menu
-      // if forcedInviterId is not set, everyone can see the distribution menu
-      if (!this.$config.distribution?.forceInviterId || this.user?.id === this.$config.distribution?.forceInviterId) {
-        links.push({
-          key: 'distribution-index',
-          text: this.$t('console.menu.distributionIndex'),
-          name: ROUTE_CONSOLE_DISTRIBUTION_INDEX,
-          icon: 'fa-solid fa-coins'
-        });
-      }
-
       return links;
     }
   },

src/config.ts

@@ -24,9 +24,9 @@ export default {
     console: true,
 
     /**
-     * Show help entry in left navigation.
+     * Show distribution entry in left navigation.
      */
-    help: true
+    distribution: true
   },
 
   /**

src/i18n/zh/common/nav.ts

@@ -13,8 +13,7 @@ export default {
   service: '服务',
   document: '文档',
   console: '控制台',
-  clearConversations: '清除对话',
   newChat: '新建对话',
   logOut: '退出登录',
-  confirmClearConversations: '确认清除'
+  distribution: '分销赚钱'
 };

src/layouts/Console.vue

@@ -63,22 +63,27 @@ export default defineComponent({
 }
 
 @media screen and (max-width: 767px) {
-  .main {
-    .side {
-      display: none;
+  .wrapper {
+    .navigator {
+      border-right: none;
     }
-    .panel {
-      width: 100%;
-      height: 100%;
-      overflow-y: scroll;
+    .main {
+      .side {
+        display: none;
+      }
+      .panel {
+        width: 100%;
+        height: 100%;
+        overflow-y: scroll;
+      }
+    }
+    .menu {
+      display: block;
+      position: fixed;
+      right: 20px;
+      top: 20px;
+      z-index: 100;
     }
-  }
-  .menu {
-    display: block;
-    position: fixed;
-    right: 20px;
-    top: 20px;
-    z-index: 100;
   }
 }
 </style>

src/layouts/Midjourney.vue

@@ -91,21 +91,23 @@ export default defineComponent({
 
 @media screen and (min-width: 768px) and (max-width: 1060px) {
   .main {
+    position: relative;
     .presets {
       display: none;
     }
     .menu {
       display: block;
-      position: fixed;
-      left: 80px;
+      position: absolute;
+      left: 20px;
       top: 20px;
-      z-index: 2000;
+      z-index: 1000;
     }
   }
 }
 
 @media (max-width: 767px) {
   .main {
+    position: relative;
     .presets {
       display: none;
     }
@@ -114,17 +116,17 @@ export default defineComponent({
     }
     .menu {
       display: block;
-      position: fixed;
-      left: 80px;
+      position: absolute;
+      left: 20px;
       top: 20px;
-      z-index: 2000;
+      z-index: 1000;
     }
     .menu2 {
       display: block;
       position: fixed;
       right: 20px;
       top: 20px;
-      z-index: 2000;
+      z-index: 1000;
     }
   }
 }

src/pages/console/distribution/Index.vue → src/pages/distribution/Index.vue

@@ -204,9 +204,9 @@ import {
   IDistributionStatus
 } from '@/operators';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { ROUTE_CONSOLE_DISTRIBUTION_HISTORY, ROUTE_CONSOLE_DISTRIBUTION_INVITEES } from '@/router';
 import { IUser, userOperator } from '@/operators';
 import QrCode from 'qrcode.vue';
+import { ROUTE_DISTRIBUTION_HISTORY, ROUTE_DISTRIBUTION_INVITEES } from '@/router';
 
 interface IData {
   invitees: IUser[];
@@ -279,12 +279,12 @@ export default defineComponent({
   methods: {
     goHistory() {
       this.$router.push({
-        name: ROUTE_CONSOLE_DISTRIBUTION_HISTORY
+        name: ROUTE_DISTRIBUTION_HISTORY
       });
     },
     goInvitees() {
       this.$router.push({
-        name: ROUTE_CONSOLE_DISTRIBUTION_INVITEES
+        name: ROUTE_DISTRIBUTION_INVITEES
       });
     },
     onPageChange(page: number) {

src/router/console.ts

@@ -1,9 +1,6 @@
 import {
   ROUTE_CONSOLE_APPLICATION_BUY,
   ROUTE_CONSOLE_APPLICATION_LIST,
-  ROUTE_CONSOLE_DISTRIBUTION_HISTORY,
-  ROUTE_CONSOLE_DISTRIBUTION_INDEX,
-  ROUTE_CONSOLE_DISTRIBUTION_INVITEES,
   ROUTE_CONSOLE_ORDER_DETAIL,
   ROUTE_CONSOLE_ORDER_LIST,
   ROUTE_CONSOLE_ROOT
@@ -42,21 +39,6 @@ export default {
       path: 'applications/:id/buy',
       name: ROUTE_CONSOLE_APPLICATION_BUY,
       component: () => import('@/pages/console/application/Buy.vue')
-    },
-    {
-      path: 'distributions',
-      name: ROUTE_CONSOLE_DISTRIBUTION_INDEX,
-      component: () => import('@/pages/console/distribution/Index.vue')
-    },
-    {
-      path: 'distribution-histories',
-      name: ROUTE_CONSOLE_DISTRIBUTION_HISTORY,
-      component: () => import('@/pages/console/distribution/History.vue')
-    },
-    {
-      path: 'distribution-invitees',
-      name: ROUTE_CONSOLE_DISTRIBUTION_INVITEES,
-      component: () => import('@/pages/console/distribution/Invitees.vue')
     }
   ]
 };

src/router/constants.ts

@@ -14,6 +14,7 @@ export const ROUTE_CONSOLE_ORDER_LIST = 'console-order-list';
 export const ROUTE_CONSOLE_ORDER_DETAIL = 'console-order-detail';
 export const ROUTE_CONSOLE_APPLICATION_LIST = 'console-application-list';
 export const ROUTE_CONSOLE_APPLICATION_BUY = 'console-application-buy';
-export const ROUTE_CONSOLE_DISTRIBUTION_INDEX = 'console-distribution-index';
-export const ROUTE_CONSOLE_DISTRIBUTION_HISTORY = 'console-distribution-history';
-export const ROUTE_CONSOLE_DISTRIBUTION_INVITEES = 'console-distribution-invitees';
+
+export const ROUTE_DISTRIBUTION_INDEX = 'distribution-index';
+export const ROUTE_DISTRIBUTION_HISTORY = 'distribution-history';
+export const ROUTE_DISTRIBUTION_INVITEES = 'distribution-invitees';

src/router/distribution.ts

@@ -0,0 +1,26 @@
+import { ROUTE_DISTRIBUTION_HISTORY, ROUTE_DISTRIBUTION_INDEX, ROUTE_DISTRIBUTION_INVITEES } from './constants';
+
+export default {
+  path: '/distribution',
+  meta: {
+    auth: true
+  },
+  component: () => import('@/layouts/Main.vue'),
+  children: [
+    {
+      path: '',
+      name: ROUTE_DISTRIBUTION_INDEX,
+      component: () => import('@/pages/distribution/Index.vue')
+    },
+    {
+      path: 'history',
+      name: ROUTE_DISTRIBUTION_HISTORY,
+      component: () => import('@/pages/distribution/History.vue')
+    },
+    {
+      path: 'invitees',
+      name: ROUTE_DISTRIBUTION_INVITEES,
+      component: () => import('@/pages/distribution/History.vue')
+    }
+  ]
+};

src/router/index.ts

@@ -3,6 +3,8 @@ import auth from './auth';
 import console from './console';
 import chat from './chat';
 import midjourney from './midjourney';
+import distribution from './distribution';
+
 import { ROUTE_CHAT_CONVERSATION_NEW, ROUTE_INDEX } from './constants';
 
 const routes = [
@@ -16,7 +18,8 @@ const routes = [
   console,
   auth,
   chat,
-  midjourney
+  midjourney,
+  distribution
 ];
 
 const router = createRouter({