From 00a52f60b5daaa2930bc651afcaadc10ead692c4 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Mon, 10 Nov 2025 14:02:09 +0800
Subject: [PATCH] =?UTF-8?q?UI=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis.js                           |  20 +
 src/components/EditOption.vue         | 148 ++++--
 src/pages/point-book-create.vue       |  38 +-
 src/pages/point-book-detail-share.vue | 434 +++++++++++++++++
 src/pages/point-book-detail.vue       | 262 ++++++++---
 src/pages/point-book-edit.vue         |   8 +-
 src/pages/point-book-list.vue         | 216 ++++++---
 src/pages/point-book.vue              | 644 +++++++++++++++++++-------
 src/static/edit.png                   | Bin 0 -> 363 bytes
 9 files changed, 1435 insertions(+), 335 deletions(-)
 create mode 100644 src/pages/point-book-detail-share.vue
 create mode 100644 src/static/edit.png

diff --git a/src/apis.js b/src/apis.js
index bb00464..e47e3d0 100644
--- a/src/apis.js
+++ b/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}`);
+};
diff --git a/src/components/EditOption.vue b/src/components/EditOption.vue
index e489bfc..666a383 100644
--- a/src/components/EditOption.vue
+++ b/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 = ["Bow Type", "Distance", "Target Type", "set/Arrows"];
+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) {
-    props.onSelect(
-      props.itemIndex,
-      `${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
-    );
+  } else if (props.itemIndex === 3) {
+    if (secondSelectIndex.value !== -1) {
+      props.onSelect(
+        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,13 +150,24 @@ 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) {
     loadConfig();
   } else {
     const config = await getPointBookConfigAPI();
-    uni.settorageSync("point-book-config", config);
+    uni.setStorageSync("point-book-config", config);
     loadConfig();
   }
 });
@@ -135,24 +182,21 @@ onMounted(async () => {
     }"
   >
     <view @click="() => onExpand(itemIndex, !expand)">
-      <text :style="{ opacity: expand ? 1 : 0 }">{{ 
-        itemIndex !== 3 ? itemTexts[itemIndex] : "Select set"
-      }}</text>
+      <view></view>
       <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">{{ 
-          value && value > 0 ? value + "m" : itemTexts[itemIndex]
+        <text v-if="!expand && itemIndex === 1">{{
+          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">{{ 
-          selectedIndex !== -1 && secondSelectIndex !== -1
-            ? `${selectedIndex} set / ${groupArrows[secondSelectIndex]} arrows`
-            : itemTexts[itemIndex]
-        }}</text>
+        <text v-if="!expand && itemIndex === 3">{{ formatSetAndAmount }}</text>
       </block>
       <button hover-class="none">
         <image
@@ -195,10 +239,11 @@ onMounted(async () => {
       >
         <input
           v-model="meter"
-          placeholder="custom"
+          type="number"
+          placeholder="Custom"
           placeholder-style="color: #DDDDDD"
           @focus="() => (selectedIndex = 9)"
-          @change="onMeterChange"
+          @blur="onMeterChange"
         />
         <text>m</text>
       </view>
@@ -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,11 +272,31 @@ onMounted(async () => {
           @click="onSelectItem(i)"
         >
           <text>{{ i }}</text>
-          <text>set</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="{
+          marginTop: '5px',
+          marginBottom: '10px',
+          color: '#999999',
+          textAlign: 'center',
+        }"
         >Select arrows per set</view
       >
       <view class="amount-items">
@@ -246,6 +311,22 @@ onMounted(async () => {
           <text>{{ item }}</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>
   </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;
@@ -330,7 +410,7 @@ onMounted(async () => {
 }
 .distance-items > view > text:first-child,
 .amount-items > view > text:first-child {
-  margin-right: 10rpx;
+  width: 25px;
   display: block;
   text-align: center;
 }
@@ -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>
diff --git a/src/pages/point-book-create.vue b/src/pages/point-book-create.vue
index 064fc30..1dcec1b 100644
--- a/src/pages/point-book-create.vue
+++ b/src/pages/point-book-create.vue
@@ -10,6 +10,8 @@ const bowType = ref("");
 const distance = ref(0);
 const bowtargetType = ref("");
 const amountGroup = ref("");
+const days = ref(0);
+const arrows = ref(0);
 
 const onExpandChange = (index, expand) => {
   if (expandIndex.value !== -1) {
@@ -40,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,
@@ -57,7 +59,7 @@ const toEditPage = () => {
   }
 };
 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;
@@ -72,7 +74,7 @@ onMounted(async () => {
     :bgType="2"
     bgColor="#F5F5F5"
     :whiteBackArrow="false"
-    title="Select Parameters"
+    title="选择参数"
   >
     <view class="container">
       <view>
@@ -122,4 +124,34 @@ onMounted(async () => {
 .container > view:nth-child(2) {
   margin: 0 10px;
 }
+.header {
+  width: 100%;
+  height: 27vw;
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: #ffffffc7;
+  font-size: 14px;
+  margin-top: 10px;
+}
+.header > image {
+  position: absolute;
+  width: 100%;
+  border: 2px solid #fff;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+.header > view {
+  position: relative;
+}
+.header > view:nth-child(2) {
+  margin-left: 7vw;
+  margin-right: 7vw;
+}
+.header > view > view > text:first-child {
+  font-size: 27px;
+  font-weight: 500;
+  margin-right: 5px;
+  color: #fff4c9;
+}
 </style>
diff --git a/src/pages/point-book-detail-share.vue b/src/pages/point-book-detail-share.vue
new file mode 100644
index 0000000..1283484
--- /dev/null
+++ b/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>
diff --git a/src/pages/point-book-detail.vue b/src/pages/point-book-detail.vue
index 87671ca..b1e28e9 100644
--- a/src/pages/point-book-detail.vue
+++ b/src/pages/point-book-detail.vue
@@ -1,29 +1,39 @@
 <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 showTip3 = ref(false);
-const groups = ref([]);
 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 = () => {
@@ -32,24 +42,35 @@ const closeTip = () => {
   showTip3.value = false;
 };
 
-const saveNote = () => {
+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];
-  arrows.value = groups.value[index].list.filter((item) => item.x && item.y);
+  data.value = record.value.groups[index];
+  arrows.value = record.value.groups[index].list.filter(
+    (item) => item.x && item.y
+  );
 };
 
 const goBack = () => {
   const pages = getCurrentPages();
-  const currentPage = pages[pages.length - 2];
-  uni.navigateBack({
-    delta: currentPage.route === "pages/point-book" ? 1 : 2,
-  });
+  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 ringRates = computed(() => {
@@ -61,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) {
@@ -72,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>
@@ -85,11 +143,11 @@ onLoad(async (options) => {
     :bgType="2"
     bgColor="#F5F5F5"
     :whiteBackArrow="false"
-    title="Analysis"
+    title=""
     :onBack="goBack"
   >
     <view class="container">
-      <view class="tab-bar">
+      <!-- <view class="tab-bar">
         <view
           v-for="(_, index) in groups"
           :key="index"
@@ -102,15 +160,20 @@ onLoad(async (options) => {
               fontSize: selectedIndex === index ? '15px' : '13px',
               letterSpacing: index !== 0 ? '2px' : '0',
             }"
-            >{{ index === 0 ? "All" : `Set${index}` }}</text
+            >{{ 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
@@ -142,53 +205,44 @@ onLoad(async (options) => {
           <view>Total Rings</view>
           <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
         </view>
-        <view class="add-notes">
-          <button class="note-btn" @click="showTip3 = true">
-            <image
-              :src="`../static/${notes ? 'has-note' : 'add-grey'}.png`"
-              mode="widthFix"
-            />
-          </button>
-        </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>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 class="title-bar">
-          <view />
-          <text>Score Distribution</text>
-        </view>
+      <view :style="{ transform: 'translateY(-60rpx)' }">
         <view :style="{ padding: '0 30rpx' }">
           <RingBarChart :data="ringRates" />
         </view>
-        <view class="title-bar" :style="{ marginTop: '30rpx' }">
-          <view />
-          <text>{{
-            selectedIndex === 0 ? "Rings per Set" : `Set ${selectedIndex} Rings`
-          }}</text>
-        </view>
         <view class="ring-text-groups">
-          <view v-for="(item, index) in groups" :key="index">
-            <text v-if="selectedIndex === 0 && index !== 0">{{
-              `Set${index}`
-            }}</text>
+          <view v-for="(item, index) in record.groups" :key="index">
+            <view v-if="selectedIndex === 0 && index !== 0">
+              <text>{{ index }}：</text>
+              <text>{{ item.userTotalRing }}</text>
+              <text>Ring</text>
+            </view>
             <view
               v-if="
                 (selectedIndex === 0 && index !== 0) ||
@@ -210,8 +264,22 @@ onLoad(async (options) => {
             </view>
           </view>
         </view>
-        <view :style="{ marginBottom: '40rpx' }">
-          <SButton :onClick="goBack" :rounded="50">Close</SButton>
+        <view
+          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
@@ -238,8 +306,11 @@ onLoad(async (options) => {
             <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">
@@ -300,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;
@@ -319,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;
@@ -346,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%;
@@ -393,35 +479,54 @@ onLoad(async (options) => {
   display: flex;
   flex-direction: column;
   padding: 20rpx;
-  padding-top: 30rpx;
+  padding-top: 40rpx;
   font-size: 24rpx;
   color: #999999;
 }
 .ring-text-groups > view {
-  width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
 }
-.ring-text-groups > view > text {
-  width: 82rpx;
+.ring-text-groups > view > view:first-child:nth-last-child(2) {
+  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 {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(6, auto);
-  grid-gap: 10rpx;
+.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;
-  margin-left: 20rpx;
+  transform: translateX(20rpx);
 }
-.ring-text-groups > view > view > text {
-  width: 1fr;
+.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);
+  min-width: calc(100% - 40rpx);
   margin: 25rpx 0;
   border: 1px solid #eee;
   border-radius: 5px;
@@ -429,14 +534,27 @@ onLoad(async (options) => {
   color: #000;
   padding: 20rpx;
 }
-.note-btn {
-  height: 100%;
-  display: flex;
+.btns {
+  margin-bottom: 40rpx;
+  display: grid;
   align-items: center;
   justify-content: center;
+  column-gap: 20rpx;
+  padding: 0 20rpx;
 }
-.note-btn > image {
-  width: 52rpx;
-  height: 52rpx;
+.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>
diff --git a/src/pages/point-book-edit.vue b/src/pages/point-book-edit.vue
index 76c90ef..70a297d 100644
--- a/src/pages/point-book-edit.vue
+++ b/src/pages/point-book-edit.vue
@@ -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) {
@@ -180,11 +180,9 @@ onMounted(() => {
 <style scoped>
 .container {
   width: 100%;
-  display: flex;
-  flex-direction: column;
 }
 .container > text {
-  margin: 0 30rpx;
+  margin: 15px;
   color: #999;
   font-size: 13px;
   font-weight: 200;
diff --git a/src/pages/point-book-list.vue b/src/pages/point-book-list.vue
index 99ebcf8..62b0e2f 100644
--- a/src/pages/point-book-list.vue
+++ b/src/pages/point-book-list.vue
@@ -1,17 +1,21 @@
 <script setup>
 import { ref, onMounted } from "vue";
+import Container from "@/components/Container.vue";
 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(
@@ -33,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;
@@ -47,72 +67,89 @@ const onSelectOption = (itemIndex, value) => {
 </script>
 
 <template>
-  <view class="container">
-    <view class="selectors">
-      <view @click="() => openSelector(0)">
-        <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
-          bowType.name || "Bow Type"
-        }}</text>
-        <image src="../static/arrow-grey.png" mode="widthFix" />
-      </view>
-      <view @click="() => openSelector(1)">
-        <text :style="{ color: distance ? '#000' : '#999' }">{{
-          distance ? distance + " m" : "Distance"
-        }}</text>
-        <image src="../static/arrow-grey.png" mode="widthFix" />
-      </view>
-      <view @click="() => openSelector(2)">
-        <text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
-          bowtargetType.name || "Target Type"
-        }}</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-if="index > 0" :style="{ height: '25rpx' }" />
-          <PointRecord :data="item" />
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    title="Point Records"
+  >
+    <view class="container">
+      <view class="selectors">
+        <view @click="() => openSelector(0)">
+          <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
+            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 + " 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 || "Please select"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
         </view>
-      </ScrollList>
-    </view>
-    <SModal
-      :show="showModal"
-      :noBg="true"
-      height="auto"
-      :onClose="() => (showModal = false)"
-    >
-      <view class="selector">
-        <button hover-class="none" @click="() => (showModal = false)">
-          <image src="../static/close-grey.png" mode="widthFix" />
-        </button>
-        <EditOption
-          v-show="selectorIndex === 0"
-          :itemIndex="0"
-          :expand="true"
-          :noArrow="true"
-          :onSelect="onSelectOption"
-          :value="bowType.name"
-        />
-        <EditOption
-          v-show="selectorIndex === 1"
-          :itemIndex="1"
-          :expand="true"
-          :noArrow="true"
-          :onSelect="onSelectOption"
-          :value="distance + ''"
-        />
-        <EditOption
-          v-show="selectorIndex === 2"
-          :itemIndex="2"
-          :expand="true"
-          :noArrow="true"
-          :onSelect="onSelectOption"
-          :value="bowtargetType.name"
-        />
       </view>
-    </SModal>
-  </view>
+      <view class="point-records">
+        <ScrollList :onLoading="onListLoading">
+          <view v-for="(item, index) in list" :key="item.id">
+            <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">No data</view>
+        </ScrollList>
+      </view>
+      <SModal
+        :show="showModal"
+        :noBg="true"
+        height="auto"
+        :onClose="() => (showModal = false)"
+      >
+        <view class="selector">
+          <button hover-class="none" @click="() => (showModal = false)">
+            <image src="../static/close-grey.png" mode="widthFix" />
+          </button>
+          <EditOption
+            v-show="selectorIndex === 0"
+            :itemIndex="0"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+            :value="bowType.name"
+          />
+          <EditOption
+            v-show="selectorIndex === 1"
+            :itemIndex="1"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+            :value="distance + ''"
+          />
+          <EditOption
+            v-show="selectorIndex === 2"
+            :itemIndex="2"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+            :value="bowtargetType.name"
+          />
+        </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>
 
 <style scoped>
@@ -124,13 +161,15 @@ const onSelectOption = (itemIndex, value) => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0 15px;
+  margin-top: 10px;
 }
 .selectors > view {
-  height: 110rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #fff;
+  height: 55px;
   border-radius: 12px;
   color: #333;
   font-size: 13px;
@@ -140,7 +179,7 @@ const onSelectOption = (itemIndex, value) => {
   width: 34vw;
 }
 .selectors > view > text {
-  width: 100%;
+  width: calc(100% - 11vw);
   text-align: center;
   margin-left: 3vw;
 }
@@ -163,8 +202,47 @@ const onSelectOption = (itemIndex, value) => {
   width: 40px;
 }
 .point-records {
+  margin: 0 15px;
   margin-top: 10px;
-  height: calc(100% - 130rpx);
-  overflow: auto;
+  height: calc(100% - 80px);
+}
+.no-data {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  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>
diff --git a/src/pages/point-book.vue b/src/pages/point-book.vue
index 0f56629..f13ec7f 100644
--- a/src/pages/point-book.vue
+++ b/src/pages/point-book.vue
@@ -1,11 +1,25 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
-import Home from "@/pages/point-book-home.vue";
-import History from "@/pages/point-book-list.vue";
-import Profile from "@/pages/point-book-profile.vue";
-import Avatar from "@/components/Avatar.vue";
+import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import PointRecord from "@/components/PointRecord.vue";
+import RingBarChart from "@/components/RingBarChart.vue";
+import SModal from "@/components/SModal.vue";
+import Signin from "@/components/Signin.vue";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+import RewardUs from "@/components/RewardUs.vue";
 
-import { getHomeData } from "@/apis";
+import {
+  getHomeData,
+  getPointBookConfigAPI,
+  getPointBookListAPI,
+  getPointBookStatisticsAPI,
+  removePointRecord,
+} from "@/apis";
+
+import { getElementRect } from "@/util";
+
+import { generateKDEHeatmapImage } from "@/kde-heatmap";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -13,47 +27,135 @@ const store = useStore();
 const { updateUser } = store;
 const { user } = storeToRefs(store);
 
-const activeTab = ref(0);
-const heat = ref(0);
-
 const isIOS = computed(() => {
   const systemInfo = uni.getDeviceInfo();
   return systemInfo.osName === "ios";
 });
 
-const capsuleHeight = computed(() => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  return menuBtnInfo.top - 9;
+const loadImage = ref(false);
+const showModal = ref(false);
+const showTip = ref(false);
+const showTip2 = ref(false);
+const data = ref({
+  weeksCheckIn: [],
 });
 
-const goSignIn = () => {
+const list = ref([]);
+const bowTargetSrc = ref("");
+const heatMapImageSrc = ref(""); // 存储热力图图片地址
+const canvasVisible = ref(false); // 控制canvas显示状态
+const removeId = ref("");
+
+const toListPage = () => {
   uni.navigateTo({
-    url: "/pages/sign-in",
+    url: "/pages/point-book-list",
   });
 };
 
-const onClickTab = (index) => {
-  // if (index > 0 && !user.value.id) {
-  //   return goSignIn();
-  // }
-  activeTab.value = index;
+const onSignin = () => {
+  showModal.value = true;
+};
+
+const startScoring = () => {
+  if (user.value.id) {
+    uni.navigateTo({
+      url: "/pages/point-book-create",
+    });
+  } else {
+    showModal.value = true;
+  }
+};
+
+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);
+  const result2 = await getPointBookStatisticsAPI();
+  data.value = result2;
+
+  const rect = await getElementRect(".heat-map");
+  let hot = 0;
+  if (result2.checkInCount > -3 && result2.checkInCount < 3) hot = 1;
+  else if (result2.checkInCount >= 3) hot = 2;
+  else if (result2.checkInCount >= 5) hot = 3;
+  else if (result2.checkInCount === 7) hot = 4;
+  uni.$emit("update-hot", hot);
+  loadImage.value = true;
+  const generateHeatmapAsync = async () => {
+    const weekArrows = result2.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("Heatmap image path:", finalPath);
+    } catch (error) {
+      console.error("Failed to generate heatmap image:", error);
+      loadImage.value = false;
+    }
+  };
+
+  // 异步生成热力图，不阻塞UI
+  generateHeatmapAsync();
 };
 
 watch(
   () => user.value.id,
-  async (id) => {
-    if (id) {
-      const data = await getHomeData();
-      if (data.user) updateUser(data.user);
-    }
+  (id) => {
+    if (id) loadData();
   }
 );
 
-const updateHot = (value) => {
-  heat.value = value;
-};
+onShow(async () => {
+  uni.removeStorageSync("point-book");
+  if (user.value.id) loadData();
+});
 
 onMounted(async () => {
+  uni.$on("point-book-signin", onSignin);
   const token = uni.getStorageSync(
     `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
   );
@@ -61,159 +163,389 @@ onMounted(async () => {
     const data = await getHomeData();
     if (data.user) updateUser(data.user);
   }
-  uni.$on("update-hot", updateHot);
+  const config = await getPointBookConfigAPI();
+  uni.setStorageSync("point-book-config", config);
+  if (config.targetOption && config.targetOption[0]) {
+    bowTargetSrc.value = config.targetOption[0].icon;
+  }
 });
+
 onBeforeUnmount(() => {
-  uni.$off("update-hot", updateHot);
+  uni.$off("point-book-signin", onSignin);
 });
+
+// onShareAppMessage(() => {
+//   return {
+//     title: "高效记录每一次射箭，深度分析助你提升！",
+//     path: "pages/point-book",
+//     imageUrl:
+//       "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
+//   };
+// });
+// onShareTimeline(() => {
+//   return {
+//     title: "高效记录每一次射箭，深度分析助你提升！",
+//     query: "from=timeline",
+//     imageUrl:
+//       "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
+//   };
+// });
 </script>
 
 <template>
-  <view class="container">
-    <view
-      class="header"
-      :style="{
-        paddingTop: capsuleHeight + 'px',
-        overflow: activeTab === 1 ? 'hidden' : 'unset',
-      }"
-    >
-      <image
-        class="bg-image"
-        :src="`../static/app-bg${activeTab === 2 ? 6 : 5}.png`"
-        mode="widthFix"
-      />
-      <view v-if="activeTab === 0" class="user-header" @click="goSignIn">
-        <block v-if="user.id">
-          <Avatar :src="user.avatar" :size="40" borderColor="#333" />
-          <text class="truncate">{{ user.nickName }}</text>
+  <Container :bgType="4" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
+    <view class="container">
+      <view class="daily-signin">
+        <view>
+          <image src="../static/week-check.png" />
+        </view>
+        <view :class="data.weeksCheckIn[0] ? 'checked' : ''">
           <image
-            v-if="heat"
-            :src="`../static/hot${heat}.png`"
+            v-if="data.weeksCheckIn[0]"
+            src="../static/checked-green2.png"
             mode="widthFix"
           />
-        </block>
-        <block v-else>
-          <image src="../static/user-icon.png" mode="widthFix" />
-          <text>新来的弓箭手你好呀~</text>
-        </block>
+          <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>Arrows Today</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>Average Rings</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>
+      <view class="reward" v-if="data.totalArrow">
+        <button hover-class="none" @click="showTip = true">
+          <image src="../static/reward-us.png" mode="widthFix" />
+        </button>
+      </view>
+      <RingBarChart :data="data.ringRate" v-if="user.id" />
+      <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="item.id">
+        <PointRecord :data="item" />
+        <view
+          v-if="index < list.length - 1"
+          :style="{ height: '25rpx' }"
+        ></view>
+      </block>
+      <view
+        class="see-more"
+        @click="toListPage"
+        v-if="list.length"
+        :style="{ marginBottom: isIOS ? '10rpx' : 0 }"
+      >
+        <text>View all records</text>
+        <image src="../static/enter-arrow-blue.png" mode="widthFix" />
       </view>
-      <view v-if="activeTab === 1" class="title">History</view>
     </view>
-    <view
-      class="body"
-      :style="{
-        height: 'calc(100% - 50px - ' + capsuleHeight + 'px - 160rpx - 25rpx)',
-        overflowY: activeTab === 2 ? 'unset' : 'hidden',
-      }"
+    <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
+      <Signin :onClose="() => (showModal = false)" :noBg="true" />
+    </SModal>
+    <ScreenHint2
+      :show="showTip || showTip2"
+      :onClose="showTip ? () => (showTip = false) : null"
     >
-      <Home v-show="activeTab === 0" />
-      <History v-show="activeTab === 1" />
-      <Profile v-show="activeTab === 2" />
-    </view>
-    <view class="tabbar">
-      <button hover-class="none" @click="onClickTab(0)">
-        <image
-          :src="`../static/tab1${activeTab === 0 ? '-s' : ''}.png`"
-          mode="widthFix"
-        />
-        <text :style="{ color: activeTab === 0 ? '#333' : '#999' }">Score</text>
-      </button>
-      <button hover-class="none" @click="onClickTab(1)">
-        <image
-          :src="`../static/tab2${activeTab === 1 ? '-s' : ''}.png`"
-          mode="widthFix"
-        />
-        <text :style="{ color: activeTab === 1 ? '#333' : '#999' }"
-          >History</text
-        >
-      </button>
-      <button hover-class="none" @click="onClickTab(2)">
-        <image
-          :src="`../static/tab3${activeTab === 2 ? '-s' : ''}.png`"
-          mode="widthFix"
-        />
-        <text :style="{ color: activeTab === 2 ? '#333' : '#999' }"
-          >Profile</text
-        >
-      </button>
-    </view>
-  </view>
+      <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>
 
 <style scoped>
 .container {
-  width: 100vw;
-  height: 100vh;
-  background: #f5f5f5;
+  width: calc(100% - 50rpx);
+  padding: 25rpx;
 }
-.header {
-  height: 50px;
-  position: relative;
-  font-weight: 500;
-  font-size: 30rpx;
-  color: #333333;
-  display: flex;
-  align-items: center;
-  z-index: 1;
-}
-.title {
-  position: relative;
-  width: 100%;
-  text-align: center;
-}
-.header > image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.user-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  margin-left: 30rpx;
-}
-.user-header > image:first-child {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2rpx solid #333;
-}
-.user-header > image:last-child {
-  width: 36rpx;
-  height: 36rpx;
-}
-.user-header > text:nth-child(2) {
-  font-weight: 500;
-  font-size: 30rpx;
-  color: #333333;
-  margin: 0 20rpx;
-  max-width: 300rpx;
-}
-.body {
-  position: relative;
-  padding: 25rpx 25rpx 0rpx 25rpx;
-  z-index: 2;
-}
-.tabbar {
-  width: 100%;
-  height: 140rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
+.statistics {
+  border-radius: 25rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  border: 4rpx solid #fed848;
   background: #fff;
-  padding-bottom: 20rpx;
+  font-size: 22rpx;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 25rpx 0;
+  margin-bottom: 10rpx;
 }
-.tabbar > button {
+.statistics > view {
+  width: 33.33%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-size: 20rpx;
+  justify-content: center;
 }
-.tabbar > button > image {
+.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;
-  width: 60rpx;
-  height: 60rpx;
+}
+.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;
+}
+.reward {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -120rpx;
+  position: relative;
+  z-index: 10;
+}
+.reward > button {
+  width: 100rpx;
+}
+.reward > button > image {
+  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>
diff --git a/src/static/edit.png b/src/static/edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5837085022c95cf0934006ee5418430ad825319
GIT binary patch
literal 363
zcmeAS@N?(olHy`uVBq!ia0vp^3P7yH!3-ohbF|L_DenNE5LX~Q6AWg70fY@F(FB3q
z88c?U)k7FS5uiAbZPPICInX$Xk|4iehUtGIZMC27SrHd5{P|9ss~qc9gZ_eCA7SN^
zSfHBio-U3d7N^%ve$92rfX8j}jjdPnipBNs|F&N#oT7ME#@S{+*K-jr-xnN;?gzc9
zLyh;JS3Z1c{XeCMuA|;bOZ8tV8nZ6QKC$SZ%M``k^OP<vv#+(`thg?0QgDy`UiO2(
z-yf`rV}2g{U@!k3{q4&+@BEd^6*V~~%p7X4<(2P(qYk$lKNWvSIJ}pSNy|xeiYHI-
z&-==$_5#LR`dVHbzxU6_tULHOAIGk$J{5-9PrrUx@%sIQ8O*W|Shu^0Ounwu6$$hL
NgQu&X%Q~loCIBX-pSA!1

literal 0
HcmV?d00001