aegon-lv97 1.0.0

package/gen-ai/components/ReportCollapsibleSection.vue

@@ -0,0 +1,172 @@
+<template>
+  <section
+    ref="rootRef"
+    class="report-collapsible-section"
+    :class="{ 'is-collapsed': !open, 'is-card-hover': cardHover }"
+  >
+    <button
+      ref="toggleRef"
+      type="button"
+      class="report-collapsible-section__toggle"
+      @click="handleToggle"
+    >
+      <span class="report-collapsible-section__title">{{ title }}</span>
+      <span class="report-collapsible-section__trailing">
+        <span v-if="$slots.actions" class="report-collapsible-section__actions" @click.stop>
+          <slot name="actions" />
+        </span>
+        <span
+          class="report-collapsible-section__arrow"
+          :class="{ 'is-open': open }"
+          aria-hidden="true"
+        />
+      </span>
+    </button>
+    <div v-show="open" class="report-collapsible-section__body">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  title: string
+  cardHover?: boolean
+}>()
+
+const open = defineModel<boolean>('open', { default: true })
+
+const COLLAPSE_DELAY_MS = 300
+
+const emit = defineEmits<{
+  'before-collapse': [done: (hadOpenOverlays: boolean) => void]
+}>()
+
+function collapse(hadOpenOverlays = false) {
+  window.setTimeout(
+    () => {
+      open.value = false
+    },
+    hadOpenOverlays ? COLLAPSE_DELAY_MS : 0
+  )
+}
+
+function handleToggle() {
+  if (!open.value) {
+    open.value = true
+    return
+  }
+  let handled = false
+  emit('before-collapse', (hadOpenOverlays) => {
+    handled = true
+    collapse(hadOpenOverlays)
+  })
+  if (!handled) {
+    collapse()
+  }
+}
+
+const rootRef = ref<HTMLElement | null>(null)
+const toggleRef = ref<HTMLElement | null>(null)
+
+defineExpose({
+  rootRef,
+  toggleRef,
+})
+</script>
+
+<style scoped>
+.report-collapsible-section {
+  /* 頁面與卡面均為 #fff：靠邊線 + 輕陰影分層 */
+  --rcs-surface: #fff;
+  --rcs-border: #e4e7ec;
+  padding: 14px 16px;
+  border: 1px solid var(--rcs-border);
+  border-radius: 8px;
+  background: var(--rcs-surface);
+  box-sizing: border-box;
+}
+
+.report-collapsible-section.is-card-hover {
+  --rcs-border: #d8dce3;
+  --rcs-card-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.05),
+    0 3px 10px rgba(15, 23, 42, 0.07);
+  box-shadow: var(--rcs-card-shadow);
+  transition:
+    box-shadow 0.22s ease,
+    border-color 0.22s ease;
+}
+
+.report-collapsible-section.is-card-hover:hover {
+  --rcs-border: #c5cad3;
+  background: var(--rcs-surface);
+  box-shadow:
+    inset 0 0 0 1px rgba(15, 23, 42, 0.05),
+    0 2px 6px rgba(15, 23, 42, 0.07),
+    0 10px 22px rgba(15, 23, 42, 0.11);
+}
+
+.report-collapsible-section__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin: 0;
+  padding: 0 0 14px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.report-collapsible-section.is-collapsed .report-collapsible-section__toggle {
+  padding-bottom: 0;
+}
+
+.report-collapsible-section__title {
+  font-size: 18px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  line-height: 1.4;
+}
+
+.report-collapsible-section__trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.report-collapsible-section__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.report-collapsible-section__arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  /* 收起：朝下；展開（is-open rotate 180°）：朝上 */
+  border-top: 7px solid #c53355;
+  transition: transform 0.2s ease;
+}
+
+.report-collapsible-section__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.report-collapsible-section__body {
+  padding-top: 0;
+  min-width: 0;
+}
+
+.report-collapsible-section.is-collapsed {
+  padding-bottom: 14px;
+}
+</style>