Feat/munet UI (#39)

* init

* 关于界面

* 更多 MuNET UI

* 更多输入组件

* feat(mcm): add cst scrollbar class, virtua dependency, and migration plan

* feat: Wave 2 partial - migrate ModManager, MusicEdit, MusicList, Sidebar to @munet/ui

- ModManager: all components migrated (ConfigEntry, ConfigEditor, AquaMaiConfigurator, sectionPanelOverrides)
- MusicEdit: AudioPreviewEditor, AcbAwb, SetMovieButton, index migrated
- MusicList: BatchActionButton, MusicEntry, ConflictDisplay, index migrated
- Sidebar: new component created
- Fix TS errors: addToast signature, NumberInput props, duplicate imports, moduleResolution bundler

* Wave 2+3: complete naive-ui migration, fix syntax errors, remove Providers from App.tsx

* fix

* ignore sisyphus

* fix: 弹窗移动到独立页面

* refactor: 目录结构

* sidebar label

* 样式优化

* 样式和 i18n

* 恢复难度面板，工具转换成页面

* bump packages

* 全局化 mod 配置

* 修改谱面管理布局

* 重构 opt 管理界面

* feat: splash

* versionInput 显示效果修改

* 独立窗口预览谱面

* copyToButton fix

* opt 管理 dropdown

* 选择提示

* 各种按钮修复

* 动画

* padding fix

* 谱面管理页修的差不多了

* mod 界面修

Author: clansty

.gitignore

@@ -9,3 +9,4 @@ riderModule.iml
 /MaiChartManager/Resources/AquaMai.dll
 node_modules
 nul
+.sisyphus

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Backend",
+            "command": "dotnet",
+            "type": "process",
+            "args": ["run", "--project", "${workspaceFolder}/MaiChartManager"],
+            "isBackground": true,
+            "problemMatcher": {
+                "base": "$msCompile",
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": ".",
+                    "endsPattern": "."
+                }
+            },
+            "runOptions": { "reevaluateOnRerun": true },
+            "presentation": { "reveal": "always", "panel": "dedicated" },
+            "icon": { "id": "server-process" }
+        },
+        {
+            "label": "Dev Server",
+            "type": "shell",
+            "command": "pnpm dev",
+            "options": { "cwd": "${workspaceFolder}/MaiChartManager/Front" },
+            "isBackground": true,
+            "problemMatcher": [],
+            "presentation": { "reveal": "always", "panel": "dedicated" },
+            "icon": { "id": "play" }
+        },
+        {
+            "label": "Gen Client",
+            "type": "shell",
+            "command": "pnpm genClient",
+            "options": { "cwd": "${workspaceFolder}/MaiChartManager/Front" },
+            "problemMatcher": [],
+            "presentation": { "reveal": "always", "panel": "shared" },
+            "icon": { "id": "refresh" }
+        }
+    ]
+}

AGENTS.md

@@ -0,0 +1,88 @@
+# PROJECT KNOWLEDGE BASE
+
+**Generated:** 2026-02-26
+**Commit:** 1cb9a70
+**Branch:** feat/munet-ui
+
+## OVERVIEW
+
+MaiChartManager (Sitreamai) — maimai 音游谱面管理工具。C# ASP.NET Core 后端 + WinForms 桌面壳 + Vue 3 前端 SPA，内嵌本地 web server。
+
+## STRUCTURE
+
+```
+Sitreamai/
+├── MaiChartManager/          # 主程序：ASP.NET Core + WinForms 混合桌面应用
+│   ├── Controllers/          # REST API 控制器（按领域分子目录）
+│   ├── Front/                # Vue 3 + TypeScript 前端 SPA
+│   ├── Models/               # DTO / XML 数据模型
+│   ├── Services/             # 业务逻辑服务
+│   ├── Utils/                # 音频/视频/图片转换、CRI 工具
+│   ├── WannaCRI/             # CRI 音频格式处理（Python 打包）
+│   ├── Python/               # 嵌入式 Python 运行时
+│   └── FFMpeg/               # 嵌入式 FFmpeg
+├── MaiChartManager.CLI/      # 命令行工具 (mcm)，Spectre.Console
+├── AquaMai/                  # [submodule] BepInEx/MelonLoader 游戏 mod
+├── MaiLib/                   # [submodule] maimai 谱面解析库
+├── SimaiSharp/               # [submodule] Simai 谱面格式解析
+├── SonicAudioTools/          # [submodule] CRI 音频工具库
+├── XV2-Tools/                # [submodule] ACB/HCA 音频格式处理
+└── Packaging/                # MSIX 打包脚本和资源
+```
+
+## WHERE TO LOOK
+
+| Task | Location | Notes |
+|------|----------|-------|
+| 添加/修改 API 接口 | `MaiChartManager/Controllers/` | 按领域分目录，见子目录 AGENTS.md |
+| 前端 UI 修改 | `MaiChartManager/Front/src/` | Vue 3 + Naive UI，见子目录 AGENTS.md |
+| 音频处理逻辑 | `MaiChartManager/Utils/Audio*.cs`, `CriUtils.cs` | FFmpeg + CRI SDK |
+| 谱面导入/解析 | `MaiChartManager/Services/`, `MaiLib/`, `SimaiSharp/` | MaiLib 和 SimaiSharp 是 submodule |
+| 应用启动流程 | `MaiChartManager/Program.cs` → `AppMain.cs` → `ServerManager.cs` | WinForms 单实例 + Kestrel |
+| 桌面窗口 | `Browser.cs`, `Launcher.cs` | WinForms，WebView2 嵌入前端 |
+| IAP/授权 | `IapManager.cs`, `OfflineReg.cs` | Windows Store IAP |
+| CLI 工具 | `MaiChartManager.CLI/` | `makeusm`, `makeacb` 命令 |
+| AquaMai mod 配置 | `Controllers/Mod/`, `Models/AquaMaiConfigDto.cs` | 管理游戏 mod 的安装和配置 |
+| 打包发布 | `Packaging/Build.ps1` | PowerShell，MSIX 打包 |
+
+## CONVENTIONS
+
+- 构建配置：Debug / Release / Crack（三种，Crack 是特殊功能解锁）
+- 平台：仅 x64
+- 5 个 git submodule，各自有独立仓库，勿直接修改 submodule 内代码
+- 前端 API client 由 `genClient.ts` 自动生成，勿手动编辑 `apiGen.ts`
+- 前端包管理用 pnpm
+- 后端 ASP.NET Core 控制器按领域分子目录（App/AssetDir/Catagory/Charts/Mod/Music/Tools）
+- 注意：`Catagory` 是 typo（应为 Category），但已是既定命名，保持一致
+
+## ANTI-PATTERNS
+
+- 不要修改 submodule 内的代码（AquaMai/MaiLib/SimaiSharp/SonicAudioTools/XV2-Tools）
+- 不要手动编辑 `Front/src/client/apiGen.ts` 和 `aquaMaiVersionConfigApiGen.ts`
+- 不要修改 `*.Designer.cs` 文件（WinForms 自动生成）
+
+## COMMANDS
+
+```bash
+# 构建（需要 Visual Studio 或 dotnet CLI）
+dotnet build Sitreamai.sln -c Release
+
+# 前端开发
+cd MaiChartManager/Front && pnpm install && pnpm dev
+
+# 前端构建
+cd MaiChartManager/Front && pnpm build
+
+# 生成 API client
+cd MaiChartManager/Front && npx ts-node genClient.ts
+
+# 打包
+powershell Packaging/Build.ps1
+```
+
+## NOTES
+
+- 项目混合了 WinForms（桌面壳）+ ASP.NET Core（本地 API server）+ Vue 3（前端 SPA）的非常规架构
+- Browser.cs 用 WebView2 加载前端，前端通过 localhost API 与后端通信
+- Python 和 FFmpeg 是嵌入式运行时，打包在应用内
+- MaiChartManager.CLI 共享主项目的部分代码，但是独立的 csproj

MaiChartManager/AGENTS.md

@@ -0,0 +1,61 @@
+# MaiChartManager 主程序目录
+
+## OVERVIEW
+
+主应用目录，ASP.NET Core + WinForms 混合桌面应用的核心代码。包含后端 API、前端 SPA、业务逻辑、工具类等所有主体代码。
+
+## STRUCTURE
+
+```
+MaiChartManager/
+├── *.cs                  # 根级文件：启动流程、窗口、配置、授权
+├── Controllers/          # REST API 控制器（见子目录 AGENTS.md）
+├── Front/                # Vue 3 前端 SPA（见子目录 AGENTS.md）
+├── Models/               # DTO / XML 数据模型
+├── Services/             # 业务逻辑服务
+├── Utils/                # 音频/视频/图片转换工具
+├── Attributes/           # 自定义 Attribute
+├── Locale/               # i18n 资源文件
+├── Libs/                 # 打包进来的第三方库
+├── Python/               # 嵌入式 Python 运行时（勿修改）
+├── FFMpeg/               # 嵌入式 FFmpeg（勿修改）
+├── WannaCRI/             # CRI 音频工具，Python 打包（勿修改）
+├── Resources/            # 应用资源
+└── wwwroot/              # 前端构建产物（勿手动修改）
+```
+
+## WHERE TO LOOK
+
+| 任务 | 文件 | 说明 |
+|------|------|------|
+| 应用启动流程 | `Program.cs` → `AppMain.cs` → `ServerManager.cs` | 单实例 WinForms + Kestrel 启动 |
+| 桌面窗口 | `Browser.cs`, `Launcher.cs` | Browser.cs 用 WebView2 嵌入前端 |
+| Kestrel 配置 | `ServerManager.cs` | 本地 web server 设置 |
+| 应用配置 | `Config.cs`, `StaticSettings.cs` | 运行时配置和静态常量 |
+| IAP / 授权 | `IapManager.cs`, `OfflineReg.cs` | Windows Store IAP，离线注册 |
+| 请求鉴权 | `AuthenticationMiddleware.cs` | ASP.NET Core 中间件 |
+| XML 数据模型 | `Models/MusicXml.cs`, `GenreXml.cs`, `VersionXml.cs` | maimai 谱面元数据结构 |
+| AquaMai 配置模型 | `Models/AquaMaiConfigDto.cs` | mod 配置 DTO |
+| Simai 谱面导入 | `Services/MaidataImportService.cs` | 解析并导入 Simai 格式谱面 |
+| 音频处理 | `Utils/Audio.cs`, `AudioConvert.cs`, `CriUtils.cs` | FFmpeg + CRI SDK 封装 |
+| 视频/图片处理 | `Utils/VideoConvert.cs`, `ImageConvert.cs` | 媒体转换工具 |
+| maimai 工具函数 | `Utils/MaiUtils.cs` | 谱面相关通用工具 |
+| Windows 工具函数 | `Utils/WinUtils.cs` | Win32 API 封装 |
+| AquaMai 工具 | `Utils/AquaMaiConfigExtensions.cs`, `AquaMaiSignatureV2.cs` | mod 配置扩展和签名 |
+| i18n | `Locale/Locale.resx`, `zh-hans/`, `zh-hant/` | 简体/繁体中文本地化 |
+
+## CONVENTIONS
+
+- 启动顺序：`Program.cs`（入口）→ `AppMain.cs`（生命周期管理）→ `ServerManager.cs`（启动 Kestrel）
+- `Browser.cs` 通过 WebView2 加载前端，前端通过 localhost API 与后端通信
+- `*.Designer.cs` 是 WinForms 自动生成文件，**不要手动编辑**
+- Controllers 按领域分 7 个子目录：App / AssetDir / Catagory / Charts / Mod / Music / Tools
+- `Catagory` 是已知 typo（应为 Category），但已是既定命名，**保持一致，不要修改**
+- `wwwroot/` 是 `Front/` 构建产物，不要手动修改，通过 `pnpm build` 生成
+
+## ANTI-PATTERNS
+
+- 不要修改 `Python/`、`FFMpeg/`、`WannaCRI/` 目录内容（嵌入式运行时）
+- 不要手动编辑 `wwwroot/`（前端构建产物）
+- 不要手动编辑 `*.Designer.cs`（WinForms 自动生成）
+- 不要在 `Models/` 里写业务逻辑，只放纯数据结构

MaiChartManager/Controllers/AGENTS.md

@@ -0,0 +1,49 @@
+# CONTROLLERS 知识库
+
+## OVERVIEW
+
+ASP.NET Core REST API 控制器，按业务领域分 7 个子目录，共 25 个控制器文件。
+
+## STRUCTURE
+
+| 子目录 | 职责 | 主要文件 |
+|--------|------|----------|
+| `App/` | 应用状态、授权、版本、本地化 | AppLicenseController, AppStatusController, AppVersionController, LocaleController |
+| `AssetDir/` | 资源目录管理、冲突检测、本地资源、曲目列表 | AssetDirController, CheckConflictController, LocalAssetsController, MusicListController |
+| `Catagory/` | 版本分类、曲风分类管理 | AddVersionController, GenreController |
+| `Charts/` | 谱面 CRUD、预览、导入 | ChartController, ChartPreviewController, ImportChartController |
+| `Mod/` | AquaMai mod 配置、安装、路径管理 | ConfigurationController, InstallationController, ManualInstallController, ModPaths |
+| `Music/` | 音乐 CRUD、音频/视频转换、批量操作、迁移、VRC 处理 | MusicController, MusicBatchController, CueConvertController, MovieConvertController, MusicTransferController, VrcProcessController |
+| `Tools/` | 独立音频/视频转换工具接口 | AudioConvertToolController, VideoConvertToolController |
+
+## WHERE TO LOOK
+
+| 任务 | 去哪里 |
+|------|--------|
+| 应用授权 / IAP 状态查询 | `App/AppLicenseController.cs` |
+| 应用版本检查 / 更新 | `App/AppVersionController.cs` |
+| 多语言 / 本地化 | `App/LocaleController.cs` |
+| 资源目录增删改查 | `AssetDir/AssetDirController.cs` |
+| 导入时冲突检测 | `AssetDir/CheckConflictController.cs` |
+| 曲目列表读取 | `AssetDir/MusicListController.cs` |
+| 版本/曲风分类管理 | `Catagory/AddVersionController.cs`, `Catagory/GenreController.cs` |
+| 谱面增删改查 | `Charts/ChartController.cs` |
+| 谱面预览生成 | `Charts/ChartPreviewController.cs` |
+| 谱面导入（Simai/Ma2） | `Charts/ImportChartController.cs` |
+| AquaMai mod 配置读写 | `Mod/ConfigurationController.cs` |
+| AquaMai mod 安装/卸载 | `Mod/InstallationController.cs` |
+| 音乐增删改查 | `Music/MusicController.cs` |
+| 音乐批量操作 | `Music/MusicBatchController.cs` |
+| 音频格式转换（ACB/USM） | `Music/CueConvertController.cs` |
+| 视频转换（movie） | `Music/MovieConvertController.cs` |
+| 曲目迁移（跨目录） | `Music/MusicTransferController.cs` |
+| VRC 音频处理 | `Music/VrcProcessController.cs` |
+| 独立音频转换工具 | `Tools/AudioConvertToolController.cs` |
+| 独立视频转换工具 | `Tools/VideoConvertToolController.cs` |
+
+## CONVENTIONS
+
+- 新增控制器请放入对应业务子目录，不要堆在根目录
+- `Catagory/` 是历史 typo（正确拼写应为 Category），已是既定命名，保持一致，勿重命名
+- 前端 API client（`Front/src/client/apiGen.ts`）由 `genClient.ts` 从这些控制器自动生成，修改接口后需重新运行生成脚本
+- `Mod/ModPaths.cs` 不是控制器，是 Mod 子目录的路径常量辅助类

MaiChartManager/Front/.idea/copilot.data.migration.ask2agent.xml

@@ -0,0 +1,55 @@
+# FRONTEND KNOWLEDGE BASE
+
+## OVERVIEW
+
+Vue 3 + TypeScript 前端 SPA，通过 localhost API 与 ASP.NET Core 后端通信，内嵌于 WebView2 桌面窗口。
+
+## STRUCTURE
+
+```
+Front/
+├── src/
+│   ├── client/         # API 客户端层
+│   │   ├── api.ts                          # 手写 API 封装
+│   │   ├── apiGen.ts                       # ⚠️ 自动生成，禁止手动编辑
+│   │   └── aquaMaiVersionConfigApiGen.ts   # ⚠️ 自动生成，禁止手动编辑
+│   ├── components/     # 可复用组件：DragDropDispatcher/, Sidebar/, Splash/, VersionInfo/
+│   ├── hooks/          # Vue composables
+│   ├── icons/          # 图标组件
+│   ├── locales/        # i18n 翻译文件
+│   ├── plugins/        # Vue 插件（posthog, sentry, i18n）
+│   ├── store/          # 状态管理：仅 refs.ts 单文件
+│   ├── utils/          # 工具函数
+│   ├── views/          # 页面视图：BatchAction/, Charts/, GenreVersionManager/, ModManager/, Tools/
+│   └── assets/         # 静态资源
+├── genClient.ts        # API client 代码生成器
+├── vite.config.ts      # Vite 配置
+├── uno.config.ts       # UnoCSS 配置
+└── tsconfig.json       # TypeScript 配置（strict，@ → ./src）
+```
+
+## WHERE TO LOOK
+
+| 任务 | 位置 |
+|------|------|
+| 调用后端 API | `src/client/api.ts`（手写封装）|
+| 添加新页面 | `src/views/` 对应子目录 |
+| 全局状态 | `src/store/refs.ts` |
+| 复用组件 | `src/components/` |
+| 国际化文本 | `src/locales/` |
+| 重新生成 API client | 运行 `npx ts-node genClient.ts` |
+
+## CONVENTIONS
+
+- 包管理器：pnpm
+- UI 组件库：Naive UI
+- 样式方案：UnoCSS（原子化 CSS）
+- 路径别名：`@` → `./src`
+- 状态管理极简，所有全局 ref 集中在 `src/store/refs.ts`
+- API client 由 `genClient.ts` 读取后端控制器自动生成，输出到 `apiGen.ts`
+
+## ANTI-PATTERNS
+
+- 禁止手动编辑 `src/client/apiGen.ts` 和 `aquaMaiVersionConfigApiGen.ts`，修改会在下次生成时被覆盖
+- 需要新增 API 调用时，在后端添加控制器后运行 `genClient.ts` 重新生成，再在 `api.ts` 中封装
+- 不要用 npm 或 yarn，统一使用 pnpm

MaiChartManager/Front/AGENTS.md

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MaiChartManager</title>
+    <link rel="icon" href="/favicon.ico" />
   </head>
   <body>
     <div id="app"></div>