minitest2.0 0.0.5 → 0.0.7

package/src/views/foreign-position/index.vue

@@ -1,26 +1,1223 @@
+<script setup lang="ts">
+import {
+  buildForeignForecastQueryPayload,
+  queryForeignForecastPage,
+  type ForeignForecastQueryForm,
+  type ForeignForecastRecord,
+} from '@/api/foreign-position'
+import { useAppStore } from '@/stores/app'
+import {
+  allForeignBusinessOption,
+  allForeignStatusOption,
+  foreignBusinessOptions,
+  foreignCurrencyOptions,
+  foreignStatusOptions,
+  formatForeignForecastAmount,
+  formatForeignForecastDate,
+  resolveForeignBusinessType,
+  resolveForeignCurrency,
+  resolveForeignStatus,
+  toTenThousandAmount,
+  type ForeignOption,
+  type ForeignStatusOption,
+} from '@/utils/foreign-forecast'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'ForeignPositionPage' })
+
+type Forecast = {
+  id: number
+  institution: string
+  date: string
+  currency: string
+  currencyUnit: string
+  business: string
+  counterparty: string
+  amount: number
+  predRefNo: string
+  status: string
+  statusClass: string
+}
+
+type PendingForecast = {
+  institution: string
+  date: string
+  currency: string
+  business: string
+  counterparty: string
+  amount: number
+}
+
+type SelectorType = 'currency' | 'business' | 'status'
+
+type SelectorOption = ForeignOption | ForeignStatusOption
+
+const router = useRouter()
+const appStore = useAppStore()
+const defaultTranDate = appStore.systemWorkDate
+const heroImage = `${import.meta.env.BASE_URL}images/12a73787-86a9-4891-a65f-66104746f6a8.png`
+const pageSize = 10
+const backTopThreshold = 520
+const pendingForecastKey = 'foreign-position:pending-create'
+
+const queryForm = reactive({
+  institution: '',
+  currency: '',
+  business: '',
+  status: '',
+  minAmount: '',
+  maxAmount: '',
+})
+
+const selectedDate = ref(defaultTranDate)
+const showDatePicker = ref(false)
+const datePickerValue = ref(selectedDate.value.split('-'))
+const minDate = new Date(2020, 0, 1)
+const maxDate = new Date(2030, 11, 31)
+const isFilterExpanded = ref(true)
+
+const forecastList = ref<Forecast[]>([])
+const forecastTotal = ref(0)
+const currentPage = ref(1)
+const listLoading = ref(false)
+const listFinished = ref(false)
+const listError = ref(false)
+const requesting = ref(false)
+const showBackTop = ref(false)
+const selectorType = ref<SelectorType>('currency')
+const showSelector = ref(false)
+
+const selectedCurrency = computed(() => resolveForeignCurrency(queryForm.currency))
+const selectedBusiness = computed(
+  () =>
+    foreignBusinessOptions.find((item) => item.value === queryForm.business) ||
+    allForeignBusinessOption,
+)
+const selectedStatus = computed(
+  () =>
+    foreignStatusOptions.find((item) => item.value === queryForm.status) || allForeignStatusOption,
+)
+const selectorTitle = computed(() => {
+  const titleMap: Record<SelectorType, string> = {
+    currency: '选择币种',
+    business: '选择业务类型',
+    status: '选择预报状态',
+  }
+
+  return titleMap[selectorType.value]
+})
+const selectorOptions = computed<SelectorOption[]>(() => {
+  if (selectorType.value === 'currency') return foreignCurrencyOptions
+  if (selectorType.value === 'business') return foreignBusinessOptions
+
+  return foreignStatusOptions
+})
+const filterSummary = computed(() => {
+  const institution = queryForm.institution.trim() || '全部机构'
+  const currency = selectedCurrency.value.shortLabel
+
+  return `${selectedDate.value} · ${institution} · ${currency}`
+})
+
+onMounted(async () => {
+  updateBackTopVisibility()
+  window.addEventListener('scroll', updateBackTopVisibility, { passive: true })
+  await resetAndLoad()
+  consumePendingForecast()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', updateBackTopVisibility)
+})
+
+function mapForeignRecordToForecast(record: ForeignForecastRecord, index: number): Forecast {
+  const currencyValue = getRecordCurrency(record)
+  const currency = resolveForeignCurrency(currencyValue)
+  const status = resolveForeignStatus(record.predStatus)
+  const counterparty =
+    record.competName || record.clientName || record.bankSwift || record.swiftCode || '-'
+
+  return {
+    id: index + 1,
+    institution: record.groundBranch || '未填写机构',
+    date: formatForeignForecastDate(record.tranDate),
+    currency: currency.shortLabel,
+    currencyUnit: currency.unit,
+    business: resolveForeignBusinessType(record.busiType),
+    counterparty,
+    amount: toTenThousandAmount(record.predAmt),
+    predRefNo: record.predRefNo || '',
+    status: status.label,
+    statusClass: status.className,
+  }
+}
+
+function buildQueryForm(): ForeignForecastQueryForm {
+  return {
+    tranDate: selectedDate.value,
+    groundBranch: queryForm.institution.trim(),
+    currency: queryForm.currency,
+    busiType: queryForm.business,
+    predStatus: queryForm.status,
+    startTranAmt: queryForm.minAmount,
+    endTranAmt: queryForm.maxAmount,
+  }
+}
+
+function parseAmount(value: string) {
+  if (!value.trim()) return undefined
+
+  const amount = Number(value)
+  return Number.isFinite(amount) ? amount : undefined
+}
+
+function updateBackTopVisibility() {
+  showBackTop.value = window.scrollY > backTopThreshold
+}
+
+function scrollToTop() {
+  showBackTop.value = false
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+}
+
+function openCreatePage() {
+  router.push({
+    name: 'ForeignPositionCreate',
+    query: { tranDate: selectedDate.value },
+  })
+}
+
+function openSelector(type: SelectorType) {
+  selectorType.value = type
+  showSelector.value = true
+}
+
+function chooseSelectorOption(option: SelectorOption) {
+  if (selectorType.value === 'currency') {
+    queryForm.currency = option.value
+  } else if (selectorType.value === 'business') {
+    queryForm.business = option.value
+  } else {
+    queryForm.status = option.value
+  }
+
+  showSelector.value = false
+}
+
+async function handleSearch() {
+  const minAmount = parseAmount(queryForm.minAmount)
+  const maxAmount = parseAmount(queryForm.maxAmount)
+
+  if (
+    (queryForm.minAmount && minAmount === undefined) ||
+    (queryForm.maxAmount && maxAmount === undefined)
+  ) {
+    showAppToast('请输入正确的金额')
+    return
+  }
+
+  if (minAmount !== undefined && maxAmount !== undefined && minAmount > maxAmount) {
+    showAppToast('下限金额不能大于上限金额')
+    return
+  }
+
+  await resetAndLoad()
+
+  if (!listError.value) {
+    showAppToast(`查询到 ${forecastTotal.value} 笔预报`)
+  }
+}
+
+async function handleReset() {
+  selectedDate.value = defaultTranDate
+  datePickerValue.value = selectedDate.value.split('-')
+  queryForm.institution = ''
+  queryForm.currency = ''
+  queryForm.business = ''
+  queryForm.status = ''
+  queryForm.minAmount = ''
+  queryForm.maxAmount = ''
+
+  await resetAndLoad()
+
+  if (!listError.value) {
+    showAppToast('已重置筛选条件')
+  }
+}
+
+async function resetAndLoad() {
+  currentPage.value = 1
+  forecastList.value = []
+  forecastTotal.value = 0
+  listFinished.value = false
+  listError.value = false
+
+  await loadNextPage()
+}
+
+async function loadNextPage() {
+  if (requesting.value || listFinished.value) {
+    listLoading.value = false
+    return
+  }
+
+  requesting.value = true
+  listLoading.value = true
+  listError.value = false
+
+  const payload = buildForeignForecastQueryPayload({
+    form: buildQueryForm(),
+    pageIndex: currentPage.value,
+    pageSize,
+  })
+
+  console.log('[外币预报查询入参]', payload)
+
+  try {
+    const response = await queryForeignForecastPage(payload)
+    const records = filterRecordsByCurrency(response.body.resultList)
+    const nextList = records.map((item, index) =>
+      mapForeignRecordToForecast(item, forecastList.value.length + index),
+    )
+
+    forecastList.value.push(...nextList)
+    forecastTotal.value = queryForm.currency
+      ? forecastList.value.length
+      : Number(response.body.totalCount) || forecastList.value.length
+    currentPage.value += 1
+    listFinished.value = queryForm.currency
+      ? response.body.resultList.length < pageSize
+      : forecastList.value.length >= forecastTotal.value ||
+        response.body.resultList.length < pageSize
+  } catch (error) {
+    console.error('[外币预报查询失败]', error)
+    listError.value = true
+    showAppToast('数据加载失败，请重试')
+  } finally {
+    requesting.value = false
+    listLoading.value = false
+  }
+}
+
+function filterRecordsByCurrency(records: ForeignForecastRecord[]) {
+  const currency = queryForm.currency.trim().toUpperCase()
+
+  if (!currency) return records
+
+  return records.filter((item) => getRecordCurrency(item) === currency)
+}
+
+function getRecordCurrency(record: ForeignForecastRecord) {
+  return (
+    record.ccy ||
+    record.currency ||
+    record.currencyCode ||
+    record.currCode ||
+    record.curType ||
+    record.tranCcy ||
+    ''
+  )
+    .trim()
+    .toUpperCase()
+}
+
+function confirmDate() {
+  selectedDate.value = datePickerValue.value.join('-')
+  showDatePicker.value = false
+}
+
+function openDatePicker() {
+  datePickerValue.value = selectedDate.value.split('-')
+  showDatePicker.value = true
+}
+
+function openDetail(item: Forecast) {
+  if (!item.predRefNo) {
+    showAppToast('暂无预报流水号')
+    return
+  }
+
+  router.push({
+    name: 'ForeignPositionDetail',
+    params: { predRefNo: item.predRefNo },
+  })
+}
+
+function consumePendingForecast() {
+  const payload = sessionStorage.getItem(pendingForecastKey)
+
+  if (!payload) return
+
+  sessionStorage.removeItem(pendingForecastKey)
+
+  try {
+    const forecast = JSON.parse(payload) as Partial<PendingForecast>
+
+    if (!isPendingForecast(forecast)) return
+
+    const currency = resolveForeignCurrency(forecast.currency)
+    const status = resolveForeignStatus('1')
+
+    forecastList.value.unshift({
+      id: Date.now(),
+      institution: forecast.institution,
+      date: forecast.date,
+      currency: currency.shortLabel,
+      currencyUnit: currency.unit,
+      business: forecast.business,
+      counterparty: forecast.counterparty,
+      amount: forecast.amount,
+      predRefNo: '',
+      status: status.label,
+      statusClass: status.className,
+    })
+    forecastTotal.value += 1
+  } catch (error) {
+    console.error('[外币预报新增结果解析失败]', error)
+  }
+}
+
+function isPendingForecast(value: Partial<PendingForecast> | null): value is PendingForecast {
+  return Boolean(
+    value &&
+    typeof value.institution === 'string' &&
+    typeof value.date === 'string' &&
+    typeof value.currency === 'string' &&
+    typeof value.business === 'string' &&
+    typeof value.counterparty === 'string' &&
+    typeof value.amount === 'number' &&
+    Number.isFinite(value.amount),
+  )
+}
+</script>
+
 <template>
-  <main class="page">
-    <section class="page-body">
-      <p class="placeholder">页面建设中…</p>
+  <main class="foreign-page">
+    <section class="query-card">
+      <div class="hero-panel">
+        <div class="hero-copy">
+          <h2>外币预报信息查询</h2>
+          <p>查询外币预报及交易明细</p>
+        </div>
+        <img class="hero-image" :src="heroImage" alt="外币预报信息查询" />
+      </div>
     </section>
+
+    <section class="filter-sticky">
+      <div class="filter-panel" :class="{ 'is-collapsed': !isFilterExpanded }">
+        <div class="filter-toolbar">
+          <div class="filter-heading">
+            <strong>筛选条件</strong>
+            <span>{{ filterSummary }}</span>
+          </div>
+          <button
+            class="filter-toggle"
+            type="button"
+            :aria-expanded="isFilterExpanded"
+            @click="isFilterExpanded = !isFilterExpanded"
+          >
+            <van-icon :name="isFilterExpanded ? 'arrow-up' : 'arrow-down'" />
+            <span>{{ isFilterExpanded ? '收起' : '展开' }}</span>
+          </button>
+        </div>
+
+        <Transition name="filter-body">
+          <div v-show="isFilterExpanded" class="filter-body">
+            <button class="filter-row" type="button" @click="openDatePicker">
+              <span class="row-icon row-icon-calendar"><van-icon name="calendar-o" /></span>
+              <span class="row-label">起息日</span>
+              <span class="row-value">{{ selectedDate }}</span>
+              <van-icon class="row-calendar" name="calendar-o" />
+              <van-icon class="row-arrow" name="arrow" />
+            </button>
+
+            <label class="filter-row">
+              <span class="row-icon row-icon-bank"><van-icon name="hotel-o" /></span>
+              <span class="row-label">落地机构</span>
+              <input
+                v-model.trim="queryForm.institution"
+                class="row-input"
+                type="text"
+                inputmode="text"
+                placeholder="请输入落地机构关键字"
+              />
+              <van-icon class="row-arrow" name="arrow" />
+            </label>
+
+            <button class="filter-row" type="button" @click="openSelector('currency')">
+              <span class="row-icon row-icon-money"><van-icon name="gold-coin-o" /></span>
+              <span class="row-label">币种</span>
+              <span class="row-value muted-value">{{ selectedCurrency.label }}</span>
+              <van-icon class="row-arrow" name="arrow" />
+            </button>
+
+            <button class="filter-row" type="button" @click="openSelector('business')">
+              <span class="row-icon row-icon-briefcase"><van-icon name="bag-o" /></span>
+              <span class="row-label">业务类型</span>
+              <span class="row-value muted-value">{{ selectedBusiness.label }}</span>
+              <van-icon class="row-arrow" name="arrow" />
+            </button>
+
+            <button class="filter-row" type="button" @click="openSelector('status')">
+              <span class="row-icon row-icon-status"><van-icon name="orders-o" /></span>
+              <span class="row-label">预报状态</span>
+              <span class="row-value muted-value">{{ selectedStatus.label }}</span>
+              <van-icon class="row-arrow" name="arrow" />
+            </button>
+
+            <div class="filter-row amount-row">
+              <span class="row-icon row-icon-money"><van-icon name="gold-coin-o" /></span>
+              <span class="row-label">金额区间</span>
+              <input
+                v-model.trim="queryForm.minAmount"
+                class="amount-input"
+                type="number"
+                inputmode="decimal"
+                placeholder="请输入下限金额"
+              />
+              <span class="amount-divider">-</span>
+              <input
+                v-model.trim="queryForm.maxAmount"
+                class="amount-input"
+                type="number"
+                inputmode="decimal"
+                placeholder="请输入上限金额"
+              />
+            </div>
+
+            <div class="filter-actions">
+              <button class="reset-btn" type="button" @click="handleReset">
+                <van-icon name="replay" />
+                <span>重置</span>
+              </button>
+              <button class="search-btn" type="button" @click="handleSearch">
+                <van-icon name="search" />
+                <span>查询</span>
+              </button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </section>
+
+    <section class="forecast-card" aria-label="预报列表">
+      <van-list
+        v-model:loading="listLoading"
+        v-model:error="listError"
+        :finished="listFinished"
+        :immediate-check="false"
+        error-text="加载失败，点击重试"
+        finished-text="没有更多了"
+        loading-text="加载中..."
+        @load="loadNextPage"
+      >
+        <button
+          v-for="item in forecastList"
+          :key="item.id"
+          class="forecast-item"
+          type="button"
+          @click="openDetail(item)"
+        >
+          <span class="forecast-avatar"><van-icon name="shop-o" /></span>
+          <span class="forecast-main">
+            <strong>{{ item.institution }}</strong>
+            <span class="forecast-date">{{ item.date }}</span>
+            <span class="forecast-business">
+              {{ item.business }} | {{ item.currency }} | {{ item.counterparty }}
+            </span>
+          </span>
+          <span class="forecast-side">
+            <span class="forecast-amount">
+              {{ formatForeignForecastAmount(item.amount) }} <em>{{ item.currencyUnit }}</em>
+            </span>
+            <span class="status-tag" :class="item.statusClass">{{ item.status }}</span>
+          </span>
+          <van-icon class="forecast-arrow" name="arrow" />
+        </button>
+
+        <van-empty
+          v-if="!listLoading && forecastList.length === 0"
+          image-size="72"
+          description="暂无外币预报信息"
+        />
+      </van-list>
+    </section>
+
+    <button class="fab" type="button" aria-label="新增外币预报" @click="openCreatePage">
+      <van-icon name="plus" />
+    </button>
+
+    <Transition name="back-top">
+      <button
+        v-show="showBackTop"
+        class="back-top-btn"
+        type="button"
+        aria-label="返回顶部"
+        @click="scrollToTop"
+      >
+        <van-icon name="arrow-up" />
+      </button>
+    </Transition>
+
+    <van-popup v-model:show="showDatePicker" position="bottom" round safe-area-inset-bottom>
+      <van-date-picker
+        v-model="datePickerValue"
+        title="选择起息日"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @cancel="showDatePicker = false"
+        @confirm="confirmDate"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showSelector" position="bottom" round safe-area-inset-bottom>
+      <section class="selector-panel">
+        <header class="selector-header">
+          <button type="button" @click="showSelector = false">取消</button>
+          <strong>{{ selectorTitle }}</strong>
+          <span></span>
+        </header>
+        <button
+          v-for="item in selectorOptions"
+          :key="item.value || item.label"
+          class="selector-option"
+          type="button"
+          @click="chooseSelectorOption(item)"
+        >
+          <span>{{ item.label }}</span>
+          <van-icon
+            v-if="
+              (selectorType === 'currency' && item.value === queryForm.currency) ||
+              (selectorType === 'business' && item.value === queryForm.business) ||
+              (selectorType === 'status' && item.value === queryForm.status)
+            "
+            name="success"
+          />
+        </button>
+      </section>
+    </van-popup>
   </main>
 </template>
 
 <style scoped>
-.page {
+.foreign-page {
+  position: relative;
+  width: 100%;
   max-width: 750px;
   min-height: var(--app-page-min-height, 100vh);
   margin: 0 auto;
-  padding: 0 11px;
-  background: #f7f8fa;
+  padding: 13px 13px calc(env(safe-area-inset-bottom, 0px) + 118px);
+  color: #080d1f;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(255, 242, 243, 0.92), transparent 118px),
+    linear-gradient(180deg, #ffffff 0%, #fbfcfd 54%, #ffffff 100%);
+  box-sizing: border-box;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  appearance: none;
+}
+
+.query-card {
+  overflow: hidden;
+  border-radius: 13px;
+  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.06);
+}
+
+.hero-panel {
+  position: relative;
+  height: 143px;
+  overflow: hidden;
+  border-radius: 13px 13px 0 0;
+  background:
+    radial-gradient(circle at 72% 80%, rgba(255, 255, 255, 0.16), transparent 74px),
+    radial-gradient(circle at 92% 14%, rgba(255, 255, 255, 0.13), transparent 58px),
+    linear-gradient(135deg, #ff2736 0%, #ff3a42 42%, #ff454b 100%);
+}
+
+.hero-panel::after {
+  position: absolute;
+  right: 15px;
+  bottom: 14px;
+  width: 26px;
+  height: 64px;
+  border-radius: 3px;
+  background: rgba(255, 137, 137, 0.34);
+  box-shadow: -21px 14px 0 rgba(255, 137, 137, 0.28);
+  content: '';
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 2;
+  padding: 32px 0 0 15px;
+  color: #ffffff;
+}
+
+.hero-copy h2 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  margin: 18px 0 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.hero-image {
+  position: absolute;
+  right: 9px;
+  bottom: -8px;
+  z-index: 1;
+  width: 132px;
+  height: 132px;
+  object-fit: contain;
+  filter: drop-shadow(0 12px 20px rgba(165, 0, 18, 0.16));
+}
+
+.filter-sticky {
+  position: sticky;
+  top: calc(50px + env(safe-area-inset-top, 0px));
+  z-index: 15;
+  margin-top: -18px;
+}
+
+.filter-panel {
+  position: relative;
+  z-index: 1;
+  padding: 12px 13px 14px;
+  border-radius: 13px;
+  background: #ffffff;
+  box-shadow: 0 -4px 18px rgba(255, 66, 76, 0.06);
+}
+
+.filter-panel.is-collapsed {
+  padding-bottom: 12px;
+}
+
+.filter-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 72px;
+  column-gap: 10px;
+  align-items: center;
+}
+
+.filter-heading {
+  min-width: 0;
+}
+
+.filter-heading strong,
+.filter-heading span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-heading strong {
+  color: #101525;
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.25;
+}
+
+.filter-heading span {
+  margin-top: 3px;
+  color: #818899;
+  font-size: 11px;
+  line-height: 1.25;
+}
+
+.filter-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 30px;
+  border: 1px solid #ffd5da;
+  border-radius: 15px;
+  color: #f42b3a;
+  font-size: 12px;
+  font-weight: 650;
+  background: #fff7f8;
+}
+
+.filter-toggle .van-icon {
+  font-size: 14px;
+}
+
+.filter-body {
+  overflow: hidden;
+  margin-top: 8px;
+  border-top: 1px solid #eef0f4;
+}
+
+.filter-body-enter-active,
+.filter-body-leave-active {
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+}
+
+.filter-body-enter-from,
+.filter-body-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  color: #080d1f;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.filter-row + .filter-row {
+  border-top: 1px solid #eef0f4;
+}
+
+.row-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+  border-radius: 6px;
+  color: #f42b3a;
+  font-size: 16px;
+  background: linear-gradient(135deg, #fff2f3 0%, #ffe4e6 100%);
+}
+
+.row-label {
+  width: 92px;
+  flex: 0 0 92px;
+  margin-left: 11px;
+  color: #151827;
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.row-value {
+  overflow: hidden;
+  margin-left: auto;
+  color: #202638;
+  font-size: 14px;
+  line-height: 1.2;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.muted-value {
+  color: #8d95a6;
+}
+
+.row-input {
+  width: 0;
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  color: #202638;
+  font-size: 13px;
+  text-align: right;
+  background: transparent;
+}
+
+.row-input::placeholder,
+.amount-input::placeholder {
+  color: #a6adbd;
+}
+
+.amount-input::placeholder {
+  font-size: 10px;
+}
+
+.row-calendar {
+  margin-left: 12px;
+  color: #a7adba;
+  font-size: 16px;
+}
+
+.row-arrow {
+  margin-left: 12px;
+  color: #9fa6b5;
+  font-size: 15px;
+}
+
+.amount-row {
+  gap: 0;
+  min-height: 52px;
+}
+
+.amount-row .row-label {
+  width: 58px;
+  flex-basis: 58px;
+  margin-right: 8px;
+}
+
+.amount-input {
+  width: 0;
+  min-width: 0;
+  flex: 1 1 0;
+  height: 28px;
+  border: 1px solid #e5e8ef;
+  border-radius: 6px;
+  padding: 0 4px;
+  color: #202638;
+  font-size: 11px;
+  text-align: center;
+  outline: 0;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.amount-divider {
+  flex: 0 0 18px;
+  color: #8c94a5;
+  font-size: 13px;
+  text-align: center;
+}
+
+.filter-actions {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.reset-btn,
+.search-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 34px;
+  border-radius: 18px;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.reset-btn {
+  border: 1px solid #ffd5da;
+  color: #f42b3a;
+  background: #fff7f8;
+}
+
+.search-btn {
+  color: #ffffff;
+  background: linear-gradient(135deg, #ff3340 0%, #ff1d34 100%);
+  box-shadow: 0 8px 16px rgba(255, 36, 52, 0.18);
+}
+
+.reset-btn .van-icon,
+.search-btn .van-icon {
+  font-size: 17px;
+}
+
+.forecast-card {
+  margin-top: 9px;
+  overflow: hidden;
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 7px 22px rgba(21, 28, 45, 0.055);
+}
+
+.forecast-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) auto 14px;
+  column-gap: 10px;
+  align-items: center;
+  width: 100%;
+  min-height: 91px;
+  padding: 14px 17px;
+  color: #080d1f;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.forecast-item + .forecast-item {
+  border-top: 1px solid #edf0f3;
+}
+
+.forecast-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  color: #111728;
+  font-size: 24px;
+  background: #fff0f1;
+}
+
+.forecast-avatar .van-icon {
+  transform: translateY(1px);
+}
+
+.forecast-main {
+  min-width: 0;
+}
+
+.forecast-main strong {
+  display: block;
+  overflow: hidden;
+  color: #080d1f;
+  font-size: 14px;
+  font-weight: 760;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.forecast-date,
+.forecast-business {
+  display: block;
+  overflow: hidden;
+  margin-top: 7px;
+  font-size: 12px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.forecast-date {
+  color: #8a92a3;
+}
+
+.forecast-business {
+  color: #111728;
+}
+
+.forecast-side {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  min-width: 100px;
+}
+
+.forecast-amount {
+  color: #20ad5b;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.forecast-amount em {
+  color: #20ad5b;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  max-width: 128px;
+  margin-top: 10px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 2px 7px;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1.25;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.status-tag-confirmed {
+  border-color: #d8e1ee;
+  color: #687083;
+  background: #ffffff;
+}
+
+.status-tag-pending {
+  border-color: #ffd99a;
+  color: #a05a00;
+  background: #fff4d8;
+}
+
+.status-tag-cancelled {
+  border-color: #d6dbe3;
+  color: #687083;
+  background: #f3f5f8;
+}
+
+.status-tag-verified {
+  border-color: #b7ebc9;
+  color: #0b8f3a;
+  background: #e4f8eb;
 }
-.page-body {
-  padding: 24px 0;
+
+.status-tag-rejected {
+  border-color: #ffc0cb;
+  color: #bf2549;
+  background: #ffe8ed;
+}
+
+.status-tag-unknown {
+  border-color: #d6dbe3;
+  color: #687083;
+  background: #f3f5f8;
+}
+
+.forecast-arrow {
+  color: #9da4b3;
+  font-size: 15px;
+}
+
+.fab {
+  position: fixed;
+  right: max(25px, calc((100vw - 750px) / 2 + 25px));
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 35px);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  color: #ffffff;
+  font-size: 31px;
+  background: linear-gradient(145deg, #ff4050 0%, #f50f2d 100%);
+  box-shadow: 0 13px 28px rgba(244, 29, 48, 0.34);
+}
+
+.back-top-btn {
+  position: fixed;
+  right: max(31px, calc((100vw - 750px) / 2 + 31px));
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 99px);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 50%;
+  color: #f22f3d;
+  font-size: 20px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 10px 24px rgba(21, 28, 45, 0.13);
+  backdrop-filter: blur(12px);
+}
+
+.back-top-enter-active,
+.back-top-leave-active {
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
+}
+
+.back-top-enter-from,
+.back-top-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.92);
+}
+
+.selector-panel {
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
+  background: #ffffff;
+}
+
+.selector-header {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) 56px;
+  align-items: center;
+  height: 48px;
+  border-bottom: 1px solid #eef0f4;
+  padding: 0 12px;
+}
+
+.selector-header button {
+  color: #6f7788;
+  font-size: 14px;
+  text-align: left;
 }
-.placeholder {
+
+.selector-header strong {
+  color: #111728;
+  font-size: 15px;
+  font-weight: 700;
   text-align: center;
-  color: #969799;
+}
+
+.selector-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 48px;
+  border-bottom: 1px solid #f1f3f6;
+  padding: 0 18px;
+  color: #151827;
   font-size: 14px;
-  padding-top: 120px;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.selector-option .van-icon {
+  color: #f42b3a;
+  font-size: 18px;
+}
+
+@media (max-width: 340px) {
+  .amount-row {
+    gap: 5px;
+  }
+
+  .amount-input {
+    width: 0;
+    padding: 0 5px;
+    font-size: 11px;
+  }
+
+  .row-label {
+    width: 80px;
+    flex-basis: 80px;
+    margin-left: 9px;
+  }
+
+  .amount-row .row-label {
+    width: 52px;
+    flex-basis: 52px;
+  }
+
+  .forecast-item {
+    grid-template-columns: 38px minmax(0, 1fr) auto 12px;
+    column-gap: 8px;
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+
+  .forecast-side {
+    min-width: 88px;
+  }
 }
 </style>