Move pet card actions into menu and use circular brand logos

pets-fe/components/pet-id-card/index.js

@@ -9,6 +9,19 @@ Component({
     },
   },
   methods: {
+    async more() {
+      if (this.data.saving) return;
+      try {
+        const result = await wx.showActionSheet({
+          itemList: ["编辑档案", "保存身份卡到相册"],
+          itemColor: "#795a4b",
+        });
+        if (result.tapIndex === 0) this.edit();
+        else if (result.tapIndex === 1) await this.save();
+      } catch (error) {
+        if (!/cancel/.test(error.errMsg || "")) toast(error);
+      }
+    },
     edit() {
       this.triggerEvent("edit", { id: this.data.pet.id });
     },

pets-fe/components/pet-id-card/index.wxml

@@ -1,10 +1,9 @@
 <view class="identity">
-  <view class="id-top"><view class="brand"><image src="/assets/logo-corgi-v2.png" /><view><text class="brand-name">肉垫计划</text><text class="brand-en">PAWPRINT ID</text></view></view><text class="id-title">毛孩身份卡</text></view>
+  <view class="id-top"><view class="brand"><image src="/assets/logo-corgi-v2.png" /><view><text class="brand-name">肉垫计划</text><text class="brand-en">PAWPRINT ID</text></view></view><view class="id-heading"><text class="id-title">毛孩身份卡</text><button class="more" bindtap="more" disabled="{{saving}}" aria-label="身份卡更多操作"><view></view><view></view><view></view></button></view></view>
   <view class="id-body" bindtap="edit" aria-role="button" aria-label="编辑宠物档案">
     <view class="portrait"><image wx:if="{{card.avatar_url}}" src="{{card.avatar_url}}" mode="aspectFill" /><app-icon wx:else size="80" color="#d18b67" /></view>
     <view class="details"><text class="pet-name">{{card.name}}</text><text class="breed">{{card.breed||'品种未填写'}} · {{card.genderLabel}}</text><view class="facts"><view><text class="label">生日</text><text class="value">{{card.birthday}}</text></view><view><text class="label">体重</text><text class="value">{{card.weightLabel}}</text></view></view><view class="coat"><text class="label">毛色</text><text class="value">{{card.coat||'未填写'}}</text></view></view>
   </view>
-  <view class="id-bottom"><view><text class="label">陪伴编号</text><text class="number">{{card.cardNumber}}</text></view><text class="motto">把陪伴，认真记下来</text></view>
+  <view class="id-bottom"><view><text class="label">陪伴编号</text><text class="number">{{card.cardNumber}}</text></view><text class="motto">{{saving?'正在生成身份卡…':'把陪伴，认真记下来'}}</text></view>
 </view>
-<view class="card-actions"><button bindtap="edit">编辑档案</button><button class="save" bindtap="save" loading="{{saving}}" disabled="{{saving}}">{{saving?'正在生成…':'保存身份卡'}}</button></view>
 <canvas type="2d" id="card-canvas" class="export-canvas" />

pets-fe/components/pet-id-card/index.wxss

@@ -27,6 +27,9 @@
 .brand image {
   width: 44rpx;
   height: 44rpx;
+  border-radius: 50%;
+  border: 3rpx solid #fffaf4;
+  box-shadow: 0 0 0 1rpx #dfcdbf;
 }
 .brand-name,
 .brand-en {
@@ -133,26 +136,35 @@
   max-width: 200rpx;
   text-align: right;
 }
-.card-actions {
+.id-heading {
   display: flex;
-  justify-content: flex-end;
-  gap: 16rpx;
-  margin-top: 12rpx;
+  align-items: center;
+  gap: 14rpx;
 }
-.card-actions button {
-  margin: 0;
-  padding: 9rpx 20rpx;
-  border: 1rpx solid #ead8ca;
-  border-radius: 99rpx;
-  background: #fffaf4;
-  color: #886c5f;
-  font-size: 22rpx;
-  line-height: 1.5;
+.more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5rpx;
+  margin: -10rpx -10rpx -10rpx 0;
+  width: 60rpx;
+  height: 60rpx;
+  padding: 0;
+  background: transparent;
+  border-radius: 50%;
 }
-.card-actions .save {
-  background: #fff0e2;
-  color: #b95738;
-  border-color: #f1d6c4;
+.more::after {
+  border: 0;
+}
+.more view {
+  width: 5rpx;
+  height: 5rpx;
+  border-radius: 50%;
+  background: #9d8779;
+}
+.more[disabled] {
+  opacity: 0.4;
+  background: transparent;
 }
 .export-canvas {
   position: fixed;

pets-fe/utils/pet-card.js

@@ -70,7 +70,17 @@ async function renderCard(canvas, pet) {
   round(ctx, 20, 20, 1160, 720, 34);
   ctx.stroke();
   const logo = await image(canvas, "/assets/logo-corgi-v2.png");
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(89, 87, 35, 0, Math.PI * 2);
+  ctx.clip();
   ctx.drawImage(logo, 54, 52, 70, 70);
+  ctx.restore();
+  ctx.strokeStyle = "#fffaf4";
+  ctx.lineWidth = 5;
+  ctx.beginPath();
+  ctx.arc(89, 87, 35, 0, Math.PI * 2);
+  ctx.stroke();
   text(ctx, "肉垫计划", 140, 82, 27, "#795a4b", 220, true);
   text(ctx, "PAWPRINT ID", 140, 113, 18, "#a48d7e", 220);
   text(ctx, "毛孩身份卡", 842, 103, 38, "#604a40", 300, true);