aegon-dangerious 1.0.0

package/build-report/components/ReportSourcesMoreOverlay.vue

@@ -0,0 +1,279 @@
+<template>
+  <section class="report-sources-more-overlay" aria-label="信息源檔案列表">
+    <header class="report-sources-more-overlay__header">
+      <el-breadcrumb class="report-sources-more-overlay__breadcrumb" separator="/">
+        <el-breadcrumb-item>
+          <button type="button" class="report-sources-more-overlay__breadcrumb-link" @click="emit('close')">
+            {{ parentLabel }}
+          </button>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>信息源檔案</el-breadcrumb-item>
+      </el-breadcrumb>
+      <button type="button" class="report-sources-more-overlay__close" aria-label="關閉" @click="emit('close')">
+        <el-icon>
+          <Close />
+        </el-icon>
+      </button>
+    </header>
+
+    <div ref="bodyRef" class="report-sources-more-overlay__body">
+      <table class="report-source-table report-sources-more-overlay__table">
+        <colgroup>
+          <col />
+          <col class="report-source-table__col-action" />
+          <col class="report-source-table__col-action" />
+          <col class="report-source-table__col-action" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th>檔案名稱</th>
+            <th class="report-source-table__action">預覽</th>
+            <th class="report-source-table__action">下載</th>
+            <th class="report-source-table__action">刪除</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="file in sourceFiles" :key="file.id">
+            <td class="report-source-table__name">{{ file.name }}</td>
+            <td class="report-source-table__action">
+              <button type="button" class="report-icon-btn" aria-label="預覽" @click="previewSource(file)">
+                <el-icon>
+                  <View />
+                </el-icon>
+              </button>
+            </td>
+            <td class="report-source-table__action">
+              <button type="button" class="report-icon-btn" aria-label="下載" @click="downloadSource(file)">
+                <el-icon>
+                  <Download />
+                </el-icon>
+              </button>
+            </td>
+            <td class="report-source-table__action">
+              <button type="button" class="report-icon-btn" aria-label="刪除" @click="requestDeleteSource(file)">
+                <el-icon>
+                  <Close />
+                </el-icon>
+              </button>
+            </td>
+          </tr>
+          <tr v-if="!sourceFiles.length">
+            <td colspan="4" class="report-source-table__empty">暫無檔案</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { Close, Download, View } from '@element-plus/icons-vue'
+import { ElBreadcrumb, ElBreadcrumbItem, ElIcon, ElMessageBox } from 'element-plus'
+import { onMounted, ref } from 'vue'
+import { useReportWorkflow, type SourceFile } from '../useReportWorkflow'
+
+withDefaults(
+  defineProps<{
+    parentLabel?: string
+  }>(),
+  {
+    parentLabel: '選擇模板',
+  },
+)
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { sourceFiles } = useReportWorkflow()
+
+const bodyRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  bodyRef.value?.scrollTo({ top: 0 })
+})
+
+function resetBodyScroll() {
+  bodyRef.value?.scrollTo({ top: 0 })
+}
+
+defineExpose({
+  resetBodyScroll,
+})
+
+function previewSource(file: SourceFile) {
+  console.log('preview', file.name)
+}
+
+function downloadSource(file: SourceFile) {
+  console.log('download', file.name)
+}
+
+function deleteSource(id: string) {
+  sourceFiles.value = sourceFiles.value.filter((file) => file.id !== id)
+}
+
+async function requestDeleteSource(file: SourceFile) {
+  try {
+    await ElMessageBox.confirm(`確定刪除「${file.name}」？`, '確認刪除', {
+      confirmButtonText: '確認',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    deleteSource(file.id)
+  } catch {
+    // cancelled
+  }
+}
+</script>
+
+<style scoped>
+.report-sources-more-overlay {
+  --report-source-action-col: 56px;
+  --report-source-row-h: 36px;
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 16px 20px 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.report-sources-more-overlay__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  margin-bottom: 16px;
+}
+
+.report-sources-more-overlay__breadcrumb {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.report-sources-more-overlay__breadcrumb-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #409eff;
+  font: inherit;
+  cursor: pointer;
+}
+
+.report-sources-more-overlay__breadcrumb-link:hover {
+  color: #66b1ff;
+}
+
+.report-sources-more-overlay__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: #909399;
+  font-size: 18px;
+  cursor: pointer;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.report-sources-more-overlay__close:hover {
+  color: #c53355;
+  background: #fff5f6;
+}
+
+.report-sources-more-overlay__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.report-sources-more-overlay__table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 13px;
+}
+
+.report-sources-more-overlay__table th,
+.report-sources-more-overlay__table td {
+  height: var(--report-source-row-h);
+  padding: 0 10px;
+  text-align: left;
+  background: #fff;
+  vertical-align: middle;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease;
+}
+
+.report-sources-more-overlay__table th.report-source-table__action,
+.report-sources-more-overlay__table td.report-source-table__action {
+  width: var(--report-source-action-col);
+  text-align: right;
+}
+
+.report-sources-more-overlay__table tbody tr:hover > td {
+  background-color: #f5f7fa;
+}
+
+.report-sources-more-overlay__table tbody tr:hover > td:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.report-sources-more-overlay__table tbody tr:hover > td:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+.report-sources-more-overlay__table th {
+  background: #fafafa;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.report-source-table__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-source-table__empty {
+  text-align: center;
+  color: #86909c;
+  height: auto;
+  padding: 24px;
+}
+</style>
+
+<style>
+.report-sources-more-overlay .report-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #4e5969;
+  cursor: pointer;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+.report-sources-more-overlay .report-icon-btn:hover {
+  color: #c53355;
+  background: #fff5f6;
+}
+</style>