aegon-lv97 1.0.0

package/gen-ai/components/EntryHeroNavCards.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="entry-hero-nav">
+    <button
+      v-for="action in ENTRY_HERO_NAV_ACTIONS"
+      :key="action.id"
+      type="button"
+      class="entry-hero-nav__card"
+      @click="$emit('select', action.id)"
+    >
+      <span
+        v-if="badgeText(action.id)"
+        class="entry-hero-nav__badge"
+        :title="`待查看 ${pendingOf(action.id)}`"
+      >
+        {{ badgeText(action.id) }}
+      </span>
+
+      <div class="entry-hero-nav__visual" aria-hidden="true">
+        <span
+          v-for="(spark, i) in action.sparks"
+          :key="i"
+          class="entry-hero-nav__spark"
+          :class="spark.kind"
+          :style="{
+            top: spark.top,
+            left: spark.left,
+            right: spark.right,
+            bottom: spark.bottom,
+            width: spark.size,
+            height: spark.size,
+            opacity: spark.opacity,
+          }"
+        />
+        <span class="entry-hero-nav__icon">
+          <svg
+            v-if="action.id === 'new-report'"
+            viewBox="0 0 72 72"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M20 12h22l12 12v36c0 1.7-1.3 3-3 3H20c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3Z"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linejoin="round"
+            />
+            <path d="M42 12v12h12" stroke="currentColor" stroke-width="4" stroke-linejoin="round" />
+            <path d="M27 34h14" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+            <path
+              d="M40 42 52.5 29.5l5 5L45 47l-6.2 1.2L40 42Z"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M50.2 31.8 55.2 36.8"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linecap="round"
+            />
+          </svg>
+
+          <svg
+            v-else-if="action.id === 'report-sim'"
+            viewBox="0 0 72 72"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M20 12h22l12 12v36c0 1.7-1.3 3-3 3H20c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3Z"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linejoin="round"
+            />
+            <path d="M42 12v12h12" stroke="currentColor" stroke-width="4" stroke-linejoin="round" />
+            <path
+              d="M26 32h6M38 32h8M26 40h6M38 40h8M26 48h6M38 48h5"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linecap="round"
+            />
+          </svg>
+
+          <svg
+            v-else-if="action.id === 'template-sim'"
+            viewBox="0 0 72 72"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M16 16h28" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+            <path d="M20 24h28" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+            <path
+              d="M24 30h24l10 10v26c0 1.7-1.3 3-3 3H24c-1.7 0-3-1.3-3-3V33c0-1.7 1.3-3 3-3Z"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linejoin="round"
+            />
+            <path d="M48 30v10h10" stroke="currentColor" stroke-width="4" stroke-linejoin="round" />
+            <path
+              d="M30 46h16M30 54h12"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linecap="round"
+            />
+          </svg>
+
+          <svg v-else viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect
+              x="14"
+              y="14"
+              width="44"
+              height="44"
+              rx="10"
+              stroke="currentColor"
+              stroke-width="4"
+            />
+            <circle cx="36" cy="36" r="7" stroke="currentColor" stroke-width="4" />
+            <path
+              d="M36 22v4.2M36 45.8V50M50 36h-4.2M22 36h4.2M46.2 25.8l-3 3M28.8 43.2l-3 3M46.2 46.2l-3-3M28.8 28.8l-3-3"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linecap="round"
+            />
+          </svg>
+        </span>
+      </div>
+      <div class="entry-hero-nav__label">{{ action.label }}</div>
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+export type EntryHeroNavId = 'new-report' | 'report-sim' | 'template-sim' | 'admin-sim'
+
+export type EntryHeroPendingCounts = Partial<Record<EntryHeroNavId, number>>
+
+type Spark = {
+  kind: 'dot' | 'ring' | 'plus'
+  top?: string
+  left?: string
+  right?: string
+  bottom?: string
+  size?: string
+  opacity?: number
+}
+
+const SPARKS_A: Spark[] = [
+  { kind: 'dot', top: '18%', left: '18%', size: '6px', opacity: 0.9 },
+  { kind: 'dot', top: '14%', right: '22%', size: '4px', opacity: 0.55 },
+  { kind: 'ring', top: '28%', right: '16%', size: '8px', opacity: 0.7 },
+  { kind: 'dot', bottom: '22%', left: '20%', size: '5px', opacity: 0.65 },
+  { kind: 'plus', bottom: '18%', right: '18%', size: '10px', opacity: 0.75 },
+  { kind: 'dot', top: '42%', left: '12%', size: '3px', opacity: 0.4 },
+]
+
+export const ENTRY_HERO_NAV_ACTIONS: { id: EntryHeroNavId; label: string; sparks: Spark[] }[] = [
+  { id: 'new-report', label: '新建報告', sparks: SPARKS_A },
+  { id: 'report-sim', label: '報告中心', sparks: SPARKS_A },
+  { id: 'template-sim', label: '模板中心', sparks: SPARKS_A },
+  { id: 'admin-sim', label: '管理中心', sparks: SPARKS_A },
+]
+
+/** Demo 默認待查看數量（>99 顯示 99+）；有數量才顯示角標 */
+export const DEFAULT_ENTRY_HERO_PENDING: EntryHeroPendingCounts = {
+  'new-report': 0,
+  'report-sim': 0,
+  'template-sim': 0,
+  'admin-sim': 200,
+}
+
+export function formatPendingBadge(count: number, max = 99): string {
+  if (!count || count <= 0) return ''
+  return count > max ? `${max}+` : String(count)
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** 各入口待查看數量；未傳則用默認 mock */
+    pendingCounts?: EntryHeroPendingCounts
+    badgeMax?: number
+  }>(),
+  {
+    badgeMax: 99,
+  }
+)
+
+defineEmits<{
+  select: [id: EntryHeroNavId]
+}>()
+
+const counts = computed(() => ({
+  ...DEFAULT_ENTRY_HERO_PENDING,
+  ...props.pendingCounts,
+}))
+
+function pendingOf(id: EntryHeroNavId) {
+  return counts.value[id] ?? 0
+}
+
+function badgeText(id: EntryHeroNavId) {
+  return formatPendingBadge(pendingOf(id), props.badgeMax)
+}
+</script>
+
+<style scoped>
+.entry-hero-nav {
+  --entry-hero-accent: #c53355;
+  --entry-hero-badge: #f56c6c;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  gap: 24px;
+  /* 角標溢出不被裁切 */
+  padding: 10px 12px 0;
+}
+
+.entry-hero-nav__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  box-sizing: border-box;
+  width: 321.59px;
+  height: 140px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 0 6px 18px rgba(45, 49, 57, 0.08);
+  overflow: visible;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.entry-hero-nav__card:hover {
+  border-color: var(--entry-hero-accent);
+  background: #fdf0f2;
+  box-shadow: 0 10px 24px rgba(197, 51, 85, 0.14);
+  transform: translateY(-2px);
+}
+
+.entry-hero-nav__card:hover .entry-hero-nav__label {
+  color: var(--entry-hero-accent);
+}
+
+.entry-hero-nav__card:focus-visible {
+  outline: 2px solid var(--entry-hero-accent);
+  outline-offset: 2px;
+}
+
+.entry-hero-nav__badge {
+  position: absolute;
+  top: -8px;
+  right: -10px;
+  z-index: 2;
+  box-sizing: border-box;
+  min-width: 32px;
+  height: 20px;
+  padding: 0 7px;
+  border: 2px solid #fff;
+  border-radius: 999px;
+  background: var(--entry-hero-badge);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.entry-hero-nav__visual {
+  position: relative;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 54px;
+  margin: 0;
+  border-radius: 0;
+  overflow: visible;
+  background: transparent;
+}
+
+.entry-hero-nav__icon {
+  position: relative;
+  z-index: 1;
+  width: 54px;
+  height: 54px;
+  margin: 0;
+  display: block;
+  color: var(--entry-hero-accent);
+}
+
+.entry-hero-nav__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.entry-hero-nav__spark {
+  position: absolute;
+  z-index: 0;
+  color: var(--entry-hero-accent);
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.entry-hero-nav__spark.dot {
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.entry-hero-nav__spark.ring {
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  background: transparent;
+}
+
+.entry-hero-nav__spark.plus::before,
+.entry-hero-nav__spark.plus::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  background: currentColor;
+  border-radius: 1px;
+  transform: translate(-50%, -50%);
+}
+
+.entry-hero-nav__spark.plus::before {
+  width: 100%;
+  height: 2.5px;
+}
+
+.entry-hero-nav__spark.plus::after {
+  width: 2.5px;
+  height: 100%;
+}
+
+.entry-hero-nav__label {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 12px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  line-height: 1.3;
+  letter-spacing: 0.04em;
+  transition: color 0.2s ease;
+}
+</style>

package/gen-ai/components/GenAiPagination.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="gen-ai-pagination">
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="pageSizes"
+      :total="total"
+      :disabled="disabled"
+      :pager-count="pagerCount"
+      background
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    total: number
+    pageSizes?: number[]
+    disabled?: boolean
+    pagerCount?: number
+  }>(),
+  {
+    pageSizes: () => [5, 10, 20],
+    disabled: false,
+    pagerCount: 7,
+  }
+)
+
+const currentPage = defineModel<number>('currentPage', { default: 1 })
+const pageSize = defineModel<number>('pageSize', { default: 10 })
+</script>
+
+<style scoped>
+.gen-ai-pagination {
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 14px;
+  color: #303133;
+}
+
+.gen-ai-pagination :deep(.el-pagination__total),
+.gen-ai-pagination :deep(.el-pagination__jump),
+.gen-ai-pagination :deep(.el-pagination__classifier),
+.gen-ai-pagination :deep(.el-pagination__goto),
+.gen-ai-pagination :deep(.el-pagination__sizes) {
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 14px;
+  font-weight: 400;
+  color: #303133;
+}
+</style>