From f33be71b79d523bb83e0a4c0b6f7eccebc340f4d Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 12 May 2025 17:14:10 +0800 Subject: [PATCH 01/17] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E9=87=8D?= =?UTF-8?q?=E7=BD=AE=20ele=20vxe=20CellOperation=20=E4=B8=AD=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E9=BB=98=E8=AE=A4=E5=86=85=E8=BE=B9=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/views/system/menu/data.ts | 3 +-- apps/web-ele/src/adapter/vxe-table.ts | 7 ++++++- apps/web-ele/src/views/system/menu/data.ts | 3 +-- apps/web-ele/src/views/system/user/data.ts | 2 +- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/web-antd/src/views/system/menu/data.ts b/apps/web-antd/src/views/system/menu/data.ts index 86369fed7..d4c6d9711 100644 --- a/apps/web-antd/src/views/system/menu/data.ts +++ b/apps/web-antd/src/views/system/menu/data.ts @@ -323,10 +323,9 @@ export function useGridColumns( { field: 'operation', title: '操作', - align: 'right', minWidth: 200, fixed: 'right', - headerAlign: 'center', + align: 'center', showOverflow: false, cellRender: { attrs: { diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts index dde99eebc..e6f1f242c 100644 --- a/apps/web-ele/src/adapter/vxe-table.ts +++ b/apps/web-ele/src/adapter/vxe-table.ts @@ -135,7 +135,12 @@ setupVbenVxeTable({ // 注册表格的操作按钮渲染器 cellRender: { name: 'CellOperation', options: ['edit', 'delete'] } vxeUI.renderer.add('CellOperation', { renderTableDefault({ attrs, options, props }, { column, row }) { - const defaultProps = { size: 'small', type: 'primary', ...props }; + const defaultProps = { + size: 'small', + type: 'primary', + class: '!p-0', + ...props, + }; let align = 'end'; switch (column.align) { case 'center': { diff --git a/apps/web-ele/src/views/system/menu/data.ts b/apps/web-ele/src/views/system/menu/data.ts index 86369fed7..d4c6d9711 100644 --- a/apps/web-ele/src/views/system/menu/data.ts +++ b/apps/web-ele/src/views/system/menu/data.ts @@ -323,10 +323,9 @@ export function useGridColumns( { field: 'operation', title: '操作', - align: 'right', minWidth: 200, fixed: 'right', - headerAlign: 'center', + align: 'center', showOverflow: false, cellRender: { attrs: { diff --git a/apps/web-ele/src/views/system/user/data.ts b/apps/web-ele/src/views/system/user/data.ts index a16951c35..387599a57 100644 --- a/apps/web-ele/src/views/system/user/data.ts +++ b/apps/web-ele/src/views/system/user/data.ts @@ -317,7 +317,7 @@ export function useGridColumns( { field: 'operation', title: '操作', - minWidth: 250, + minWidth: 130, fixed: 'right', align: 'center', cellRender: { From 097bef5e6df5d161901b6c9e20fd81fc11232fd1 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 12 May 2025 17:52:45 +0800 Subject: [PATCH 02/17] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20ele=20vxe=20C?= =?UTF-8?q?ellOperation=20=E4=B8=AD=E6=96=87=E6=9C=AC=E6=8C=89=E9=92=AE=20?= =?UTF-8?q?text=20=E5=B1=9E=E6=80=A7=E9=9C=80=E8=A6=81=E5=B8=83=E5=B0=94?= =?UTF-8?q?=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-ele/src/adapter/vxe-table.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts index e6f1f242c..066852264 100644 --- a/apps/web-ele/src/adapter/vxe-table.ts +++ b/apps/web-ele/src/adapter/vxe-table.ts @@ -196,6 +196,7 @@ setupVbenVxeTable({ { ...props, ...opt, + text: true, icon: undefined, onClick: listen ? () => From 29d16c83cd7005f4dc796f43dc24aaf00f99248e Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 12 May 2025 17:57:43 +0800 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=E5=AF=8C=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-ele/package.json | 4 + apps/web-ele/src/adapter/component/index.ts | 3 + .../web-ele/src/components/tinymce/editor.vue | 357 ++++++++++++++++++ apps/web-ele/src/components/tinymce/helper.ts | 85 +++++ .../src/components/tinymce/img-upload.vue | 89 +++++ apps/web-ele/src/components/tinymce/index.ts | 1 + .../web-ele/src/components/tinymce/tinymce.ts | 17 + 7 files changed, 556 insertions(+) create mode 100644 apps/web-ele/src/components/tinymce/editor.vue create mode 100644 apps/web-ele/src/components/tinymce/helper.ts create mode 100644 apps/web-ele/src/components/tinymce/img-upload.vue create mode 100644 apps/web-ele/src/components/tinymce/index.ts create mode 100644 apps/web-ele/src/components/tinymce/tinymce.ts diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json index a51f5a9b6..ccd69cf02 100644 --- a/apps/web-ele/package.json +++ b/apps/web-ele/package.json @@ -26,6 +26,7 @@ "#/*": "./src/*" }, "dependencies": { + "@tinymce/tinymce-vue": "catalog:", "@vben/access": "workspace:*", "@vben/common-ui": "workspace:*", "@vben/constants": "workspace:*", @@ -41,8 +42,11 @@ "@vben/types": "workspace:*", "@vben/utils": "workspace:*", "@vueuse/core": "catalog:", + "cropperjs": "catalog:", + "crypto-js": "catalog:", "dayjs": "catalog:", "element-plus": "catalog:", + "highlight.js": "catalog:", "pinia": "catalog:", "vue": "catalog:", "vue-router": "catalog:" diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts index 470caaa7a..711529837 100644 --- a/apps/web-ele/src/adapter/component/index.ts +++ b/apps/web-ele/src/adapter/component/index.ts @@ -21,6 +21,7 @@ import { $t } from '@vben/locales'; import { ElNotification } from 'element-plus'; +import { Tinymce as RichTextarea } from '#/components/tinymce'; import { FileUpload, ImageUpload } from '#/components/upload'; const ElButton = defineAsyncComponent(() => @@ -175,6 +176,7 @@ export type ComponentType = | 'Input' | 'InputNumber' | 'RadioGroup' + | 'RichTextarea' | 'Select' | 'Space' | 'Switch' @@ -321,6 +323,7 @@ async function initComponentAdapter() { Upload: ElUpload, FileUpload, ImageUpload, + RichTextarea, }; // 将组件注册到全局共享状态中 diff --git a/apps/web-ele/src/components/tinymce/editor.vue b/apps/web-ele/src/components/tinymce/editor.vue new file mode 100644 index 000000000..cb874f6c9 --- /dev/null +++ b/apps/web-ele/src/components/tinymce/editor.vue @@ -0,0 +1,357 @@ + + + + + + diff --git a/apps/web-ele/src/components/tinymce/helper.ts b/apps/web-ele/src/components/tinymce/helper.ts new file mode 100644 index 000000000..1f98dda46 --- /dev/null +++ b/apps/web-ele/src/components/tinymce/helper.ts @@ -0,0 +1,85 @@ +const validEvents = new Set([ + 'onActivate', + 'onAddUndo', + 'onBeforeAddUndo', + 'onBeforeExecCommand', + 'onBeforeGetContent', + 'onBeforePaste', + 'onBeforeRenderUI', + 'onBeforeSetContent', + 'onBlur', + 'onChange', + 'onClearUndos', + 'onClick', + 'onContextMenu', + 'onCopy', + 'onCut', + 'onDblclick', + 'onDeactivate', + 'onDirty', + 'onDrag', + 'onDragDrop', + 'onDragEnd', + 'onDragGesture', + 'onDragOver', + 'onDrop', + 'onExecCommand', + 'onFocus', + 'onFocusIn', + 'onFocusOut', + 'onGetContent', + 'onHide', + 'onInit', + 'onKeyDown', + 'onKeyPress', + 'onKeyUp', + 'onLoadContent', + 'onMouseDown', + 'onMouseEnter', + 'onMouseLeave', + 'onMouseMove', + 'onMouseOut', + 'onMouseOver', + 'onMouseUp', + 'onNodeChange', + 'onObjectResized', + 'onObjectResizeStart', + 'onObjectSelected', + 'onPaste', + 'onPostProcess', + 'onPostRender', + 'onPreProcess', + 'onProgressState', + 'onRedo', + 'onRemove', + 'onReset', + 'onSaveContent', + 'onSelectionChange', + 'onSetAttrib', + 'onSetContent', + 'onShow', + 'onSubmit', + 'onUndo', + 'onVisualAid', +]); + +const isValidKey = (key: string) => validEvents.has(key); + +export const bindHandlers = ( + initEvent: Event, + listeners: any, + editor: any, +): void => { + Object.keys(listeners) + .filter((element) => isValidKey(element)) + .forEach((key: string) => { + const handler = listeners[key]; + if (typeof handler === 'function') { + if (key === 'onInit') { + handler(initEvent, editor); + } else { + editor.on(key.slice(2), (e: any) => handler(e, editor)); + } + } + }); +}; diff --git a/apps/web-ele/src/components/tinymce/img-upload.vue b/apps/web-ele/src/components/tinymce/img-upload.vue new file mode 100644 index 000000000..8aefc08a7 --- /dev/null +++ b/apps/web-ele/src/components/tinymce/img-upload.vue @@ -0,0 +1,89 @@ + + + + diff --git a/apps/web-ele/src/components/tinymce/index.ts b/apps/web-ele/src/components/tinymce/index.ts new file mode 100644 index 000000000..c277d781d --- /dev/null +++ b/apps/web-ele/src/components/tinymce/index.ts @@ -0,0 +1 @@ +export { default as Tinymce } from './editor.vue'; diff --git a/apps/web-ele/src/components/tinymce/tinymce.ts b/apps/web-ele/src/components/tinymce/tinymce.ts new file mode 100644 index 000000000..45a867b61 --- /dev/null +++ b/apps/web-ele/src/components/tinymce/tinymce.ts @@ -0,0 +1,17 @@ +// Any plugins you want to setting has to be imported +// Detail plugins list see https://www.tiny.cloud/docs/plugins/ +// Custom builds see https://www.tiny.cloud/download/custom-builds/ +// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration + +export const plugins = + 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons accordion'; + +// 和 vben2.0 不同,从 https://www.tiny.cloud/ 拷贝 Vue 部分,然后去掉 importword exportword exportpdf | math 部分,并额外增加最后一行(来自 vben2.0 差异的部分) +export const toolbar = + 'undo redo | accordion accordionremove | \\\n' + + ' blocks fontfamily fontsize | bold italic underline strikethrough | \\\n' + + ' align numlist bullist | link image | table media | \\\n' + + ' lineheight outdent indent | forecolor backcolor removeformat | \\\n' + + ' charmap emoticons | code fullscreen preview | save print | \\\n' + + ' pagebreak anchor codesample | ltr rtl | \\\n' + + ' hr searchreplace alignleft aligncenter alignright blockquote subscript superscript'; From 5e31d48d22fb7bd0c63b016f9119ead08715af84 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 12 May 2025 18:06:33 +0800 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20ele=20=E6=96=B0=E5=A2=9E=20Textar?= =?UTF-8?q?ea=20=E6=96=87=E6=9C=AC=E5=9F=9F=E7=BB=84=E4=BB=B6=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-ele/src/adapter/component/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts index 711529837..44072273f 100644 --- a/apps/web-ele/src/adapter/component/index.ts +++ b/apps/web-ele/src/adapter/component/index.ts @@ -180,6 +180,7 @@ export type ComponentType = | 'Select' | 'Space' | 'Switch' + | 'Textarea' | 'TimePicker' | 'TreeSelect' | 'Upload' @@ -323,6 +324,10 @@ async function initComponentAdapter() { Upload: ElUpload, FileUpload, ImageUpload, + Textarea: withDefaultPlaceholder(ElInput, 'input', { + rows: 3, + type: 'textarea', + }), RichTextarea, }; From 47716d626456491253f8108a2bd18f77e29cd3cd Mon Sep 17 00:00:00 2001 From: YunaiV Date: Mon, 12 May 2025 19:31:49 +0800 Subject: [PATCH 05/17] =?UTF-8?q?review=EF=BC=9A=E3=80=90ep=20=E5=85=A8?= =?UTF-8?q?=E5=B1=80=E3=80=91=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/user-select-modal/user-select-modal.vue | 1 + apps/web-antd/src/layouts/components/help.vue | 1 + apps/web-antd/src/layouts/components/tenant-dropdown.vue | 1 + apps/web-ele/src/adapter/vxe-table.ts | 4 ++++ apps/web-ele/src/components/doc-alert/doc-alert.vue | 1 + apps/web-ele/src/store/dict.ts | 2 +- apps/web-ele/src/views/system/tenant/data.ts | 1 + 7 files changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue index 6b03d3086..105267b70 100644 --- a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue +++ b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue @@ -1,4 +1,5 @@ +