aegon-dangerious 1.0.0

package/build-report/components/ReportChapterPreview.vue

@@ -0,0 +1,437 @@
+<template>
+  <div class="report-chapter-preview">
+    <main class="report-chapter-preview__main">
+      <div class="report-chapter-preview__inner">
+        <div class="report-chapter-preview__card">
+          <div class="report-chapter-preview__body doc-sample-root">
+            <div class="content-wrapper doc-sample-body">
+              <template v-for="(item, idx) in displaySequence" :key="idx">
+                <TypewriterText
+                  v-if="item.type === 'text' && idx < activeIndex"
+                  :text="item.content!"
+                  :custom-class="item.styleClass"
+                  :auto-start="idx === activeIndex - 1 && idx === lastStartedTextIndex"
+                  @completed="onTextCompleted"
+                />
+                <component
+                  v-else-if="item.type === 'component' && idx < activeIndex"
+                  :is="item.component"
+                  @ready="onComponentReady"
+                />
+              </template>
+            </div>
+            <span v-if="showGlobalCursor" class="typewriter-cursor typewriter-cursor--global">|</span>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  defineComponent,
+  h,
+  markRaw,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+  type Component,
+} from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    chapterTitle?: string
+    chapterIntro?: string
+  }>(),
+  {
+    chapterTitle: '',
+    chapterIntro: '',
+  },
+)
+
+const TH_GREEN_STYLE = {
+  backgroundColor: '#c6efce',
+  color: '#000000',
+}
+
+const TABLE_CELL_STYLE = {
+  border: '1px solid #000000',
+  padding: '4pt 6pt',
+  fontSize: '11pt',
+  color: '#000000',
+}
+
+const STYLE_TAG_MAP: Record<string, string> = {
+  'doc-h2': 'h2',
+  'doc-h3': 'h3',
+  'doc-p': 'p',
+}
+
+interface DisplayItem {
+  type: 'text' | 'component'
+  content?: string
+  styleClass?: string
+  component?: Component
+}
+
+const activeIndex = ref(0)
+const lastStartedTextIndex = ref(-1)
+
+const tableAttrs = () => ({
+  class: 'doc-table',
+  style: {
+    width: '100%',
+    borderCollapse: 'collapse' as const,
+    border: '1px solid #000000',
+  },
+  cellspacing: '0',
+  cellpadding: '0',
+  border: '1',
+})
+
+const thCell = (
+  text: string,
+  extra: { style?: Record<string, string>; [key: string]: unknown } = {},
+) => {
+  const { style: extraStyle, ...rest } = extra
+  return h(
+    'th',
+    {
+      style: { ...TABLE_CELL_STYLE, fontWeight: 'bold', ...extraStyle },
+      ...rest,
+    },
+    text,
+  )
+}
+
+const tdCell = (text: string, alignRight = false) =>
+  h(
+    'td',
+    {
+      style: {
+        ...TABLE_CELL_STYLE,
+        textAlign: alignRight ? 'right' : 'left',
+      },
+    },
+    text,
+  )
+
+const ReportChapterMockTable = markRaw(
+  defineComponent({
+    name: 'ReportChapterMockTable',
+    emits: ['ready'],
+    setup(_, { emit }) {
+      const rows = [
+        ['不良貸款率', '1.82%', '+0.12pct'],
+        ['撥備覆蓋率', '245.6%', '-3.2pct'],
+        ['關注類貸款占比', '3.45%', '+0.28pct'],
+        ['行業集中度（Top5）', '41.2%', '-1.5pct'],
+        ['逾期 90 天以上占比', '0.96%', '+0.05pct'],
+      ]
+      onMounted(() => emit('ready'))
+      return () =>
+        h('table', tableAttrs(), [
+          h('thead', {}, [
+            h('tr', { class: 'doc-table-head-green' }, [
+              thCell('風險指標', {
+                class: 'doc-th-green',
+                style: { ...TABLE_CELL_STYLE, fontWeight: 'bold', ...TH_GREEN_STYLE },
+              }),
+              thCell('本期值', {
+                class: 'doc-th-green',
+                style: { ...TABLE_CELL_STYLE, fontWeight: 'bold', textAlign: 'right', ...TH_GREEN_STYLE },
+              }),
+              thCell('同比變化', {
+                class: 'doc-th-green',
+                style: { ...TABLE_CELL_STYLE, fontWeight: 'bold', textAlign: 'right', ...TH_GREEN_STYLE },
+              }),
+            ]),
+          ]),
+          h(
+            'tbody',
+            {},
+            rows.map((row) =>
+              h('tr', {}, [
+                tdCell(row[0]!),
+                tdCell(row[1]!, true),
+                tdCell(row[2]!, true),
+              ]),
+            ),
+          ),
+        ])
+    },
+  }),
+)
+
+function buildDisplaySequence(title: string, intro: string): DisplayItem[] {
+  return [
+    { type: 'text', content: title || '章節內容', styleClass: 'doc-h2' },
+    {
+      type: 'text',
+      content:
+        intro ||
+        '本章節為演示 Mock 正文，展示打字機逐字輸出效果。接入生成服務後，內容將由模型根據 Prompt 與資訊源自動產出。',
+      styleClass: 'doc-p',
+    },
+    { type: 'text', content: '核心監測指標', styleClass: 'doc-h3' },
+    {
+      type: 'text',
+      content: '下表列示本年度重點風險指標及同比變化情況，供本章風險研判參考：',
+      styleClass: 'doc-p',
+    },
+    { type: 'component', component: ReportChapterMockTable },
+  ]
+}
+
+const displaySequence = computed(() =>
+  buildDisplaySequence(props.chapterTitle, props.chapterIntro),
+)
+
+const showGlobalCursor = computed(() => {
+  if (activeIndex.value >= displaySequence.value.length) return false
+  const pending = displaySequence.value[activeIndex.value]
+  return pending?.type !== 'text'
+})
+
+const TypewriterText = defineComponent({
+  name: 'TypewriterText',
+  props: {
+    text: { type: String, required: true },
+    autoStart: { type: Boolean, default: false },
+    customClass: { type: String, default: '' },
+  },
+  emits: ['completed'],
+  setup(textProps, { emit }) {
+    const displayed = ref('')
+    const isTyping = ref(false)
+    let timer: number | null = null
+
+    const classList = () =>
+      textProps.customClass
+        .split(/\s+/)
+        .filter(Boolean)
+        .concat('typewriter-paragraph')
+
+    const resolveTag = () => {
+      const primary = textProps.customClass.split(/\s+/).find((c) => STYLE_TAG_MAP[c])
+      return primary ? (STYLE_TAG_MAP[primary] ?? 'p') : 'p'
+    }
+
+    const startTyping = () => {
+      if (timer) return
+      displayed.value = ''
+      isTyping.value = true
+      let i = 0
+      timer = window.setInterval(() => {
+        if (i < textProps.text.length) {
+          displayed.value += textProps.text[i]
+          i++
+        } else {
+          if (timer) clearInterval(timer)
+          timer = null
+          isTyping.value = false
+          emit('completed')
+        }
+      }, 15)
+    }
+
+    watch(
+      () => textProps.autoStart,
+      (val) => {
+        if (val) startTyping()
+      },
+      { immediate: true },
+    )
+
+    return () => {
+      const tag = resolveTag()
+      return h(tag as keyof HTMLElementTagNameMap, { class: classList() }, [
+        displayed.value,
+        isTyping.value ? h('span', { class: 'typewriter-cursor' }, '|') : null,
+      ])
+    }
+  },
+})
+
+function nextItem() {
+  if (activeIndex.value < displaySequence.value.length) {
+    activeIndex.value++
+    const newItem = displaySequence.value[activeIndex.value - 1]
+    if (!newItem) return
+    if (newItem.type === 'text') {
+      lastStartedTextIndex.value = activeIndex.value - 1
+    }
+  }
+}
+
+function onTextCompleted() {
+  nextItem()
+}
+
+function onComponentReady() {
+  nextItem()
+}
+
+function startSequence() {
+  if (displaySequence.value.length === 0) return
+  activeIndex.value = 1
+  const firstItem = displaySequence.value[0]
+  if (firstItem?.type === 'text') lastStartedTextIndex.value = 0
+}
+
+function restartDemo() {
+  activeIndex.value = 0
+  lastStartedTextIndex.value = -1
+  void nextTick(() => startSequence())
+}
+
+watch(
+  () => [props.chapterTitle, props.chapterIntro] as const,
+  () => restartDemo(),
+  { immediate: true },
+)
+
+defineExpose({ restartDemo })
+</script>
+
+<style scoped>
+.report-chapter-preview {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.report-chapter-preview__main {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.report-chapter-preview__inner {
+  width: 100%;
+  max-width: none;
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.report-chapter-preview__card {
+  width: 100%;
+  flex: 1;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+}
+
+.report-chapter-preview__body {
+  flex: 1;
+  width: 100%;
+  min-height: 100%;
+  padding: 0;
+  box-sizing: border-box;
+  background: #fff;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.doc-sample-root,
+.doc-sample-body {
+  font-family: Calibri, 'Segoe UI', Arial, Helvetica, sans-serif;
+  font-size: 11pt;
+  color: #000000;
+  line-height: 1.15;
+  text-align: left;
+}
+
+.doc-h2 {
+  font-size: 14pt;
+  font-weight: bold;
+  color: #000000;
+  margin: 12pt 0 6pt;
+  padding: 0;
+  border: none;
+}
+
+.doc-h3 {
+  font-size: 12pt;
+  font-weight: bold;
+  color: #000000;
+  margin: 10pt 0 4pt;
+}
+
+.doc-p {
+  font-size: 11pt;
+  line-height: 1.15;
+  color: #000000;
+  margin: 0 0 10pt;
+  text-align: left;
+}
+
+:deep(.doc-table) {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  margin: 6pt 0 12pt;
+  font-size: 11pt;
+  color: #000000;
+  border: 1px solid #000000;
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+
+:deep(.doc-table th),
+:deep(.doc-table td) {
+  border: 1px solid #000000 !important;
+  padding: 4pt 6pt;
+  vertical-align: top;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+}
+
+:deep(.doc-th-green),
+:deep(th.doc-th-green) {
+  background-color: #c6efce !important;
+  color: #000000 !important;
+}
+
+.typewriter-paragraph {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.typewriter-cursor {
+  display: inline-block;
+  color: inherit;
+  font-weight: normal;
+  margin-left: 1px;
+  animation: typewriter-blink 1s step-end infinite;
+}
+
+.typewriter-cursor--global {
+  font-size: 11pt;
+  color: #000000;
+  margin-top: 4pt;
+}
+
+@keyframes typewriter-blink {
+  50% {
+    opacity: 0;
+  }
+}
+</style>