feat: 礼包充值

.vscode/settings.json

@@ -15,6 +15,6 @@
     "src/locales",
     "src/locales/langs"
   ],
-  "i18n-ally.sourceLanguage": "zh-cn",
+  "i18n-ally.sourceLanguage": "en",
   "i18n-ally.keystyle": "nested",
 }

src/apis/equity.ts

+import { request } from '@/utils/request'
+
+export function fetchUserEquityInfo<T>() {
+  return request.post<T>('/equityRest/getCurrentEquity.json')
+}
+
+export function fetchCreateEquityOrder<T>(payload: object) {
+  return request.post<T>('/equityOrderRest/createOrder.json', payload)
+}
+
+export function fetchGetEquityPayQrCode<T>(payload: object) {
+  return request.post<T>('/payRest/pay.json', null, { params: payload })
+}
+
+export function fetchGetPayStatus<T>(payOrderSn: string) {
+  return request.post<T>(`/payRest/orderStatus.json?payOrderSn=${payOrderSn}`)
+}

src/layout/components/sidebar/sidebar.vue

@@ -69,6 +69,13 @@ watchEffect(() => {
   currentMenuValue.value = (currentRoute.meta.belong as string) || ''
 })
 
+/* created */
+;(function () {
+  if (userStore.isLogin) {
+    userStore.fetchUpdateEquityInfo()
+  }
+})()
+
 function handleToPersonAppSettingPage() {
   router.push({ name: 'PersonalAppSetting' })
 }
@@ -94,10 +101,14 @@ function handleToLogin() {
 function handleMenuValueChange(key: string) {
   router.push({ name: key })
 }
+
+function handleNavigateToEquity() {
+  router.push({ name: 'Equity' })
+}
 </script>
 
 <template>
-  <div class="flex h-full flex-col justify-between overflow-hidden">
+  <div class="flex h-full min-h-[300px] flex-col justify-between overflow-y-auto overflow-x-hidden">
     <div class="flex flex-1 flex-col overflow-hidden">
       <div class="bg-svg-page_logo mx-auto flex h-[50px] w-full shrink-0 bg-contain bg-center bg-no-repeat" />
 
@@ -126,6 +137,49 @@ function handleMenuValueChange(key: string) {
       </n-scrollbar>
     </div>
 
+    <div>
+      <div v-if="userStore.isLogin" class="px-[12px]">
+        <div class="flex items-center justify-between">
+          <span class="flex-1 overflow-hidden text-nowrap text-[14px]">
+            <i class="iconfont icon-gift text-[14px] text-[#000dff]"></i>
+
+            <n-ellipsis>
+              <span class="ml-[5px] truncate">{{ userStore.equityInfo.points || '-' }}</span>
+            </n-ellipsis>
+          </span>
+
+          <span
+            class="flex cursor-pointer items-center text-[12px] text-[#0B7DFF] transition hover:text-[#085CBB]"
+            @click="handleNavigateToEquity"
+          >
+            <span class="mr-[5px]">
+              <n-ellipsis class="!max-w-[80px]"> {{ t('equity_module.more_rights_and_interests') }}</n-ellipsis></span
+            >
+            <i class="iconfont icon-left rotate-180 text-[12px]"></i>
+          </span>
+        </div>
+
+        <template v-if="userStore.equityInfo.equityLevel === 'normal'">
+          <div
+            class="mt-[15px] w-fit rounded-[5px] bg-gradient-to-b from-[#EBEBEB] to-[#CDCDCD] px-[8px] py-[4px] text-[14px] text-[#001C31]"
+          >
+            {{ userStore.equityLevelName }}
+          </div>
+        </template>
+        <template
+          v-else-if="
+            userStore.equityInfo.equityLevel === 'professional' || userStore.equityInfo.equityLevel === 'ultimate'
+          "
+        >
+          <div
+            class="mt-[15px] w-fit rounded-[5px] px-[8px] py-[4px] text-[14px] text-[#482801]"
+            style="background-image: linear-gradient(45deg, #ffdf97, #ffef9b, #ffd493)"
+          >
+            {{ userStore.equityLevelName }}
+          </div>
+        </template>
+      </div>
+
       <div class="mb-[20px] mt-6">
         <div>
           <n-dropdown
@@ -160,6 +214,7 @@ function handleMenuValueChange(key: string) {
       </div> -->
       </div>
     </div>
+  </div>
 </template>
 
 <style lang="scss">

src/layout/index.vue

@@ -31,7 +31,7 @@ watchEffect(() => {
 
     <NLayoutContent class="bg-[#f3f6f9]! flex-1">
       <main
-        class="main-content-container m-auto box-border h-full max-w-[1669px] transition-[padding] duration-300 ease-in-out"
+        class="main-content-container m-auto box-border h-full w-full overflow-x-auto transition-[padding] duration-300 ease-in-out"
         :class="{ 'px-6': isShowMainContentContainerPadding, 'py-4': isShowMainContentContainerPadding }"
       >
         <RouterView v-slot="{ Component }">

src/locales/langs/en.yaml

@@ -499,8 +499,34 @@ personal_settings_module:
   file_type_restriction_doc: 'Only.pdf,.txt, .md, .doc, and.docx file types are supported'
   the_file_type_cannot_be_uploaded: 'The file type cannot be uploaded'
 
-equity_Module:
+equity_module:
   file_empty_tip: 'The file content cannot be empty'
+  more_rights_and_interests: 'More rights and interests'
+  basic_version: 'Basic version'
+  professional_version: 'Professional version'
+  flagship_version: 'Flagship version'
+  enterprise_version: 'Enterprise version'
+  time_limit: 'Time limit'
+  integral_quantity: 'Integral quantity'
+  integral_quantity_doc: 'Running applications or using large models will result in integral consumption. The integral consumed by each run is calculated according to the actual model used, and the integral consumed by different models is different'
+  points: 'Points'
+  points2: 'Points'
+  top_up_immediately: 'Top up immediately'
+  number_of_applications: 'Number of applications'
+  number_of_applications_doc: 'Total number of applications created'
+  individual: 'Individual'
+  number_of_knowledge_base_files: 'umber of knowledge base files'
+  number_of_knowledge_base_files_doc: 'The total number of uploaded learning and training files'
+  gift_package_list_title: 'Choose from a selection of value packages'
+  current_version: 'Current version'
+  current_version_is_higher: 'Current version is higher'
+  free_use: 'Free use'
+  month: 'Month'
+  year: 'Year'
+  open_immediately: 'Open immediately'
+  consultation_for_details: 'Consultation for details'
+  consult_now: 'Consult now'
+  upper_application_limit: 'Upper application limit'
 
 order_manage_module:
   package_name: 'PackageName'

src/locales/langs/zh-cn.yaml

@@ -497,8 +497,34 @@ personal_settings_module:
   file_type_restriction_doc: '只支持.pdf， .txt，.md，.doc，.docx文件类型'
   the_file_type_cannot_be_uploaded: '暂不支持上传该文件类型'
 
-equity_Module:
+equity_module:
   file_empty_tip: '文件内容不能为空'
+  more_rights_and_interests: '更多权益'
+  basic_version: '基础版'
+  professional_version: '专业版'
+  flagship_version: '旗舰版'
+  enterprise_version: '企业版'
+  time_limit: '期限'
+  integral_quantity: '积分数量'
+  integral_quantity_doc: '运行应用或者使用大模型会产生积分消耗，每次运行消耗的积分根据实际使用的模型计算，不同模型消耗的积分不一致不同'
+  points: '分'
+  points2: '积分'
+  top_up_immediately: '立即充值'
+  number_of_applications: '应用数量'
+  number_of_applications_doc: '创建应用的总数量'
+  individual: '个'
+  number_of_knowledge_base_files: '知识库文件数量'
+  number_of_knowledge_base_files_doc: '上传学习和训练文件的总数量'
+  gift_package_list_title: '精选超值礼包任选'
+  current_version: '当前版本'
+  current_version_is_higher: '当前版本较高'
+  free_use: '免费使用'
+  month: '月'
+  year: '年'
+  open_immediately: '立即开通'
+  consultation_for_details: '详情咨询'
+  consult_now: '立即咨询'
+  upper_application_limit: '应用上限'
 
 order_manage_module:
   package_name: '套餐名称'

src/locales/langs/zh-hk.yaml

@@ -497,8 +497,35 @@ personal_settings_module:
   file_type_restriction_doc: '只支持.pdf， .txt，.md，.doc，.docx文件類型'
   the_file_type_cannot_be_uploaded: '暫不支持上傳該文件類型'
 
-equity_Module:
+equity_module:
   file_empty_tip: '文件內容不能為空'
+  more_rights_and_interests: '更多權益'
+  basic_version: '基礎版'
+  professional_version: '專業版'
+  flagship_version: '旗艦版'
+  enterprise_version: '企業版'
+  time_limit: '期限'
+  integral_quantity: '積分數量'
+  integral_quantity_doc: '運行應用或者使用大模型會產生積分消耗，每次運行消耗的積分根據實際使用的模型計算，不同模型消耗的積分不一致不同'
+  points: '分'
+  points2: '積分'
+  top_up_immediately: '立即充值'
+  number_of_applications: '應用數量'
+  number_of_applications_doc: '創建應用的總數量'
+  individual: '個'
+  number_of_knowledge_base_files: '知識庫文件數量'
+  number_of_knowledge_base_files_doc: '上傳學習和訓練文件的總數量'
+  gift_package_list_title: '精選超值禮包任選'
+  current_version: '當前版本'
+  current_version_is_higher: '當前版本較高'
+  free_use: '免費使用'
+  month: '月'
+  year: '年'
+  open_immediately: '立即開通'
+  consultation_for_details: '詳情咨詢'
+  consult_now: '立即咨詢'
+  upper_application_limit: '應用上限'
+
 
 order_manage_module:
   package_name: '套餐名稱'

src/router/modules/equity.ts

+import { type RouteRecordRaw } from 'vue-router'
+import Layout from '@/layout/index.vue'
+
+export default [
+  {
+    path: '/equity',
+    meta: {
+      rank: 1001,
+      title: '',
+    },
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'Equity',
+        meta: {
+          rank: 1001,
+          title: 'common_module.equity',
+        },
+        component: () => import('@/views/equity/equity.vue'),
+      },
+    ],
+  },
+] as RouteRecordRaw[]

src/store/modules/user.ts

 import { defineStore } from 'pinia'
 import { ss } from '@/utils/storage'
-import { type UserState, type UserInfo, UserStoreStorageKeyEnum } from '../types/user'
+import { type UserState, type UserInfo, UserStoreStorageKeyEnum, type EquityInfo } from '../types/user'
 import { fetchUserDetailInfo } from '@/apis/user'
+import { fetchUserEquityInfo } from '@/apis/equity'
+import { useI18n } from 'vue-i18n'
 
 export function createDefaultUserInfoFactory(): UserInfo {
   return {
@@ -19,7 +21,32 @@ export const useUserStore = defineStore('user-store', {
     isLogin: ss.get(UserStoreStorageKeyEnum.isLogin),
     token: ss.get(UserStoreStorageKeyEnum.token) || '',
     userInfo: ss.get(UserStoreStorageKeyEnum.userInfo) || createDefaultUserInfoFactory(),
+    equityInfo: {
+      usedAgentCount: 0,
+      maxAgentCount: 0,
+      usedKnowledgeCount: 0,
+      maxKnowledgeCount: 0,
+      points: 0,
+      equityLevel: 'normal',
+      expireTime: '',
+    },
   }),
+  getters: {
+    equityLevelName(): string {
+      const { t } = useI18n()
+
+      switch (this.equityInfo.equityLevel) {
+        case 'normal':
+          return t('equity_module.basic_version')
+        case 'professional':
+          return t('equity_module.professional_version')
+        case 'ultimate':
+          return t('equity_module.flagship_version')
+        default:
+          return '-'
+      }
+    },
+  },
   actions: {
     async logout() {
       this.isLogin = false
@@ -51,5 +78,10 @@ export const useUserStore = defineStore('user-store', {
         this.userInfo = res.data
       })
     },
+    fetchUpdateEquityInfo() {
+      return fetchUserEquityInfo<EquityInfo>().then((res) => {
+        this.equityInfo = res.data
+      })
+    },
   },
 })

src/store/types/user.ts

@@ -7,10 +7,21 @@ export interface UserInfo {
   email: string
 }
 
+export interface EquityInfo {
+  usedAgentCount: number
+  maxAgentCount: number
+  usedKnowledgeCount: number
+  maxKnowledgeCount: number
+  points: number
+  equityLevel: 'normal' | 'professional' | 'ultimate'
+  expireTime: string
+}
+
 export interface UserState {
   isLogin: boolean
   token: string
   userInfo: UserInfo
+  equityInfo: EquityInfo
 }
 
 export enum UserStoreStorageKeyEnum {

src/views/equity/components/point-recharge-modal.vue

+<script setup lang="ts">
+import { ref } from 'vue'
+
+// import { useI18n } from 'vue-i18n'
+
+const isShowPointRechargeModal = defineModel<boolean>('isShowPointRechargeModal', { default: false })
+
+// const { t } = useI18n()
+
+const currentSelectPackage = ref<1 | 2 | 3>(1) // 1：100积分 2：350积分 3：600积分
+const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('wechatpay')
+const isPaymentSuccess = ref(true)
+
+function handlePaymentMethodSwitch(method: 'alipay' | 'wechatpay') {
+  currentPaymentMethod.value = method
+}
+
+function handlePackageSwitch(key: typeof currentSelectPackage.value) {
+  currentSelectPackage.value = key
+}
+</script>
+
+<template>
+  <n-modal v-model:show="isShowPointRechargeModal" preset="card" title="积分充值" size="medium" class="!w-[850px]">
+    <div>
+      <ul class="mt-[10px] flex h-[255px]">
+        <li
+          class="mr-[19px] flex-1 rounded-[10px] border text-center transition last:mr-0"
+          :class="currentSelectPackage === 1 ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
+          :style="
+            currentSelectPackage === 1
+              ? { backgroundImage: 'linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)' }
+              : { backgroundImage: 'linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)' }
+          "
+        >
+          <div class="font-600 mt-[32px] text-[16px] text-[#482801]">100积分</div>
+          <div class="font-600 mt-[10px] text-[24px] text-[#482801]">
+            9.9 <span class="text-[14px] text-[#482801]">HK$</span>
+          </div>
+
+          <button
+            class="flex-center mx-auto mt-[12px] flex h-[34px] w-[86px] rounded-[5px] bg-[#FDC386] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
+            :style="
+              currentSelectPackage === 1 ? { backgroundImage: 'linear-gradient(to bottom, #FFF598, #FFAA00)' } : {}
+            "
+            @click="handlePackageSwitch(1)"
+          >
+            立即购买
+          </button>
+
+          <ul class="ml-[20px] mt-[26px]">
+            <li
+              class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
+              :class="currentSelectPackage === 1 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
+            >
+              获得100积分，用于和AI互动行动
+            </li>
+            <li
+              class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
+              :class="currentSelectPackage === 1 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
+            >
+              无期限，用完即止
+            </li>
+          </ul>
+        </li>
+
+        <li
+          class="mr-[19px] flex-1 rounded-[10px] border border-[#F4DEC5] text-center last:mr-0"
+          :class="currentSelectPackage === 2 ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
+          :style="
+            currentSelectPackage === 2
+              ? { backgroundImage: 'linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)' }
+              : { backgroundImage: 'linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)' }
+          "
+        >
+          <div class="font-600 mt-[32px] text-[16px] text-[#482801]">350积分</div>
+          <div class="font-600 mt-[10px] text-[24px] text-[#482801]">
+            29.9 <span class="text-[14px] text-[#482801]">HK$</span>
+          </div>
+
+          <button
+            class="flex-center mx-auto mt-[12px] flex h-[34px] w-[86px] rounded-[5px] bg-[#FDC386] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
+            :style="
+              currentSelectPackage === 2 ? { backgroundImage: 'linear-gradient(to bottom, #FFF598, #FFAA00)' } : {}
+            "
+            @click="handlePackageSwitch(2)"
+          >
+            立即购买
+          </button>
+
+          <ul class="ml-[20px] mt-[26px]">
+            <li
+              class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
+              :class="currentSelectPackage === 2 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
+            >
+              获得350积分，用于和AI互动行动
+            </li>
+            <li
+              class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
+              :class="currentSelectPackage === 2 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
+            >
+              无期限，用完即止
+            </li>
+          </ul>
+        </li>
+
+        <li
+          class="mr-[19px] flex-1 rounded-[10px] border border-[#F4DEC5] text-center last:mr-0"
+          :class="currentSelectPackage === 3 ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
+          :style="
+            currentSelectPackage === 3
+              ? { backgroundImage: 'linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)' }
+              : { backgroundImage: 'linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)' }
+          "
+        >
+          <div class="font-600 mt-[32px] text-[16px] text-[#482801]">600积分</div>
+          <div class="font-600 mt-[10px] text-[24px] text-[#482801]">
+            49.9 <span class="text-[14px] text-[#482801]">HK$</span>
+          </div>
+
+          <button
+            class="flex-center mx-auto mt-[12px] flex h-[34px] w-[86px] rounded-[5px] bg-[#FDC386] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
+            :style="
+              currentSelectPackage === 3 ? { backgroundImage: 'linear-gradient(to bottom, #FFF598, #FFAA00)' } : {}
+            "
+            @click="handlePackageSwitch(3)"
+          >
+            立即购买
+          </button>
+
+          <ul class="ml-[20px] mt-[26px]">
+            <li
+              class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
+              :class="currentSelectPackage === 3 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
+            >
+              获得350积分，用于和AI互动行动
+            </li>
+            <li
+              class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
+              :class="currentSelectPackage === 3 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
+            >
+              无期限，用完即止
+            </li>
+          </ul>
+        </li>
+      </ul>
+
+      <div class="mt-[28px] flex items-center justify-center">
+        <h4 class="mr-[14px] text-[14px]">选择充值方式：</h4>
+        <ul class="flex select-none items-center">
+          <li
+            class="mr-[12px] flex cursor-pointer items-center rounded-[5px] border border-[#999999] px-[16px] py-[6px] text-[14px] transition"
+            :class="currentPaymentMethod === 'alipay' ? '!border-[#000DFF]' : ''"
+            @click="handlePaymentMethodSwitch('alipay')"
+          >
+            <img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
+            <span>支付宝</span>
+          </li>
+          <li
+            class="mr-[12px] flex cursor-pointer items-center rounded-[5px] border border-[#999999] px-[16px] py-[6px] text-[14px] text-[#333] transition"
+            :class="currentPaymentMethod === 'wechatpay' ? '!border-[#000DFF]' : ''"
+            @click="handlePaymentMethodSwitch('wechatpay')"
+          >
+            <img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
+            <span>微信</span>
+          </li>
+        </ul>
+      </div>
+
+      <div class="mt-[26px] flex justify-center">
+        <div class="relative">
+          <n-qr-code class="align-bottom" value="https://www.naiveui.com/" :size="120" :padding="0" />
+          <Transition name="mask">
+            <div v-show="isPaymentSuccess" class="flex-center absolute inset-0 flex bg-[rgba(0,0,0,0.6)]">
+              <div
+                class="flex-center flex h-[50px] w-[50px] rounded-full border-[4px] border-solid border-[#fff] bg-[#52c41a]"
+              >
+                <i class="iconfont icon-queren font-600 text-[28px] text-white"></i>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+
+      <div class="mt-[10px] flex items-center justify-center">
+        <!-- <img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
+        <span class="font-600 text-[16px]">支付宝扫码支付<span class="text-[24px] text-[#F25744]">9.9</span>HK$</span> -->
+
+        <img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
+        <span class="font-600 text-[16px]">微信扫码支付<span class="text-[24px] text-[#F25744]">9.9</span>HK$</span>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<style lang="scss" scoped>
+.mask-enter-active,
+.mask-leave-active {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+}
+
+.mask-enter-from,
+.mask-leave-to {
+  opacity: 0;
+}
+</style>

src/views/equity/equity.vue

+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import GiftPackList from './components/gift-pack-list.vue'
+import PointRechargeModal from './components/point-recharge-modal.vue'
+import PaySidebar from './components/pay-sidebar.vue'
+import { useUserStore } from '@/store/modules/user'
+import { formatDateTime } from '@/utils/date-formatter'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const userStore = useUserStore()
+
+const isShowPointRechargeModal = ref(false)
+const currentSelectVersion = ref<
+  'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null
+>(null)
+
+const equityInfo = computed(() => {
+  return userStore.equityInfo
+})
+
+// function handlePointRecharge() {
+//   currentSelectVersion.value = null
+
+//   isShowPointRechargeModal.value = true
+// }
+</script>
+
+<template>
+  <div class="flex h-full min-w-[1200px] overflow-x-auto">
+    <div class="relative mr-[28px] flex-1 overflow-hidden overflow-y-auto rounded-[20px] bg-white p-[38px] pr-0">
+      <n-scrollbar>
+        <div class="pr-[38px]">
+          <span
+            class="absolute right-[-30px] top-1/2 inline-block h-[30px] w-[30px] -translate-x-1/3 -translate-y-1/2 rotate-45 rounded-[6px] bg-[#f3f6f9]"
+          ></span>
+
+          <div class="flex items-end">
+            <h2 class="font-600 mr-[10px] text-[18px]">{{ userStore.equityLevelName }}</h2>
+            <div class="text-[12px] text-[#999]">
+              {{ t('equity_module.time_limit') }}：<span class="text-[12px] text-[#333]">{{
+                formatDateTime(equityInfo.expireTime)
+              }}</span>
+            </div>
+          </div>
+
+          <div
+            class="mt-[20px] grid grid-flow-row-dense gap-[20px]"
+            style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"
+          >
+            <section
+              class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
+            >
+              <div>
+                <div class="flex">
+                  <img class="h-[44px] w-[44px]" src="@/assets/images/equity/gift.png" alt="integral_quantity" />
+                  <div class="font-600 ml-[14px] flex items-center">
+                    <span class="text-[16px]">{{ t('equity_module.integral_quantity') }}</span>
+                    <n-popover trigger="hover" :width="400">
+                      <template #trigger>
+                        <i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
+                      </template>
+                      <span>
+                        {{ t('equity_module.integral_quantity_doc') }}
+                      </span>
+                    </n-popover>
+                  </div>
+                </div>
+                <div class="ml-[58px] mt-[4px] flex items-end">
+                  <div class="font-600 text-[24px]"><n-number-animation :from="0" :to="equityInfo.points" /></div>
+                  <span class="font-600 mb-[3px] ml-[7px] text-[14px]">{{ t('equity_module.points') }}</span>
+                </div>
+              </div>
+
+              <!-- <div
+                class="flex cursor-pointer select-none items-center justify-end text-[15px] text-[#0B7DFF]"
+                @click="handlePointRecharge"
+              >
+                <span>{{ t('equity_module.top_up_immediately') }}</span>
+                <i class="iconfont icon-left ml-[2px] inline-block rotate-180 text-[12px]"></i>
+              </div> -->
+            </section>
+            <section
+              class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
+            >
+              <div class="flex">
+                <img class="h-[44px] w-[44px]" src="@/assets/images/equity/applications.png" alt="applications" />
+
+                <div class="font-600 ml-[14px] flex items-center">
+                  <span class="text-[16px]">{{ t('equity_module.number_of_applications') }}</span>
+                  <n-popover trigger="hover">
+                    <template #trigger>
+                      <i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
+                    </template>
+                    <span>{{ t('equity_module.number_of_applications_doc') }}</span>
+                  </n-popover>
+                </div>
+              </div>
+
+              <div>
+                <div class="mb-[13px] text-[14px]">
+                  <n-number-animation :from="0" :to="equityInfo.usedAgentCount" />
+                  <span>/{{ equityInfo.maxAgentCount }} {{ t('equity_module.individual') }}</span>
+                </div>
+                <div>
+                  <n-progress
+                    type="line"
+                    :percentage="(equityInfo.usedAgentCount / equityInfo.maxAgentCount) * 100"
+                    :show-indicator="false"
+                    :height="6"
+                  />
+                </div>
+              </div>
+            </section>
+            <section
+              class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
+            >
+              <div class="flex">
+                <img class="h-[44px] w-[44px]" src="@/assets/images/equity/knowledge-base.png" alt="knowledge-base" />
+
+                <div class="font-600 ml-[14px] flex items-center">
+                  <span class="text-[16px]">{{ t('equity_module.number_of_knowledge_base_files') }}</span>
+                  <n-popover trigger="hover">
+                    <template #trigger>
+                      <i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
+                    </template>
+                    <span>{{ t('equity_module.number_of_knowledge_base_files_doc') }}</span>
+                  </n-popover>
+                </div>
+              </div>
+
+              <div>
+                <div class="mb-[13px] text-[14px]">
+                  <n-number-animation :from="0" :to="equityInfo.usedKnowledgeCount" />
+                  <span>/{{ equityInfo.maxKnowledgeCount }} {{ t('equity_module.individual') }}</span>
+                </div>
+                <div>
+                  <n-progress
+                    type="line"
+                    :percentage="(equityInfo.usedKnowledgeCount / equityInfo.maxKnowledgeCount) * 100"
+                    :show-indicator="false"
+                    :height="6"
+                  />
+                </div>
+              </div>
+            </section>
+          </div>
+
+          <GiftPackList v-model:current-select-version="currentSelectVersion" />
+        </div>
+      </n-scrollbar>
+    </div>
+
+    <div class="relative w-[360px]">
+      <span
+        class="absolute left-0 top-1/2 inline-block h-[30px] w-[30px] -translate-x-1/3 -translate-y-1/2 rotate-45 rounded-[6px] bg-white"
+      ></span>
+
+      <div class="absolute inset-0 rounded-[20px] bg-white">
+        <PaySidebar :current-select-version="currentSelectVersion" />
+      </div>
+    </div>
+
+    <PointRechargeModal v-model:is-show-point-recharge-modal="isShowPointRechargeModal" />
+  </div>
+</template>

src/views/home/components/footer-operation.vue

@@ -228,7 +228,7 @@ function handleFileUpload(e: Event) {
     }
 
     if (file.size === 0) {
-      window.$message.warning(t('equity_Module.file_empty_tip'))
+      window.$message.warning(t('equity_module.file_empty_tip'))
       return
     } else if (file.size > 1024 * 1024 * 10) {
       window.$message.warning(t('common_module.file_size_limit', { size: '10MB' }))

src/views/home/components/message-item.vue

@@ -34,12 +34,12 @@ const name = computed(() => {
     <div class="flex">
       <img class="h-[36px] w-[36px] rounded-[6px] object-cover" :src="avatarUrl" alt="Avatar" />
 
-      <div class="ml-[11px]">
+      <div class="ml-[11px] overflow-hidden">
         <div class="mb-[7px] text-[12px] text-[#999]">
           {{ name }}
         </div>
         <div
-          class="box-content min-h-[21px] min-w-[10px] rounded-[10px] border border-[#9EA3FF] px-[15px] py-[14px] text-justify"
+          class="box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] px-[15px] py-[14px] text-justify"
           :class="{
             'bg-[#777EF9]': isAgentMessage,
             'text-[#fff]': isAgentMessage,

types/locales.d.ts

@@ -514,8 +514,34 @@ declare namespace I18n {
       the_file_type_cannot_be_uploaded: string
     }
 
-    equity_Module: {
+    equity_module: {
       file_empty_tip: string
+      more_rights_and_interests: string
+      basic_version: string
+      professional_version: string
+      flagship_version: string
+      enterprise_version: string
+      time_limit: string
+      integral_quantity: string
+      integral_quantity_doc: string
+      points: string
+      points2: string
+      top_up_immediately: string
+      number_of_applications: string
+      number_of_applications_doc: string
+      individual: string
+      number_of_knowledge_base_files: string
+      number_of_knowledge_base_files_doc: string
+      gift_package_list_title: string
+      current_version: string
+      current_version_is_higher: string
+      free_use: string
+      month: string
+      year: string
+      open_immediately: string
+      consultation_for_details: string
+      consult_now: string
+      upper_application_limit: string
     }
 
     order_manage_module: {