yg-yygl 0.0.1

package/dist/views/codegen/generate/components/preview-modal.vue

@@ -0,0 +1,446 @@
+<script setup lang="ts">
+import type { CodePreview } from '../types';
+
+import { computed, ref, watch } from 'vue';
+
+import { Dialog } from '@udp/component-ui';
+
+import {
+  Document,
+  DocumentCopy,
+  Download,
+  Folder,
+} from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface Props {
+  visible: boolean;
+  previewData: CodePreview[];
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void;
+  (e: 'generate'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  previewData: () => [],
+});
+
+const emit = defineEmits<Emits>();
+
+// 响应式数据
+const activeTab = ref('');
+const searchKeyword = ref('');
+
+// 计算属性
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (value) => emit('update:visible', value),
+});
+
+// 按文件类型分组的预览数据
+const groupedPreviewData = computed(() => {
+  const groups: Record<string, CodePreview[]> = {
+    Java后端: [],
+    Vue前端: [],
+    SQL脚本: [],
+    其他: [],
+  };
+
+  props.previewData.forEach((item) => {
+    const path = item.templatePath.toLowerCase();
+    if (path.includes('java')) {
+      groups['Java后端'].push(item);
+    } else if (path.includes('vue') || path.includes('ts')) {
+      groups['Vue前端'].push(item);
+    } else if (path.includes('sql')) {
+      groups['SQL脚本'].push(item);
+    } else {
+      groups['其他'].push(item);
+    }
+  });
+
+  // 过滤掉空组
+  return Object.fromEntries(
+    Object.entries(groups).filter(([_, items]) => items.length > 0),
+  );
+});
+
+// 过滤后的预览数据
+const filteredPreviewData = computed(() => {
+  if (!searchKeyword.value) return props.previewData;
+
+  const keyword = searchKeyword.value.toLowerCase();
+  return props.previewData.filter(
+    (item) =>
+      item.fileName.toLowerCase().includes(keyword) ||
+      item.templatePath.toLowerCase().includes(keyword) ||
+      item.content.toLowerCase().includes(keyword),
+  );
+});
+
+// 监听预览数据变化，设置默认激活标签
+watch(
+  () => props.previewData,
+  (newData) => {
+    if (newData.length > 0 && !activeTab.value) {
+      // 优先选择Java后端分组，其次选择第一个文件
+      const firstGroup = Object.keys(groupedPreviewData.value)[0];
+      activeTab.value = firstGroup || newData[0].templatePath;
+    }
+  },
+  { immediate: true },
+);
+
+// 获取当前显示的内容
+const currentContent = computed(() => {
+  if (!activeTab.value) return '';
+
+  // 如果是分组标签，显示分组说明
+  if (Object.keys(groupedPreviewData.value).includes(activeTab.value)) {
+    const groupItems = groupedPreviewData.value[activeTab.value];
+    return `// ${activeTab.value} (${groupItems.length} 个文件)\n\n${groupItems
+      .map((item) => `// ${item.fileName}\n${item.content}`)
+      .join(`\n\n${'='.repeat(80)}\n\n`)}`;
+  }
+
+  // 否则显示具体文件内容
+  const item = props.previewData.find(
+    (p) => p.templatePath === activeTab.value,
+  );
+  return item ? item.content : '';
+});
+
+// 获取当前文件名
+const currentFileName = computed(() => {
+  if (Object.keys(groupedPreviewData.value).includes(activeTab.value)) {
+    return `${activeTab.value}.txt`;
+  }
+
+  const item = props.previewData.find(
+    (p) => p.templatePath === activeTab.value,
+  );
+  return item ? item.fileName : 'code.txt';
+});
+
+// 复制代码
+const handleCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(currentContent.value);
+    ElMessage.success('复制成功');
+  } catch {
+    // 降级方案
+    const textArea = document.createElement('textarea');
+    textArea.value = currentContent.value;
+    document.body.append(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    textArea.remove();
+    ElMessage.success('复制成功');
+  }
+};
+
+// 下载代码
+const handleDownload = () => {
+  const blob = new Blob([currentContent.value], { type: 'text/plain' });
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = currentFileName.value;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(url);
+  ElMessage.success('下载成功');
+};
+
+// 生成代码
+const handleGenerate = () => {
+  emit('generate');
+  dialogVisible.value = false;
+};
+
+// 关闭对话框时重置状态
+const handleClose = () => {
+  activeTab.value = '';
+  searchKeyword.value = '';
+};
+</script>
+
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    title="代码预览"
+    width="90%"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <div class="flex h-[600px] flex-col">
+      <!-- 工具栏 -->
+      <div class="mb-4 flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <el-input
+            v-model="searchKeyword"
+            placeholder="搜索文件或内容..."
+            clearable
+            class="w-64"
+          />
+          <span class="text-sm text-gray-500">
+            共 {{ previewData.length }} 个文件
+          </span>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <el-button size="small" :icon="DocumentCopy" @click="handleCopy">
+            复制
+          </el-button>
+          <el-button size="small" :icon="Download" @click="handleDownload">
+            下载
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 主要内容区 -->
+      <div class="flex flex-1 gap-4">
+        <!-- 左侧文件树 -->
+        <div class="w-64 overflow-auto rounded border">
+          <div class="border-b bg-gray-50 p-2">
+            <span class="flex items-center gap-1 text-sm font-medium">
+              <Icon :icon="Folder" />
+              文件列表
+            </span>
+          </div>
+
+          <!-- 分组显示 -->
+          <div class="p-2">
+            <div
+              v-for="(items, groupName) in groupedPreviewData"
+              :key="groupName"
+              class="mb-3"
+            >
+              <!-- 分组标题 -->
+              <div
+                class="flex cursor-pointer items-center gap-2 rounded p-2 hover:bg-blue-50"
+                :class="{
+                  'bg-blue-100 text-blue-600': activeTab === groupName,
+                }"
+                @click="activeTab = groupName"
+              >
+                <Icon :icon="Folder" class="text-sm" />
+                <span class="text-sm font-medium">{{ groupName }}</span>
+                <span class="text-xs text-gray-500">({{ items.length }})</span>
+              </div>
+
+              <!-- 文件列表 -->
+              <div class="ml-4 mt-1">
+                <div
+                  v-for="item in items"
+                  :key="item.templatePath"
+                  class="flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-50"
+                  :class="{
+                    'bg-blue-50 text-blue-600': activeTab === item.templatePath,
+                  }"
+                  @click="activeTab = item.templatePath"
+                >
+                  <Icon :icon="Document" class="text-sm" />
+                  <span class="truncate text-sm" :title="item.fileName">
+                    {{ item.fileName }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧代码预览 -->
+        <div class="flex-1 overflow-hidden rounded border">
+          <div
+            class="flex items-center justify-between border-b bg-gray-50 p-2"
+          >
+            <span class="text-sm font-medium">
+              {{ currentFileName }}
+            </span>
+            <span class="text-xs text-gray-500">
+              {{ currentContent.split('\n').length }} 行
+            </span>
+          </div>
+
+          <div class="h-full overflow-auto">
+            <pre
+              class="whitespace-pre-wrap p-4 font-mono text-sm leading-relaxed"
+              >{{ currentContent }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部操作按钮 -->
+    <template #footer>
+      <div class="flex justify-between">
+        <div class="text-sm text-gray-500">预览完成，确认无误后可生成代码</div>
+        <div class="flex gap-2">
+          <el-button @click="dialogVisible = false"> 取消 </el-button>
+          <el-button type="primary" @click="handleGenerate">
+            确认生成
+          </el-button>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.border {
+  border: 1px solid #e5e7eb;
+}
+
+.border-b {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.rounded {
+  border-radius: 0.375rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.bg-gray-50 {
+  background-color: #f9fafb;
+}
+
+.bg-blue-50 {
+  background-color: #eff6ff;
+}
+
+.bg-blue-100 {
+  background-color: #dbeafe;
+}
+
+.text-blue-600 {
+  color: #2563eb;
+}
+
+.text-gray-500 {
+  color: #6b7280;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-mono {
+  font-family:
+    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
+    'DejaVu Sans Mono', monospace;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.hover\:bg-gray-50:hover {
+  background-color: #f9fafb;
+}
+
+.hover\:bg-blue-50:hover {
+  background-color: #eff6ff;
+}
+</style>

package/dist/views/codegen/generate/components/preview-modal.vue.d.ts

@@ -0,0 +1,16 @@
+import type { CodePreview } from '../types';
+interface Props {
+    visible: boolean;
+    previewData: CodePreview[];
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:visible": (value: boolean) => any;
+    generate: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+    onGenerate?: (() => any) | undefined;
+}>, {
+    visible: boolean;
+    previewData: CodePreview[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/codegen/generate/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;