vue3-element-plus-app-chu 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-element-plus-app-chu",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "private": false,
   "type": "module",
   "files": [
@@ -14,7 +14,8 @@
     "dev": "run-p --print-label dev:frontend dev:backend",
     "dev:frontend": "vite",
     "dev:backend": "pnpm -C backend dev",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-s type-check build-only",
+    "build:fast": "vite build",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",

package/src/view/dcps/forecast/index.vue

@@ -26,9 +26,6 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import API from './api'
 import { forecastRuntime, getToday } from '../runtime'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
-import type {
-  ApiResponse,
-} from '@/utils/request'
 import type {
   ForecastCreateBody,
   ForecastDetail,
@@ -65,7 +62,7 @@ interface ForecastPage {
 }
 
 /** 校验公共响应头；retCode 不是 00000 时按服务端提示或 fallback 抛错。 */
-const ensureSuccess = <T,>(response: ApiResponse<T>, fallback: string): T | null => {
+const ensureSuccess = <T,>(response: any, fallback: string): T | null => {
   if (response?.head?.retCode !== '00000') {
     throw new Error(response?.head?.retMsg?.trim() || fallback)
   }

package/src/view/dcps/funding/balance/api.ts

@@ -1,17 +1,11 @@
-import baseHttpClient from "@chic/http"
+import baseHttpClient, { type ApiResponse } from '@chic/http'
+import type { AccountBalanceInfo, InjectionCreateParams } from './typs'
 
 export default {
-  /**
-   * 头寸-账户余额查询申请。
-   * @param params 请求参数；接口未声明筛选字段，保持空对象即可。
-   * 页面在进入和点击查询时各发起一次请求，展示返回的单条账户行余额信息。
-   */
-  queryBalanceApi: (params: unknown = {}) => baseHttpClient.post<any>("/TAM/0001/140506001", params),
-  /**
-   * 注资、预注资管理-注资/预注资发起。
-   * @param params 提交参数：adjustType 为调整类型（PRFD 注资调增、FDRD 注资调减、
-   * FFIC 预注资调增、FFRD 预注资调减），tranAmt 为调整金额（元）。
-   * 提交成功后重新查询账户行余额。
-   */
-  createApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/120506001", params)
+  /** 查询单条账户行余额，无筛选参数。 */
+  queryBalanceApi: () =>
+    baseHttpClient.post<ApiResponse<AccountBalanceInfo>>('/TAM/0001/140506001', {}),
+  /** 注资/预注资发起，响应未声明业务字段。 */
+  createApi: (params: InjectionCreateParams) =>
+    baseHttpClient.post<ApiResponse>('/TAM/0001/120506001', params),
 }

package/src/view/dcps/funding/balance/index.vue

@@ -1,155 +1,127 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import API from './api'
 import type { AccountBalanceInfo, InjectionCreateParams } from './typs'
 
 defineOptions({ name: 'DcpsBalancePage' })
 
-// 余额信息、请求与加载状态。
-const balance = ref<AccountBalanceInfo | null>(null) // 当前展示的账户行余额信息，未查询到时为 null。
-const loading = ref(false) // 查询是否进行中，同时控制查询按钮状态。
-const lastQueryTime = ref('') // 最近一次成功查询的本地时间，展示在标题区。
-let requestId = 0 // 最新请求的序号，用于忽略过期响应。
-let disposed = false // 页面是否已卸载，避免未完成请求继续更新界面。
+const balance = ref<AccountBalanceInfo | null>(null)
+const loading = ref(false)
+const lastQueryTime = ref('')
+let requestId = 0 // 只处理最新一次查询的响应。
+let disposed = false
 
-// 提取异常提示；error 为捕获到的请求或处理异常。
 const getErrorMessage = (error: unknown) => error instanceof Error ? error.message : '请求失败，请稍后重试'
 
-// 将接口时间 value 转为浏览器本地时间，空值显示横线，无效时间保留原文。
+// 时间转为本地显示，无效时间保留原文。
 const formatDateTime = (value?: string) => {
   if (!value?.trim()) return '—'
-  const date = new Date(value) // 解析后的日期对象，用于判断接口时间是否有效。
+  const date = new Date(value)
   return Number.isNaN(date.getTime()) ? value : date.toLocaleString('zh-CN', { hour12: false })
 }
 
-// 将金额字符串 value 拆成符号、整数和小数，避免转为浮点数后丢失精度。
-const parseAmount = (value?: string) => {
+// 使用整数分四舍五入，避免浮点数丢失金额精度。
+const formatAmount = (value?: string) => {
   const text = String(value ?? '').trim()
-  // 仅去掉合法千分位分隔符，避免把格式错误的 1,23 当成正常金额。
+  // 只移除合法千分位，格式错误时原样显示。
   const normalized = /^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text) ? text.replace(/,/g, '') : text
-  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(normalized) // 匹配结果：1 为符号，2 为整数，3 为小数。
-  if (!match || (!match[2] && !match[3])) return null
-
-  return {
-    negative: match[1] === '-', // 是否为负数。
-    integer: (match[2] || '0').replace(/^0+(?=\d)/, ''), // 去掉前导零的整数部分。
-    fraction: (match[3] || '').replace(/0+$/, ''), // 去掉末尾零的小数部分。
-  }
-}
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(normalized)
+  if (!match || (!match[2] && !match[3])) return text || '—'
 
-// 格式化金额 value：先四舍五入到分，再添加千分位，统一展示两位小数。
-const formatAmount = (value?: string) => {
-  const amount = parseAmount(value) // 解析后的十进制金额，无法识别时为 null。
-  if (!amount) return String(value ?? '').trim() || '—'
-
-  const fraction = amount.fraction.padEnd(3, '0') // 至少保留三位小数，第三位用于判断进位。
-  let cents = BigInt(amount.integer + fraction.slice(0, 2)) // 金额绝对值对应的整数分，使用 BigInt 保证精度。
-  if (fraction.charAt(2) >= '5') cents += 1n
-
-  const digits = cents.toString().padStart(3, '0') // 进位后的分字符串，至少三位以保证整数部分存在。
-  const integer = digits.slice(0, -2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') // 带千分位的元整数部分。
-  const sign = amount.negative ? '-' : '' // 展示用的金额符号。
-  return `${sign}${integer}.${digits.slice(-2)}`
+  const [, sign, integer, decimals = ''] = match
+  const fraction = decimals.padEnd(3, '0')
+  const cents = BigInt((integer || '0') + fraction.slice(0, 2)) + (fraction.charAt(2) >= '5' ? 1n : 0n)
+  const whole = (cents / 100n).toLocaleString('en-US')
+  const decimal = (cents % 100n).toString().padStart(2, '0')
+  return `${sign === '-' ? '-' : ''}${whole}.${decimal}`
 }
 
-// 钱包状态展示：接口暂未提供字典，保留原值；有映射时优先展示中文。
-const walletStatusLabels: Record<string, string> = {}
-const formatWalletStatus = (value?: string) => value?.trim() ? (walletStatusLabels[value.trim()] ?? value.trim()) : '—'
-
-// 注资/预注资发起弹窗状态。
-const dialogVisible = ref(false) // 发起弹窗是否显示。
-const formError = reactive({ adjustType: '', tranAmt: '' }) // 每个表单项的校验提示，空字符串表示没有错误。
-const createForm = reactive({ adjustType: '', tranAmt: '' }) // 正在编辑的调整类型与调整金额。
-const pendingCreate = ref(false) // 提交是否进行中，避免重复提交。
+const dialogVisible = ref(false)
+const pendingCreate = ref(false)
+const formError = reactive({ adjustType: '', tranAmt: '' })
+const createForm = reactive<{
+  adjustType: InjectionCreateParams['adjustType'] | ''
+  tranAmt: string
+}>({ adjustType: '', tranAmt: '' })
 
-// 调整类型字典：接口已声明枚举与中文含义。
-const adjustTypeOptions = [
+const adjustTypeOptions: { value: InjectionCreateParams['adjustType']; label: string }[] = [
   { value: 'PRFD', label: '注资调增' },
   { value: 'FDRD', label: '注资调减' },
   { value: 'FFIC', label: '预注资调增' },
   { value: 'FFRD', label: '预注资调减' },
-] as const
+]
 
 // 打开发起弹窗，恢复默认表单。
 const openCreateDialog = () => {
-  createForm.adjustType = ''
-  createForm.tranAmt = ''
-  formError.adjustType = ''
-  formError.tranAmt = ''
+  Object.assign(createForm, { adjustType: '', tranAmt: '' })
+  Object.assign(formError, { adjustType: '', tranAmt: '' })
   dialogVisible.value = true
 }
 
-// 校验表单；返回是否通过，同时填写各字段错误提示。
-const validateForm = () => {
-  const adjustType = createForm.adjustType // 调整类型，字典值必选。
-  const amountText = createForm.tranAmt.trim() // 去除首尾空白后的调整金额。
+// 提交成功后关闭弹窗并刷新余额。
+const submitCreate = async () => {
+  if (pendingCreate.value || loading.value || disposed) return
+  const { adjustType } = createForm
+  const tranAmt = createForm.tranAmt.trim()
   formError.adjustType = adjustType ? '' : '请选择调整类型'
-  formError.tranAmt = /^\d+(?:\.\d+)?$/.test(amountText) && /^[1-9]/.test(amountText)
-    ? '' // 正数金额：整数或小数，不允许负数、前导零以外形态。
+  formError.tranAmt = /^\d+(?:\.\d+)?$/.test(tranAmt) && /[1-9]/.test(tranAmt)
+    ? ''
     : '请输入大于 0 的调整金额'
-  return !formError.adjustType && !formError.tranAmt
-}
+  if (!adjustType || formError.tranAmt) return
 
-// 提交注资/预注资发起；成功后关闭弹窗，并重新查询账户行余额。
-const submitCreate = async () => {
-  if (pendingCreate.value || loading.value) return
-  if (!validateForm()) return
-  const params: InjectionCreateParams = {
-    adjustType: createForm.adjustType as InjectionCreateParams['adjustType'],
-    tranAmt: createForm.tranAmt.trim(),
-  }
   pendingCreate.value = true
   try {
-    // head 为公共响应头，请求是否成功统一以 retCode 判断；接口未声明业务返回字段。
-    const { head } = await API.createApi(params) as any
+    const { head } = await API.createApi({ adjustType, tranAmt })
     if (disposed) return
     if (head?.retCode !== '00000') {
       throw new Error(head?.retMsg || '提交失败')
     }
     ElMessage.success('注资/预注资发起已提交')
     dialogVisible.value = false
-    void query() // 重新查询账户行余额，展示最新余额。
-  } catch (error) { // error 为提交请求或业务处理失败信息。
+    void query()
+  } catch (error) {
     if (!disposed) ElMessage.error(getErrorMessage(error))
   } finally {
-    pendingCreate.value = false
+    if (!disposed) pendingCreate.value = false
   }
 }
 
-// 摘要金额：接口字段 → 卡片标题，顺序即展示顺序。
-const summaryAmounts = [
+type BalanceField = keyof AccountBalanceInfo
+type DisplayField = [field: BalanceField, label: string, isMoney?: boolean]
+
+const summaryAmounts: DisplayField[] = [
   ['bal', '结算钱包余额'],
   ['amount', '实时余额'],
   ['enableAmount', '其中：可用余额'],
   ['yesterdayAmount', '昨日余额'],
   ['nonBal', '对立账户余额（预注资金额）'],
-] as const
+]
 
-// 明细分组配置；title 为分组标题，fields 每项为 [字段名, 展示名称, 是否金额]。
-const detailGroups = [
+// 字段受接口类型约束，金额标记同时用于格式化和样式。
+const detailGroups: { title: string; fields: DisplayField[] }[] = [
   {
     title: '机构与账户',
     fields: [
-      ['bankName', '机构名称', false],
-      ['bankCode', '机构编码', false],
-      ['innerName', '行内名称', false],
-      ['innerAccount', '行内账号', false],
+      ['bankName', '机构名称'],
+      ['bankCode', '机构编码'],
+      ['innerName', '行内名称'],
+      ['innerAccount', '行内账号'],
     ],
   },
   {
     title: '结算钱包',
     fields: [
-      ['sttlmWlltNm', '结算钱包名称', false],
-      ['sttlmWlltId', '结算钱包 ID', false],
-      ['sttlmWlltSts', '结算钱包状态', false],
-      ['openDate', '开立时间', false],
+      ['sttlmWlltNm', '结算钱包名称'],
+      ['sttlmWlltId', '结算钱包 ID'],
+      ['sttlmWlltSts', '结算钱包状态'],
+      ['openDate', '开立时间'],
     ],
   },
   {
     title: '注资参数',
     fields: [
-      ['ciSts', '注资预注资状态', false],
+      ['ciSts', '注资预注资状态'],
       ['ciLmt', '注资最低金额（元）', true],
       ['realTmTxLmt', '实时业务注资下限（元）', true],
       ['wltWarnAmt', '钱包预警金额（元）', true],
@@ -166,58 +138,48 @@ const detailGroups = [
   {
     title: '报文信息',
     fields: [
-      ['refNo', '流水号', false],
-      ['replyRefNo', '应答流水号', false],
-      ['ptMsgId', '报文标识号', false],
-      ['prtryDataType', '报文类型', false],
-      ['sendOrganizeCode', '发起机构', false],
-      ['rcvOrganizeCode', '接收机构', false],
-      ['msgSendTime', '业务处理时间', false],
+      ['refNo', '流水号'],
+      ['replyRefNo', '应答流水号'],
+      ['ptMsgId', '报文标识号'],
+      ['prtryDataType', '报文类型'],
+      ['sendOrganizeCode', '发起机构'],
+      ['rcvOrganizeCode', '接收机构'],
+      ['msgSendTime', '业务处理时间'],
     ],
   },
   {
     title: '备注',
     fields: [
-      ['remark', '备注', false],
-      ['rmk', '交易备注', false],
+      ['remark', '备注'],
+      ['rmk', '交易备注'],
     ],
   },
-] as const
-
-// 展示数据：金额统一千分位、时间本地化，字段名 → 展示值。
-const displayValues = computed<Record<string, string> | null>(() => {
-  if (!balance.value) return null
-  const raw = balance.value as unknown as Record<string, string | undefined>
-  return Object.fromEntries(Object.entries(raw).map(([key, value]) => {
-    const isAmount = detailGroups.some(group => group.fields.some(([field, , isMoney]) => field === key && isMoney))
-      || summaryAmounts.some(([field]) => field === key) // 摘要金额同样千分位展示。
-    const isTime = key === 'msgSendTime'
-    if (key === 'sttlmWlltSts') return [key, formatWalletStatus(value)] // 钱包状态：先按字典映射，缺字典时保留原值。
-    return [key, isAmount ? formatAmount(value) : isTime ? formatDateTime(value) : String(value ?? '')]
-  }))
-})
+]
 
-// 读取展示值，空值显示占位符；field 为字段名。
-const displayValue = (field: string) => displayValues.value?.[field]?.trim() || '—'
+const displayValue = (field: BalanceField, isMoney = false) => {
+  const value = balance.value?.[field]?.trim()
+  if (!value) return '—'
+  if (isMoney) return formatAmount(value)
+  return field === 'msgSendTime' ? formatDateTime(value) : value
+}
 
 // 发起查询申请；接口未声明筛选条件，固定空参数。
 const query = async () => {
   if (disposed) return
-  const currentRequestId = ++requestId // 本次请求序号，仅与最新序号相等时允许更新界面。
+  const currentRequestId = ++requestId
   loading.value = true
   try {
-    // head 为公共响应头，body 为单条账户行余额信息。
-    const { head, body } = await API.queryBalanceApi() as any
+    const { head, body } = await API.queryBalanceApi()
     if (currentRequestId !== requestId) return
     if (head?.retCode !== '00000') {
       throw new Error(head?.retMsg || '查询失败')
     }
-    if (!body || typeof body !== 'object') {
+    if (!body || typeof body !== 'object' || Array.isArray(body)) {
       throw new Error('查询结果格式异常')
     }
     balance.value = body
     lastQueryTime.value = formatDateTime(new Date().toISOString())
-  } catch (error) { // error 为接口请求或响应数据校验异常。
+  } catch (error) {
     if (currentRequestId !== requestId) return
     balance.value = null
     lastQueryTime.value = ''
@@ -227,7 +189,6 @@ const query = async () => {
   }
 }
 
-// 页面首次显示时自动发起查询申请。
 onMounted(query)
 // 页面离开后，未完成的请求不再更新界面或弹出消息。
 onBeforeUnmount(() => {
@@ -245,7 +206,7 @@ onBeforeUnmount(() => {
         <span v-if="lastQueryTime" class="balance-updated">最近查询：{{ lastQueryTime }}</span>
         <span class="balance-actions">
           <el-button @click="openCreateDialog">注资/预注资发起</el-button>
-          <el-button type="primary" :loading="loading">查询</el-button>
+          <el-button type="primary" :loading="loading" @click="query()">查询</el-button>
         </span>
       </div>
     </el-card>
@@ -261,11 +222,10 @@ onBeforeUnmount(() => {
             </div>
             <el-tag class="wallet-status" type="warning" effect="light">{{ displayValue('sttlmWlltSts') }}</el-tag>
           </header>
-          <!-- item 为摘要金额配置，value 为格式化后的展示值。 -->
           <div class="amount-grid">
             <div v-for="[field, label] in summaryAmounts" :key="field" class="amount-card">
               <span class="amount-label">{{ label }}</span>
-              <strong class="amount-value">{{ displayValue(field) }}</strong>
+              <strong class="amount-value">{{ displayValue(field, true) }}</strong>
               <span class="amount-unit">元</span>
             </div>
           </div>
@@ -274,14 +234,13 @@ onBeforeUnmount(() => {
         <!-- 明细分组；group 为当前分组，包含标题和字段配置。无数据时展示空状态。 -->
         <el-card class="balance-detail" shadow="never" :body-style="{ padding: '12px 14px' }">
           <template v-if="balance">
-            <!-- field 为字段名，isMoney 为金额标记，label 为展示名称。 -->
             <section v-for="group in detailGroups" :key="group.title" class="detail-group" :aria-label="group.title">
               <h3>{{ group.title }}</h3>
               <dl class="detail-fields">
-                <div v-for="[field, label] in group.fields" :key="field" class="detail-field">
+                <div v-for="[field, label, isMoney] in group.fields" :key="field" class="detail-field">
                   <dt>{{ label }}</dt>
-                  <dd :class="{ 'detail-money': group.fields.some(([f, , isMoney]) => f === field && isMoney) }">
-                    {{ displayValue(field) }}
+                  <dd :class="{ 'detail-money': isMoney }">
+                    {{ displayValue(field, isMoney) }}
                   </dd>
                 </div>
               </dl>
@@ -305,7 +264,6 @@ onBeforeUnmount(() => {
       :close-on-press-escape="!pendingCreate"
     >
       <el-form :disabled="pendingCreate" label-position="top" @submit.prevent="submitCreate()">
-        <!-- value 为接口调整类型枚举，label 为中文含义。 -->
         <el-form-item label="调整类型" :error="formError.adjustType">
           <el-select v-model="createForm.adjustType" placeholder="请选择调整类型" clearable>
             <el-option