Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

⚡️ 优化 share 样式

Browse Source
This commit is contained in:
BTMuli
2023-11-17 22:26:29 +08:00
parent c018638e4a
commit b60718aa62
4 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/home/t-calendar.vue
View File

@@ -41,7 +41,7 @@
:label="switchType === 'avatar' ? '角色' : '武器'" :label="switchType === 'avatar' ? '角色' : '武器'"
@change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'" @change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"
/> />
<v-btn class="calendar-title-btn" @click="share"> <v-btn class="calendar-title-btn" @click="share" data-html2canvas-ignore>
<template #prepend> <template #prepend>
<v-icon>mdi-share-variant</v-icon> <v-icon>mdi-share-variant</v-icon>
</template> </template>

3
src/pages/User/Characters.vue
View File

@@ -8,7 +8,7 @@
</span> </span>
<span v-else> 暂无数据 </span> <span v-else> 暂无数据 </span>
</div> </div>
<div class="uc-top-btns"> <div class="uc-top-btns" data-html2canvas-ignore>
<v-btn class="uc-top-btn" @click="refreshRoles()"> <v-btn class="uc-top-btn" @click="refreshRoles()">
<template #prepend> <template #prepend>
<v-icon>mdi-refresh</v-icon> <v-icon>mdi-refresh</v-icon>
@@ -182,7 +182,6 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole): void {
<style lang="css" scoped> <style lang="css" scoped>
.uc-box { .uc-box {
display: flex; display: flex;
width: 100%;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
border: 1px solid var(--common-shadow-2); border: 1px solid var(--common-shadow-2);

3
src/pages/User/Record.vue
View File

@@ -6,7 +6,7 @@
<span v-if="!isEmpty">{{ getTitle() }} 更新于 {{ recordData.updated }}</span> <span v-if="!isEmpty">{{ getTitle() }} 更新于 {{ recordData.updated }}</span>
<span v-else>原神战绩【暂无数据】</span> <span v-else>原神战绩【暂无数据】</span>
</div> </div>
<div class="ur-top-btns"> <div class="ur-top-btns" data-html2canvas-ignore>
<v-btn class="ur-top-btn" @click="refresh()"> <v-btn class="ur-top-btn" @click="refresh()">
<template #prepend> <template #prepend>
<v-icon>mdi-refresh</v-icon> <v-icon>mdi-refresh</v-icon>
@@ -118,7 +118,6 @@ async function shareRecord(): Promise<void> {
<style lang="css" scoped> <style lang="css" scoped>
.ur-box { .ur-box {
display: flex; display: flex;
width: 100%;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;

10
src/utils/TGShare.ts
View File

@@ -79,18 +79,16 @@ function getShareImgBgColor(): string {
* @param {string} fileName - 文件名 * @param {string} fileName - 文件名
* @param {HTMLElement} element - 元素 * @param {HTMLElement} element - 元素
* @param {number} scale - 缩放比例 * @param {number} scale - 缩放比例
* @param {number} offset - 偏移量
* @returns {Promise<void>} 无返回值 * @returns {Promise<void>} 无返回值
*/ */
export async function generateShareImg( export async function generateShareImg(
fileName: string, fileName: string,
element: HTMLElement, element: HTMLElement,
scale: number = 1.2, scale: number = 1.2,
offset: number = 30,
): Promise<void> { ): Promise<void> {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const width = element.clientWidth + offset; const width = element.clientWidth + 30;
const height = element.clientHeight + offset; const height = element.clientHeight + 30;
canvas.width = width * scale; canvas.width = width * scale;
canvas.height = height * scale; canvas.height = height * scale;
const opts = { const opts = {
@@ -101,8 +99,8 @@ export async function generateShareImg(
height, height,
useCORS: true, useCORS: true,
canvas, canvas,
x: (-offset / 2) * scale, x: -10,
y: (-offset / 2) * scale, y: -15,
dpi: 350, dpi: 350,
}; };
const canvasData = await html2canvas(element, opts); const canvasData = await html2canvas(element, opts);