|
|
@@ -70,7 +70,7 @@
|
|
|
</svg>
|
|
|
</div>
|
|
|
</Popover>
|
|
|
- <!-- 工具iframe字号缩放:比例1~24,每±1对应字号±1px,初始16px -->
|
|
|
+ <!-- 工具iframe字号缩放:初始100%,每±1对应±20% -->
|
|
|
<div class="handler-item font-scale-ctrl" v-if="hasInteractiveTool">
|
|
|
<span class="scale-btn" :class="{ disable: fontScale <= MIN_FONT_SCALE }" @click="changeFontScale(-1)">
|
|
|
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
|
@@ -78,7 +78,8 @@
|
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
|
</svg>
|
|
|
</span>
|
|
|
- <span class="scale-value">{{ fontScale }}</span>
|
|
|
+ <span class="scale-label">{{ lang.ssFontScale }}</span>
|
|
|
+ <span class="scale-value">{{ fontScalePercent }}%</span>
|
|
|
<span class="scale-btn" :class="{ disable: fontScale >= MAX_FONT_SCALE }" @click="changeFontScale(1)">
|
|
|
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
|
stroke-linecap="round">
|
|
|
@@ -152,7 +153,7 @@
|
|
|
<span>{{ lang.ssShape }}</span>
|
|
|
</div>
|
|
|
</Popover>
|
|
|
- <RichTextBase v-if="handleElement?.type == 'text'"/>
|
|
|
+ <RichTextBase v-if="handleElement?.type == 'text' || handleElement?.type == 'shape'"/>
|
|
|
<div style="display: flex; align-items: center;" v-if="handleElement?.type == 'shape'">
|
|
|
<Select
|
|
|
style="flex: 1;"
|
|
|
@@ -358,21 +359,28 @@ const hasInteractiveTool = computed(() => {
|
|
|
return elements.some((el: any) => el.type === 'frame' && toolTypeArray.value.includes(el.toolType))
|
|
|
})
|
|
|
|
|
|
-// 工具iframe字号缩放:比例最小1最大24,每±1对应字号±1px,初始16px
|
|
|
-const MIN_FONT_SCALE = 1
|
|
|
-const MAX_FONT_SCALE = 24
|
|
|
+// 工具iframe字号缩放:初始100%,每±1对应±20%,sessionStorage 同会话内保持,重新进入课程清空
|
|
|
+const MIN_FONT_SCALE = -3 // 40%
|
|
|
+const MAX_FONT_SCALE = 5 // 200%
|
|
|
const BASE_FONT_SIZE = 16
|
|
|
-const fontScale = ref(1)
|
|
|
+const STORAGE_KEY = 'toolIframeFontScale'
|
|
|
+const fontScale = ref(parseInt(sessionStorage.getItem(STORAGE_KEY) || '0', 10))
|
|
|
+const fontScalePercent = computed(() => 100 + fontScale.value * 20)
|
|
|
|
|
|
const setToolIframeFontSize = () => {
|
|
|
try {
|
|
|
const iframe = document.getElementsByTagName('iframe')[0] as HTMLIFrameElement | undefined
|
|
|
const iframeDoc = iframe?.contentWindow?.document
|
|
|
if (iframeDoc?.documentElement) {
|
|
|
- iframeDoc.documentElement.style.fontSize = `${BASE_FONT_SIZE + fontScale.value - 1}px`
|
|
|
+ const fontSize = BASE_FONT_SIZE * (1 + fontScale.value * 0.2)
|
|
|
+ console.log(fontSize)
|
|
|
+
|
|
|
+ iframeDoc.documentElement.style.fontSize = `${fontSize}px`
|
|
|
}
|
|
|
}
|
|
|
catch (error) {
|
|
|
+ const fontSize = BASE_FONT_SIZE * (1 + fontScale.value * 0.2)
|
|
|
+ console.log(fontSize)
|
|
|
console.warn('设置iframe字号失败:', error)
|
|
|
}
|
|
|
}
|
|
|
@@ -381,12 +389,15 @@ const changeFontScale = (delta: number) => {
|
|
|
const next = fontScale.value + delta
|
|
|
if (next < MIN_FONT_SCALE || next > MAX_FONT_SCALE) return
|
|
|
fontScale.value = next
|
|
|
+ sessionStorage.setItem(STORAGE_KEY, String(next))
|
|
|
setToolIframeFontSize()
|
|
|
}
|
|
|
|
|
|
-// 切换页码时重置缩放比例回1
|
|
|
-watch(slideIndex, () => {
|
|
|
- fontScale.value = 1
|
|
|
+// iframe 加载后应用持久化的缩放比例
|
|
|
+watch(hasInteractiveTool, (val) => {
|
|
|
+ if (val) {
|
|
|
+ setTimeout(() => setToolIframeFontSize(), 500)
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const iframeLabel = computed(() => {
|
|
|
@@ -802,6 +813,11 @@ const updateGradientColors = (color: string) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .scale-label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #6b7280;
|
|
|
+ }
|
|
|
+
|
|
|
.scale-value {
|
|
|
min-width: 20px;
|
|
|
text-align: center;
|