Fix capsule-aligned navigation and refresh mini program typography

2026-10-04 10:30:17 +08:00
parent adfd0574cc
commit c2b51f96e0
45 changed files with 307 additions and 216 deletions
@@ -0,0 +1,7 @@
+Component({
+  properties: {
+    kind: { type: String, value: "paw" },
+    size: { type: Number, value: 48 },
+    color: { type: String, value: "#398668" },
+  },
+});
@@ -0,0 +1,9 @@
+<view class="app-icon-icon" style="width: {{size}}rpx; height: {{size}}rpx; color: {{color}}">
+  <view wx:if="{{kind==='water'}}" class="app-icon-drop"></view>
+  <view wx:elif="{{kind==='food'}}" class="app-icon-bowl"><view class="app-icon-bowl-rim"></view></view>
+  <view wx:else class="app-icon-paw">
+    <view class="app-icon-toe app-icon-one"></view><view class="app-icon-toe app-icon-two"></view>
+    <view class="app-icon-toe app-icon-three"></view><view class="app-icon-toe app-icon-four"></view>
+    <view class="app-icon-pad"></view>
+  </view>
+</view>
@@ -0,0 +1,12 @@
+.app-icon-icon { position: relative; display: flex; align-items: center; justify-content: center; }
+.app-icon-drop { width: 48%; height: 48%; border: 3rpx solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(135deg); }
+.app-icon-bowl { position: relative; width: 70%; height: 40%; border: 3rpx solid currentColor; border-radius: 5rpx 5rpx 50% 50%; }
+.app-icon-bowl-rim { position: absolute; left: -8%; top: -5rpx; width: 116%; height: 3rpx; border-radius: 4rpx; background: currentColor; }
+.app-icon-paw { position: relative; width: 85%; height: 85%; }
+.app-icon-toe, .app-icon-pad { position: absolute; background: currentColor; }
+.app-icon-toe { width: 17%; height: 24%; border-radius: 50%; }
+.app-icon-one { left: 0; top: 26%; transform: rotate(-28deg); }
+.app-icon-two { left: 24%; top: 3%; transform: rotate(-12deg); }
+.app-icon-three { right: 24%; top: 3%; transform: rotate(12deg); }
+.app-icon-four { right: 0; top: 26%; transform: rotate(28deg); }
+.app-icon-pad { left: 24%; top: 48%; width: 52%; height: 42%; border-radius: 50% 50% 45% 45%; }
@@ -1,11 +0,0 @@
-Component({
-  methods: {
-    goBack() {
-      if (getCurrentPages().length > 1) {
-        wx.navigateBack({ delta: 1 });
-      } else {
-        wx.reLaunch({ url: "/pages/home/home" });
-      }
-    },
-  },
-});
@@ -1,4 +0,0 @@
-<view class="page-back" bindtap="goBack" aria-role="button" aria-label="返回">
-  <view class="page-back-arrow"></view>
-  <text>返回</text>
-</view>
@@ -1,18 +0,0 @@
-.page-back {
-  display: inline-flex;
-  align-items: center;
-  gap: 12rpx;
-  min-height: 58rpx;
-  margin-bottom: 22rpx;
-  color: #2a7357;
-  font-size: 26rpx;
-  font-weight: 700;
-}
-.page-back-arrow {
-  width: 17rpx;
-  height: 17rpx;
-  border-left: 4rpx solid currentColor;
-  border-bottom: 4rpx solid currentColor;
-  transform: rotate(45deg);
-  margin-left: 5rpx;
-}
@@ -0,0 +1,33 @@
+const { navigationGeometry } = require("../../utils/layout");
+
+Component({
+  properties: {
+    title: String,
+    back: { type: Boolean, value: false },
+  },
+  data: navigationGeometry(),
+  lifetimes: {
+    attached() {
+      this.updateLayout();
+    },
+  },
+  pageLifetimes: {
+    resize() {
+      this.updateLayout();
+    },
+  },
+  methods: {
+    updateLayout() {
+      const info = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
+      let menu = {};
+      try {
+        menu = wx.getMenuButtonBoundingClientRect();
+      } catch (_) {}
+      this.setData(navigationGeometry(info, menu));
+    },
+    goBack() {
+      if (getCurrentPages().length > 1) wx.navigateBack({ delta: 1 });
+      else wx.reLaunch({ url: "/pages/home/home" });
+    },
+  },
+});
@@ -0,0 +1,11 @@
+<view class="navigation" style="height: {{headerHeight}}px">
+  <view class="navigation-row" style="top: {{top}}px; height: {{rowHeight}}px; width: {{titleWidth}}px">
+    <view wx:if="{{back}}" class="back" bindtap="goBack" aria-role="button" aria-label="返回">
+      <view class="back-arrow"></view>
+    </view>
+    <text class="navigation-title">{{title}}</text>
+  </view>
+</view>
+<scroll-view class="content" style="top: {{headerHeight}}px; height: {{scrollHeight}}px" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
+  <slot />
+</scroll-view>
@@ -0,0 +1,53 @@
+.navigation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 25;
+  background: #f6f9f6;
+}
+.navigation-row {
+  position: absolute;
+  left: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.navigation-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #194f42;
+  font-size: 19px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+.back {
+  width: 28px;
+  height: 36px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.back-arrow {
+  width: 10px;
+  height: 10px;
+  border-left: 2px solid #194f42;
+  border-bottom: 2px solid #194f42;
+  transform: rotate(45deg);
+}
+.content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100%;
+  overflow: hidden;
+}
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
@@ -1 +1,6 @@
-{ "component": true }
+{
+  "component": true,
+  "usingComponents": {
+    "app-icon": "/components/app-icon/index"
+  }
+}
@@ -10,7 +10,7 @@
    bindtap="toggle"
  >
    <image wx:if="{{item.avatar_url}}" src="{{item.avatar_url}}" />
-    <text wx:else>🐕</text>
+    <app-icon wx:else size="32" />
    <text>{{item.name}}</text>
    <text class="check">{{item.chosen?'✓':'+'}}</text>
  </view>
@@ -1,21 +0,0 @@
-function topHeight() {
-  const windowInfo = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
-  const statusHeight = windowInfo.statusBarHeight || 24;
-  let menuBottom = 0;
-  try {
-    const menu = wx.getMenuButtonBoundingClientRect();
-    menuBottom = menu && menu.bottom ? menu.bottom : 0;
-  } catch (_) {
-    // Some development environments do not expose the menu geometry.
-  }
-  return Math.ceil(Math.max(menuBottom, statusHeight + 44) + 12);
-}
-
-Component({
-  data: { height: 100 },
-  lifetimes: {
-    attached() {
-      this.setData({ height: topHeight() });
-    },
-  },
-});
@@ -1 +0,0 @@
-<view class="safe-top" style="height: {{height}}px"></view>
@@ -1,4 +0,0 @@
-.safe-top {
-  width: 100%;
-  flex-shrink: 0;
-}
				`@@ -1 +0,0 @@`
				`<view class="safe-top" style="height: {{height}}px"></view>`