diff --git a/src/components/ImageShare.vue b/src/components/ImageShare.vue
deleted file mode 100644
index 39d13f3..0000000
--- a/src/components/ImageShare.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script setup>
-import useStore from "@/store";
-import Avatar from "@/components/Avatar.vue";
-
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String,
-    default: "",
-  },
-  onClose: {
-    type: Function,
-    default: () => {},
-  },
-});
-
-const saveImage = () => {
-  // 获取当前页面的节点
-  const query = uni.createSelectorQuery();
-  query
-    .select(".content")
-    .fields({ node: true, size: true })
-    .exec((res) => {
-      // 创建canvas上下文
-      const canvas = uni.createCanvasContext("shareCanvas");
-
-      // 将页面内容绘制到canvas上
-      // 这里需要根据实际内容进行绘制
-      canvas.draw(false, () => {
-        // 将画布内容保存为图片
-        uni.canvasToTempFilePath({
-          canvasId: "shareCanvas",
-          success: (res) => {
-            const tempFilePath = res.tempFilePath;
-
-            // 保存图片到相册
-            uni.saveImageToPhotosAlbum({
-              filePath: tempFilePath,
-              success: () => {
-                uni.showToast({ title: "保存成功" });
-              },
-              fail: () => {
-                uni.showToast({ title: "保存失败", icon: "error" });
-              },
-            });
-          },
-        });
-      });
-    });
-};
-</script>
-
-<template>
-  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
-    <view class="header">
-      <view @click="onClose">
-        <image src="../static/close-white.png" mode="widthFix" />
-      </view>
-    </view>
-    <view class="content">
-      <image src="../static/share-bg.png" mode="widthFix" />
-      <view>
-        <Avatar :src="user.avatar" :size="40" frame />
-        <view>
-          <text>{{ user.nickName }}</text>
-          <text>{{ user.lvlName }}</text>
-        </view>
-      </view>
-    </view>
-    <view class="footer">
-      <view>
-        <image src="../static/wechat-outline.png" mode="widthFix" />
-        <text>微信好友</text>
-      </view>
-      <view>
-        <image src="../static/wechat-moment.png" mode="widthFix" />
-        <text>朋友圈</text>
-      </view>
-      <view @click="saveImage">
-        <image src="../static/download.png" mode="widthFix" />
-        <text>保存到相册</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-}
-.header {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 20px;
-}
-.header > view > image {
-  width: 40px;
-  padding: 10px;
-}
-.content {
-  width: 75vw;
-  height: 130vw;
-  position: relative;
-}
-.content > image:first-child {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 15px;
-  z-index: -1;
-}
-.content > view:nth-child(2) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 20px 15px;
-}
-.content > view:nth-child(2) > view:last-child {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  color: #fff;
-  font-size: 14px;
-  margin-left: 10px;
-}
-.content > view:nth-child(2) > view:last-child > text:last-child {
-  font-size: 10px;
-  padding: 2px 5px;
-  background-color: #5f51ff;
-  border-radius: 10px;
-  color: #fff9;
-  margin-top: 5px;
-}
-.footer {
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-  margin-top: 50px;
-}
-.footer > view {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #fff;
-  font-size: 12px;
-}
-.footer > view > image {
-  width: 45px;
-  margin-bottom: 10px;
-}
-</style>
diff --git a/src/components/ShootProgress.vue b/src/components/ShootProgress.vue
index 7615b9a..5e7aea1 100644
--- a/src/components/ShootProgress.vue
+++ b/src/components/ShootProgress.vue
@@ -142,5 +142,6 @@ onUnmounted(() => {
 }
 .container > view:last-child > text {
   z-index: 1;
+  color: #000;
 }
 </style>
diff --git a/src/components/Signin.vue b/src/components/Signin.vue
index 11c4d78..25d85aa 100644
--- a/src/components/Signin.vue
+++ b/src/components/Signin.vue
@@ -86,7 +86,7 @@ const handleLogin = () => {
         class="login-btn"
         hover-class="none"
       >
-        <Avatar v-if="avatarUrl" :src="avatarUrl" />
+        <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
         <text v-else>点击获取</text>
       </button>
     </view>
@@ -94,7 +94,6 @@ const handleLogin = () => {
       <text>昵称:</text>
       <input
         type="nickname"
-        class="nickname-input"
         placeholder="请输入昵称"
         placeholder-style="color: #fff9"
         @change="onNicknameChange"
@@ -156,7 +155,7 @@ const handleLogin = () => {
 .nickname > input {
   flex: 1;
   font-size: 14px;
-  color: #000;
+  color: #fff;
 }
 .wechat-icon {
   width: 24px;
diff --git a/src/pages/image-share.vue b/src/pages/image-share.vue
index 21aa371..186bbc7 100644
--- a/src/pages/image-share.vue
+++ b/src/pages/image-share.vue
@@ -2,14 +2,9 @@
 import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import {
-  renderText,
-  renderRankTitle,
-  renderLine,
-  renderScores,
-  drawRoundImage,
-} from "@/util.js";
+import { generateCanvasImage } from "@/util";
 import { getPractiseAPI } from "@/apis";
+import { wxShare } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -19,63 +14,7 @@ onLoad(async (options) => {
   const id = options.id || 462;
   const data = await getPractiseAPI(id);
   if (!data.arrows.length) return;
-  var ctx = uni.createCanvasContext("shareCanvas");
-  const width = 303;
-  const height = 535;
-  ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
-  drawRoundImage(ctx, user.value.avatar, 20, 20, 35, 35, 20);
-  ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
-  renderText(ctx, user.value.nickName, 14, "#fff", 77, 35, "center");
-  renderRankTitle(ctx, user.value.lvlName, "center");
-
-  let titleImage = "../static/first-try-title.png";
-  let subTitle = "正式开启弓箭手之路";
-  if (options.type > 1) {
-    subTitle = `今日弓箭练习打卡 ${data.createdAt
-      .split(" ")[0]
-      .replaceAll("-", ".")}`;
-  }
-  if (options.type == 2) {
-    titleImage = "../static/practise-one-title.png";
-  } else if (options.type == 3) {
-    titleImage = "../static/practise-two-title.png";
-  }
-  ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
-  const subTitleWidth = ctx.measureText(subTitle).width;
-  renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 220);
-  renderText(ctx, "共", 16, "#fff", 124, 300);
-  const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
-  renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);
-  renderText(ctx, "环", 16, "#fff", 166, 300);
-  renderLine(ctx, 80);
-  renderLine(ctx, 192);
-  renderScores(ctx, data.arrows);
-  ctx.drawImage(
-    "../static/device-icon.png",
-    width * 0.06,
-    height * 0.87,
-    55,
-    55
-  );
-  renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
-  renderText(
-    ctx,
-    "快加入我们一起玩吧~",
-    11,
-    "rgba(255, 255, 255, 0.5)",
-    width * 0.28,
-    height * 0.93
-  );
-  renderText(
-    ctx,
-    "后羿就是这样练成的",
-    11,
-    "rgba(255, 255, 255, 0.5)",
-    width * 0.28,
-    height * 0.96
-  );
-  ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
-  ctx.draw();
+  generateCanvasImage("shareCanvas", options.type, user.value, data);
 });
 
 const saveImage = () => {
@@ -104,24 +43,23 @@ const saveImage = () => {
     <view class="content">
       <view :style="{ overflow: 'hidden', borderRadius: '10px' }">
         <canvas
-          style="width: 302px; height: 534px"
+          :style="{ width: '302px', height: '534px' }"
           canvas-id="shareCanvas"
-          id="firstCanvas"
         ></canvas>
       </view>
       <view class="footer">
-        <view>
+        <button hover-class="none" @click="wxShare">
           <image src="../static/wechat-outline.png" mode="widthFix" />
           <text>微信好友</text>
-        </view>
-        <view>
+        </button>
+        <button hover-class="none">
           <image src="../static/wechat-moment.png" mode="widthFix" />
           <text>朋友圈</text>
-        </view>
-        <view @click="saveImage">
+        </button>
+        <button hover-class="none" @click="saveImage">
           <image src="../static/download.png" mode="widthFix" />
           <text>保存到相册</text>
-        </view>
+        </button>
       </view>
     </view>
   </Container>
@@ -141,14 +79,14 @@ const saveImage = () => {
   justify-content: space-around;
   margin-top: 50px;
 }
-.footer > view {
+.footer > button {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: #fff;
   font-size: 12px;
 }
-.footer > view > image {
+.footer > button > image {
   width: 45px;
   margin-bottom: 10px;
 }
diff --git a/src/util.js b/src/util.js
index deacc2b..b636332 100644
--- a/src/util.js
+++ b/src/util.js
@@ -60,16 +60,16 @@ export function renderText(ctx, text, size, color, x, y, textAlign = "left") {
 }
 
 export function renderRankTitle(ctx, text) {
-  const fontSize = 10;
+  const fontSize = 8;
   const textWidth = ctx.measureText(text).width;
   const padding = 8; // 文字与背景边缘的间距
   const radius = 10; // 圆角半径
   const textX = 85;
-  const textY = 55;
-  const x = textX - padding - 15; // 文字 x 坐标减去内边距
+  const textY = 52;
+  const x = textX - padding - 12; // 文字 x 坐标减去内边距
   const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距
-  const width = textWidth + padding * 2 - 19; // 背景宽度
-  const height = fontSize + padding + 1; // 背景高度
+  const width = textWidth + padding * 2 - 24; // 背景宽度
+  const height = fontSize + padding; // 背景高度
 
   // 开始绘制圆角矩形
   ctx.beginPath();
@@ -136,9 +136,9 @@ export function generateCanvasImage(canvasId, type, user, data) {
   const width = 303;
   const height = 535;
   ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
-  drawRoundImage(ctx, user.avatar, 20, 20, 35, 35, 20);
-  ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
-  renderText(ctx, user.nickName, 14, "#fff", 77, 35, "center");
+  drawRoundImage(ctx, user.avatar, 17, 20, 37, 37, 20);
+  ctx.drawImage("../static/avatar-frame.png", 12, 15, 47, 47);
+  renderText(ctx, user.nickName, 14, "#fff", 80, 32, "center");
   renderRankTitle(ctx, user.lvlName, "center");
 
   let titleImage = "../static/first-try-title.png";
@@ -155,7 +155,14 @@ export function generateCanvasImage(canvasId, type, user, data) {
   }
   ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
   const subTitleWidth = ctx.measureText(subTitle).width;
-  renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 220);
+  renderText(
+    ctx,
+    subTitle,
+    18,
+    "#fff",
+    width / 2 - subTitleWidth - (type > 1 ? 15 : 8),
+    220
+  );
   renderText(ctx, "共", 16, "#fff", 124, 300);
   const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
   renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);