Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-05-22 05:35:48 +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"> <transition name="func-hyperlink">
<div v-show="show || showOuter" class="hyperlink-overlay" @click.self.prevent="handleOuter"> <div v-show="show || showOuter" class="hyperlink-overlay" @click.self.prevent="handleOuter">
<transition name="func-hyperlink-inner"> <transition name="func-hyperlink-inner">
<div v-show="showInner" class="hyperlink-box"> <div v-show="showInner" ref="hyperlinkRef" class="hyperlink-box">
<div class="hyperlink-title">{{ data.name }}</div> <div class="hyperlink-title" @click="shareHyperLink()">{{ data.name }}</div>
<div class="hyperlink-desc"> <div class="hyperlink-desc">
<span v-html="parseHtmlText(data.desc)" /> <span v-html="parseHtmlText(data.desc)" />
</div> </div>
@@ -15,8 +15,10 @@
</transition> </transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import showSnackbar from "@comp/func/snackbar.js";
import { generateShareImg } from "@utils/TGShare.js";
import { parseHtmlText } from "@utils/toolFunc.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"; import type { HyperLinkParams } from "./hyperlink.js";
@@ -26,6 +28,7 @@ const showInner = ref<boolean>(false);
const props = defineProps<HyperLinkParams>(); const props = defineProps<HyperLinkParams>();
const data = shallowRef<HyperLinkParams>(props); const data = shallowRef<HyperLinkParams>(props);
const hyperLinkEl = useTemplateRef<HTMLDivElement>("hyperlinkRef");
watch( watch(
() => show.value, () => show.value,
@@ -54,6 +57,15 @@ async function displayBox(params: HyperLinkParams): Promise<void> {
show.value = true; 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 }); defineExpose({ displayBox });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -111,21 +123,23 @@ defineExpose({ displayBox });
position: relative; position: relative;
display: flex; display: flex;
width: 520px; width: 520px;
height: 240px; max-height: 800px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
padding: 10px 10px 16px; padding: 10px 10px 16px;
border: 1px solid var(--common-shadow-1); border: 1px solid var(--common-shadow-1);
border-radius: 8px; border-radius: 8px;
background: var(--app-page-bg); background: var(--app-page-bg);
box-shadow: 0 0 10px var(--common-shadow-t-1); box-shadow: 0 0 10px var(--common-shadow-t-1);
color: var(--app-page-content); color: var(--app-page-content);
row-gap: 8px;
} }
.hyperlink-title { .hyperlink-title {
position: relative; position: relative;
color: var(--common-text-title); color: var(--common-text-title);
cursor: pointer;
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
} }