refactor: 拆分小程序 vue 结构

src/styles/_mixins.scss

@@ -0,0 +1,46 @@
+@import './variables';
+
+@mixin card($radius: $r-lg) {
+  background: $card;
+  border-radius: $radius;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+}
+
+@mixin green-gradient-btn($height: 48px) {
+  height: $height;
+  border: none;
+  border-radius: $height / 2;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  letter-spacing: 0.5px;
+  font-family: inherit;
+}
+
+@mixin text-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+@mixin bottom-sheet($max-height: 85%) {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: $max-height;
+  background: $card;
+  border-radius: 28px 28px 0 0;
+  z-index: 210;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
+  overflow: hidden;
+}

src/styles/_variables.scss

@@ -0,0 +1,40 @@
+// Design tokens extracted from prototypes/global.css
+
+// Primary palette
+$primary: #16A34A;
+$primary-light: #DCFCE7;
+$primary-lighter: #F0FDF4;
+$primary-dark: #15803D;
+$primary-darker: #166534;
+
+// Accent / semantic
+$accent: #F59E0B;
+$accent-light: #FEF3C7;
+$red: #EF4444;
+$red-light: #FEE2E2;
+
+// Text scale
+$text-1: #111827;
+$text-2: #374151;
+$text-3: #6B7280;
+$text-4: #9CA3AF;
+$text-5: #D1D5DB;
+
+// Backgrounds
+$bg: #F8FAFC;
+$card: #FFFFFF;
+$border: #F1F5F9;
+
+// Shadows
+$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03);
+$shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
+$shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.06);
+
+// Border radius
+$r-xs: 8px;
+$r-sm: 12px;
+$r-md: 16px;
+$r-lg: 20px;
+$r-xl: 24px;
+$r-full: 48px;