FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Refactor: Introduce Glassmorphism UI based on Vue 3 / 重构：引入基于 Vue 3 的全新毛玻璃 UI by BB0813 · Pull Request #802 · DIYgod/APlayer · GitHub

/ APlayer Public

Refactor: Introduce Glassmorphism UI based on Vue 3 / 重构：引入基于 Vue 3 的全新毛玻璃 UI - #802

Open
BB0813 wants to merge 2 commits into
DIYgod:masterfrom
BB0813:master
ConversationCommits (2)ChecksFiles changed
Open

Refactor: Introduce Glassmorphism UI based on Vue 3 / 重构：引入基于 Vue 3 的全新毛玻璃 UI#802
BB0813 wants to merge 2 commits into
DIYgod:masterfrom
BB0813:master

Conversation

BB0813 commented Jan 16, 2026

Copy link
Copy Markdown

夹带私货

其实感觉这个PR并不是很核心 大概率是不会合并Pr的awa 但我还是想提交 至少有在为APlayer的生态做贡献
这个仓库接下来会作为第三方分支发布新的UI/UX更新

动机 / Motivation

在帮助朋友更新个人主页UI/UX的过程中，我认为原项目的 UI 可以更加现代化和美观，因此我基于 Vue 3 重写了一套全新的播放器控件，采用了流行的 Glassmorphism (毛玻璃) 设计风格，并增强了交互体验。
I think the original UI could be more modern and beautiful, so I rewrote a brand new player component based on Vue 3, adopting the popular Glassmorphism design style and enhancing the interactive experience.

主要更新 / Key Updates

  1. Vue 3 重构: 引入 vue, vue-loader 等依赖，使用 Vue 3 Composition API 重构了核心逻辑。
    Vue 3 Refactor: Introduced vue, vue-loader, etc., and refactored the core logic using Vue 3 Composition API.
  2. 全新 UI: 现代化的毛玻璃风格界面，适配深色模式。
    Brand New UI: Modern Glassmorphism interface with Dark Mode support.
  3. Webpack 升级: 升级构建配置以支持 Vue 单文件组件 (.vue) 和 Dart Sass。
    Webpack Upgrade: Upgraded build config to support Vue SFC (.vue) and Dart Sass.

新特性 / New Features

1. 桌面级歌词体验 (Desktop-class Lyrics)

  • 拖拽功能 (Draggable): 歌词容器支持在页面任意位置拖拽悬浮。
  • 右键菜单 (Context Menu): 右键点击歌词可自定义字体大小和颜色。
  • 双行显示: 高亮显示当前歌词，并预告下一句。

2. 增强的交互 (Enhanced Interaction)

  • 垂直音量条: 更加节省空间的垂直音量控制滑块。
  • 封面旋转: 播放时专辑封面会自动旋转。
  • 自适应布局: 针对移动端 (< 768px) 进行了专门的适配。

使用方法 / How to use it?

引入方式保持不变，但底层已完全替换为 Vue 实例挂载。
The initialization remains compatible, but the underlying implementation is now mounting a Vue instance.

import 'aplayer/dist/APlayer.min.css';
import APlayer from 'aplayer';

const ap = new APlayer({
    container: document.getElementById('player'),
    // 目前版本内置了 Meting API 调用逻辑，未来可恢复 audio 数组传参
    // Currently uses built-in Meting API logic
});

效果预览 / Preview

技术细节 / Technical Details

  • Dependencies: Added vue@3.x, sass, sass-loader.
  • Removed: Removed node-sass (deprecated).
  • Entry: Changed entry point from src/js/index.js to src/index_vue.js.

BB0813 added 2 commits January 17, 2026 06:16
feat: 基于Vue3的新UI/UX
01c07bc
fix: 补充提交
8066646 
Windows 环境导致的换行符自动转换
Xinyang-Gao added a commit to Xinyang-Gao/xinyang-gao.github.io that referenced this pull request Jul 10, 2026
feat: 使用 APlayer(改版) 替换 NeteaseMiniPlayer-v2(改版)
23833cb 
- **feat**: 使用 [APlayer(改版)](DIYgod/APlayer#802) 替换 [NeteaseMiniPlayer-v2(改版)](numakkiyu/NeteaseMiniPlayer#15)
      - *因为 NeteaseMiniPlayer-v2 已停止维护，NeteaseMiniPlayer-V3 的 api 尚不稳定且更换需要重构重网站的全局音乐加载模块；综合评估下来使用了 APlayer 的改版*
- **chore**: 修复更新日志中重复的版本号
- **docs**: 更新文档
Xinyang-Gao added a commit to Xinyang-Gao/xinyang-gao.github.io that referenced this pull request Jul 14, 2026
Squashed commit of the following:
114738b 
commit 8bce6b1
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 14 20:22:45 2026 +0800

    chore: 移除 cookie 申请

commit b91d9f8
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 14 19:50:52 2026 +0800

    feat(settings): 将设置从独立页面改为弹窗，可通过右下角按钮进入

    - **feat(settings)**: 将设置从独立页面改为弹窗，可通过右下角按钮进入
          - 新增及时读取功能，修改的设置会立刻应用，不再需要刷新页面
          - 删除 `settings.html` 模板

commit 4492bec
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 14 17:32:56 2026 +0800

    chore: 清理作品冗余代码

commit 16bd932
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 14 17:23:46 2026 +0800

    refactor(404): 用 TypeScript 重构 404.js 为 404.ts，同时重构404页面，使其更符合网站整体样式

commit db11c1b
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 14 16:52:32 2026 +0800

    refactor: 用 TypeScript 重构 changelog.js 为 changelog.ts

commit 5d610d8
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 12 02:26:37 2026 +0800

    chore: 从 friends.css 中提取跳转覆盖层的样式到 components.css

commit 3d5e8eb
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 12 02:18:03 2026 +0800

    docs: 更新文档

commit dd06135
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 12 02:15:08 2026 +0800

    chore: 清理冗余的外链管理器样式 .external-modal

commit 62a25f1
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 12 02:08:48 2026 +0800

    chore: 合并 friend-link-manager.ts 到 friends-manager.ts ，便于管理并避免污染

commit ac68fd9
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 12 02:02:00 2026 +0800

    feat: 提取友链跳转覆盖层到 jump-dialog.ts 方便之后复用

    - **feat**: 提取 友链跳转覆盖层 到 `jump-dialog.ts` 方便之后复用
    - **feat**: 将原先的外链跳转弹窗改为复用 `jump-dialog.ts`
          - 信任的网站不再弹窗直接跳转
          - 陌生的网站将等待 6 秒后自动跳转

commit fe40919
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 12 01:18:00 2026 +0800

    refactor(image-viewer): 用 TypeScript 重构 image-viewer.ts

    - **refactor(image-viewer)**: 用 TypeScript 重构 `image-viewer.ts`
    - **fix(image-viewer)**: 可能打开多个图片查看实例
    - **revert**: V8.7.4 更改 `aggregated.py` 中的 Vite 调用

commit 5ca7b20
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 12 00:41:12 2026 +0800

    refactor: 用 TypeScript 重构 settings.js 为 settings.ts

    - **refactor**: 用 TypeScript 重构 `settings.js` 为 `settings.ts`
    - **perf**: 优化 `core.ts` 代码
    - **build**: 更改 `aggregated.py` 中的 Vite 调用

commit 5eb828f
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 16:13:32 2026 +0800

    docs: 更新文档

commit 5cd01fe
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 15:56:40 2026 +0800

    chore: 清理多余文件和文件夹 /src/assets/works/

commit 140c3af
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 15:37:31 2026 +0800

    chore: 更新计数显示

commit 03d4a43
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 15:15:48 2026 +0800

    将网站流量计数从 不蒜子 改为 vercount

    - **feat**: 将网站流量计数从 [不蒜子](https://www.busuanzi.cc) 改为 [vercount](https://www.vercount.one)
    - **feat(builder)**: /src/copy/ 下的所有内容（包括子文件夹）复制到 dist/ 根目录

commit 5a718d0
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 02:09:54 2026 +0800

    fix:  使用参数列表时设置了 shell=True

commit c915109
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 02:01:15 2026 +0800

    ci: 更新 node 版本

commit ccac791
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 01:54:14 2026 +0800

    feat(builder): 使用 GitHub Actions 工作流自动构建网站

commit d77a355
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 01:46:04 2026 +0800

    feat(builder): 将友链卡片颜色提取加入构建流

commit 992f929
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 01:30:17 2026 +0800

    feat(builder): 重新添加对生成 code_analysis.json 文件的支持

commit ff24a3c
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 01:24:59 2026 +0800

    feat(builder): 尊重 Markdown 源文件中的手动更新日期

commit adddc00
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 00:52:01 2026 +0800

    refactor(builder): 移除 GUI 并优化增量构建策略

    - **refactor(builder)**: 移除 GUI 并优化增量构建策略
          - 移除 run.py 中的 Tkinter GUI 模块，仅保留命令行入口
          - 增强 base.py 中 is_up_to_date 方法：检查所有输出文件是否存在，若缺失则判定为过时
          - 补全 aggregated 生成器的 outputs 列表，添加 friends/index.html
          - 当输出文件被误删或损坏时，将自动触发重新构建，提高构建可靠性
    - **feat(builder)**: 从 src/ 复制站点根文件到 dist/
          - 新增复制 BingSiteAuth.xml, favicon.ico, robots.txt 从 src/ 到 dist/

commit 23833cb
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 11 00:03:58 2026 +0800

    feat: 使用 APlayer(改版) 替换 NeteaseMiniPlayer-v2(改版)

    - **feat**: 使用 [APlayer(改版)](DIYgod/APlayer#802) 替换 [NeteaseMiniPlayer-v2(改版)](numakkiyu/NeteaseMiniPlayer#15)
          - *因为 NeteaseMiniPlayer-v2 已停止维护，NeteaseMiniPlayer-V3 的 api 尚不稳定且更换需要重构重网站的全局音乐加载模块；综合评估下来使用了 APlayer 的改版*
    - **chore**: 修复更新日志中重复的版本号
    - **docs**: 更新文档

commit 243b704
Author: 高新炀 <2489083744@qq.com>
Date:   Fri Jul 10 18:46:49 2026 +0800

    chore: 删除 /scr/ 中未使用的 articles.html works.html nojs.html 模板

commit 22cfc6f
Author: 高新炀 <2489083744@qq.com>
Date:   Fri Jul 10 03:51:53 2026 +0800

    chore: 删除 /scr/ 中未使用的 friends.html 模板

commit 29eadc6
Author: 高新炀 <2489083744@qq.com>
Date:   Fri Jul 10 03:31:51 2026 +0800

    chore: 更新头像

commit 234637d
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jul 9 01:41:15 2026 +0800

    style(footer): 优化页脚样式

commit 8a86d1f
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jul 9 01:27:29 2026 +0800

    refactor(personal-card): 重构个人信息卡片样式

commit 82c2ba9
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jul 9 01:16:03 2026 +0800

    refactor(style): 全面重构响应式系统

commit 384a6b5
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 7 21:57:51 2026 +0800

    chore 更新 twikoo 版本（1.7.13 -> 1.7.14）

commit 8c873f3
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 7 14:58:22 2026 +0800

    refactor(stats-manager): 用 TypeScript 重构 stats-manager.js 为 stats-manager.ts

commit 04bc495
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jul 7 01:21:14 2026 +0800

    feat(core): 使用 TypeScript 重构并添加数据压缩支持

commit b85306d
Author: 高新炀 <2489083744@qq.com>
Date:   Mon Jul 6 19:17:42 2026 +0800

    fix: 修复 V8.0.0 重构遗留的问题

commit 8ef8f51
Author: 高新炀 <2489083744@qq.com>
Date:   Mon Jul 6 19:04:39 2026 +0800

    refactor(archive): 用 TypeScript 重构 archive.js 为 archive.ts

commit e40daf2
Author: 高新炀 <2489083744@qq.com>
Date:   Mon Jul 6 18:57:01 2026 +0800

    fix(router): 通过 #articleBody 辨别是否为文章详情页，防止无刷新导航进入导致一系列初始化问题

commit 2e18609
Author: 高新炀 <2489083744@qq.com>
Date:   Mon Jul 6 18:21:12 2026 +0800

    refactor(router): 现代化优化导航路由与导航栏管理，消除重复绑定并完善入场动画

commit 0780a5e
Author: 高新炀 <2489083744@qq.com>
Date:   Mon Jul 6 17:51:34 2026 +0800

    style(twikoo): 同步评论区引用样式与主站一致

commit 6ea2864
Author: 高新炀 <2489083744@qq.com>
Date:   Mon Jul 6 17:25:59 2026 +0800

    chore(aggregated.py): 删除复制 JS 的代码，构建 JS 全部交由 Vite 处理

commit cbaf449
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 5 18:12:37 2026 +0800

    refactor(friends-manager): 用 TypeScript 重构 friends-manager.js 为 friends-manager.ts

commit 759ed10
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jul 5 17:39:41 2026 +0800

    feat(build): 重构友链与增量构建，支持头像主题色自动生成

commit 71f06fe
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 11:32:49 2026 +0800

    fix(theme): 修复主题切换闪烁并优化过渡动画

commit a58e719
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 11:12:54 2026 +0800

    chore(page-utils.js): 删除已不被使用的 isArticleDetailOr404Page 函数

commit 4009b8c
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 11:08:06 2026 +0800

    chore: 更改域名

commit 998aa06
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 10:57:17 2026 +0800

    perf(search): 优化搜索性能、修复重复初始化及 Worker 超时

commit 0baf641
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 10:09:33 2026 +0800

    chore: 添加文件到 .gitignore

commit afc39ee
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 01:21:46 2026 +0800

    perf(ui): 增强鼠标特效性能与自适应降级能力

commit 60575b2
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 01:03:13 2026 +0800

    style: 优化欢迎覆盖层日志样式，给日志项添加颜色区分，并增加了一些真实日志

commit eb4b9f7
Author: 高新炀 <2489083744@qq.com>
Date:   Sat Jul 4 00:26:01 2026 +0800

    fix(player): 将音乐播放器核心脚本作为 ES 模块加载

commit 8bbbd72
Author: 高新炀 <2489083744@qq.com>
Date:   Fri Jul 3 14:51:09 2026 +0800

    build: 优化构建系统，减少 JS 体积约 25%~30%

commit f906f8a
Author: 高新炀 <2489083744@qq.com>
Date:   Fri Jul 3 14:38:21 2026 +0800

    fix(search, router, article): 修复无刷新导航后搜索功能失效及内存泄漏问题

commit f602ad4
Author: 高新炀 <2489083744@qq.com>
Date:   Fri Jul 3 13:11:19 2026 +0800

    docs: 更新文档

commit 25d4461
Author: 高新炀 <2489083744@qq.com>
Date:   Wed Jul 1 15:13:23 2026 +0800

    docs: 更新文档

commit beb4aed
Author: 高新炀 <2489083744@qq.com>
Date:   Wed Jul 1 15:04:44 2026 +0800

    fix: 重新压缩 CSS

commit cf7027e
Author: 高新炀 <2489083744@qq.com>
Date:   Wed Jul 1 15:02:22 2026 +0800

    fix: 作品未被构建和作品列表地址错误

commit 77d8f2b
Author: 高新炀 <2489083744@qq.com>
Date:   Wed Jul 1 14:23:59 2026 +0800

    feat: 使用 Python 在构建时压缩 CSS

commit adec2c6
Author: 高新炀 <2489083744@qq.com>
Date:   Wed Jul 1 01:24:09 2026 +0800

    feat: 集成 TypeScript 与 Vite 构建系统

commit 5919e67
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jun 30 23:41:10 2026 +0800

    refactor: 移除构建一些目录

commit 6cecfc1
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jun 30 22:36:34 2026 +0800

    Delete .github/workflows/jekyll-gh-pages.yml

commit d06493b
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jun 30 22:36:21 2026 +0800

    Create static.yml

commit c9aaa4e
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jun 30 22:31:44 2026 +0800

    更新 jekyll-gh-pages.yml

commit 0a8be4f
Author: 高新炀 <gao_xinyang@foxmail.com>
Date:   Tue Jun 30 22:22:16 2026 +0800

    Create CNAME

commit 811dba2
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jun 30 22:19:32 2026 +0800

    fix: 导航栏未高亮正确按钮

commit 59966e8
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jun 30 16:03:38 2026 +0800

    refactor: 进一步迁移文件

commit d2f8ded
Author: 高新炀 <2489083744@qq.com>
Date:   Tue Jun 30 15:17:48 2026 +0800

    refactor: 重构文件结构

commit 3b66c5f
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jun 28 16:49:46 2026 +0800

    docs: 更新文档

commit 85ca4e8
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jun 28 16:49:04 2026 +0800

    docs: 更新文档

commit 16a9de1
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jun 28 16:42:50 2026 +0800

    fix(sw): 优化缓存策略并修复留言板评论加载问题

commit 922060a
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jun 28 16:23:22 2026 +0800

    fix: v7.13.0 重构导致的文章、作品列表搜索过滤失效

commit 8cfb4de
Author: 高新炀 <2489083744@qq.com>
Date:   Sun Jun 28 16:16:27 2026 +0800

    refactor(build): 重构构建系统，采用统一引擎与增量构建

commit 3ddcf7e
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jun 25 20:37:16 2026 +0800

    feat: 友链卡片每次进入随机显示，每隔 10 秒轮换一次

commit 547953e
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jun 25 18:25:04 2026 +0800

    chore: 关于页无数无刷新导航适配

commit 69b9697
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jun 25 18:10:57 2026 +0800

    feat: 在关于页新增 Github 贡献墙

commit 3c288a9
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jun 25 17:06:45 2026 +0800

    chore: 添加友链

commit e0fedc0
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jun 25 01:07:54 2026 +0800

    docs: 更新日志

commit 5014a95
Merge: d3f1ce1 6862e1d
Author: 高新炀 <2489083744@qq.com>
Date:   Thu Jun 25 01:02:43 2026 +0800

    Merge pull request #10 from Xinyang-Gao/about

    refactor(about): 重构关于页面
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

Back | FazBrowse Home | New Git URL