yg-yygl 0.0.1

package/src/views/codegen/template-manage/components/TemplateFileEditorModal.vue

@@ -0,0 +1,541 @@
+<script setup lang="ts">
+import type { CodeLanguage } from '@udp/component-ui';
+
+import type {
+  TemplateFile,
+  TemplateFileLocal,
+  TemplateFileSaveRequest,
+  TemplateFileType,
+} from '../types';
+
+import { computed, reactive, ref, watch } from 'vue';
+
+import { CodeEditor, Dialog, Icon } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { templateFileApi } from '../../../../api/codegen/template-file';
+
+interface Props {
+  modelValue: boolean;
+  file?: TemplateFile;
+  groupId?: number;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'save'): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const formRef = ref();
+const isEdit = computed(() => !!props.file?.id);
+const saving = ref(false);
+
+// 左侧配置面板宽度
+const leftPanelWidth = ref(400);
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartWidth = ref(0);
+
+const formData = reactive<TemplateFileSaveRequest>({
+  groupId: 0,
+  fileName: '',
+  fileLocal: 'CONTROLLER',
+  fileType: 'JAVA',
+  templateContent: '',
+  description: '',
+  status: true,
+  recordSort: 1,
+});
+
+const formRules = {
+  fileName: [
+    { required: true, message: '文件名不能为空', trigger: 'blur' },
+    {
+      min: 1,
+      max: 100,
+      message: '文件名长度在 1 到 100 个字符',
+      trigger: 'blur',
+    },
+  ],
+  fileType: [{ required: true, message: '请选择文件类型', trigger: 'change' }],
+  fileLocal: [{ required: true, message: '请选择文件路径', trigger: 'change' }],
+  templateContent: [
+    { required: true, message: '模板内容不能为空', trigger: 'blur' },
+  ],
+};
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+const fileTypeOptions = [
+  { label: 'Java', value: 'JAVA' as TemplateFileType },
+  { label: 'Vue', value: 'VUE' as TemplateFileType },
+  { label: 'XML', value: 'XML' as TemplateFileType },
+  { label: 'SQL', value: 'SQL' as TemplateFileType },
+  { label: 'TypeScript', value: 'TS' as TemplateFileType },
+  { label: '其他', value: 'OTHER' as TemplateFileType },
+];
+
+const fileLocalOptions = [
+  { label: '控制器层（Controller）', value: 'CONTROLLER' as TemplateFileLocal },
+  { label: '实体对象（Entity）', value: 'ENTITY' as TemplateFileLocal },
+  { label: 'Feign客户端（Feign）', value: 'FEIGN' as TemplateFileLocal },
+  { label: 'Mapper映射（Mapper）', value: 'MAPPER' as TemplateFileLocal },
+  { label: '数据模型（Model）', value: 'MODEL' as TemplateFileLocal },
+  { label: '服务层（Service）', value: 'SERVICE' as TemplateFileLocal },
+  { label: 'SQL脚本', value: 'SQL' as TemplateFileLocal },
+  { label: 'Vue前端页面', value: 'VIEW' as TemplateFileLocal },
+];
+
+/**
+ * 根据文件类型获取代码编辑器语言
+ */
+const getCodeLanguage = (fileType: TemplateFileType): CodeLanguage => {
+  const typeMap: Record<TemplateFileType, CodeLanguage> = {
+    JAVA: 'java',
+    VUE: 'vue',
+    XML: 'xml',
+    SQL: 'sql',
+    TS: 'typescript',
+    OTHER: 'text',
+  };
+  return typeMap[fileType] || 'text';
+};
+
+/**
+ * 获取文件图标
+ */
+const getFileIcon = (fileType: TemplateFileType): string => {
+  const iconMap: Record<TemplateFileType, string> = {
+    JAVA: 'vscode-icons:file-type-java',
+    VUE: 'vscode-icons:file-type-vue',
+    XML: 'vscode-icons:file-type-xml',
+    SQL: 'vscode-icons:file-type-sql',
+    TS: 'vscode-icons:file-type-typescript-official',
+    OTHER: 'vscode-icons:default-file',
+  };
+  return iconMap[fileType] || 'vscode-icons:default-file';
+};
+
+// 当前文件的语言类型
+const currentLanguage = computed<CodeLanguage>(() => {
+  return getCodeLanguage(formData.fileType);
+});
+
+// 监听弹窗打开
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      initForm();
+      // 重置面板宽度
+      leftPanelWidth.value = 400;
+    }
+  },
+);
+
+// 监听数据变化
+watch(
+  () => [props.file, props.groupId],
+  () => {
+    if (props.modelValue) {
+      initForm();
+    }
+  },
+);
+
+const initForm = () => {
+  if (props.file) {
+    Object.assign(formData, {
+      groupId: props.file.groupId,
+      fileName: props.file.fileName,
+      fileLocal: props.file.fileLocal,
+      fileType: props.file.fileType,
+      templateContent: props.file.templateContent,
+      description: props.file.description || '',
+      status: props.file.status !== false,
+      recordSort: props.file.recordSort || 1,
+    });
+  } else {
+    Object.assign(formData, {
+      groupId: props.groupId || 0,
+      fileName: '',
+      fileLocal: 'CONTROLLER' as TemplateFileLocal,
+      fileType: 'JAVA' as TemplateFileType,
+      templateContent: '',
+      description: '',
+      status: true,
+      recordSort: 1,
+    });
+  }
+  formRef.value?.clearValidate();
+};
+
+// 根据文件名自动设置文件类型
+const handleFileNameChange = () => {
+  if (formData.fileName && !isEdit.value) {
+    const dotIndex = formData.fileName.lastIndexOf('.');
+    if (dotIndex > 0) {
+      const extension = formData.fileName
+        .slice(Math.max(0, dotIndex + 1))
+        .toLowerCase();
+
+      const typeMap: Record<string, TemplateFileType> = {
+        java: 'JAVA',
+        vue: 'VUE',
+        xml: 'XML',
+        sql: 'SQL',
+        ts: 'TS',
+        js: 'OTHER',
+        ftl: 'OTHER',
+      };
+
+      if (typeMap[extension]) {
+        formData.fileType = typeMap[extension];
+      }
+    }
+  }
+};
+
+const handleSave = async () => {
+  try {
+    await formRef.value?.validate();
+
+    if (!props.groupId && !props.file?.groupId) {
+      ElMessage.error('请先选择分组');
+      return;
+    }
+
+    saving.value = true;
+
+    await (isEdit.value
+      ? templateFileApi.update(props.file!.id!, formData)
+      : templateFileApi.create(formData));
+
+    ElMessage.success(`${isEdit.value ? '更新' : '创建'}成功`);
+    emit('save');
+    visible.value = false;
+  } catch (error: any) {
+    console.error('保存失败:', error);
+    if (error.message) {
+      ElMessage.error(error.message);
+    }
+  } finally {
+    saving.value = false;
+  }
+};
+
+const handleCancel = () => {
+  visible.value = false;
+};
+
+/**
+ * 开始拖拽调整左侧面板宽度
+ */
+const startResize = (event: MouseEvent) => {
+  isDragging.value = true;
+  dragStartX.value = event.clientX;
+  dragStartWidth.value = leftPanelWidth.value;
+
+  document.body.style.cursor = 'col-resize';
+  document.body.style.userSelect = 'none';
+
+  document.addEventListener('mousemove', handleResize);
+  document.addEventListener('mouseup', stopResize);
+
+  event.preventDefault();
+};
+
+/**
+ * 处理拖拽过程
+ */
+const handleResize = (event: MouseEvent) => {
+  if (!isDragging.value) return;
+
+  const deltaX = event.clientX - dragStartX.value;
+  const newWidth = dragStartWidth.value + deltaX;
+
+  // 限制最小和最大宽度
+  const minWidth = 300;
+  const maxWidth = window.innerWidth * 0.6;
+
+  if (newWidth >= minWidth && newWidth <= maxWidth) {
+    leftPanelWidth.value = newWidth;
+  }
+};
+
+/**
+ * 停止拖拽
+ */
+const stopResize = () => {
+  isDragging.value = false;
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+
+  document.removeEventListener('mousemove', handleResize);
+  document.removeEventListener('mouseup', stopResize);
+};
+
+/**
+ * 关闭弹窗时清理拖拽状态
+ */
+const handleClose = () => {
+  if (isDragging.value) {
+    stopResize();
+  }
+  handleCancel();
+};
+</script>
+
+<template>
+  <Dialog
+    v-model="visible"
+    :title="`${isEdit ? '编辑' : '新增'}模板文件`"
+    :type="isEdit ? 'edit' : 'add'"
+    width="95%"
+    :before-close="handleClose"
+    fullscreen
+    @confirm="handleSave"
+  >
+    <div class="template-editor-container">
+      <!-- 左侧配置面板 -->
+      <div class="config-panel" :style="{ width: `${leftPanelWidth}px` }">
+        <el-card>
+          <template #header>
+            <div class="flex items-center gap-2">
+              <Icon :name="getFileIcon(formData.fileType)" size="18" />
+              <span class="card-title">模板配置</span>
+            </div>
+          </template>
+
+          <el-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            label-width="90px"
+            @submit.prevent
+          >
+            <el-form-item label="文件名" prop="fileName">
+              <el-input
+                v-model="formData.fileName"
+                placeholder="如：Controller.java"
+                maxlength="100"
+                @blur="handleFileNameChange"
+              />
+            </el-form-item>
+
+            <el-form-item label="文件类型" prop="fileType">
+              <el-select
+                v-model="formData.fileType"
+                placeholder="请选择文件类型"
+                style="width: 100%"
+                :show-arrow="false"
+              >
+                <el-option
+                  v-for="item in fileTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="文件路径" prop="fileLocal">
+              <el-select
+                v-model="formData.fileLocal"
+                placeholder="请选择文件路径"
+                style="width: 100%"
+                :show-arrow="false"
+              >
+                <el-option
+                  v-for="item in fileLocalOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="描述">
+              <el-input
+                v-model="formData.description"
+                type="textarea"
+                :rows="2"
+                placeholder="请输入文件描述"
+                maxlength="200"
+              />
+            </el-form-item>
+
+            <el-form-item label="排序">
+              <el-input-number
+                v-model="formData.recordSort"
+                :min="1"
+                :max="9999"
+                placeholder="排序值"
+                style="width: 100%"
+              />
+            </el-form-item>
+
+            <el-form-item label="状态">
+              <el-switch
+                v-model="formData.status"
+                active-text="启用"
+                inactive-text="禁用"
+              />
+            </el-form-item>
+
+            <div class="form-tip bg-sky-50 dark:bg-gray-800 dark:text-gray-300">
+              <Icon name="ant-design:info-circle-outlined" class="mr-1" />
+              支持FreeMarker语法，如：${className}、&lt;#if
+              condition&gt;...&lt;/#if&gt;
+            </div>
+          </el-form>
+        </el-card>
+      </div>
+
+      <!-- 拖拽分隔线 -->
+      <div class="resize-handle" @mousedown="startResize"></div>
+
+      <!-- 右侧代码编辑器 -->
+      <div
+        class="code-editor-panel"
+        :style="{ width: `calc(100% - ${leftPanelWidth}px - 6px)` }"
+      >
+        <el-card>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <Icon :name="getFileIcon(formData.fileType)" size="18" />
+                <span class="card-title">
+                  {{ formData.fileName || '模板内容' }}
+                </span>
+                <el-tag type="info" size="small">
+                  {{ currentLanguage.toUpperCase() }}
+                </el-tag>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-sm text-gray-500">
+                  字符数: {{ formData.templateContent.length }}
+                </span>
+              </div>
+            </div>
+          </template>
+
+          <div class="code-editor-wrapper overflow-y-auto">
+            <CodeEditor
+              v-model="formData.templateContent"
+              :language="currentLanguage"
+              :read-only="false"
+              height="100%"
+              width="100%"
+            />
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <!-- <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="handleSave">
+        {{ isEdit ? '更新' : '保存' }}
+      </el-button>
+    </template> -->
+  </Dialog>
+</template>
+
+<style scoped>
+.template-editor-container {
+  height: calc(100vh - 160px);
+  display: flex;
+  min-height: 600px;
+  gap: 0;
+}
+
+.config-panel {
+  min-width: 300px;
+  max-width: 60vw;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.config-panel :deep(.el-card) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.config-panel :deep(.el-card__body) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.resize-handle {
+  width: 6px;
+  height: 100%;
+  background: transparent;
+  cursor: col-resize;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+}
+
+.resize-handle:hover {
+  background: #e6f4ff;
+}
+
+.resize-handle:hover::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 30px;
+  background: #1890ff;
+  border-radius: 1px;
+}
+
+.resize-handle:active {
+  background: #bae0ff;
+}
+
+.code-editor-panel {
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+}
+
+.code-editor-panel :deep(.el-card) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-editor-panel :deep(.el-card__body) {
+  flex: 1;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.form-tip {
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 8px;
+  border-radius: 4px;
+  border-left: 3px solid #1890ff;
+  margin-top: 8px;
+}
+</style>