feat(mp): 新增 AvatarCircle/ShortcutButton/TodoAlert 组件 + 商品详情页

- AvatarCircle: 头像圆形组件
- ShortcutButton: 快捷操作按钮
- TodoAlert: 待办提醒组件
- pkg-mall/product: 积分商品详情页

apps/miniprogram/src/components/ui/TodoAlert/index.scss

@@ -0,0 +1,87 @@
+@import '../../../styles/variables.scss';
+
+.todo-alert {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: $r;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+
+  &:active {
+    opacity: var(--tk-touch-feedback-opacity);
+  }
+
+  &__icon-wrap {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    display: block;
+    font-size: 15px;
+    font-weight: 600;
+    color: $tx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__subtitle {
+    display: block;
+    font-size: 12px;
+    color: $tx3;
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__arrow {
+    flex-shrink: 0;
+    font-size: 20px;
+    color: $tx3;
+    margin-left: 4px;
+  }
+
+  // ── 靛蓝变体 ──
+  &--pri {
+    background: #D4E5F0;
+    border-left: 4px solid #3A6B8C;
+
+    .todo-alert__icon-wrap {
+      background: rgba(58, 107, 140, 0.15);
+    }
+    .todo-alert__icon {
+      color: #3A6B8C;
+    }
+  }
+
+  // ── 警告变体 ──
+  &--wrn {
+    background: #FFF3E0;
+    border-left: 4px solid #C4873A;
+
+    .todo-alert__icon-wrap {
+      background: rgba(196, 135, 58, 0.15);
+    }
+    .todo-alert__icon {
+      color: #C4873A;
+    }
+  }
+}

apps/miniprogram/src/components/ui/TodoAlert/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+type AlertColor = 'pri' | 'wrn';
+
+interface TodoAlertProps {
+  icon?: string;
+  title: string;
+  subtitle?: string;
+  color?: AlertColor;
+  onPress?: () => void;
+}
+
+const TodoAlert: React.FC<TodoAlertProps> = ({
+  icon,
+  title,
+  subtitle,
+  color = 'pri',
+  onPress,
+}) => {
+  const cls = ['todo-alert', `todo-alert--${color}`].join(' ');
+
+  return (
+    <View className={cls} onClick={onPress}>
+      {icon && (
+        <View className="todo-alert__icon-wrap">
+          <Text className="todo-alert__icon">{icon}</Text>
+        </View>
+      )}
+      <View className="todo-alert__body">
+        <Text className="todo-alert__title">{title}</Text>
+        {subtitle && <Text className="todo-alert__subtitle">{subtitle}</Text>}
+      </View>
+      <Text className="todo-alert__arrow">›</Text>
+    </View>
+  );
+};
+
+export default React.memo(TodoAlert);