add apply

src/components/application/Confirm.vue

@@ -29,7 +29,7 @@
         <span class="policy-title highlight" @click="showPolicy = true"> {{ $t('application.message.policy') }} </span>
         <application-policy v-model.visible="showPolicy" />
       </div>
-      <el-button type="primary" @click="onApply">{{ $t('common.button.apply') }}</el-button>
+      <el-button type="primary" class="btn btn-apply" @click="onApply">{{ $t('common.button.apply') }}</el-button>
     </div>
   </el-dialog>
 </template>
@@ -59,7 +59,7 @@ export default defineComponent({
   },
   props: {
     object: {
-      type: Object as () => IApi,
+      type: Object as () => IApi | undefined,
       required: true
     },
     type: {
@@ -96,8 +96,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 .content {
   padding: 10px 40px;
+
   .policy {
     margin-bottom: 10px;
+    .btn-apply {
+      border-radius: 20px;
+    }
     .policy-checkbox {
       margin-right: 10px !important;
     }

src/components/chat/ModelSelector.vue

@@ -62,13 +62,13 @@ export default defineComponent({
       activeGroup: 'base',
       groups: [
         {
-          label: '基础',
+          label: '3.5',
           value: 'base',
           icon: 'fa-solid fa-bolt',
           options: [CHAT_MODEL_CHATGPT, CHAT_MODEL_CHATGPT_16K, CHAT_MODEL_CHATGPT_BROWSING]
         },
         {
-          label: 'Plus',
+          label: '4.0',
           value: 'plus',
           icon: 'fa-solid fa-wand-magic-sparkles',
           options: [CHAT_MODEL_CHATGPT4, CHAT_MODEL_CHATGPT4_BROWSING]

src/components/chat/Sidebar.vue

@@ -72,7 +72,6 @@ interface IData {
 export default defineComponent({
   name: 'Sidebar',
   components: {
-    ElButton,
     ElInput,
     FontAwesomeIcon,
     ElSkeleton

src/components/common/ApiStatus.vue

@@ -8,29 +8,86 @@
       <el-button size="small" type="primary" @click="onBuy">{{ $t('common.button.buyMore') }}</el-button>
     </span>
   </div>
+  <div v-else class="text-center info">
+    <span class="mr-2">{{ $t('chat.message.notApplied') }}</span>
+    <span>
+      <el-button type="primary" class="btn btn-apply" size="small" @click="confirming = true">
+        {{ $t('common.button.apply') }}
+      </el-button>
+    </span>
+    <span class="ml-1">{{ $t('chat.message.tryForFree') }}</span>
+    <application-confirm v-model.visible="confirming" :object="api" :type="applicationType.API" @apply="onApply" />
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IApplication } from '@/operators';
-import { ElButton } from 'element-plus';
+import { IApplication, IApplicationDetailResponse, applicationOperator } from '@/operators';
+import { ElButton, ElMessage } from 'element-plus';
+import ApplicationConfirm from '@/components/application/Confirm.vue';
+import { IApplicationType } from '@/operators';
+import { apiOperator } from '@/operators/api/operator';
+import { IApiDetailResponse, IApi } from '@/operators/api';
+import { ERROR_CODE_DUPLICATION } from '@/constants/errorCode';
+
+export interface IData {
+  confirming: boolean;
+  applicationType: typeof IApplicationType;
+  api: IApi | undefined;
+}
+
 export default defineComponent({
   name: 'ApiStatus',
-  components: { ElButton },
+  components: { ElButton, ApplicationConfirm },
   props: {
     application: {
       type: Object as () => IApplication | undefined,
       required: true
+    },
+    apiId: {
+      type: String,
+      required: true
     }
   },
-  data() {
-    return {};
+  emits: ['apply', 'refresh'],
+  data(): IData {
+    return {
+      confirming: false,
+      applicationType: IApplicationType,
+      api: undefined
+    };
   },
   computed: {},
+  mounted() {
+    apiOperator.get(this.apiId).then(({ data: data }: { data: IApiDetailResponse }) => {
+      this.api = data;
+    });
+  },
   methods: {
     onBuy() {
       const url = `https://data.zhishuyun.com/console/applications/${this.application?.id}/buy`;
       window.open(url, '_blank');
+    },
+    onApply() {
+      applicationOperator
+        .create({
+          type: IApplicationType.API,
+          api_id: this.apiId
+        })
+        .then(({ data: data }: { data: IApplicationDetailResponse }) => {
+          // this.application = data;
+          ElMessage.success(this.$t('application.message.applySuccessfully'));
+          setTimeout(() => {
+            this.$emit('refresh');
+          }, 2000);
+          this.confirming = false;
+        })
+        .catch((error) => {
+          if (error?.response?.data?.code === ERROR_CODE_DUPLICATION) {
+            ElMessage.error(this.$t('application.message.alreadyApplied'));
+          }
+          this.confirming = false;
+        });
     }
   }
 });
@@ -45,7 +102,7 @@ export default defineComponent({
 .info {
   font-size: 14px;
   color: var(--el-text-color-regular);
-  display: inline-block;
+  // display: inline-block;
   text-align: center;
 }
 .actions {
@@ -55,4 +112,7 @@ export default defineComponent({
     border-radius: 20px;
   }
 }
+.btn-apply {
+  border-radius: 20px;
+}
 </style>

src/components/common/Navigator.vue

@@ -7,15 +7,22 @@
         </el-button>
       </div>
     </div>
-    <div class="bottom"></div>
+    <div class="middle"></div>
+    <div class="bottom">
+      <div class="link">
+        <el-button class="button" @click="onLogout">
+          <font-awesome-icon icon="fa-solid fa-arrow-right-from-bracket" />
+        </el-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElTooltip, ElButton } from 'element-plus';
+import { ElButton } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { ROUTE_CHAT_INDEX, ROUTE_MIDJOURNEY_INDEX } from '@/router/constants';
+import { ROUTE_AUTH_LOGIN, ROUTE_CHAT_INDEX, ROUTE_MIDJOURNEY_INDEX } from '@/router/constants';
 
 export default defineComponent({
   name: 'Navigator',
@@ -40,6 +47,13 @@ export default defineComponent({
         }
       ]
     };
+  },
+  methods: {
+    onLogout() {
+      console.debug('logout');
+      this.$store.dispatch('resetToken');
+      this.$router.push({ name: ROUTE_AUTH_LOGIN });
+    }
   }
 });
 </script>
@@ -49,7 +63,9 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   align-items: center;
-  .top {
+
+  .top,
+  .bottom {
     display: flex;
     flex-direction: column;
     padding-top: 10px;
@@ -71,8 +87,9 @@ export default defineComponent({
     }
   }
   .bottom {
-    display: flex;
-    flex-direction: column;
+    display: block;
+    position: absolute;
+    bottom: 0;
   }
 }
 </style>

src/i18n/zh/chat/message.ts

@@ -3,7 +3,7 @@ export default {
   noToken: '请先申请对应服务',
   newMessagePlaceholder: '请输入你的问题...',
   noInput: '问题不能为空',
-  apiInfo: '本服务由「知数云」提供技术支持',
+  notApplied: '您尚未申请该服务，请先申请',
   tryForFree: '免费使用',
   initializing: '初始化中，请稍后...',
   writeCode: '写一段 JavaScript 代码，输出 Hello World',

src/operators/application/models.ts

@@ -20,7 +20,7 @@ export interface ICredential {
 }
 
 export interface IApplication {
-  id: string;
+  id?: string;
   api?: IApi;
   type?: IApplicationType;
   api_id?: string;

src/operators/chat/constants.ts

@@ -19,29 +19,29 @@ export const API_ID_CHATGPT4_BROWSING = 'a61de51b-d0d0-48a2-9a17-1d4986d5d497';
 export const CHAT_MODEL_CHATGPT: IChatModel = {
   apiId: API_ID_CHATGPT,
   name: CHAT_MODEL_NAME_CHATGPT,
-  displayName: '基础 - 4k'
+  displayName: '3.5 - 标准'
 };
 
 export const CHAT_MODEL_CHATGPT_16K: IChatModel = {
   apiId: API_ID_CHATGPT_16K,
   name: CHAT_MODEL_NAME_CHATGPT_16K,
-  displayName: '基础 - 16k'
+  displayName: '3.5 - 16k'
 };
 
 export const CHAT_MODEL_CHATGPT_BROWSING: IChatModel = {
   apiId: API_ID_CHATGPT_BROWSING,
   name: CHAT_MODEL_NAME_CHATGPT_BROWSING,
-  displayName: '基础 - 联网版'
+  displayName: '3.5 - 联网版'
 };
 
 export const CHAT_MODEL_CHATGPT4: IChatModel = {
   apiId: API_ID_CHATGPT4,
   name: CHAT_MODEL_NAME_CHATGPT4,
-  displayName: 'Plus - 4.0'
+  displayName: '4.0 - 标准'
 };
 
 export const CHAT_MODEL_CHATGPT4_BROWSING: IChatModel = {
   apiId: API_ID_CHATGPT4_BROWSING,
   name: CHAT_MODEL_NAME_CHATGPT4_BROWSING,
-  displayName: 'Plus - 4.0 联网版'
+  displayName: '4.0 - 联网版'
 };

src/operators/index.ts

@@ -4,3 +4,4 @@ export * from './user';
 export * from './chat';
 export * from './midjourney';
 export * from './usage';
+export * from './api';

src/pages/chat/Conversation.vue

@@ -3,7 +3,7 @@
     <sidebar class="left" :applications="applications" @click="onFetchHistory" />
     <div class="main">
       <model-selector v-model="model" class="model-selector" @select="onSelectModel" />
-      <api-status :application="application" />
+      <api-status :application="application" :api-id="model.apiId" />
       <div class="dialogue">
         <introduction v-if="messages && messages.length === 0" />
         <div v-else class="messages">

src/pages/midjourney/History.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="main">
       <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
-      <api-status :application="application" class="mb-4" />
+      <api-status :application="application" class="mb-4" :api-id="channel.apiId" @refresh="onFetchApplications" />
       <task-full-list :applications="applications" @custom="onCustom" />
       <el-button type="primary" class="btn btn-generate" @click="onGenerateNew">
         <font-awesome-icon icon="fa-solid fa-chevron-left" class="icon icon-rotate mr-1" />

src/pages/midjourney/Index.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="main">
       <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
-      <api-status :application="application" class="mb-4" />
+      <api-status :application="application" :api-id="channel.apiId" class="mb-4" @apply="onFetchApplications" />
       <div class="pt-4">
         <reference-image class="mb-4" @change="references = $event" />
         <prompt-input v-model="prompt" class="mb-4" />
@@ -43,11 +43,13 @@ import {
   applicationOperator,
   midjourneyOperator,
   IMidjourneyImagineTask,
-  IMidjourneyImagineRequest
+  IMidjourneyImagineRequest,
+  IApplicationDetailResponse
 } from '@/operators';
 import ApiStatus from '@/components/common/ApiStatus.vue';
 import TaskBriefList from '@/components/midjourney/tasks/TaskBriefList.vue';
 import FinalPrompt from '@/components/midjourney/FinalPrompt.vue';
+import { ERROR_CODE_DUPLICATION } from '@/constants/errorCode';
 
 interface IData {
   channel: IMidjourneyChannel;
@@ -147,6 +149,22 @@ export default defineComponent({
     this.onFetchApplications();
   },
   methods: {
+    onApply() {
+      applicationOperator
+        .create({
+          // @ts-ignore
+          application: this.application
+        })
+        .then(({ data: data }: { data: IApplicationDetailResponse }) => {
+          this.application = data;
+          ElMessage.success(this.$t('application.message.applySuccessfully'));
+        })
+        .catch((error) => {
+          if (error?.response?.data?.code === ERROR_CODE_DUPLICATION) {
+            ElMessage.error(this.$t('application.message.alreadyApplied'));
+          }
+        });
+    },
     async onSelectChannel() {
       await this.onFetchApplications();
     },