fix: 共享到商店侧栏编辑器高度异常问题修复 --story=121000017

# Reviewed, transaction id: 27930
TencentBlueKing · Dec 26, 2024 · 58b16b0 · 58b16b0
1 parent e22d10e
commit 58b16b0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/frontend/desktop/src/config/i18n/cn.js b/frontend/desktop/src/config/i18n/cn.js
@@ -1821,7 +1821,7 @@ const cn = {
     '请输入场景标识': '请输入场景标识',
     '请选择场景分类': '请选择场景分类',
     '场景使用者通过标签可以快速找到同一类场景': '场景使用者通过标签可以快速找到同一类场景',
-    '申明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式': '申明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式',
+    '声明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式': '声明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式',
     '请输入标签，enter保存': '请输入标签，enter保存',
     '将清空输入信息': '将清空输入信息',
     '【n】标签已存在': '【{n}】标签已存在',
@@ -1830,7 +1830,8 @@ const cn = {
     '请输入群 ID，多个 ID 以分号隔开': '请输入群 ID，多个 ID 以分号隔开',
     '当前环境配置周期任务间隔不低于 n 分钟，如有特殊需求请联系管理员配置': '当前环境配置周期任务间隔不低于 {n} 分钟，如有特殊需求请联系管理员配置',
     '仅支持上传.mp4,.mov文件': '仅支持上传.mp4,.mov文件',
-    '选择视频文件': '选择视频文件'
+    '选择视频文件': '选择视频文件',
+    '上传视频': '上传视频'
 }
 
 export default cn
diff --git a/frontend/desktop/src/config/i18n/en.js b/frontend/desktop/src/config/i18n/en.js
@@ -1855,7 +1855,7 @@ const en = {
     '请输入场景标识': 'Please enter the scene identifier',
     '请选择场景分类': 'Please select the scene category',
     '场景使用者通过标签可以快速找到同一类场景': 'Scene users can quickly find scenes of the same category through tags',
-    '申明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式': 'Declare the operational risk level of the scene to aid users in deciding how to use the scene',
+    '声明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式': 'Declare the operational risk level of the scene to aid users in deciding how to use the scene',
     '请输入标签，enter保存': 'Please enter a tag and press Enter to save',
     '将清空输入信息': 'This will clear the input information',
     '【n】标签已存在': 'The tag [{n}] already exists',
@@ -1864,7 +1864,8 @@ const en = {
     '请输入群 ID，多个 ID 以分号隔开': 'Please enter group IDs, separated by semicolons if there are multiple IDs',
     '当前环境配置周期任务间隔不低于 n 分钟，如有特殊需求请联系管理员配置': 'In the current environment, the interval for scheduled tasks is no less than {n} minutes. If you have special requirements, please contact the administrator for configuration',
     '仅支持上传.mp4,.mov文件': 'Only .mp4 and .mov files are supported for upload',
-    '选择视频文件': 'Select video file'
+    '选择视频文件': 'Select video file',
+    '上传视频': 'Upload Video'
 }
 
 export default en
diff --git a/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedTplSlider.vue b/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedTplSlider.vue
@@ -107,7 +107,7 @@
                     property="risk_level"
                     :required="true"
                     :rules="rules.required"
-                    :desc="$t('申明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式')">
+                    :desc="$t('声明该场景的运维操作风险级别，以便场景使用者决策场景的使用方式')">
                     <bk-radio-group v-model="formData.risk_level">
                         <bk-radio
                             v-for="item in riskLevelList"
@@ -117,7 +117,7 @@
                         </bk-radio>
                     </bk-radio-group>
                 </bk-form-item>
-                <bk-form-item :label="$t('使用说明')">
+                <bk-form-item :label="$t('使用说明')" class="editor-container">
                     <MarkdownEditor v-model="formData.usage_content.content"></MarkdownEditor>
                 </bk-form-item>
             </bk-form>
@@ -436,6 +436,11 @@
                     font-size: 14px;
                 }
             }
+            .bk-form {
+                display: flex;
+                flex-direction: column;
+                height: calc(100% - 60px);
+            }
             .bk-button-group {
                 button {
                     width: 216px;
@@ -472,6 +477,12 @@
                 content: attr(data-placeholder);
                 color: #c4c6cc;
             }
+            .editor-container {
+                flex: 1;
+                .bk-form-content {
+                    height: calc(100% - 32px);
+                }
+            }
         }
         .bk-sideslider-footer {
             padding-left: 24px;

diff --git a/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/markdownEditor/editor.vue b/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/markdownEditor/editor.vue
@@ -76,14 +76,15 @@
         mounted () {
             setTimeout(() => {
                 const videoTool = {
-                    name: '上传视频',
+                    name: this.$t('上传视频'),
                     el: this.$refs.uploadVideoBtn,
                     tooltip: 'Insert Video'
                 }
                 const editorRef = this.$refs.editorRef
+                const height = Math.max(editorRef.clientHeight || 0, 450) + 'px'
                 this.editor = new Editor({
                     el: editorRef,
-                    height: Math.max(editorRef.clientHeight, 450).toString() + 'px',
+                    height,
                     initialEditType: 'markdown',
                     previewStyle: 'tab',
                     initialValue: this.value,