Add pricing display (#31)

Co-authored-by: Germey <[email protected]>

change/@acedatacloud-hub-b634c68d-ad57-4fa0-8780-c27a2aef120c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for usage history",
+  "packageName": "@acedatacloud/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

src/components/api/Price.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <el-dialog v-model="visible" center width="80%">
+      <el-table :data="data" stripe :span-method="spanMethod" :header-cell-style="cellStyle" :cell-style="cellStyle">
+        <el-table-column
+          v-for="(column, columnIndex) in columns"
+          :key="columnIndex"
+          :prop="column.key"
+          :label="column.label"
+        />
+      </el-table>
+    </el-dialog>
+    <el-button round size="small" @click="visible = true">
+      {{ $t('service.button.pricing') }}
+    </el-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { IApiPrice } from '@/models';
+import { defineComponent } from 'vue';
+import { ElTable, ElTableColumn, ElDialog, ElButton } from 'element-plus';
+import type { CellStyle, TableColumnCtx } from 'element-plus';
+
+interface SpanMethodProps {
+  row: IApiPrice;
+  column: TableColumnCtx<IApiPrice>;
+  rowIndex: number;
+  columnIndex: number;
+}
+
+export default defineComponent({
+  name: 'ApiPrice',
+  components: {
+    ElTable,
+    ElTableColumn,
+    ElDialog,
+    ElButton
+  },
+  props: {
+    price: {
+      type: Object as () => IApiPrice | undefined,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  computed: {
+    data() {
+      return this.price?.data || [];
+    },
+    columns() {
+      return this.price?.columns;
+    },
+    spans() {
+      return this.price?.spans;
+    }
+  },
+  methods: {
+    // @ts-ignore
+    cellStyle(): CellStyle {
+      return {
+        'font-weight': 'bold',
+        'text-align': 'center'
+      };
+    },
+    spanMethod({ row, column, rowIndex, columnIndex }: SpanMethodProps) {
+      if (this.spans) {
+        for (const span of this.spans) {
+          if (rowIndex === span[0] && columnIndex === span[1]) {
+            return [span[2], span[3]];
+          }
+        }
+      }
+      return [1, 1];
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.table {
+  width: 80%;
+  max-width: 1200px;
+}
+</style>

src/components/application/Status.vue

@@ -15,9 +15,14 @@
       {{ $t(`service.unit.` + application?.service?.unit + 's') }}
     </span>
     <span class="actions">
-      <el-button round size="small" type="primary" @click="onBuyMore(application)">{{
+      <el-button round size="small" type="primary" class="mr-1" @click="onBuyMore(application)">{{
         $t('common.button.buyMore')
       }}</el-button>
+      <api-price
+        v-if="application?.service?.apis?.[0]?.price"
+        class="price inline-block"
+        :price="application?.service?.apis?.[0]?.price"
+      />
     </span>
   </div>
   <div v-if="needApply && service" class="text-center info">
@@ -45,6 +50,7 @@ import ApplicationConfirm from '@/components/application/Confirm.vue';
 import { IApplicationType, IApplication, IApplicationDetailResponse, IService } from '@/models';
 import { ERROR_CODE_DUPLICATION } from '@/constants/errorCode';
 import { ROUTE_CONSOLE_APPLICATION_BUY } from '@/router';
+import ApiPrice from '@/components/api/Price.vue';
 
 export interface IData {
   confirming: boolean;
@@ -53,7 +59,7 @@ export interface IData {
 
 export default defineComponent({
   name: 'ApplicationStatus',
-  components: { ElButton, ApplicationConfirm, ElSkeleton, ElSkeletonItem },
+  components: { ElButton, ApplicationConfirm, ElSkeleton, ElSkeletonItem, ApiPrice },
   props: {
     application: {
       type: Object as () => IApplication | undefined,

src/components/chat/InputBox.vue

@@ -130,8 +130,10 @@ export default defineComponent({
       this.$nextTick(() => {
         const textarea = this.$refs.textarea;
         if (textarea) {
-          textarea.style.height = '35px'; // 先重置高度
-          textarea.style.height = textarea.scrollHeight + 'px'; // 设置高度为内容的实际高度
+          // @ts-ignore
+          textarea.style.height = '35px';
+          // @ts-ignore
+          textarea.style.height = textarea.scrollHeight + 'px';
         }
       });
     },
@@ -159,9 +161,11 @@ textarea.input {
   background: none;
   box-shadow: none;
   resize: none;
-  line-height: 35px;
+  line-height: 25px;
   width: calc(100% - 80px);
   margin-left: 30px;
+  font-family: var(--el-font-family);
+  padding-top: 6px;
 }
 textarea.input:focus {
   outline: none;

src/components/common/HelpEntry.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <el-tooltip effect="dark" :content="$t('common.message.joinDiscord')" placement="top-start">
+      <el-button type="primary" circle size="large" @click="onJoin">
+        <font-awesome-icon icon="fa-brands fa-discord" />
+      </el-button>
+    </el-tooltip>
+  </div>
+</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
+  },
+  methods: {
+    onJoin() {
+      window.open('https://discord.gg/73F3MYj3vp', '_blank');
+    }
+  }
+});
+</script>

src/i18n/ar/application.json

@@ -27,21 +27,29 @@
     "message": "سجل الاستخدام",
     "description": "النص في زر، عند النقر فوق هذا الزر، سيتم الانتقال إلى صفحة سجل الاستخدام."
   },
+  "field.application": {
+    "message": "التطبيق",
+    "description": "تطبيق الخدمة."
+  },
+  "field.status": {
+    "message": "الحالة",
+    "description": "حالة التطبيق."
+  },
   "field.id": {
     "message": "معرف التطبيق",
     "description": "معرف التطبيق."
   },
   "field.remainingAmount": {
     "message": "المبلغ المتبقي",
-    "description": "المبلغ المتبقي للتطبيق."
+    "description": "المبلغ المتبقي من التطبيق."
   },
   "field.usedAmount": {
     "message": "المبلغ المستخدم",
     "description": "المبلغ المستخدم من التطبيق."
   },
   "field.apiKey": {
     "message": "مفتاح API",
-    "description": "مفتاح الواجهة البرمجية للتطبيق."
+    "description": "مفتاح الواجهة البرمجية للتطبيق"
   },
   "field.service": {
     "message": "الخدمة",
@@ -57,19 +65,19 @@
   },
   "field.traceId": {
     "message": "معرف التتبع",
-    "description": "معرف التتبع لاستدعاء واجهة برمجة التطبيقات، لتطبيق خدمة واجهة برمجة التطبيقات، لا تترجمه، احتفظ به على أنه 'معرف التتبع'"
+    "description": "معرف التتبع لاستدعاء واجهة برمجة التطبيقات، لتطبيق خدمة واجهة برمجة التطبيقات، لا تترجمه، احتفظ به كما 'معرف التتبع'"
   },
   "field.shouldPayPrice": {
     "message": "السعر النهائي",
     "description": "السعر النهائي للتطبيق."
   },
   "field.api": {
     "message": "واجهة برمجة التطبيقات",
-    "description": "هذا نوع من الخدمات عبر الإنترنت، النموذج يتم عبر واجهة برمجة التطبيقات لتقديم الخدمة للمستخدم."
+    "description": "هذا نوع من الخدمات عبر الإنترنت، النموذج هو عبر واجهة برمجة التطبيقات لتقديم الخدمة للمستخدم."
   },
   "field.proxy": {
     "message": "وكيل",
-    "description": "هذا نوع من الخدمات عبر الإنترنت، النموذج يتم عبر وكيل HTTP (يستخدم لنقل البيانات) لتقديم الخدمة للمستخدم."
+    "description": "هذا نوع من الخدمات عبر الإنترنت، النموذج هو عبر وكيل HTTP (يستخدم لنقل البيانات) لتقديم الخدمة للمستخدم."
   },
   "field.credential": {
     "message": "اعتماد",
@@ -129,7 +137,7 @@
   },
   "message.createCredentialSuccessfully": {
     "message": "تم إنشاء الاعتماد بنجاح",
-    "description": "الرسالة المعروضة للمستخدم عندما يقوم بإنشاء الاعتماد بنجاح."
+    "description": "الرسالة المعروضة للمستخدم عندما ينشئ الاعتماد بنجاح."
   },
   "message.readPolicy": {
     "message": "لقد قرأت ووافقت على",
@@ -164,7 +172,7 @@
     "description": "الرسالة المعروضة للمستخدم عندما تكون إعادة تعيين المفتاح ناجحة."
   },
   "message.rotateCredentialFailed": {
-    "message": "فشلت إعادة تعيين المفتاح، يرجى الاتصال للمساعدة",
+    "message": "فشل إعادة تعيين المفتاح، يرجى الاتصال للمساعدة",
     "description": "الرسالة المعروضة للمستخدم عندما يفشل إعادة تعيين المفتاح."
   },
   "message.updateFailed": {

src/i18n/ar/distribution.json

@@ -40,8 +40,8 @@
     "description": "عتبة أرباح الإحالة، التي يتم استخدامها لسحب أرباح الإحالة."
   },
   "field.inviteeId": {
-    "message": "معرف المدعو",
-    "description": "المعرف الفريد للمدعو، حيث يعني المدعو المستخدم الذي يدعو المدعو إلى موقع خدمة الواجهة البرمجية."
+    "message": "معرف الداعو",
+    "description": "المعرف الفريد للداعو، حيث يعني الداعو المستخدم الذي يدعو المدعو إلى موقع خدمة الواجهة البرمجية."
   },
   "field.isVerified": {
     "message": "تم التحقق منه",
@@ -52,7 +52,7 @@
     "description": "الفرق بين مبلغ الطلب الحالي وعتبة المستوى التالي."
   },
   "message.developingWithDrawal": {
-    "message": "يرجى إضافة خدمة العملاء للتعامل مع عمليات السحب، سيتم خصم ضريبة دخل بنسبة 6% من عمليات السحب، يمكن استخدام الفواتير للخصم",
+    "message": "يرجى الانضمام إلى ديسكورد والتشاور مع الدعم للتعامل مع عمليات السحب، سيتم خصم ضريبة الدخل ذات الصلة من السحب.",
     "description": "الرسالة للإشارة إلى أن وظيفة السحب قيد التطوير."
   },
   "message.technicalDetail": {

src/i18n/ar/order.json

@@ -67,9 +67,13 @@
     "message": "تم الدفع بنجاح",
     "description": "رسالة الدفع الناجح."
   },
+  "message.orderExpired": {
+    "message": "انتهت صلاحية الطلب، يرجى إنشاء طلب جديد للدفع.",
+    "description": "رسالة الطلب منتهي الصلاحية."
+  },
   "message.createFailed": {
     "message": "فشل الإنشاء",
-    "description": "رسالة الفشل في الإنشاء."
+    "description": "رسالة الإنشاء الفاشل."
   },
   "message.wechatPayHelp": {
     "message": "يرجى فتح تطبيق WeChat على هاتفك، ومسح لإتمام الدفع",
@@ -80,12 +84,12 @@
     "description": "رسالة الطلب المجاني."
   },
   "message.buyInExternalUrl": {
-    "message": "يرجى استكمال الدفع في الرابط الخارجي",
+    "message": "يرجى إكمال الدفع في الرابط الخارجي",
     "description": "رسالة الدفع في الرابط الخارجي."
   },
   "message.updateFailed": {
     "message": "فشل التحديث",
-    "description": "رسالة فشل التحديث."
+    "description": "رسالة التحديث الفاشل."
   },
   "message.updateSuccessfully": {
     "message": "تم التحديث بنجاح",
@@ -104,12 +108,12 @@
     "description": "حالة الطلب، والتي تعني أن هذا الطلب تم دفعه."
   },
   "state.expired": {
-    "message": "انتهت مهلة الدفع",
-    "description": "حالة الطلب، والتي تعني أن مهلة الدفع لهذا الطلب قد انتهت."
+    "message": "انتهت صلاحية الدفع",
+    "description": "حالة الطلب، والتي تعني أن هذا الطلب قد انتهت صلاحيته."
   },
   "state.failed": {
     "message": "فشل الدفع",
-    "description": "حالة الطلب، والتي تعني أن هذا الطلب قد فشل في الدفع."
+    "description": "حالة الطلب، والتي تعني أن هذا الطلب قد فشل الدفع."
   },
   "title.info": {
     "message": "معلومات الطلب",
@@ -120,12 +124,12 @@
     "description": "العنوان الذي يستخدم كعنوان للموقع، يعني دفع WeChat."
   },
   "title.aliPay": {
-    "message": "الي باي",
-    "description": "العنوان الذي يستخدم كعنوان للموقع، يعني دفع الي باي، دفع الي باي هو نوع من الدفع عبر الإنترنت."
+    "message": "Alipay",
+    "description": "العنوان الذي يستخدم كعنوان للموقع، يعني دفع Alipay، دفع Alipay هو نوع من الدفع عبر الإنترنت."
   },
   "title.stripe": {
-    "message": "شريط",
-    "description": "العنوان الذي يستخدم كعنوان للموقع، يعني دفع الشريط، دفع الشريط هو نوع من الدفع عبر الإنترنت."
+    "message": "Stripe",
+    "description": "العنوان الذي يستخدم كعنوان للموقع، يعني دفع Stripe، دفع Stripe هو نوع من الدفع عبر الإنترنت."
   },
   "title.manageOrder": {
     "message": "إدارة الطلب",

src/i18n/ar/usage.json

@@ -4,8 +4,20 @@
     "description": "الوقت الذي تم فيه إنشاء سجل الاستخدام."
   },
   "field.statusCode": {
-    "message": "رمز الحالة",
-    "description": "رمز حالة سجل الاستخدام."
+    "message": "كود الحالة",
+    "description": "كود الحالة لسجل الاستخدام."
+  },
+  "field.application": {
+    "message": "التطبيق",
+    "description": "التطبيق المستخدم للخدمة."
+  },
+  "field.status": {
+    "message": "الحالة",
+    "description": "حالة التطبيق."
+  },
+  "field.api": {
+    "message": "واجهة برمجة التطبيقات (API)",
+    "description": "واجهة برمجة التطبيقات للخدمة."
   },
   "field.usedAmount": {
     "message": "الكمية المستخدمة",