|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="workflow-add container-height">
|
|
|
<Breadcrumb />
|
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top" class="page-add">
|
|
|
- <div class="padding16 bg_color_fff border_radius_10 box_shadow_card">
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 box_shadow_card" v-show="!isFullscreen">
|
|
|
<div class="gap10">
|
|
|
<div class="line_vertical"></div>
|
|
|
<div class="font_size20 bold"><span class="color_required font_size16">*</span>{{$t('workflowTrade.fileUpload')}}</div>
|
|
|
@@ -30,10 +30,10 @@
|
|
|
<div class="font_size20 bold">{{$t('common.basicInfo')}}</div>
|
|
|
</div>
|
|
|
<div class="mt10">
|
|
|
- <el-form-item :label="$t('workflowTrade.workflowTitle')" prop="workflowTitle">
|
|
|
+ <el-form-item :label="$t('workflowTrade.workflowTitle')" prop="workflowTitle" v-show="!isFullscreen">
|
|
|
<el-input v-model="ruleForm.workflowTitle" :placeholder="$t('workflowTrade.placeholderWorkflowTitle')" maxlength="50"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item :label="$t('workflowTrade.workflowCategory')" prop="categoryId3">
|
|
|
+ <el-form-item :label="$t('workflowTrade.workflowCategory')" prop="categoryId3" v-show="!isFullscreen">
|
|
|
<el-cascader
|
|
|
v-model="categoryIdList"
|
|
|
:options="categoryListTree"
|
|
|
@@ -46,10 +46,10 @@
|
|
|
}"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item :label="$t('workflowTrade.workflowDescription')" prop="description">
|
|
|
+ <el-form-item :label="$t('workflowTrade.workflowDescription')" prop="description" v-show="!isFullscreen">
|
|
|
<el-input type="textarea" v-model="ruleForm.description" :placeholder="$t('workflowTrade.placeholderWorkflowDescription')" maxlength="500" show-word-limit/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item :label="$t('common.coverImage')" prop="coverImage">
|
|
|
+ <el-form-item :label="$t('common.coverImage')" prop="coverImage" v-show="!isFullscreen">
|
|
|
<!-- 图片类型 -->
|
|
|
<FileUploader
|
|
|
ref="fileUploader"
|
|
|
@@ -67,7 +67,7 @@
|
|
|
@progress="handleUploadProgress"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item :label="$t('common.workflowPreview')">
|
|
|
+ <el-form-item :label="$t('common.workflowPreview')" v-show="!isFullscreen">
|
|
|
<div>{{$t('workflowTrade.supportBatchUpload')}}</div>
|
|
|
<!-- 图片类型 -->
|
|
|
<FileUploader
|
|
|
@@ -86,12 +86,44 @@
|
|
|
@progress="handleUploadProgress"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item :label="$t('common.Detail')" prop="workflowContent">
|
|
|
+ <!-- <el-form-item :label="$t('common.Detail')" prop="workflowContent">
|
|
|
<BlockNoteEditor v-model="editorContent" :editable="true" class="border"/>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item :label="$t('common.Detail')" prop="workflowContent">
|
|
|
+ <div class="editor-container" :class="{ 'fullscreen': isFullscreen }">
|
|
|
+ <div class="editor-header" v-if="isFullscreen">
|
|
|
+ <span class="editor-title">{{$t('common.Detail')}}</span>
|
|
|
+ <el-button
|
|
|
+ icon="FullScreen"
|
|
|
+ @click="toggleFullscreen"
|
|
|
+ size="small"
|
|
|
+ class="exit-fullscreen-btn"
|
|
|
+ >
|
|
|
+ {{$t('common.exitFullscreen')}}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="editor-content">
|
|
|
+ <BlockNoteEditor
|
|
|
+ v-model="editorContent"
|
|
|
+ :editable="true"
|
|
|
+ class="border"
|
|
|
+ :class="{ 'fullscreen-editor': isFullscreen }"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ v-if="!isFullscreen"
|
|
|
+ icon="FullScreen"
|
|
|
+ @click="toggleFullscreen"
|
|
|
+ size="small"
|
|
|
+ class="fullscreen-btn"
|
|
|
+ >
|
|
|
+ {{$t('common.fullscreenEdit')}}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card" v-show="!isFullscreen">
|
|
|
<div class="gap10 mb20">
|
|
|
<div class="line_vertical"></div>
|
|
|
<div class="font_size20 bold">{{$t('workflowTrade.priceSetting')}}</div>
|
|
|
@@ -115,7 +147,7 @@
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
- <div class="mt20">
|
|
|
+ <div class="mt20" v-show="!isFullscreen">
|
|
|
<el-button type="primary" class="font_size16 gradient"
|
|
|
:loading="isSubmiting"
|
|
|
@click="submitForm" size="large">
|
|
|
@@ -216,8 +248,19 @@ const rules = reactive({
|
|
|
})
|
|
|
|
|
|
|
|
|
+// 在现有代码后添加键盘事件处理
|
|
|
+const handleKeyDown = (e) => {
|
|
|
+ // ESC键退出全屏
|
|
|
+ if (e.key === 'Escape' && isFullscreen.value) {
|
|
|
+ toggleFullscreen();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
|
|
|
onMounted(() => {
|
|
|
+
|
|
|
+ // 添加键盘事件监听
|
|
|
+ window.addEventListener('keydown', handleKeyDown);
|
|
|
getCategoryListTreeFn();
|
|
|
if(publishId.value){
|
|
|
getDetail();
|
|
|
@@ -330,6 +373,20 @@ const getDetail = () => {
|
|
|
});
|
|
|
})
|
|
|
};
|
|
|
+// 在 script setup 中添加
|
|
|
+const isFullscreen = ref(false);
|
|
|
+
|
|
|
+// 切换全屏的方法
|
|
|
+const toggleFullscreen = () => {
|
|
|
+ isFullscreen.value = !isFullscreen.value;
|
|
|
+
|
|
|
+ if (isFullscreen.value) {
|
|
|
+ // 进入全屏时可能需要调整编辑器焦点
|
|
|
+ nextTick(() => {
|
|
|
+ // 如果 BlockNoteEditor 有 focus 方法,可以调用
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.workflow-add{
|
|
|
@@ -355,3 +412,63 @@ const getDetail = () => {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.editor-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .editor-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 15px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-bottom: 1px solid #dcdfe6;
|
|
|
+
|
|
|
+ .editor-title {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exit-fullscreen-btn {
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .fullscreen-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ // .exit-fullscreen-btn{
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ .fullscreen-btn {
|
|
|
+ bottom: 10px;
|
|
|
+ top: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.fullscreen {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: white;
|
|
|
+ z-index: 9999;
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .blocknote-editor {
|
|
|
+ height: calc(100vh - 100px) !important; // 减去头部和按钮的高度
|
|
|
+ }
|
|
|
+ .editor-content {
|
|
|
+ height: calc(100vh - 100px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|