vue2server7 7.0.118 → 7.0.119

package/test/mini2.0-main/src/utils/request.ts

@@ -0,0 +1,159 @@
+import axios from 'axios'
+import type { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from 'axios'
+import { showToast } from 'vant'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import { apiConfig } from '@/config/env'
+import type { ApiResponse } from '@/types/api'
+import router from '@/router'
+
+// 关闭 NProgress 右侧旋转小圆圈，保持进度条简洁
+NProgress.configure({ showSpinner: false })
+
+// localStorage 中存储 token 的 key，与登录/登出逻辑保持一致
+const TOKEN_KEY = 'token'
+
+// 创建 axios 实例，baseURL 和 timeout 从环境变量配置中读取
+const service: AxiosInstance = axios.create({
+  baseURL: apiConfig.baseURL, // 接口基础地址，由 .env 文件中的 VITE_API_BASE_URL 决定
+  timeout: apiConfig.timeout, // 请求超时时间（毫秒），默认 10000
+})
+
+/**
+ * 请求拦截器
+ * 在每个请求发出前执行：
+ * 1. 启动顶部进度条
+ * 2. 自动携带 JWT token 到请求头
+ */
+service.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    // 开始加载进度条
+    NProgress.start()
+
+    // 从本地存储读取 token，存在则添加到请求头
+    const token = localStorage.getItem(TOKEN_KEY)
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+
+    return config
+  },
+  // 请求配置出错时（如网络断开），结束进度条并抛出错误
+  (error) => {
+    NProgress.done()
+    return Promise.reject(error)
+  },
+)
+
+/**
+ * 响应拦截器
+ * 在收到响应后执行：
+ * 1. 结束进度条
+ * 2. 判断后端业务 code，非 0 视为业务失败
+ * 3. HTTP 状态码异常时给出中文提示
+ * 4. 401 统一清除 token 并跳转登录页
+ */
+service.interceptors.response.use(
+  // ——— 成功响应（HTTP 2xx）———
+  (response: AxiosResponse<ApiResponse>) => {
+    NProgress.done()
+
+    // 后端返回的数据结构：{ code, message, data }
+    const res = response.data
+
+    // 业务层错误：后端返回了 HTTP 200，但 code 不为 0，表示业务处理失败
+    if (res.code !== 0) {
+      showToast(res.message || '请求失败')
+
+      // token 过期或无效，清除本地 token 并跳转登录页
+      if (res.code === 401) {
+        localStorage.removeItem(TOKEN_KEY)
+        router.push('/login')
+      }
+
+      // 将业务错误抛出，调用方可通过 catch 捕获
+      return Promise.reject(new Error(res.message || '请求失败'))
+    }
+
+    // 业务成功，直接返回 data 字段，调用方无需再解包 response.data.data
+    return res as unknown as AxiosResponse
+  },
+
+  // ——— 失败响应（HTTP 非 2xx 或网络错误）———
+  (error) => {
+    NProgress.done()
+
+    // HTTP 状态码 → 中文提示映射表
+    const statusCodeMap: Record<number, string> = {
+      400: '请求参数错误',
+      401: '未授权，请重新登录',
+      403: '拒绝访问',
+      404: '请求资源不存在',
+      500: '服务器内部错误',
+    }
+
+    // 优先取映射表中的提示，没有则显示状态码；无 response 说明是网络异常
+    const status = error.response?.status as number
+    const message = error.response
+      ? statusCodeMap[status] || `连接错误 ${status}`
+      : '网络连接异常'
+
+    showToast(message)
+
+    // 401 未授权：清除 token 并跳转登录页
+    if (error.response?.status === 401) {
+      localStorage.removeItem(TOKEN_KEY)
+      router.push('/login')
+    }
+
+    return Promise.reject(error)
+  },
+)
+
+/**
+ * 请求配置接口
+ * @property url      - 请求地址（必填）
+ * @property method   - 请求方法，默认 GET
+ * @property data     - 请求体（POST/PUT/PATCH 时使用）
+ * @property params   - URL 查询参数（拼接到 ?key=value）
+ */
+export interface RequestConfig<T = unknown> {
+  url: string
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  data?: T
+  params?: Record<string, unknown>
+  headers?: Record<string, string>
+  auth?: { username: string; password: string } // HTTP Basic Auth
+}
+
+/**
+ * 通用请求函数
+ * @typeParam R - 响应 data 的类型（后端返回的 data 字段类型）
+ * @typeParam T - 请求参数的类型（data 的类型）
+ * @param config - 请求配置对象
+ * @returns Promise，resolve 后直接拿到 ApiResponse<R>
+ *
+ * @example
+ * // GET 请求
+ * request<UserInfo>({ url: '/user/1' })
+ *
+ * // POST 请求
+ * request<{ token: string }, LoginParams>({
+ *   url: '/login',
+ *   method: 'POST',
+ *   data: { username: 'admin', password: '123' }
+ * })
+ */
+export function request<R = unknown, T = unknown>(config: RequestConfig<T>): Promise<ApiResponse<R>> {
+  return service.request<ApiResponse<R>>({
+    url: config.url,
+    method: config.method || 'GET',
+    data: config.data,
+    params: config.params,
+    headers: config.headers,
+    auth: config.auth,
+  }) as unknown as Promise<ApiResponse<R>>
+}
+
+// 同时导出 axios 实例，供需要直接使用 axios 原生方法的场景（如文件上传）
+export default service

package/test/mini2.0-main/src/views/clearing-detail/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main class="page">
+    <header class="page-header">
+      <button class="back-btn" type="button" @click="$router.back()">←</button>
+      <h1>人民币小额网银清算场次明细</h1>
+    </header>
+    <section class="page-body">
+      <p class="placeholder">页面建设中…</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 750px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 0 11px;
+  background: #f7f8fa;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+}
+.back-btn {
+  border: 0;
+  background: transparent;
+  font-size: 20px;
+  cursor: pointer;
+}
+.page-header h1 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+}
+.page-body {
+  padding: 24px 0;
+}
+.placeholder {
+  text-align: center;
+  color: #969799;
+  font-size: 14px;
+  padding-top: 120px;
+}
+</style>

package/test/mini2.0-main/src/views/foreign-position/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main class="page">
+    <header class="page-header">
+      <button class="back-btn" type="button" @click="$router.back()">←</button>
+      <h1>外币头寸预报及查询</h1>
+    </header>
+    <section class="page-body">
+      <p class="placeholder">页面建设中…</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 750px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 0 11px;
+  background: #f7f8fa;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+}
+.back-btn {
+  border: 0;
+  background: transparent;
+  font-size: 20px;
+  cursor: pointer;
+}
+.page-header h1 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+}
+.page-body {
+  padding: 24px 0;
+}
+.placeholder {
+  text-align: center;
+  color: #969799;
+  font-size: 14px;
+  padding-top: 120px;
+}
+</style>

package/test/mini2.0-main/src/views/home/index.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts" name="HomePage">
+type HomeFeature = {
+  title: string[]
+  image: string
+  route: string
+}
+
+defineOptions({ name: 'HomePage' })
+
+const bannerImage = '/images/img.png'
+
+const router = useRouter()
+
+const features: HomeFeature[] = [
+  {
+    title: ['人民币头寸', '预报及查询'],
+    image: '/images/f5876785-b927-4347-ba19-999114240649.png',
+    route: '/rmb-position',
+  },
+  {
+    title: ['外币头寸', '预报及查询'],
+    image: '/images/12a73787-86a9-4891-a65f-66104746f6a8.png',
+    route: '/foreign-position',
+  },
+  {
+    title: ['人行头寸', '余额查询'],
+    image: '/images/73fef1e4-0fd0-4a1a-9b8b-a70a5b6acbbc.png',
+    route: '/pbc-position',
+  },
+  {
+    title: ['头寸匡算'],
+    image: '/images/ea745a10-42aa-4f44-8d7f-3ab02cc0adcd.png',
+    route: '/position-estimate',
+  },
+  {
+    title: ['人民币净借记', '可用额度管理'],
+    image: '/images/5798d7aa-ba8b-4605-8079-58b35495ac55.png',
+    route: '/net-debit',
+  },
+  {
+    title: ['人民币小额网银', '清算场次明细'],
+    image: '/images/c3dbbd9d-be56-490e-b9f4-6ee17ebefffc.png',
+    route: '/clearing-detail',
+  },
+  {
+    title: ['预警信息'],
+    image: '/images/bc685b4c-0cca-4a79-924c-a8ee10e6f8eb.png',
+    route: '/warning',
+  },
+]
+</script>
+
+<template>
+  <main class="home-page">
+    <section class="banner-section" aria-label="欢迎登录头寸管理系统">
+      <img class="banner-image" :src="bannerImage" alt="欢迎登录头寸管理系统" />
+    </section>
+
+    <section class="feature-section">
+      <div class="section-title">
+        <span class="section-title-mark"></span>
+        <h2>常用功能</h2>
+      </div>
+
+      <div class="feature-grid">
+        <button
+          v-for="item in features"
+          :key="item.title.join('')"
+          class="feature-card"
+          type="button"
+          @click="router.push(item.route)"
+        >
+          <span class="feature-title">
+            <span v-for="line in item.title" :key="line">{{ line }}</span>
+          </span>
+          <span class="feature-arrow" aria-hidden="true"><van-icon name="arrow" /></span>
+          <img class="feature-image" :src="item.image" :alt="item.title.join('')" />
+        </button>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.home-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 7px 11px 16px;
+  color: #171b20;
+  background:
+    radial-gradient(circle at 50% 12%, rgba(255, 245, 245, 0.88), transparent 124px),
+    #ffffff;
+  box-sizing: border-box;
+}
+
+.feature-card {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
+}
+
+.banner-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 9px;
+}
+
+.feature-section {
+  margin-top: 18px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  margin-bottom: 11px;
+  padding-left: 2px;
+}
+
+.section-title-mark {
+  width: 5px;
+  height: 16px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #ff1826 0%, #ff4854 100%);
+}
+
+.section-title h2 {
+  margin: 0;
+  color: #171b20;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.feature-card {
+  position: relative;
+  height: 104px;
+  overflow: hidden;
+  text-align: left;
+  border: 1px solid #ffdfe1;
+  border-radius: 9px;
+  background:
+    radial-gradient(circle at 78% 74%, rgba(255, 225, 225, 0.52), transparent 58px),
+    linear-gradient(135deg, #fff4f4 0%, #ffffff 52%, #fffafa 100%);
+  box-shadow: 0 4px 14px rgba(250, 70, 78, 0.035);
+}
+
+.feature-title {
+  position: absolute;
+  top: 16px;
+  left: 12px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: 104px;
+  padding: 0;
+  color: #15191d;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.42;
+  word-break: keep-all;
+}
+
+.feature-arrow {
+  position: absolute;
+  left: 12px;
+  bottom: 20px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #ff3443 0%, #ff5b62 100%);
+  color: #ffffff;
+  font-size: 11px;
+}
+
+.feature-image {
+  position: absolute;
+  right: -4px;
+  bottom: -7px;
+  width: 94px;
+  height: 94px;
+  object-fit: contain;
+  pointer-events: none;
+}
+</style>

package/test/mini2.0-main/src/views/login/index.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { login } from '@/api/user'
+import { showToast } from 'vant'
+import { useUserStore } from '@/stores/user'
+import { isNativeApp, getEncryptString } from '@/core/mxApi'
+
+const router = useRouter()
+const userStore = useUserStore()
+const isNative = isNativeApp()
+
+const form = ref({
+  username: '',
+  password: '',
+})
+
+const loading = ref(false)
+
+// 原生环境：从客户端获取密钥，直接交换 token
+onMounted(async () => {
+  if (!isNativeApp()) return
+
+  loading.value = true
+  try {
+    const secret = await getEncryptString()
+  console.log(secret)
+  } catch {
+    // 错误已由 request.ts 拦截器统一处理
+  } finally {
+    loading.value = false
+  }
+})
+
+async function onSubmit() {
+  loading.value = true
+  try {
+    const res = await login(form.value) as any
+    userStore.setToken(res.data.token)
+    showToast('登录成功')
+    router.push('/')
+  } catch {
+    // 错误已由 request.ts 拦截器统一处理
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <!-- 原生环境：自动登录，只显示加载状态 -->
+    <van-loading v-if="isNative" vertical class="native-loading">
+      正在登录...
+    </van-loading>
+
+    <!-- 浏览器环境：显示登录表单 -->
+    <template v-else>
+      <section class="login-header">
+        <p class="login-eyebrow">Welcome back</p>
+        <h1 class="login-title">账号登录</h1>
+        <p class="login-subtitle">请输入账号信息继续访问</p>
+      </section>
+
+      <van-form class="login-form" @submit="onSubmit">
+        <van-cell-group inset class="form-panel">
+          <van-field
+            v-model="form.username"
+            name="username"
+            label="用户名"
+            placeholder="请输入用户名"
+            :rules="[{ required: true, message: '请输入用户名' }]"
+          />
+          <van-field
+            v-model="form.password"
+            type="password"
+            name="password"
+            label="密码"
+            placeholder="请输入密码"
+            :rules="[{ required: true, message: '请输入密码' }]"
+          />
+        </van-cell-group>
+        <div class="btn-wrap">
+          <van-button block round type="primary" native-type="submit" :loading="loading">
+            登录
+          </van-button>
+        </div>
+      </van-form>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  min-height: 100vh;
+  padding: 72px 24px 24px;
+  background:
+    radial-gradient(circle at 18% 8%, rgba(25, 137, 250, 0.16), transparent 110px),
+    linear-gradient(180deg, #f6f9ff 0%, #ffffff 44%, #f7f8fa 100%);
+  box-sizing: border-box;
+}
+
+.login-header {
+  margin-bottom: 36px;
+}
+
+.login-eyebrow {
+  margin: 0 0 10px;
+  color: #1989fa;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.login-title {
+  margin: 0;
+  color: #1f2937;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.18;
+}
+
+.login-subtitle {
+  margin: 10px 0 0;
+  color: #6b7280;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.login-form {
+  --van-cell-font-size: 15px;
+  --van-cell-line-height: 24px;
+  --van-cell-vertical-padding: 15px;
+  --van-cell-horizontal-padding: 16px;
+  --van-field-label-width: 66px;
+  --van-field-label-margin-right: 8px;
+  --van-field-placeholder-text-color: #b6bdc8;
+  --van-button-large-height: 48px;
+  --van-button-default-height: 48px;
+  --van-button-default-font-size: 17px;
+}
+
+.form-panel {
+  margin: 0;
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.08);
+}
+
+.btn-wrap {
+  margin-top: 28px;
+}
+
+.btn-wrap :deep(.van-button) {
+  border: 0;
+  background: linear-gradient(135deg, #1989fa 0%, #1268e5 100%);
+  box-shadow: 0 9px 18px rgba(25, 137, 250, 0.26);
+  font-weight: 600;
+}
+
+.native-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+}
+</style>

package/test/mini2.0-main/src/views/net-debit/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main class="page">
+    <header class="page-header">
+      <button class="back-btn" type="button" @click="$router.back()">←</button>
+      <h1>人民币净借记可用额度管理</h1>
+    </header>
+    <section class="page-body">
+      <p class="placeholder">页面建设中…</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 750px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 0 11px;
+  background: #f7f8fa;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+}
+.back-btn {
+  border: 0;
+  background: transparent;
+  font-size: 20px;
+  cursor: pointer;
+}
+.page-header h1 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+}
+.page-body {
+  padding: 24px 0;
+}
+.placeholder {
+  text-align: center;
+  color: #969799;
+  font-size: 14px;
+  padding-top: 120px;
+}
+</style>