🚀 v0.2.0 版本更新

Bump vite from 4.3.6 to 4.3.9

.github/workflows/build.yml

@@ -43,6 +43,6 @@ jobs:
         with:
           tagName: v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version
           releaseName: v__VERSION__-alpha
-          releaseBody: See the assets to download this version and install.
+          releaseBody: https://github.com/BTMuli/Tauri.Genshin/releases/tag/v__VERSION__
           releaseDraft: true
           prerelease: false

CHANGELOG.md

@@ -1,175 +1,39 @@
 ---
 Author: 目棃
-Date: 2023-03-30
+Date: 2023-06-18
 Description: CHANGELOG
-Update: 2023-05-28
+Update: 2023-06-19
 ---
 
-> 本文档 [`Front-matter`](https://github.com/BTMuli/Mucli#FrontMatter) 由 [MuCli](https://github.com/BTMuli/Mucli) 自动生成于`2023-03-30 15:39:49`
+> 本文档 [`Front-matter`](https://github.com/BTMuli/Mucli#FrontMatter) 由 [MuCli](https://github.com/BTMuli/Mucli) 自动生成于 `2023-06-18 15:03:42 `
 > 
-> 更新于 `2023-05-28 16:11:30`
+> 更新于 `2023-06-19 14:30:30`
 
 # CHANGELOG
 
-## [0.1.6](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.6) (2023-05-28)
+## [0.2.0](https://github.com/BTMuli/Tauri.Genshin/releases/0.2.0) (2023-06-18)
 
 ### Feat
 
-- 用户：添加部分数据获取请求
+- 功能：完成原神战绩数据获取、分享
+- 功能：完成角色列表数据获取、分享
+- 功能：完成深渊数据获取、分享
+- 组件：新建多种组件
+- 功能：帖子&公告支持分享 [`5393dc1b`](https://github.com/BTMuli/Tauri.Genshin/commit/5393dc1b)
+- 页面：帖子&公告页面样式调整
 
 ### Fix
 
-- 页面：修复间距显示异常 [`a428c86a`](https://github.com/BTMuli/Tauri.Genshin/commit/a428c86a)
-- 成就：数据库更新后成就版本自动更新 [`71f5c30f`](https://github.com/BTMuli/Tauri.Genshin/commit/71f5c30f)
-- 首页：修复首页卡素材日历的问题 [`5a14b90b`](https://github.com/BTMuli/Tauri.Genshin/commit/5a14b90b)
+- 卡牌：更新遗漏卡牌 [`2b768bbf`](https://github.com/BTMuli/Tauri.Genshin/commit/2b768bbf)
+- 数据：`ltoken`失效时自动更新 [`6a4ab1f0`](https://github.com/BTMuli/Tauri.Genshin/commit/6a4ab1f0)
+- 应用：修复自动更新无效问题 [`9eec6258`](https://github.com/BTMuli/Tauri.Genshin/commit/9eec6258)
+- 应用：支持深渊数据备份&恢复 [`44f715f4`](https://github.com/BTMuli/Tauri.Genshin/commit/44f715f4)
+- 数据库：修复更新时间 `dev` 开头仍然存储的问题 [`32e3548b`](https://github.com/BTMuli/Tauri.Genshin/commit/32e3548b)
 
 ### Change
 
-- 组件：部分组件实现方式更改
+- 类型：更新部分类型定义
+- 资源：成就系列图标目录变更
+- 资源：字体文件变更 [`2ee48566`](https://github.com/BTMuli/Tauri.Genshin/commit/2ee48566)
 
-FullCommits: [`v0.1.5 ~ v0.1.6`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.5...v0.1.6)
-
-## [0.1.5](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.5) (2023-05-25)
-
-### Feat
-
-- 组件：`TConfirm` 组件支持 Input [`50f2305d`](https://github.com/BTMuli/Tauri.Genshin/commit/50f2305d)
-- 请求：完成部分涉及游戏数据的获取
-- 数据库：添加 `GameAccount` 表用于存储用户游戏账号数据 [`683500fe`](https://github.com/BTMuli/Tauri.Genshin/commit/683500fe)
-- 资源：添加素材相关图片 [`11322f14`](https://github.com/BTMuli/Tauri.Genshin/commit/11322f14)
-- 用户：支持用户信息获取&基本信息展示（昵称、UID、头像）
-- 数据库：数据备份时会将用户 Cookie 一同备份
-
-### Fix
-
-- 资源：补充上个版本遗漏的数据 [`91b7ed35`](https://github.com/BTMuli/Tauri.Genshin/commit/91b7ed35)
-- 设置：修复数据库不存在时无法重置数据库的问题
-- 资源：添加 3.7 版本资源 [#17](https://github.com/BTMuli/Tauri.Genshin/issues/17)
-- 首页：增加近期活动结束时间为 0 的处理 [#25](https://github.com/BTMuli/Tauri.Genshin/issues/25)
-- 样式：滚动条样式调整 [`3b47c5f2`](https://github.com/BTMuli/Tauri.Genshin/commit/3b47c5f2)
-- 应用：不再在生产环境提供调试模式的开关 [#26](https://github.com/BTMuli/Tauri.Genshin/issues/26)
-- 数据库：删除 IndexedDB 的删除操作 [`f23b73ec`](https://github.com/BTMuli/Tauri.Genshin/commit/f23b73ec)
-
-### Change
-
-- 应用：更新检测 Endpoints 变更 [`13ab6c83`](https://github.com/BTMuli/Tauri.Genshin/commit/13ab6c83)
-- Cookie：获取方式改为手动输入，不再通过 rocket 尝试自动获取 [`baff5a17`](https://github.com/BTMuli/Tauri.Genshin/commit/baff5a17)
-- 侧边栏：更换部分图标 [`e9e5c0a6`](https://github.com/BTMuli/Tauri.Genshin/commit/e9e5c0a6)
-- 素材日历：排布更改，添加 overlay 显示角色/武器 需要材料及来源 [`a27f6277`](https://github.com/BTMuli/Tauri.Genshin/commit/a27f6277)
-- 首页组件：背景改为半透明，整体表现优化
-- 数据库：关闭首页数据库完整性检测 [`cf1fb130`](https://github.com/BTMuli/Tauri.Genshin/commit/cf1fb130)
-
-FullCommits: [`v0.1.4 ~ v0.1.5`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.4...v0.1.5)
-
-## [0.1.4](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.4) (2023-05-02)
-
-### Feat
-
-- 应用：支持资源完整性检测&更新 [`bbfd608`](https://github.com/BTMuli/Tauri.Genshin/commit/bbfd608)
-- 应用：支持数据备份&恢复 [`214d1d1`](https://github.com/BTMuli/Tauri.Genshin/commit/214d1d10)
-- 应用：数据源更改为 Sqlite 而非之前的 IndexedDB [`26048dc`](https://github.com/BTMuli/Tauri.Genshin/commit/26048dc) [#11](https://github.com/BTMuli/Tauri.Genshin/issues/11)
-
-### Fix
-
-- 成就：使用虚拟列表优化内存占用及浏览体验 [`5963e9a`](https://github.com/BTMuli/Tauri.Genshin/commit/5963e9a) [#13](https://github.com/BTMuli/Tauri.Genshin/issues/13)
-- 组件：优化 `TConfirm` 组件表现
-- 应用：优化侧边滚动条表现
-- 应用：检测更新 Key 更改，下版本更新将提示更新 [`ceea064`](https://github.com/BTMuli/Tauri.Genshin/commit/ceea064)
-- 应用：添加 `3.6` 版本遗漏数据 [`91fc39b`](https://github.com/BTMuli/Tauri.Genshin/commit/91fc39b)
-
-FullCommits: [`v0.1.3 ~ v0.1.4`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.3...v0.1.4)
-
-## [0.1.3](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.3) (2023-04-23)
-
-### Feat
-
-- 应用：支持浅色\深色主题切换
-- 应用：支持检测更新
-- 图鉴：角色图鉴草创 [`d154b5bd`](https://github.com/BTMuli/Tauri.Genshin/commit/d154b5bd)
-- 图鉴：武器图鉴草创 [`1c309e38`](https://github.com/BTMuli/Tauri.Genshin/commit/1c309e38)
-- 滚动条：样式美化 [`4022504`](https://github.com/BTMuli/Tauri.Genshin/commit/4022504)
-
-### Fix
-
-- 应用：修复初始化未重新加载资源的问题 [`513be2e`](https://github.com/BTMuli/Tauri.Genshin/commit/513be2e)
-- 应用：除成就数据外的 `readonly` 数据直接读取应用内 `json` 文件
-- 应用：添加游戏新版本资源
-- GCG：相关资源归到 `WIKI` 下
-- 首页：素材日历资源采用 WIKI 资源
-
-FullCommits: [`v0.1.2 ~ v0.1.3`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.2...v0.1.3)
-
-## [0.1.2](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.2) (2023-04-12)
-
-### Feat
-
-- 窗口：根据内容改变标题
-- 成就：添加版本信息
-- 首页：组件展示顺序自定义
-- 组件：新建 confirm 组件
-- 设置：添加系统信息、添加打包时间戳
-- 咨讯：支持多种游戏咨讯查看
-- 米游社解析：添加 `mention` 类型解析
-
-
-### Fix
-
-- 首页：近期活动、限时祈愿结束处理
-- 组件：回顶组件 hover 效果美化
-- 组件：用 snackebar 替换 alert
-- 咨讯：无封面时替换为默认图
-- 抽奖详情：配色调整
-- 首页：素材日历资源本地化
-- 侧边栏：设置置底
-
-FullCommits: [`v0.1.1 ~ v0.1.2`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.1...v0.1.2)
-
-## [0.1.1](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.1) (2023-04-03)
-
-### Feat
-
-- 米游社解析：新增 `link_card`、`divider`、`lottery`、`fold`
-- 米游社解析：新增 `lottery` 跳转详情页，即抽奖详情跳转
-- 首页：新增近期活动信息卡片
-- 首页：各展示卡片组件分离
-- 组件：新增回顶组件 [`c633476e`](https://github.com/BTMuli/Tauri.Genshin/commit/c633476e)
-- 新增：游戏内公告数据获取&展示
-- 新增：游戏内公告数据解析 [`68c07732`](https://github.com/BTMuli/Tauri.Genshin/commit/68c07732)
-- 首页：新增材料日历获取&展示 [`34bb878e`](https://github.com/BTMuli/Tauri.Genshin/commit/34bb878e)
-- 首页：显示组件可选，`限时祈愿`、`近期活动`、`材料日历` [`871bf031`](https://github.com/BTMuli/Tauri.Genshin/commit/871bf031)
-
-### Fix
-
-- 帖子跳转：改为用组件实现，而非之前的写入 `.html` 文件后读取
-- 首页：修复限时祈愿获取数据转换为卡片数据时可能返回空数据的问题 [`45bba5a1`](https://github.com/BTMuli/Tauri.Genshin/commit/45bba5a1)
-- 加载组件：可选绝对定位或相对定位 [`56d0c8e6`](https://github.com/BTMuli/Tauri.Genshin/commit/56d0c8e6)
-- 米游社咨讯页：完善 `devMode` 下的数据展示 [`e2aee518`](https://github.com/BTMuli/Tauri.Genshin/commit/e2aee518)
-- 米游社解析：修复帖子图片未正常显示的问题 [`3cc71a89`](https://github.com/BTMuli/Tauri.Genshin/commit/3cc71a89)
-- 米游社咨讯页：支持无限滚动 [`15ce357b`](https://github.com/BTMuli/Tauri.Genshin/commit/15ce357b)
-- 米游社咨讯页：修复未存在封面图时的显示问题 [`340cd690`](https://github.com/BTMuli/Tauri.Genshin/commit/340cd690)
-- 米游社咨讯页：优化加载性能 [`d3f7b4be`](https://github.com/BTMuli/Tauri.Genshin/commit/d3f7b4be)
-
-### Change
-
-- 字体变更：删去原有 `Genshin.ttf`，增加 `汉仪文黑-85W.ttf`，`汉仪文黑-55W.ttf`、`Consolas.ttf`。
-- Tauri: 取消窗体 `transparent` 属性。
-- Build: RollupOptions 配置变更。 [`b44dd46f`](https://github.com/BTMuli/Tauri.Genshin/commit/b44dd46f)
-- css: 全部改为 `scoped`，全局引入 `css` 文件调整。
-- 资源：删除无用图标。 [`7207a901`](https://github.com/BTMuli/Tauri.Genshin/commit/7207a901)
-
-FullCommits: [`v0.1.0 ~ v0.1.1`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.0...v0.1.1)
-
-## [0.1.0](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.0) (2023-03-30)
-
-> 因为之前还有个 preAlpha 版本，这里的变更记录从项目创建开始。
-
-### Feat
-
-> 按照侧边栏的顺序排序
-
-- 支持当前卡池查看&对应祈愿帖跳转
-- 支持官方咨讯查看，包括：新闻、活动、公告
-- 支持 UIAF 成就数据导入导出&展示
-- 支持 GCG 卡牌数据展示
-
-FullCommits: [`v0.1.0`](https://github.com/BTMuli/Tauri.Genshin/commits/v0.1.0)
+FullCommits: [`v0.1.6...v0.2.0`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.6...v0.2.0)

README.md

@@ -2,22 +2,15 @@
 Author: 目棃
 Date: 2023-03-05
 Description: 说明文档
-Update: 2023-05-25
+Update: 2023-06-19
 ---
 
-> 本文档 [`Front-matter`](https://github.com/BTMuli/Mucli#FrontMatter) 由 [MuCli](https://github.com/BTMuli/Mucli) 自动生成于`2023-03-05 14:41:55`
+> 本文档 [`Front-matter`](https://github.com/BTMuli/Mucli#FrontMatter) 由 [MuCli](https://github.com/BTMuli/Mucli) 自动生成于 `2023-03-05 14:41:55`
 > 
-> 更新于 `2023-05-25 17:29:18`
+> 更新于 `2023-06-19 14:30:03`
 
 ![](https://img.shields.io/github/last-commit/BTMuli/Tauri.Genshin?style=for-the-badge) ![](https://img.shields.io/github/commits-since/BTMuli/Tauri.Genshin/latest?include_prereleases&style=for-the-badge) ![](https://img.shields.io/github/license/BTMuli/Tauri.Genshin?style=for-the-badge) 
 
-<a href="https://gitmoji.dev">
-  <img
-    src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=for-the-badge"
-    alt="Gitmoji"
-  />
-</a>
-
 # Tauri.Genshin
 
 Tauri 练手项目，子模块：[TGAssistant](https://github.com/BTMuli/TGAssistant)
@@ -42,16 +35,22 @@ Tauri 练手项目，子模块：[TGAssistant](https://github.com/BTMuli/TGAssis
 
 - [x] 米游社咨讯获取&展示（支持多种游戏）
 - [x] 游戏内公告&活动获取&展示
-- [x] UIAF 成就数据导入导出&展示
+- [x] UIAF 成就数据导入、导出、备份、恢复
 - [x] 首页素材日历、近期活动、限时祈愿可选展示
 - [x] Wiki 页面草创（包含 GCG、角色、武器等）
 - [x] 浅色/深色主题切换
 - [x] 应用更新检测
+- [x] 用户 Cookie 获取、备份、恢复、刷新
+- [x] 原神战绩数据获取、渲染、分享
+- [x] 角色列表数据获取、渲染、分享
+- [x] 深渊挑战数据获取、渲染、分享、备份、恢复 
 
 ### 计划中
 
 - [ ] UIGF 祈愿数据导入导出&展示
-- [ ] 游戏数据获取
+- [ ] 深渊数据上传
+- [ ] 实时便笺数据获取
+- [ ] 角色天赋数据获取
 
 ### 长期计划
 

docs/CHANGELOG-v0.1.x.md

@@ -0,0 +1,177 @@
+---
+Author: 目棃
+Date: 2023-03-30
+Description: CHANGELOG v0.1.x
+Update: 2023-06-18
+---
+
+> 本文档 [`Front-matter`](https://github.com/BTMuli/Mucli#FrontMatter) 由 [MuCli](https://github.com/BTMuli/Mucli) 自动生成于 `2023-03-30 15:39:49`
+> 
+> 更新于 `2023-06-18 15:02:31`
+
+# CHANGELOG v0.1.x
+
+> 本文仅记录 v0.1.x 版本的更新内容
+
+## [0.1.6](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.6) (2023-05-28)
+
+### Feat
+
+- 用户：添加部分数据获取请求
+
+### Fix
+
+- 页面：修复间距显示异常 [`a428c86a`](https://github.com/BTMuli/Tauri.Genshin/commit/a428c86a)
+- 成就：数据库更新后成就版本自动更新 [`71f5c30f`](https://github.com/BTMuli/Tauri.Genshin/commit/71f5c30f)
+- 首页：修复首页卡素材日历的问题 [`5a14b90b`](https://github.com/BTMuli/Tauri.Genshin/commit/5a14b90b)
+
+### Change
+
+- 组件：部分组件实现方式更改
+
+FullCommits: [`v0.1.5 ~ v0.1.6`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.5...v0.1.6)
+
+## [0.1.5](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.5) (2023-05-25)
+
+### Feat
+
+- 组件：`TConfirm` 组件支持 Input [`50f2305d`](https://github.com/BTMuli/Tauri.Genshin/commit/50f2305d)
+- 请求：完成部分涉及游戏数据的获取
+- 数据库：添加 `GameAccount` 表用于存储用户游戏账号数据 [`683500fe`](https://github.com/BTMuli/Tauri.Genshin/commit/683500fe)
+- 资源：添加素材相关图片 [`11322f14`](https://github.com/BTMuli/Tauri.Genshin/commit/11322f14)
+- 用户：支持用户信息获取&基本信息展示（昵称、UID、头像）
+- 数据库：数据备份时会将用户 Cookie 一同备份
+
+### Fix
+
+- 资源：补充上个版本遗漏的数据 [`91b7ed35`](https://github.com/BTMuli/Tauri.Genshin/commit/91b7ed35)
+- 设置：修复数据库不存在时无法重置数据库的问题
+- 资源：添加 3.7 版本资源 [#17](https://github.com/BTMuli/Tauri.Genshin/issues/17)
+- 首页：增加近期活动结束时间为 0 的处理 [#25](https://github.com/BTMuli/Tauri.Genshin/issues/25)
+- 样式：滚动条样式调整 [`3b47c5f2`](https://github.com/BTMuli/Tauri.Genshin/commit/3b47c5f2)
+- 应用：不再在生产环境提供调试模式的开关 [#26](https://github.com/BTMuli/Tauri.Genshin/issues/26)
+- 数据库：删除 IndexedDB 的删除操作 [`f23b73ec`](https://github.com/BTMuli/Tauri.Genshin/commit/f23b73ec)
+
+### Change
+
+- 应用：更新检测 Endpoints 变更 [`13ab6c83`](https://github.com/BTMuli/Tauri.Genshin/commit/13ab6c83)
+- Cookie：获取方式改为手动输入，不再通过 rocket 尝试自动获取 [`baff5a17`](https://github.com/BTMuli/Tauri.Genshin/commit/baff5a17)
+- 侧边栏：更换部分图标 [`e9e5c0a6`](https://github.com/BTMuli/Tauri.Genshin/commit/e9e5c0a6)
+- 素材日历：排布更改，添加 overlay 显示角色/武器 需要材料及来源 [`a27f6277`](https://github.com/BTMuli/Tauri.Genshin/commit/a27f6277)
+- 首页组件：背景改为半透明，整体表现优化
+- 数据库：关闭首页数据库完整性检测 [`cf1fb130`](https://github.com/BTMuli/Tauri.Genshin/commit/cf1fb130)
+
+FullCommits: [`v0.1.4 ~ v0.1.5`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.4...v0.1.5)
+
+## [0.1.4](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.4) (2023-05-02)
+
+### Feat
+
+- 应用：支持资源完整性检测&更新 [`bbfd608`](https://github.com/BTMuli/Tauri.Genshin/commit/bbfd608)
+- 应用：支持数据备份&恢复 [`214d1d1`](https://github.com/BTMuli/Tauri.Genshin/commit/214d1d10)
+- 应用：数据源更改为 Sqlite 而非之前的 IndexedDB [`26048dc`](https://github.com/BTMuli/Tauri.Genshin/commit/26048dc) [#11](https://github.com/BTMuli/Tauri.Genshin/issues/11)
+
+### Fix
+
+- 成就：使用虚拟列表优化内存占用及浏览体验 [`5963e9a`](https://github.com/BTMuli/Tauri.Genshin/commit/5963e9a) [#13](https://github.com/BTMuli/Tauri.Genshin/issues/13)
+- 组件：优化 `TConfirm` 组件表现
+- 应用：优化侧边滚动条表现
+- 应用：检测更新 Key 更改，下版本更新将提示更新 [`ceea064`](https://github.com/BTMuli/Tauri.Genshin/commit/ceea064)
+- 应用：添加 `3.6` 版本遗漏数据 [`91fc39b`](https://github.com/BTMuli/Tauri.Genshin/commit/91fc39b)
+
+FullCommits: [`v0.1.3 ~ v0.1.4`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.3...v0.1.4)
+
+## [0.1.3](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.3) (2023-04-23)
+
+### Feat
+
+- 应用：支持浅色\深色主题切换
+- 应用：支持检测更新
+- 图鉴：角色图鉴草创 [`d154b5bd`](https://github.com/BTMuli/Tauri.Genshin/commit/d154b5bd)
+- 图鉴：武器图鉴草创 [`1c309e38`](https://github.com/BTMuli/Tauri.Genshin/commit/1c309e38)
+- 滚动条：样式美化 [`4022504`](https://github.com/BTMuli/Tauri.Genshin/commit/4022504)
+
+### Fix
+
+- 应用：修复初始化未重新加载资源的问题 [`513be2e`](https://github.com/BTMuli/Tauri.Genshin/commit/513be2e)
+- 应用：除成就数据外的 `readonly` 数据直接读取应用内 `json` 文件
+- 应用：添加游戏新版本资源
+- GCG：相关资源归到 `WIKI` 下
+- 首页：素材日历资源采用 WIKI 资源
+
+FullCommits: [`v0.1.2 ~ v0.1.3`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.2...v0.1.3)
+
+## [0.1.2](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.2) (2023-04-12)
+
+### Feat
+
+- 窗口：根据内容改变标题
+- 成就：添加版本信息
+- 首页：组件展示顺序自定义
+- 组件：新建 confirm 组件
+- 设置：添加系统信息、添加打包时间戳
+- 咨讯：支持多种游戏咨讯查看
+- 米游社解析：添加 `mention` 类型解析
+
+
+### Fix
+
+- 首页：近期活动、限时祈愿结束处理
+- 组件：回顶组件 hover 效果美化
+- 组件：用 snackebar 替换 alert
+- 咨讯：无封面时替换为默认图
+- 抽奖详情：配色调整
+- 首页：素材日历资源本地化
+- 侧边栏：设置置底
+
+FullCommits: [`v0.1.1 ~ v0.1.2`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.1...v0.1.2)
+
+## [0.1.1](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.1) (2023-04-03)
+
+### Feat
+
+- 米游社解析：新增 `link_card`、`divider`、`lottery`、`fold`
+- 米游社解析：新增 `lottery` 跳转详情页，即抽奖详情跳转
+- 首页：新增近期活动信息卡片
+- 首页：各展示卡片组件分离
+- 组件：新增回顶组件 [`c633476e`](https://github.com/BTMuli/Tauri.Genshin/commit/c633476e)
+- 新增：游戏内公告数据获取&展示
+- 新增：游戏内公告数据解析 [`68c07732`](https://github.com/BTMuli/Tauri.Genshin/commit/68c07732)
+- 首页：新增材料日历获取&展示 [`34bb878e`](https://github.com/BTMuli/Tauri.Genshin/commit/34bb878e)
+- 首页：显示组件可选，`限时祈愿`、`近期活动`、`材料日历` [`871bf031`](https://github.com/BTMuli/Tauri.Genshin/commit/871bf031)
+
+### Fix
+
+- 帖子跳转：改为用组件实现，而非之前的写入 `.html` 文件后读取
+- 首页：修复限时祈愿获取数据转换为卡片数据时可能返回空数据的问题 [`45bba5a1`](https://github.com/BTMuli/Tauri.Genshin/commit/45bba5a1)
+- 加载组件：可选绝对定位或相对定位 [`56d0c8e6`](https://github.com/BTMuli/Tauri.Genshin/commit/56d0c8e6)
+- 米游社咨讯页：完善 `devMode` 下的数据展示 [`e2aee518`](https://github.com/BTMuli/Tauri.Genshin/commit/e2aee518)
+- 米游社解析：修复帖子图片未正常显示的问题 [`3cc71a89`](https://github.com/BTMuli/Tauri.Genshin/commit/3cc71a89)
+- 米游社咨讯页：支持无限滚动 [`15ce357b`](https://github.com/BTMuli/Tauri.Genshin/commit/15ce357b)
+- 米游社咨讯页：修复未存在封面图时的显示问题 [`340cd690`](https://github.com/BTMuli/Tauri.Genshin/commit/340cd690)
+- 米游社咨讯页：优化加载性能 [`d3f7b4be`](https://github.com/BTMuli/Tauri.Genshin/commit/d3f7b4be)
+
+### Change
+
+- 字体变更：删去原有 `Genshin.ttf`，增加 `汉仪文黑-85W.ttf`，`汉仪文黑-55W.ttf`、`Consolas.ttf`。
+- Tauri: 取消窗体 `transparent` 属性。
+- Build: RollupOptions 配置变更。 [`b44dd46f`](https://github.com/BTMuli/Tauri.Genshin/commit/b44dd46f)
+- css: 全部改为 `scoped`，全局引入 `css` 文件调整。
+- 资源：删除无用图标。 [`7207a901`](https://github.com/BTMuli/Tauri.Genshin/commit/7207a901)
+
+FullCommits: [`v0.1.0 ~ v0.1.1`](https://github.com/BTMuli/Tauri.Genshin/compare/v0.1.0...v0.1.1)
+
+## [0.1.0](https://github.com/BTMuli/Tauri.Genshin/releases/v0.1.0) (2023-03-30)
+
+> 因为之前还有个 preAlpha 版本，这里的变更记录从项目创建开始。
+
+### Feat
+
+> 按照侧边栏的顺序排序
+
+- 支持当前卡池查看&对应祈愿帖跳转
+- 支持官方咨讯查看，包括：新闻、活动、公告
+- 支持 UIAF 成就数据导入导出&展示
+- 支持 GCG 卡牌数据展示
+
+FullCommits: [`v0.1.0`](https://github.com/BTMuli/Tauri.Genshin/commits/v0.1.0)

latest.json

@@ -1,11 +1,11 @@
 {
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"notes": "See the assets to download this version and install.",
-	"pub_date": "2023-05-25T09:50:54.739Z",
+	"pub_date": "2023-05-28T08:35:02.837Z",
 	"platforms": {
 		"windows-x86_64": {
-			"signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVSWkdzekNNZjh1aHB0Y0g4b2Jyd2pMVkhKSDdGa0Q2UjM1OWRObFJFMlVEMXZkay9QNXRCOTQ5VS8wUkxPeHFCNVplRVdnTEt0QnM1U3lIZXVxK21VN3VBMlQ4TDRpMHdvPQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNjg1MDA4MjM5CWZpbGU6dGF1cmktZ2Vuc2hpbl8wLjEuNV94NjRfemgtQ04ubXNpLnppcAozSWFYSHJIT2JzYjdDLzhjV3FKMW9odzNTN05wZVVYalphM3ZFYS90R1E1WHl5aFMyNCt3MFFxR3hZM0tBZUE5Qjk2TG91WXorRXFzQ1VXR2pwZllDZz09Cg==",
-			"url": "https://github.com/BTMuli/Tauri.Genshin/releases/download/v0.1.5/tauri-genshin_0.1.5_x64_zh-CN.msi.zip"
+			"signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVSWkdzekNNZjh1aHFFWURpcFZoU0Urb1NhRGRlazZQbkZLUUpUckJHQllYOGhQL01WNm1WSVh6SktkZURZVGd6SVJpYi81dG9aZTZ3ejB0YWJ3SjkvUW1xYTNwZTFxaHc0PQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNjg1MjYyODc4CWZpbGU6dGF1cmktZ2Vuc2hpbl8wLjEuNl94NjRfemgtQ04ubXNpLnppcAp6MVgwcVVXa3BwS0tjcHlkK05mYk9ManFTWmRhUTI5ajN2Qk9KYjJwRlR4OU9mbUszaWR0eFZDR2UyMEZDbHFNalhWcmtYYWh4M1FxTkowdzZjV1JBdz09Cg==",
+			"url": "https://github.com/BTMuli/Tauri.Genshin/releases/download/v0.1.6/tauri-genshin_0.1.6_x64_zh-CN.msi.zip"
 		}
 	}
 }

package-lock.json

@@ -1,17 +1,18 @@
 {
 	"name": "tauri-genshin",
-	"version": "0.1.6",
+	"version": "0.2.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tauri-genshin",
-			"version": "0.1.6",
+			"version": "0.2.0",
 			"license": "MIT",
 			"dependencies": {
 				"@mdi/font": "7.2.96",
 				"@tauri-apps/api": "^1.3.0",
 				"clipboard": "^2.0.11",
+				"html2canvas": "^1.4.1",
 				"js-md5": "^0.7.3",
 				"pinia": "^2.0.36",
 				"pinia-plugin-persistedstate": "^3.1.0",
@@ -43,7 +44,7 @@
 				"stylelint-high-performance-animation": "^1.8.0",
 				"stylelint-order": "^6.0.3",
 				"typescript": "^5.0.4",
-				"vite": "^4.3.5",
+				"vite": "^4.3.9",
 				"vite-plugin-vuetify": "^1.0.2"
 			}
 		},
@@ -1029,6 +1030,14 @@
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true
 		},
+		"node_modules/base64-arraybuffer": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+			"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
 		"node_modules/base64id": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/base64id/-/base64id-2.0.0.tgz",
@@ -1436,6 +1445,14 @@
 				"node": ">=12.22"
 			}
 		},
+		"node_modules/css-line-break": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+			"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/css-tree": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-2.3.1.tgz",
@@ -2701,6 +2718,19 @@
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
 			"dev": true
 		},
+		"node_modules/fsevents": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+			"hasInstallScript": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
 		"node_modules/function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
@@ -3081,6 +3111,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/html2canvas": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+			"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+			"dependencies": {
+				"css-line-break": "^2.1.0",
+				"text-segmentation": "^1.0.3"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
 		"node_modules/htmlparser2": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -5523,6 +5565,14 @@
 				"@tauri-apps/api": "^1.2.0"
 			}
 		},
+		"node_modules/text-segmentation": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+			"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -5778,6 +5828,14 @@
 				"node": ">= 0.4.0"
 			}
 		},
+		"node_modules/utrie": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+			"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+			"dependencies": {
+				"base64-arraybuffer": "^1.0.2"
+			}
+		},
 		"node_modules/v8-compile-cache": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -5804,9 +5862,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "4.3.6",
-			"resolved": "https://registry.npmmirror.com/vite/-/vite-4.3.6.tgz",
-			"integrity": "sha512-cqIyLSbA6gornMS659AXTVKF7cvSHMdKmJJwQ9DXq3lwsT1uZSdktuBRlpHQ8VnOWx0QHtjDwxPpGtyo9Fh/Qg==",
+			"version": "4.3.9",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
+			"integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==",
 			"devOptional": true,
 			"dependencies": {
 				"esbuild": "^0.17.5",

package.json

@@ -2,7 +2,7 @@
 	"name": "tauri-genshin",
 	"description": "A Tauri App Demo",
 	"private": true,
-	"version": "0.1.6",
+	"version": "0.2.0",
 	"author": "BTMuli <bt-muli@outlook.com>",
 	"packageManager": "npm@9.6.6",
 	"scripts": {
@@ -45,6 +45,7 @@
 		"@mdi/font": "7.2.96",
 		"@tauri-apps/api": "^1.3.0",
 		"clipboard": "^2.0.11",
+		"html2canvas": "^1.4.1",
 		"js-md5": "^0.7.3",
 		"pinia": "^2.0.36",
 		"pinia-plugin-persistedstate": "^3.1.0",
@@ -76,7 +77,7 @@
 		"stylelint-high-performance-animation": "^1.8.0",
 		"stylelint-order": "^6.0.3",
 		"typescript": "^5.0.4",
-		"vite": "^4.3.5",
+		"vite": "^4.3.9",
 		"vite-plugin-vuetify": "^1.0.2"
 	}
 }

src-tauri/Cargo.lock

@@ -3117,7 +3117,7 @@ dependencies = [
 
 [[package]]
 name = "tauri-genshin"
-version = "0.1.6"
+version = "0.2.0"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tauri-genshin"
-version = "0.1.6"
+version = "0.2.0"
 description = "A Tauri App"
 authors = ["BTMuli<bt-muli@outlook.com>"]
 license = "MIT"

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
 	},
 	"package": {
 		"productName": "tauri-genshin",
-		"version": "0.1.6"
+		"version": "0.2.0"
 	},
 	"tauri": {
 		"allowlist": {
@@ -30,7 +30,8 @@
 					"https://hk4e-api.mihoyo.com/*",
 					"https://passport-api.mihoyo.com/*",
 					"https://passport-api-v4.mihoyo.com/*",
-					"https://act-webstatic.mihoyo.com/*"
+					"https://act-webstatic.mihoyo.com/*",
+					"https://sdk-webstatic.mihoyo.com/*"
 				]
 			},
 			"shell": {
@@ -55,7 +56,7 @@
 		"updater": {
 			"active": true,
 			"dialog": true,
-			"endpoints": ["https://github.com/BTMuli/Tauri.Genshin/blob/master/latest.json"],
+			"endpoints": ["https://raw.fastgit.org/BTMuli/Tauri.Genshin/master/latest.json"],
 			"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDg2MkVGRjMxQzJDQzFBNTkKUldSWkdzekNNZjh1aHJGRXBEOGtwbUxLaU1wdWNVeUJaeGhoV2ZlZ3VlYmQ0b2tYZWQwODdnTHkK"
 		},
 		"windows": [

src/assets/css/anno-parser.css

@@ -1,26 +1,25 @@
 /*
+ * @file assets css post-parser.css
  * @description 游戏公告解析 css
- * @since Alpha v0.1.1
+ * @author BTMuli <bt-muli@outlook.com
+ * @since Alpha v0.2.0
  */
 
 .anno-body {
-  margin: 20px auto;
+  margin: 0 auto;
   width: 800px;
-  font-family: "Genshin-Light", serif;
+  font-family: var(--font-text);
 }
 
 .anno-title {
-  font-family: Genshin, serif;
-  color: #5b738f;
+  font-family: var(--font-title);
+  color: var(--common-text);
   font-size: 24px;
-  font-weight: 500;
-  margin-bottom: 8px;
 }
 
 .anno-subtitle {
   font-size: 16px;
-  color: #a1aeb6;
-  margin-bottom: 16px;
+  color: var(--common-text-3);
 }
 
 .anno-img {

src/assets/css/post-parser.css

@@ -1,15 +1,32 @@
 /*
+ * @file assets css post-parser.css
  * @description 米游社解析 css
- * @since Alpha v0.1.3
+ * @author BTMuli <bt-muli@outlook.com>
+ * @since Alpha v0.2.0
  */
 
 .mys-post-body {
-  margin: 20px auto;
+  margin: 0 auto;
   width: 800px;
-  font-family: "Genshin-Light", serif;
+  font-family: var(--font-text);
   color: var(--post-default-text);
 }
 
+.mys-post-title {
+  font-family: var(--font-title);
+  color: var(--common-text);
+  font-size: 24px;
+}
+
+.mys-post-subtitle {
+  font-size: 16px;
+  color: var(--common-text-3);
+}
+
+.mys-post-content {
+  line-height: 2;
+}
+
 :deep(.mys-post-div) {
   margin: 20px auto;
 }

src/assets/fonts/index.css

@@ -1,13 +1,26 @@
-/* 设置全局字体 */
+/*
+ * @file assets fonts index.css
+ * @description 字体样式文件
+ * @author BTMuli <bt-muli@outlook.com>
+ * @since Alpha v0.2.0
+ */
+
 @font-face {
-  font-family: "Genshin";
-  src: url("./汉仪文黑-85W.ttf") format("truetype");
+    font-family: "Genshin";
+    src: url("./汉仪文黑-85W.ttf") format("truetype");
 }
+
 @font-face {
-  font-family: "Genshin-Light";
-  src: url("./汉仪文黑-55W.ttf") format("truetype");
+    font-family: "Genshin-Light";
+    src: url("./汉仪文黑-55W.ttf") format("truetype");
 }
+
 @font-face {
-  font-family: "Consolas";
-  src: url("./consolas.ttf") format("truetype");
+    font-family: "JetBrians mono";
+    src: url("./JetBrainsMono-Regular.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "JetBrians mono Bold";
+    src: url("./JetBrainsMono-Bold.ttf") format("truetype");
 }

src/assets/index.css

@@ -1,51 +1,79 @@
+/*
+ * @file assets index.css
+ * @description 全局样式文件
+ * @author BTMuli <bt-muli@outlook.com>
+ * @since Alpha v0.2.0
+ */
+
 @import "fonts/index.css";
 @import url("themes/default.css");
 @import url("themes/dark.css");
 
+:root {
+    /* font */
+    --font-text: "JetBrians mono", "Genshin-Light", sans-serif;
+    --font-title: "JetBrians mono Bold", "Genshin", serif;
+    /* color */
+    --common-color-white: #faf7e8;
+    --common-color-black: #333333;
+    --common-color-blue: #485466;
+    --common-color-blue-2: #546d8b;
+    --common-color-blue-3: #5b738f;
+    --common-color-yellow: #fec90b;
+    --common-color-grey: #96979a;
+    --common-color-grey-2: #b3b3b3;
+}
+
+html {
+    font-family: var(--font-text);
+    font-size: 16px;
+}
+
+
 /*
  * @description 侧边滚动条样式
  * @since Alpha v0.1.3
  */
 ::-webkit-scrollbar {
-  width: 8px;
-  border-radius: 5px;
+    width: 8px;
+    border-radius: 5px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--scroll-bg);
-  box-shadow: inset 0 0 5px var(--scroll-bg);
-  border-radius: 5px;
+    background: var(--scroll-bg);
+    box-shadow: inset 0 0 5px var(--scroll-bg);
+    border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #96979A;
-  border-radius: 5px;
+    background: #96979A;
+    border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #555;
+    background: #555;
 }
 
 /* card action 内的按钮 */
 .card-btn {
-  background: #4a5366;
-  color: #ece5d8;
-  border-radius: 50px;
-  margin-left: 5px;
+    background: #4a5366;
+    color: #ece5d8;
+    border-radius: 50px;
+    margin-left: 5px;
 }
 
 .card-btn img {
-  width: 20px;
-  height: 20px;
-  margin: 5px;
+    width: 20px;
+    height: 20px;
+    margin: 5px;
 }
 
 .card-dev-btn {
-  background: #546d8b;
-  color: #faf7e8;
+    background: #546d8b;
+    color: #faf7e8;
 }
 
 .card-dev-btn img {
-  width: 18px;
-  height: 18px;
+    width: 18px;
+    height: 18px;
 }

src/assets/themes/dark.css

@@ -1,12 +1,21 @@
 /**
  * @file assets themes light.css
  * @description 主题样式文件
- * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.5
+ * @author BTMuli <bt-muli@outlook.com>
+ * @since Alpha v0.2.0
  */
 
 /* 主题色 */
 html.dark {
+  --common-bg: rgb(255 255 255 / 10%);
+  --common-bg-2: rgb(255 255 255 / 20%);
+  --common-bg-4: rgb(255 255 255 / 40%);
+  --common-bg-8: rgb(255 255 255 / 80%);
+
+  --common-text: var(--common-color-white); /* title */
+  --common-text-2: var(--common-color-white); /* text */
+  --common-text-3: var(--common-color-grey); /* quote */
+
   --sidebar-bg: #1e1e1e;
   --sidebar-icon: #e1e1e1;
   --page-bg:#2a2a2a;

src/assets/themes/default.css

@@ -1,12 +1,21 @@
 /**
  * @file assets themes dark.css
  * @description 主题样式文件
- * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.5
+ * @author BTMuli <bt-muli@outlook.com>
+ * @since Alpha v0.2.0
  */
 
 /* 主题色 */
 html.default {
+  --common-bg: rgb(0 0 0 / 10%);
+  --common-bg-2: rgb(0 0 0 / 20%);
+  --common-bg-4: rgb(0 0 0 / 40%);
+  --common-bg-8: rgb(0 0 0 / 80%);
+
+  --common-text:  var(--common-color-blue); /* title */
+  --common-text-2: var(--common-color-blue-2); /* text */
+  --common-text-3: var(--common-color-blue-3); /* quote */
+
   --sidebar-bg: #485466;
   --sidebar-icon: #ece5d8;
   --page-bg:#ece5d8;

src/components/itembox/tib-abyss-detail.vue

@@ -0,0 +1,32 @@
+<template>
+  <TItemBox :model-value="box" />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+// utils
+import TGSqlite from "../../plugins/Sqlite";
+
+interface TibAbyssDetailProps {
+  modelValue: TGApp.Sqlite.Abyss.CharacterInfo;
+}
+
+const props = defineProps<TibAbyssDetailProps>();
+const box = ref({} as TItemBoxData);
+
+onMounted(async () => {
+  const res = await TGSqlite.getAppCharacter(props.modelValue.id);
+  box.value = {
+    height: "70px",
+    ltSize: "25px",
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    lt: `/icon/element/${res.element}元素.webp`,
+    innerText: `Lv.${props.modelValue.level}`,
+    innerHeight: 20,
+    display: "inner",
+    size: "70px",
+  };
+});
+</script>

src/components/itembox/tib-abyss-overview.vue

@@ -0,0 +1,32 @@
+<template>
+  <TItemBox :model-value="box" />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+// utils
+import TGSqlite from "../../plugins/Sqlite";
+
+interface TibAbyssOverviewProps {
+  modelValue: TGApp.Sqlite.Abyss.Character;
+}
+
+const props = defineProps<TibAbyssOverviewProps>();
+const box = ref({} as TItemBoxData);
+
+onMounted(async () => {
+  const res = await TGSqlite.getAppCharacter(props.modelValue.id);
+  box.value = {
+    height: "80px",
+    ltSize: "30px",
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    lt: `/icon/element/${res.element}元素.webp`,
+    innerText: props.modelValue.value.toString(),
+    display: "inner",
+    size: "80px",
+    innerHeight: 20,
+  };
+});
+</script>

src/components/itembox/tib-calendar-avatar.vue

@@ -0,0 +1,28 @@
+<template>
+  <TItemBox :model-value="box" style="cursor: pointer" />
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TibCalendarAvatarProps {
+  modelValue: TGApp.App.Calendar.Item
+}
+
+const props = defineProps<TibCalendarAvatarProps>();
+const box = computed(() => {
+  return {
+    bg: props.modelValue.bg,
+    icon: props.modelValue.icon,
+    size: "100px",
+    height: "100px",
+    display: "inner",
+    lt: props.modelValue.elementIcon,
+    ltSize: "30px",
+    innerHeight: 25,
+    innerIcon: props.modelValue.weaponIcon,
+    innerText: props.modelValue.name,
+  } as TItemBoxData;
+});
+</script>

src/components/itembox/tib-calendar-weapon.vue

@@ -0,0 +1,27 @@
+<template>
+  <TItemBox :model-value="box" style="cursor: pointer" />
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TibCalendarWeaponProps {
+  modelValue: TGApp.App.Calendar.Item;
+}
+
+const props = defineProps<TibCalendarWeaponProps>();
+const box = computed(() => {
+  return {
+    bg: props.modelValue.bg,
+    icon: props.modelValue.icon,
+    size: "100px",
+    height: "100px",
+    display: "inner",
+    lt: props.modelValue.weaponIcon,
+    ltSize: "30px",
+    innerHeight: 25,
+    innerText: props.modelValue.name,
+  } as TItemBoxData;
+});
+</script>

src/components/itembox/tib-ur-avatar.vue

@@ -0,0 +1,45 @@
+<template>
+  <TItemBox v-model="box" @click="showData" />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TibUrAvatarProps {
+  modelValue: TGApp.Sqlite.Record.Avatar
+}
+
+const props = defineProps<TibUrAvatarProps>();
+const box = ref({} as TItemBoxData);
+const getName = () => {
+  return (
+    props.modelValue.id === 10000005
+      ? "旅行者-空"
+      : props.modelValue.id === 10000007
+        ? "旅行者-荧"
+        : props.modelValue.name
+  );
+};
+
+onMounted(async () => {
+  box.value = {
+    size: "80px",
+    height: "80px",
+    ltSize: "30px",
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    lt: `/icon/element/${props.modelValue.element}元素.webp`,
+    rt: props.modelValue.constellation.toString() || "0",
+    rtSize: "20px",
+    innerText: `${getName()}`,
+    innerHeight: 20,
+    display: "inner",
+  };
+});
+
+function showData () {
+  // todo @click 应该出来的是一个弹窗，而不是 console
+  console.log(props.modelValue);
+}
+</script>

src/components/itembox/tib-wiki-avatar.vue

@@ -0,0 +1,28 @@
+<template>
+  <TItemBox :model-value="box" style="cursor: pointer" />
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TibCalendarAvatarProps {
+  modelValue: TGApp.App.Character.WikiBriefInfo;
+}
+
+const props = defineProps<TibCalendarAvatarProps>();
+const box = computed(() => {
+  return {
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    size: "128px",
+    height: "128px",
+    display: "inner",
+    lt: `/icon/element/${props.modelValue.element}元素.webp`,
+    ltSize: "40px",
+    innerHeight: 30,
+    innerIcon: `/icon/weapon/${props.modelValue.weapon}.webp`,
+    innerText: props.modelValue.name,
+  } as TItemBoxData;
+});
+</script>

src/components/itembox/tib-wiki-weapon.vue

@@ -0,0 +1,27 @@
+<template>
+  <TItemBox :model-value="box" style="cursor: pointer;" />
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TibCalendarWeaponProps {
+  modelValue: TGApp.App.Weapon.WikiBriefInfo
+}
+
+const props = defineProps<TibCalendarWeaponProps>();
+const box = computed(() => {
+  return {
+    bg: props.modelValue.bg,
+    icon: props.modelValue.icon,
+    size: "128px",
+    height: "128px",
+    display: "inner",
+    lt: props.modelValue.weaponIcon,
+    ltSize: "40px",
+    innerText: props.modelValue.name,
+    innerHeight: 30,
+  } as TItemBoxData;
+});
+</script>

src/components/main/t-calendar.vue

@@ -36,7 +36,7 @@
           class="card-box"
           @click="selectContent(item, 'character')"
         >
-          <TMiniAvatar size="100px" :model-value="item" />
+          <TibCalendarAvatar size="100px" :model-value="item" />
         </div>
       </div>
     </div>
@@ -52,7 +52,7 @@
           class="card-box"
           @click="selectContent(item, 'weapon')"
         >
-          <TMiniWeapon size="100px" :model-value="item" />
+          <TibCalendarWeapon size="100px" :model-value="item" />
         </div>
       </div>
     </div>
@@ -63,8 +63,8 @@
 // vue
 import { computed, onMounted, ref } from "vue";
 import ToCalendar from "../overlay/to-calendar.vue";
-import TMiniAvatar from "../mini/t-mini-avatar.vue";
-import TMiniWeapon from "../mini/t-mini-weapon.vue";
+import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
+import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
 // data
 import { AppCalendarData } from "../../data";
 

src/components/main/t-itembox.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="tib-box">
+    <div class="tib-bg">
+      <slot name="bg">
+        <img :src="modelValue.bg" alt="bg">
+      </slot>
+    </div>
+    <div class="tib-icon">
+      <slot name="icon">
+        <img :src="modelValue.icon" alt="icon">
+      </slot>
+    </div>
+    <div class="tib-cover">
+      <div class="tib-lt">
+        <img :src="modelValue.lt" alt="lt">
+      </div>
+      <div v-show="modelValue.rt" class="tib-rt">
+        {{ modelValue.rt }}
+      </div>
+      <div class="tib-inner">
+        <slot name="inner-icon">
+          <img v-show="modelValue.innerIcon" :src="modelValue.innerIcon" alt="inner-icon">
+        </slot>
+        <slot name="inner-text">
+          <span>{{ modelValue.innerText }}</span>
+        </slot>
+      </div>
+    </div>
+    <div v-if="modelValue.display==='outer'" class="tib-outer">
+      <slot name="outer-text">
+        <span>{{ modelValue.outerText }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+export interface TItemBoxData {
+  bg: string,
+  icon: string,
+  size: string,
+  height: string,
+  display: "inner" | "outer",
+  lt: string,
+  ltSize: string,
+  rt?: string,
+  rtSize?: string,
+  innerHeight?: number,
+  innerIcon?: string,
+  innerText: string,
+  outerHeight?: number,
+  outerText?: string,
+}
+
+interface TItemBoxProps {
+  modelValue: TItemBoxData,
+}
+
+const props = withDefaults(defineProps<TItemBoxProps>(), {
+  modelValue: {
+    bg: "",
+    icon: "",
+    lt: "",
+    ltSize: "30px",
+    display: "inner",
+    innerText: "",
+    size: "80px",
+    height: "80px",
+  },
+});
+
+const getInnerHeight = computed(() => `${props.modelValue.innerHeight}px`);
+const getInnerFont = computed(() => `${props.modelValue.innerHeight / 2}px`);
+const getOuterHeight = computed(() => `${props.modelValue.outerHeight}px`);
+const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
+</script>
+<style lang="css" scoped>
+.tib-box {
+  position: relative;
+  width: v-bind(props["modelValue"]["size"]);
+  height: v-bind(props["modelValue"]["height"]);
+}
+
+.tib-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: v-bind(props["modelValue"]["size"]);
+  height: v-bind(props["modelValue"]["size"]);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.tib-bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tib-icon {
+  position: relative;
+  width: v-bind(props["modelValue"]["size"]);
+  height: v-bind(props["modelValue"]["size"]);
+  overflow: hidden;
+  border-radius: 5px;
+}
+
+.tib-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tib-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: v-bind(props["modelValue"]["size"]);
+  height: v-bind(props["modelValue"]["size"]);
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tib-lt {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 5px;
+  width: v-bind(props["modelValue"]["ltSize"]);
+  height: v-bind(props["modelValue"]["ltSize"]);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tib-lt img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tib-rt {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: v-bind(props["modelValue"]["rtSize"]);
+  height: v-bind(props["modelValue"]["rtSize"]);
+  background: rgb(0 0 0 / 40%);
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--font-title);
+  color: var(--common-color-white);
+}
+
+.tib-inner {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: v-bind(getInnerHeight);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(20 20 20 / 40%);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  color: var(--common-color-white);
+  font-size: v-bind(getInnerFont);
+  font-family: var(--font-title);
+}
+
+.tib-inner img {
+  width: v-bind(getInnerHeight);
+  height: v-bind(getInnerHeight);
+  margin-right: 5px;
+}
+
+.tib-outer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: v-bind(getOuterHeight);
+  text-align: center;
+  color: var(--common-text);
+  font-size: v-bind(getOuterFont);
+}
+</style>

src/components/main/t-shareBtn.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="share-box">
+    <div class="share-btn" @click="shareContent()">
+      <v-icon style="color:var(--theme-switch-icon)">
+        mdi-share-variant
+      </v-icon>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// utils
+import { generateShareImg } from "../../utils/TGShare";
+
+interface TShareBtnProps {
+  modelValue: HTMLElement;
+  title: string;
+}
+
+const props = defineProps<TShareBtnProps>();
+
+async function shareContent () {
+  await generateShareImg(props.title, props.modelValue);
+}
+</script>
+<style lang="css" scoped>
+.share-box {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  border-radius: 50%;
+  border: var(--theme-switch-icon) 2px solid;
+}
+
+.share-box:hover {
+  opacity: 0.8;
+}
+
+.share-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 5px;
+  padding-right: 2px;
+}
+</style>

src/components/main/t-sidebar.vue

@@ -40,6 +40,28 @@
         </template>
       </v-list-item>
       <v-divider />
+      <v-list-item title="原神战绩" value="record" link href="/user/record">
+        <template #prepend>
+          <img src="/source/UI/userRecord.webp" alt="record" class="side-icon">
+        </template>
+      </v-list-item>
+      <v-list-item title="我的角色" value="character" link href="/user/characters">
+        <template #prepend>
+          <img src="/source/UI/userAvatar.webp" alt="characters" class="side-icon">
+        </template>
+      </v-list-item>
+      <v-list-item title="深渊记录" value="abyss" link href="/user/abyss">
+        <template #prepend>
+          <img src="/source/UI/userAbyss.webp" alt="abyss" class="side-icon">
+        </template>
+      </v-list-item>
+      <!-- todo -->
+      <!--      <v-list-item title="祈愿记录" value="gacha" link href="/user/gacha">-->
+      <!--        <template #prepend>-->
+      <!--          <img src="../../assets/icons/icon-wish.svg" alt="gacha" class="side-icon">-->
+      <!--        </template>-->
+      <!--      </v-list-item>-->
+      <v-divider />
       <v-list-item v-show="appStore.devEnv" title="测试" value="test" link href="/test">
         <template #prepend>
           <v-icon>mdi-test-tube</v-icon>

src/components/main/t-switchTheme.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="switch-box">
-    <div class="switch-btn" @click="swithcTheme()">
+    <div class="switch-btn" @click="switchTheme()">
       <v-icon style="color:var(--theme-switch-icon)">
         {{ themeGet === 'default' ? 'mdi-weather-night' : 'mdi-weather-sunny' }}
       </v-icon>
@@ -31,7 +31,7 @@ onMounted(async () => {
   await listenOnTheme();
 });
 
-async function swithcTheme () {
+async function switchTheme () {
   appStore.changeTheme();
   await event.emit("readTheme", themeGet.value);
 }

src/components/mini/t-calendar-material.vue

@@ -32,7 +32,6 @@ defineProps<TMiniWeaponProps>();
     position: relative;
     width: 150px;
     height: 45px;
-    cursor: pointer;
 		display: flex;
 		flex-direction: row;
 		border-radius: 5px;

src/components/mini/t-mini-avatar.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class="card-box">
-    <!-- 底层背景图 -->
-    <div class="card-bg">
-      <img :src="props.modelValue.bg" alt="bg">
-    </div>
-    <!-- 中层角色图 -->
-    <div class="card-icon">
-      <img :src="props.modelValue.icon" alt="icon">
-    </div>
-    <!-- 上层图标&内容 -->
-    <div class="card-cover">
-      <div class="card-element">
-        <img :src="props.modelValue.elementIcon" alt="element">
-      </div>
-      <div class="card-name">
-        <img :src="props.modelValue.weaponIcon" alt="weapon">
-        <span>{{ props.modelValue.name }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-interface TMiniWeaponProps {
-  size: string;
-  modelValue: TGApp.App.Character.WikiBriefInfo | TGApp.App.Calendar.Item;
-}
-
-const props = defineProps<TMiniWeaponProps>();
-
-const getSize = computed(() => {
-  return props.size === "100px" ? "30px" : "40px";
-});
-</script>
-<style lang="css" scoped>
-.card-box {
-    position: relative;
-    width: v-bind(size);
-    height: v-bind(size);
-    cursor: pointer;
-}
-
-.card-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.card-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-icon {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: 5px;
-}
-
-.card-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-cover {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-.card-element {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: v-bind(getSize);
-    height: v-bind(getSize);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.card-element img {
-    width: calc(v-bind(getSize) - 10px);
-    height: calc(v-bind(getSize) - 10px);
-    object-fit: cover;
-}
-
-.card-name img {
-    width: calc(v-bind(getSize) / 1.5);
-    height: calc(v-bind(getSize) / 1.5);
-    margin-right: 5px;
-}
-
-.card-name {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: v-bind(getSize);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgb(20 20 20 / 50%);
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    color: #fff;
-    font-size: calc(v-bind(getSize) / 3);
-    text-shadow: 0 0 5px #000;
-    font-family: Genshin, serif;
-}
-</style>

src/components/mini/t-mini-weapon.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="card-box">
-    <!-- 底层背景图 -->
-    <div class="card-bg">
-      <img :src="props.modelValue.bg" alt="bg">
-    </div>
-    <!-- 中层武器图 -->
-    <div class="card-icon">
-      <img :src="props.modelValue.icon" alt="icon">
-    </div>
-    <!-- 上层图标&内容 -->
-    <div class="card-cover">
-      <div class="card-weapon">
-        <img :src="props.modelValue.weaponIcon" alt="type">
-      </div>
-      <div class="card-name">
-        <span>{{ props.modelValue.name }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-interface TMiniWeaponProps {
-  size: string;
-  modelValue: TGApp.App.Weapon.WikiBriefInfo | TGApp.App.Calendar.Item
-}
-
-const props = defineProps<TMiniWeaponProps>();
-const getSize = computed(() => {
-  return props.size === "100px" ? "30px" : "40px";
-});
-</script>
-<style lang="css" scoped>
-.card-box {
-    position: relative;
-    width: v-bind(size);
-    height: v-bind(size);
-    cursor: pointer;
-}
-
-.card-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.card-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-icon {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: 5px;
-}
-
-.card-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-cover {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-.card-weapon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: v-bind(getSize);
-    height: v-bind(getSize);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.card-weapon img {
-    width: calc(v-bind(getSize) - 10px);
-    height: calc(v-bind(getSize) - 10px);
-    object-fit: cover;
-}
-
-.card-name {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgb(20 20 20 / 50%);
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    color: #fff;
-    font-size: calc(v-bind(getSize) / 3);
-    text-shadow: 0 0 5px #000;
-    font-family: Genshin, serif;
-}
-</style>

src/components/mini/t-user-avatar.vue

@@ -1,172 +0,0 @@
-<template>
-  <div class="tua-box" @click="showData">
-    <div class="tua-top">
-      <div class="top-item">
-        <div class="top-icon">
-          <div class="ti-bg">
-            <img :src="`/icon/bg/${props.modelValue.rarity===105?5:props.modelValue.rarity}-Star.webp`" alt="rarity">
-          </div>
-          <div class="ti-content">
-            <img :src="props.modelValue.icon" alt="avatar">
-          </div>
-          <div class="ti-level">
-            {{ props.modelValue.actived_constellation_num }}
-          </div>
-        </div>
-        <div class="top-text">
-          Lv.{{ props.modelValue.level }}
-        </div>
-      </div>
-      <div class="top-item">
-        <div class="top-icon">
-          <div class="ti-bg">
-            <img :src="`/icon/bg/${props.modelValue.weapon.rarity}-Star.webp`" alt="rarity">
-          </div>
-          <div class="ti-content">
-            <img :src="props.modelValue.weapon.icon" alt="avatar">
-          </div>
-          <div class="ti-level">
-            {{ props.modelValue.weapon.affix_level }}
-          </div>
-        </div>
-        <div class="top-text">
-          Lv.{{ props.modelValue.level }}
-        </div>
-      </div>
-    </div>
-    <!--    <div class="tua-bottom">-->
-    <!--      <div class="bottom-item">A</div>-->
-    <!--      <div class="bottom-item">E</div>-->
-    <!--      <div class="bottom-item">Q</div>-->
-    <!--    </div>-->
-  </div>
-</template>
-<script lang="ts" setup>
-interface TUAProps {
-  modelValue: TGApp.Game.Character.ListItem
-}
-
-const props = defineProps<TUAProps>();
-
-function showData () {
-  console.log(JSON.stringify(props.modelValue, null, 2));
-}
-
-function getNameCard () {
-
-}
-</script>
-<style lang="css">
-.tua-box {
-  padding: 5px;
-  width: 190px;
-  height: 100%;
-  background: rgb(255 255 255 / 10%);
-  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.tua-top {
-  width: 180px;
-  height: 110px;
-  border-radius: 5px;
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.top-item {
-  width: 80px;
-  height: 100%;
-  background: rgb(0 0 0 / 20%);
-  border-radius: 5px;
-}
-
-.top-icon {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  border-radius: 5px;
-}
-
-.ti-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 80px;
-  height: 80px;
-  border-radius: 5px;
-}
-
-.ti-bg img {
-  width: 100%;
-  height: 100%;
-  border-radius: 5px;
-}
-
-.ti-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 80px;
-  height: 80px;
-  border-radius: 5px;
-}
-
-.ti-content img {
-  width: 100%;
-  height: 100%;
-  border-radius: 5px;
-}
-
-.ti-level {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 5px;
-  width: 20px;
-  height: 20px;
-  background: rgb(0 0 0 / 50%);
-  color: #faf7e8;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-  font-family: Genshin,sans-serif;
-}
-
-.top-text {
-  width: 80px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #faf7e8;
-  font-family: Genshin-Light,sans-serif;
-}
-
-.top-love img {
-  width: 100%;
-  height: 100%;
-}
-
-.tua-bottom {
-  width: 100%;
-  height: 40%;
-  padding: 5px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.bottom-item {
-  width: 32%;
-  height: 100%;
-  background: rgb(0 0 0 / 20%);
-  border-radius: 5px;
-}
-</style>

src/components/overlay/to-calendar.vue

@@ -4,8 +4,8 @@
       <div class="box-div">
         <div class="toc-top">
           <div class="toc-icon">
-            <TMiniAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" />
-            <TMiniWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" />
+            <TibCalendarAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" style="cursor: default" />
+            <TibCalendarWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" style="cursor: default" />
           </div>
           <div class="toc-material-grid">
             <TCalendarMaterial v-for="item in itemVal.materials" :item="item" />
@@ -46,8 +46,8 @@
 import { computed, ref } from "vue";
 import TOverlay from "../main/t-overlay.vue";
 import TCalendarMaterial from "../mini/t-calendar-material.vue";
-import TMiniAvatar from "../mini/t-mini-avatar.vue";
-import TMiniWeapon from "../mini/t-mini-weapon.vue";
+import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
+import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
 // utils
 import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
 import { createTGWindow } from "../../utils/TGWindow";

src/components/userAbyss/tua-detail-battle.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="tud-db-time">
+    {{ props.modelValue.time }}
+  </div>
+  <div class="tud-db-icons-grid">
+    <TibAbyssDetail
+      v-for="avatar in props.modelValue.characters"
+      :key="avatar.id" :model-value="avatar"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import TibAbyssDetail from "../itembox/tib-abyss-detail.vue";
+
+interface TuaDetailBattleProps {
+  modelValue: TGApp.Sqlite.Abyss.Battle;
+}
+
+const props = defineProps<TuaDetailBattleProps>();
+</script>
+<style lang="css" scoped>
+.tud-db-icons-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  margin-bottom: 10px;
+}
+
+.tud-db-time {
+  width: 100%;
+  text-align: left;
+  font-size: 12px;
+  color: var(--common-text-3);
+}
+</style>

src/components/userAbyss/tua-detail-level.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="tud-dl-divider" />
+  <TuaDetailTitle :val="props.modelValue.winStar" :name="`第${props.modelValue.id}间`" />
+  <TuaDetailBattle :model-value="props.modelValue.upBattle" />
+  <TuaDetailBattle :model-value="props.modelValue.downBattle" />
+</template>
+<script lang="ts" setup>
+// vue
+import TuaDetailTitle from "./tua-detail-title.vue";
+import TuaDetailBattle from "./tua-detail-battle.vue";
+
+interface TuaDetailLevelProps {
+  modelValue: TGApp.Sqlite.Abyss.Level;
+}
+
+const props = defineProps<TuaDetailLevelProps>();
+</script>
+<style lang="css" scoped>
+.tud-dl-divider {
+  border-radius: 5px;
+  width: 100%;
+  height: 1px;
+  background: var(--common-text-2);
+}
+</style>

src/components/userAbyss/tua-detail-title.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="tud-t-box">
+    <div class="tud-t-title">
+      <slot name="title">
+        <span>{{ props.name }}</span>
+      </slot>
+    </div>
+    <div class="tud-t-val">
+      <img src="/icon/star/Abyss.webp" alt="Abyss">
+      <slot name="val">
+        <span>{{ props.val }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed, ComputedRef } from "vue";
+
+interface TuaDetailTitleProps {
+  name: string;
+  val: number;
+  mode: "floor" | "level";
+}
+
+const props = withDefaults(defineProps<TuaDetailTitleProps>(), {
+  mode: "level",
+});
+
+const getFont: ComputedRef<string> = computed(() => {
+  return props.mode === "level" ? "var(--font-text)" : "var(--font-title)";
+});
+const getFontSize: ComputedRef<string> = computed(() => {
+  return props.mode === "level" ? "18px" : "20px";
+});
+</script>
+<style lang="css" scoped>
+.tud-t-box {
+  height: 30px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: v-bind(getFont);
+}
+
+.tud-t-title {
+  font-size: v-bind(getFontSize);
+  color: var(--common-text-2);
+}
+
+.tud-t-val {
+  display: flex;
+  align-items: center;
+  font-family: var(--font-text);
+  font-size:  v-bind(getFontSize);
+  color: var(--common-color-white);
+  text-shadow: 0 0 10px var(--common-color-yellow);
+}
+
+.dark .tud-t-val {
+  color: var(--common-color-yellow);
+  text-shadow: none;
+}
+
+.tud-t-val img {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  margin-right: 5px;
+}
+</style>

src/components/userAbyss/tua-detail.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="tuad-box">
+    <TuaDetailTitle :val="props.modelValue.winStar" :name="`第${props.modelValue.id}层`" mode="floor" />
+    <div class="tuad-index-box">
+      <TuaDetailLevel v-for="level in props.modelValue.levels" :key="level.id" :model-value="level" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+
+import TuaDetailTitle from "./tua-detail-title.vue";
+import TuaDetailLevel from "./tua-detail-level.vue";
+
+interface TuaDetailProps {
+  modelValue: TGApp.Sqlite.Abyss.Floor
+}
+
+const props = defineProps<TuaDetailProps>();
+</script>
+<style lang="css" scoped>
+.tuad-box {
+  width: 100%;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  background: var(--common-bg);
+  padding: 10px;
+}
+
+.tuad-index-box {
+  width: 100%;
+}
+</style>

src/components/userAbyss/tua-overview.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="tuao-box">
+    <div class="tuao-title">
+      <slot name="title">
+        {{ props.title }}
+      </slot>
+    </div>
+    <div v-if="props.valText" class="tuao-val-text">
+      <slot name="val-text">
+        {{ props.valText }}
+      </slot>
+    </div>
+    <div v-if="props.valIcons" class="tuao-val-icons">
+      <slot name="val-icons">
+        <TibAbyssOverview
+          v-for="avatar in JSON.parse(props.valIcons) as TGApp.Sqlite.Abyss.Character[]"
+          :key="avatar.id" :model-value="avatar"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import TibAbyssOverview from "../itembox/tib-abyss-overview.vue";
+
+interface TAOProps {
+  title: string,
+  valText?: string | number,
+  valIcons?: string,
+  iconNum: number,
+}
+
+const props = withDefaults(defineProps<TAOProps>(), {
+  iconNum: 1,
+});
+</script>
+<style lang="css" scoped>
+.tuao-box {
+  width: 100%;
+  height: auto;
+  padding: 10px;
+  border-radius: 5px;
+  background: var(--common-bg);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tuao-title {
+  font-family: var(--font-title);
+  font-size: 20px;
+  color: var(--common-text-2);
+}
+
+.tuao-val-text {
+  font-family: var(--font-text);
+  font-size: 20px;
+  color: var(--common-color-white);
+  text-shadow: 0 0 10px var(--common-color-yellow);
+}
+
+.dark .tuao-val-text {
+  color: var(--common-color-yellow);
+  text-shadow: none;
+}
+
+.tuao-val-icons {
+  display: grid;
+  grid-template-columns: repeat(v-bind(iconNum), 1fr);
+  column-gap: 10px;
+}
+</style>

src/components/userCharacter/tuc-detail-constellation.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="tuc-dc-box">
+    <div v-if="!modelValue.active" class="tuc-dc-lock">
+      <v-icon color="white">
+        mdi-lock
+      </v-icon>
+    </div>
+    <div class="tuc-dc-icon">
+      <img :src="modelValue.icon" alt="constellation">
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TucDetailConstellationProps {
+  modelValue: TGApp.Sqlite.Character.RoleConstellation
+}
+
+defineProps<TucDetailConstellationProps>();
+</script>
+<style lang="css" scoped>
+.tuc-dc-box {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.tuc-dc-lock {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: rgb(0 0 0 / 50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tuc-dc-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  padding: 5px;
+  background: rgb(0 0 0/ 20%);
+}
+
+.tuc-dc-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+</style>

src/components/userCharacter/tuc-detail-desc-constellation.vue

@@ -0,0 +1,76 @@
+<template>
+  <TucDetailDesc>
+    <template #title>
+      <span>命之座</span>
+    </template>
+    <template #content>
+      <TucDetailConstellation v-model="props.modelValue" />
+      <div class="tuc-ddc-content">
+        <div class="tuc-ddc-top">
+          {{ props.modelValue.name }}
+        </div>
+        <div class="tuc-ddc-bottom">
+          <span>命之座</span>
+          <span>第</span>
+          <span>{{ props.modelValue.pos }}</span>
+          <span>层</span>
+        </div>
+      </div>
+    </template>
+    <template #desc>
+      <span v-html="parseDesc(props.modelValue.description)" />
+    </template>
+  </TucDetailDesc>
+</template>
+<script lang="ts" setup>
+// vue
+import TucDetailDesc from "./tuc-detail-desc.vue";
+import TucDetailConstellation from "./tuc-detail-constellation.vue";
+
+interface TucDetailDescConstellationProps {
+  modelValue: TGApp.Sqlite.Character.RoleConstellation;
+}
+
+const props = defineProps<TucDetailDescConstellationProps>();
+
+// 解析描述
+function parseDesc (desc: string): string {
+  const reg = /<color=(.*?)>(.*?)<\/color>/g;
+  let match = reg.exec(desc);
+  while (match) {
+    const color = match[1];
+    const text = match[2];
+    desc = desc.replace(match[0], `<span style="color: ${color}">${text}</span>`);
+    match = reg.exec(desc);
+  }
+  desc = desc.replace(/\\n/g, "<br />");
+  return desc;
+}
+</script>
+<style lang="css" scoped>
+.tuc-ddc-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-around;
+  height: 100%;
+  margin-left: 5px;
+}
+
+.tuc-ddc-top {
+  color: var(--common-color-blue-2);
+  height: 20px;
+}
+
+.tuc-ddc-bottom {
+  height: 20px;
+}
+
+.tuc-ddc-bottom :nth-child(1) {
+  margin-right: 5px;
+}
+
+.tuc-ddc-bottom :nth-child(3) {
+  color: var(--common-color-yellow);
+}
+</style>

src/components/userCharacter/tuc-detail-desc-relic.vue

@@ -0,0 +1,77 @@
+<template>
+  <TucDetailDesc>
+    <template #title>
+      <span>圣遗物</span>
+    </template>
+    <template #content>
+      <TucDetailRelic v-model="props.modelValue" pos="props.modelValue.pos" />
+      <div class="tuc-ddr-content">
+        <div class="tuc-ddrc-top">
+          <span>{{ props.modelValue.name }}</span>
+          <span>+</span>
+          <span>{{ props.modelValue.level }}</span>
+        </div>
+        <div class="tuc-ddrc-bottom">
+          <img :src="`/icon/star/${props.modelValue.star}.webp`" alt="star">
+        </div>
+      </div>
+    </template>
+    <template #desc>
+      <div class="tuc-ddrd-title">
+        {{ props.modelValue.set.name }}：
+      </div>
+      <div v-for="desc in props.modelValue.set.effect" class="tuc-ddrc-desc">
+        <span>{{ desc.active }}件套：</span>
+        <span>{{ desc.description }}</span>
+      </div>
+    </template>
+  </TucDetailDesc>
+</template>
+<script lang="ts" setup>
+// vue
+import TucDetailDesc from "./tuc-detail-desc.vue";
+import TucDetailRelic from "./tuc-detail-relic.vue";
+
+interface TucDetailDescRelicProps {
+  modelValue: TGApp.Sqlite.Character.RoleReliquary;
+}
+
+const props = defineProps<TucDetailDescRelicProps>();
+</script>
+<style lang="css" scoped>
+.tuc-ddr-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-around;
+  height: 100%;
+  margin-left: 5px;
+}
+
+.tuc-ddrc-top {
+  height: 20px;
+}
+
+.tuc-ddrc-top :nth-child(1) {
+  margin-right: 10px;
+}
+
+.tuc-ddrc-top :nth-child(3) {
+  color: var(--common-color-yellow);
+}
+
+.tuc-ddrc-bottom {
+  height: 20px;
+}
+
+.tuc-ddrc-bottom img {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+
+.tuc-ddrd-title {
+  font-family: var(--font-title);
+  font-size: 16px;
+}
+</style>

src/components/userCharacter/tuc-detail-desc-weapon.vue

@@ -0,0 +1,75 @@
+<template>
+  <TucDetailDesc>
+    <template #title>
+      <span>武器</span>
+    </template>
+    <template #content>
+      <TucDetailItemBox v-model="box" />
+      <div class="tuc-ddw-content">
+        <div class="tuc-ddwc-top">
+          <span>{{ props.modelValue.name }}</span>
+          <span>Lv.{{ props.modelValue.level }}</span>
+          <span>精炼</span>
+          <span>{{ props.modelValue.affix }}</span>
+          <span>阶</span>
+        </div>
+        <div class="tuc-ddwc-bottom">
+          <img :src="`/icon/star/${props.modelValue.star}.webp`" alt="star">
+        </div>
+      </div>
+    </template>
+    <template #desc>
+      <span>{{ props.modelValue.description }}</span>
+    </template>
+  </TucDetailDesc>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TucDetailDesc from "./tuc-detail-desc.vue";
+import TucDetailItemBox from "./tuc-detail-itembox.vue";
+
+interface TucDetailDescWeaponProps {
+  modelValue: TGApp.Sqlite.Character.RoleWeapon;
+}
+
+const props = defineProps<TucDetailDescWeaponProps>();
+const box = computed(() => {
+  return {
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/weapon/icon/${props.modelValue.id}.webp`,
+  };
+});
+</script>
+<style lang="css" scoped>
+.tuc-ddw-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-around;
+  height: 100%;
+  margin-left: 5px;
+}
+
+.tuc-ddwc-top {
+  height: 20px;
+}
+
+.tuc-ddwc-top span {
+  margin: 0 5px;
+}
+
+.tuc-ddwc-top :nth-child(2),
+.tuc-ddwc-top :nth-child(4) {
+  color: var(--common-color-yellow);
+}
+
+.tuc-ddwc-bottom {
+  height: 20px;
+}
+
+.tuc-ddwc-bottom img {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/userCharacter/tuc-detail-desc.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="tuc-dd-box">
+    <div class="tuc-dd-title">
+      <slot name="title" />
+    </div>
+    <div class="tuc-dd-divider" />
+    <div class="tuc-dd-content">
+      <slot name="content" />
+    </div>
+    <div class="tuc-dd-desc">
+      <slot name="desc" />
+    </div>
+  </div>
+</template>
+<style lang="css" scoped>
+.tuc-dd-box {
+  padding: 10px;
+  border-radius: 5px;
+  border: 2px solid var(--common-color-grey-2);
+  background: rgb(255 255 255 / 20%);
+  backdrop-filter: blur(20px);
+}
+
+.tuc-dd-title {
+  font-family: var(--font-title);
+  font-size: 20px;
+  color: var(--common-color-blue);
+  width: 100%;
+  text-align: left;
+}
+
+.tuc-dd-divider {
+  width: 100%;
+  height: 2px;
+  background: var(--common-color-grey-2);
+  margin: 5px 0;
+}
+
+.tuc-dd-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: center;
+  height: 60px;
+}
+
+.tuc-dd-desc {
+  font-family: var(--font-text);
+  font-size: 14px;
+  margin-top: 5px;
+  color: var(--common-color-black);
+  width: 100%;
+  text-align: left;
+  word-break: break-all;
+  max-height: 50px;
+  overflow: hidden;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

src/components/userCharacter/tuc-detail-itembox.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="tuc-dib-box">
+    <div v-if="modelValue.bg" class="tuc-dib-bg">
+      <img :src="modelValue.bg" alt="bg">
+    </div>
+    <div v-if="modelValue.icon" class="tuc-dib-icon">
+      <img :src="modelValue.icon" alt="icon">
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+
+interface TucDetailItemBoxProps {
+  modelValue: {
+    icon?: string,
+    bg?: string,
+  };
+}
+
+defineProps<TucDetailItemBoxProps>();
+</script>
+<style lang="css" scoped>
+.tuc-dib-box {
+  width: 60px;
+  height: 60px;
+  border-radius: 5px;
+  position: relative;
+}
+
+.tuc-dib-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.tuc-dib-bg img {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+}
+
+.tuc-dib-icon {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.tuc-dib-icon img {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+}
+</style>