From cefd212b6e910396c7d7b2805f4a56de6bb72605 Mon Sep 17 00:00:00 2001 From: Odboy Date: Tue, 3 Feb 2026 21:26:00 +0800 Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B1=9E=E6=80=A7=E5=91=BD=E5=90=8D=E5=B9=B6?= =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 CuteCodeEditor 和 CuteRichTextEditor 的 readOnly 属性改为 readonly - 为 CuteTextAreaInput 组件添加 value 属性并设为必填 - 为多个组件演示页面的表格列添加固定宽度 - 更新 CuteCodeEditorDemo 和 CuteRichTextEditorDemo 中的 API 文档 - 新增 CuteHorizontalScrollBarDemo 和 CuteTextAreaInputDemo 演示页面 - 重构 CuteOtherDemo 页面移除部分组件演示 - 完善 index.vue 中的组件导入和注册信息 --- .../views/components/dev/CuteCodeEditor.vue | 4 +- .../components/dev/CuteRichTextEditor.vue | 4 +- .../components/dev/CuteTextAreaInput.vue | 10 +++- .../views/componentsDemo/CuteOtherDemo.vue | 24 --------- .../componentsDemo/dev/CuteButtonDemo.vue | 4 +- .../componentsDemo/dev/CuteCodeEditorDemo.vue | 6 +-- .../dev/CuteHorizontalScrollBarDemo.vue | 45 ++++++++++++++++ .../views/componentsDemo/dev/CuteLinkDemo.vue | 4 +- .../componentsDemo/dev/CuteMarkdownDemo.vue | 4 +- .../componentsDemo/dev/CuteOneKeyCopyDemo.vue | 4 +- .../dev/CuteRichTextEditorDemo.vue | 31 +++++------ .../dev/CuteSectionTitleDemo.vue | 4 +- .../dev/CuteTextAreaInputDemo.vue | 51 +++++++++++++++++++ .../dev/CuteVerticalScrollBarDemo.vue | 45 ++++++++++++++++ .../componentsDemo/dev/KitDialogDemo.vue | 4 +- .../componentsDemo/dev/KitMessageDemo.vue | 4 +- .../dev/KitNotificationDemo.vue | 4 +- .../componentsDemo/dev/KitWsClientDemo.vue | 4 +- .../src/views/componentsDemo/index.vue | 9 +++- 19 files changed, 199 insertions(+), 66 deletions(-) create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteTextAreaInputDemo.vue create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue diff --git a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue index e21951d5..152aab40 100644 --- a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue +++ b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue @@ -45,7 +45,7 @@ export default { required: false, default: '500px' }, - readOnly: { + readonly: { type: Boolean, required: false, default: false @@ -95,7 +95,7 @@ export default { if (this.content) { this.editor.setValue(this.content) } - this.editor.setOption('readOnly', this.readOnly) + this.editor.setOption('readOnly', this.readonly) this.editor.on('change', cm => { this.$emit('change', cm.getValue()) }) diff --git a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue index c1d4e930..1357bd77 100644 --- a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue +++ b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue @@ -39,7 +39,7 @@ export default { name: 'CuteRichTextEditor', components: { Toolbar, Editor }, props: { - readOnly: { + readonly: { type: Boolean, required: false, default: false @@ -56,7 +56,7 @@ export default { toolbarConfig: {}, editorConfig: { placeholder: '请输入内容...', - readOnly: that.readOnly, + readOnly: that.readonly, autoFocus: true, scroll: false, // 会造成卡顿 diff --git a/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue index 4778028f..23d6c017 100644 --- a/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue +++ b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue @@ -29,20 +29,28 @@ export default { props: { disabled: { type: Boolean, + required: false, default: false }, readonly: { type: Boolean, + required: false, default: false }, maxlength: { type: Number, + required: false, default: 120 + }, + value: { + type: String, + required: true, + default: '' } }, data() { return { - content: '' + content: this.value } }, methods: { diff --git a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue index f422a1af..cec2db7c 100644 --- a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue +++ b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue @@ -13,25 +13,11 @@ - - -
模拟超长内容
- - - -
模拟超高内容
- - - - - - - @@ -34,22 +35,22 @@ export default { content: '', apiData: [ { name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' }, - { name: 'read-only', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' }, + { name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' }, { name: 'change', remark: '内容改变回调事件', type: '(html, text) => {}', defaultValue: '-', required: '否' }, { name: 'focus', remark: '编辑器获得焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' }, { name: 'blur', remark: '编辑器失去焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' } ], methodData: [ - { name: 'setHtml', remark: '设置html内容。如果是 editor.getHtml() 获取的 HTML 格式，可以完美解析', inputArgs: 'html' }, - { name: 'getHtml', remark: '获取html内容', inputArgs: '' }, - { name: 'clear', remark: '清空', inputArgs: '' }, - { name: 'undo', remark: '撤销', inputArgs: '' }, - { name: 'redo', remark: '重做', inputArgs: '' }, - { name: 'getSelectionText', remark: '获取选中的文本', inputArgs: '' }, - { name: 'deleteFragment', remark: '删除选中的内容', inputArgs: '' }, - { name: 'getFragment', remark: '获取选中的内容。JSON格式', inputArgs: '' }, - { name: 'getText', remark: '获取文本内容', inputArgs: '' }, - { name: 'insertText', remark: '在选取插入文本', inputArgs: '' } + { name: 'setHtml', remark: '设置html内容。如果是 editor.getHtml() 获取的 HTML 格式，可以完美解析', inputArgs: 'html', outArgs: '-' }, + { name: 'getHtml', remark: '获取html内容', inputArgs: '-', outArgs: 'html' }, + { name: 'clear', remark: '清空', inputArgs: '-', outArgs: '-' }, + { name: 'undo', remark: '撤销', inputArgs: '-', outArgs: '-' }, + { name: 'redo', remark: '重做', inputArgs: '-', outArgs: '-' }, + { name: 'getSelectionText', remark: '获取选中的文本', inputArgs: '-', outArgs: 'text' }, + { name: 'deleteFragment', remark: '删除选中的内容', inputArgs: '-', outArgs: '-' }, + { name: 'getFragment', remark: '获取选中的内容。JSON格式', inputArgs: '-', outArgs: 'json' }, + { name: 'getText', remark: '获取文本内容', inputArgs: '-', outArgs: 'text' }, + { name: 'insertText', remark: '在选区插入文本', inputArgs: 'text', outArgs: '-' } ] } }, diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue index 52670786..e2b7aa80 100644 --- a/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue +++ b/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue @@ -21,8 +21,8 @@

API

- - + + diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteTextAreaInputDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteTextAreaInputDemo.vue new file mode 100644 index 00000000..f1ffbdc5 --- /dev/null +++ b/cutejava-front/src/views/componentsDemo/dev/CuteTextAreaInputDemo.vue @@ -0,0 +1,51 @@ + + + diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue new file mode 100644 index 00000000..de6c58d1 --- /dev/null +++ b/cutejava-front/src/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue @@ -0,0 +1,45 @@ + + + diff --git a/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue index bd6c9d57..ed070e13 100644 --- a/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue +++ b/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue @@ -16,8 +16,8 @@

快捷调用

- - + + diff --git a/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue index e120b301..9d41d9ec 100644 --- a/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue +++ b/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue @@ -15,8 +15,8 @@

快捷调用

- - + + diff --git a/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue index 5bb1b9e0..eefa6296 100644 --- a/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue +++ b/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue @@ -19,8 +19,8 @@

快捷调用

- - + + diff --git a/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue index 46055d67..f64e1b66 100644 --- a/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue +++ b/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue @@ -19,8 +19,8 @@

快捷调用

- - + + diff --git a/cutejava-front/src/views/componentsDemo/index.vue b/cutejava-front/src/views/componentsDemo/index.vue index 85aef3d4..5816435f 100644 --- a/cutejava-front/src/views/componentsDemo/index.vue +++ b/cutejava-front/src/views/componentsDemo/index.vue @@ -15,11 +15,14 @@ + + + - + @@ -76,10 +79,14 @@ import CuteOneKeyCopyDemo from '@/views/componentsDemo/dev/CuteOneKeyCopyDemo.vu import CuteMarkdownDemo from '@/views/componentsDemo/dev/CuteMarkdownDemo.vue' import CuteCodeEditorDemo from '@/views/componentsDemo/dev/CuteCodeEditorDemo.vue' import CuteRichTextEditorDemo from '@/views/componentsDemo/dev/CuteRichTextEditorDemo.vue' +import CuteHorizontalScrollBarDemo from '@/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue' +import CuteTextAreaInputDemo from '@/views/componentsDemo/dev/CuteTextAreaInputDemo.vue' export default { name: 'SystemComponents', components: { + CuteTextAreaInputDemo, + CuteHorizontalScrollBarDemo, CuteRichTextEditorDemo, CuteCodeEditorDemo, CuteMarkdownDemo,