// components/common-button/common-button.js
Component({
  properties: {
    // 定義屬性
    type: {
      type: String,
      value: 'primary'  // primary/default/danger
    },
    text: String,
    disabled: Boolean
  },
  methods: {
    handleTap() {
      if (!this.data.disabled) {
        this.triggerEvent('tap')
      }
    }
  }
})

<!-- components/common-button/common-button.wxml -->
<button 
  class="common-btn {{type}} {{disabled ? 'disabled' : ''}}"
  bindtap="handleTap"
>
  {{text}}
</button>

/* components/common-button/common-button.wxss */
.common-btn {
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.common-btn.primary {
  background: #07c160;
  color: #fff;
}
.common-btn.disabled {
  opacity: 0.5;
}

// 頁面.json
{
  "usingComponents": {
    "common-button": "/components/common-button/common-button"
  }
}

<!-- 頁面.wxml -->
<common-button 
  text="提交" 
  type="primary" 
  bindtap="onSubmit"
/>

<common-button 
  text="取消" 
  type="default" 
  bindtap="onCancel"
/>

// behaviors/loading-behavior.js
module.exports = Behavior({
  data: {
    isLoading: false
  },
  methods: {
    // 顯示加載
    showLoading(text = '加載中...') {
      wx.showLoading({ title: text })
      this.setData({ isLoading: true })
    },
    
    // 隱藏加載
    hideLoading() {
      wx.hideLoading()
      this.setData({ isLoading: false })
    },
    
    // 帶加載狀態(tài)的請求
    async requestWithLoading(options) {
      this.showLoading()
      try {
        const res = await this.request(options)
        return res
      } finally {
        this.hideLoading()
      }
    }
  }
})

// components/user-card/user-card.js
const loadingBehavior = require('../../behaviors/loading-behavior')

Component({
  behaviors: [loadingBehavior],
  methods: {
    async fetchUserInfo() {
      const data = await this.requestWithLoading({
        url: '/api/user/info'
      })
      this.setData({ userInfo: data })
    }
  }
})

// components/product-list/product-list.js
const loadingBehavior = require('../../behaviors/loading-behavior')

Component({
  behaviors: [loadingBehavior],
  methods: {
    async loadProducts() {
      const products = await this.requestWithLoading({
        url: '/api/products'
      })
      this.setData({ products })
    }
  }
})

// behaviors/form-behavior.js
module.exports = Behavior({
  data: {
    formData: {},
    formErrors: {}
  },
  methods: {
    // 表單字段變化
    onFormChange(e) {
      const { field } = e.currentTarget.dataset
      const { value } = e.detail
      
      this.setData({
        [`formData.${field}`]: value,
        [`formErrors.${field}`]: ''
      })
    },
    
    // 表單驗證
    validateForm(rules) {
      const errors = {}
      let isValid = true
      
      Object.keys(rules).forEach(field => {
        const value = this.data.formData[field]
        const rule = rules[field]
        
        if (rule.required && !value) {
          errors[field] = rule.message || '該字段必填'
          isValid = false
        }
        // 更多驗證規(guī)則...
      })
      
      this.setData({ formErrors: errors })
      return isValid
    }
  }
})

// utils/with-auth.js
function withAuth(Component) {
  return function(options) {
    const originalOnLoad = options.methods.onLoad || function() {}
    
    options.methods.onLoad = function(params) {
      // 檢查登錄狀態(tài)
      if (!this.checkAuth()) {
        wx.redirectTo({ url: '/pages/login/login' })
        return
      }
      
      originalOnLoad.call(this, params)
    }
    
    // 添加登錄檢查方法
    options.methods.checkAuth = function() {
      const token = wx.getStorageSync('token')
      return !!token
    }
    
    return Component(options)
  }
}

// pages/user/user.js
import withAuth from '../../utils/with-auth'

const originalOptions = {
  data: { userInfo: {} },
  methods: {
    onLoad() {
      this.loadUserInfo()
    },
    loadUserInfo() {
      // 加載用戶信息
    }
  }
}

// 包裝原始配置
withAuth(Component)(originalOptions)

// utils/date-util.js
// 日期格式化
export function formatDate(date, format = 'YYYY-MM-DD') {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  
  return format
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day)
}

// 相對時間
export function relativeTime(date) {
  const now = new Date()
  const target = new Date(date)
  const diff = now - target
  
  const minutes = Math.floor(diff / 60000)
  if (minutes < 60) return `${minutes}分鐘前`
  
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}小時前`
  
  const days = Math.floor(hours / 24)
  if (days < 30) return `${days}天前`
  
  return formatDate(date)
}

// utils/request-util.js
// 統(tǒng)一的網(wǎng)絡(luò)請求
export function request(options) {
  const token = wx.getStorageSync('token')
  const header = {
    'Content-Type': 'application/json',
    ...options.header
  }
  
  if (token) {
    header['Authorization'] = `Bearer ${token}`
  }
  
  return new Promise((resolve, reject) => {
    wx.request({
      url: `https://api.example.com${options.url}`,
      method: options.method || 'GET',
      data: options.data,
      header,
      success: (result) => {
        if (result.statusCode === 200) {
          resolve(result.data)
        } else {
          reject(result.data)
        }
      },
      fail: reject
    })
  })
}

// components/smart-form/smart-form.js
const formBehavior = require('../../behaviors/form-behavior')
const validationBehavior = require('../../behaviors/validation-behavior')

Component({
  behaviors: [formBehavior, validationBehavior],
  
  methods: {
    // 繼承自formBehavior的onFormChange
    // 繼承自validationBehavior的validateForm
    
    async onSubmit() {
      if (!this.validateForm(this.data.rules)) {
        return
      }
      
      // 提交表單
      const result = await this.submitData(this.data.formData)
      
      if (result.success) {
        this.triggerEvent('success', result.data)
      }
    }
  }
})

<!-- templates/empty-state.wxml -->
<template name="emptyState">
  <view class="empty-container">
    <image src="{{icon}}" class="empty-icon" />
    <text class="empty-text">{{text}}</text>
    <button wx:if="{{showButton}}" bindtap="onButtonTap">
      {{buttonText}}
    </button>
  </view>
</template>

<template name="loading">
  <view class="loading-container">
    <image src="/images/loading.gif" class="loading-icon" />
    <text>{{text || '加載中...'}}</text>
  </view>
</template>

<!-- 頁面.wxml -->
<import src="/templates/empty-state.wxml" />
<import src="/templates/loading.wxml" />

<view wx:if="{{isLoading}}">
  <template is="loading" data="{{text: '拼命加載中...'}}" />
</view>

<view wx:elif="{{isEmpty}}">
  <template 
    is="emptyState" 
    data="{{{
      icon: '/images/empty.png',
      text: '暫無數(shù)據(jù)',
      showButton: true,
      buttonText: '刷新試試'
    }}}" 
  />
</view>

/* styles/variables.wxss */
:root {
  --primary-color: #07c160;
  --danger-color: #fa5151;
  --text-color: #333;
  --border-color: #eee;
  --font-size-sm: 24rpx;
  --font-size-md: 28rpx;
  --font-size-lg: 32rpx;
  --border-radius: 8rpx;
}

/* styles/common.wxss */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hairline {
  position: relative;
}
.hairline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1rpx solid var(--border-color);
  transform: scaleY(0.5);
}

/* 頁面.wxss */
@import "/styles/variables.wxss";
@import "/styles/common.wxss";

.user-card {
  composes: flex-center;
  padding: 20rpx;
  border-radius: var(--border-radius);
  background: #fff;
}

// store/user-store.js
class UserStore {
  constructor() {
    this._listeners = []
    this._userInfo = null
  }
  
  // 獲取用戶信息
  getUserInfo() {
    if (!this._userInfo) {
      this._userInfo = wx.getStorageSync('userInfo')
    }
    return this._userInfo
  }
  
  // 更新用戶信息
  setUserInfo(userInfo) {
    this._userInfo = userInfo
    wx.setStorageSync('userInfo', userInfo)
    this._notifyListeners()
  }
  
  // 訂閱變化
  subscribe(listener) {
    this._listeners.push(listener)
    return () => {
      const index = this._listeners.indexOf(listener)
      if (index > -1) this._listeners.splice(index, 1)
    }
  }
  
  _notifyListeners() {
    this._listeners.forEach(listener => listener(this._userInfo))
  }
}

// 導(dǎo)出單例
export default new UserStore()

// pages/profile/profile.js
import userStore from '../../store/user-store'

Page({
  onLoad() {
    // 獲取用戶信息
    this.setData({ 
      userInfo: userStore.getUserInfo() 
    })
    
    // 訂閱更新
    this.unsubscribe = userStore.subscribe((userInfo) => {
      this.setData({ userInfo })
    })
  },
  
  onUnload() {
    // 取消訂閱
    this.unsubscribe && this.unsubscribe()
  }
})

utils/
  ├── date-util.js        # 日期處理
  ├── request-util.js     # 網(wǎng)絡(luò)請求
  ├── validate-util.js    # 驗證工具
  └── storage-util.js     # 存儲工具

behaviors/
  ├── form-behavior.js
  ├── loading-behavior.js
  └── auth-behavior.js

components/
  ├── common/            # 通用組件
  ├── business/          # 業(yè)務(wù)組件
  └── layout/            # 布局組件

mixins/                  # 混合功能
templates/               # 模板文件
styles/                  # 樣式文件

// config/app-config.js
export default {
  // API配置
  api: {
    baseURL: 'https://api.example.com',
    timeout: 10000
  },
  
  // 頁面路徑
  pages: {
    login: '/pages/login/login',
    home: '/pages/home/home'
  },
  
  // 存儲鍵名
  storageKeys: {
    token: 'user_token',
    userInfo: 'user_info'
  }
}

components/common-button/
  ├── common-button.js
  ├── common-button.wxml
  ├── common-button.wxss
  └── example/
      ├── example.js      # 使用示例
      └── example.wxml