/* 定义跨平台CSS变量（设计令牌） */
:root {
  --color-primary: #007aff; /* 主品牌色 */
  --color-text-primary: #1d1d1f;
  --spacing-unit: 8px;
  --border-radius-sm: calc(var(--spacing-unit) * 0.5);
  --border-radius-md: var(--spacing-unit);
  --font-size-body: 14px;
  --animation-duration-fast: 200ms;
}

/* 组件中使用设计令牌 */
.button {
  background-color: var(--color-primary);
  color: white;
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius-md);
  border: none;
  font-size: var(--font-size-body);
  transition: background-color var(--animation-duration-fast) ease;
}

.button:hover {
  background-color: color-mix(in srgb, var(--color-primary) 80%, black);
}

// designTokens.js
export const designTokens = {
  colors: {
    primary: '#007aff',
    background: '#f5f5f7',
    textPrimary: '#1d1d1f',
  },
  spacing: {
    unit: 8,
    get: (multiplier) => `${multiplier * designTokens.spacing.unit}px`,
  },
  typography: {
    body: '14px/1.4 -apple-system, BlinkMacSystemFont, sans-serif',
  },
};

// 在组件中使用
import { designTokens } from './designTokens';

const buttonStyle = {
  backgroundColor: designTokens.colors.primary,
  padding: designTokens.spacing.get(1.5) + ' ' + designTokens.spacing.get(2),
  font: designTokens.typography.body,
};

// 一个简化的跨端按钮组件抽象（假设框架为Taro/Vue风格）
// BaseButton.vue 或类似结构的组件定义
<template>
  <!-- 根据不同平台编译为原生组件 -->
  <view
    :class="['button', `button--${type}`, { 'is-disabled': disabled }]"
    :style="computedStyle"
    @click="handleClick"
  >
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    type: {
      type: String,
      default: 'default', // 'default', 'primary', 'text'
    },
    disabled: Boolean,
    // 可以统一传入样式覆盖，内部做平台适配
    customStyle: Object,
  },
  computed: {
    computedStyle() {
      // 合并基础样式和自定义样式，并可在此处根据平台微调
      const baseStyle = {
        padding: '12px 24px',
        borderRadius: '8px',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
      };
      return { ...baseStyle, ...this.customStyle };
    },
  },
  methods: {
    handleClick(e) {
      if (!this.disabled) {
        this.$emit('click', e);
        // 可以在此处添加统一的点击反馈逻辑，如震动（在支持的原生端）
      }
    },
  },
};
</script>

<style scoped>
/* 公共样式，通过条件编译或样式预处理器处理平台差异 */
.button {
  font-size: 16px;
  border: none;
  outline: none;
  /* #ifdef MP-WEIXIN */
  /* 小程序特定样式调整 */
  line-height: 1.2;
  /* #endif */
}
.button--primary {
  background-color: var(--color-primary);
  color: white;
}
.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}
</style>

// 工具函数：平台适配逻辑
import { getSystemInfo } from '@tarojs/taro'; // 以Taro为例

export function platformAdapt(styles) {
  return getSystemInfo().then(systemInfo => {
    const { platform, system } = systemInfo;
    const adaptedStyles = { ...styles };

    // 根据平台调整字体
    if (platform === 'ios') {
      adaptedStyles.fontFamily = '-apple-system, BlinkMacSystemFont, sans-serif';
      // iOS下标题栏高度可能不同
      if (styles.isNavBar) {
        adaptedStyles.height = '44px';
      }
    } else if (platform === 'android') {
      adaptedStyles.fontFamily = 'Roboto, sans-serif';
      if (styles.isNavBar) {
        adaptedStyles.height = '56px';
      }
    }

    // 根据系统版本或屏幕尺寸进行更细粒度适配
    if (parseFloat(system) >= 11) {
      // 针对iOS 11+的Safe Area适配
      adaptedStyles.paddingTop = 'env(safe-area-inset-top)';
    }

    return adaptedStyles;
  });
}

// 一个可复用的用户状态管理模块 (使用Vue Composition API风格示例)
// userStore.js
import { reactive, computed } from 'vue'; // 或对应跨端框架的响应式API
import { loginApi, fetchUserProfileApi } from '../api/user';

export const useUserStore = () => {
  const state = reactive({
    token: null,
    profile: null,
    isLoggedIn: computed(() => !!state.token),
  });

  const actions = {
    async login(credentials) {
      const res = await loginApi(credentials);
      state.token = res.token;
      // 登录后自动获取用户资料
      await actions.fetchProfile();
    },
    async fetchProfile() {
      if (!state.token) return;
      state.profile = await fetchUserProfileApi(state.token);
    },
    logout() {
      state.token = null;
      state.profile = null;
    },
  };

  return { state, actions };
};

// 在任何端的页面或组件中，都可以以相同方式使用
// Page.vue
<script setup>
import { useUserStore } from '../stores/userStore';
const { state: userState, actions: userActions } = useUserStore();

const handleLogin = async () => {
  await userActions.login({ username: 'test', password: '123' });
  // 登录后，所有端的状态同步更新，可以跳转到主页
};
</script>