feat(ActivitiesCover): 添加活动分享功能及海报生成组件

- 新增分享按钮及分享弹窗组件
- 实现海报生成功能，支持保存至相册
- 添加分享选项包括微信分享和海报生成
- 优化图片下载工具函数，增加重试机制
- 更新babel配置支持TypeScript
- 添加相关SVG图标资源

@@ -4,7 +4,7 @@ module.exports = {
   presets: [
   presets: [
     ['taro', {
     ['taro', {
       framework: 'vue3',
       framework: 'vue3',
-      ts: false,
+      ts: true,
       compiler: 'webpack5',
       compiler: 'webpack5',
     }]
     }]
   ]
   ]

@@ -37,6 +37,7 @@
   "license": "MIT",
   "license": "MIT",
   "dependencies": {
   "dependencies": {
     "@babel/runtime": "^7.7.7",
     "@babel/runtime": "^7.7.7",
+    "@nutui/icons-vue": "^0.1.1",
     "@nutui/icons-vue-taro": "^0.0.9",
     "@nutui/icons-vue-taro": "^0.0.9",
     "@nutui/nutui-taro": "^4.3.13",
     "@nutui/nutui-taro": "^4.3.13",
     "@tarojs/components": "4.1.2",
     "@tarojs/components": "4.1.2",
@@ -64,6 +65,7 @@
     "@tarojs/cli": "4.1.2",
     "@tarojs/cli": "4.1.2",
     "@tarojs/taro-loader": "4.1.2",
     "@tarojs/taro-loader": "4.1.2",
     "@tarojs/webpack5-runner": "4.1.2",
     "@tarojs/webpack5-runner": "4.1.2",
+    "@types/node": "^24.3.0",
     "@types/webpack-env": "^1.13.6",
     "@types/webpack-env": "^1.13.6",
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/compiler-sfc": "^3.0.0",
@@ -75,6 +77,7 @@
     "postcss": "^8.5.6",
     "postcss": "^8.5.6",
     "style-loader": "1.3.0",
     "style-loader": "1.3.0",
     "tailwindcss": "^3.4.0",
     "tailwindcss": "^3.4.0",
+    "typescript": "^5.9.2",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-components": "^0.26.0",
     "vue-loader": "^17.0.0",
     "vue-loader": "^17.0.0",
     "weapp-tailwindcss": "^4.1.10",
     "weapp-tailwindcss": "^4.1.10",

+<svg width="949" height="108" viewBox="0 0 949 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="949" height="2" y="53" fill="#E5E7EB"/>
+  <circle cx="100" cy="54" r="8" fill="#3B82F6"/>
+  <circle cx="200" cy="54" r="6" fill="#10B981"/>
+  <circle cx="300" cy="54" r="8" fill="#F59E0B"/>
+  <circle cx="400" cy="54" r="6" fill="#EF4444"/>
+  <circle cx="500" cy="54" r="8" fill="#8B5CF6"/>
+  <circle cx="600" cy="54" r="6" fill="#06B6D4"/>
+  <circle cx="700" cy="54" r="8" fill="#84CC16"/>
+  <circle cx="800" cy="54" r="6" fill="#F97316"/>
+</svg>
\ No newline at end of file

+<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.5 0C7.835 0 0 7.835 0 17.5C0 30.625 17.5 40 17.5 40S35 30.625 35 17.5C35 7.835 27.165 0 17.5 0Z" fill="#4CAF50"/>
+  <circle cx="17.5" cy="17.5" r="7" fill="#fff"/>
+</svg>
\ No newline at end of file

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.34C15.11 18.55 15.08 18.77 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="20" cy="20" r="18" fill="#FF6B35" stroke="#fff" stroke-width="2"/>
+  <path d="M20 8v12l8 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file

 /* eslint-disable prefer-destructuring */
 /* eslint-disable prefer-destructuring */
-import Taro, { CanvasContext, CanvasGradient } from '@tarojs/taro';
+import Taro from '@tarojs/taro'
 
 
-declare const wx: any;
+// 全局变量声明
+// eslint-disable-next-line no-undef
+const wx = globalThis.wx || {};
 
 
 /**
 /**
  * @description 生成随机字符串
  * @description 生成随机字符串
@@ -128,28 +130,70 @@ export const toRpx = (px, factor = getFactor()) =>
 /**
 /**
  * 下载图片资源
  * 下载图片资源
  * @param { string } url
  * @param { string } url
+ * @param { number } retryCount - 重试次数
  * @returns  { Promise }
  * @returns  { Promise }
  */
  */
-export function downImage(url) {
-  return new Promise<string>((resolve, reject) => {
+export function downImage(url, retryCount = 2) {
+  return new Promise((resolve, reject) => {
     // eslint-disable-next-line no-undef
     // eslint-disable-next-line no-undef
     if (/^http/.test(url) && !new RegExp(wx.env.USER_DATA_PATH).test(url)) {
     if (/^http/.test(url) && !new RegExp(wx.env.USER_DATA_PATH).test(url)) {
       // wx.env.USER_DATA_PATH 文件系统中的用户目录路径
       // wx.env.USER_DATA_PATH 文件系统中的用户目录路径
+      const attemptDownload = (attempt = 0) => {
         Taro.downloadFile({
         Taro.downloadFile({
           url: mapHttpToHttps(url),
           url: mapHttpToHttps(url),
+          timeout: 10000, // 设置10秒超时
           success: (res) => {
           success: (res) => {
             if (res.statusCode === 200) {
             if (res.statusCode === 200) {
               resolve(res.tempFilePath);
               resolve(res.tempFilePath);
             } else {
             } else {
-            console.log('下载失败', res);
+              // console.log('下载失败', res);
+              if (attempt < retryCount) {
+                // console.log(`重试下载图片，第${attempt + 1}次重试`);
+                setTimeout(() => attemptDownload(attempt + 1), 1000);
+              } else {
                 reject(res);
                 reject(res);
               }
               }
+            }
           },
           },
           fail(err) {
           fail(err) {
-          console.log('下载失败了', err);
+            // console.log('下载失败了', err);
+            // 如果是代理连接问题，尝试使用原始URL
+            if (err.errMsg && err.errMsg.includes('127.0.0.1:7890')) {
+              // console.log('检测到代理问题，尝试使用原始URL');
+              if (attempt < retryCount) {
+                setTimeout(() => {
+                  Taro.downloadFile({
+                    url: url, // 使用原始URL，不转换https
+                    timeout: 10000,
+                    success: (res) => {
+                      if (res.statusCode === 200) {
+                        resolve(res.tempFilePath);
+                      } else {
+                        reject(res);
+                      }
+                    },
+                    fail: () => {
+                      if (attempt + 1 < retryCount) {
+                        attemptDownload(attempt + 1);
+                      } else {
                         reject(err);
                         reject(err);
                       }
                       }
+                    }
+                  });
+                }, 1000);
+              } else {
+                reject(err);
+              }
+            } else if (attempt < retryCount) {
+              // console.log(`重试下载图片，第${attempt + 1}次重试`);
+              setTimeout(() => attemptDownload(attempt + 1), 1000);
+            } else {
+              reject(err);
+            }
+          }
         });
         });
+      };
+      attemptDownload();
     } else {
     } else {
       resolve(url); // 支持本地地址
       resolve(url); // 支持本地地址
     }
     }
@@ -191,7 +235,7 @@ export const getImageInfo = (item, index) =>
             borderColor: item.borderColor,
             borderColor: item.borderColor,
             borderRadiusGroup: item.borderRadiusGroup,
             borderRadiusGroup: item.borderRadiusGroup,
             zIndex: typeof zIndex !== 'undefined' ? zIndex : index,
             zIndex: typeof zIndex !== 'undefined' ? zIndex : index,
-            imgPath: url,
+            imgPath: imgPath, // 使用下载后的临时文件路径
             sx,
             sx,
             sy,
             sy,
             sw: imgWidth - sx * 2,
             sw: imgWidth - sx * 2,
@@ -204,7 +248,7 @@ export const getImageInfo = (item, index) =>
           resolve(result);
           resolve(result);
         })
         })
         .catch((err) => {
         .catch((err) => {
-          console.log('读取图片信息失败', err);
+          // console.log('读取图片信息失败', err);
           reject(err);
           reject(err);
         })
         })
     );
     );
@@ -222,7 +266,7 @@ export const getImageInfo = (item, index) =>
  */
  */
 // TODO: 待优化, 支持所有角度，多个颜色的线性渐变
 // TODO: 待优化, 支持所有角度，多个颜色的线性渐变
 export function getLinearColor(
 export function getLinearColor(
-  ctx: CanvasContext,
+  ctx,
   color,
   color,
   startX,
   startX,
   startY,
   startY,
@@ -238,7 +282,7 @@ export function getLinearColor(
     console.warn('坐标或者宽高只支持数字');
     console.warn('坐标或者宽高只支持数字');
     return color;
     return color;
   }
   }
-  let grd: CanvasGradient | string = color;
+  let grd = color;
   if (color.includes('linear-gradient')) {
   if (color.includes('linear-gradient')) {
     // fillStyle 不支持线性渐变色
     // fillStyle 不支持线性渐变色
     const colorList = color.match(/\((\d+)deg,\s(.+)\s\d+%,\s(.+)\s\d+%/);
     const colorList = color.match(/\((\d+)deg,\s(.+)\s\d+%,\s(.+)\s\d+%/);
@@ -263,8 +307,8 @@ export function getLinearColor(
     } else {
     } else {
       throw new Error('只支持0 <= 颜色弧度 <= 180');
       throw new Error('只支持0 <= 颜色弧度 <= 180');
     }
     }
-    (grd as CanvasGradient).addColorStop(0, color1);
-    (grd as CanvasGradient).addColorStop(1, color2);
+    grd.addColorStop(0, color1);
+    grd.addColorStop(1, color2);
   }
   }
   return grd;
   return grd;
 }
 }

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.34C15.11 18.55 15.08 18.77 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08Z" fill="#666666"/>
+</svg>
\ No newline at end of file

+<svg width="949" height="108" viewBox="0 0 949 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
+      <circle cx="10" cy="10" r="2" fill="#E5E5E5"/>
+    </pattern>
+  </defs>
+  <rect width="949" height="108" fill="url(#dots)"/>
+  <line x1="0" y1="54" x2="949" y2="54" stroke="#CCCCCC" stroke-width="2" stroke-dasharray="10,5"/>
+</svg>
\ No newline at end of file

@@ -55,6 +55,27 @@
     }
     }
 }
 }
 
 
+// 分享按钮
+.share-button {
+    position: absolute;
+    top: 40rpx;
+    right: 40rpx;
+    width: 80rpx;
+    height: 80rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 32rpx;
+    z-index: 10;
+    
+    &:active {
+        background-color: rgba(0, 0, 0, 0.7);
+    }
+}
+
 // 详情区域
 // 详情区域
 .details-section {
 .details-section {
     flex: 1;
     flex: 1;
@@ -189,7 +210,112 @@
             box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
             box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
         }
         }
     }
     }
+}
+
+// 弹窗样式
+.share-popup {
+    .nut-popup__content {
+        border-radius: 24rpx 24rpx 0 0;
+        padding: 40rpx;
+    }
+}
+
+.share-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 40rpx;
+    color: #333;
+}
 
 
+.share-options {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 40rpx;
+}
+
+.share-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20rpx;
+    border-radius: 12rpx;
+    
+    &:active {
+        background-color: #f5f5f5;
+    }
+}
+
+.share-icon {
+    width: 80rpx;
+    height: 80rpx;
+    margin-bottom: 16rpx;
+    border-radius: 12rpx;
+    background-color: #1890ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 36rpx;
+}
+
+.share-text {
+    font-size: 24rpx;
+    color: #666;
+}
+
+.cancel-button {
+    width: 100%;
+    height: 88rpx;
+    border-radius: 44rpx;
+    font-size: 32rpx;
+    background-color: #f5f5f5;
+    color: #666;
+    border: none;
+}
+
+// 海报预览弹窗
+.poster-preview-popup {
+    .nut-popup__content {
+        width: 90%;
+        max-width: 600rpx;
+        border-radius: 24rpx;
+        padding: 40rpx;
+        background-color: white;
+    }
+}
+
+.poster-preview {
+    width: 100%;
+    border-radius: 12rpx;
+    margin-bottom: 40rpx;
+}
+
+.preview-actions {
+    display: flex;
+    gap: 20rpx;
+}
+
+.preview-button {
+    flex: 1;
+    height: 80rpx;
+    border-radius: 40rpx;
+    font-size: 28rpx;
+    
+    &.primary {
+        background-color: #1890ff;
+        color: white;
+        border: none;
+    }
+    
+    &.secondary {
+        background-color: #f5f5f5;
+        color: #666;
+        border: none;
+    }
+ }
+
+.join-button {
     &.nut-button--loading {
     &.nut-button--loading {
         opacity: 0.7;
         opacity: 0.7;
     }
     }

+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "lib": [
+      "ES6",
+      "ES2017",
+      "ES2018",
+      "ES2019"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "./src/**/*",
+    "./types/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.js"
+  ]
+}
\ No newline at end of file