补全代码

src/apis.js

@@ -498,3 +498,23 @@ export const donateAPI = async (amount, name, phone, organizer, advice) => {
     advice,
   });
 };
+
+export const laserAimAPI = async () => {
+  return request("POST", "/user/device/laserAim");
+};
+
+export const laserCloseAPI = async () => {
+  return request("POST", "/user/device/closeAim");
+};
+
+export const getDeviceBatteryAPI = async () => {
+  return request("GET", "/user/device/battery");
+};
+
+export const addNoteAPI = async (id, remark) => {
+  return request("POST", "/user/score/sheet/remark", { id, remark });
+};
+
+export const removePointRecord = async (id) => {
+  return request("DELETE", `/user/score/sheet/delete?id=${id}`);
+};

src/components/BowTargetEdit.vue

@@ -209,7 +209,7 @@ onMounted(async () => {
                 fontSize: '16px',
                 marginLeft: '2px',
               }"
-              >环</text
+              >points</text
             >
           </view>
           <view

src/components/EditOption.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import { getPointBookConfigAPI } from "@/apis";
 const props = defineProps({
   itemIndex: {
@@ -27,13 +27,18 @@ const props = defineProps({
     default: "",
   },
 });
-const itemTexts = ["选择弓种", "选择练习距离", "选择靶纸", "选择组/箭数"];
+const itemTexts = ["Select Bow", "Select Distance", "Select Target", "Select Sets/Arrows"];
 const distances = [5, 8, 10, 18, 25, 30, 50, 60, 70];
 const groupArrows = [3, 6, 12, 18];
 
 const data = ref([]);
 const selectedIndex = ref(-1);
 const secondSelectIndex = ref(-1);
+
+const meter = ref("");
+const sets = ref("");
+const arrowAmount = ref("");
+
 const onSelectItem = (index) => {
   selectedIndex.value = index;
   if (props.itemIndex === 0) {
@@ -42,11 +47,13 @@ const onSelectItem = (index) => {
     props.onSelect(props.itemIndex, distances[index]);
   } else if (props.itemIndex === 2) {
     props.onSelect(props.itemIndex, data.value[index]);
-  } else if (props.itemIndex === 3 && secondSelectIndex.value !== -1) {
+  } else if (props.itemIndex === 3) {
-    props.onSelect(
+    if (secondSelectIndex.value !== -1) {
-      props.itemIndex,
+      props.onSelect(
-      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
+        props.itemIndex,
-    );
+        `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
+      );
+    }
   }
 };
 const onSelectSecondItem = (index) => {
@@ -54,15 +61,44 @@ const onSelectSecondItem = (index) => {
   if (selectedIndex.value !== -1) {
     props.onSelect(
       props.itemIndex,
-      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
+      `${selectedIndex.value < 5 ? selectedIndex.value : sets.value}/${
+        groupArrows[secondSelectIndex.value]
+      }`
     );
   }
 };
-const meter = ref("");
 const onMeterChange = (e) => {
   meter.value = e.detail.value;
   props.onSelect(props.itemIndex, e.detail.value);
 };
+const onSetsChange = (e) => {
+  if (!e.detail.value) return;
+  sets.value = Math.min(30, Number(e.detail.value));
+  if (!sets.value) return;
+  if (secondSelectIndex.value !== -1) {
+    props.onSelect(
+      props.itemIndex,
+      `${sets.value}/${
+        secondSelectIndex.value === 99
+          ? arrowAmount.value
+          : groupArrows[secondSelectIndex.value]
+      }`
+    );
+  }
+};
+const onArrowAmountChange = (e) => {
+  if (!e.detail.value) return;
+  arrowAmount.value = Math.min(60, Number(e.detail.value));
+  if (!arrowAmount.value) return;
+  if (selectedIndex.value !== -1) {
+    props.onSelect(
+      props.itemIndex,
+      `${selectedIndex.value === 99 ? sets.value : selectedIndex.value}/${
+        arrowAmount.value
+      }`
+    );
+  }
+};
 watch(
   () => props.value,
   (newValue) => {
@@ -114,6 +150,17 @@ const loadConfig = () => {
     }
   }
 };
+const formatSetAndAmount = computed(() => {
+  if (selectedIndex.value === -1 || secondSelectIndex.value === -1)
+    return itemTexts[props.itemIndex];
+  if (selectedIndex.value === 99 && !sets.value) return itemTexts[props.itemIndex];
+  if (secondSelectIndex.value === 99 && !arrowAmount.value) return itemTexts[props.itemIndex];
+  return `${selectedIndex.value === 99 ? sets.value : selectedIndex.value} sets/${
+    secondSelectIndex.value === 99
+      ? arrowAmount.value
+      : groupArrows[secondSelectIndex.value]
+  } arrows`;
+});
 onMounted(async () => {
   const config = uni.getStorageSync("point-book-config");
   if (config) {
@@ -135,24 +182,21 @@ onMounted(async () => {
     }"
   >
     <view @click="() => onExpand(itemIndex, !expand)">
-      <text :style="{ opacity: expand ? 1 : 0 }">{{
+      <view></view>
-        itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
-      }}</text>
       <block>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{
+        <text v-if="expand" :style="{ color: '#999', fontWeight: 'normal' }">{{
+          itemIndex !== 3 ? itemTexts[itemIndex] : "Select Sets"
+        }}</text>
+        <text v-if="!expand && itemIndex === 0">{{
           value || itemTexts[itemIndex]
         }}</text>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 1">{{
+        <text v-if="!expand && itemIndex === 1">{{
-          value && value > 0 ? value + "米" : itemTexts[itemIndex]
+          value && value > 0 ? value + " m" : itemTexts[itemIndex]
         }}</text>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 2">{{
+        <text v-if="!expand && itemIndex === 2">{{
           value || itemTexts[itemIndex]
         }}</text>
-        <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{
+        <text v-if="!expand && itemIndex === 3">{{ formatSetAndAmount }}</text>
-          selectedIndex !== -1 && secondSelectIndex !== -1
-            ? `${selectedIndex}组/${groupArrows[secondSelectIndex]}箭`
-            : itemTexts[itemIndex]
-        }}</text>
       </block>
       <button hover-class="none">
         <image
@@ -186,7 +230,7 @@ onMounted(async () => {
         @click="onSelectItem(index)"
       >
         <text>{{ item }}</text>
-        <text>米</text>
+        <text>m</text>
       </view>
       <view
         :style="{
@@ -195,12 +239,13 @@ onMounted(async () => {
       >
         <input
           v-model="meter"
-          placeholder="自定义"
+          type="number"
+          placeholder="Custom"
           placeholder-style="color: #DDDDDD"
           @focus="() => (selectedIndex = 9)"
-          @change="onMeterChange"
+          @blur="onMeterChange"
         />
-        <text>米</text>
+        <text>m</text>
       </view>
     </view>
     <view v-if="itemIndex === 2" class="bowtarget-items">
@@ -219,7 +264,7 @@ onMounted(async () => {
     <view v-if="itemIndex === 3">
       <view class="amount-items">
         <view
-          v-for="i in 12"
+          v-for="i in 4"
           :key="i"
           :style="{
             borderColor: selectedIndex === i ? '#fed847' : '#eeeeee',
@@ -227,12 +272,32 @@ onMounted(async () => {
           @click="onSelectItem(i)"
         >
           <text>{{ i }}</text>
-          <text>组</text>
+          <text>sets</text>
+        </view>
+        <view
+          :style="{
+            borderColor: selectedIndex === 99 ? '#fed847' : '#eeeeee',
+          }"
+        >
+          <input
+            placeholder="1 ~ 30"
+            type="number"
+            placeholder-style="color: #DDDDDD"
+            v-model="sets"
+            @focus="() => (selectedIndex = 99)"
+            @blur="onSetsChange"
+          />
+          <text>sets</text>
         </view>
       </view>
       <view
-        :style="{ marginTop: '5px', marginBottom: '10px', color: '#999999' }"
+        :style="{
-        >选择每组的箭数</view
+          marginTop: '5px',
+          marginBottom: '10px',
+          color: '#999999',
+          textAlign: 'center',
+        }"
+        >Select arrows per set</view
       >
       <view class="amount-items">
         <view
@@ -244,7 +309,23 @@ onMounted(async () => {
           @click="onSelectSecondItem(index)"
         >
           <text>{{ item }}</text>
-          <text>箭</text>
+          <text>arrows</text>
+        </view>
+        <view
+          :style="{
+            borderColor: secondSelectIndex === 99 ? '#fed847' : '#eeeeee',
+          }"
+        >
+          <input
+            placeholder="1 ~ 60"
+            type="number"
+            placeholder-style="color: #DDDDDD"
+            v-model="arrowAmount"
+            maxlength="99"
+            @focus="() => (secondSelectIndex = 99)"
+            @blur="onArrowAmountChange"
+          />
+          <text>arrows</text>
         </view>
       </view>
     </view>
@@ -269,9 +350,8 @@ onMounted(async () => {
   justify-content: space-between;
   height: 50px;
 }
-.container > view:first-child > text:first-child {
+.container > view:first-child > view:first-child {
   width: 85px;
-  color: #999999;
 }
 .container > view:first-child > text:nth-child(2) {
   font-weight: 500;
@@ -352,4 +432,12 @@ onMounted(async () => {
   width: 100%;
   text-align: center;
 }
+.amount-items > view:last-child {
+  grid-column: 1 / -1;
+  width: 100%;
+}
+.amount-items > view:last-child > input {
+  width: 85%;
+  text-align: center;
+}
 </style>

src/components/Header.vue

@@ -51,7 +51,9 @@ const toUserPage = () => {
 
 const signin = () => {
   if (!user.value.id) {
-    uni.$emit("point-book-signin");
+    uni.navigateTo({
+      url: "/pages/sign-in",
+    });
   }
 };
 

src/components/InputRow.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "text",
+  },
+  btnType: {
+    type: String,
+    default: "",
+  },
+  onChange: {
+    type: Function,
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "90vw",
+  },
+});
+
+const hide = ref(true);
+</script>
+
+<template>
+  <view class="container" :style="{ width }">
+    <input
+      :type="type"
+      @change="onChange"
+      :placeholder="placeholder"
+      placeholder-style="color: #999;"
+    />
+    <button v-if="btnType === 'code'" hover-class="none" class="get-code">
+      get verification code
+    </button>
+    <button
+      v-if="type === 'password'"
+      hover-class="none"
+      class="eye-btn"
+      @click="hide = !hide"
+    >
+      <image
+        :src="`../static/${hide ? 'eye-close' : 'eye-open'}.png`"
+        mode="widthFix"
+      />
+    </button>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  height: 100rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  border-radius: 30rpx;
+  padding: 0 30rpx;
+  margin: 15rpx 0;
+  box-sizing: border-box;
+}
+.container > input {
+  width: 100%;
+  color: #333;
+  font-size: 26rpx;
+}
+.get-code {
+  color: #287fff;
+  font-size: 26rpx;
+  width: 80%;
+}
+.eye-btn {
+  padding: 20rpx;
+}
+.eye-btn > image {
+  width: 50rpx;
+  height: 32rpx;
+}
+</style>

src/components/PointRecord.vue

@@ -68,7 +68,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   border-radius: 25rpx;
-  margin-bottom: 25rpx;
   height: 200rpx;
   border: 2rpx solid #fed848;
 }

src/components/RingBarChart.vue

@@ -4,7 +4,7 @@ import { ref, computed } from "vue";
 const props = defineProps({
   data: {
     type: Object,
-    default: () => ({}),
+    default: Array,
   },
   total: {
     type: Number,

src/components/SButton.vue

@@ -8,7 +8,7 @@ const props = defineProps({
   },
   rounded: {
     type: Number,
-    default: 10,
+    default: 45,
   },
   onClick: {
     type: Function,
@@ -58,7 +58,7 @@ const onBtnClick = debounce(async () => {
     hover-class="none"
     :style="{
       width: width,
-      borderRadius: rounded + 'px',
+      borderRadius: rounded + 'rpx',
       backgroundColor: disabled ? disabledColor : backgroundColor,
       color,
     }"
@@ -77,10 +77,10 @@ const onBtnClick = debounce(async () => {
 <style scoped>
 .sbtn {
   margin: 0 auto;
-  height: 44px;
+  height: 88rpx;
   line-height: 44px;
   font-weight: bold;
-  font-size: 15px;
+  font-size: 42rpx;
   display: flex;
   text-align: center;
   justify-content: center;

src/components/ScrollList.vue

@@ -59,6 +59,7 @@ onShow(async () => {
   <scroll-view
     class="scroll-list"
     scroll-y
+    enable-flex="true"
     :show-scrollbar="false"
     enhanced="true"
     :bounces="false"
@@ -73,8 +74,8 @@ onShow(async () => {
   >
     <slot></slot>
     <view class="tips">
-      <text v-if="loading">加载中...</text>
+      <text v-if="loading">Loading...</text>
-      <text v-if="noMore">{{ count === 0 ? "暂无数据" : "没有更多了" }}</text>
+      <text v-if="noMore">{{ count === 0 ? "No data" : "That‘s all" }}</text>
     </view>
   </scroll-view>
 </template>
@@ -83,9 +84,7 @@ onShow(async () => {
 .scroll-list {
   width: 100%;
   height: 100%;
-}
+  flex-direction: column;
-.tips {
-  height: 50rpx;
 }
 .tips > text {
   color: #d0d0d0;

src/pages.json

@@ -3,9 +3,21 @@
     {
       "path": "pages/index"
     },
+    {
+      "path": "pages/reset-password"
+    },
     {
       "path": "pages/point-book"
     },
+    {
+      "path": "pages/edit-profile"
+    },
+    {
+      "path": "pages/sign-in"
+    },
+    {
+      "path": "pages/sign-up"
+    },
     {
       "path": "pages/about-us"
     },
@@ -113,7 +125,7 @@
     }
   ],
   "globalStyle": {
-    "backgroundColor": "@bgColor",
+    "backgroundColor": "#fff",
     "backgroundColorBottom": "@bgColorBottom",
     "backgroundColorTop": "@bgColorTop",
     "backgroundTextStyle": "@bgTxtStyle",

src/pages/edit-profile.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { ref, onMounted, reactive } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+
+const type = ref("");
+const formData = reactive({
+  name: "",
+  email: "",
+  code: "",
+  password: "",
+  confirmPassword: "",
+});
+
+onLoad((options) => {
+  type.value = options.type;
+});
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    :title="`Edit ${type}`"
+  >
+    <view v-if="type === 'Name'" class="input-view input-row">
+      <input
+        v-model="formData.name"
+        placeholder="name"
+        placeholder-style="color:#999;"
+      />
+      <text>{{ formData.name.length }}/30</text>
+    </view>
+    <view v-else-if="type === 'Email'" class="input-view">
+      <view class="input-row">
+        <input
+          v-model="formData.email"
+          placeholder="email"
+          placeholder-style="color:#999;"
+        />
+      </view>
+      <view class="input-row">
+        <input
+          v-model="formData.code"
+          placeholder="verification code"
+          placeholder-style="color:#999;"
+        />
+        <button hover-class="none">get verification code</button>
+      </view>
+    </view>
+    <view v-else-if="type === 'Password'" class="input-view">
+      <view class="input-row">
+        <input
+          v-model="formData.password"
+          placeholder="password"
+          placeholder-style="color:#999;"
+        />
+      </view>
+      <view class="input-row">
+        <input
+          v-model="formData.confirmPassword"
+          placeholder="Confirm your password"
+          placeholder-style="color:#999;"
+        />
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.input-view {
+  padding: 0 30rpx;
+  border-radius: 25rpx;
+  color: $uni-text-color-grey;
+  background: $uni-bg-color;
+  margin-top: 25rpx;
+  width: calc(100% - 100rpx);
+}
+.input-view > view:not(:first-child) {
+  border-top: 1rpx solid #e3e3e3;
+}
+.input-row {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+}
+.input-row > input {
+  padding: 30rpx 0;
+  flex: 1;
+}
+.input-row > button {
+  color: $uni-link-color;
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+</style>

src/pages/point-book-create.vue

@@ -4,7 +4,6 @@ import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import EditOption from "@/components/EditOption.vue";
 import SButton from "@/components/SButton.vue";
-import { getPointBookDataAPI } from "@/apis";
 
 const expandIndex = ref(0);
 const bowType = ref("");
@@ -43,7 +42,7 @@ const toEditPage = () => {
     bowtargetType.value &&
     amountGroup.value
   ) {
-    uni.setStorageSync("point-book", {
+    uni.setStorageSync("last-point-book", {
       bowType: bowType.value,
       distance: distance.value,
       bowtargetType: bowtargetType.value,
@@ -54,20 +53,13 @@ const toEditPage = () => {
     });
   } else {
     uni.showToast({
-      title: "请完善信息",
+      title: "Please complete the information",
       icon: "none",
     });
   }
 };
-// onShow(async () => {
-//   const result = await getPointBookDataAPI();
-//   if (result) {
-//     days.value = result.total_day || 0;
-//     arrows.value = result.total_arrow || 0;
-//   }
-// });
 onMounted(async () => {
-  const pointBook = uni.getStorageSync("point-book");
+  const pointBook = uni.getStorageSync("last-point-book");
   if (pointBook) {
     bowType.value = pointBook.bowType;
     distance.value = pointBook.distance;
@@ -85,26 +77,6 @@ onMounted(async () => {
     title="选择参数"
   >
     <view class="container">
-      <!-- <view class="header">
-        <image
-          src="https://static.shelingxingqiu.com/attachment/2025-08-06/dbv8w5ak76hozbfpy2.png"
-          mode="widthFix"
-        />
-        <view>
-          <view>
-            <text>{{ days }}</text>
-            <text>天</text>
-          </view>
-          <text>训练天数</text>
-        </view>
-        <view>
-          <view>
-            <text>{{ arrows }}</text>
-            <text>箭</text>
-          </view>
-          <text>训练箭数</text>
-        </view>
-      </view> -->
       <view>
         <EditOption
           :itemIndex="0"
@@ -136,7 +108,7 @@ onMounted(async () => {
       </view>
     </view>
     <view :style="{ marginBottom: '20px' }">
-      <SButton :rounded="50" :onClick="toEditPage">下一步</SButton>
+      <SButton :rounded="50" :onClick="toEditPage">Next</SButton>
     </view>
   </Container>
 </template>

src/pages/point-book-detail-share.vue

@@ -0,0 +1,434 @@
+<script setup>
+import { ref, computed } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import SButton from "@/components/SButton.vue";
+import BowTargetEdit from "@/components/BowTargetEdit.vue";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+import RingBarChart from "@/components/RingBarChart.vue";
+import { getPointBookDetailAPI, getPointBookConfigAPI } from "@/apis";
+
+const selectedIndex = ref(0);
+const showTip = ref(false);
+const showTip2 = ref(false);
+const data = ref({});
+const targetId = ref(0);
+const targetSrc = ref("");
+const arrows = ref([]);
+const record = ref({
+  groups: [],
+  user: {},
+});
+const bowConfig = ref({});
+
+const paddingTop = computed(() => {
+  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
+  return menuBtnInfo.top - 9 - 9;
+});
+
+const openTip = (index) => {
+  if (index === 1) showTip.value = true;
+  else if (index === 2) showTip2.value = true;
+};
+
+const closeTip = () => {
+  showTip.value = false;
+  showTip2.value = false;
+};
+
+const goBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    const currentPage = pages[pages.length - 2];
+    uni.navigateBack({
+      delta: currentPage.route === "pages/point-book" ? 1 : 2,
+    });
+  } else {
+    uni.redirectTo({
+      url: "/pages/index",
+    });
+  }
+};
+
+const goHome = () => {
+  uni.redirectTo({
+    url: "/pages/point-book",
+  });
+};
+
+const ringRates = computed(() => {
+  const rates = new Array(12).fill(0);
+  arrows.value.forEach((item) => {
+    if (item.ring === -1) rates[11] += 1;
+    else rates[item.ring] += 1;
+  });
+  return rates.map((r) => r / arrows.value.length);
+});
+
+onLoad(async (options) => {
+  if (options.id) {
+    const result = await getPointBookDetailAPI(options.id || 183);
+    record.value = result;
+    const config = await getPointBookConfigAPI();
+    bowConfig.value = config;
+    config.targetOption.some((item) => {
+      if (item.id === result.targetType) {
+        targetId.value = item.id;
+        targetSrc.value = item.icon;
+      }
+    });
+    if (result.groups) {
+      data.value = result.groups[0];
+      arrows.value = result.groups[0].list;
+    }
+  }
+});
+
+const bowOptionName = computed(() => {
+  if (bowConfig.value.bowOption && record.value.bowType) {
+    const data = bowConfig.value.bowOption.find(
+      (b) => b.id === record.value.bowType
+    );
+    if (data) return data.name || "";
+  }
+  return "";
+});
+
+const targetTypeName = computed(() => {
+  if (bowConfig.value.targetOption && record.value.targetType) {
+    const data = bowConfig.value.targetOption.find(
+      (b) => b.id === record.value.targetType
+    );
+    if (data) return data.name || "";
+  }
+  return "";
+});
+</script>
+
+<template>
+  <view class="container" :style="{ paddingTop: paddingTop + 'px' }">
+    <image
+      src="../static/app-bg5.png"
+      class="bg-image"
+      mode="aspectFill"
+      :style="{ height: paddingTop + 60 + 'px' }"
+    />
+    <view class="header">
+      <image
+        :src="record.user.avatar || '../static/user-icon.png'"
+        mode="widthFix"
+        class="avatar"
+      />
+      <view>
+        <text>{{ record.user.name }}</text>
+        <view class="point-book-info">
+          <text v-if="bowOptionName">{{ bowOptionName }}</text>
+          <text>{{ record.distance }} 米</text>
+          <text v-if="targetTypeName">{{ targetTypeName }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="detail-data">
+      <view>
+        <view
+          :style="{ display: 'flex', alignItems: 'center' }"
+          @click="() => openTip(1)"
+        >
+          <text>落点稳定性</text>
+          <image
+            src="../static/s-question-mark.png"
+            mode="widthFix"
+            class="question-mark"
+          />
+        </view>
+        <text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
+      </view>
+      <view>
+        <view>黄心率</view>
+        <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
+      </view>
+      <view>
+        <view>10环数</view>
+        <text>{{ data.tenRings }}</text>
+      </view>
+      <view>
+        <view>平均环数</view>
+        <text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
+      </view>
+      <view>
+        <view>总环数</view>
+        <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
+      </view>
+    </view>
+    <view class="title-bar">
+      <view />
+      <text>落点分布</text>
+      <!-- <button hover-class="none" @click="() => openTip(2)">
+          <image
+            src="../static/s-question-mark.png"
+            mode="widthFix"
+            class="question-mark"
+          />
+        </button> -->
+    </view>
+    <view :style="{ transform: 'translateY(-45rpx)' }">
+      <BowTargetEdit
+        :id="targetId"
+        :src="targetSrc"
+        :arrows="arrows.filter((item) => item.x && item.y)"
+      />
+    </view>
+    <view :style="{ transform: 'translateY(-60rpx)' }">
+      <!-- <view class="title-bar">
+          <view />
+          <text>环值分布</text>
+        </view> -->
+      <view :style="{ padding: '0 30rpx' }">
+        <RingBarChart :data="ringRates" />
+      </view>
+      <!-- <view class="title-bar" :style="{ marginTop: '30rpx' }">
+          <view />
+          <text>{{
+            selectedIndex === 0 ? "每组环数" : `第${selectedIndex}组环数`
+          }}</text>
+        </view> -->
+      <view class="ring-text-groups">
+        <view v-for="(item, index) in record.groups" :key="index">
+          <view v-if="selectedIndex === 0 && index !== 0">
+            <text>{{ index }}：</text>
+            <text>{{ item.list.reduce((acc, cur) => acc + cur.ring, 0) }}</text>
+            <text>环</text>
+          </view>
+          <view
+            v-if="
+              (selectedIndex === 0 && index !== 0) ||
+              (selectedIndex !== 0 && index === selectedIndex)
+            "
+            :style="{
+              marginLeft: selectedIndex === 0 && index !== 0 ? '20rpx' : '0',
+            }"
+          >
+            <text
+              v-for="(arrow, index2) in item.list"
+              :key="index2"
+              :style="{
+                color:
+                  arrow.ring === 0 || arrow.ring === 10 ? '#FFA118' : '#666',
+              }"
+            >
+              {{
+                arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
+              }}
+            </text>
+          </view>
+        </view>
+      </view>
+      <SButton :onClick="goHome" :rounded="40">开启我的弓箭记录</SButton>
+    </view>
+    <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+      <view class="tip-content">
+        <block v-if="showTip">
+          <text>落点稳定性说明</text>
+          <text
+            >通过计算每支箭与其他箭的平均距离衡量射箭的稳定性，数字越小则说明射箭越稳定。该数据只能在用户标记落点的情况下生成。</text
+          >
+        </block>
+        <block v-if="showTip2">
+          <text>落点分布说明</text>
+          <text>展示用户某次练习中射箭的点位</text>
+        </block>
+      </view>
+    </ScreenHint2>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  background: #f5f5f5;
+  position: relative;
+  overflow: auto;
+}
+.header {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.header > image {
+  border-radius: 50%;
+  width: 90rpx;
+  height: 90rpx;
+  border: 2rpx solid #000;
+  margin: 0 25rpx;
+}
+.header > view {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.header > view > text {
+  color: #000;
+  margin-bottom: 7rpx;
+}
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.header {
+  width: 100%;
+  height: 60px;
+}
+.detail-data {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 3vw;
+  margin: 10rpx 30rpx;
+  margin-top: 20rpx;
+}
+.detail-data > view,
+.detail-data > button {
+  border-radius: 10px;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  padding: 15rpx 24rpx;
+}
+.detail-data > view > view {
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 6rpx;
+}
+.detail-data > view > view > text {
+  word-break: keep-all;
+}
+.detail-data > view > text {
+  font-weight: 500;
+  color: #000;
+}
+.detail-data > button {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #999999;
+}
+.detail-data > button > image {
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 10rpx;
+  margin-left: 20rpx;
+}
+.question-mark {
+  width: 28rpx;
+  height: 28rpx;
+  margin-left: 3px;
+}
+.title-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #999;
+  position: relative;
+  z-index: 10;
+}
+.title-bar > view:first-child {
+  width: 8rpx;
+  height: 28rpx;
+  border-radius: 10px;
+  background-color: #fed847;
+  margin-right: 7px;
+  margin-left: 15px;
+}
+.title-bar > button {
+  height: 34rpx;
+}
+.tip-content {
+  width: 100%;
+  padding: 50rpx 44rpx;
+  display: flex;
+  flex-direction: column;
+  color: #000;
+}
+.tip-content > text {
+  width: 100%;
+}
+.tip-content > text:first-child {
+  text-align: center;
+}
+.tip-content > text:last-child {
+  font-size: 13px;
+  margin-top: 20px;
+  opacity: 0.8;
+}
+.ring-text-groups {
+  display: flex;
+  flex-direction: column;
+  padding: 20rpx;
+  padding-top: 40rpx;
+  font-size: 24rpx;
+  color: #999999;
+}
+.ring-text-groups > view {
+  display: flex;
+  justify-content: center;
+}
+.ring-text-groups > view > view:first-child:nth-last-child(2) {
+  margin-top: 10rpx;
+  margin-left: 30rpx;
+  width: 90rpx;
+  text-align: center;
+  justify-content: flex-end;
+  font-size: 20rpx;
+  display: flex;
+  color: #999;
+}
+.ring-text-groups > view > view:first-child:nth-last-child(2) > text {
+  line-height: 30rpx;
+}
+.ring-text-groups
+  > view
+  > view:first-child:nth-last-child(2)
+  > text:nth-child(2) {
+  font-size: 40rpx;
+  /* min-width: 45rpx; */
+  color: #666;
+  margin-right: 6rpx;
+  margin-top: -5rpx;
+}
+.ring-text-groups > view > view:last-child {
+  width: 80%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 30rpx;
+  transform: translateX(20rpx);
+}
+.ring-text-groups > view > view:last-child > text {
+  width: 16.6%;
+  text-align: center;
+  margin-bottom: 10rpx;
+  font-weight: 500;
+  font-size: 26rpx;
+}
+.notes-input {
+  width: calc(100% - 40rpx);
+  margin: 25rpx 0;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  color: #000;
+  padding: 20rpx;
+}
+.point-book-info {
+  color: #333;
+  display: flex;
+  justify-content: center;
+}
+.point-book-info > text {
+  border-radius: 6px;
+  background-color: #fff;
+  font-size: 10px;
+  padding: 5px 10px;
+  margin-right: 5px;
+}
+</style>

src/pages/point-book-detail.vue

@@ -1,45 +1,76 @@
 <script setup>
 import { ref, onMounted, computed } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTargetEdit from "@/components/BowTargetEdit.vue";
 import ScreenHint2 from "@/components/ScreenHint2.vue";
-import SButton from "@/components/SButton.vue";
 import RingBarChart from "@/components/RingBarChart.vue";
 
-import { getPointBookDetailAPI } from "@/apis";
+import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
+import { wxShare, generateShareCard, generateShareImage } from "@/util";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, device } = storeToRefs(store);
 
 const selectedIndex = ref(0);
 const showTip = ref(false);
 const showTip2 = ref(false);
-const groups = ref([]);
+const showTip3 = ref(false);
 const data = ref({});
 const targetId = ref(0);
 const targetSrc = ref("");
 const arrows = ref([]);
+const notes = ref("");
+const draftNotes = ref("");
+const record = ref({
+  groups: [],
+  user: {},
+});
+const shareType = ref(1);
 
 const openTip = (index) => {
   if (index === 1) showTip.value = true;
   else if (index === 2) showTip2.value = true;
+  else if (index === 3) showTip3.value = true;
 };
 
 const closeTip = () => {
   showTip.value = false;
   showTip2.value = false;
+  showTip3.value = false;
+};
+
+const saveNote = async () => {
+  notes.value = draftNotes.value;
+  draftNotes.value = "";
+  showTip3.value = false;
+  if (record.value.id) {
+    await addNoteAPI(record.value.id, notes.value);
+  }
 };
 
 const onSelect = (index) => {
   selectedIndex.value = index;
-  data.value = groups.value[index];
+  data.value = record.value.groups[index];
-  arrows.value = groups.value[index].list.filter((item) => item.x && item.y);
+  arrows.value = record.value.groups[index].list.filter(
+    (item) => item.x && item.y
+  );
 };
 
 const goBack = () => {
   const pages = getCurrentPages();
-  const currentPage = pages[pages.length - 2];
+  if (pages.length > 1) {
-  uni.navigateBack({
+    const currentPage = pages[pages.length - 2];
-    delta: currentPage.route === "pages/point-book" ? 1 : 2,
+    uni.navigateBack({
-  });
+      delta: currentPage.route === "pages/point-book" ? 1 : 2,
+    });
+  } else {
+    uni.redirectTo({
+      url: "/pages/index",
+    });
+  }
 };
 
 const ringRates = computed(() => {
@@ -51,9 +82,20 @@ const ringRates = computed(() => {
   return rates.map((r) => r / arrows.value.length);
 });
 
+const loading = ref(false);
+const shareImage = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  await generateShareImage("shareImageCanvas");
+  await wxShare("shareImageCanvas");
+  loading.value = false;
+};
+
 onLoad(async (options) => {
   if (options.id) {
-    const result = await getPointBookDetailAPI(options.id || 164);
+    const result = await getPointBookDetailAPI(options.id || 209);
+    record.value = result;
+    notes.value = result.remark || "";
     const config = uni.getStorageSync("point-book-config");
     config.targetOption.some((item) => {
       if (item.id === result.targetType) {
@@ -62,12 +104,38 @@ onLoad(async (options) => {
       }
     });
     if (result.groups) {
-      groups.value = result.groups;
       data.value = result.groups[0];
       arrows.value = result.groups[0].list;
     }
   }
 });
+
+onShareAppMessage(async () => {
+  const imageUrl = await generateShareCard(
+    "shareCardCanvas",
+    record.value.recordDate,
+    data.value.userTotalRing,
+    data.value.totalRing
+  );
+  return {
+    title: "射箭打卡，今日又精进了一些～",
+    path: "/pages/point-book-detail-share?id=" + record.value.id,
+    imageUrl,
+  };
+});
+onShareTimeline(async () => {
+  const imageUrl = await generateShareCard(
+    "shareCardCanvas",
+    record.value.recordDate,
+    data.value.userTotalRing,
+    data.value.totalRing
+  );
+  return {
+    title: "射箭打卡，今日又精进了一些～",
+    query: "id=" + record.value.id,
+    imageUrl,
+  };
+});
 </script>
 
 <template>
@@ -75,11 +143,11 @@ onLoad(async (options) => {
     :bgType="2"
     bgColor="#F5F5F5"
     :whiteBackArrow="false"
-    title="分析"
+    title=""
     :onBack="goBack"
   >
     <view class="container">
-      <view class="tab-bar">
+      <!-- <view class="tab-bar">
         <view
           v-for="(_, index) in groups"
           :key="index"
@@ -94,20 +162,25 @@ onLoad(async (options) => {
             }"
             >{{ index === 0 ? "全部" : `第${index}组` }}</text
           >
-          <!-- <image
-            src="../static/s-triangle.png"
-            mode="widthFix"
-            :style="{ bottom: selectedIndex !== index ? '0' : '-5px' }"
-          /> -->
         </view>
-      </view>
+      </view> -->
+      <canvas
+        class="share-canvas"
+        canvas-id="shareCardCanvas"
+        style="width: 375px; height: 300px"
+      ></canvas>
+      <canvas
+        class="share-canvas"
+        canvas-id="shareImageCanvas"
+        style="width: 375px; height: 860px"
+      ></canvas>
       <view class="detail-data">
         <view>
           <view
             :style="{ display: 'flex', alignItems: 'center' }"
             @click="() => openTip(1)"
           >
-            <text>落点稳定性</text>
+            <text>Stability</text>
             <image
               src="../static/s-question-mark.png"
               mode="widthFix"
@@ -117,60 +190,59 @@ onLoad(async (options) => {
           <text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
         </view>
         <view>
-          <view>黄心率</view>
+          <view>Yellow Rate</view>
           <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
         </view>
         <view>
-          <view>10环数</view>
+          <view>Gold Rings</view>
           <text>{{ data.tenRings }}</text>
         </view>
         <view>
-          <view>平均环数</view>
+          <view>Avg Rings</view>
           <text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
         </view>
         <view>
-          <view>总环数</view>
+          <view>Total Rings</view>
           <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
         </view>
+        <button
+          hover-class="none"
+          @click="() => openTip(3)"
+          v-if="user.id === record.user.id"
+        >
+          <image src="../static/edit.png" mode="widthFix" />
+          <text>Notes</text>
+        </button>
       </view>
       <view class="title-bar">
         <view />
-        <text>落点分布</text>
+        <text>Distribution</text>
-        <button hover-class="none" @click="() => openTip(2)">
+        <!-- <button hover-class="none" @click="() => openTip(2)">
           <image
             src="../static/s-question-mark.png"
             mode="widthFix"
             class="question-mark"
           />
-        </button>
+        </button> -->
       </view>
       <view :style="{ transform: 'translateY(-45rpx)' }">
         <BowTargetEdit
           :id="targetId"
           :src="targetSrc"
           :arrows="arrows.filter((item) => item.x && item.y)"
-          :editMode="false"
         />
       </view>
-      <view :style="{ transform: 'translateY(-90rpx)' }">
+      <view :style="{ transform: 'translateY(-60rpx)' }">
-        <view class="title-bar">
-          <view />
-          <text>环值分布</text>
-        </view>
         <view :style="{ padding: '0 30rpx' }">
           <RingBarChart :data="ringRates" />
         </view>
-        <view class="title-bar" :style="{ marginTop: '30rpx' }">
-          <view />
-          <text>{{
-            selectedIndex === 0 ? "每组环数" : `第${selectedIndex}组环数`
-          }}</text>
-        </view>
         <view class="ring-text-groups">
-          <view v-for="(item, index) in groups" :key="index">
+          <view v-for="(item, index) in record.groups" :key="index">
-            <text v-if="selectedIndex === 0 && index !== 0">{{
+            <view v-if="selectedIndex === 0 && index !== 0">
-              `第${index}组`
+              <text>{{ index }}：</text>
-            }}</text>
+              <text>{{ item.userTotalRing }}</text>
+              <text>Ring</text>
+            </view>
             <view
               v-if="
                 (selectedIndex === 0 && index !== 0) ||
@@ -186,31 +258,66 @@ onLoad(async (options) => {
                 }"
               >
                 {{
-                  arrow.ring === 0
+                  arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
-                    ? "X"
-                    : arrow.ring === -1
-                    ? "M"
-                    : arrow.ring + "环"
                 }}
               </text>
             </view>
           </view>
         </view>
-        <view :style="{ marginBottom: '40rpx' }">
+        <view
-          <SButton :onClick="goBack" :rounded="50">关闭</SButton>
+          class="btns"
+          :style="{
+            gridTemplateColumns: `repeat(${
+              user.id === record.user.id ? 1 : 1
+            }, 1fr)`,
+          }"
+        >
+          <button hover-class="none" @click="goBack">Close</button>
+          <!-- <button
+            hover-class="none"
+            @click="shareImage"
+            v-if="user.id === record.user.id"
+          >
+            分享
+          </button> -->
         </view>
       </view>
-      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+      <ScreenHint2
+        :show="showTip || showTip2 || showTip3"
+        :onClose="!notes && showTip3 ? null : closeTip"
+      >
         <view class="tip-content">
           <block v-if="showTip">
-            <text>落点稳定性说明</text>
+            <text>Stability Description</text>
             <text
-              >通过计算每支箭与其他箭的平均距离衡一量射箭的稳定性，数字越小则说明射箭越稳定。该数据只能在用户标记落点的情况下生成。</text
+              >The stability of archery is measured by calculating the average
+              distance of each arrow to other arrows. The smaller the number,
+              the more stable the archery. This data can only be generated when
+              the user marks the landing point.</text
             >
           </block>
           <block v-if="showTip2">
-            <text>落点分布说明</text>
+            <text>Distribution Description</text>
-            <text>展示用户某次练习中射箭的点位</text>
+            <text>Show the user's archery points in a practice session</text>
+          </block>
+          <block v-if="showTip3">
+            <text>Notes</text>
+            <text v-if="notes">{{ notes }}</text>
+            <textarea
+              v-if="!notes"
+              v-model="draftNotes"
+              maxlength="300"
+              rows="4"
+              class="notes-input"
+              placeholder="写下本次射箭的补充信息与心得"
+              placeholder-style="color: #ccc;"
+            />
+            <view v-if="!notes">
+              <button hover-class="none" @click="showTip3 = false">
+                Cancel
+              </button>
+              <button hover-class="none" @click="saveNote">Save Notes</button>
+            </view>
           </block>
         </view>
       </ScreenHint2>
@@ -264,8 +371,10 @@ onLoad(async (options) => {
   grid-template-columns: repeat(3, 1fr);
   column-gap: 3vw;
   margin: 10rpx 30rpx;
+  margin-top: 20rpx;
 }
-.detail-data > view {
+.detail-data > view,
+.detail-data > button {
   border-radius: 10px;
   background-color: #fff;
   margin-bottom: 20rpx;
@@ -283,6 +392,18 @@ onLoad(async (options) => {
   font-weight: 500;
   color: #000;
 }
+.detail-data > button {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #999999;
+}
+.detail-data > button > image {
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 10rpx;
+  margin-left: 20rpx;
+}
 .question-mark {
   width: 28rpx;
   height: 28rpx;
@@ -310,10 +431,11 @@ onLoad(async (options) => {
 }
 .tip-content {
   width: 100%;
-  padding: 25px;
+  padding: 50rpx 44rpx;
   display: flex;
   flex-direction: column;
   color: #000;
+  overflow: hidden;
 }
 .tip-content > text {
   width: 100%;
@@ -326,11 +448,38 @@ onLoad(async (options) => {
   margin-top: 20px;
   opacity: 0.8;
 }
+.tip-content > view {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tip-content > view > input {
+  width: 80%;
+  height: 44px;
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 0 12px;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button {
+  width: 48%;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 12px 0;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
 .ring-text-groups {
   display: flex;
   flex-direction: column;
   padding: 20rpx;
-  padding-top: 30rpx;
+  padding-top: 40rpx;
   font-size: 24rpx;
   color: #999999;
 }
@@ -338,22 +487,74 @@ onLoad(async (options) => {
   display: flex;
   justify-content: center;
 }
-.ring-text-groups > view > text {
+.ring-text-groups > view > view:first-child:nth-last-child(2) {
-  width: 82rpx;
+  margin-top: 10rpx;
+  margin-left: 30rpx;
+  width: 90rpx;
   text-align: center;
-  font-size: 27rpx;
+  justify-content: flex-end;
+  font-size: 20rpx;
+  display: flex;
+  color: #999;
 }
-.ring-text-groups > view > view {
+.ring-text-groups > view > view:first-child:nth-last-child(2) > text {
-  flex: 1;
+  line-height: 30rpx;
-  display: grid;
+}
-  grid-template-columns: repeat(6, auto);
+.ring-text-groups
-  grid-gap: 10rpx;
+  > view
+  > view:first-child:nth-last-child(2)
+  > text:nth-child(2) {
+  font-size: 40rpx;
+  /* min-width: 45rpx; */
+  color: #666;
+  margin-right: 6rpx;
+  margin-top: -5rpx;
+}
+.ring-text-groups > view > view:last-child {
+  width: 80%;
+  display: flex;
+  flex-wrap: wrap;
   margin-bottom: 30rpx;
-  margin-left: 20rpx;
+  transform: translateX(20rpx);
 }
-.ring-text-groups > view > view > text {
+.ring-text-groups > view > view:last-child > text {
-  width: 1fr;
+  width: 16.6%;
   text-align: center;
   margin-bottom: 10rpx;
+  font-weight: 500;
+  font-size: 26rpx;
+}
+.notes-input {
+  width: calc(100% - 40rpx);
+  min-width: calc(100% - 40rpx);
+  margin: 25rpx 0;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  padding: 5px;
+  color: #000;
+  padding: 20rpx;
+}
+.btns {
+  margin-bottom: 40rpx;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  column-gap: 20rpx;
+  padding: 0 20rpx;
+}
+.btns > button {
+  height: 84rpx;
+  line-height: 84rpx;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%), #ffffff;
+  border-radius: 44rpx;
+  border: 2rpx solid #eeeeee;
+  box-sizing: border-box;
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #000000;
+}
+.btns > button:nth-child(2) {
+  background: #fed847;
+  border: none;
 }
 </style>

src/pages/point-book-edit.vue

@@ -36,7 +36,7 @@ const onSubmit = async () => {
   );
   if (!isComplete) {
     return uni.showToast({
-      title: "请完善信息",
+      title: "Please complete the information",
       icon: "none",
     });
   }
@@ -44,7 +44,7 @@ const onSubmit = async () => {
     currentGroup.value++;
     currentArrow.value = 0;
   } else {
-    const pointBook = uni.getStorageSync("point-book");
+    const pointBook = uni.getStorageSync("last-point-book");
     const res = await savePointBookAPI(
       pointBook.bowType.id,
       pointBook.distance,
@@ -75,7 +75,7 @@ const onEditDone = (arrow) => {
 };
 
 onMounted(() => {
-  const pointBook = uni.getStorageSync("point-book");
+  const pointBook = uni.getStorageSync("last-point-book");
   if (pointBook.bowtargetType) {
     bowtarget.value = pointBook.bowtargetType;
     if (bowtarget.value.id > 3) {
@@ -112,11 +112,11 @@ onMounted(() => {
       <view class="title-bar">
         <view>
           <view />
-          <text>第 {{ currentGroup }} 组</text>
+          <text>Set {{ currentGroup }}</text>
         </view>
         <view @click="deleteArrow">
           <image src="../static/delete.png" />
-          <text>删除</text>
+          <text>Delete</text>
         </view>
       </view>
       <view class="bow-arrows">
@@ -133,12 +133,15 @@ onMounted(() => {
             isNaN(arrow.ring)
               ? arrow.ring
               : arrow.ring
-              ? arrow.ring + " 环"
+              ? arrow.ring + " points"
               : ""
           }}</view
         >
       </view>
-      <text>推荐在靶纸上落点计分，这样可获得稳定性分析</text>
+      <text
+        >It is recommended to score on the target face to obtain stability
+        analysis</text
+      >
       <view class="bow-rings">
         <view
           v-for="(item, index) in ringTypes"
@@ -155,12 +158,12 @@ onMounted(() => {
       </view>
       <ScreenHint2 :show="showTip">
         <view class="tip-content">
-          <text>现在离开会导致</text>
+          <text>Leaving now will result in the loss of unsaved data.</text>
-          <text>未提交的数据丢失，是否继续？</text>
+          <text>Are you sure you want to continue?</text>
           <view>
-            <button hover-class="none" @click="onBack">退出</button>
+            <button hover-class="none" @click="onBack">Exit</button>
             <button hover-class="none" @click="showTip = false">
-              继续记录
+              Continue
             </button>
           </view>
         </view>
@@ -168,7 +171,7 @@ onMounted(() => {
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton :rounded="50" :onClick="onSubmit">
-        {{ currentGroup === groups ? "记完了，提交看分析" : "下一组" }}
+        {{ currentGroup === groups ? "Submit for analysis" : "Next set" }}
       </SButton>
     </view>
   </Container>

src/pages/point-book-home.vue

@@ -0,0 +1,381 @@
+<script setup>
+import { ref, computed, onMounted, watch } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import PointRecord from "@/components/PointRecord.vue";
+import RingBarChart from "@/components/RingBarChart.vue";
+
+import { getPointBookConfigAPI, getPointBookStatisticsAPI } from "@/apis";
+import { getElementRect } from "@/util";
+import { generateKDEHeatmapImage } from "@/kde-heatmap";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const isIOS = computed(() => {
+  const systemInfo = uni.getDeviceInfo();
+  return systemInfo.osName === "ios";
+});
+
+const loadImage = ref(false);
+const data = ref({
+  weeksCheckIn: [],
+  ringRate: [],
+});
+
+const bowTargetSrc = ref("");
+const heatMapImageSrc = ref(""); // 存储热力图图片地址
+
+const startScoring = () => {
+  if (user.value.id) {
+    uni.navigateTo({
+      url: "/pages/point-book-create",
+    });
+  } else {
+    showModal.value = true;
+  }
+};
+
+const loadData = async () => {
+  const result = await getPointBookStatisticsAPI();
+  data.value = result;
+
+  const rect = await getElementRect(".heat-map");
+  let hot = 0;
+  if (result.checkInCount > -3 && result.checkInCount < 3) hot = 1;
+  else if (result.checkInCount >= 3) hot = 2;
+  else if (result.checkInCount >= 5) hot = 3;
+  else if (result.checkInCount === 7) hot = 4;
+  uni.$emit("update-hot", hot);
+  return;
+  loadImage.value = true;
+  const generateHeatmapAsync = async () => {
+    const weekArrows = result.weekArrows
+      .filter((item) => item.x && item.y)
+      .map((item) => [item.x, item.y]);
+
+    try {
+      // 渐进式渲染：数据量大时先快速渲染粗略版本
+      if (weekArrows.length > 1000) {
+        const quickPath = await generateKDEHeatmapImage(
+          "heatMapCanvas",
+          rect.width,
+          rect.height,
+          weekArrows
+        );
+        heatMapImageSrc.value = quickPath;
+        // 延迟后再渲染精细版本
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      }
+
+      // 渲染最终精细版本
+      const finalPath = await generateKDEHeatmapImage(
+        "heatMapCanvas",
+        rect.width,
+        rect.height,
+        weekArrows,
+        {
+          range: [0, 1],
+          gridSize: 120, // 更高的网格密度，减少锯齿
+          bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
+          showPoints: false,
+        }
+      );
+      heatMapImageSrc.value = finalPath;
+      loadImage.value = false;
+      console.log("热力图图片地址:", finalPath);
+    } catch (error) {
+      console.error("生成热力图图片失败:", error);
+      loadImage.value = false;
+    }
+  };
+
+  // 异步生成热力图，不阻塞UI
+  generateHeatmapAsync();
+};
+
+onMounted(async () => {
+  const config = await getPointBookConfigAPI();
+  uni.setStorageSync("point-book-config", config);
+  if (config.targetOption && config.targetOption[0]) {
+    bowTargetSrc.value = config.targetOption[0].icon;
+  }
+});
+
+watch(
+  () => user.value.id,
+  (id) => {
+    if (id) loadData();
+  }
+);
+
+onShow(async () => {
+  if (user.value.id) loadData();
+});
+</script>
+
+<template>
+  <view class="container">
+    <view class="daily-signin">
+      <view>
+        <image src="../static/week-check.png" />
+      </view>
+      <view :class="data.weeksCheckIn[0] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[0]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Mon</text>
+      </view>
+      <view :class="data.weeksCheckIn[1] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[1]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Tue</text>
+      </view>
+      <view :class="data.weeksCheckIn[2] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[2]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Wed</text>
+      </view>
+      <view :class="data.weeksCheckIn[3] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[3]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Thu</text>
+      </view>
+      <view :class="data.weeksCheckIn[4] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[4]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Fri</text>
+      </view>
+      <view :class="data.weeksCheckIn[5] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[5]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Sat</text>
+      </view>
+      <view :class="data.weeksCheckIn[6] ? 'checked' : ''">
+        <image
+          v-if="data.weeksCheckIn[6]"
+          src="../static/checked-green2.png"
+          mode="widthFix"
+        />
+        <view v-else></view>
+        <text>Sun</text>
+      </view>
+    </view>
+    <view class="statistics">
+      <view>
+        <text>{{ data.todayTotalArrow || "-" }}</text>
+        <text>Today's Arrows</text>
+      </view>
+      <view>
+        <text>{{ data.totalArrow || "-" }}</text>
+        <text>Total Arrows</text>
+      </view>
+      <view>
+        <text>{{ data.totalDay || "-" }}</text>
+        <text>Training Days</text>
+      </view>
+      <view>
+        <text>{{ data.averageRing || "-" }}</text>
+        <text>Avg Score</text>
+      </view>
+      <view>
+        <text>{{
+          data.yellowRate !== undefined
+            ? Number((data.yellowRate * 100).toFixed(2)) + "%"
+            : "-"
+        }}</text>
+        <text>Gold Rate</text>
+      </view>
+      <view>
+        <button hover-class="none" @click="startScoring">
+          <image src="../static/start-scoring.png" mode="widthFix" />
+        </button>
+      </view>
+    </view>
+    <view class="title" :style="{ marginBottom: 0 }">
+      <image src="../static/point-book-title1.png" mode="widthFix" />
+    </view>
+    <view class="heat-map">
+      <image
+        :src="bowTargetSrc || '../static/bow-target.png'"
+        mode="widthFix"
+      />
+      <image v-if="heatMapImageSrc" :src="heatMapImageSrc" mode="aspectFill" />
+      <view v-if="loadImage" class="load-image">
+        <text>Generating...</text>
+      </view>
+      <canvas
+        id="heatMapCanvas"
+        canvas-id="heatMapCanvas"
+        type="2d"
+        style="
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: -1000px;
+          left: 0;
+          z-index: 2;
+        "
+      />
+    </view>
+    <RingBarChart :data="data.ringRate" />
+    <view :style="{ height: '25rpx' }" />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.statistics {
+  border-radius: 25rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  border: 4rpx solid #fed848;
+  background: #fff;
+  font-size: 22rpx;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 25rpx 0;
+  margin-bottom: 10rpx;
+}
+.statistics > view {
+  width: 33.33%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.statistics > view:nth-child(-n + 3) {
+  margin-bottom: 25rpx;
+}
+.statistics > view:nth-child(2),
+.statistics > view:nth-child(5) {
+  border-left: 1rpx solid #eeeeee;
+  border-right: 1rpx solid #eeeeee;
+  box-sizing: border-box;
+}
+.statistics > view > text {
+  text-align: center;
+  font-size: 22rpx;
+  color: #333333;
+}
+.statistics > view > text:first-child {
+  font-weight: 500;
+  font-size: 40rpx;
+  margin-bottom: 10rpx;
+}
+.statistics > view:last-child > button > image {
+  width: 164rpx;
+}
+.daily-signin {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10rpx;
+  border-radius: 20rpx;
+  margin-bottom: 25rpx;
+}
+.daily-signin > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+}
+.daily-signin > view:not(:first-child) {
+  background: #f8f8f8;
+  box-sizing: border-box;
+  width: 78rpx;
+  height: 94rpx;
+  padding-top: 10rpx;
+}
+.daily-signin > view:not(:first-child) > image {
+  width: 32rpx;
+  height: 32rpx;
+}
+.daily-signin > view:not(:first-child) > view {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 2rpx solid #333;
+}
+.daily-signin > view > text {
+  font-size: 20rpx;
+  color: #999999;
+  font-weight: 500;
+  text-align: center;
+  margin-top: 10rpx;
+}
+.daily-signin > view:first-child > image {
+  width: 72rpx;
+  height: 94rpx;
+}
+.checked {
+  border: 2rpx solid #000;
+}
+.checked > text {
+  color: #333 !important;
+}
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 25rpx 0;
+}
+.title > image {
+  width: 566rpx;
+}
+.heat-map {
+  position: relative;
+  margin: 0 auto;
+  width: calc(100vw - 70rpx);
+  height: calc(100vw - 70rpx);
+  transform: scale(0.9);
+}
+.heat-map > image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.load-image {
+  position: absolute;
+  width: 160rpx;
+  top: calc(50% - 65rpx);
+  left: calc(50% - 75rpx);
+  color: #525252;
+  font-size: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

src/pages/point-book-list.vue

@@ -5,14 +5,17 @@ import SModal from "@/components/SModal.vue";
 import EditOption from "@/components/EditOption.vue";
 import PointRecord from "@/components/PointRecord.vue";
 import ScrollList from "@/components/ScrollList.vue";
-import { getPointBookListAPI } from "@/apis";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+import { getPointBookListAPI, removePointRecord } from "@/apis";
 
+const showTip = ref(false);
 const bowType = ref({});
 const distance = ref(0);
 const bowtargetType = ref({});
 const showModal = ref(false);
 const selectorIndex = ref(0);
 const list = ref([]);
+const removeId = ref("");
 
 const onListLoading = async (page) => {
   const result = await getPointBookListAPI(
@@ -34,6 +37,22 @@ const openSelector = (index) => {
   showModal.value = true;
 };
 
+const onRemoveRecord = (item) => {
+  removeId.value = item.id;
+  showTip.value = true;
+};
+
+const confirmRemove = async () => {
+  try {
+    showTip.value = false;
+    await removePointRecord(removeId.value);
+    list.value = list.value.filter((it) => it.id !== removeId.value);
+    uni.showToast({ title: "Deleted", icon: "none" });
+  } catch (e) {
+    uni.showToast({ title: "Delete failed, please retry", icon: "none" });
+  }
+};
+
 const onSelectOption = (itemIndex, value) => {
   if (itemIndex === 0) {
     bowType.value = value.name === bowType.value.name ? {} : value;
@@ -52,35 +71,36 @@ const onSelectOption = (itemIndex, value) => {
     :bgType="2"
     bgColor="#F5F5F5"
     :whiteBackArrow="false"
-    title="计分记录"
+    title="Point Records"
   >
     <view class="container">
       <view class="selectors">
         <view @click="() => openSelector(0)">
           <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
-            bowType.name || "请选择"
+            bowType.name || "Please select"
           }}</text>
           <image src="../static/arrow-grey.png" mode="widthFix" />
         </view>
         <view @click="() => openSelector(1)">
           <text :style="{ color: distance ? '#000' : '#999' }">{{
-            distance ? distance + " 米" : "请选择"
+            distance ? distance + " m" : "Please select"
           }}</text>
           <image src="../static/arrow-grey.png" mode="widthFix" />
         </view>
         <view @click="() => openSelector(2)">
           <text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
-            bowtargetType.name || "请选择"
+            bowtargetType.name || "Please select"
           }}</text>
           <image src="../static/arrow-grey.png" mode="widthFix" />
         </view>
       </view>
       <view class="point-records">
         <ScrollList :onLoading="onListLoading">
-          <view v-for="(item, index) in list" :key="index">
+          <view v-for="(item, index) in list" :key="item.id">
-            <PointRecord :data="item" />
+            <PointRecord :data="item" :onRemove="onRemoveRecord" />
+            <view v-if="index < list.length - 1" :style="{ height: '25rpx' }"></view>
           </view>
-          <view class="no-data" v-if="list.length === 0">暂无数据</view>
+          <view class="no-data" v-if="list.length === 0">No data</view>
         </ScrollList>
       </view>
       <SModal
@@ -119,6 +139,15 @@ const onSelectOption = (itemIndex, value) => {
           />
         </view>
       </SModal>
+      <ScreenHint2 :show="showTip">
+        <view class="tip-content">
+          <text>Are you sure to delete this record?</text>
+          <view>
+            <button hover-class="none" @click="showTip = false">Cancel</button>
+            <button hover-class="none" @click="confirmRemove">Confirm</button>
+          </view>
+        </view>
+      </ScreenHint2>
     </view>
   </Container>
 </template>
@@ -186,4 +215,34 @@ const onSelectOption = (itemIndex, value) => {
   color: #999999;
   font-size: 14px;
 }
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  color: #000;
+}
+.tip-content > text {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.tip-content > view {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.tip-content > view > button {
+  width: 48%;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 12px 0;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
 </style>

src/pages/point-book-profile.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { ref } from "vue";
+import Avatar from "@/components/Avatar.vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const editAvatar = ref(false);
+
+const toEditPage = (type) => {
+  uni.navigateTo({
+    url: "/pages/edit-profile?type=" + type,
+  });
+};
+
+const toSignInPage = () => {
+  uni.navigateTo({
+    url: "/pages/sign-in",
+  });
+};
+</script>
+
+<template>
+  <view class="container">
+    <view class="header">
+      <image :src="user.avatar" mode="widthFix" />
+      <button hover-class="none" @click="editAvatar = true">
+        <image src="../static/pen-yellow.png" mode="widthFix" />
+      </button>
+    </view>
+    <view class="body">
+      <view>
+        <button hover-class="none" @click="toEditPage('Name')">
+          <image src="../static/user-yellow.png" mode="widthFix" />
+          <text>Name</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+        <button hover-class="none" @click="toEditPage('Email')">
+          <image src="../static/email-yellow.png" mode="widthFix" />
+          <text>Email</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+        <button hover-class="none" @click="toEditPage('Password')">
+          <image src="../static/password-yellow.png" mode="widthFix" />
+          <text>Password</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+      </view>
+      <button hover-class="none" @click="toSignInPage">Log out</button>
+      <view>
+        <text>Have questions? Please contact us through email: </text>
+        <text>shelingxingqiu@163.com</text>
+      </view>
+    </view>
+    <view
+      class="edit-avatar"
+      :style="{ height: editAvatar ? '100vh' : '0' }"
+      @click="editAvatar = false"
+    >
+      <image :src="user.avatar" mode="widthFix" />
+      <view>
+        <button hover-class="none">
+          <text>Take a photo</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+        <button hover-class="none">
+          <text>Choose photo</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+.header {
+  position: relative;
+  margin-top: -120rpx;
+}
+.header > image {
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 50%;
+  border: 4rpx solid #fff;
+}
+.header > button {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.header > button > image {
+  width: 60rpx;
+  height: 60rpx;
+}
+.body {
+  width: 100%;
+  margin-top: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.body > view:first-child {
+  background-color: $uni-bg-color;
+  border-radius: 25px;
+  padding: 0 20px;
+  width: calc(100% - 80rpx);
+}
+.body > view:first-child > button {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+}
+.body > view:first-child > button:not(:last-child) {
+  border-bottom: 1rpx solid #e3e3e3;
+}
+.body > view:first-child > button > image:first-child {
+  width: 40rpx;
+  height: 40rpx;
+}
+.body > view:first-child > button > text {
+  flex: 1;
+  font-size: 26rpx;
+  color: #333333;
+  text-align: left;
+  padding-left: 20rpx;
+}
+.body > view:first-child > button > image:last-child {
+  width: 28rpx;
+  height: 28rpx;
+}
+.body > button {
+  margin-top: 24rpx;
+  background: $uni-bg-color;
+  border-radius: 24rpx;
+  font-size: 26rpx;
+  color: $uni-link-color;
+  text-align: center;
+  padding: 20px 0;
+  width: 100%;
+}
+.body > view:last-child {
+  margin-top: auto;
+  padding-bottom: 25rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 24rpx;
+  color: #666666;
+}
+.body > view:last-child > text:last-child {
+  color: $uni-link-color;
+}
+.edit-avatar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100vw;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.edit-avatar > image {
+  width: 85vw;
+  height: 85vw;
+  border-radius: 50%;
+}
+.edit-avatar > view {
+  border-radius: 25rpx;
+  margin-top: 100rpx;
+  width: calc(100% - 150rpx);
+  padding: 0 40rpx;
+  background: #404040;
+}
+.edit-avatar > view > button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 30rpx;
+  color: #ffffff;
+  padding: 40rpx 0;
+}
+.edit-avatar > view > button:not(:last-child) {
+  border-bottom: 1rpx solid #fff3;
+  border-radius: 0;
+}
+.edit-avatar > view > button > image {
+  width: 28rpx;
+}
+</style>

src/pages/point-book.vue

@@ -14,6 +14,7 @@ import {
   getPointBookConfigAPI,
   getPointBookListAPI,
   getPointBookStatisticsAPI,
+  removePointRecord,
 } from "@/apis";
 
 import { getElementRect } from "@/util";
@@ -34,6 +35,7 @@ const isIOS = computed(() => {
 const loadImage = ref(false);
 const showModal = ref(false);
 const showTip = ref(false);
+const showTip2 = ref(false);
 const data = ref({
   weeksCheckIn: [],
 });
@@ -42,6 +44,7 @@ const list = ref([]);
 const bowTargetSrc = ref("");
 const heatMapImageSrc = ref(""); // 存储热力图图片地址
 const canvasVisible = ref(false); // 控制canvas显示状态
+const removeId = ref("");
 
 const toListPage = () => {
   uni.navigateTo({
@@ -63,6 +66,23 @@ const startScoring = () => {
   }
 };
 
+const onRemoveRecord = (item) => {
+  removeId.value = item.id;
+  showTip2.value = true;
+};
+
+const confirmRemove = async () => {
+  try {
+    showTip2.value = false;
+    await removePointRecord(removeId.value);
+    const result = await getPointBookListAPI(1);
+    list.value = result.slice(0, 3);
+    uni.showToast({ title: "Deleted", icon: "none" });
+  } catch (e) {
+    uni.showToast({ title: "Delete failed, please retry", icon: "none" });
+  }
+};
+
 const loadData = async () => {
   const result = await getPointBookListAPI(1);
   list.value = result.slice(0, 3);
@@ -111,9 +131,9 @@ const loadData = async () => {
       );
       heatMapImageSrc.value = finalPath;
       loadImage.value = false;
-      console.log("热力图图片地址:", finalPath);
+      console.log("Heatmap image path:", finalPath);
     } catch (error) {
-      console.error("生成热力图图片失败:", error);
+      console.error("Failed to generate heatmap image:", error);
       loadImage.value = false;
     }
   };
@@ -130,6 +150,7 @@ watch(
 );
 
 onShow(async () => {
+  uni.removeStorageSync("point-book");
   if (user.value.id) loadData();
 });
 
@@ -153,22 +174,22 @@ onBeforeUnmount(() => {
   uni.$off("point-book-signin", onSignin);
 });
 
-onShareAppMessage(() => {
+// onShareAppMessage(() => {
-  return {
+//   return {
-    title: "高效记录每一次射箭，深度分析助你提升！",
+//     title: "高效记录每一次射箭，深度分析助你提升！",
-    path: "pages/point-book",
+//     path: "pages/point-book",
-    imageUrl:
+//     imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
+//       "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
-  };
+//   };
-});
+// });
-onShareTimeline(() => {
+// onShareTimeline(() => {
-  return {
+//   return {
-    title: "高效记录每一次射箭，深度分析助你提升！",
+//     title: "高效记录每一次射箭，深度分析助你提升！",
-    query: "from=timeline",
+//     query: "from=timeline",
-    imageUrl:
+//     imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
+//       "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
-  };
+//   };
-});
+// });
 </script>
 
 <template>
@@ -185,7 +206,7 @@ onShareTimeline(() => {
             mode="widthFix"
           />
           <view v-else></view>
-          <text>周一</text>
+          <text>Mon</text>
         </view>
         <view :class="data.weeksCheckIn[1] ? 'checked' : ''">
           <image
@@ -194,7 +215,7 @@ onShareTimeline(() => {
             mode="widthFix"
           />
           <view v-else></view>
-          <text>周二</text>
+          <text>Tue</text>
         </view>
         <view :class="data.weeksCheckIn[2] ? 'checked' : ''">
           <image
@@ -203,7 +224,7 @@ onShareTimeline(() => {
             mode="widthFix"
           />
           <view v-else></view>
-          <text>周三</text>
+          <text>Wed</text>
         </view>
         <view :class="data.weeksCheckIn[3] ? 'checked' : ''">
           <image
@@ -212,7 +233,7 @@ onShareTimeline(() => {
             mode="widthFix"
           />
           <view v-else></view>
-          <text>周四</text>
+          <text>Thu</text>
         </view>
         <view :class="data.weeksCheckIn[4] ? 'checked' : ''">
           <image
@@ -221,7 +242,7 @@ onShareTimeline(() => {
             mode="widthFix"
           />
           <view v-else></view>
-          <text>周五</text>
+          <text>Fri</text>
         </view>
         <view :class="data.weeksCheckIn[5] ? 'checked' : ''">
           <image
@@ -230,7 +251,7 @@ onShareTimeline(() => {
             mode="widthFix"
           />
           <view v-else></view>
-          <text>周六</text>
+          <text>Sat</text>
         </view>
         <view :class="data.weeksCheckIn[6] ? 'checked' : ''">
           <image
@@ -239,25 +260,25 @@ onShareTimeline(() => {
             mode="widthFix"
           />
           <view v-else></view>
-          <text>周日</text>
+          <text>Sun</text>
         </view>
       </view>
       <view class="statistics">
         <view>
           <text>{{ data.todayTotalArrow || "-" }}</text>
-          <text>今日射箭(箭)</text>
+          <text>Arrows Today</text>
         </view>
         <view>
           <text>{{ data.totalArrow || "-" }}</text>
-          <text>累计射箭(箭)</text>
+          <text>Total Arrows</text>
         </view>
         <view>
           <text>{{ data.totalDay || "-" }}</text>
-          <text>已训练天数(天)</text>
+          <text>Training Days</text>
         </view>
         <view>
           <text>{{ data.averageRing || "-" }}</text>
-          <text>平均环数(箭)</text>
+          <text>Average Rings</text>
         </view>
         <view>
           <text>{{
@@ -265,7 +286,7 @@ onShareTimeline(() => {
               ? Number((data.yellowRate * 100).toFixed(2)) + "%"
               : "-"
           }}</text>
-          <text>黄心率</text>
+          <text>Gold Rate</text>
         </view>
         <view>
           <button hover-class="none" @click="startScoring">
@@ -287,7 +308,7 @@ onShareTimeline(() => {
           mode="aspectFill"
         />
         <view v-if="loadImage" class="load-image">
-          <text>生成中...</text>
+          <text>Generating...</text>
         </view>
         <canvas
           id="heatMapCanvas"
@@ -312,8 +333,12 @@ onShareTimeline(() => {
       <view class="title" v-if="user.id">
         <image src="../static/point-book-title2.png" mode="widthFix" />
       </view>
-      <block v-for="(item, index) in list" :key="index">
+      <block v-for="(item, index) in list" :key="item.id">
         <PointRecord :data="item" />
+        <view
+          v-if="index < list.length - 1"
+          :style="{ height: '25rpx' }"
+        ></view>
       </block>
       <view
         class="see-more"
@@ -321,15 +346,29 @@ onShareTimeline(() => {
         v-if="list.length"
         :style="{ marginBottom: isIOS ? '10rpx' : 0 }"
       >
-        <text>查看所有记录</text>
+        <text>View all records</text>
         <image src="../static/enter-arrow-blue.png" mode="widthFix" />
       </view>
     </view>
     <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
       <Signin :onClose="() => (showModal = false)" :noBg="true" />
     </SModal>
-    <ScreenHint2 :show="showTip" :onClose="() => (showTip = false)">
+    <ScreenHint2
-      <RewardUs :show="showTip" :onClose="() => (showTip = false)" />
+      :show="showTip || showTip2"
+      :onClose="showTip ? () => (showTip = false) : null"
+    >
+      <RewardUs
+        v-if="showTip"
+        :show="showTip"
+        :onClose="() => (showTip = false)"
+      />
+      <view class="tip-content" v-if="showTip2">
+        <text>Are you sure to delete this record?</text>
+        <view>
+          <button hover-class="none" @click="showTip2 = false">Cancel</button>
+          <button hover-class="none" @click="confirmRemove">Confirm</button>
+        </view>
+      </view>
     </ScreenHint2>
   </Container>
 </template>
@@ -479,4 +518,34 @@ onShareTimeline(() => {
   width: 100%;
   height: 100%;
 }
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  color: #000;
+}
+.tip-content > text {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.tip-content > view {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.tip-content > view > button {
+  width: 48%;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 12px 0;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
 </style>

src/pages/reset-password.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from "vue";
+import InputRow from "@/components/InputRow.vue";
+import SButton from "@/components/SButton.vue";
+
+const toSignInPage = () => {
+  uni.navigateBack();
+};
+</script>
+
+<template>
+  <view class="container">
+    <text class="title">Reset Password</text>
+    <text class="sub-title">Enter email address to reset password</text>
+    <InputRow placeholder="email" width="80vw" />
+    <InputRow
+      placeholder="verification code"
+      type="number"
+      width="80vw"
+      btnType="code"
+    />
+    <InputRow type="password" placeholder="password" width="80vw" />
+    <InputRow type="password" placeholder="confirm password" width="80vw" />
+    <view :style="{ height: '20rpx' }"></view>
+    <SButton width="80vw">Submit</SButton>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 240rpx;
+  background: #f5f5f5;
+}
+.title {
+  font-weight: 600;
+  font-size: 48rpx;
+  color: #333333;
+  width: 80vw;
+  margin-bottom: 10rpx;
+}
+.sub-title {
+  font-size: 24rpx;
+  color: #666666;
+  width: 80vw;
+  margin-bottom: 20rpx;
+}
+</style>

src/pages/sign-in.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from "vue";
+import InputRow from "@/components/InputRow.vue";
+import SButton from "@/components/SButton.vue";
+
+const checked = ref(false);
+
+const toSignUpPage = () => {
+  uni.navigateTo({
+    url: "/pages/sign-up",
+  });
+};
+
+const toResetPasswordPage = () => {
+  uni.navigateTo({
+    url: "/pages/reset-password",
+  });
+};
+</script>
+
+<template>
+  <view class="container">
+    <image class="app-logo" src="../static/logo.png" mode="widthFix" />
+    <text class="app-name">ARCX</text>
+    <InputRow type="text" placeholder="email" width="80vw" />
+    <InputRow type="password" placeholder="password" width="80vw" />
+    <view class="btn-row">
+      <button hover-class="none" @click="toResetPasswordPage">
+        Forgot Password?
+      </button>
+    </view>
+    <SButton width="80vw">login</SButton>
+    <button
+      hover-class="none"
+      @click.stop="checked = !checked"
+      class="agreement"
+    >
+      <image :src="`../static/${checked ? 'checked' : 'unchecked'}.png`" />
+      <text>i read and accept</text>
+      <button hover-class="none" @click.stop="">user agreement</button>
+      <text>and</text>
+      <button hover-class="none" @click.stop="">privacy policy</button>
+    </button>
+    <view class="thrid-signin">
+      <button hover-class="none">
+        <image src="../static/google-icon.png" mode="widthFix" />
+        <text>login with google</text>
+      </button>
+      <button hover-class="none">
+        <image src="../static/apple-icon.png" mode="widthFix" />
+        <text>login with apple</text>
+      </button>
+    </view>
+    <view class="to-sign-up">
+      <text>don't have an account? </text>
+      <button hover-class="none" @click.stop="toSignUpPage">sign up ></button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+}
+.app-logo {
+  width: 176rpx;
+  height: 176rpx;
+  margin-top: 40rpx;
+}
+.app-name {
+  font-weight: 600;
+  font-size: 40rpx;
+  color: #333333;
+  margin: 20rpx 0;
+}
+.btn-row {
+  width: 80vw;
+  display: flex;
+  justify-content: flex-end;
+}
+.btn-row > button {
+  font-size: 24rpx;
+  color: #287fff;
+  margin-bottom: 25rpx;
+  line-height: 34rpx;
+}
+.agreement {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 24rpx;
+  margin-top: 24rpx;
+  margin-bottom: 50rpx;
+  color: #999999;
+}
+.agreement > image:first-child {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+.agreement > button {
+  color: #333;
+  font-size: 24rpx;
+  margin: 0 10rpx;
+}
+.thrid-signin {
+  width: 80vw;
+  display: flex;
+  flex-direction: column;
+  margin: 60rpx 0;
+}
+.thrid-signin > button {
+  width: 100%;
+  height: 88rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 45rpx;
+  background-color: #fff;
+  font-size: 30rpx;
+  color: #333333;
+  margin: 20rpx 0;
+}
+.thrid-signin > button > image {
+  width: 40rpx;
+  margin-right: 20rpx;
+}
+.to-sign-up {
+  font-size: 24rpx;
+  color: #666666;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.to-sign-up > button {
+  font-size: 24rpx;
+  color: #287fff;
+  margin-left: 20rpx;
+}
+</style>

src/pages/sign-up.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { ref } from "vue";
+import InputRow from "@/components/InputRow.vue";
+import SButton from "@/components/SButton.vue";
+
+const toSignInPage = () => {
+  uni.navigateBack();
+};
+</script>
+
+<template>
+  <view class="container">
+    <text class="title">Sign up</text>
+    <text class="sub-title">Create an Arcx account</text>
+    <InputRow placeholder="name" width="80vw" />
+    <InputRow placeholder="email" width="80vw" />
+    <InputRow placeholder="verification code" type="number" width="80vw" btnType="code" />
+    <InputRow type="password" placeholder="password" width="80vw" />
+    <InputRow type="password" placeholder="confirm password" width="80vw" />
+    <view :style="{ height: '20rpx' }"></view>
+    <SButton width="80vw">login</SButton>
+    <view class="agreement">
+      <text>By clicking “Sign Up”, you agree to our</text>
+      <button hover-class="none" @click.stop="">user agreement</button>
+      <text>and</text>
+      <button hover-class="none" @click.stop="">privacy policy</button>
+    </view>
+    <view class="to-sign-up">
+      <text>have an account? </text>
+      <button hover-class="none" @click.stop="toSignInPage">sign in ></button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+}
+.title {
+  font-weight: 600;
+  font-size: 48rpx;
+  color: #333333;
+  width: 80vw;
+  margin-bottom: 10rpx;
+}
+.sub-title {
+  font-size: 24rpx;
+  color: #666666;
+  width: 80vw;
+  margin-bottom: 20rpx;
+}
+.agreement {
+  width: 80vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+  margin-top: 24rpx;
+  margin-bottom: 50rpx;
+  color: #999999;
+  flex-wrap: wrap;
+}
+.agreement > image:first-child {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+.agreement > button {
+  color: #333;
+  font-size: 24rpx;
+  margin: 0 10rpx;
+}
+.to-sign-up {
+  font-size: 24rpx;
+  color: #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 100rpx;
+}
+.to-sign-up > button {
+  font-size: 24rpx;
+  color: #287fff;
+  margin-left: 20rpx;
+}
+</style>

src/uni.scss

@@ -74,3 +74,5 @@ $uni-color-subtitle: #555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
 $uni-font-size-paragraph: 15px;
+
+$uni-link-color: #287fff;

src/util.js

@@ -445,3 +445,7 @@ export const calcRing = (bowtargetId, x, y, diameter) => {
   }
   return 0;
 };
+
+export const generateShareImage = () => {};
+
+export const generateShareCard = () => {};