Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-15 03:53:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 调整Hyperlink处理

Browse Source
This commit is contained in:
BTMuli
2026-01-17 12:29:09 +08:00
parent 4d9b456b9d
commit 4302c179d5
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/func/hyperlink.vue
View File

@@ -3,8 +3,8 @@
<transition name="func-hyperlink">
<div v-show="show || showOuter" class="hyperlink-overlay" @click.self.prevent="handleOuter">
<transition name="func-hyperlink-inner">
<div v-show="showInner" class="hyperlink-box">
<div class="hyperlink-title">{{ data.name }}</div>
<div v-show="showInner" ref="hyperlinkRef" class="hyperlink-box">
<div class="hyperlink-title" @click="shareHyperLink()">{{ data.name }}</div>
<div class="hyperlink-desc">
<span v-html="parseHtmlText(data.desc)" />
</div>
@@ -15,8 +15,10 @@
</transition>
</template>
<script lang="ts" setup>
import showSnackbar from "@comp/func/snackbar.js";
import { generateShareImg } from "@utils/TGShare.js";
import { parseHtmlText } from "@utils/toolFunc.js";
import { onMounted, ref, shallowRef, watch } from "vue";
import { onMounted, ref, shallowRef, useTemplateRef, watch } from "vue";
import type { HyperLinkParams } from "./hyperlink.js";
@@ -26,6 +28,7 @@ const showInner = ref<boolean>(false);
const props = defineProps<HyperLinkParams>();
const data = shallowRef<HyperLinkParams>(props);
const hyperLinkEl = useTemplateRef<HTMLDivElement>("hyperlinkRef");
watch(
() => show.value,
@@ -54,6 +57,15 @@ async function displayBox(params: HyperLinkParams): Promise<void> {
show.value = true;
}
async function shareHyperLink(): Promise<void> {
if (!hyperLinkEl.value) {
showSnackbar.warn("未捕获到 HyperLinkBox");
return;
}
const fileName = `Hyperlink_${props.id}_${props.name}`;
await generateShareImg(fileName, hyperLinkEl.value);
}
defineExpose({ displayBox });
</script>
<style lang="scss" scoped>
@@ -111,21 +123,23 @@ defineExpose({ displayBox });
position: relative;
display: flex;
width: 520px;
height: 240px;
max-height: 800px;
flex-direction: column;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
padding: 10px 10px 16px;
border: 1px solid var(--common-shadow-1);
border-radius: 8px;
background: var(--app-page-bg);
box-shadow: 0 0 10px var(--common-shadow-t-1);
color: var(--app-page-content);
row-gap: 8px;
}
.hyperlink-title {
position: relative;
color: var(--common-text-title);
cursor: pointer;
font-family: var(--font-title);
font-size: 20px;
}