verce-vue-test 0.0.31 → 0.0.33

package/mini2.0-main/src/core/mxApi/index.ts

@@ -5,24 +5,30 @@
  * 提供原生能力调用：UI 控制、用户信息、选人组件、原生 HTTP 请求
  */
 
+import { appendQuery } from '@/utils/query'
+
 // ============================================================
 // 类型定义
 // ============================================================
 
 /** 原生 AJAX 请求参数 */
-interface MXAjaxParams {
+export interface MXAjaxParams {
   type: 'GET' | 'POST' | 'PUT' | 'DELETE'
   url: string
-  data?: unknown
+  dataType?: string
   async?: boolean
-  success?: (data: string, status: number, xhr: unknown) => void
-  error?: (data: unknown, status: number, xhr: unknown) => void
+  data?: unknown
+  headers?: Record<string, string>
+  complete?: () => void
+  success?: (data: unknown, status?: number, xhr?: unknown) => void
+  error?: (data: unknown, status?: number, xhr?: unknown) => void
 }
 
 /** 原生 AJAX 响应 */
 export interface MXAjaxResponse<T = unknown> {
   data: T
-  status: number
+  status?: number
+  xhr?: unknown
 }
 
 /** 用户信息 */
@@ -47,19 +53,27 @@ interface MXApiCallbacks {
 }
 
 /** 原生接口命名空间 */
-type MXNamespace = 'MXCommon' | 'MXWebui' | 'MXContacts'
+type MXNamespace = 'MXCommon' | 'NXCommon' | 'MXWebui' | 'MXContacts'
 
 // ============================================================
 // 声明全局原生接口
 // ============================================================
 
 declare global {
+  const MXCommon: Window['MXCommon']
+  const NXCommon: Window['NXCommon']
+  const MXWebui: Window['MXWebui']
+  const MXContacts: Window['MXContacts']
+
   interface Window {
     MXCommon?: {
       getCurrentUser: (callback: (user: MXUser) => void) => void
       getEncryptString: (callback: (secret: string) => void) => void
       ajax: (params: MXAjaxParams) => void
     }
+    NXCommon?: {
+      ajax: (params: MXAjaxParams) => void
+    }
     MXWebui?: {
       hideWebViewTitle: () => void
       showOptionMenu: () => void
@@ -143,64 +157,33 @@ const makeApi =
   (api: string, ...args: unknown[]) =>
     applyApi(namespace, api, args)
 
-const MXCommon = makeApi('MXCommon')
-const MXWebui = makeApi('MXWebui')
-const MXContacts = makeApi('MXContacts')
+const callMXCommon = makeApi('MXCommon')
+const callNXCommon = makeApi('NXCommon')
+const callMXWebui = makeApi('MXWebui')
+const callMXContacts = makeApi('MXContacts')
 
 // ============================================================
 // 导出的业务 API
 // ============================================================
 
 /** 隐藏 WebView 标题栏 */
-export const hideWebViewTitle = (): void => MXWebui('hideWebViewTitle')
+export const hideWebViewTitle = (): void => callMXWebui('hideWebViewTitle')
 
 /** 显示右上角菜单按钮 */
-export const showOptionMenu = (): void => MXWebui('showOptionMenu')
+export const showOptionMenu = (): void => callMXWebui('showOptionMenu')
 
 /** 设置自定义头部菜单 */
 export const setCustomHeaderMenu = (...args: unknown[]): void =>
-  MXWebui('setCustomHeaderMenu', ...args)
-
-/** 超时兜底：原生回调未触发时自动执行 onError */
-function withCallbackTimeout<T extends (...args: any[]) => void>(
-  onSuccess: T,
-  onError: (reason: string) => void,
-  ms: number,
-  label: string,
-): T {
-  const timer = setTimeout(() => onError(`[MX] ${label} 超时(${ms}ms)`), ms)
-  return ((...args: unknown[]) => {
-    clearTimeout(timer)
-    onSuccess(...args)
-  }) as unknown as T
-}
+  callMXWebui('setCustomHeaderMenu', ...args)
 
 /** 获取当前登录用户信息 */
-export const getCurrentUser = (
-  onSuccess: (user: MXUser) => void,
-  onError?: (reason: string) => void,
-  timeout = 5000,
-): void => {
-  MXCommon('getCurrentUser', withCallbackTimeout(
-    onSuccess,
-    (reason) => { console.error(reason); onError?.(reason) },
-    timeout,
-    'getCurrentUser',
-  ))
+export const getCurrentUser = (onSuccess: (user: MXUser) => void): void => {
+  MXCommon!.getCurrentUser(onSuccess)
 }
 
 /** 从原生客户端获取加密密钥 */
-export const getEncryptString = (
-  onSuccess: (secret: string) => void,
-  onError?: (reason: string) => void,
-  timeout = 5000,
-): void => {
-  MXCommon('getEncryptString', withCallbackTimeout(
-    onSuccess,
-    (reason) => { console.error(reason); onError?.(reason) },
-    timeout,
-    'getEncryptString',
-  ))
+export const getEncryptString = (onSuccess: (secret: string) => void): void => {
+  MXCommon!.getEncryptString(onSuccess)
 }
 
 /** 打开原生选人组件 */
@@ -208,7 +191,7 @@ export const MXSelectUsers = (
   options: MXSelectUsersOptions = { enableSelectDept: false, canSelectSelf: true }
 ): Promise<MXUser[]> =>
   new Promise((resolve) => {
-    MXContacts('selectUsers', (result: MXUser[]) => {
+    callMXContacts('selectUsers', (result: MXUser[]) => {
       resolve(result)
     }, options)
   })
@@ -217,58 +200,88 @@ export const MXSelectUsers = (
  * 原生 AJAX 请求
  *
  * 使用原生应用的 HTTP 客户端发起请求，绕过浏览器同源策略限制。
- * ajax 本身通过 success/error 回调，保留 Promise 包装；回调未触发时 15s 超时 reject。
+ * NXCommon.ajax 只支持回调，不返回 Promise。
  */
-export const ajax = <T = unknown>(params: Omit<MXAjaxParams, 'success' | 'error'>): Promise<MXAjaxResponse<T>> => {
-  const request = new Promise<MXAjaxResponse<T>>((resolve, reject) => {
-    const requestParams: MXAjaxParams = {
-      ...params,
-      url: `${import.meta.env.VITE_API_BASE_URL || ''}${params.url}`,
-      async: true,
-      success(data, status) {
-        resolve({ data: JSON.parse(data) as T, status })
-      },
-      error(data, status) {
-        reject({ data, status })
-      },
-    }
-
-    MXCommon('ajax', requestParams)
-  })
-
-  const timeout = new Promise<MXAjaxResponse<T>>((_, reject) =>
-    setTimeout(() => reject(new Error(`[MX] ajax ${params.type} ${params.url} 超时`)), 15000),
-  )
+export const ajax = (params: MXAjaxParams): void => {
+  const requestParams: MXAjaxParams = {
+    ...params,
+    url: normalizeAjaxUrl(params.url),
+    async: params.async ?? true,
+    dataType: params.dataType ?? 'text',
+    complete() {
+      params.complete?.()
+    },
+    success(data, status, xhr) {
+      params.success?.(data, status, xhr)
+    },
+    error(data, status, xhr) {
+      params.error?.(data, status, xhr)
+    },
+  }
 
-  return Promise.race([request, timeout])
+  callNativeAjax(requestParams)
 }
 
 /** 原生 GET 请求 */
-export const ajaxGet = <T = unknown>(url: string, query?: Record<string, unknown>): Promise<MXAjaxResponse<T>> => {
-  const queryString = query
-    ? '?' + Object.entries(query)
-        .filter(([, value]) => value !== undefined && value !== null)
-        .map(([key, value]) => `${key}=${value}`)
-        .join('&')
-    : ''
-
-  return ajax<T>({
+export const ajaxGet = (
+  url: string,
+  query?: Record<string, unknown>,
+  options?: Pick<MXAjaxParams, 'headers' | 'complete' | 'dataType' | 'success' | 'error'>,
+): void =>
+  ajax({
+    ...options,
     type: 'GET',
-    url: `${url}${queryString}`,
+    url: appendQuery(url, query),
   })
-}
 
 /** 原生 POST 请求 */
-export const ajaxPost = <T = unknown>(url: string, data?: unknown): Promise<MXAjaxResponse<T>> =>
-  ajax<T>({ type: 'POST', url, data })
+export const ajaxPost = (
+  url: string,
+  data?: unknown,
+  options?: Pick<MXAjaxParams, 'headers' | 'complete' | 'dataType' | 'success' | 'error'>,
+): void =>
+  ajax({ ...options, type: 'POST', url, data })
 
 /** 原生 PUT 请求 */
-export const ajaxPut = <T = unknown>(url: string, data?: unknown): Promise<MXAjaxResponse<T>> =>
-  ajax<T>({ type: 'PUT', url, data })
+export const ajaxPut = (
+  url: string,
+  data?: unknown,
+  options?: Pick<MXAjaxParams, 'headers' | 'complete' | 'dataType' | 'success' | 'error'>,
+): void =>
+  ajax({ ...options, type: 'PUT', url, data })
 
 /** 原生 DELETE 请求 */
-export const ajaxDelete = <T = unknown>(url: string, id: string): Promise<MXAjaxResponse<T>> =>
-  ajax<T>({ type: 'DELETE', url: `${url}/${id}` })
+export const ajaxDelete = (
+  url: string,
+  data?: unknown,
+  options?: Pick<MXAjaxParams, 'headers' | 'complete' | 'dataType' | 'success' | 'error'>,
+): void =>
+  ajax({
+    ...options,
+    type: 'DELETE',
+    url: typeof data === 'string' || typeof data === 'number'
+      ? `${url.replace(/\/+$/, '')}/${encodeURIComponent(String(data))}`
+      : url,
+    data: typeof data === 'string' || typeof data === 'number' ? undefined : data,
+  })
+
+function callNativeAjax(params: MXAjaxParams): void {
+  if (NXCommon?.ajax) {
+    callNXCommon('ajax', params)
+    return
+  }
+
+  callMXCommon('ajax', params)
+}
+
+function normalizeAjaxUrl(url: string): string {
+  if (/^[a-z][a-z\d+\-.]*:\/\//i.test(url)) return url
+
+  const baseURL = import.meta.env.VITE_API_BASE_URL || ''
+  if (!baseURL) return url
+
+  return `${baseURL.replace(/\/+$/, '')}/${url.replace(/^\/+/, '')}`
+}
 
 let nativeReady = false
 let resolveNativeReady: (() => void) | null = null
@@ -285,7 +298,7 @@ document.addEventListener('deviceready', () => {
 /**
  * 等待原生设备就绪（deviceready 事件触发后 resolve）
  *
- * native 环境下 deviceready 触发后 window.MXCommon 才注入完成，
+ * native 环境下 deviceready 触发后 MXCommon 才注入完成，
  * 之后 isNativeApp() 才能拿到正确结果。
  */
 export const whenNativeReady = (): Promise<boolean> => {
@@ -299,4 +312,4 @@ export const whenNativeReady = (): Promise<boolean> => {
 
 /** 检测是否在原生环境（需在 deviceready 之后调用才准确） */
 export const isNativeApp = (): boolean =>
-  typeof window.MXCommon !== 'undefined'
+  typeof MXCommon !== 'undefined' || typeof NXCommon !== 'undefined'

package/mini2.0-main/src/core/request/index.ts

@@ -5,10 +5,14 @@
  * 根据环境自动选择 axios 或原生 AJAX
  */
 
-import { isNativeApp, ajaxGet, ajaxPost, ajaxPut, ajaxDelete } from '@/core/mxApi'
-import type { MXAjaxResponse } from '@/core/mxApi'
+import { isNativeApp, ajax } from '@/core/mxApi'
+import type { MXAjaxParams, MXAjaxResponse } from '@/core/mxApi'
 import { request as axiosRequest } from '@/utils/request'
+import { appendQuery } from '@/utils/query'
 import type { ApiResponse } from '@/types/api'
+import { showToast } from 'vant'
+import NProgress from 'nprogress'
+import router from '@/router'
 
 // ============================================================
 // Token 管理
@@ -79,6 +83,10 @@ export async function request<R = unknown, T = unknown>(
     ...customHeaders,
   }
 
+  if (auth && !headers.Authorization) {
+    headers.Authorization = `Basic ${window.btoa(`${auth.username}:${auth.password}`)}`
+  }
+
 
   if (isNativeApp()) {
     return await nativeRequest<R, T>({ url, method, data, params, headers })
@@ -98,32 +106,216 @@ export async function request<R = unknown, T = unknown>(
 async function nativeRequest<R, T>(
   config: RequestConfig<T>
 ): Promise<ApiResponse<R>> {
-  const { url, method, data, params } = config
-
-  let response: MXAjaxResponse<unknown>
-
-  switch (method) {
-    case 'GET':
-      response = await ajaxGet<R>(url, params)
-      break
-    case 'POST':
-      response = await ajaxPost<R>(url, data)
-      break
-    case 'PUT':
-      response = await ajaxPut<R>(url, data)
-      break
-    case 'DELETE':
-      const id = params?.id as string
-      response = await ajaxDelete<R>(url, id)
-      break
-    default:
-      throw new Error(`不支持的请求方法: ${method}`)
+  const { url, method, data, params, headers } = config
+
+  NProgress.start()
+
+  try {
+    const options = { headers, dataType: 'text' }
+    let response: MXAjaxResponse<ApiResponse<R>>
+
+    switch (method) {
+      case 'GET':
+        response = await nativeAjax<ApiResponse<R>>({
+          ...options,
+          type: 'GET',
+          url: appendQuery(url, params),
+        })
+        break
+      case 'POST':
+        response = await nativeAjax<ApiResponse<R>>({
+          ...options,
+          type: 'POST',
+          url,
+          data,
+        })
+        break
+      case 'PUT':
+        response = await nativeAjax<ApiResponse<R>>({
+          ...options,
+          type: 'PUT',
+          url,
+          data,
+        })
+        break
+      case 'DELETE':
+        response = await nativeAjax<ApiResponse<R>>({
+          ...options,
+          type: 'DELETE',
+          url: appendDeleteParams(url, params),
+          data,
+        })
+        break
+      default:
+        throw new Error(`不支持的请求方法: ${method}`)
+    }
+
+    const result = normalizeNativeResponse<R>(response)
+
+    if (result.code !== 0) {
+      showToast(result.message || '请求失败')
+
+      if (result.code === 401) {
+        clearToken()
+        router.push('/login')
+      }
+
+      const error = new Error(result.message || '请求失败') as Error & { handled?: boolean }
+      error.handled = true
+      throw error
+    }
+
+    return result
+  } catch (error) {
+    const nativeError = error as Error & { status?: number; data?: unknown; handled?: boolean }
+    if (nativeError.handled) {
+      throw error
+    }
+
+    const status = nativeError.status
+    const statusCodeMap: Record<number, string> = {
+      400: '请求参数错误',
+      401: '未授权，请重新登录',
+      403: '拒绝访问',
+      404: '请求资源不存在',
+      500: '服务器内部错误',
+    }
+
+    showToast(status ? statusCodeMap[status] || `连接错误 ${status}` : nativeError.message || '网络连接异常')
+
+    if (status === 401) {
+      clearToken()
+      router.push('/login')
+    }
+
+    throw error
+  } finally {
+    NProgress.done()
+  }
+}
+
+function normalizeNativeResponse<R>(response: MXAjaxResponse<unknown>): ApiResponse<R> {
+  const data = response.data
+
+  if (isApiResponse<R>(data)) {
+    return data
   }
 
-  // 包装成与 axios 拦截器一致的响应格式
   return {
     code: 0,
     message: 'success',
-    data: response.data as R,
-  } as ApiResponse<R>
+    data: data as R,
+  }
+}
+
+function isApiResponse<R>(value: unknown): value is ApiResponse<R> {
+  return typeof value === 'object'
+    && value !== null
+    && typeof (value as ApiResponse<R>).code === 'number'
+    && 'data' in value
+}
+
+function appendDeleteParams(url: string, params?: Record<string, unknown>): string {
+  if (!params) return url
+
+  const { id, ...rest } = params
+  const targetUrl = id === undefined || id === null
+    ? url
+    : `${url.replace(/\/+$/, '')}/${encodeURIComponent(String(id))}`
+
+  const query = new URLSearchParams()
+  Object.entries(rest).forEach(([key, value]) => {
+    if (value === undefined || value === null) return
+    query.append(key, String(value))
+  })
+
+  const queryString = query.toString()
+  if (!queryString) return targetUrl
+
+  return `${targetUrl}${targetUrl.includes('?') ? '&' : '?'}${queryString}`
+}
+
+function nativeAjax<T>(params: MXAjaxParams & { timeout?: number }): Promise<MXAjaxResponse<T>> {
+  const { timeout = 15000, ...ajaxParams } = params
+
+  return new Promise((resolve, reject) => {
+    let settled = false
+    const timer = window.setTimeout(() => {
+      if (settled) return
+      settled = true
+      reject(new Error(`[MX] ajax ${ajaxParams.type} ${ajaxParams.url} 超时(${timeout}ms)`))
+    }, timeout)
+
+    const settle = (callback: () => void) => {
+      if (settled) return
+      settled = true
+      window.clearTimeout(timer)
+      callback()
+    }
+
+    ajax({
+      ...ajaxParams,
+      success(data, status, xhr) {
+        settle(() => {
+          ajaxParams.success?.(data, status, xhr)
+          resolve({
+            data: parseAjaxData<T>(data, ajaxParams.dataType),
+            status,
+            xhr,
+          })
+        })
+      },
+      error(data, status, xhr) {
+        settle(() => {
+          ajaxParams.error?.(data, status, xhr)
+          reject(createNativeAjaxError(data, status, xhr, ajaxParams))
+        })
+      },
+      complete() {
+        ajaxParams.complete?.()
+      },
+    })
+  })
+}
+
+function parseAjaxData<T>(data: unknown, dataType?: string): T {
+  if (dataType === 'text') {
+    return parseJsonString(data) as T
+  }
+
+  if (typeof data !== 'string') return data as T
+
+  return parseJsonString(data) as T
+}
+
+function parseJsonString(data: unknown): unknown {
+  if (typeof data !== 'string') return data
+
+  const trimmed = data.trim()
+  if (!trimmed) return undefined
+
+  try {
+    return JSON.parse(trimmed)
+  } catch {
+    return data
+  }
+}
+
+function createNativeAjaxError(
+  data: unknown,
+  status: number | undefined,
+  xhr: unknown,
+  params: Omit<MXAjaxParams, 'success' | 'error'>,
+): Error & { data: unknown; status?: number; xhr?: unknown } {
+  const parsedData = parseAjaxData(data, params.dataType)
+  const message = typeof parsedData === 'object' && parsedData && 'message' in parsedData
+    ? String((parsedData as { message?: unknown }).message || '请求失败')
+    : typeof parsedData === 'string'
+      ? parsedData
+      : '请求失败'
+  const error = new Error(message) as Error & { data: unknown; status?: number; xhr?: unknown }
+  error.data = parsedData
+  error.status = status
+  error.xhr = xhr
+  return error
 }

package/mini2.0-main/src/utils/query.ts

@@ -0,0 +1,27 @@
+/**
+ * 将 query 对象拼接到 URL 上
+ *
+ * 自动过滤 undefined/null 值，支持数组参数。
+ */
+export function appendQuery(url: string, query?: Record<string, unknown>): string {
+  if (!query) return url
+
+  const searchParams = new URLSearchParams()
+  Object.entries(query).forEach(([key, value]) => {
+    if (value === undefined || value === null) return
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        if (item !== undefined && item !== null) {
+          searchParams.append(key, String(item))
+        }
+      })
+      return
+    }
+    searchParams.append(key, String(value))
+  })
+
+  const queryString = searchParams.toString()
+  if (!queryString) return url
+
+  return `${url}${url.includes('?') ? '&' : '?'}${queryString}`
+}

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

@@ -22,19 +22,11 @@ onMounted(() => {
   if (!appStore.isNative) return
 
   loading.value = true
-  getEncryptString(
-    (secret) => {
-      loading.value = false
-      console.log(secret)
-      // TODO: 用 secret 自动换取 token 并跳转首页
-    },
-    (reason) => {
-      loading.value = false
-      console.error(reason)
-      showToast({ message: '获取设备凭证失败，请手动登录', duration: 3000 })
-      appStore.isNative = false
-    },
-  )
+  getEncryptString((secret) => {
+    loading.value = false
+    console.log(secret)
+    // TODO: 用 secret 自动换取 token 并跳转首页
+  })
 })
 
 async function onSubmit() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "private": false,
   "type": "module",
   "scripts": {

package/src/views/FundCockpitView.vue

@@ -264,68 +264,73 @@ function createCashflowOption(): EChartsOption {
   }
 }
 
-function createLiquidityRingOption(card: GaugeCard): EChartsOption {
-  const progress = Math.min(Math.max(card.needle, 0), card.max)
-  const rest = Math.max(card.max - progress, 0)
-  const ringGradient = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
-    { offset: 0, color: '#1278ff' },
-    { offset: 0.5, color: '#33f0ff' },
-    { offset: 1, color: '#58ff86' },
-  ])
-
+function createStageGaugeOption(card: GaugeCard): EChartsOption {
   return {
     animationDuration: 900,
-    graphic: [
-      {
-        type: 'text',
-        left: 'center',
-        top: '44%',
-        style: {
-          text: card.value,
-          fill: '#34eaff',
-          fontSize: 30,
-          fontWeight: 800,
-          textAlign: 'center',
-          textShadowBlur: 14,
-          textShadowColor: 'rgba(47, 233, 255, .55)',
-        },
-      },
-    ],
     series: [
       {
-        type: 'pie',
-        radius: ['62%', '78%'],
-        center: ['50%', '52%'],
-        startAngle: 90,
-        clockwise: true,
-        silent: true,
-        label: { show: false },
-        labelLine: { show: false },
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: 'rgba(2, 14, 33, .5)',
-          borderWidth: 3,
+        type: 'gauge',
+        min: 0,
+        max: card.max,
+        radius: '93%',
+        center: ['50%', '58%'],
+        splitNumber: 5,
+        axisLine: {
+          lineStyle: {
+            width: 16,
+            color: [
+              [0.3, '#67e0e3'],
+              [0.7, '#37a2da'],
+              [1, '#fd666d'],
+            ],
+          },
         },
-        data: [
-          { value: progress, itemStyle: { color: ringGradient } },
-          { value: rest, itemStyle: { color: 'rgba(33, 79, 124, .28)' } },
-        ],
-      },
-      {
-        type: 'pie',
-        radius: ['46%', '47%'],
-        center: ['50%', '52%'],
-        silent: true,
-        label: { show: false },
-        labelLine: { show: false },
-        data: [
-          {
-            value: 1,
-            itemStyle: {
-              color: 'rgba(58, 216, 255, .18)',
-            },
+        pointer: {
+          length: '58%',
+          width: 5,
+          itemStyle: { color: 'auto' },
+        },
+        axisTick: {
+          distance: -16,
+          length: 7,
+          lineStyle: {
+            color: '#ffffff',
+            width: 2,
           },
-        ],
+        },
+        splitLine: {
+          distance: -16,
+          length: 16,
+          lineStyle: {
+            color: '#ffffff',
+            width: 3,
+          },
+        },
+        axisLabel: {
+          color: 'inherit',
+          distance: 22,
+          fontSize: 12,
+        },
+        anchor: {
+          show: true,
+          showAbove: true,
+          size: 9,
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: '#7ef7ff',
+            color: '#001a34',
+          },
+        },
+        title: { show: false },
+        detail: {
+          valueAnimation: true,
+          offsetCenter: [0, '45%'],
+          color: '#30dcff',
+          fontSize: 26,
+          fontWeight: 800,
+          formatter: () => card.value,
+        },
+        data: [{ value: card.needle }],
       },
     ],
   }
@@ -414,9 +419,9 @@ onMounted(async () => {
   updateCockpitScale()
   await nextTick()
   createChart(cashflowChart.value, createCashflowOption())
-  createChart(liquidityGauge.value, createLiquidityRingOption(gaugeCards[0]!))
-  createChart(coverageGauge.value, createLiquidityRingOption(gaugeCards[1]!))
-  createChart(stableGauge.value, createLiquidityRingOption(gaugeCards[2]!))
+  createChart(liquidityGauge.value, createStageGaugeOption(gaugeCards[0]!))
+  createChart(coverageGauge.value, createStageGaugeOption(gaugeCards[1]!))
+  createChart(stableGauge.value, createStageGaugeOption(gaugeCards[2]!))
   createChart(maturityChart.value, createMaturityOption())
   window.addEventListener('resize', handleViewportChange)
   window.visualViewport?.addEventListener('resize', handleViewportChange)
@@ -1032,17 +1037,17 @@ onUnmounted(() => {
 
 .gauge-chart {
   position: absolute;
-  left: -2px;
-  right: -2px;
-  top: 23px;
-  height: 150px;
+  left: -8px;
+  right: -8px;
+  top: 24px;
+  height: 156px;
 }
 
 .gauge-card p {
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 8px;
+  bottom: 0;
   color: #d7e6f6;
   text-align: center;
   font-size: 14px;