aegon-dangerious 1.0.0

package/build-report/components/AiPromptGenerateDialog.vue

@@ -0,0 +1,349 @@
+<template>
+  <el-dialog v-model="visible" width="60%" append-to-body :show-close="false"
+    modal-class="report-workflow-dialog-overlay" class="report-workflow-dialog ai-prompt-generate-dialog"
+    header-class="ai-prompt-generate-dialog__header" @closed="handleClosed">
+    <template #header>
+      <span class="ai-prompt-generate-dialog__title">{{ dialogTitle }}</span>
+    </template>
+
+    <div v-if="mode === 'input'" class="ai-prompt-generate-dialog__form">
+      <label class="ai-prompt-generate-dialog__field ai-prompt-generate-dialog__field--row">
+        <span class="ai-prompt-generate-dialog__label">章節標題</span>
+        <div class="ai-prompt-generate-dialog__control">
+          <el-input v-model="form.title" :maxlength="CHAPTER_TITLE_MAX" show-word-limit
+            class="ai-prompt-generate-dialog__input" />
+        </div>
+      </label>
+
+      <label
+        class="ai-prompt-generate-dialog__field ai-prompt-generate-dialog__field--row ai-prompt-generate-dialog__field--textarea">
+        <span class="ai-prompt-generate-dialog__label">章節描述</span>
+        <div class="ai-prompt-generate-dialog__control">
+          <el-input v-model="form.description" type="textarea" :rows="4" :maxlength="CHAPTER_DESC_MAX" show-word-limit
+            resize="none" class="ai-prompt-generate-dialog__textarea" />
+        </div>
+      </label>
+    </div>
+
+    <div v-else class="ai-prompt-generate-dialog__preview">
+      <div class="ai-prompt-generate-dialog__preview-row">
+        <span class="ai-prompt-generate-dialog__label">章節標題</span>
+        <p class="ai-prompt-generate-dialog__preview-text">{{ form.title }}</p>
+      </div>
+
+      <div class="ai-prompt-generate-dialog__preview-row">
+        <span class="ai-prompt-generate-dialog__label">章節描述</span>
+        <p class="ai-prompt-generate-dialog__preview-text ai-prompt-generate-dialog__preview-text--multiline">
+          {{ form.description }}
+        </p>
+      </div>
+
+      <div class="ai-prompt-generate-dialog__divider" aria-hidden="true" />
+
+      <div class="ai-prompt-generate-dialog__preview-row ai-prompt-generate-dialog__preview-row--prompt">
+        <span class="ai-prompt-generate-dialog__label">生成的 prompt</span>
+        <p class="ai-prompt-generate-dialog__preview-text ai-prompt-generate-dialog__preview-text--multiline">
+          {{ generatedPrompt }}
+        </p>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="ai-prompt-generate-dialog__footer">
+        <button v-if="mode === 'input'" type="button"
+          class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline ai-prompt-generate-dialog__footer-btn"
+          @click="handleCancel">
+          取消
+        </button>
+        <button v-else type="button"
+          class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline ai-prompt-generate-dialog__footer-btn"
+          @click="handleBack">
+          退回
+        </button>
+
+        <button v-if="mode === 'input'" type="button"
+          class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary ai-prompt-generate-dialog__footer-btn"
+          @click="handleGenerate">
+          生成 Prompt
+        </button>
+        <button v-else type="button"
+          class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary ai-prompt-generate-dialog__footer-btn"
+          @click="handleConfirm">
+          確認
+        </button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ElDialog, ElInput, ElMessage } from 'element-plus'
+import { computed, reactive, ref, watch } from 'vue'
+
+const CHAPTER_TITLE_MAX = 100
+const CHAPTER_DESC_MAX = 1000
+
+const visible = defineModel<boolean>({ default: false })
+
+const props = withDefaults(
+  defineProps<{
+    initialTitle?: string
+    initialDescription?: string
+  }>(),
+  {
+    initialTitle: '',
+    initialDescription: '',
+  },
+)
+
+const emit = defineEmits<{
+  confirm: [prompt: string]
+}>()
+
+type DialogMode = 'input' | 'preview'
+
+const mode = ref<DialogMode>('input')
+const generatedPrompt = ref('')
+
+const form = reactive({
+  title: '',
+  description: '',
+})
+
+const dialogTitle = computed(() =>
+  mode.value === 'input' ? '智能化生成 Prompt' : '智能化生成 Prompt 預覽',
+)
+
+function resetForm() {
+  form.title = props.initialTitle.trim()
+  form.description = props.initialDescription.trim()
+  generatedPrompt.value = ''
+  mode.value = 'input'
+}
+
+watch(visible, (open) => {
+  if (open) resetForm()
+})
+
+watch(
+  () => [props.initialTitle, props.initialDescription] as const,
+  () => {
+    if (visible.value && mode.value === 'input') {
+      form.title = props.initialTitle.trim()
+      form.description = props.initialDescription.trim()
+    }
+  },
+)
+
+function buildMockPrompt() {
+  return [
+    `請根據章節「${form.title}」生成分析內容。`,
+    `章節描述：${form.description}`,
+    '生成的 prompt 內容：請結合資訊源，輸出結構化章節正文，語氣專業、條理清晰，並在必要時補充表格或要點列表。',
+  ].join('\n')
+}
+
+function handleGenerate() {
+  const title = form.title.trim()
+  const description = form.description.trim()
+
+  if (!title) {
+    ElMessage.warning('請輸入章節標題')
+    return
+  }
+  if (!description) {
+    ElMessage.warning('請輸入章節描述')
+    return
+  }
+
+  generatedPrompt.value = buildMockPrompt()
+  mode.value = 'preview'
+}
+
+function handleBack() {
+  mode.value = 'input'
+}
+
+function handleCancel() {
+  visible.value = false
+}
+
+function handleConfirm() {
+  emit('confirm', generatedPrompt.value)
+  visible.value = false
+}
+
+function handleClosed() {
+  resetForm()
+}
+</script>
+
+<style scoped>
+.ai-prompt-generate-dialog__form,
+.ai-prompt-generate-dialog__preview {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.ai-prompt-generate-dialog__field {
+  margin: 0;
+}
+
+.ai-prompt-generate-dialog__field--row {
+  display: grid;
+  grid-template-columns: 100px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.ai-prompt-generate-dialog__field--textarea {
+  align-items: start;
+}
+
+.ai-prompt-generate-dialog__label {
+  padding-top: 8px;
+  font-size: 14px;
+  color: #303133;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.ai-prompt-generate-dialog__control {
+  min-width: 0;
+}
+
+.ai-prompt-generate-dialog__preview-row {
+  display: grid;
+  grid-template-columns: 100px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.ai-prompt-generate-dialog__preview-row--prompt .ai-prompt-generate-dialog__label {
+  padding-top: 0;
+}
+
+.ai-prompt-generate-dialog__preview-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #303133;
+  word-break: break-word;
+}
+
+.ai-prompt-generate-dialog__preview-text--multiline {
+  white-space: pre-wrap;
+}
+
+.ai-prompt-generate-dialog__divider {
+  height: 0;
+  border-top: 1px dashed #dcdfe6;
+}
+
+.ai-prompt-generate-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.ai-prompt-generate-dialog__footer-btn {
+  min-width: 140px;
+}
+</style>
+
+<style>
+.ai-prompt-generate-dialog {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: 32px;
+  min-width: 120px;
+  padding: 0 14px;
+  border-radius: 4px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: 15px;
+  font-family: Arial, sans-serif;
+  font-weight: 400;
+  transition: all 0.2s ease;
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--primary {
+  border: 1px solid var(--report-accent);
+  background: var(--report-accent);
+  color: #fff;
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: #fff;
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--outline {
+  border: 1px solid var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--outline:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+</style>
+
+<style>
+.ai-prompt-generate-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.ai-prompt-generate-dialog .el-dialog__header,
+.ai-prompt-generate-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 14px 20px;
+  background: #4a5f7a;
+}
+
+.ai-prompt-generate-dialog__title,
+.ai-prompt-generate-dialog .el-dialog__title {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.ai-prompt-generate-dialog .el-dialog__body {
+  padding: 24px 20px;
+  background: #fff;
+}
+
+.ai-prompt-generate-dialog .el-dialog__footer {
+  padding: 12px 16px 16px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+}
+
+.ai-prompt-generate-dialog__input :deep(.el-input__wrapper),
+.ai-prompt-generate-dialog__textarea :deep(.el-textarea__inner) {
+  border-radius: 2px;
+}
+</style>
+
+<style src="../styles/report-workflow-dialog.css"></style>

package/build-report/components/CapsuleScrollbar.vue

@@ -0,0 +1,145 @@
+<template>
+  <div v-if="canScroll" :class="[rootClass, { [`${rootClass}--hidden`]: !shown }]" :style="rootStyle"
+    aria-hidden="true">
+    <div :class="thumbClass" :style="thumbStyle" @mousedown.stop="onThumbMouseDown" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRef, toValue, watch } from 'vue';
+import { useCapsuleScrollbar } from '../utils/scroll'
+
+const props = withDefaults(
+  defineProps<{
+    /** 滾動容器；模板傳 ref 時會自動解包為 HTMLElement */
+    scrollEl?: unknown
+    anchorEl?: unknown
+    active?: boolean
+    gutterPx?: number
+    thumbWidthPx?: number
+    minThumbPx?: number
+    visibleRatio?: number
+    alwaysVisible?: boolean
+    autoHideAfterMs?: number
+    rightOffsetPx?: number
+    classPrefix?: string
+  }>(),
+  {
+    scrollEl: undefined,
+    anchorEl: undefined,
+    active: false,
+    alwaysVisible: false,
+    autoHideAfterMs: 3000,
+    visibleRatio: 1,
+    rightOffsetPx: 1,
+  },
+)
+
+const scrollElRef = ref(null as HTMLElement | null)
+const anchorElRef = ref(null as HTMLElement | null)
+const activeRef = toRef(props, 'active')
+
+watch(
+  () => toValue(props.scrollEl),
+  (el) => {
+    scrollElRef.value = (el as HTMLElement | null) ?? null
+  },
+  { immediate: true },
+)
+
+watch(
+  () => toValue(props.anchorEl),
+  (el) => {
+    anchorElRef.value = (el as HTMLElement | null) ?? null
+  },
+  { immediate: true },
+)
+
+const {
+  canScroll,
+  shown,
+  rootStyle,
+  thumbStyle,
+  rootClass,
+  thumbClass,
+  onThumbMouseDown,
+  refresh,
+} = useCapsuleScrollbar({
+  scrollEl: scrollElRef,
+  anchorEl: anchorElRef,
+  active: activeRef,
+  gutterPx: props.gutterPx,
+  thumbWidthPx: props.thumbWidthPx,
+  minThumbPx: props.minThumbPx,
+  visibleRatio: props.visibleRatio,
+  alwaysVisible: props.alwaysVisible,
+  autoHideAfterMs: props.autoHideAfterMs,
+  rightOffsetPx: props.rightOffsetPx,
+  classPrefix: props.classPrefix,
+})
+
+defineExpose({ refresh })
+</script>
+
+<style>
+.capsule-scroll-container {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+  overflow-y: auto !important;
+  box-sizing: border-box !important;
+  padding-right: calc(var(--capsule-scroll-padding-right, 0px) + 20px) !important;
+  margin-right: -20px !important;
+  width: calc(100% + 20px) !important;
+}
+
+.capsule-scroll-container::-webkit-scrollbar,
+.capsule-scroll-container::-webkit-scrollbar-thumb,
+.capsule-scroll-container::-webkit-scrollbar-track,
+.capsule-scroll-container::-webkit-scrollbar-corner {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  background: transparent !important;
+}
+
+.capsule-scrollbar {
+  position: fixed;
+  z-index: 12;
+  box-sizing: border-box;
+  padding: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
+.capsule-scrollbar--hidden {
+  opacity: 0;
+  pointer-events: none !important;
+}
+
+.capsule-scrollbar__thumb {
+  height: 100%;
+  background: #999;
+  border-radius: 9999px;
+  cursor: grab;
+  pointer-events: auto;
+  box-shadow: none;
+  filter: none;
+  outline: none;
+  border: none;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.capsule-scrollbar__thumb:hover {
+  background: #777;
+}
+
+.capsule-scrollbar__thumb:active {
+  cursor: grabbing;
+  background: #666;
+}
+</style>