Procházet zdrojové kódy

```
feat(WorkflowAdd): 添加全屏编辑功能

- 为工作流添加页面的详情编辑器增加全屏模式
- 实现全屏/退出全屏切换功能,包含ESC键快捷操作
- 添加中英文国际化支持(exitFullscreen, fullscreenEdit)
- 调整BlockNoteEditor样式以支持全屏显示
- 在全屏模式下隐藏其他表单项,专注内容编辑
```

zhangningning před 1 měsícem
rodič
revize
3e92bedcf0

+ 2 - 0
src/components/BlockNoteEditor.vue

@@ -52,6 +52,8 @@ watch(() => props.modelValue, (newVal) => {
   padding: 12px 0;
   min-height: 250px;
   width: 100%;
+  height: 100%;
+  overflow-y: auto;
 }
 :deep(.blocknote-editor) {
   font-size: 16px;

+ 2 - 0
src/locales/en.js

@@ -107,6 +107,8 @@ export default {
     modify:"Modify",
     paySuccess:"Pay Success",
     rmb:"RMB",
+    exitFullscreen:"Exit Fullscreen",
+    fullscreenEdit:"Fullscreen Edit",
   },
   login: {
     smsLogin: 'Captcha Login',

+ 3 - 1
src/locales/zh-CN.js

@@ -112,7 +112,9 @@ export default {
     addTags:'添加标签',
     modify:"修改",
     paySuccess:"支付成功",
-    rmb:'人民币'
+    rmb:'人民币',
+    exitFullscreen:"退出全屏",
+    fullscreenEdit:"全屏编辑",
   },
   login: {
     smsLogin: '验证码登录',

+ 126 - 9
src/pages/WorkflowAdd.vue

@@ -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>