Move pet card actions into menu and use circular brand logos

pets-be/internal/admin/dist/index.html

@@ -2,11 +2,11 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/brand-logo.png" />
+    <link rel="icon" type="image/svg+xml" href="/brand-icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>肉垫计划 · 管理后台</title>
-    <script type="module" crossorigin src="/assets/index-DkKuSusU.js"></script>
+    <script type="module" crossorigin src="/assets/index-BOnBpy-T.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B39ofd9P.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-7B3h3Yq6.css">
   </head>
   <body>
     <div id="root"></div>

pets-be/web/admin/index.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/brand-logo.png" />
+    <link rel="icon" type="image/svg+xml" href="/brand-icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>肉垫计划 · 管理后台</title>
   </head>

pets-be/web/admin/src/index.css

@@ -83,7 +83,9 @@ strong {
 .brand img {
   width: 48px;
   height: 48px;
-  border-radius: 17px;
+  border-radius: 50%;
+  border: 3px solid #fffaf4;
+  box-shadow: 0 0 0 1px #ead8ca;
 }
 .brand strong {
   display: block;
@@ -221,7 +223,8 @@ strong {
 .welcome img {
   width: 116px;
   height: 116px;
-  border-radius: 32px;
+  border-radius: 50%;
+  border: 5px solid #fffaf4;
   transform: rotate(-8deg);
   box-shadow: 0 8px 30px #a5623615;
 }
@@ -798,7 +801,8 @@ td strong {
 .login-story > img {
   width: 94px;
   height: 94px;
-  border-radius: 28px;
+  border-radius: 50%;
+  border: 4px solid #fffaf4;
   box-shadow: 0 12px 40px #aa683219;
   margin-bottom: 30px;
   transform: rotate(-6deg);
@@ -1062,7 +1066,7 @@ td strong {
   .login-story > img {
     width: 54px;
     height: 54px;
-    border-radius: 17px;
+    border-radius: 50%;
     margin: 0 0 10px;
   }
   .login-story h1 {

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;
+  align-items: center;
-  gap: 16rpx;
+  gap: 14rpx;
-  margin-top: 12rpx;
 }
-.card-actions button {
+.more {
-  margin: 0;
+  display: flex;
-  padding: 9rpx 20rpx;
+  align-items: center;
-  border: 1rpx solid #ead8ca;
+  justify-content: center;
-  border-radius: 99rpx;
+  gap: 5rpx;
-  background: #fffaf4;
+  margin: -10rpx -10rpx -10rpx 0;
-  color: #886c5f;
+  width: 60rpx;
-  font-size: 22rpx;
+  height: 60rpx;
-  line-height: 1.5;
+  padding: 0;
+  background: transparent;
+  border-radius: 50%;
 }
-.card-actions .save {
+.more::after {
-  background: #fff0e2;
+  border: 0;
-  color: #b95738;
+}
-  border-color: #f1d6c4;
+.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);