Mala-Pro 主题更新日志

Posted recently Updated recently

By mala

47~60 min read

新增功能

1. 移动端底部导航栏

新增 MobileBottomNav.vue 组件，为移动端用户提供底部导航
支持与左侧菜单联动，统一的配置管理
路由切换时自动高亮对应菜单项
相关的配置项 bottomNav 已加入 mala-pro.js APP_CONFIG

2. 左侧菜单栏配置化

新增左侧菜单栏 sidebar 配置项，支持通过 APP_CONFIG 控制菜单项的显示/隐藏
新增类型定义文件 src/types/appConfig.d.ts，统一管理配置类型
提升类型安全性和响应式更新能力

3. 首页模块显示控制

重构首页模块显示控制逻辑，支持所有模块可配置隐藏
新增 useDashboardConfig.ts composable，统一管理仪表盘配置
支持以下模块的可选显示：欢迎横幅、交易记录卡片、快速登录二维码
隐藏模块后首页自动自适应布局

4. 文档中心功能增强

优化文档分类展示、文档列表和内容渲染
完全支持 v2board 文档中心按钮配置（复制链接、外部链接、订阅）
文档中心按钮跟随应用主题色
优化 Skeleton 加载状态

5. 系统公告增强

新增"当天不再显示"功能，用户可选择暂时忽略公告

6. Mac 下载增加芯片版本选择

ProjectCard.vue 增加对 Mac 不同芯片版本（Intel/Apple Silicon）的下载选项

7. 注册/登录/找回密码页面优化

提取公共函数，减少重复代码
添加邮件垃圾箱提醒弹窗，提示用户检查垃圾邮件
注册页面支持动态显示邮箱提示信息
新增 redirect.ts 公共重定向工具
修复多处 bug

8. 聊天消息方向优化

简化消息方向处理逻辑，直接使用 API 返回的 is_me 值
优化管理员与用户身份的区分显示

9. 套餐有效性判断增强

添加对不限时套餐和限时套餐的过期检查
优化用户套餐选择提示

10. 二维码显示优化

优化二维码生成逻辑，支持不同类型链接（订阅链接、推广链接等）

11. 货币格式化增强

新增 currencyFormatter.js 工具，统一处理多币种格式
在 Pricing、InviteDetails、BillingTab、Commission 等多页面应用

界面优化

1. 移动端交互优化

底部导航栏与左侧菜单交互联动
底部导航栏支持更多交互状态

2. AppleID 页面增强

增强错误处理功能，添加多种错误类型检测
新增网络状态检查和错误日志记录
添加 CORS 跨域错误检测和用户提示功能
修复永久有效套餐判定问题

3. 订单详情页轮询优化

优化订单详情页轮询逻辑，提升状态同步体验

4. 定价页面优化

增强套餐有效性判断逻辑

5. 字体资源优化

移除未使用的 Inter 字体文件（.ttf 和 .woff 格式）
仅保留 WOFF2 格式，减少资源体积

Bug 修复

1. 重置密码/注册页面表单验证

修复点击发送验证码时触发表单全局验证的问题

2. AppleID 页面套餐判定

修复 AppleID 页面永久有效套餐判定逻辑错误

public/mala-pro.js 新增配置项详解教程

以下配置项均位于 public/mala-pro.js 文件的 window.APP_CONFIG 对象中。
未列出的配置项均为旧有配置，本次更新未做修改。

一、货币配置 `currency`

用途：统一管理多币种显示格式，替代各页面散落的货币格式化逻辑。

currency: {
  symbol: '$',     // 货币符号（推荐使用半角符号，兼容性好）
  name: '美元',    // 货币名称，用于文本描述
  code: 'USD',     // ISO 货币代码，用于国际化
  precision: 2     // 金额小数位数
}

字段	类型	说明
`symbol`	string	显示在金额前面的符号，如 `$`、`¥`、`€`
`name`	string	货币中文名称
`code`	string	ISO 4217 标准货币代码
`precision`	number	金额保留的小数位数（建议 0-4）

应用页面：定价页、邀请详情、账单、佣金统计、存储卡等所有金额显示处。

二、下载链接配置扩展 `downloadLinks`

用途：为 Mac 下载增加 Intel 和 Apple Silicon 双版本支持，解决 M 系列芯片 Mac 无法安装 Intel 版应用的问题。

downloadLinks: {
  android: 'https://example.com/download/android',
  ios: 'https://example.com/download/ios',
  windows: 'https://example.com/download/windows',
  mac: 'https://example.com/download/mac',                    // 通用 Mac 下载地址（兜底）
  macIntel: 'https://example.com/download/mac-intel',        // Intel 芯片 Mac 专用
  macAppleSilicon: 'https://example.com/download/mac-apple-silicon'  // Apple Silicon (M1/M2/M3...) 专用
}

字段	类型	说明
`mac`	string	通用 Mac 下载地址（不区分芯片版本时使用）
`macIntel`	string	Intel 芯片 Mac 下载地址
`macAppleSilicon`	string	Apple Silicon (M1/M2/M3/M4...) Mac 下载地址

使用场景：

如果三个 Mac 链接都配置了，用户下载页面会根据其设备芯片自动展示对应版本
如果只配置了 mac，则所有 Mac 用户显示同一链接
支持在下载页面自动检测用户芯片型号（通过 JavaScript navigator.platform 或 navigator.userAgentData）

三、二维码生成配置 `qrCodeType`

用途：控制每个翻墙客户端的订阅二维码生成方式，部分客户端推荐使用原生订阅链接，部分推荐使用 App 专用导入 URL。

qrCodeType: {
  Shadowrocket: 'native',     // 原生订阅链接二维码
  QuantumultX: 'appurl',     // App 专用导入链接二维码
  Surge: 'appurl',
  Stash: 'appurl',
  Loon: 'appurl',
  Surfboard: 'appurl',
  SingBox: 'appurl',
  Clash: 'appurl',
  ClashMeta: 'appurl',
  V2rayN: 'native',
  V2rayNG: 'native'
}

值	含义	适用场景
`'native'`	生成原生订阅链接二维码	Shadowrocket、V2rayN、V2rayNG 等直接导入订阅链接的客户端
`'appurl'`	生成 App 专用导入链接二维码	Surge、QuantumultX、Stash、Clash 等需要 App URL 的客户端

配置建议：除非你的订阅链接格式有特殊变化，否则保持默认值即可。不同客户端对链接格式要求不同，选错类型会导致客户端无法识别二维码。

四、工单消息方向配置 `fixChatDirection`

用途：修复某些 v2board 后端工单消息方向与前端显示不一致的问题。

fixChatDirection: false  // 可选值: false, true

值	说明
`false`	使用前端默认消息方向判断逻辑（默认）
`true`	强制使用 API 返回的 `is_me` 字段决定消息方向

排查场景：如果你发现工单中用户消息显示在右侧（应该显示在左侧）、管理员消息显示在左侧（应该显示在右侧），将此开关设为 true 可能解决此问题。

五、仪表盘组件显示配置 `dashboard`

用途：精细控制首页各模块的显示/隐藏，隐藏的模块会自动让出空间，页面布局自适应调整。

dashboard: {
  showWelcomeBanner: true,      // 欢迎横幅（顶部促销语）
  showTransactionCard: true,   // 订阅链接卡片（交易记录/快速复制）
  showFeatureCard: true,       // 快速登录二维码卡片
  showStorageCard: true,      // 流量/套餐信息卡片
  showProjectCard: true        // 客户端下载卡片
}

字段	默认值	控制内容
`showWelcomeBanner`	true	首页顶部欢迎横幅/促销语横幅
`showTransactionCard`	true	订阅链接复制卡片（显示各类客户端的订阅链接）
`showFeatureCard`	true	快速登录二维码（免配置导入订阅）
`showStorageCard`	true	左侧边栏/卡片的流量统计和套餐信息
`showProjectCard`	true	底部/卡片区域的客户端下载按钮

使用技巧：

将不需要的模块设为 false 即可隐藏
多个模块隐藏后，剩余模块会自动重新排列（Grid 自适应布局）
所有模块都隐藏时，首页会显示最小化的简洁布局

六、注册页面配置 `register`

用途：自定义注册页面的辅助提示文字，提升用户体验。

register: {
  emailHint: '（如果没有邮箱，输入任意数字即可）'
}

字段	类型	说明
`emailHint`	string	显示在邮箱输入框下方的补充提示文字，留空则不显示

使用场景：如果你的站点支持手机号注册或无需真实邮箱，可以添加提示文字告知用户，减少用户困惑和客服压力。

七、左侧菜单栏配置 `sidebar`

用途：通过路由路径精确控制每个菜单项的显示或隐藏，无需修改代码即可通过配置文件调整导航结构。

sidebar: {
  // 格式: '路由路径': { show: true/false }
  // '/dashboard': { show: true },   // 主页
  // '/plan': { show: true },        // 套餐购买
  // '/order': { show: true },       // 订单列表
  // '/ticket': { show: true },      // 工单列表
  // '/knowledge': { show: true },   // 文档中心
  // '/profile': { show: true },     // 个人信息
  // '/invite': { show: true },      // 邀请信息
  // '/traffic': { show: true },     // 流量明细
  // '/node': { show: true },        // 节点地图
}

支持的路由路径：

路由路径	菜单名称	说明
`/dashboard`	主页	首页仪表盘
`/plan`	套餐购买	定价/套餐选择页
`/order`	订单列表	用户订单记录
`/ticket`	工单列表	客服工单
`/knowledge`	文档中心	使用教程/帮助文档
`/profile`	个人信息	账户设置
`/invite`	邀请信息	推广佣金
`/traffic`	流量明细	使用记录
`/node`	节点地图	服务器节点分布

配置规则：

只配置需要隐藏的项：未配置的菜单项默认显示（等同于 show: true）
苹果账号例外：苹果账号入口由上方的 appleId.show 单独控制，不在此处配置
需要隐藏多个菜单：只需列出要隐藏的项，其余保持默认显示

配置示例：

// 只隐藏文档中心和邀请信息，其他菜单正常显示
sidebar: {
  '/knowledge': { show: false },
  '/invite': { show: false }
}

// 隐藏除主页和套餐外的所有菜单（白名单模式）
sidebar: {
  '/dashboard': { show: true },
  '/plan': { show: true },
  '/order': { show: false },
  '/ticket': { show: false },
  '/knowledge': { show: false },
  '/profile': { show: false },
  '/invite': { show: false },
  '/traffic': { show: false },
  '/node': { show: false }
}

八、移动端底部导航栏配置 `bottomNav`

用途：为移动端用户配置底部固定导航栏，提供便捷的页面跳转入口。

bottomNav: {
  usePlaceholder: true,  // 是否为 Crisp 客服图标预留占位符
  items: [
    {
      title: '首页',
      path: '/dashboard',
      icon: 'mdi-home-outline',     // 未选中状态图标（MDI 图标名）
      activeIcon: 'mdi-home'         // 选中状态图标
    },
    {
      title: '套餐',
      path: '/plan',
      icon: 'mdi-shopping-outline',
      activeIcon: 'mdi-shopping'
    },
    {
      title: '工单',
      path: '/ticket',
      icon: 'mdi-message-text-outline',
      activeIcon: 'mdi-message-text'
    },
    {
      title: '赚佣金',
      path: '/invite',
      icon: 'mdi-wallet-outline',
      activeIcon: 'mdi-wallet'
    }
  ]
}

字段	类型	说明
`usePlaceholder`	boolean	`true` 在底部导航右侧预留一个位置给 Crisp 在线客服图标
`items`	array	导航菜单项数组
`items[].title`	string	菜单项显示文字
`items[].path`	string	点击后跳转的路由路径（对应 `vue-router` 路径）
`items[].icon`	string	未选中状态的 Material Design Icons 图标名
`items[].activeIcon`	string	选中状态（当前路由匹配时）的图标名

图标选择规范：

图标名称取自 Material Design Icons
使用格式：mdi- 前缀 + 图标名，如 mdi-home、mdi-account
未选中/选中图标通常成对出现，如 mdi-home-outline / mdi-home

路由匹配规则：

默认按 path 前缀匹配（/dashboard 会匹配 /dashboard、/dashboard/xxx）
如需自定义匹配逻辑，可在 items 中为对应项添加 match 函数