Skip to content

m-ui v0.2.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 18 Sep 05:36
· 10 commits to main since this release
v0.2.0
5d78e09

Highlights of v0.2.0

m-ui v0.2.0 is a major milestone release that completely transforms the visual identity, tactile feedback, and frontend architecture of m-ui. We have retired legacy Ant Design dependencies and introduced a full-fledged Apple SwiftUI & Liquid Glass design system powered by physical spring animations, SVG optical displacement refraction, tactile fluid switches, and refined ergonomics.

What's New & Key Improvements

1. Liquid Glass & SwiftUI Design System

  • Total Ant Design Purge: Completely removed legacy ant-select.js and ant-theme.css, eliminating third-party UI overhead and reducing bundle size.
  • Physical Optical Simulation (liquid-optics.js & liquid-optics.css):
    • Implemented dynamic normal-mapping distance fields and live SVG backdrop displacement filters simulating real optical refraction (Index of Refraction: 1.46).
    • Dynamic specular rim lighting that tracks cursor movement and pointer coordinates across navigation bars, floating menus, and active lenses.
    • Quiet, high-contrast card backdrops preserving optimal text legibility against custom vector ambient wallpapers (glass-wallpaper.svg).
    • Graceful accessibility fallbacks honoring prefers-reduced-motion and prefers-contrast.

2. Tactile Liquid Toggles & Draggable Segmented Tabs

  • Modular Fluid Switches (liquid-toggle.js & liquid-toggle.css):
    • Re-engineered switches across Login, Panel Settings, dynamic Inbound/Client tables, and public subscription pages with tactile spring physics, elastic squeeze on press, and fluid thumb transitions.
  • Jello-Elastic Draggable Segmented Tabs:
    • Introduced .liquid-pill-slider with Spring physics and drag tracking. The pill slider stretches and squashes (stretch/squash algorithm) elastically along the drag direction and snaps securely to the nearest option on release.
    • Added horizontal touch swipe gestures for navigating panel views on mobile devices.

3. Brand Identity & Asset Upgrades

  • High-Resolution Vector / PNG Assets: Integrated the new official m-ui_logo.png and m-ui_logo_square.png into the sidebar, login screen, and browser icons.
  • Optimized Media Delivery: Strengthened asset serving in the Go backend (internal/app/main.go) with caching headers, correct MIME types, and automated unit testing (TestMediaLogoServing).

4. Critical UI & Interaction Fixes

  • Panel Settings Blank Container Fix: Removed duplicate card wrappers and bottom margins on .settings-pane, eliminating the unwanted empty space at the bottom of settings forms.
  • Capsule Slider Centering: Corrected coordinate calculation by accounting for parent border widths (borderLeftWidth / borderTopWidth), ensuring pixel-perfect vertical and horizontal centering.
  • Sidebar Collapse Button Distortion Fix: Fixed an issue where collapsing the sidebar distorted the toggle button into an oval; it now maintains a circular 38×38px geometry with centered chevron symbols.
  • Inbounds Auto-Refresh Menu Visibility: Removed overflow: hidden on .inbounds-refresh, fixing a bug where the auto-refresh frequency dropdown menu was clipped and invisible.
  • Native Tab Event Restoration: Ensured native button clicks and keyboard navigation (Arrow keys, Home/End) remain fully responsive.
  • Fixed language translation issues: Previously, some text in certain windows would revert to Chinese after the panel restarted, even if a different interface language was selected. A translation function that activates upon opening the window has been added to ensure no untranslated text remains.

5. Architecture, Security & Test Coverage

  • Public Subscription Endpoint Isolation: Embedded dedicated switch assets (liquid-toggle.css / liquid-toggle.js) for public subscription pages while strictly isolating internal panel endpoints (subscription.go & TestSubscriptionToggleAssetsOnBothListeners).
  • Headless Test Suite: Added visual & functional browser fixtures (tests/liquid-optics.html, tests/liquid-toggle.html, tests/dynamic-modal-i18n.cjs) and architectural documentation (LIQUID-GLASS.md).
  • All Go unit tests passed cleanly across Windows and Linux targets.

Detailed Changelog

  • 5d78e09 feat(ui): add liquid optics, liquid toggle components, and update UI for v0.2.0
  • b85ffbe fix(ui): fix inbounds-refresh overflow clipping auto-refresh-menu popup
  • 0c05180 test: add TestMediaLogoServing unit test
  • c5ff897 feat(ui): update sidebar and login logo to m-ui_logo.png
  • 729cb0a fix(ui): fix tab capsule slider dragging not following mouse
  • 6e52000 fix(ui): fix sidebar collapse button oval distortion and centering
  • 0bcfbe0 fix(ui): fix settings bottom block, center capsule slider, and refine liquid glass aesthetics
  • cc655a2 fix(ui): unify panel settings with mihomo grouped forms, restore native tab clicking, and remove progress bar scrollbar
  • 689ba76 feat(ui): add draggable liquid glass slider, fix square corners, and enhance login glass
  • 4aae1e7 feat(ui): complete SwiftUI & Liquid Glass redesign and purge Ant Design relics

v0.2.0 版本要点

m-ui v0.2.0 是一个具有里程碑意义的重大重构版本。本次更新对前端架构、视觉设计与触觉交互进行了全面升级：彻底剔除了历史遗留的 Ant Design 依赖，全面上线基于 Apple SwiftUI 规范与 Liquid Glass（液态玻璃） 的全新设计系统，引入光学物理折射滤镜、弹性阻尼滑块、流体触感开关以及全新品牌官方标识。

核心新特性与改动说明

1. 全新 Liquid Glass 液态玻璃与 SwiftUI 视觉系统

  • 全面移除 Ant Design 遗留包：彻底移除 ant-select.js 与 ant-theme.css，摆脱老旧样式干扰，减小打包体积并提升运行流畅度。
  • 光学法线模拟与实时折射（liquid-optics.js & liquid-optics.css）：
    • 基于圆角矩形距离场生成法线贴图，通过实时 SVG 背景位移滤镜精确模拟光线通过 1.46 折射率玻璃的边缘位移与色散折射。
    • 边缘高光轮廓跟随鼠标/触控指针实时计算入射角反射，带来逼真的光照流体质感。
    • 针对文字和主要数据卡片采用高对比半透毛玻璃材质，搭配全新矢量环境壁纸（glass-wallpaper.svg），兼具科技美感与文字可读性。
    • 内置无障碍降级保护，支持系统级 prefers-reduced-motion（减弱动态效果）与高对比度模式。

2. 流体质感开关与果冻弹性滑块

  • 模块化液态开关组件（liquid-toggle.js & liquid-toggle.css）：
    • 全面重构登录页、面板设置、入站/客户端动态表格及公网订阅页的 Toggle 开关，提供 64×32 iOS 规范导轨、按压形变、阻尼反弹以及流畅滑动过渡。
  • 可拖拽 Jello 果冻弹性分段胶囊滑块：
    • 选项卡分段控制器引入动态 .liquid-pill-slider，支持鼠标/手指直接拖拽，拖动过程中具备流体挤压/拉伸拉扯动效（Squash & Stretch），释放后弹性回弹对齐最近选项。
    • 移动端适配多视图横向滑动滑动手势。

3. 品牌形象与视觉资源升级

  • 全新官方高清 Logo：侧边栏头部、收起悬浮态、登录卡片及网页 Favicon 全面采用全新超清 m-ui_logo.png 与 m-ui_logo_square.png。
  • 静态资源分发与测试优化：在 Go 后端（internal/app/main.go）完善图片资源的 MIME 协议与缓存标头，并添加自动化单元测试 TestMediaLogoServing。

4. 交互细节与体验修复

  • 修复 Panel Settings 底部多余空白卡片块：排查并移除了 .settings-pane 上多余的卡片边框背景及外边距，表单收发展现规整一体。
  • 修复胶囊滑块偏心问题：在滑动位置计算中精确扣除容器边框偏移量（borderLeftWidth / borderTopWidth），彻底解决滑块向下/向右溢出、无法居中的问题。
  • 修复侧边栏折叠按钮椭圆变形：固定收起状态按钮尺寸为正圆形（38×38px，border-radius: 50%），图标保持绝对居中。
  • 修复 Inbounds 自动刷新浮窗无法呼出：移除了 .inbounds-refresh 上的截断规则（overflow: hidden），恢复自动刷新菜单（.auto-refresh-menu）的正常浮层弹出。
  • 恢复原生选项卡点击与无障碍导航：支持键盘方向键与 Home/End 快速切换。
  • 修复语言翻译问题：即便界面语言设置成其他语言，部分窗口中的一些文字仍然会在面板重启后显示成中文，已新增窗口打开时生效的翻译功能，不会出现残留未翻译的语句。

5. 架构解耦、安全隔离与测试覆盖

  • 订阅接口资源安全隔离：在订阅独立端口提供公共开关样式（liquid-toggle.css / liquid-toggle.js），并严格屏蔽面板内部管理接口，新增 TestSubscriptionToggleAssetsOnBothListeners 自动化测试。
  • 完备的自动化测试体系：新增无头测试夹具（tests/liquid-optics.html、tests/liquid-toggle.html）与设计架构文档（LIQUID-GLASS.md）。
  • Go 单元测试全数通过，跨平台二进制产物（Windows / Linux）编译验证无误。

提交日志 (Git Log)

  • 5d78e09 feat(ui): add liquid optics, liquid toggle components, and update UI for v0.2.0
  • b85ffbe fix(ui): fix inbounds-refresh overflow clipping auto-refresh-menu popup
  • 0c05180 test: add TestMediaLogoServing unit test
  • c5ff897 feat(ui): update sidebar and login logo to m-ui_logo.png
  • 729cb0a fix(ui): fix tab capsule slider dragging not following mouse
  • 6e52000 fix(ui): fix sidebar collapse button oval distortion and centering
  • 0bcfbe0 fix(ui): fix settings bottom block, center capsule slider, and refine liquid glass aesthetics
  • cc655a2 fix(ui): unify panel settings with mihomo grouped forms, restore native tab clicking, and remove progress bar scrollbar
  • 689ba76 feat(ui): add draggable liquid glass slider, fix square corners, and enhance login glass
  • 4aae1e7 feat(ui): complete SwiftUI & Liquid Glass redesign and purge Ant Design relics

Full Changelog: v0.1.6...v0.2.0

Assets 10
Loading