From 1edc63e166fdce1c3ad17f9eb85fe80a42cad114 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Mon, 1 Jan 2024 15:42:27 +0800
Subject: [PATCH] update distribution

---
 src/components/common/HelpEntry.vue         |  19 +-
 src/components/common/HelpEntry2.vue        |  45 +++
 src/components/common/Navigator.vue         |   5 +
 src/components/console/SidePanel.vue        |  16 +-
 src/i18n/zh/common/message.ts               |   3 +-
 src/i18n/zh/common/nav.ts                   |   4 +-
 src/i18n/zh/common/title.ts                 |   6 +-
 src/i18n/zh/console/menu.ts                 |   2 +-
 src/i18n/zh/distribution/button.ts          |   4 +
 src/i18n/zh/distribution/field.ts           |  12 +
 src/i18n/zh/distribution/index.ts           |  11 +
 src/i18n/zh/distribution/message.ts         |  13 +
 src/i18n/zh/distribution/title.ts           |  13 +
 src/i18n/zh/index.ts                        |   6 +-
 src/i18n/zh/user/field.ts                   |   7 +
 src/i18n/zh/user/index.ts                   |   5 +
 src/layouts/Chat.vue                        |   2 +-
 src/operators/distribution/index.ts         |   2 +
 src/operators/distribution/models.ts        |  54 +++
 src/operators/distribution/operator.ts      |  57 +++
 src/operators/user/models.ts                |   7 +-
 src/operators/user/operator.ts              |  13 +-
 src/pages/console/application/Buy.vue       |  23 +-
 src/pages/console/application/List.vue      |  99 ++---
 src/pages/console/distribution/History.vue  | 190 +++++++++
 src/pages/console/distribution/Index.vue    | 420 ++++++++++++++++++++
 src/pages/console/distribution/Invitees.vue | 167 ++++++++
 src/pages/console/order/Detail.vue          | 213 +++++-----
 src/pages/console/order/List.vue            | 155 ++++----
 src/plugins/font-awesome.ts                 |  20 +-
 src/router/console.ts                       |  18 +
 src/router/constants.ts                     |   3 +
 32 files changed, 1362 insertions(+), 252 deletions(-)
 create mode 100644 src/components/common/HelpEntry2.vue
 create mode 100644 src/i18n/zh/distribution/button.ts
 create mode 100644 src/i18n/zh/distribution/field.ts
 create mode 100644 src/i18n/zh/distribution/index.ts
 create mode 100644 src/i18n/zh/distribution/message.ts
 create mode 100644 src/i18n/zh/distribution/title.ts
 create mode 100644 src/i18n/zh/user/field.ts
 create mode 100644 src/i18n/zh/user/index.ts
 create mode 100644 src/operators/distribution/index.ts
 create mode 100644 src/operators/distribution/models.ts
 create mode 100644 src/operators/distribution/operator.ts
 create mode 100644 src/pages/console/distribution/History.vue
 create mode 100644 src/pages/console/distribution/Index.vue
 create mode 100644 src/pages/console/distribution/Invitees.vue

diff --git a/src/components/common/HelpEntry.vue b/src/components/common/HelpEntry.vue
index da42eae..8883d19 100644
--- a/src/components/common/HelpEntry.vue
+++ b/src/components/common/HelpEntry.vue
@@ -1,11 +1,16 @@
 <template>
-  <div>
-    <el-tooltip effect="dark" :content="`${$t('common.message.helpWechat')}「sunbitty」`" placement="top-start">
-      <el-button type="primary" circle size="large">
-        <font-awesome-icon icon="fa-solid fa-question" />
-      </el-button>
-    </el-tooltip>
-  </div>
+  <el-tooltip
+    effect="dark"
+    :content="`<p>${$t('common.message.helpWechat')}: yuxingzou</p><p>${$t(
+      'common.message.helpWechat2'
+    )}: sunbitty</p>`"
+    placement="top-start"
+    raw-content
+  >
+    <el-button type="primary" circle size="large">
+      <font-awesome-icon icon="fa-solid fa-question" />
+    </el-button>
+  </el-tooltip>
 </template>
 
 <script lang="ts">
diff --git a/src/components/common/HelpEntry2.vue b/src/components/common/HelpEntry2.vue
new file mode 100644
index 0000000..a6a73df
--- /dev/null
+++ b/src/components/common/HelpEntry2.vue
@@ -0,0 +1,45 @@
+<template>
+  <el-tooltip
+    effect="dark"
+    :content="`<p>${$t('common.message.helpWechat')}: yuxingzou</p><p>${$t(
+      'common.message.helpWechat2'
+    )}: sunbitty</p>`"
+    placement="top-start"
+    raw-content
+  >
+    <el-button class="button">
+      <font-awesome-icon icon="fa-solid fa-question" />
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElTooltip, ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default defineComponent({
+  name: 'HelpEntry',
+  components: {
+    ElTooltip,
+    ElButton,
+    FontAwesomeIcon
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.button {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  border: none;
+  background-color: var(--el-bg-color-page);
+  &.active,
+  &:hover,
+  &:focus {
+    background-color: var(--el-button-hover-bg-color);
+    color: var(--el-button-active-text-color);
+  }
+}
+</style>
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
index 108e963..aa08c31 100644
--- a/src/components/common/Navigator.vue
+++ b/src/components/common/Navigator.vue
@@ -24,6 +24,9 @@
           </el-button>
         </el-tooltip>
       </div>
+      <div class="link">
+        <help-entry />
+      </div>
       <div class="link">
         <el-tooltip effect="dark" :content="$t('common.nav.logOut')" placement="right">
           <el-button class="button" @click="onLogout">
@@ -48,11 +51,13 @@ import {
   ROUTE_MIDJOURNEY_HISTORY,
   ROUTE_MIDJOURNEY_INDEX
 } from '@/router/constants';
+import HelpEntry from './HelpEntry2.vue';
 
 export default defineComponent({
   name: 'Navigator',
   components: {
     ElButton,
+    HelpEntry,
     ElTooltip,
     FontAwesomeIcon
   },
diff --git a/src/components/console/SidePanel.vue b/src/components/console/SidePanel.vue
index ec5ecd6..86fc242 100644
--- a/src/components/console/SidePanel.vue
+++ b/src/components/console/SidePanel.vue
@@ -29,8 +29,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ROUTE_CONSOLE_APPLICATION_LIST, ROUTE_CONSOLE_ORDER_LIST, ROUTE_INDEX } from '@/router';
-import { ElRow, ElCol } from 'element-plus';
+import {
+  ROUTE_CONSOLE_APPLICATION_LIST,
+  ROUTE_CONSOLE_ORDER_LIST,
+  ROUTE_INDEX,
+  ROUTE_CONSOLE_DISTRIBUTION_INDEX
+} from '@/router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 interface ILink {
@@ -67,6 +71,12 @@ export default defineComponent({
           text: this.$t('console.menu.orderList'),
           name: ROUTE_CONSOLE_ORDER_LIST,
           icon: 'fa-solid fa-store'
+        },
+        {
+          key: 'distribution-index',
+          text: this.$t('console.menu.distributionIndex'),
+          name: ROUTE_CONSOLE_DISTRIBUTION_INDEX,
+          icon: 'fa-solid fa-coins'
         }
       ];
       return links;
@@ -99,7 +109,7 @@ $padding-left: 10px;
   padding-left: $padding-left;
   width: $width;
   padding-top: 50px;
-  border-right: 1px solid var(--el-border-color);
+  // border-right: 1px solid var(--el-border-color);
   height: 100%;
 }
 
diff --git a/src/i18n/zh/common/message.ts b/src/i18n/zh/common/message.ts
index 9cc9dac..620537c 100644
--- a/src/i18n/zh/common/message.ts
+++ b/src/i18n/zh/common/message.ts
@@ -5,7 +5,8 @@ export default {
   info: '温馨提示',
   free: '免费',
   startPrice: '起',
-  helpWechat: '客服微信',
+  helpWechat: '技术客服微信',
+  helpWechat2: '业务客服微信',
   remainingCount: '剩余次数',
   usedCount: '使用次数'
 };
diff --git a/src/i18n/zh/common/nav.ts b/src/i18n/zh/common/nav.ts
index 09c083a..f41b76e 100644
--- a/src/i18n/zh/common/nav.ts
+++ b/src/i18n/zh/common/nav.ts
@@ -1,6 +1,6 @@
 export default {
-  chat: '问答',
-  midjourney: 'Midjourney',
+  chat: 'AI 问答',
+  midjourney: 'AI 绘画 - Midjourney',
   editor: '编辑器',
   setting: '设置',
   home: '首页',
diff --git a/src/i18n/zh/common/title.ts b/src/i18n/zh/common/title.ts
index 83b8a84..664d9e5 100644
--- a/src/i18n/zh/common/title.ts
+++ b/src/i18n/zh/common/title.ts
@@ -6,5 +6,9 @@ export default {
   allApplications: '所有申请',
   allOrders: '所有订单',
   orderInfo: '订单信息',
-  buyMore: '购买更多'
+  buyMore: '购买更多',
+  distribution: '分销赚钱',
+  distributionHistory: '分销历史',
+  invitee: '邀请人',
+  allUsages: '调用记录'
 };
diff --git a/src/i18n/zh/console/menu.ts b/src/i18n/zh/console/menu.ts
index 8e9e965..35db215 100644
--- a/src/i18n/zh/console/menu.ts
+++ b/src/i18n/zh/console/menu.ts
@@ -4,7 +4,7 @@ export default {
   userProfile: '个人信息',
   idVerify: '实名认证',
   manageApplication: '申请管理',
-  distributionIndex: '分销推广',
+  distributionIndex: '分销赚钱',
   usageList: '调用记录',
   platformTokenIndex: '平台令牌',
   manageOrder: '订单管理'
diff --git a/src/i18n/zh/distribution/button.ts b/src/i18n/zh/distribution/button.ts
new file mode 100644
index 0000000..cb0ee32
--- /dev/null
+++ b/src/i18n/zh/distribution/button.ts
@@ -0,0 +1,4 @@
+export default {
+  detail: '查看详情',
+  withdrawal: '提现'
+};
diff --git a/src/i18n/zh/distribution/field.ts b/src/i18n/zh/distribution/field.ts
new file mode 100644
index 0000000..ae47d20
--- /dev/null
+++ b/src/i18n/zh/distribution/field.ts
@@ -0,0 +1,12 @@
+export default {
+  id: '分销ID',
+  percentage: '分成比例',
+  price: '订单金额',
+  reward: '分销奖励',
+  createdAt: '分销时间',
+  level: '级别',
+  threshold: '分销门槛',
+  inviteeId: '邀请人ID',
+  isVerified: '是否实名',
+  userId: '用户ID'
+};
diff --git a/src/i18n/zh/distribution/index.ts b/src/i18n/zh/distribution/index.ts
new file mode 100644
index 0000000..e296ff5
--- /dev/null
+++ b/src/i18n/zh/distribution/index.ts
@@ -0,0 +1,11 @@
+import field from './field';
+import title from './title';
+import message from './message';
+import button from './button';
+
+export default {
+  field,
+  title,
+  message,
+  button
+};
diff --git a/src/i18n/zh/distribution/message.ts b/src/i18n/zh/distribution/message.ts
new file mode 100644
index 0000000..97e0f79
--- /dev/null
+++ b/src/i18n/zh/distribution/message.ts
@@ -0,0 +1,13 @@
+export default {
+  deltaPriceForNextLevel: '距离下一级别还差',
+  developingWithDrawal: '提现功能正在加急开发中，敬请期待！',
+  howToWithdrawal: '请添加客服处理提现，提现需扣除 5% 的所得税，提供发票可进行抵扣',
+  technicalDetail: '技术细节',
+  distributionQrDescription: '分销二维码（内容同链接）',
+  distributionDescription:
+    '您可通过链接邀请新客户注册，该客户会永久绑定为您的下级客户，该客户在该平台的所有消费订单会按照当前分成比例返还到您的账户中，并随时可提现。',
+  distributionLinkDescription:
+    '如果客户通过该链接或二维码注册本平台，该客户将永久被绑定为您的下级客户，该客户在该平台的所有消费订单会按照当前分成比例返还到您的账户中。',
+  distributionLinkDescription2:
+    '该链接中包含您的用户 ID，客户打开链接之后您的用户 ID 将以 Cookies 形式记录到客户的浏览器，有效期七天。在七天内，如果客户扫码注册本平台，您的用户 ID 将会随着 Cookies 上传至注册服务器，该客户便可绑定成为您的下游客户。'
+};
diff --git a/src/i18n/zh/distribution/title.ts b/src/i18n/zh/distribution/title.ts
new file mode 100644
index 0000000..43eac7b
--- /dev/null
+++ b/src/i18n/zh/distribution/title.ts
@@ -0,0 +1,13 @@
+export default {
+  price: '分销订单总金额',
+  reward: '分销总奖励',
+  level: '分销级别',
+  percentage: '分成比例',
+  currentLevel: '当前级别',
+  nextLevel: '下一级别',
+  currentPercentage: '当前分成比例',
+  nextPercentage: '下级分成比例',
+  levelInfo: '级别信息',
+  distributionLink: '分销链接',
+  inviteesCount: '累计邀请人数'
+};
diff --git a/src/i18n/zh/index.ts b/src/i18n/zh/index.ts
index 098292c..4a68916 100644
--- a/src/i18n/zh/index.ts
+++ b/src/i18n/zh/index.ts
@@ -6,14 +6,18 @@ import midjourney from './midjourney';
 import chat from './chat';
 import console from './console';
 import order from './order';
+import distribution from './distribution';
+import user from './user';
 
 export default {
   chat,
+  user,
   order,
   console,
   common,
   application,
   api,
   setting,
-  midjourney
+  midjourney,
+  distribution
 };
diff --git a/src/i18n/zh/user/field.ts b/src/i18n/zh/user/field.ts
new file mode 100644
index 0000000..3ab8a8f
--- /dev/null
+++ b/src/i18n/zh/user/field.ts
@@ -0,0 +1,7 @@
+export default {
+  id: '用户ID',
+  isVerified: '是否实名',
+  nickname: '昵称',
+  username: '用户名',
+  dateJoined: '注册时间'
+};
diff --git a/src/i18n/zh/user/index.ts b/src/i18n/zh/user/index.ts
new file mode 100644
index 0000000..8333ae2
--- /dev/null
+++ b/src/i18n/zh/user/index.ts
@@ -0,0 +1,5 @@
+import field from './field';
+
+export default {
+  field
+};
diff --git a/src/layouts/Chat.vue b/src/layouts/Chat.vue
index 307287f..17294a4 100644
--- a/src/layouts/Chat.vue
+++ b/src/layouts/Chat.vue
@@ -45,7 +45,7 @@ export default defineComponent({
   .left {
     width: 60px;
     height: 100%;
-    border-right: 1px solid var(--el-border-color);
+    // border-right: 1px solid var(--el-border-color);
   }
   .main {
     height: 100%;
diff --git a/src/operators/distribution/index.ts b/src/operators/distribution/index.ts
new file mode 100644
index 0000000..2e04d2d
--- /dev/null
+++ b/src/operators/distribution/index.ts
@@ -0,0 +1,2 @@
+export * from './operator';
+export * from './models';
diff --git a/src/operators/distribution/models.ts b/src/operators/distribution/models.ts
new file mode 100644
index 0000000..eb16cea
--- /dev/null
+++ b/src/operators/distribution/models.ts
@@ -0,0 +1,54 @@
+import { IOrder } from '../order';
+
+export interface IDistributionHistory {
+  id: string;
+  user_id: string;
+  invitee_id: string;
+  order?: IOrder;
+  order_id?: string;
+  price: number;
+  reward: number;
+  percentage: number;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface IDistributionLevel {
+  id: string;
+  level: number;
+  threshold: number;
+  percentage: number;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface IDistributionStatus {
+  id: string;
+  user_id: string;
+  price: number;
+  reward: number;
+  level_id?: string;
+  level?: IDistributionLevel;
+  percentage: number;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface IDistributionStatusListResponse {
+  count: number;
+  items: IDistributionStatus[];
+}
+
+export type IDistributionStatusDetailResponse = IDistributionStatus;
+
+export interface IDistributionHistoryListResponse {
+  count: number;
+  items: IDistributionHistory[];
+}
+
+export type IDistributionHistoryDetailResponse = IDistributionHistory;
+
+export interface IDistributionLevelListResponse {
+  count: number;
+  items: IDistributionLevel[];
+}
diff --git a/src/operators/distribution/operator.ts b/src/operators/distribution/operator.ts
new file mode 100644
index 0000000..d62067b
--- /dev/null
+++ b/src/operators/distribution/operator.ts
@@ -0,0 +1,57 @@
+import { AxiosResponse } from 'axios';
+import { httpClient } from '../instance';
+import {
+  IDistributionHistoryListResponse,
+  IDistributionLevelListResponse,
+  IDistributionStatusDetailResponse,
+  IDistributionStatusListResponse
+} from './models';
+
+export interface IDistributionHistoryQuery {
+  user_id?: string;
+  offset?: number;
+  limit?: number;
+  ordering: string;
+}
+
+class DistributionHistoryService {
+  key = 'distribution-histories';
+
+  async getAll(query: IDistributionHistoryQuery): Promise<AxiosResponse<IDistributionHistoryListResponse>> {
+    return await httpClient.get(`/${this.key}/`, {
+      params: query
+    });
+  }
+}
+
+export const distributionHistoryOperator = new DistributionHistoryService();
+
+export interface IDistributionStatusQuery {
+  user_id?: string;
+}
+
+class DistributionStatusService {
+  key = 'distribution-statuses';
+
+  async getAll(query: IDistributionStatusQuery): Promise<AxiosResponse<IDistributionStatusListResponse>> {
+    return await httpClient.get(`/${this.key}/`, {
+      params: query
+    });
+  }
+
+  async initialize(): Promise<AxiosResponse<IDistributionStatusDetailResponse>> {
+    return await httpClient.post(`/${this.key}/initialize/`);
+  }
+}
+
+export const distributionStatusOperator = new DistributionStatusService();
+
+class DistributionLevelService {
+  key = 'distribution-levels';
+
+  async getAll(): Promise<AxiosResponse<IDistributionLevelListResponse>> {
+    return await httpClient.get(`/${this.key}/`);
+  }
+}
+
+export const distributionLevelOperator = new DistributionLevelService();
diff --git a/src/operators/user/models.ts b/src/operators/user/models.ts
index 2865fcf..d59f96c 100644
--- a/src/operators/user/models.ts
+++ b/src/operators/user/models.ts
@@ -1,5 +1,5 @@
 export interface IUser {
-  id?: string;
+  id: string;
   username?: string;
   first_name?: string;
   last_name?: string;
@@ -12,4 +12,9 @@ export interface IUser {
   avatar?: string;
 }
 
+export interface IUserListResponse {
+  count: number;
+  items: IUser[];
+}
+
 export interface IUserDetailResponse extends IUser {}
diff --git a/src/operators/user/operator.ts b/src/operators/user/operator.ts
index 3f6ba7b..e4c46af 100644
--- a/src/operators/user/operator.ts
+++ b/src/operators/user/operator.ts
@@ -1,12 +1,23 @@
 import { AxiosResponse } from 'axios';
 import { httpClient } from '../instance';
-import { IUserDetailResponse, IUser } from './models';
+import { IUserDetailResponse, IUser, IUserListResponse } from './models';
+
+export interface IInviteesQuery {
+  offset?: number;
+  limit?: number;
+}
 
 class UserOperator {
   async getMe(): Promise<AxiosResponse<IUserDetailResponse>> {
     return httpClient.get('/me');
   }
 
+  async getInvitees(query: IInviteesQuery): Promise<AxiosResponse<IUserListResponse>> {
+    return httpClient.get('/me/invitees', {
+      params: query
+    });
+  }
+
   async updateMe(data: IUser): Promise<AxiosResponse<IUserDetailResponse>> {
     return httpClient.put('/me', data);
   }
diff --git a/src/pages/console/application/Buy.vue b/src/pages/console/application/Buy.vue
index 5c37cb4..f0bf68a 100644
--- a/src/pages/console/application/Buy.vue
+++ b/src/pages/console/application/Buy.vue
@@ -7,9 +7,15 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="12" :offset="6">
-          <el-skeleton v-if="loading" />
-          <create-order v-else-if="application" :application="application" />
+        <el-col :span="24">
+          <el-card shadow="hover">
+            <el-row>
+              <el-col :span="12" :offset="6">
+                <el-skeleton v-if="loading" />
+                <create-order v-else-if="application" :application="application" />
+              </el-col>
+            </el-row>
+          </el-card>
         </el-col>
       </el-row>
     </el-col>
@@ -33,7 +39,8 @@ export default defineComponent({
     CreateOrder,
     ElSkeleton,
     ElRow,
-    ElCol
+    ElCol,
+    ElCard
   },
   data(): IData {
     return {
@@ -77,10 +84,10 @@ export default defineComponent({
 .panel {
   padding: 30px;
   width: calc(100% - 300px);
-  .credential {
-    .copy {
-      cursor: pointer;
-    }
+  background-color: #f3f5f6;
+
+  .el-card {
+    padding: 50px 0;
   }
 }
 
diff --git a/src/pages/console/application/List.vue b/src/pages/console/application/List.vue
index 69aa6a9..59db613 100644
--- a/src/pages/console/application/List.vue
+++ b/src/pages/console/application/List.vue
@@ -8,50 +8,52 @@
       </el-row>
       <el-row>
         <el-col :span="24">
-          <el-table v-loading="loading" :data="applications" stripe table-layout="fixed">
-            <el-table-column prop="id" :label="$t('application.field.id')" width="300px" class-name="text-center">
-              <template #default="scope">
-                <span>{{ scope.row.id }}</span>
-                <span class="copy">
-                  <copy-to-clipboard :content="scope?.row?.id" />
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('application.field.name')" width="220px">
-              <template #default="scope">
-                <span v-if="scope.row.type === applicationType.API">{{ scope.row?.api?.title }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="remaining_amount"
-              :label="$t('application.field.remainingAmount')"
-              width="120px"
-              class-name="text-center"
-            >
-              <template #default="scope">
-                <span>{{ getRemainingAmount(scope.row) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="used_amount"
-              :label="$t('application.field.usedAmount')"
-              width="120px"
-              class-name="text-center"
-            >
-              <template #default="scope">
-                <span>{{ getUsedAmount(scope.row) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column fixed="right" width="100px">
-              <template #default="scope">
-                <div class="float-right">
-                  <el-button type="primary" @click="onBuyMore(scope?.row)">
-                    {{ $t('application.button.buyMore') }}
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
+          <el-card shadow="hover">
+            <el-table v-loading="loading" :data="applications" stripe table-layout="fixed">
+              <el-table-column prop="id" :label="$t('application.field.id')" width="300px" class-name="text-center">
+                <template #default="scope">
+                  <span>{{ scope.row.id }}</span>
+                  <span class="copy">
+                    <copy-to-clipboard :content="scope?.row?.id" />
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('application.field.name')" width="220px">
+                <template #default="scope">
+                  <span v-if="scope.row.type === applicationType.API">{{ scope.row?.api?.title }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="remaining_amount"
+                :label="$t('application.field.remainingAmount')"
+                width="120px"
+                class-name="text-center"
+              >
+                <template #default="scope">
+                  <span>{{ getRemainingAmount(scope.row) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="used_amount"
+                :label="$t('application.field.usedAmount')"
+                width="120px"
+                class-name="text-center"
+              >
+                <template #default="scope">
+                  <span>{{ getUsedAmount(scope.row) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column fixed="right" width="100px">
+                <template #default="scope">
+                  <div class="float-right">
+                    <el-button type="primary" @click="onBuyMore(scope?.row)">
+                      {{ $t('application.button.buyMore') }}
+                    </el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
         </el-col>
       </el-row>
       <el-row>
@@ -76,7 +78,7 @@ import {
 } from '@/operators';
 import Pagination from '@/components/common/Pagination.vue';
 import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
-import { ElTable, ElRow, ElCol, ElTableColumn, ElButton } from 'element-plus';
+import { ElTable, ElRow, ElCol, ElTableColumn, ElButton, ElCard } from 'element-plus';
 import { ROUTE_CONSOLE_APPLICATION_BUY } from '@/router/constants';
 
 interface IData {
@@ -104,7 +106,8 @@ export default defineComponent({
     ElRow,
     ElCol,
     ElTableColumn,
-    ElButton
+    ElButton,
+    ElCard
   },
   data(): IData {
     return {
@@ -115,7 +118,7 @@ export default defineComponent({
       total: undefined,
       buying: false,
       // dynamic calculate the limit according to window height
-      limit: Math.floor((window.innerHeight - 200) / 50),
+      limit: Math.floor((window.innerHeight - 300) / 50),
       form: {
         amount: 1
       },
@@ -220,6 +223,8 @@ export default defineComponent({
 .panel {
   padding: 30px;
   width: calc(100% - 300px);
+  background-color: #f3f5f6;
+
   .title {
     font-size: 26px;
     font-weight: bold;
diff --git a/src/pages/console/distribution/History.vue b/src/pages/console/distribution/History.vue
new file mode 100644
index 0000000..5b5f2c3
--- /dev/null
+++ b/src/pages/console/distribution/History.vue
@@ -0,0 +1,190 @@
+<template>
+  <el-row class="panel">
+    <el-col :span="24">
+      <el-row>
+        <el-col :span="24">
+          <h2 class="title">{{ $t('common.title.distributionHistory') }}</h2>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-card shadow="hover">
+            <el-table v-loading="loading" :data="distributionHistories" stripe>
+              <el-table-column prop="id" :label="$t('distribution.field.id')" class-name="text-center" width="350px">
+                <template #default="scope">
+                  <span class="key">{{ scope.row.id }}</span>
+                  <span class="copy">
+                    <copy-to-clipboard :content="scope.row.id" />
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="id"
+                :label="$t('distribution.field.userId')"
+                class-name="text-center"
+                width="350px"
+              >
+                <template #default="scope">
+                  <span class="key">{{ scope.row.user_id }}</span>
+                  <span class="copy">
+                    <copy-to-clipboard :content="scope.row.user_id" />
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('distribution.field.price')" width="100px">
+                <template #default="scope">
+                  <span class="price">¥{{ scope.row?.price?.toFixed(2) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('distribution.field.reward')" width="100px">
+                <template #default="scope">
+                  <span class="description">￥{{ scope.row?.reward?.toFixed(2) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('distribution.field.percentage')" width="100px">
+                <template #default="scope">
+                  <span class="description">{{ scope.row.percentage }}%</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('distribution.field.createdAt')" width="200px">
+                <template #default="scope">
+                  <span class="created-at">{{ $dayjs.format(scope.row.created_at) }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="10" :offset="14">
+          <div class="pagination m-v-lg">
+            <pagination :current-page="page" :page-size="limit" :total="total" @change="onPageChange"> </pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Pagination from '@/components/common/Pagination.vue';
+import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
+import { ElRow, ElCol, ElTable, ElTableColumn, ElButton, ElTag, ElCard } from 'element-plus';
+import { distributionHistoryOperator, IDistributionHistory, IDistributionStatus } from '@/operators/distribution';
+
+interface IData {
+  distributionHistories: IDistributionHistory[];
+  distributionStatus: IDistributionStatus | undefined;
+  loading: boolean;
+  total: number | undefined;
+  limit: number;
+}
+
+export default defineComponent({
+  name: 'ConsoleDistributionList',
+  components: {
+    Pagination,
+    CopyToClipboard,
+    ElRow,
+    ElCol,
+    ElTable,
+    ElTableColumn,
+    ElCard
+  },
+  data(): IData {
+    return {
+      distributionHistories: [],
+      distributionStatus: undefined,
+      loading: false,
+      total: undefined,
+      limit: 10
+    };
+  },
+  computed: {
+    redirect() {
+      return this.$route.query.redirect;
+    },
+    page() {
+      return parseInt(this.$route.query.page?.toString() || '1');
+    }
+  },
+  watch: {
+    page: {
+      handler() {
+        this.onFetchData();
+      }
+    }
+  },
+  mounted() {
+    this.onFetchData();
+  },
+  methods: {
+    onPageChange(page: number) {
+      this.$router.push({
+        name: this.$route.name?.toString(),
+        query: {
+          page: page
+        }
+      });
+    },
+    onFetchData() {
+      this.loading = true;
+      Promise.all([this.onFetchDistributionHistory()]).finally(() => {
+        this.loading = false;
+      });
+    },
+    async onFetchDistributionHistory() {
+      const { data } = await distributionHistoryOperator.getAll({
+        user_id: this.$store.getters.user.id,
+        ordering: '-created_at',
+        limit: this.limit,
+        offset: (this.page - 1) * this.limit
+      });
+      this.distributionHistories = data.items;
+      this.total = data.count;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 26px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.item-mini {
+  .value {
+    font-weight: 600;
+    font-size: 40px;
+  }
+  .description {
+    color: #999;
+    font-size: 14px;
+  }
+}
+.el-table {
+  min-height: calc(100vh - 300px);
+  margin-bottom: 50px;
+}
+
+.panel {
+  padding: 30px;
+  width: calc(100% - 300px);
+  background-color: #f3f5f6;
+
+  .api-key {
+    .copy {
+      cursor: pointer;
+      margin: 0 10px;
+    }
+  }
+}
+
+.pagination {
+  float: right;
+}
+</style>
diff --git a/src/pages/console/distribution/Index.vue b/src/pages/console/distribution/Index.vue
new file mode 100644
index 0000000..149e0a4
--- /dev/null
+++ b/src/pages/console/distribution/Index.vue
@@ -0,0 +1,420 @@
+<template>
+  <el-row class="panel">
+    <el-col :span="24">
+      <el-row>
+        <el-col :span="24">
+          <h2 class="title">{{ $t('common.title.distribution') }}</h2>
+          <p class="message mb-4">
+            {{ $t('distribution.message.distributionDescription') }}
+          </p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="15">
+        <el-col :md="6" :xs="24">
+          <el-card shadow="hover" class="item-mini mb-4">
+            <el-skeleton v-if="loading" />
+            <div v-else>
+              <div class="icon-wrapper">
+                <font-awesome-icon icon="fa-solid fa-wallet" class="icon" />
+              </div>
+              <div class="text-left">
+                <p class="description">{{ $t('distribution.title.price') }}</p>
+                <p class="value">￥{{ distributionStatus?.price?.toFixed(2) }}</p>
+              </div>
+              <el-button type="primary" class="btn" @click="goHistory"
+                >{{ $t('distribution.button.detail') }}
+              </el-button>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :md="6" :xs="24">
+          <el-card shadow="hover" class="item-mini mb-4">
+            <el-skeleton v-if="loading" />
+            <div v-else>
+              <div class="icon-wrapper">
+                <font-awesome-icon icon="fa-solid fa-coins" class="icon" />
+              </div>
+              <div class="text-left">
+                <p class="description">{{ $t('distribution.title.reward') }}</p>
+                <p class="value">￥{{ distributionStatus?.reward?.toFixed(2) }}</p>
+              </div>
+              <el-tooltip effect="dark" :content="$t('distribution.message.howToWithdrawal')" placement="top">
+                <el-button type="primary" class="btn">{{ $t('distribution.button.withdrawal') }} </el-button>
+              </el-tooltip>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :md="6" :xs="24">
+          <el-card shadow="hover" class="item-mini mb-4">
+            <el-skeleton v-if="loading" />
+            <div v-else>
+              <div class="icon-wrapper">
+                <font-awesome-icon icon="fa-solid fa-percent" class="icon" />
+              </div>
+              <div class="text-left">
+                <p class="description">{{ $t('distribution.title.percentage') }}</p>
+                <p class="value">{{ distributionStatus?.level?.percentage }}%</p>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :md="6" :xs="24">
+          <el-card shadow="hover" class="item-mini mb-4">
+            <el-skeleton v-if="loading" />
+            <div v-else>
+              <div class="icon-wrapper">
+                <font-awesome-icon icon="fa-regular fa-user" class="icon" />
+              </div>
+              <div class="text-left">
+                <p class="description">{{ $t('distribution.title.inviteesCount') }}</p>
+                <p class="value">{{ inviteesCount }}</p>
+              </div>
+              <el-button type="primary" class="btn" @click="goInvitees"
+                >{{ $t('distribution.button.detail') }}
+              </el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row :gutter="15">
+        <el-col :md="12" :xs="24">
+          <el-card shadow="hover" class="distribution-info mb-4">
+            <el-skeleton v-if="loading" />
+            <div v-else>
+              <h4 class="title">
+                {{ $t('distribution.title.distributionLink') }}
+              </h4>
+              <el-divider />
+              <div class="link-wrapper">
+                <font-awesome-icon v-if="false" icon="fa-solid fa-link" class="icon" />
+                <a :href="distributionLink" class="link">
+                  {{ distributionLink }}
+                </a>
+                <copy-to-clipboard :content="distributionLink" />
+              </div>
+              <div class="qr-wrapper">
+                <qr-code v-if="distributionLink" :value="distributionLink" :size="150" class="mb-2 ml-auto mr-auto" />
+                <p>
+                  {{ $t('distribution.message.distributionQrDescription') }}
+                </p>
+              </div>
+              <p class="description">
+                {{ $t('distribution.message.distributionLinkDescription') }}
+                <span class="more">
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('distribution.message.distributionLinkDescription2')"
+                    placement="top"
+                  >
+                    {{ $t('distribution.message.technicalDetail') }}
+                  </el-tooltip>
+                </span>
+              </p>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :md="12" :xs="24">
+          <el-card shadow="hover" class="level-info mb-4">
+            <el-skeleton v-if="loading" />
+            <div v-else>
+              <h4 class="title">
+                {{ $t('distribution.title.levelInfo') }}
+              </h4>
+              <div class="clear-both overflow-hidden">
+                <div class="float-left description">
+                  <p>{{ $t('distribution.title.currentLevel') }}: L{{ distributionStatus?.level?.level }}</p>
+                  <p>
+                    {{ $t('distribution.title.currentPercentage') }}:
+                    {{ distributionLevelMap[distributionStatus?.level?.level!]?.percentage }}%
+                  </p>
+                </div>
+                <div class="float-right description">
+                  <p>{{ $t('distribution.title.nextLevel') }}: L{{ distributionStatus?.level?.level! + 1 }}</p>
+                  <p>
+                    {{ $t('distribution.title.nextPercentage') }}:
+                    {{ distributionLevelMap[distributionStatus?.level?.level! + 1]?.percentage }}%
+                  </p>
+                </div>
+              </div>
+              <el-progress
+                :text-inside="true"
+                :stroke-width="20"
+                :percentage="getPercentageForNextLevel()"
+                class="mb-2"
+              >
+              </el-progress>
+              <p class="description">
+                {{ $t('distribution.message.deltaPriceForNextLevel') }}: ￥{{ getDeltaForNextLevel() }}
+              </p>
+              <el-divider />
+              <el-table v-if="distributionLevels" :data="distributionLevels" stripe>
+                <el-table-column :label="$t('distribution.field.level')">
+                  <template #default="scope">
+                    <span class="level">L{{ scope.row?.level }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('distribution.field.threshold')">
+                  <template #default="scope">
+                    <span class="level">¥{{ scope.row?.threshold }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('distribution.field.percentage')">
+                  <template #default="scope">
+                    <span class="level">{{ scope.row?.percentage }}%</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
+import {
+  ElRow,
+  ElCol,
+  ElProgress,
+  ElTable,
+  ElTableColumn,
+  ElButton,
+  ElCard,
+  ElDivider,
+  ElInput,
+  ElTooltip,
+  ElSkeleton
+} from 'element-plus';
+import {
+  distributionLevelOperator,
+  distributionStatusOperator,
+  IDistributionLevel,
+  IDistributionStatus
+} from '@/operators/distribution';
+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';
+
+interface IData {
+  invitees: IUser[];
+  inviteesCount: number | undefined;
+  distributionLevels: IDistributionLevel[];
+  distributionStatus: IDistributionStatus | undefined;
+  loading: boolean;
+}
+
+export default defineComponent({
+  name: 'ConsoleDistributionList',
+  components: {
+    CopyToClipboard,
+    FontAwesomeIcon,
+    QrCode,
+    ElProgress,
+    ElRow,
+    ElCol,
+    ElButton,
+    ElDivider,
+    ElCard,
+    ElTooltip,
+    ElTable,
+    ElTableColumn,
+    ElSkeleton
+  },
+  data(): IData {
+    return {
+      invitees: [],
+      inviteesCount: undefined,
+      distributionLevels: [],
+      distributionStatus: undefined,
+      loading: false
+    };
+  },
+  computed: {
+    redirect() {
+      return this.$route.query.redirect;
+    },
+    page() {
+      return parseInt(this.$route.query.page?.toString() || '1');
+    },
+    distributionLevelMap() {
+      let result: {
+        [key: number]: IDistributionLevel;
+      } = {};
+      this.distributionLevels.forEach((item) => {
+        result[item.level] = item;
+      });
+      return result;
+    },
+    distributionLink() {
+      const origin = window.location.origin;
+      const newOrigin = origin.replace('data.', 'auth.');
+      return `${newOrigin}/auth/login?inviter_id=${this.$store.getters.user.id}&redirect=${origin}`;
+    }
+  },
+  watch: {
+    page: {
+      handler() {
+        this.onFetchData();
+      }
+    }
+  },
+  async mounted() {
+    this.onFetchData();
+  },
+  methods: {
+    goHistory() {
+      this.$router.push({
+        name: ROUTE_CONSOLE_DISTRIBUTION_HISTORY
+      });
+    },
+    goInvitees() {
+      this.$router.push({
+        name: ROUTE_CONSOLE_DISTRIBUTION_INVITEES
+      });
+    },
+    onPageChange(page: number) {
+      this.$router.push({
+        name: this.$route.name?.toString(),
+        query: {
+          page: page
+        }
+      });
+    },
+    getPercentageForNextLevel() {
+      const currentThreshold = this.distributionLevelMap[this.distributionStatus?.level?.level!]?.threshold;
+      const nextThreshold = this.distributionLevelMap[this.distributionStatus?.level?.level! + 1]?.threshold;
+      return Math.floor(
+        ((this.distributionStatus?.price! - currentThreshold!) / (nextThreshold! - currentThreshold!)) * 100
+      );
+    },
+    getDeltaForNextLevel() {
+      const nextThreshold = this.distributionLevelMap[this.distributionStatus?.level?.level! + 1]?.threshold;
+      return Math.floor(nextThreshold - this.distributionStatus?.price!);
+    },
+    async onFetchData() {
+      this.loading = true;
+      await distributionStatusOperator.initialize();
+      Promise.all([this.onFetchDistributionStatus(), this.onFetchDistributionLevels(), this.onFetchInvitees()]).finally(
+        () => {
+          this.loading = false;
+        }
+      );
+    },
+    async onFetchDistributionStatus() {
+      const { data } = await distributionStatusOperator.getAll({
+        user_id: this.$store.getters.user.id
+      });
+      if (data.items && data.items.length > 0) {
+        this.distributionStatus = data.items[0];
+      }
+    },
+    async onFetchDistributionLevels() {
+      const { data } = await distributionLevelOperator.getAll();
+      this.distributionLevels = data.items;
+    },
+    async onFetchInvitees() {
+      const { data } = await userOperator.getInvitees({});
+      this.invitees = data.items;
+      this.inviteesCount = data.count;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 26px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.item-mini {
+  position: relative;
+  .icon-wrapper {
+    height: 40px;
+    width: 40px;
+    line-height: 40px;
+    border-radius: 50%;
+    background-color: #eee;
+    text-align: center;
+    margin-bottom: 10px;
+    .icon {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .btn {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    border-radius: 20px;
+    transform: translateY(-50%);
+  }
+  .value {
+    font-weight: 600;
+    font-size: 30px;
+  }
+  .description {
+    color: #999;
+    font-size: 14px;
+  }
+}
+
+.level-info,
+.distribution-info {
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #333;
+  }
+  .icon {
+    margin-right: 5px;
+  }
+  .qr-wrapper {
+    padding: 15px 0;
+    p {
+      text-align: center;
+      color: #999;
+      font-size: 12px;
+    }
+  }
+
+  .link-wrapper {
+    margin-bottom: 10px;
+    .link {
+      color: var(--el-color-primary);
+      cursor: pointer;
+      text-decoration: dashed;
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .description {
+    color: #999;
+    font-size: 14px;
+    margin-bottom: 10px;
+    .more {
+      color: var(--el-color-primary);
+      cursor: pointer;
+    }
+  }
+}
+
+.panel {
+  padding: 30px;
+  width: calc(100% - 300px);
+  background-color: #f3f5f6;
+
+  .message {
+    font-size: 14px;
+    color: #666;
+  }
+}
+</style>
diff --git a/src/pages/console/distribution/Invitees.vue b/src/pages/console/distribution/Invitees.vue
new file mode 100644
index 0000000..ea53fa9
--- /dev/null
+++ b/src/pages/console/distribution/Invitees.vue
@@ -0,0 +1,167 @@
+<template>
+  <el-row class="panel">
+    <el-col :span="24">
+      <el-row>
+        <el-col :span="24">
+          <h2 class="title">{{ $t('common.title.invitee') }}</h2>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-card shadow="hover">
+            <el-table v-loading="loading" :data="invitees" stripe>
+              <el-table-column prop="id" :label="$t('user.field.id')" class-name="text-center" width="350px">
+                <template #default="scope">
+                  <span class="key">{{ scope.row.id }}</span>
+                  <span class="copy">
+                    <copy-to-clipboard :content="scope.row.id" />
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('user.field.username')" width="300px">
+                <template #default="scope">
+                  <span class="description">{{ scope.row?.username }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('user.field.nickname')" width="200px">
+                <template #default="scope">
+                  <span class="description">{{ scope.row.nickname }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('user.field.isVerified')" width="100px">
+                <template #default="scope">
+                  <el-switch :model-value="scope.row?.is_verified" />
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('user.field.dateJoined')">
+                <template #default="scope">
+                  <span class="created-at">{{ $dayjs.format(scope.row.date_joined) }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="10" :offset="14">
+          <div class="pagination m-v-lg">
+            <pagination :current-page="page" :page-size="limit" :total="total" @change="onPageChange"> </pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Pagination from '@/components/common/Pagination.vue';
+import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
+import { ElRow, ElCol, ElTable, ElTableColumn, ElCard, ElSwitch } from 'element-plus';
+import { IUser, userOperator } from '@/operators';
+
+interface IData {
+  invitees: IUser[];
+  loading: boolean;
+  total: number | undefined;
+  limit: number;
+}
+
+export default defineComponent({
+  name: 'ConsoleDistributionInvitees',
+  components: {
+    Pagination,
+    CopyToClipboard,
+    ElRow,
+    ElSwitch,
+    ElCol,
+    ElTable,
+    ElTableColumn,
+    ElCard
+  },
+  data(): IData {
+    return {
+      invitees: [],
+      loading: false,
+      total: undefined,
+      limit: 10
+    };
+  },
+  computed: {
+    redirect() {
+      return this.$route.query.redirect;
+    },
+    page() {
+      return parseInt(this.$route.query.page?.toString() || '1');
+    }
+  },
+  watch: {
+    page: {
+      handler() {
+        this.onFetchData();
+      }
+    }
+  },
+  mounted() {
+    this.onFetchData();
+  },
+  methods: {
+    onPageChange(page: number) {
+      this.$router.push({
+        name: this.$route.name?.toString(),
+        query: {
+          page: page
+        }
+      });
+    },
+    onFetchData() {
+      this.loading = true;
+      Promise.all([this.onFetchInvitees()]).finally(() => {
+        this.loading = false;
+      });
+    },
+    async onFetchInvitees() {
+      const { data } = await userOperator.getInvitees({
+        limit: this.limit,
+        offset: (this.page - 1) * this.limit
+      });
+      this.invitees = data.items;
+      this.total = data.count;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 26px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.item-mini {
+  .value {
+    font-weight: 600;
+    font-size: 40px;
+  }
+  .description {
+    color: #999;
+    font-size: 14px;
+  }
+}
+.el-table {
+  min-height: calc(100vh - 300px);
+  margin-bottom: 50px;
+}
+
+.panel {
+  padding: 30px;
+  width: calc(100% - 300px);
+  background-color: #f3f5f6;
+}
+
+.pagination {
+  float: right;
+}
+</style>
diff --git a/src/pages/console/order/Detail.vue b/src/pages/console/order/Detail.vue
index 5768237..431da98 100644
--- a/src/pages/console/order/Detail.vue
+++ b/src/pages/console/order/Detail.vue
@@ -7,107 +7,113 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="12" :offset="6">
-          <div v-if="loading" class="pt-5">
-            <el-skeleton animated />
-          </div>
-          <div v-else class="order">
-            <el-descriptions :column="1">
-              <el-descriptions-item :label="$t('order.field.id')">{{ order?.id }}</el-descriptions-item>
-              <el-descriptions-item :label="$t('order.field.description')">
-                {{ order?.description }}
-              </el-descriptions-item>
-              <el-descriptions-item
-                v-if="order?.application?.type === applicationType.API"
-                :label="$t('order.field.api')"
-              >
-                {{ order?.application?.api?.title }}
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('order.field.amount')">
-                <span v-if="order?.application?.type === applicationType.API">
-                  {{ order?.amount }}{{ $t(`api.unit.${order?.application?.api?.unit}`) }}
-                </span>
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('order.field.createdAt')">
-                {{ $dayjs.format(order?.created_at) }}
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('order.field.price')">
-                <span v-if="order?.price && order?.price > 0" class="price unfree">
-                  ¥{{ order?.price?.toFixed(2) }}
-                </span>
-                <span v-else class="price free"> {{ $t('order.message.free') }} </span>
-              </el-descriptions-item>
-              <el-descriptions-item v-if="order?.pay_way" :label="$t('order.field.payWay')">
-                <span v-if="order?.pay_way === PayWay.WechatPay">
-                  {{ $t('order.title.wechatPay') }}
-                </span>
-                <span v-if="order?.pay_way === PayWay.AliPay">
-                  {{ $t('order.title.aliPay') }}
-                </span>
-                <span v-if="order?.pay_way === PayWay.Stripe">
-                  {{ $t('order.title.stripe') }}
-                </span>
-              </el-descriptions-item>
-            </el-descriptions>
-          </div>
-        </el-col>
-      </el-row>
-      <el-row v-if="order?.state === OrderState.PAID" class="mb-5">
-        <el-col :span="12" :offset="6">
-          <el-divider border-style="dashed" />
-          <el-alert :title="$t('order.message.paidSuccessfully')" type="success" show-icon :closable="false" />
-        </el-col>
-      </el-row>
-      <el-row v-if="order?.state === OrderState.PENDING || order?.state === OrderState.FAILED">
-        <el-col :span="12" :offset="6">
-          <el-divider border-style="dashed" />
-          <div v-if="order.price && order.price > 0 && !order.pay_way" class="payways mb-4">
-            <div
-              :class="{
-                payway: true,
-                wechatpay: true,
-                active: payWay === PayWay.WechatPay
-              }"
-              @click="payWay = PayWay.WechatPay"
-            >
-              <span class="payicon wechatpay"></span>
-              {{ $t('order.title.wechatPay') }}
-            </div>
-            <div
-              v-if="false"
-              :class="{
-                payway: true,
-                alipay: true,
-                active: payWay === PayWay.AliPay
-              }"
-              @click="payWay = PayWay.AliPay"
-            >
-              <span class="payicon alipay"></span>
-              {{ $t('order.title.aliPay') }}
-            </div>
-            <div
-              v-if="false"
-              :class="{
-                payway: true,
-                stripe: true,
-                active: payWay === PayWay.Stripe
-              }"
-              @click="payWay = PayWay.Stripe"
-            >
-              <span class="payicon stripe"></span>
-              {{ $t('order.title.stripe') }}
-            </div>
-          </div>
-          <div v-if="!order?.pay_way">
-            <el-button :loading="prepaying" type="primary" size="large" class="btn-pay" @click="onPay">{{
-              $t('common.button.pay')
-            }}</el-button>
-          </div>
-          <div v-else>
-            <el-button type="primary" size="large" class="btn-repay" @click="onRepay">{{
-              $t('common.button.repay')
-            }}</el-button>
-          </div>
+        <el-col :span="24">
+          <el-card shadow="hover">
+            <el-row>
+              <el-col :span="12" :offset="6">
+                <div v-if="loading" class="pt-5">
+                  <el-skeleton animated />
+                </div>
+                <div v-else class="order">
+                  <el-descriptions :column="1">
+                    <el-descriptions-item :label="$t('order.field.id')">{{ order?.id }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('order.field.description')">
+                      {{ order?.description }}
+                    </el-descriptions-item>
+                    <el-descriptions-item
+                      v-if="order?.application?.type === applicationType.API"
+                      :label="$t('order.field.api')"
+                    >
+                      {{ order?.application?.api?.title }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('order.field.amount')">
+                      <span v-if="order?.application?.type === applicationType.API">
+                        {{ order?.amount }}{{ $t(`api.unit.${order?.application?.api?.unit}`) }}
+                      </span>
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('order.field.createdAt')">
+                      {{ $dayjs.format(order?.created_at) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('order.field.price')">
+                      <span v-if="order?.price && order?.price > 0" class="price unfree">
+                        ¥{{ order?.price?.toFixed(2) }}
+                      </span>
+                      <span v-else class="price free"> {{ $t('order.message.free') }} </span>
+                    </el-descriptions-item>
+                    <el-descriptions-item v-if="order?.pay_way" :label="$t('order.field.payWay')">
+                      <span v-if="order?.pay_way === PayWay.WechatPay">
+                        {{ $t('order.title.wechatPay') }}
+                      </span>
+                      <span v-if="order?.pay_way === PayWay.AliPay">
+                        {{ $t('order.title.aliPay') }}
+                      </span>
+                      <span v-if="order?.pay_way === PayWay.Stripe">
+                        {{ $t('order.title.stripe') }}
+                      </span>
+                    </el-descriptions-item>
+                  </el-descriptions>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row v-if="order?.state === OrderState.PAID" class="mb-5">
+              <el-col :span="12" :offset="6">
+                <el-divider border-style="dashed" />
+                <el-alert :title="$t('order.message.paidSuccessfully')" type="success" show-icon :closable="false" />
+              </el-col>
+            </el-row>
+            <el-row v-if="order?.state === OrderState.PENDING || order?.state === OrderState.FAILED">
+              <el-col :span="12" :offset="6">
+                <el-divider border-style="dashed" />
+                <div v-if="order.price && order.price > 0 && !order.pay_way" class="payways mb-4">
+                  <div
+                    :class="{
+                      payway: true,
+                      wechatpay: true,
+                      active: payWay === PayWay.WechatPay
+                    }"
+                    @click="payWay = PayWay.WechatPay"
+                  >
+                    <span class="payicon wechatpay"></span>
+                    {{ $t('order.title.wechatPay') }}
+                  </div>
+                  <div
+                    v-if="false"
+                    :class="{
+                      payway: true,
+                      alipay: true,
+                      active: payWay === PayWay.AliPay
+                    }"
+                    @click="payWay = PayWay.AliPay"
+                  >
+                    <span class="payicon alipay"></span>
+                    {{ $t('order.title.aliPay') }}
+                  </div>
+                  <div
+                    v-if="false"
+                    :class="{
+                      payway: true,
+                      stripe: true,
+                      active: payWay === PayWay.Stripe
+                    }"
+                    @click="payWay = PayWay.Stripe"
+                  >
+                    <span class="payicon stripe"></span>
+                    {{ $t('order.title.stripe') }}
+                  </div>
+                </div>
+                <div v-if="!order?.pay_way">
+                  <el-button :loading="prepaying" type="primary" size="large" class="btn-pay" @click="onPay">{{
+                    $t('common.button.pay')
+                  }}</el-button>
+                </div>
+                <div v-else>
+                  <el-button type="primary" size="large" class="btn-repay" @click="onRepay">{{
+                    $t('common.button.repay')
+                  }}</el-button>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
         </el-col>
       </el-row>
     </el-col>
@@ -132,7 +138,8 @@ import {
   ElAlert,
   ElDescriptions,
   ElDescriptionsItem,
-  ElButton
+  ElButton,
+  ElCard
 } from 'element-plus';
 import WechatPayOrder from '@/components/order/WechatPay.vue';
 import StripePayOrder from '@/components/order/StripePay.vue';
@@ -160,6 +167,7 @@ export default defineComponent({
   components: {
     ElButton,
     ElRow,
+    ElCard,
     ElCol,
     ElSkeleton,
     ElDivider,
@@ -252,6 +260,7 @@ export default defineComponent({
 .panel {
   padding: 30px;
   width: calc(100% - 300px);
+  background-color: #f3f5f6;
 
   .title {
     font-size: 26px;
diff --git a/src/pages/console/order/List.vue b/src/pages/console/order/List.vue
index 4465787..a439bdb 100644
--- a/src/pages/console/order/List.vue
+++ b/src/pages/console/order/List.vue
@@ -8,80 +8,82 @@
       </el-row>
       <el-row>
         <el-col :span="24">
-          <el-table v-loading="loading" :data="orders" stripe>
-            <el-table-column prop="id" :label="$t('order.field.id')" class-name="text-center" width="350px">
-              <template #default="scope">
-                <span class="key">{{ scope.row.id }}</span>
-                <span class="copy">
-                  <copy-to-clipboard :content="scope.row.id" />
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('order.field.price')" width="100px">
-              <template #default="scope">
-                <span class="price">¥{{ scope.row?.price?.toFixed(2) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('order.field.createdAt')" width="180px">
-              <template #default="scope">
-                <span class="created-at">{{ $dayjs.format(scope.row.created_at) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('order.field.description')" width="300px">
-              <template #default="scope">
-                <span class="description">{{ scope.row.description }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="state" :label="$t('order.field.state')" class-name="text-center">
-              <template #default="scope">
-                <span v-if="scope.row.state === OrderState?.PENDING">
-                  <el-tag type="info" class="mx-1" effect="dark">{{ $t('order.state.pending') }}</el-tag>
-                </span>
-                <span v-else-if="scope.row.state === OrderState?.PAID" class="state state-paid">
-                  <el-tag type="success" class="mx-1" effect="dark">{{ $t('order.state.paid') }}</el-tag>
-                </span>
-                <span v-else-if="scope.row.state === OrderState?.EXPIRED" class="state state-expired">
-                  <el-tag type="warning" class="mx-1" effect="dark">{{ $t('order.state.expired') }}</el-tag>
-                </span>
-                <span v-else-if="scope.row.state === OrderState?.FAILED" class="state state-failed">
-                  <el-tag type="danger" class="mx-1" effect="dark"> {{ $t('order.state.failed') }}</el-tag>
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column min-width="120px">
-              <template #default="scope">
-                <div class="float-right">
-                  <el-button
-                    v-if="scope.row.state !== OrderState.PAID"
-                    type="primary"
-                    @click="
-                      $router.push({
-                        name: 'console-order-detail',
-                        params: {
-                          id: scope.row.id
-                        }
-                      })
-                    "
-                  >
-                    {{ $t('order.button.continuePay') }}
-                  </el-button>
-                  <el-button
-                    v-else
-                    @click="
-                      $router.push({
-                        name: 'console-order-detail',
-                        params: {
-                          id: scope.row.id
-                        }
-                      })
-                    "
-                  >
-                    {{ $t('order.button.checkDetail') }}
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
+          <el-card shadow="hover">
+            <el-table v-loading="loading" :data="orders" stripe>
+              <el-table-column prop="id" :label="$t('order.field.id')" class-name="text-center" width="350px">
+                <template #default="scope">
+                  <span class="key">{{ scope.row.id }}</span>
+                  <span class="copy">
+                    <copy-to-clipboard :content="scope.row.id" />
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('order.field.price')" width="100px">
+                <template #default="scope">
+                  <span class="price">¥{{ scope.row?.price?.toFixed(2) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('order.field.createdAt')" width="180px">
+                <template #default="scope">
+                  <span class="created-at">{{ $dayjs.format(scope.row.created_at) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('order.field.description')" width="300px">
+                <template #default="scope">
+                  <span class="description">{{ scope.row.description }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" :label="$t('order.field.state')" class-name="text-center">
+                <template #default="scope">
+                  <span v-if="scope.row.state === OrderState?.PENDING">
+                    <el-tag type="info" class="mx-1" effect="dark">{{ $t('order.state.pending') }}</el-tag>
+                  </span>
+                  <span v-else-if="scope.row.state === OrderState?.PAID" class="state state-paid">
+                    <el-tag type="success" class="mx-1" effect="dark">{{ $t('order.state.paid') }}</el-tag>
+                  </span>
+                  <span v-else-if="scope.row.state === OrderState?.EXPIRED" class="state state-expired">
+                    <el-tag type="warning" class="mx-1" effect="dark">{{ $t('order.state.expired') }}</el-tag>
+                  </span>
+                  <span v-else-if="scope.row.state === OrderState?.FAILED" class="state state-failed">
+                    <el-tag type="danger" class="mx-1" effect="dark"> {{ $t('order.state.failed') }}</el-tag>
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column min-width="120px">
+                <template #default="scope">
+                  <div class="float-right">
+                    <el-button
+                      v-if="scope.row.state !== OrderState.PAID"
+                      type="primary"
+                      @click="
+                        $router.push({
+                          name: 'console-order-detail',
+                          params: {
+                            id: scope.row.id
+                          }
+                        })
+                      "
+                    >
+                      {{ $t('order.button.continuePay') }}
+                    </el-button>
+                    <el-button
+                      v-else
+                      @click="
+                        $router.push({
+                          name: 'console-order-detail',
+                          params: {
+                            id: scope.row.id
+                          }
+                        })
+                      "
+                    >
+                      {{ $t('order.button.checkDetail') }}
+                    </el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
         </el-col>
       </el-row>
       <el-row>
@@ -120,7 +122,8 @@ export default defineComponent({
     ElTable,
     ElTableColumn,
     ElButton,
-    ElTag
+    ElTag,
+    ElCard
   },
   data(): IData {
     return {
@@ -185,6 +188,8 @@ export default defineComponent({
 .panel {
   padding: 30px;
   width: calc(100% - 300px);
+  background-color: #f3f5f6;
+
   .title {
     font-size: 26px;
     font-weight: bold;
diff --git a/src/plugins/font-awesome.ts b/src/plugins/font-awesome.ts
index 5ffea91..e44f162 100644
--- a/src/plugins/font-awesome.ts
+++ b/src/plugins/font-awesome.ts
@@ -42,7 +42,16 @@ import {
   faTriangleExclamation as faSolidTriangleExclamation,
   faPenToSquare as faSolidPenToSquare,
   faXmark as faSolidXmark,
-  faCube as faSolidCube
+  faCoins as faSolidCoins,
+  faRotateLeft as faSolidRotateLeft,
+  faWallet as faSolidWallet,
+  faCartShopping as faSolidCartShopping,
+  faPercent as faSolidPercent,
+  faCube as faSolidCube,
+  faShieldHalved as faSolidShieldHalved,
+  faCubes as faSolidCubes,
+  faLink as faSolidLink,
+  faWandMagic as faSolidWandMagic
 } from '@fortawesome/free-solid-svg-icons';
 library.add(faRegularCopy);
 library.add(faSolidStore);
@@ -85,3 +94,12 @@ library.add(faSolidArrowLeft);
 library.add(faSolidChevronLeft);
 library.add(faSolidCircleInfo);
 library.add(faSolidHashtag);
+library.add(faSolidCoins);
+library.add(faSolidRotateLeft);
+library.add(faSolidWallet);
+library.add(faSolidCartShopping);
+library.add(faSolidPercent);
+library.add(faSolidShieldHalved);
+library.add(faSolidCubes);
+library.add(faSolidLink);
+library.add(faSolidWandMagic);
diff --git a/src/router/console.ts b/src/router/console.ts
index da5891b..eeaf5b4 100644
--- a/src/router/console.ts
+++ b/src/router/console.ts
@@ -1,6 +1,9 @@
 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
@@ -39,6 +42,21 @@ 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')
     }
   ]
 };
diff --git a/src/router/constants.ts b/src/router/constants.ts
index b3649e2..a9218e1 100644
--- a/src/router/constants.ts
+++ b/src/router/constants.ts
@@ -15,3 +15,6 @@ 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';