feat(app): 初始化喝酒了么小程序基础架构

- 添加项目配置文件(.editorconfig, .gitignore) - 创建App.vue主应用文件，包含启动时Mock数据初始化 - 添加index.html和main.js应用入口文件 - 配置manifest.json应用基本信息和权限设置 - 设置pages.json页面路由和全局样式 - 添加uni.promisify.adaptor.js适配器文件 - 创建uni.scss设计令牌系统，定义琥珀夜光主题色彩 - 新增constants.js常量定义，包含酒类分类和品牌数据
2026-07-13 22:15:16 +08:00
parent 35af888097
commit f945ccf4c7
34 changed files with 6447 additions and 0 deletions
@@ -0,0 +1,305 @@
+<script>
+export default {
+  onLaunch() {
+    console.log('喝酒了么 App Launch')
+    // 初始化Mock数据(仅首次)
+    const hasData = uni.getStorageSync('drink_records')
+    if (!hasData) {
+      import('./common/mock-data').then(({ initMockData }) => {
+        initMockData()
+        console.log('Mock数据已初始化')
+      })
+    }
+  },
+  onShow() {
+    console.log('App Show')
+  },
+  onHide() {
+    console.log('App Hide')
+  }
+}
+</script>
+
+<style lang="scss">
+/* ==========================================
+ * 喝酒了么 - 全局样式
+ * 设计概念: 琥珀夜光 Amber Night
+ * ========================================== */
+
+page {
+  background-color: $bg-base;
+  color: $text-primary;
+  font-family: $font-base;
+  font-size: $fs-base;
+  line-height: $lh-normal;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* --- 通用工具类 --- */
+.page-container {
+  min-height: 100vh;
+  background-color: $bg-base;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.card {
+  background-color: $bg-card;
+  border-radius: $radius-lg;
+  padding: $sp-lg;
+  box-shadow: $shadow-sm;
+}
+
+.card-elevated {
+  background-color: $bg-elevated;
+  border-radius: $radius-lg;
+  padding: $sp-lg;
+  box-shadow: $shadow-md;
+}
+
+/* --- 文本层级 --- */
+.text-hero {
+  font-size: $fs-hero;
+  font-weight: $fw-black;
+  line-height: $lh-tight;
+  letter-spacing: -2rpx;
+}
+
+.text-display {
+  font-size: $fs-3xl;
+  font-weight: $fw-black;
+  line-height: $lh-tight;
+}
+
+.text-h1 {
+  font-size: $fs-2xl;
+  font-weight: $fw-bold;
+  line-height: $lh-tight;
+}
+
+.text-h2 {
+  font-size: $fs-xl;
+  font-weight: $fw-bold;
+  line-height: $lh-tight;
+}
+
+.text-h3 {
+  font-size: $fs-lg;
+  font-weight: $fw-medium;
+  line-height: $lh-normal;
+}
+
+.text-body {
+  font-size: $fs-base;
+  font-weight: $fw-normal;
+  line-height: $lh-normal;
+}
+
+.text-caption {
+  font-size: $fs-sm;
+  color: $text-secondary;
+  line-height: $lh-normal;
+}
+
+.text-tiny {
+  font-size: $fs-xs;
+  color: $text-tertiary;
+}
+
+/* --- 数字专用 --- */
+.text-num {
+  font-family: $font-num;
+  font-weight: $fw-bold;
+  letter-spacing: -1rpx;
+}
+
+/* --- 色彩文字 --- */
+.text-amber {
+  color: $amber;
+}
+
+.text-mint {
+  color: $mint;
+}
+
+.text-coral {
+  color: $coral;
+}
+
+.text-secondary {
+  color: $text-secondary;
+}
+
+/* --- 按钮系统 --- */
+.btn-primary {
+  background: linear-gradient(135deg, $amber, $amber-deep);
+  color: $text-on-amber;
+  font-size: $fs-md;
+  font-weight: $fw-bold;
+  padding: $sp-md $sp-xl;
+  border-radius: $radius-full;
+  border: none;
+  text-align: center;
+  box-shadow: $shadow-amber;
+  transition: all $duration-fast $ease-out;
+
+  &:active {
+    transform: scale(0.97);
+    box-shadow: 0 4rpx 16rpx rgba(232, 168, 56, 0.2);
+  }
+}
+
+.btn-primary-lg {
+  @extend .btn-primary;
+  padding: $sp-lg $sp-xl;
+  font-size: $fs-lg;
+  border-radius: $radius-full;
+}
+
+.btn-secondary {
+  background-color: $bg-elevated;
+  color: $text-primary;
+  font-size: $fs-base;
+  font-weight: $fw-medium;
+  padding: $sp-md $sp-xl;
+  border-radius: $radius-full;
+  border: 2rpx solid rgba(255, 255, 255, 0.08);
+  text-align: center;
+  transition: all $duration-fast $ease-out;
+
+  &:active {
+    background-color: $bg-card-alt;
+    transform: scale(0.97);
+  }
+}
+
+.btn-ghost {
+  background-color: transparent;
+  color: $amber;
+  font-size: $fs-base;
+  font-weight: $fw-medium;
+  padding: $sp-sm $sp-lg;
+  border: 2rpx solid $amber;
+  border-radius: $radius-full;
+  text-align: center;
+  transition: all $duration-fast $ease-out;
+
+  &:active {
+    background-color: $amber-glow;
+  }
+}
+
+.btn-text {
+  background: none;
+  border: none;
+  color: $text-secondary;
+  font-size: $fs-sm;
+  padding: $sp-xs $sp-sm;
+}
+
+/* --- 琥珀CTA大按钮(签名元素) --- */
+.btn-cta {
+  background: linear-gradient(135deg, $amber-light, $amber, $amber-deep);
+  color: $text-on-amber;
+  font-size: $fs-xl;
+  font-weight: $fw-bold;
+  padding: $sp-lg 0;
+  border-radius: $radius-xl;
+  border: none;
+  text-align: center;
+  box-shadow: $shadow-amber;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+    animation: shimmer 3s infinite;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+@keyframes shimmer {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+/* --- 标签 --- */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: $sp-xs $sp-md;
+  border-radius: $radius-full;
+  font-size: $fs-sm;
+  font-weight: $fw-medium;
+  background-color: $bg-elevated;
+  color: $text-secondary;
+
+  &.tag-active {
+    background-color: $amber-glow;
+    color: $amber;
+    border: 2rpx solid rgba(232, 168, 56, 0.3);
+  }
+}
+
+/* --- 分隔线 --- */
+.divider {
+  height: 2rpx;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
+  margin: $sp-lg 0;
+}
+
+/* --- 弹性布局辅助 --- */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+/* --- 安全区域 --- */
+.safe-bottom {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
+}
+
+/* --- 健康提示条 --- */
+.health-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $sp-sm;
+  font-size: $fs-xs;
+  color: $text-tertiary;
+  background-color: rgba(255, 255, 255, 0.02);
+
+  text {
+    opacity: 0.5;
+  }
+}
+</style>