aegon-gen 1.0.0

package/src/directives/debounce.ts

@@ -0,0 +1,98 @@
+import type { Directive, DirectiveBinding } from 'vue'
+
+const DEBOUNCE_KEY = Symbol('vDebounce')
+
+/** 默认防重间隔 2s；v-debounce:800 自定义毫秒 */
+const DEFAULT_WAIT_MS = 2000
+const DEFAULT_EVENT = 'click'
+
+export type DebounceHandler = (event: Event) => unknown
+export type DebounceBindingValue = DebounceHandler | undefined
+export type DebounceDirective = Directive<HTMLElement, DebounceBindingValue>
+export type DebounceDirectiveBinding = DirectiveBinding<DebounceBindingValue>
+
+interface DebounceBindingMeta {
+  listener: (event: Event) => void
+  event: string
+  binding: DebounceDirectiveBinding
+}
+
+function resolveButtonHost(el: HTMLElement): HTMLElement {
+  if (el.tagName === 'BUTTON') return el
+  const nested = el.querySelector<HTMLElement>('button.el-button')
+  return nested ?? el
+}
+
+function resolveWait(arg?: string): number {
+  if (arg && /^\d+$/.test(arg)) return Number(arg)
+  return DEFAULT_WAIT_MS
+}
+
+function resolveEvent(arg?: string): string {
+  if (arg && !/^\d+$/.test(arg)) return arg
+  return DEFAULT_EVENT
+}
+
+/**
+ * v-debounce — 纯点击防重，与 loading 解耦
+ * - v-debounce @click="fn"           默认 2s
+ * - v-debounce:800 @click="fn"       自定义间隔
+ * - v-debounce:800="fn"              绑定 handler（拦截原生 @click）
+ */
+export const vDebounce: DebounceDirective = {
+  mounted(el: HTMLElement, binding: DebounceDirectiveBinding) {
+    const host = resolveButtonHost(el)
+    let locked = false
+
+    const listener = (e: Event) => {
+      const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+      const currentBinding = meta?.binding ?? binding
+      const wait = resolveWait(currentBinding.arg)
+      const handler =
+        typeof currentBinding.value === 'function' ? currentBinding.value : undefined
+
+      if (locked) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        return
+      }
+
+      locked = true
+
+      if (handler) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        Promise.resolve(handler(e)).finally(() => {
+          window.setTimeout(() => {
+            locked = false
+          }, wait)
+        })
+        return
+      }
+
+      window.setTimeout(() => {
+        locked = false
+      }, wait)
+    }
+
+    const event = resolveEvent(binding.arg)
+    host.addEventListener(event, listener, true)
+    ;(host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY] = {
+      listener,
+      event,
+      binding,
+    }
+  },
+  updated(el: HTMLElement, binding: DebounceDirectiveBinding) {
+    const host = resolveButtonHost(el)
+    const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+    if (meta) meta.binding = binding
+  },
+  unmounted(el: HTMLElement) {
+    const host = resolveButtonHost(el)
+    const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+    if (!meta) return
+    host.removeEventListener(meta.event, meta.listener, true)
+    delete (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+  },
+}

package/src/directives/index.ts

@@ -0,0 +1,25 @@
+import type { App, Directive } from 'vue'
+import { closeBtnLoading, vBtnLoading } from './btnLoading'
+import { vDebounce } from './debounce'
+
+/** 全局自定义指令清单（新增指令在此单独追加一项） */
+const directiveRegistry: ReadonlyArray<{
+  name: string
+  directive: Directive
+}> = [
+  { name: 'debounce', directive: vDebounce as Directive },
+  { name: 'btnLoading', directive: vBtnLoading },
+]
+
+export function registerDirectives(app: App) {
+  directiveRegistry.forEach(({ name, directive }) => {
+    app.directive(name, directive)
+  })
+
+  app.config.globalProperties.closeBtnLoading = closeBtnLoading
+  ;(globalThis as typeof globalThis & { closeBtnLoading: typeof closeBtnLoading }).closeBtnLoading =
+    closeBtnLoading
+}
+
+export { vDebounce, type DebounceBindingValue, type DebounceDirective, type DebounceHandler } from './debounce'
+export { vBtnLoading, closeBtnLoading, hasActiveBtnLoading } from './btnLoading'

package/src/layouts/MainLayout.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-container class="main-layout">
+    <el-aside width="220px" class="main-layout__aside">
+      <div class="main-layout__logo">GenAI Demo</div>
+      <el-menu
+        :default-active="activeMenu"
+        router
+        class="main-layout__menu"
+      >
+        <el-menu-item index="/">
+          <span>HOME</span>
+        </el-menu-item>
+        <el-menu-item index="/blank">
+          <span>SMART</span>
+        </el-menu-item>
+        <el-menu-item index="/report-center">
+          <span>ReportCenter</span>
+        </el-menu-item>
+        <el-menu-item index="new-tab:template-center" @click.stop.prevent="openTemplateCenterPage">
+          <span>TemplateCenter</span>
+        </el-menu-item>
+        <el-menu-item index="/admin-center">
+          <span>AdminCenter</span>
+        </el-menu-item>
+        <el-sub-menu index="gen-ai">
+          <template #title>
+            <span>GEN-TYPER</span>
+          </template>
+          <el-menu-item
+            v-for="item in genAiAppMenus"
+            :key="item.path"
+            :index="item.path"
+          >
+            {{ item.title }}
+          </el-menu-item>
+          <el-menu-item
+            v-for="item in genAiMenus"
+            :key="item.path"
+            :index="item.path"
+          >
+            {{ item.title }}
+          </el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </el-aside>
+    <el-main class="main-layout__main">
+      <PageCard>
+        <router-view />
+      </PageCard>
+    </el-main>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import PageCard from '../components/PageCard.vue'
+import { genAiAppMenus, genAiMenus } from '../router/menus'
+import { openTemplateCenter } from '@/utils/gen-ai-navigation'
+
+const route = useRoute()
+const router = useRouter()
+
+const activeMenu = computed(() => route.path)
+
+function openTemplateCenterPage() {
+  openTemplateCenter(router)
+}
+</script>
+
+<style scoped>
+.main-layout {
+  min-height: 100vh;
+  background: var(--page-bg);
+}
+
+.main-layout__aside {
+  background: #fff;
+  border-right: 1px solid var(--page-card-border);
+}
+
+.main-layout__logo {
+  height: 56px;
+  line-height: 56px;
+  padding: 0 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #2d3139;
+  border-bottom: 1px solid var(--page-card-border);
+}
+
+.main-layout__menu {
+  border-right: none;
+}
+
+.main-layout__main {
+  padding: var(--page-outer-spacing);
+  overflow: auto;
+  box-sizing: border-box;
+}
+</style>

package/src/main.ts

@@ -0,0 +1,85 @@
+import { createApp, type App as VueApp } from 'vue'
+import ElementPlus from 'element-plus'
+import zhTw from 'element-plus/es/locale/lang/zh-tw'
+import './styles/variables.css'
+import './styles/index.scss'
+import 'element-plus/dist/index.css'
+import './styles/global.css'
+import './styles/element-overrides.css'
+import './styles/page-card.css'
+import './styles/app-button.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import App from './App.vue'
+import router from './router'
+import { registerDirectives } from '@/directives'
+import CapsuleScrollbar from '@/components/CapsuleScrollbar.vue'
+import { initCapsuleScrollbarGlobal } from '@/utils/gen-ai-scroll'
+
+let app: VueApp | null = null
+
+function registerElementPlusIcons(instance: VueApp) {
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    instance.component(key, component)
+  }
+}
+
+function mountApp() {
+  if (app) return
+  app = createApp(App)
+  registerElementPlusIcons(app)
+  registerDirectives(app)
+  initCapsuleScrollbarGlobal()
+  app.component('CapsuleScrollbar', CapsuleScrollbar)
+  app.use(ElementPlus, { locale: zhTw })
+  app.use(router)
+  app.mount('#app')
+}
+
+function unmountApp() {
+  app?.unmount()
+  app = null
+}
+
+function shouldRemountOnUpdate(payload: { updates?: Array<{ type?: string }> }) {
+  return (
+    payload.updates?.some((update) => update.type === 'js-update' || update.type === 'vue') ??
+    false
+  )
+}
+
+mountApp()
+
+if (import.meta.hot) {
+  import.meta.hot.accept(['./App.vue'], () => {
+    unmountApp()
+    mountApp()
+  })
+
+  import.meta.hot.accept(
+    [
+      './components/GEN-AI/index9.vue',
+      './components/GEN-AI/index10.vue',
+      './utils/docxExport.ts',
+    ],
+    () => {
+      unmountApp()
+      mountApp()
+    }
+  )
+
+  import.meta.hot.on('vite:beforeUpdate', (payload) => {
+    if (shouldRemountOnUpdate(payload)) {
+      unmountApp()
+    }
+  })
+
+  import.meta.hot.on('vite:afterUpdate', (payload) => {
+    if (shouldRemountOnUpdate(payload) && !app) {
+      mountApp()
+    }
+  })
+
+  import.meta.hot.dispose(() => {
+    unmountApp()
+  })
+}

package/src/router/index.ts

@@ -0,0 +1,76 @@
+// router/index.ts
+import type { Component } from 'vue'
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import MainLayout from '../layouts/MainLayout.vue'
+import { genAiMenus } from './menus'
+
+const genAiModules = import.meta.glob('../components/GEN-AI/index*.vue')
+
+const genAiRoutes: RouteRecordRaw[] = genAiMenus.flatMap((item) => {
+  const modulePath = `../components/GEN-AI/${item.file}.vue`
+  const componentLoader = genAiModules[modulePath]
+  if (!componentLoader) {
+    console.warn(`GEN-AI component not found: ${modulePath}`)
+    return []
+  }
+  return [{
+    path: item.path.replace(/^\//, ''),
+    name: `GenAI-${item.file}`,
+    component: componentLoader as () => Promise<Component>,
+    meta: { title: item.title, group: 'GEN-TYPER' },
+  }]
+})
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/gen-ai/gen-entry',
+    name: 'gen-entry',
+    component: () => import('../views/gen-ai/gen-entry/index.vue'),
+    meta: { title: '行業分析', standalone: true },
+  },
+  { path: '/gen-entry', redirect: '/gen-ai/gen-entry' },
+  {
+    path: '/gen-ai/model-manager',
+    name: 'model-manager',
+    component: () => import('../views/gen-ai/model-manager/index.vue'),
+    meta: { title: '模板中心', standalone: true },
+  },
+  { path: '/model-manager', redirect: '/gen-ai/model-manager' },
+  {
+    path: '/gen-ai/management-center',
+    name: 'management-center',
+    component: () => import('../views/gen-ai/management-center/index.vue'),
+    meta: { title: '管理中心', standalone: true },
+  },
+  { path: '/management-center', redirect: '/gen-ai/management-center' },
+  {
+    path: '/gen-ai/report-center',
+    name: 'report-center',
+    component: () => import('../views/gen-ai/report-center/index.vue'),
+    meta: { title: '報告中心', standalone: true },
+  },
+  {
+    path: '/template-center',
+    name: 'TemplateCenter',
+    component: () => import('../test/test2.vue'),
+    meta: { title: '模板中心', standalone: true },
+  },
+  {
+    path: '/',
+    component: MainLayout,
+    children: [
+      { path: '', name: 'Home', component: () => import('../views/Home.vue'), meta: { title: 'HOME' } },
+      { path: 'blank', name: 'Blank', component: () => import('../views/Blank.vue'), meta: { title: 'SMART' } },
+      { path: 'report-center', name: 'ReportCenter', component: () => import('../views/ReportCenter/index.vue'), meta: { title: '報告中心' } },
+      { path: 'admin-center', name: 'AdminCenter', component: () => import('../views/AdminCenter/index.vue'), meta: { title: '管理後台' } },
+      ...genAiRoutes,
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
+export default router

package/src/router/menus.ts

@@ -0,0 +1,28 @@
+export interface GenAiMenuItem {
+  title: string
+  path: string
+  file: string
+}
+
+/** GEN-AI 業務頁面（獨立全屏） */
+export const genAiAppMenus: GenAiMenuItem[] = [
+  { title: '行業分析', path: '/gen-ai/gen-entry', file: 'gen-entry' },
+  { title: '報告中心', path: '/gen-ai/report-center', file: 'report-center' },
+  { title: '模板中心', path: '/gen-ai/model-manager', file: 'model-manager' },
+  { title: '管理中心', path: '/gen-ai/management-center', file: 'management-center' },
+]
+
+/** GEN-AI 目录下全部 index 页面（二级菜单） */
+export const genAiMenus: GenAiMenuItem[] = [
+  { title: 'index', path: '/gen-ai/index', file: 'index' },
+  { title: 'index1', path: '/gen-ai/index1', file: 'index1' },
+  { title: 'index2', path: '/gen-ai/index2', file: 'index2' },
+  { title: 'index3', path: '/gen-ai/index3', file: 'index3' },
+  { title: 'index4', path: '/gen-ai/index4', file: 'index4' },
+  { title: 'index5', path: '/gen-ai/index5', file: 'index5' },
+  { title: 'index6', path: '/gen-ai/index6', file: 'index6' },
+  { title: 'index7', path: '/gen-ai/index7', file: 'index7' },
+  { title: 'index8', path: '/gen-ai/index8', file: 'index8' },
+  { title: 'index9', path: '/gen-ai/index9', file: 'index9' },
+  { title: 'index10', path: '/gen-ai/index10', file: 'index10' },
+]

package/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,24 @@
+// 全局 SCSS 变量（可在任意 <style lang="scss"> 中直接使用）
+
+$color-primary: #c53355;
+$color-primary-soft: #fdf0f2;
+$color-text: #1a1a1a;
+$color-text-secondary: #333;
+$color-muted: #999;
+$color-border: #ebebeb;
+$color-page-bg: #f3f3f3;
+$color-card-bg: #f5f5f5;
+$color-white: #fff;
+
+$report-accent: $color-primary;
+$report-accent-soft: $color-primary-soft;
+$report-border: $color-border;
+$report-bg: $color-page-bg;
+$report-text: $color-text;
+$report-muted: $color-muted;
+$report-card-bg: $color-card-bg;
+
+$radius-sm: 4px;
+$radius-md: 6px;
+$radius-lg: 12px;
+$radius-pill: 20px;

package/src/styles/app-button.css

@@ -0,0 +1,26 @@
+.app-btn {
+  min-width: var(--app-btn-min-width);
+  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
+  border: 1px solid var(--app-btn-border);
+  border-radius: var(--app-btn-radius);
+  background: var(--app-btn-bg);
+  color: var(--app-btn-color);
+  font-size: var(--app-btn-font-size);
+  font-weight: var(--app-btn-font-weight);
+  line-height: 1.4;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.app-btn:hover,
+.app-btn.is-active,
+.app-btn--active {
+  background: var(--app-btn-bg-hover);
+  border-color: var(--app-btn-border-hover);
+  color: var(--app-btn-color-hover);
+}
+
+.app-btn--wide {
+  min-width: 148px;
+}

package/src/styles/element-overrides.css

@@ -0,0 +1,23 @@
+/**
+ * Element Plus 全局样式覆盖
+ */
+
+/* el-card 圆角 */
+.el-card {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* el-table 行：手型 + hover 底部连通蓝线（box-shadow 不占位，避免 hover 跳动） */
+.el-table .el-table__body tr.el-table__row {
+  cursor: pointer;
+}
+
+.el-table .el-table__body tr.el-table__row > td.el-table__cell {
+  transition: box-shadow 0.2s ease;
+}
+
+.el-table .el-table__body tr.el-table__row:hover > td.el-table__cell {
+  background-color: var(--el-table-tr-bg-color, #fff) !important;
+  box-shadow: inset 0 -1px 0 rgba(64, 158, 255, 0.5);
+}

package/src/styles/global.css

@@ -0,0 +1,44 @@
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  font-family: var(--app-font-family);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  color: #2d3139;
+  background: var(--page-bg);
+}
+
+body,
+button,
+input,
+textarea,
+select {
+  font-family: inherit;
+}
+
+#app {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+/* 膠囊滾動條：可滾動容器通用 class（配合 <CapsuleScrollbar /> 或 useCapsuleScrollbar） */
+.is-scrollable {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* v-debounce.lock.loading */
+.is-v-debounce-loading {
+  cursor: wait !important;
+  opacity: 0.65;
+  pointer-events: none;
+}

package/src/styles/index.scss

@@ -0,0 +1 @@
+@forward 'variables';

package/src/styles/page-card.css

@@ -0,0 +1,21 @@
+.page-card {
+  min-height: calc(100vh - var(--page-outer-spacing) * 2);
+  border-radius: var(--page-card-radius);
+  border: 1px solid var(--page-card-border);
+}
+
+.page-card .el-card__body {
+  padding: var(--page-inner-spacing);
+}
+
+.page-card__inner {
+  min-height: calc(100vh - var(--page-outer-spacing) * 2 - var(--page-inner-spacing) * 2);
+}
+
+/* GEN-AI 等全屏页放入 Card 后取消重复视口高度与背景 */
+.page-card__inner > .min-h-screen,
+.page-card__inner > .h-screen {
+  min-height: auto;
+  height: auto;
+  background: transparent;
+}

package/src/styles/variables.css

@@ -0,0 +1,26 @@
+:root {
+  --page-outer-spacing: 20px;
+  --page-inner-spacing: 20px;
+  --page-card-radius: 4px;
+  --page-card-border: #e8eaec;
+  --page-bg: #f3f4f6;
+
+  /* 繁體中文優先字體棧 */
+  --app-font-family: 'PingFang TC', 'SF Pro TC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+    'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
+  --el-font-family: var(--app-font-family);
+
+  /* 全局圓角按鈕 */
+  --app-btn-color: #fff;
+  --app-btn-color-hover: #c53355;
+  --app-btn-bg: #c53355;
+  --app-btn-bg-hover: #fff;
+  --app-btn-border: #c53355;
+  --app-btn-border-hover: #c53355;
+  --app-btn-radius: 5px;
+  --app-btn-font-size: 15px;
+  --app-btn-font-weight: 600;
+  --app-btn-padding-y: 8px;
+  --app-btn-padding-x: 15px;
+  --app-btn-min-width: 120px;
+}