minitest2.0 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minitest2.0",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": false,
   "type": "module",
   "repository": {

package/src/api/announcement.ts

@@ -44,6 +44,7 @@ const ALLOWED_TAGS = new Set([
   'H2',
   'H3',
   'I',
+  'IMG',
   'LI',
   'OL',
   'P',
@@ -56,6 +57,22 @@ const ALLOWED_TAGS = new Set([
   'CODE',
 ])
 
+const ALLOWED_IMAGE_MIME_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/bmp',
+])
+
+const BASE64_IMAGE_SIGNATURES = [
+  { mime: 'image/png', pattern: /^iVBORw0KGgo/ },
+  { mime: 'image/jpeg', pattern: /^\/9j\// },
+  { mime: 'image/gif', pattern: /^R0lGOD/ },
+  { mime: 'image/webp', pattern: /^UklGR/ },
+  { mime: 'image/bmp', pattern: /^Qk/ },
+]
+
 export async function queryArticles() {
   const response = await request<unknown>({
     url: LIST_URL,
@@ -334,6 +351,11 @@ function sanitizeAttributes(element: HTMLElement) {
   Array.from(element.attributes).forEach((attribute) => {
     const name = attribute.name.toLowerCase()
 
+    if (element.tagName === 'IMG') {
+      sanitizeImageAttribute(element, attribute)
+      return
+    }
+
     if (element.tagName === 'A' && name === 'href') {
       if (!isSafeHref(attribute.value)) {
         element.removeAttribute(attribute.name)
@@ -369,6 +391,137 @@ function sanitizeAttributes(element: HTMLElement) {
 
     element.removeAttribute(attribute.name)
   })
+
+  if (element.tagName === 'IMG') {
+    finalizeImageElement(element)
+  }
+}
+
+function sanitizeImageAttribute(element: HTMLElement, attribute: Attr) {
+  const name = attribute.name.toLowerCase()
+
+  if (name === 'src') {
+    const src = normalizeImageSource(attribute.value)
+
+    if (src) {
+      element.setAttribute('src', src)
+      return
+    }
+  }
+
+  if (name === 'alt' || name === 'title') {
+    element.setAttribute(name, attribute.value.trim().slice(0, 120))
+    return
+  }
+
+  if (name === 'width' || name === 'height') {
+    const dimension = normalizeImageDimension(attribute.value)
+
+    if (dimension) {
+      element.setAttribute(name, dimension)
+      return
+    }
+  }
+
+  element.removeAttribute(attribute.name)
+}
+
+function finalizeImageElement(element: HTMLElement) {
+  if (!element.getAttribute('src')) {
+    element.remove()
+    return
+  }
+
+  if (!element.hasAttribute('alt')) {
+    element.setAttribute('alt', '')
+  }
+
+  element.setAttribute('loading', 'lazy')
+  element.setAttribute('decoding', 'async')
+}
+
+function normalizeImageSource(value: string) {
+  const source = value.trim()
+
+  if (!source) {
+    return ''
+  }
+
+  const dataImageSource = normalizeDataImageSource(source)
+
+  if (dataImageSource) {
+    return dataImageSource
+  }
+
+  const bareBase64Source = normalizeBareBase64ImageSource(source)
+
+  if (bareBase64Source) {
+    return bareBase64Source
+  }
+
+  try {
+    const url = new URL(source, window.location.origin)
+
+    return ['http:', 'https:'].includes(url.protocol) ? source : ''
+  } catch {
+    return ''
+  }
+}
+
+function normalizeDataImageSource(value: string) {
+  const match = value.match(/^data:(image\/[a-z0-9.+-]+);base64,([\s\S]+)$/i)
+
+  if (!match) {
+    return ''
+  }
+
+  const mime = normalizeImageMimeType(match[1] || '')
+  const base64 = normalizeBase64Payload(match[2] || '')
+
+  if (!mime || !isBase64Payload(base64)) {
+    return ''
+  }
+
+  return `data:${mime};base64,${base64}`
+}
+
+function normalizeBareBase64ImageSource(value: string) {
+  const base64 = normalizeBase64Payload(value)
+  const mime = getBase64ImageMimeType(base64)
+
+  if (!mime || !isBase64Payload(base64)) {
+    return ''
+  }
+
+  return `data:${mime};base64,${base64}`
+}
+
+function normalizeImageMimeType(value: string) {
+  const mime = value.trim().toLowerCase().replace(/^image\/jpg$/, 'image/jpeg')
+
+  return ALLOWED_IMAGE_MIME_TYPES.has(mime) ? mime : ''
+}
+
+function normalizeBase64Payload(value: string) {
+  return value.replace(/\s+/g, '')
+}
+
+function isBase64Payload(value: string) {
+  return Boolean(value) && value.length % 4 !== 1 && /^[A-Za-z0-9+/]+={0,2}$/.test(value)
+}
+
+function getBase64ImageMimeType(value: string) {
+  return BASE64_IMAGE_SIGNATURES.find(({ pattern }) => pattern.test(value))?.mime || ''
+}
+
+function normalizeImageDimension(value: string) {
+  const dimension = Number.parseInt(value, 10)
+
+  if (!Number.isFinite(dimension) || dimension <= 0 || dimension > 4096) {
+    return ''
+  }
+
+  return String(dimension)
 }
 
 function normalizeCodeLanguageClass(value: string) {

package/src/api/foreign-position.ts

@@ -0,0 +1,142 @@
+import {
+  buildTamRequestPayload,
+  tamRequest,
+  type TamRequestPayload,
+  type TamResponse,
+} from '@/api/tam'
+import { useAppStore } from '@/stores/app'
+
+export type ForeignForecastRecord = {
+  /** 业务类型。 */
+  busiType?: string
+  /** 币种字段，不同后端版本可能返回不同命名。 */
+  ccy?: string
+  currency?: string
+  currencyCode?: string
+  currCode?: string
+  curType?: string
+  tranCcy?: string
+  /** 客户类型或客户名称，用于列表副标题兜底。 */
+  clientName?: string
+  clientType?: string
+  competName?: string
+  /** 交易对手或清算行信息。 */
+  bankSwift?: string
+  bicCode?: string
+  routeCode?: string
+  swiftCode?: string
+  /** 落地机构，列表主标题展示字段。 */
+  groundBranch?: string
+  /** 预报金额，接口按元级金额返回，页面转换为万元级展示。 */
+  predAmt?: string
+  /** 预报流水号，后续详情查询主键。 */
+  predRefNo?: string
+  /** 预报状态。 */
+  predStatus?: string
+  /** 交易日期。 */
+  tranDate?: string
+  /** 核销状态。 */
+  verifyStatus?: string
+}
+
+export type ForeignForecastQueryForm = {
+  /** 交易时间，当前视图必填筛选项。 */
+  tranDate: string
+  /** 落地机构关键字。 */
+  groundBranch?: string
+  /** 币种，当前后端交易未明确入参时页面做兼容筛选。 */
+  currency?: string
+  /** 业务类型。 */
+  busiType?: string
+  /** 预报状态。 */
+  predStatus?: string
+  /** 起始金额，页面单位为万元。 */
+  startTranAmt?: string
+  /** 截止金额，页面单位为万元。 */
+  endTranAmt?: string
+}
+
+export type ForeignForecastQueryPayload = {
+  appHead: TamRequestPayload<ForeignForecastQueryBody>['appHead']
+  body: ForeignForecastQueryBody
+  head: TamRequestPayload<ForeignForecastQueryBody>['head']
+}
+
+export type ForeignForecastQueryResult = {
+  body: ForeignForecastQueryResultBody
+  head: TamResponse<ForeignForecastQueryResultBody>['head']
+}
+
+type ForeignForecastQueryBody = {
+  busiType: string
+  clientName: string
+  competName: string
+  endTransAmt: string
+  groundBranch: string
+  payChannel: string
+  payDirec: string
+  predStatus: string
+  sortRule: string
+  startTransAmt: string
+  tranDate: string
+  verifyStatus: string
+}
+
+type ForeignForecastQueryResultBody = {
+  resultList: ForeignForecastRecord[]
+  totalCount: string
+}
+
+type QueryOptions = {
+  form: ForeignForecastQueryForm
+  pageIndex: number
+  pageSize: number
+}
+
+const QUERY_TRAN_CODE = '/TAM/0001/140101001'
+
+export function buildForeignForecastQueryPayload({
+  form,
+  pageIndex,
+  pageSize,
+}: QueryOptions): ForeignForecastQueryPayload {
+  const tranDate = normalizeDate(form.tranDate || useAppStore().systemWorkDate)
+
+  return buildTamRequestPayload({
+    tranCode: QUERY_TRAN_CODE,
+    pageIndex,
+    pageSize,
+    body: {
+      busiType: form.busiType || '',
+      clientName: '',
+      competName: '',
+      endTransAmt: toRequestAmount(form.endTranAmt),
+      groundBranch: form.groundBranch || '',
+      payChannel: '',
+      payDirec: '',
+      predStatus: form.predStatus || '',
+      sortRule: '',
+      startTransAmt: toRequestAmount(form.startTranAmt),
+      tranDate,
+      verifyStatus: '',
+    },
+  })
+}
+
+export async function queryForeignForecastPage(
+  payload: ForeignForecastQueryPayload,
+): Promise<ForeignForecastQueryResult> {
+  return tamRequest<ForeignForecastQueryBody, ForeignForecastQueryResultBody>(payload)
+}
+
+function normalizeDate(value: string) {
+  if (/^\d{8}$/.test(value)) return value
+  return value.replaceAll('-', '')
+}
+
+function toRequestAmount(value?: string) {
+  if (!value?.trim()) return ''
+
+  const amount = Number(value)
+  return Number.isFinite(amount) ? String(Math.round(amount * 10000)) : ''
+}

package/src/router/index.ts

@@ -87,7 +87,7 @@ const router = createRouter({
       path: '/warning',
       name: 'Warning',
       component: () => import('@/views/warning/index.vue'),
-      meta: { requiresAuth: true, title: '预警信息' },
+      meta: { requiresAuth: true, title: '头寸管理平台' },
     },
     {
       path: '/dashboard',

package/src/stores/user.ts

@@ -20,7 +20,7 @@ export const useUserStore = defineStore(
     // -------------------------------- State --------------------------------
 
     /** 登录凭证，登录成功后由后端返回，后续请求通过请求头携带 */
-    const token = ref('1s')
+    const token = ref('')
     const refreshToken = ref('')
     const username = ref('')
     const realName = ref('')

package/src/utils/foreign-forecast.ts

@@ -0,0 +1,102 @@
+export type ForeignCurrencyOption = {
+  label: string
+  shortLabel: string
+  value: string
+  unit: string
+}
+
+export type ForeignOption = {
+  label: string
+  value: string
+}
+
+export type ForeignStatusOption = ForeignOption & {
+  className: string
+}
+
+export const foreignCurrencyOptions: ForeignCurrencyOption[] = [
+  { label: '全部币种', shortLabel: '全部币种', value: '', unit: '万元' },
+  { label: '美元', shortLabel: '美元', value: 'USD', unit: '万美元' },
+  { label: '欧元', shortLabel: '欧元', value: 'EUR', unit: '万欧元' },
+  { label: '港币', shortLabel: '港币', value: 'HKD', unit: '万港币' },
+  { label: '日元', shortLabel: '日元', value: 'JPY', unit: '万日元' },
+  { label: '英镑', shortLabel: '英镑', value: 'GBP', unit: '万英镑' },
+  { label: '加拿大元', shortLabel: '加元', value: 'CAD', unit: '万加元' },
+  { label: '澳大利亚元', shortLabel: '澳元', value: 'AUD', unit: '万澳元' },
+  { label: '新加坡元', shortLabel: '新元', value: 'SGD', unit: '万新元' },
+  { label: '瑞士法郎', shortLabel: '瑞郎', value: 'CHF', unit: '万瑞郎' },
+]
+
+export const foreignBusinessOptions: ForeignOption[] = [
+  { label: '全部业务类型', value: '' },
+  { label: '普通汇款', value: '1' },
+  { label: '外汇买卖', value: '2' },
+  { label: '结售汇', value: '3' },
+  { label: '资金调拨', value: '4' },
+  { label: '同业业务', value: '5' },
+  { label: '贸易融资', value: '6' },
+]
+
+export const foreignStatusOptions: ForeignStatusOption[] = [
+  { label: '全部预报状态', value: '', className: 'status-tag-unknown' },
+  { label: '已确认', value: '1', className: 'status-tag-confirmed' },
+  { label: '待确认', value: '2', className: 'status-tag-pending' },
+  { label: '已撤销', value: '3', className: 'status-tag-cancelled' },
+  { label: '已核销', value: '4', className: 'status-tag-verified' },
+  { label: '已驳回', value: '5', className: 'status-tag-rejected' },
+]
+
+export const unknownForeignStatus: ForeignStatusOption = {
+  label: '未知状态',
+  value: '',
+  className: 'status-tag-unknown',
+}
+
+export function resolveForeignCurrency(value?: string) {
+  const normalizedValue = value?.trim().toUpperCase()
+
+  if (!normalizedValue) {
+    return foreignCurrencyOptions[0]
+  }
+
+  return (
+    foreignCurrencyOptions.find((item) => item.value === normalizedValue) || {
+      label: normalizedValue,
+      shortLabel: normalizedValue,
+      value: normalizedValue,
+      unit: `万${normalizedValue}`,
+    }
+  )
+}
+
+export function resolveForeignBusinessType(value?: string) {
+  if (!value?.trim()) return '普通汇款'
+
+  return foreignBusinessOptions.find((item) => item.value === value)?.label || value
+}
+
+export function resolveForeignStatus(value?: string) {
+  if (!value?.trim()) {
+    return unknownForeignStatus
+  }
+
+  return foreignStatusOptions.find((item) => item.value === value) || unknownForeignStatus
+}
+
+export function formatForeignForecastDate(value?: string) {
+  if (value && /^\d{8}$/.test(value)) {
+    return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`
+  }
+
+  return value || '-'
+}
+
+export function toTenThousandAmount(value?: string) {
+  const amount = Number(value?.replaceAll(',', '') || 0)
+  return Number.isFinite(amount) ? amount / 10000 : 0
+}
+
+export function formatForeignForecastAmount(value: number) {
+  const sign = value >= 0 ? '+' : '-'
+  return `${sign}${Math.abs(value).toFixed(2)}`
+}

package/src/views/article-detail/index.vue

@@ -219,6 +219,15 @@ function articleContentToText(html: string) {
   text-decoration: none;
 }
 
+.article-content :deep(img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 8px auto 14px;
+  border-radius: 6px;
+  object-fit: contain;
+}
+
 .article-content :deep(pre) {
   position: relative;
   overflow-x: auto;

package/src/views/article-edit/index.vue

@@ -514,6 +514,15 @@ function normalizeCodeLanguage(value: string) {
   background: #f6f7f9;
 }
 
+.rich-editor :deep(img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 8px auto 12px;
+  border-radius: 6px;
+  object-fit: contain;
+}
+
 .rich-editor :deep(pre) {
   overflow-x: auto;
   margin: 0 0 12px;

package/src/views/opening-reserve-estimate/index.vue

@@ -14,22 +14,46 @@ type ResultItem = {
   icon: string
 }
 
+type AmountUnitKey = 'hundredMillion' | 'tenMillion' | 'million' | 'tenThousand' | 'yuan'
+
+type AmountUnit = {
+  key: AmountUnitKey
+  label: string
+  divisor: bigint
+}
+
 const estimateDetail = ref<OpeningReserveEstimateBody | null>(null)
 const querying = ref(false)
+const selectedUnitKey = ref<AmountUnitKey>('yuan')
+
+const defaultAmountUnit: AmountUnit = { key: 'yuan', label: '元', divisor: 1n }
+
+const amountUnits: AmountUnit[] = [
+  { key: 'hundredMillion', label: '亿元', divisor: 100000000n },
+  { key: 'tenMillion', label: '千万元', divisor: 10000000n },
+  { key: 'million', label: '百万元', divisor: 1000000n },
+  { key: 'tenThousand', label: '万元', divisor: 10000n },
+  defaultAmountUnit,
+]
 
 const resultConfig: ResultItem[] = [
-  { key: 'rhAmt', label: '人行时点头寸（元）', icon: 'balance-o' },
-  { key: 'unverifyAmtOut', label: '预报未核销支出（元）', icon: 'card' },
-  { key: 'unverifyAmtIn', label: '预报未核销收入（元）', icon: 'gold-coin-o' },
-  { key: 'pdAmt', label: '总分行铺底资金之和（元）', icon: 'paid' },
-  { key: 'fzAmt', label: '法定准备金（元）', icon: 'shield-o' },
-  { key: 'preAmt', label: '日初备款（元）', icon: 'chart-trending-o' },
+  { key: 'rhAmt', label: '人行时点头寸', icon: 'balance-o' },
+  { key: 'unverifyAmtOut', label: '预报未核销支出', icon: 'card' },
+  { key: 'unverifyAmtIn', label: '预报未核销收入', icon: 'gold-coin-o' },
+  { key: 'pdAmt', label: '总分行铺底资金之和', icon: 'paid' },
+  { key: 'fzAmt', label: '法定准备金', icon: 'shield-o' },
+  { key: 'preAmt', label: '日初备款', icon: 'chart-trending-o' },
 ]
 
+const selectedUnit = computed(
+  () => amountUnits.find((unit) => unit.key === selectedUnitKey.value) || defaultAmountUnit,
+)
+
 const resultItems = computed(() =>
   resultConfig.map((item) => ({
     ...item,
-    value: formatYuanAmount(estimateDetail.value?.[item.key]),
+    label: `${item.label}（${selectedUnit.value.label}）`,
+    value: formatAmountByUnit(estimateDetail.value?.[item.key], selectedUnit.value),
   })),
 )
 
@@ -62,64 +86,65 @@ async function handleQuery(options: { showSuccessToast?: boolean } = {}) {
   }
 }
 
-function formatYuanAmount(value?: string) {
+function formatAmountByUnit(value: string | undefined, unit: AmountUnit) {
+  const cents = parseYuanToCents(value)
+
+  if (cents === null) return '-'
+
+  return formatMinorAmount(divideRounded(cents, unit.divisor))
+}
+
+function parseYuanToCents(value?: string) {
   const text = value?.trim()
 
-  if (!text) return '-'
+  if (!text) return null
 
   const normalizedText = text.replaceAll(',', '')
 
   if (!/^[-+]?\d+(\.\d+)?$/.test(normalizedText)) {
-    return '-'
+    return null
   }
 
-  const sign = normalizedText.startsWith('-') ? '-' : ''
+  const isNegative = normalizedText.startsWith('-')
   const unsignedText =
     normalizedText.startsWith('-') || normalizedText.startsWith('+')
       ? normalizedText.slice(1)
       : normalizedText
   const [rawInteger = '0', rawDecimal = ''] = unsignedText.split('.')
-  let integer = rawInteger.replace(/^0+(?=\d)/, '') || '0'
-  let decimal = `${rawDecimal}00`.slice(0, 2)
-
-  if (Number(rawDecimal[2] || '0') >= 5) {
-    const roundedAmount = addOneCent(integer, decimal)
-    integer = roundedAmount.integer
-    decimal = roundedAmount.decimal
+  const integer = rawInteger.replace(/^0+(?=\d)/, '') || '0'
+  const decimalText = `${rawDecimal}000`
+  const decimal = decimalText.slice(0, 2)
+  const needsRound = Number(decimalText[2]) >= 5
+  let cents = BigInt(integer) * 100n + BigInt(decimal)
+
+  if (needsRound) {
+    cents += 1n
   }
 
-  return `${sign}${integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}.${decimal}`
+  return isNegative ? -cents : cents
 }
 
-function addOneCent(integer: string, decimal: string) {
-  const centAmount = Number(decimal) + 1
+function divideRounded(value: bigint, divisor: bigint) {
+  const isNegative = value < 0n
+  const absoluteValue = isNegative ? -value : value
+  let quotient = absoluteValue / divisor
+  const remainder = absoluteValue % divisor
 
-  if (centAmount < 100) {
-    return {
-      integer,
-      decimal: String(centAmount).padStart(2, '0'),
-    }
+  if (remainder * 2n >= divisor) {
+    quotient += 1n
   }
 
-  return {
-    integer: incrementIntegerText(integer),
-    decimal: '00',
-  }
+  return isNegative ? -quotient : quotient
 }
 
-function incrementIntegerText(value: string) {
-  const digits = value.split('')
+function formatMinorAmount(value: bigint) {
+  const isNegative = value < 0n
+  const absoluteValue = isNegative ? -value : value
+  const integer = absoluteValue / 100n
+  const decimal = String(absoluteValue % 100n).padStart(2, '0')
+  const groupedInteger = integer.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
-  for (let index = digits.length - 1; index >= 0; index -= 1) {
-    if (digits[index] !== '9') {
-      digits[index] = String(Number(digits[index]) + 1)
-      return digits.join('')
-    }
-
-    digits[index] = '0'
-  }
-
-  return `1${digits.join('')}`
+  return `${isNegative ? '-' : ''}${groupedInteger}.${decimal}`
 }
 
 function getErrorMessage(error: unknown, fallback: string) {
@@ -131,8 +156,21 @@ function getErrorMessage(error: unknown, fallback: string) {
   <main class="opening-reserve-page">
     <section class="result-section" aria-label="日初备款数匡算查询结果">
       <div class="section-heading">
-        <span class="section-heading__mark" aria-hidden="true"></span>
-        <h2>查询结果</h2>
+        <div class="section-heading__title">
+          <span class="section-heading__mark" aria-hidden="true"></span>
+          <h2>查询结果</h2>
+        </div>
+
+        <label class="unit-switch">
+          <span>单位</span>
+          <em>{{ selectedUnit.label }}</em>
+          <select v-model="selectedUnitKey" aria-label="选择金额单位">
+            <option v-for="unit in amountUnits" :key="unit.key" :value="unit.key">
+              {{ unit.label }}
+            </option>
+          </select>
+          <van-icon name="arrow-down" aria-hidden="true" />
+        </label>
       </div>
 
       <div class="result-stack">
@@ -185,9 +223,17 @@ button {
 .section-heading {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   margin-bottom: 21px;
 }
 
+.section-heading__title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
 .section-heading__mark {
   width: 7px;
   height: 24px;
@@ -206,6 +252,51 @@ button {
   letter-spacing: 0;
 }
 
+.unit-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 30px;
+  padding: 0 28px 0 11px;
+  border: 1px solid #ffd5da;
+  border-radius: 999px;
+  color: #ef252d;
+  font-size: 12px;
+  font-weight: 560;
+  line-height: 1;
+  background: #fff7f8;
+  box-shadow: 0 5px 14px rgba(255, 43, 50, 0.08);
+  box-sizing: border-box;
+}
+
+.unit-switch span {
+  margin-right: 4px;
+  color: #8c8f98;
+  font-weight: 500;
+}
+
+.unit-switch em {
+  font-style: normal;
+}
+
+.unit-switch select {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.unit-switch :deep(.van-icon) {
+  position: absolute;
+  right: 10px;
+  color: #ef252d;
+  font-size: 12px;
+  pointer-events: none;
+}
+
 .result-stack {
   display: block;
 }

package/src/views/warning/index.vue

@@ -1,26 +1,580 @@
+<script setup lang="ts">
+defineOptions({ name: 'WarningPage' })
+
+type WarningDetail = {
+  title: string
+  status: string
+  id: string
+  time: string
+  type: string
+  source: string
+  messagePrefix: string
+  amount: string
+  messageSuffix: string
+}
+
+const warningDetail: WarningDetail = {
+  title: '净借记限额预警',
+  status: '有效',
+  id: '167749751028801',
+  time: '2026-07-07 17:33:50',
+  type: '净借记限额预警',
+  source: '头寸预警',
+  messagePrefix: '小额可用净借记限额余额低于',
+  amount: '60000亿元',
+  messageSuffix: '！',
+}
+
+const detailRows = [
+  { label: '预警ID', value: warningDetail.id, icon: 'description' },
+  { label: '预警时间', value: warningDetail.time, icon: 'clock-o' },
+  { label: '预警类型', value: warningDetail.type, icon: 'apps-o' },
+]
+</script>
+
 <template>
-  <main class="page">
-    <section class="page-body">
-      <p class="placeholder">页面建设中…</p>
+  <main class="warning-page">
+    <section class="warning-hero" aria-label="预警信息查询">
+      <div class="hero-alert" aria-hidden="true">
+        <span class="shield-mark shield-mark--large"></span>
+        <span class="alert-underline"></span>
+      </div>
+
+      <div class="hero-copy">
+        <h1>预警信息查询</h1>
+        <p>及时掌握头寸预警信息，防范资金风险</p>
+      </div>
+
+      <div class="hero-scene" aria-hidden="true">
+        <span class="bank-roof"></span>
+        <span class="bank-base"></span>
+        <span class="bank-step"></span>
+        <span class="bank-column bank-column--1"></span>
+        <span class="bank-column bank-column--2"></span>
+        <span class="bank-column bank-column--3"></span>
+        <span class="bank-column bank-column--4"></span>
+        <span class="shield-mark shield-mark--small"></span>
+      </div>
     </section>
+
+    <section class="warning-detail" aria-labelledby="warning-detail-title">
+      <div class="section-title">
+        <span class="section-title-mark"></span>
+        <h2 id="warning-detail-title">预警详情</h2>
+      </div>
+
+      <article class="warning-card" aria-label="净借记限额预警详情">
+        <header class="warning-card-header">
+          <span class="bank-badge" aria-hidden="true">
+            <van-icon name="hotel-o" />
+          </span>
+          <h3>{{ warningDetail.title }}</h3>
+          <span class="status-badge">{{ warningDetail.status }}</span>
+        </header>
+
+        <dl class="warning-fields">
+          <div v-for="row in detailRows" :key="row.label" class="warning-field-row">
+            <dt>
+              <span class="field-icon" aria-hidden="true">
+                <van-icon :name="row.icon" />
+              </span>
+              <span>{{ row.label }}</span>
+            </dt>
+            <dd>{{ row.value }}</dd>
+          </div>
+        </dl>
+
+        <section class="warning-message" aria-label="预警内容">
+          <span class="message-icon" aria-hidden="true">
+            <van-icon name="warning-o" />
+          </span>
+          <div class="message-copy">
+            <strong>{{ warningDetail.source }}</strong>
+            <p>
+              {{ warningDetail.messagePrefix }}<em>{{ warningDetail.amount }}</em
+              >{{ warningDetail.messageSuffix }}
+            </p>
+          </div>
+        </section>
+      </article>
+    </section>
+
+    <p class="end-text" aria-label="列表结束">
+      <span></span>
+      已到底，没有更多数据
+      <span></span>
+    </p>
   </main>
 </template>
 
 <style scoped>
-.page {
+.warning-page {
+  width: 100%;
   max-width: 750px;
   min-height: var(--app-page-min-height, 100vh);
   margin: 0 auto;
-  padding: 0 11px;
-  background: #f7f8fa;
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
+  color: #171b20;
+  background:
+    radial-gradient(circle at 86% 8%, rgba(255, 223, 226, 0.8), transparent 94px),
+    linear-gradient(180deg, #fff6f6 0, #ffffff 178px, #ffffff 100%);
+  box-sizing: border-box;
+}
+
+.warning-hero {
+  position: relative;
+  display: grid;
+  grid-template-columns: 78px minmax(0, 1fr);
+  min-height: 120px;
+  overflow: hidden;
+  padding: 27px 17px 18px;
+  border-top: 1px solid #ffe1e2;
+  background:
+    linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 242, 243, 0.55) 100%),
+    linear-gradient(
+      100deg,
+      rgba(255, 255, 255, 0) 0 68%,
+      rgba(255, 85, 94, 0.08) 68% 76%,
+      transparent 76%
+    );
+  box-sizing: border-box;
+}
+
+.warning-hero::after {
+  position: absolute;
+  right: -28px;
+  top: 11px;
+  width: 160px;
+  height: 98px;
+  background:
+    linear-gradient(155deg, transparent 0 42%, rgba(255, 92, 99, 0.08) 42% 54%, transparent 54%),
+    linear-gradient(24deg, transparent 0 38%, rgba(255, 92, 99, 0.08) 38% 50%, transparent 50%);
+  content: '';
+  pointer-events: none;
+}
+
+.hero-alert {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+}
+
+.shield-mark {
+  position: relative;
+  display: block;
+  clip-path: polygon(50% 0, 94% 18%, 91% 67%, 50% 100%, 9% 67%, 6% 18%);
+  background: linear-gradient(145deg, #ff5e64 0%, #ee1f2b 64%, #f7434b 100%);
+  box-shadow: 0 8px 18px rgba(238, 31, 43, 0.18);
+}
+
+.shield-mark::before {
+  position: absolute;
+  left: 50%;
+  top: 23%;
+  width: 5px;
+  height: 21px;
+  border-radius: 999px;
+  background: #ffffff;
+  content: '';
+  transform: translateX(-50%);
+}
+
+.shield-mark::after {
+  position: absolute;
+  left: 50%;
+  bottom: 22%;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #ffffff;
+  content: '';
+  transform: translateX(-50%);
+}
+
+.shield-mark--large {
+  width: 34px;
+  height: 40px;
+}
+
+.alert-underline {
+  display: block;
+  width: 36px;
+  height: 4px;
+  margin-top: 18px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #ff202b 0%, #ff696e 100%);
+  box-shadow: 0 5px 12px rgba(255, 42, 50, 0.18);
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  padding-top: 2px;
+}
+
+.hero-copy h1 {
+  margin: 0;
+  color: #181d22;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.18;
+  letter-spacing: 0;
+}
+
+.hero-copy p {
+  margin: 9px 0 0;
+  color: #73777f;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+
+.hero-scene {
+  position: absolute;
+  right: 18px;
+  top: 26px;
+  z-index: 0;
+  width: 92px;
+  height: 68px;
+  opacity: 0.62;
+}
+
+.bank-roof {
+  position: absolute;
+  left: 16px;
+  top: 0;
+  width: 67px;
+  height: 20px;
+  clip-path: polygon(50% 0, 100% 72%, 100% 100%, 0 100%, 0 72%);
+  background: linear-gradient(180deg, rgba(250, 85, 94, 0.32), rgba(250, 85, 94, 0.14));
+}
+
+.bank-base,
+.bank-step {
+  position: absolute;
+  right: 0;
+  border-radius: 3px;
+  background: rgba(247, 86, 94, 0.2);
+}
+
+.bank-base {
+  bottom: 12px;
+  width: 78px;
+  height: 8px;
+}
+
+.bank-step {
+  bottom: 3px;
+  width: 92px;
+  height: 6px;
+}
+
+.bank-column {
+  position: absolute;
+  top: 25px;
+  width: 11px;
+  height: 31px;
+  border-radius: 3px 3px 0 0;
+  background: rgba(247, 86, 94, 0.18);
+}
+
+.bank-column--1 {
+  left: 25px;
+}
+
+.bank-column--2 {
+  left: 42px;
+}
+
+.bank-column--3 {
+  left: 59px;
+}
+
+.bank-column--4 {
+  left: 76px;
+}
+
+.shield-mark--small {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 31px;
+  height: 36px;
+  opacity: 0.78;
+}
+
+.shield-mark--small::before {
+  width: 4px;
+  height: 17px;
+}
+
+.shield-mark--small::after {
+  width: 6px;
+  height: 6px;
+}
+
+.warning-detail {
+  padding: 22px 17px 0;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+}
+
+.section-title-mark {
+  width: 4px;
+  height: 17px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #ff1f2b 0%, #ff4c53 100%);
+}
+
+.section-title h2 {
+  margin: 0;
+  color: #151a20;
+  font-size: 17px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.warning-card {
+  margin-top: 18px;
+  padding: 18px 13px 15px;
+  border: 1px solid #eceef2;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow:
+    0 13px 24px rgba(31, 37, 51, 0.08),
+    0 2px 6px rgba(31, 37, 51, 0.04);
+  box-sizing: border-box;
+}
+
+.warning-card-header {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 17px;
+  border-bottom: 1px dashed #e4e5e9;
 }
-.page-body {
-  padding: 24px 0;
+
+.bank-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: #f23a41;
+  font-size: 25px;
+  background: #ffe7e9;
+}
+
+.warning-card-header h3 {
+  min-width: 0;
+  margin: 0;
+  color: #161b21;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 47px;
+  min-height: 31px;
+  padding: 0 9px;
+  border: 1px solid #ffb8bb;
+  border-radius: 4px;
+  color: #ed2832;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  background: #fff0f1;
+  box-sizing: border-box;
+}
+
+.warning-fields {
+  margin: 0;
+  padding: 14px 0 7px;
+}
+
+.warning-field-row {
+  display: grid;
+  grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
+  align-items: center;
+  min-height: 46px;
+  column-gap: 12px;
+}
+
+.warning-field-row + .warning-field-row {
+  border-top: 1px solid #edf0f2;
+}
+
+.warning-field-row dt {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  color: #666b73;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.field-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  margin-right: 12px;
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 17px;
+  background: linear-gradient(145deg, #aeb3bd, #858b96);
 }
-.placeholder {
-  text-align: center;
-  color: #969799;
+
+.warning-field-row dd {
+  min-width: 0;
+  margin: 0;
+  color: #131820;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.25;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.warning-message {
+  display: grid;
+  grid-template-columns: 39px minmax(0, 1fr);
+  gap: 10px;
+  min-height: 68px;
+  margin-top: 4px;
+  padding: 14px 12px 12px;
+  border: 1px solid #ffbdc1;
+  border-radius: 7px;
+  background:
+    radial-gradient(circle at 95% 82%, rgba(255, 229, 231, 0.74), transparent 72px),
+    linear-gradient(135deg, #fffafa 0%, #fff4f4 100%);
+  box-sizing: border-box;
+}
+
+.message-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 42px;
+  color: #f23a41;
+  font-size: 29px;
+}
+
+.message-copy {
+  min-width: 0;
+}
+
+.message-copy strong {
+  display: block;
+  color: #e23239;
+  font-size: 15px;
+  font-weight: 740;
+  line-height: 1.25;
+}
+
+.message-copy p {
+  margin: 9px 0 0;
+  color: #131820;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.message-copy em {
+  color: #e42d36;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.end-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 37px 0 0;
+  color: #888d96;
   font-size: 14px;
-  padding-top: 120px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.end-text span {
+  width: 23px;
+  height: 1px;
+  background: #c8cbd1;
+}
+
+@media (max-width: 350px) {
+  .warning-hero {
+    grid-template-columns: 58px minmax(0, 1fr);
+    padding-right: 13px;
+    padding-left: 13px;
+  }
+
+  .hero-copy h1 {
+    font-size: 22px;
+  }
+
+  .hero-scene {
+    right: 6px;
+    opacity: 0.38;
+  }
+
+  .warning-detail {
+    padding-right: 13px;
+    padding-left: 13px;
+  }
+
+  .warning-card {
+    padding-right: 11px;
+    padding-left: 11px;
+  }
+
+  .warning-card-header {
+    grid-template-columns: 40px minmax(0, 1fr) auto;
+    gap: 9px;
+  }
+
+  .bank-badge {
+    width: 36px;
+    height: 36px;
+    font-size: 22px;
+  }
+
+  .warning-field-row {
+    grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
+  }
+
+  .warning-field-row dt,
+  .warning-field-row dd {
+    font-size: 14px;
+  }
+
+  .field-icon {
+    margin-right: 9px;
+  }
+
+  .message-copy p {
+    font-size: 15px;
+  }
 }
 </style>

package/vite.config.ts

@@ -14,6 +14,8 @@ export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   const apiBaseUrl = env.VITE_API_BASE_URL || '/api'
   const appVersion = getAppVersion(mode, command)
+  const enableVueDevTools =
+    command === 'serve' && env.VITE_ENABLE_VUE_DEVTOOLS !== 'false'
 
   return {
     base: './',
@@ -22,7 +24,7 @@ export default defineConfig(({ command, mode }) => {
     },
     plugins: [
       vue(),
-      env.VITE_ENABLE_VUE_DEVTOOLS === 'true' && vueDevTools(),
+      enableVueDevTools && vueDevTools(),
 
       // 自动导入 Vue / Vue Router / Pinia / VueUse / Vant 的 API，省去手动 import
       AutoImport({