75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script setup lang="ts">
|
||
import { useMyFlowchartStore } from "shared/store/myFlowchart"
|
||
import { useMermaid } from "shared/composables/useMermaid"
|
||
|
||
/**
|
||
* 学生自己画到 A/S 的那张流程图。题面里是缩略的一小块（compact），点「放大看」弹出整张。
|
||
* 原来是左栏单独一个「我的流程图」页签，评到 A/S 时还会把学生强行切过去。
|
||
*
|
||
* 结果页签里翻历次评分时也用它摆「这一版的图」，那时由 code 传进来，不读 store。
|
||
*/
|
||
const props = defineProps<{ compact?: boolean; code?: string }>()
|
||
|
||
const store = useMyFlowchartStore()
|
||
const { renderError, renderFlowchart } = useMermaid()
|
||
const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
|
||
|
||
watch(
|
||
() => props.code ?? store.mermaidCode,
|
||
async (code) => {
|
||
if (!code) return
|
||
await nextTick()
|
||
await renderFlowchart(mermaidContainer.value, code)
|
||
},
|
||
{ immediate: true },
|
||
)
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<n-alert v-if="renderError" type="error" title="流程图渲染失败" size="small">
|
||
{{ renderError }}
|
||
</n-alert>
|
||
<div
|
||
v-show="!renderError"
|
||
ref="mermaidContainer"
|
||
class="flowchart-container"
|
||
:class="{ compact: props.compact }"
|
||
></div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.flowchart-container {
|
||
width: 100%;
|
||
min-height: 500px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
:deep(.flowchart-container > svg) {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.flowchart-container.compact {
|
||
min-height: 0;
|
||
height: 260px;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/*
|
||
* 缩略图按高度缩：流程图一般是竖长的，按宽度铺满的话只看得见开头两个框。
|
||
* 原来 150px 高，整张图放进去框里的字只剩三四像素，加到 260。
|
||
* 要 !important：pele 在 <svg> 上写了内联的 max-width: 100%; height: auto，不压住的话图按原尺寸
|
||
* （比大小那张 581px 高）塞进缩略图的框里，只露出中间一截
|
||
*/
|
||
:deep(.flowchart-container.compact > svg) {
|
||
width: auto !important;
|
||
max-width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
</style>
|