feat: 代码生成器 模板内容预览
This commit is contained in:
cuijiawang
parent
0f896a421c
commit
37f50ca1d3
@ -57,6 +57,7 @@ export interface UserTemplate {
|
||||
useCount?: number;
|
||||
status?: number; // 0-草稿 1-发布 2-禁用
|
||||
isEnabled?: number; // 0-隐藏 1-显示
|
||||
isContentPublic?: number; // 0-内容不公开 1-内容公开
|
||||
createTime?: string;
|
||||
updateTime?: string;
|
||||
createBy?: string;
|
||||
@ -218,6 +219,14 @@ export function toggleTemplateVisibilityApi(id: number, isEnabled: number) {
|
||||
);
|
||||
}
|
||||
|
||||
// 获取模板内容
|
||||
export function getTemplateContentApi(id: number | string) {
|
||||
return http.request<ResponseData<string>>(
|
||||
"get",
|
||||
`/codegen/user-template/content/${id}`
|
||||
);
|
||||
}
|
||||
|
||||
// ============= 模板仓库管理 API =============
|
||||
|
||||
// 获取用户的模板仓库列表
|
||||
|
||||
@ -55,7 +55,9 @@ const editForm = reactive<UserTemplate>({
|
||||
description: "",
|
||||
isPublic: 0,
|
||||
version: "1.0.0",
|
||||
status: 1
|
||||
status: 1,
|
||||
isEnabled: 1,
|
||||
isContentPublic: 0
|
||||
});
|
||||
|
||||
const editFormRef = ref();
|
||||
@ -174,7 +176,8 @@ const handleAdd = () => {
|
||||
isPublic: 0,
|
||||
version: "1.0.0",
|
||||
status: 1,
|
||||
isEnabled: 1
|
||||
isEnabled: 1,
|
||||
isContentPublic: 0
|
||||
});
|
||||
activeTab.value = "edit";
|
||||
};
|
||||
@ -563,7 +566,7 @@ watch(
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公开状态">
|
||||
<el-form-item label="模板公开">
|
||||
<el-radio-group v-model="editForm.isPublic">
|
||||
<el-radio :label="0">私有</el-radio>
|
||||
<el-radio :label="1">公开</el-radio>
|
||||
@ -580,6 +583,22 @@ watch(
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="内容公开">
|
||||
<el-radio-group v-model="editForm.isContentPublic">
|
||||
<el-radio :label="0">不公开</el-radio>
|
||||
<el-radio :label="1">公开</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tip">
|
||||
<small class="text-gray-500"
|
||||
>公开后其他用户可以查看模板源代码</small
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="模板描述">
|
||||
<el-input
|
||||
v-model="editForm.description"
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
getUserRepositoryListApi,
|
||||
toggleTemplateStatusApi,
|
||||
previewTemplateCodeApi,
|
||||
getTemplateContentApi,
|
||||
type TemplateRepository
|
||||
} from "@/api/system/codegen";
|
||||
|
||||
@ -32,6 +33,9 @@ const previewVisible = ref(false);
|
||||
const previewLoading = ref(false);
|
||||
const currentPreviewTemplate = ref<TemplateRepository | null>(null);
|
||||
const previewCode = ref("");
|
||||
const templateContentVisible = ref(false);
|
||||
const templateContentLoading = ref(false);
|
||||
const templateContent = ref("");
|
||||
|
||||
// 计算属性
|
||||
const dialogVisible = computed({
|
||||
@ -209,6 +213,53 @@ const copyCode = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 查看模板内容
|
||||
const viewTemplateContent = async () => {
|
||||
if (templateContentVisible.value) {
|
||||
templateContentVisible.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
templateContentLoading.value = true;
|
||||
templateContent.value = "";
|
||||
|
||||
try {
|
||||
if (currentPreviewTemplate.value?.templateSource === "system") {
|
||||
// 系统模板：直接显示模板文件内容（这里需要后端支持）
|
||||
templateContent.value = "// 系统模板内容（需要后端实现系统模板内容获取）";
|
||||
} else {
|
||||
// 用户模板：检查权限并获取内容
|
||||
const res = await getTemplateContentApi(
|
||||
currentPreviewTemplate.value?.templateId || "0"
|
||||
);
|
||||
if (res.code === 200) {
|
||||
templateContent.value =
|
||||
res.data !== undefined ? res.data : "// 暂无内容";
|
||||
} else {
|
||||
templateContent.value = res.data || "// 获取失败";
|
||||
}
|
||||
}
|
||||
templateContentVisible.value = true;
|
||||
} catch (error) {
|
||||
templateContent.value = "// 获取失败: 网络错误";
|
||||
ElMessage.error("获取模板内容失败");
|
||||
console.error(error);
|
||||
} finally {
|
||||
templateContentLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 复制模板内容
|
||||
const copyTemplateContent = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(templateContent.value);
|
||||
ElMessage.success("模板内容已复制到剪贴板");
|
||||
} catch (error) {
|
||||
ElMessage.error("复制失败");
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 对话框关闭时
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false;
|
||||
@ -427,6 +478,43 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模板内容预览区域 -->
|
||||
<div class="template-content-preview">
|
||||
<div class="content-header">
|
||||
<span class="content-title">模板内容预览</span>
|
||||
<div class="content-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
type="info"
|
||||
plain
|
||||
@click="viewTemplateContent"
|
||||
:loading="templateContentLoading"
|
||||
>
|
||||
{{ templateContentVisible ? "隐藏内容" : "查看内容" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="templateContentVisible"
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
@click="copyTemplateContent"
|
||||
:disabled="!templateContent"
|
||||
>
|
||||
复制内容
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div
|
||||
v-show="templateContentVisible"
|
||||
class="template-content"
|
||||
v-loading="templateContentLoading"
|
||||
>
|
||||
<pre><code>{{ templateContentLoading ? '// 加载中...' : (templateContent || '// 暂无内容') }}</code></pre>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
|
||||
<!-- 代码预览区域 -->
|
||||
<div class="code-preview" v-loading="previewLoading">
|
||||
<div class="code-header">
|
||||
@ -784,5 +872,58 @@ watch(
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-content-preview {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: var(--el-bg-color-page);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
.content-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.content-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.template-content {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 0 0 6px 6px;
|
||||
|
||||
pre {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--el-text-color-regular);
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
background: transparent;
|
||||
|
||||
code {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user