yui-image-editor 1.0.0

package/src/assets/variable.scss

@@ -0,0 +1,15 @@
+// src/styles/variable.scss
+// 示例：全局颜色变量
+$primary-color: #165DFF;
+$success-color: #36CFC9;
+$warning-color: #FF7D00;
+$error-color: #F53F3F;
+// 示例：全局字体变量
+$font-size-base: 14px;
+$font-size-large: 16px;
+$font-size-small: 12px;
+// 示例：全局间距变量
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;

package/src/components/ImageEditor/index.ts

@@ -0,0 +1,220 @@
+export const zhLocale = {
+  // 核心菜单
+  'Crop': '裁剪',
+  'Rotate': '旋转',
+  'Flip': '翻转',
+  'Draw': '涂鸦',
+  'Shape': '形状标注',
+  'Icon': '图标标注',
+  'Text': '文字标注',
+  'Mask': '蒙版',
+  'Filter': '滤镜',
+  'Resize': '调整尺寸',
+  'Undo': '撤销',
+  'Redo': '重做',
+  'Delete': '删除',
+  'Save': '保存',
+  'Load': '加载图片',
+  'Download': '下载',
+  'Reset': '重置',
+  'Cancel': '取消',
+  'OK': '确定',
+  'Apply': '应用',
+  'Close': '关闭',
+  // 裁剪相关
+  'Free': '自由裁剪',
+  'Original': '原始比例',
+  'Square': '正方形',
+  '4:3': '4:3',
+  '3:4': '3:4',
+  '16:9': '16:9',
+  '9:16': '9:16',
+  'Custom': '自定义比例',
+  'Width': '宽度',
+  'Height': '高度',
+  'Ratio': '比例',
+  'Lock ratio': '锁定比例',
+  'Unlock ratio': '解锁比例',
+  // 旋转/翻转
+  'Rotate CW': '顺时针旋转',
+  'Rotate CCW': '逆时针旋转',
+  'Flip X': '水平翻转',
+  'Flip Y': '垂直翻转',
+  // 形状/涂鸦
+  'Rectangle': '矩形',
+  'Circle': '圆形',
+  'Triangle': '三角形',
+  'Line': '直线',
+  'Pen': '画笔',
+  'Eraser': '橡皮擦',
+  'Color': '颜色',
+  'Opacity': '透明度',
+  'Fill': '填充',
+  'Stroke': '描边',
+  // 文字编辑
+  'Font': '字体',
+  'Size': '大小',
+  'Align': '对齐',
+  'Left': '左对齐',
+  'Center': '居中',
+  'Right': '右对齐',
+  'Bold': '粗体',
+  'Italic': '斜体',
+  'Underline': '下划线',
+  'Text color': '文字颜色',
+  // 滤镜（含新增项）
+  'Grayscale': '灰度',
+  'Sepia': '怀旧',
+  'Sepia2': '复古2', // 新增
+  'Invert': '反色',
+  'Brightness': '亮度',
+  'Contrast': '对比度',
+  'Saturation': '饱和度',
+  'Hue': '色相',
+  'Blur': '模糊',
+  'Sharpen': '锐化',
+  'Remove White': '去白底', // 新增
+  'Distance': '距离', // 新增
+  'Pixelate': '像素化', // 新增
+  'Color Filter': '色彩滤镜', // 新增
+  'Threshold': '阈值', // 新增
+  'Noise': '杂色/噪点', // 新增（Noise 是「噪点/杂色」滤镜，翻译为「杂色」更符合图片编辑习惯）
+  // 提示/弹窗
+  'Image Loaded': '图片加载完成',
+  'Save image as': '保存图片为',
+  'Are you sure you want to reset?': '确定要重置所有编辑吗？',
+  'Failed to load image': '图片加载失败',
+  'Please select an image': '请选择一张图片',
+  'Image size is too large': '图片尺寸过大',
+  'Minimum size is': '最小尺寸为',
+  'Maximum size is': '最大尺寸为',
+  // 其他
+  'Zoom': '缩放',
+  'Zoom In': '放大',
+  'Zoom Out': '缩小',
+  'Hand': '抓手',
+  'History': '历史记录',
+  'Delete All': '全部删除',
+  'Fit to canvas': '适配画布',
+  'Actual size': '实际尺寸',
+  'Custom size': '自定义尺寸',
+  'Background color': '背景颜色',
+  'File type': '文件类型',
+  'JPEG': 'JPEG 格式',
+  'PNG': 'PNG 格式',
+  'Quality': '质量',
+  'Duplicate': '复制',
+  'Bring to front': '移到顶层',
+  'Send to back': '移到底层',
+  'Blend mode': '混合模式',
+  // 'Arrow-2': '箭头-2',
+  // 'Arrow-3': '箭头-3',
+  // 'Star-1': '星形-1',
+  // 'Star-2': '星形-2',
+  // 'Polygon': '多边形',
+  'Arrow': '箭头',
+  'Arrow-2': '标注线',
+  'Arrow-3': '箭头3',
+  'Star-1': '指北针',
+  'Star-2': '空军基地',
+  'Polygon': '海军基地',
+  'Location': '定位',
+  'Heart': '爱心',
+  'Bubble': '气泡',
+  'DeleteAll': '删除全部',
+  'ZoomIn': '放大',
+  'ZoomOut':'缩小',
+  'Text size': '文字大小',
+  'Lock Aspect Ratio': '锁定纵横比'
+}
+
+export const customTheme = {
+    // // 主容器背景
+    // 'common.bi.imageEditor': '#1E1E2E',
+    // 'common.bi.backgroundColor': '#2D2D3F',
+    // // 菜单基础样式
+    // 'menu.backgroundColor': '#2D2D3F',
+    // 'menu.border': '1px solid #383850',
+    // // 菜单图标颜色
+    // 'menu.normalIcon.color': '#94A3B8',
+    // 'menu.activeIcon.color': '#36BFFA',
+    // 'menu.disabledIcon.color': '#52526B',
+    // 'menu.hoverIcon.color': '#74B0FF',
+    // // 子菜单样式
+    // 'submenu.backgroundColor': '#2D2D3F',
+    // 'submenu.border': '1px solid #383850',
+    // 'submenu.normalIcon.color': '#94A3B8',
+    // 'submenu.activeIcon.color': '#36BFFA',
+    // // 按钮样式
+    // 'button.backgroundColor': '#383850',
+    // 'button.border': '1px solid #484868',
+    // 'button.color': '#E2E8F0',
+    // 'button.disabledColor': '#52526B',
+    // 'button.hover.backgroundColor': '#484868',
+    // 'button.active.backgroundColor': '#36BFFA',
+    // 'button.active.color': '#FFFFFF',
+    // // 滑块样式
+    // 'range.pointer.color': '#36BFFA',
+    // 'range.bar.color': '#484868',
+    // 'range.subbar.color': '#36BFFA',
+    // 'range.disabledPointer.color': '#52526B',
+    // 'range.disabledBar.color': '#383850',
+    // // 颜色选择器
+    // 'colorpicker.button.border': '1px solid #484868',
+    // 'colorpicker.button.backgroundColor': '#383850',
+    // 'colorpicker.title.color': '#E2E8F0',
+    // // 弹窗样式
+    // 'dialog.backgroundColor': '#2D2D3F',
+    // 'dialog.border': '1px solid #383850',
+    // 'dialog.title.color': '#E2E8F0',
+    // 'dialog.body.color': '#94A3B8',
+    // // 裁剪框
+    // 'cropzone.border': '2px solid #36BFFA',
+    // 'cropzone.handler.color': '#36BFFA',
+    // // 选择框
+    // 'selection.border': '2px solid #36BFFA',
+    // 'selection.handler.color': '#36BFFA',
+    // 'selection.rotatingPoint.color': '#74B0FF',
+
+
+
+    // 'common.bi.image': '',
+    // 'common.bisize.width': '0px',
+    // 'common.bisize.height': '0px',
+    // 'common.backgroundImage': 'none',
+    // 'common.backgroundColor': '#f3f4f6',
+    // 'common.border': '1px solid #333',
+    // //header
+    // 'header.backgroundImage': 'none',
+    // 'header.backgroundColor': '#f3f4f6',
+    // 'header.border': '0px',
+    // // load button
+    // 'loadButton.backgroundColor': '#fff',
+    // 'loadButton.border': '1px solid #ddd',
+    // 'loadButton.color': '#222',
+    // 'loadButton.fontFamily': 'NotoSans, sans-serif',
+    // 'loadButton.fontSize': '12px',
+    // 'loadButton.display': 'none',
+    // // download button
+    // 'downloadButton.backgroundColor': '#fff',
+    // 'downloadButton.border': '1px solid #ddd',
+    // 'downloadButton.color': '#222',
+    // 'downloadButton.fontFamily': 'NotoSans, sans-serif',
+    // 'downloadButton.fontSize': '12px',
+    // 'downloadButton.display': 'none',
+    // // icon default
+    // // submenu primary color
+    // // subment labels
+    // // checkbox style
+    // // rango style
+    // // colorpicker style
+    // 'colorpicker.button.border': '1px solid #1e1e1e',
+    // 'colorpicker.title.color': '#fff',
+    // // 'submenu.normalIcon.path': arrowSvg,
+    // // 'submenu.activeIcon.path': arrowStar,
+    // // 'menu.normalIcon.path': arrowSvg,
+    // // 'menu.activeIcon.path': arrowStar,
+    // // 'menu.disabledIcon.path': arrowSvg,
+    // // 'menu.hoverIcon.path': arrowStar,
+    // // 'icon.arrow': ,
+}

package/src/components/ImageEditor/index.vue

@@ -0,0 +1,344 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div ref="editorContainer" class="editor-container">
+    <div ref="editorRef" class="image-editor-wrapper"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import hjjd from '@/assets/annotation/hjjd.svg';
+import kjjd from '@/assets/annotation/kjjd.svg';
+import zbz from '@/assets/annotation/zbz.svg';
+import type { TuiImageEditor } from '@/types';
+import { SpecialMapTool } from '@/utils/specialMapTool';
+import ImageEditor from 'tui-image-editor';
+import type { Ref } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { customTheme, zhLocale } from './index';
+// ==================== 响应式数据定义 ====================
+const editorRef: Ref<HTMLDivElement | null> = ref(null);
+const editorContainer: Ref<HTMLDivElement | null> = ref(null);
+
+let imageEditor: TuiImageEditor | any = null;
+let specialMapTool: SpecialMapTool | null = null;
+
+const canvasSize = reactive({ width: 0, height: 0 });
+const mousePosition = reactive({ x: 0, y: 0 });
+const elementCount = ref(0);
+const operationStatus = ref<{ message: string; type: 'success' | 'error' | 'info' } | null>(null);
+const updateImageHandler = () => {
+  const imgEl: any = document.querySelectorAll('.tui-image-editor-menu-icon  .tui-image-editor-submenu-item .tie-icon-add-button:first-child .tui-image-editor-button>div')
+  if (imgEl) {
+    imgEl[3].innerHTML = `<img src="${zbz}"/>`
+    imgEl[4].innerHTML = `<img src="${kjjd}"/>`
+    imgEl[5].innerHTML = `<img src="${hjjd}"/>`
+  }
+}
+const addTextHandler = () => {
+  const menuEl = document.querySelector('.tui-image-editor-menu-text .tui-image-editor-submenu-item')
+  const html = `<li class="tie-text-effect-button">
+      <div class="tui-image-editor-button title">
+          <div>
+            <span class="text-icon" >🏷️</span>
+          </div>
+          <label> 标题 </label>
+      </div>
+      <div class="tui-image-editor-button date">
+          <div>
+            <span class="text-icon">🕒</span>
+          </div>
+          <label> 时间 </label>
+      </div>
+      <div class="tui-image-editor-button attached">
+          <div>
+            <span class="text-icon">📋</span>
+          </div>
+          <label> 附图标签 </label>
+      </div>
+  </li>`
+  menuEl?.insertAdjacentHTML('afterbegin', html);
+  menuEl?.addEventListener('click', function (event: any) {
+    const button = event.target.closest('.tui-image-editor-button');
+    if (!button) return;
+    console.log(button,'===buttton')
+    if (button.classList.contains('title')) {
+      // 处理标题逻辑
+      addTitle();
+    } else if (button.classList.contains('date')) {
+      // 处理时间逻辑
+      addTimestamp();
+    } else if (button.classList.contains('attached')) {
+      // 处理附图标签逻辑
+      addFigureLabel();
+    }
+  });
+}
+
+const addShapeHandler = () => {
+  const menuEl = document.querySelector('.tui-image-editor-menu-shape .tui-image-editor-submenu-item')
+  const html = `<li class="tie-shape-button">
+      <div class="tui-image-editor-button comparison">
+            <div>
+              <span class="text-icon gray" > ▢ </span>
+            </div>
+          <label> 对比拉框 </label>
+      </div>
+      <div class="tui-image-editor-button calibration">
+          <div>
+              <span class="text-icon gray"> ⬚ </span>
+            </div>
+          <label> 标定目标 </label>
+      </div>
+  </li>`
+  menuEl?.insertAdjacentHTML('afterbegin', html);
+  menuEl?.addEventListener('click', function (event: any) {
+    const button = event.target.closest('.tui-image-editor-button');
+    if (!button) return;
+    if (button.classList.contains('comparison')) {
+      // 处理标题逻辑
+      addComparisonBox();
+    } else if (button.classList.contains('calibration')) {
+      // 处理时间逻辑
+      addCalibrationTarget();
+    } else if (button.classList.contains('attached')) {
+      // 处理附图标签逻辑
+      // addFigureLabel();
+    }
+  });
+}
+const addMenuResize = () => {
+  const menuEl = document.querySelector('.tui-image-editor-menu-resize')
+
+  const alignMenuEl = document.querySelector('.tui-image-editor-menu-resize .tui-image-editor-submenu-item .tui-image-editor-submenu-align')
+  const statsMenuItem = document.createElement('li');
+  statsMenuItem.className = 'tui-image-editor-submenu-align tui-image-editor-submenu-A4';
+  statsMenuItem.innerHTML = `
+            <div class="tui-image-editor-checkbox-wrap">
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-lock-aspect-ratio tie-lock-aspect-a4">
+                        <span>开启 A4-横版</span>
+                    </label>
+                </div>
+            </div>
+     `
+  if (alignMenuEl?.parentNode) {
+    alignMenuEl.parentNode.insertBefore(statsMenuItem, alignMenuEl.nextSibling);
+  }
+  menuEl?.addEventListener('click', function (event: any) {
+    const button = event.target.closest('.tui-image-editor-submenu-A4');
+    if (!button) return;
+       const checkbox:any = document.querySelector('.tie-lock-aspect-a4');
+      if(checkbox.checked){
+        console.log(checkbox.checked,'===checkbox.checked')
+        const currentImageSize = imageEditor.getCanvasSize();
+        console.log(currentImageSize,'===currentImageSize')
+        const a4Width: number = 1754;
+        const a4Height: number = 1240;
+        imageEditor.resize({
+          width: a4Width,   // 新宽度
+          height: a4Height   // 新高度
+        }).then(() => {
+          console.log('图像尺寸调整成功');
+        }).catch(() => {
+        });
+      }else{
+        imageEditor.resize({
+          width: 800,   // 新宽度
+          height: 600   // 新高度
+        }).then(() => {
+          console.log('图像尺寸调整成功');
+        }).catch(() => {
+        });
+      }
+  });
+}
+//
+// ==================== 生命周期钩子 ====================
+onMounted((): void => {
+  if (!editorRef.value) {
+    showStatus('编辑器容器未找到', 'error');
+    return;
+  }
+
+  try {
+    // 初始化图片编辑器
+    imageEditor = new (ImageEditor as any)(editorRef.value, {
+      includeUI: {
+        loadImage: {
+          path: 'https://picsum.photos/800/600',
+          name: 'DefaultImage'
+        },
+        initMenu: 'icon',
+        menuBarPosition: 'left',
+        locale: zhLocale,
+        theme: customTheme,
+        uiSize: {
+          width: '100%',
+          height: '100%'
+        },
+      },
+      selectionStyle: {
+        cornerSize: 20,
+        rotatingPointOffset: 70
+      },
+      usageStatistics: true,
+      cssMaxHeight: document.documentElement.clientWidth,
+      cssMaxWidth: document.documentElement.clientHeight,
+    }) as TuiImageEditor;
+
+    // 初始化专题图工具
+    specialMapTool = new SpecialMapTool(imageEditor);
+
+    imageEditor.resetZoom()
+    window.onresize = () => {
+      imageEditor.ui.resizeEditor()
+    }
+    // 获取画布尺寸
+    updateCanvasSize();
+    updateImageHandler();
+    addTextHandler();
+    addShapeHandler();
+    addMenuResize();
+    // 监听鼠标移动
+    if (editorContainer.value) {
+      editorContainer.value.addEventListener('mousemove', handleMouseMove);
+    }
+    showStatus('专题图工具已就绪', 'success');
+  } catch (error) {
+    console.error('初始化失败:', error);
+    showStatus('初始化失败，请刷新页面重试', 'error');
+  }
+});
+
+onUnmounted((): void => {
+  if (imageEditor) {
+    try {
+      imageEditor.destroy();
+      imageEditor = null;
+      specialMapTool = null;
+    } catch (error) {
+      console.error('释放编辑器资源失败:', error);
+    }
+  }
+
+  // 移除事件监听
+  if (editorContainer.value) {
+    editorContainer.value.removeEventListener('mousemove', handleMouseMove);
+  }
+});
+
+// ==================== 工具函数 ====================
+const showStatus = (message: string, type: 'success' | 'error' | 'info' = 'info'): void => {
+  operationStatus.value = { message, type };
+};
+
+const updateCanvasSize = (): void => {
+  if (specialMapTool && imageEditor) {
+    const size = imageEditor.getCanvasSize();
+    canvasSize.width = size.width;
+    canvasSize.height = size.height;
+  }
+};
+
+const handleMouseMove = (event: MouseEvent): void => {
+  if (!editorContainer.value) return;
+
+  const rect = editorContainer.value.getBoundingClientRect();
+  mousePosition.x = Math.round(event.clientX - rect.left);
+  mousePosition.y = Math.round(event.clientY - rect.top);
+};
+
+// ==================== 业务函数 ====================
+
+const addTitle = async (): Promise<void> => {
+  if (!specialMapTool) {
+    showStatus('专题图工具未初始化', 'error');
+    return;
+  }
+
+  try {
+    await specialMapTool.addTitle('专题图标题');
+    elementCount.value = (await specialMapTool.getAllElements()).length;
+    showStatus('标题添加成功', 'success');
+  } catch (error) {
+    console.error('添加标题失败:', error);
+    showStatus('添加标题失败', 'error');
+  }
+};
+
+const addTimestamp = async (): Promise<void> => {
+  if (!specialMapTool) {
+    showStatus('专题图工具未初始化', 'error');
+    return;
+  }
+
+  try {
+    await specialMapTool.addTimestamp();
+    elementCount.value = (await specialMapTool.getAllElements()).length;
+    showStatus('时间戳添加成功', 'success');
+  } catch (error) {
+    console.error('添加时间戳失败:', error);
+    showStatus('添加时间戳失败', 'error');
+  }
+};
+
+const addFigureLabel = async (): Promise<void> => {
+  if (!specialMapTool) {
+    showStatus('专题图工具未初始化', 'error');
+    return;
+  }
+
+  try {
+    await specialMapTool.addFigureLabel('附图');
+    elementCount.value = (await specialMapTool.getAllElements()).length;
+    showStatus('附图标签添加成功', 'success');
+  } catch (error) {
+    console.error('添加附图标签失败:', error);
+    showStatus('添加附图标签失败', 'error');
+  }
+};
+
+
+const addComparisonBox = async (): Promise<void> => {
+  if (!specialMapTool) {
+    showStatus('专题图工具未初始化', 'error');
+    return;
+  }
+
+  try {
+    await specialMapTool.addComparisonBox(400, 400, 150, 100);
+    elementCount.value = (await specialMapTool.getAllElements()).length;
+    showStatus('对比拉框添加成功', 'success');
+  } catch (error) {
+    console.error('添加对比拉框失败:', error);
+    showStatus('添加对比拉框失败', 'error');
+  }
+};
+
+const addCalibrationTarget = async (): Promise<void> => {
+  if (!specialMapTool) {
+    showStatus('专题图工具未初始化', 'error');
+    return;
+  }
+
+  try {
+    await specialMapTool.addCalibrationTarget(500, 500, 120, 120);
+    elementCount.value = (await specialMapTool.getAllElements()).length;
+    showStatus('标定目标添加成功', 'success');
+  } catch (error) {
+    console.error('添加标定目标失败:', error);
+    showStatus('添加标定目标失败', 'error');
+  }
+};
+
+
+</script>
+
+<style lang="less" scoped>
+.editor-container {
+  width: 100%;
+  height: 900px;
+}
+</style>

package/src/components/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconDocumentation.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconEcosystem.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/index.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ImageEditor from '@/components/ImageEditor/index.vue';
+import { type TuiImageEditor } from '@/types/index';
+import type { App } from 'vue'; // 新增：导入Vue组件类型
+const YuiImageEditor: any = ImageEditor
+
+const components = [YuiImageEditor];
+
+const install = (app: App) => {
+  components.forEach(component => {
+    app.component(component.name || 'YuiImageEditor', component);
+  });
+};
+
+
+
+export {
+  YuiImageEditor as ImageEditor,
+  type TuiImageEditor
+};
+
+export default {
+  install,
+  YuiImageEditor
+};

package/src/main.ts

@@ -0,0 +1,11 @@
+import { createPinia } from 'pinia';
+import 'tui-color-picker/dist/tui-color-picker.css';
+import 'tui-image-editor/dist/tui-image-editor.css';
+import { createApp } from 'vue';
+import App from './App.vue';
+import './assets/main.css';
+import router from './router';
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')