Bladeren bron

```
feat(BlockNoteEditorDialog): 重构笔记编辑对话框界面

- 添加国际化支持,使用动态标题和按钮文本
- 优化表单布局,调整标签位置和样式
- 更新输入框样式,添加大号尺寸和字数限制
- 调整按钮布局,使用居中对齐样式
- 添加编辑器内容监听,同步到表单数据

style(BlockNoteEditor): 移除编辑器边框样式

- 注释掉原有的边框样式以支持新的设计需求

chore(i18n): 添加取消和确定国际化文本

- 在中英文语言包中添加取消和确定的翻译文本

style(WorkflowAdd): 更新编辑器边框样式

- 为工作流编辑器添加边框类以保持一致性

style(global): 统一边框颜色

- 将全局边框颜色从#eeeeee更新为#e5e7eb以保持设计一致性
```

zhangningning 1 maand geleden
bovenliggende
commit
7afa984d31

+ 1 - 1
src/components/BlockNoteEditor.vue

@@ -48,7 +48,7 @@ watch(() => props.modelValue, (newVal) => {
 
 <style scoped>
 .blocknote-container {
-  border: 1px solid #e5e7eb;
+  /* border: 1px solid #e5e7eb; */
   border-radius: 6px;
   padding: 12px 0;
   min-height: 250px;

+ 39 - 12
src/components/BlockNoteEditorDialog.vue

@@ -1,37 +1,50 @@
 <template>
   <el-dialog
     v-model="dialogVisible"
-    title="编辑学习笔记"
+    :title="title + $t('common.xuxibiji')"
     width="800"
   >
-    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
-      <el-form-item label="笔记名称" prop="title">
-        <el-input v-model="form.title" placeholder="请输入笔记名称" />
+    <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="edit_note">
+      <el-form-item label="" prop="title">
+        <el-input v-model="form.title" placeholder="请输入标题" size="large" show-word-limit maxlength="20"/>
       </el-form-item>
-      <el-form-item label="笔记内容" prop="content">
-        <BlockNoteEditor v-model="form.content" />
+      <el-form-item label="" prop="content">
+        <BlockNoteEditor v-model="editorContent" />
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button type="primary" @click="submitForm">保存</el-button>
-      <el-button @click="dialogVisible = false">取消</el-button>
+      <div class="flex-center">
+        <div>
+          <el-button @click="dialogVisible = false" type="primary" plain>{{ $t('common.cancel') }}</el-button>
+          <el-button type="primary" @click="submitForm" class="gradient">{{ $t('common.confirm') }}</el-button>
+        </div>
+      </div>
     </template>
   </el-dialog>
 </template>
 <script setup>
 import BlockNoteEditor from '@/components/BlockNoteEditor.vue'
-import { ref, reactive } from 'vue'
+import { ref, reactive, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n' 
+const { t } = useI18n()
 
 
 
-const dialogVisible = ref(false)
+const dialogVisible = ref(true)
+const title = ref(t('common.add'));
+// 编辑器内容
+const editorContent = ref(null);
 const form = reactive({
   title: '',
   content: ''
 })
+watchEffect(() => {
+  // 将编辑器内容赋值给表单的workflowContent
+  form.content = JSON.stringify(editorContent.value);
+})
 const rules = {
-  title: [{ required: true, message: '请输入笔记名称', trigger: 'blur' }],
-  content: [{ required: true, message: '请输入笔记内容', trigger: 'blur' }]
+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入内容', trigger: 'change' }]
 }
 const submitForm = async () => {
   
@@ -44,3 +57,17 @@ defineExpose({
   openDialog
 });
 </script>
+<style lang="scss">
+.edit_note{
+  
+  .el-input--large .el-input__wrapper {
+    border: none !important;
+    box-shadow: none !important;
+    border-top:1px solid #e5e7eb !important;
+    border-bottom:1px solid #e5e7eb !important;
+  }
+  .el-input__inner{
+    font-size: 18px !important;
+  }
+}
+</style>

+ 2 - 0
src/locales/en.js

@@ -26,6 +26,8 @@ export default {
     edit: 'Edit',
     delete: 'Delete',
     genxinyu: 'Updated at',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
   },
   login: {
     smsLogin: 'SMS Login',

+ 2 - 0
src/locales/zh-CN.js

@@ -27,6 +27,8 @@ export default {
     edit: '编辑',
     delete: '删除',
     genxinyu: '更新于',
+    cancel: '取消',
+    confirm: '确定',
   },
   login: {
     smsLogin: '短信登录',

+ 1 - 1
src/pages/WorkflowAdd.vue

@@ -85,7 +85,7 @@
             />
           </el-form-item>
           <el-form-item label="详情" prop="workflowContent">
-            <BlockNoteEditor v-model="editorContent" :editable="true"/>
+            <BlockNoteEditor v-model="editorContent" :editable="true" class="border"/>
           </el-form-item>
         </div>
       </div>

+ 1 - 1
src/styles/index.scss

@@ -480,7 +480,7 @@ wx-image{
 	}
 }
 .border{
-	border: 1px solid #eeeeee;
+	border: 1px solid #e5e7eb;
 }
 .border-bottom{
 	border-bottom: 1px solid #eeeeee;