使用示例

示例 1: 切换主题并显示消息

<script setup>
import { inject } from 'vue';

const { themeToggle, $tMessage } = inject('$global');

const changeTheme = (theme) => {
  themeToggle(theme);
  $tMessage({
    type: 'success',
    content: `已切换到${theme}主题`
  });
};
</script>

<template>
  <button @click="changeTheme('darkBlue')">切换深色主题</button>
</template>

示例 2: 使用响应式主题颜色

<script setup>
import { inject, computed } from 'vue';

const { $tc, $gTheme } = inject('$global');

const primaryColor = $tc('primary.base', true);
const buttonStyle = computed(() => ({
  backgroundColor: primaryColor.value,
  color: '#fff'
}));
</script>

<template>
  <button :style="buttonStyle">动态主题按钮</button>
</template>

示例 3: 国际化文本

<script setup>
import { inject } from 'vue';

const { i18n } = inject('$global');
</script>

<template>
  <div>
    <h1>{{ i18n('error.label') }}</h1>
    <button>{{ i18n('error.terminateService') }}</button>
  </div>
</template>

示例 4: 加载状态管理

<script setup>
import { inject } from 'vue';

const { $tLoading, $tLoadingClose, $tMessage } = inject('$global');

const loadData = async () => {
  $tLoading({
    visible: true,
    desc:'加载数据中...',
    spinner: 'ringA'
  });
  
  try {
    // 模拟异步请求
    await new Promise(resolve => setTimeout(resolve, 2000));
    $tMessage('加载成功');
  } catch (error) {
    $tMessage({ type: 'error', content: '加载失败' });
  } finally {
    $tLoadingClose();
  }
};
</script>

<template>
  <button @click="loadData">加载数据</button>
</template>

示例 5: Admin 标签页管理

可用性:

✕ Scifi

✕ Base

✓ Admin

✓ Prime

<script setup>
import { inject } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const { tabAdd, $ATabs } = inject('$global');

const openPage = (route) => {
  tabAdd({
    meta: {
      label: route.meta.label,
      icon: route.meta.icon,
      keepAlive: true
    },
    path: route.path,
    query: route.query
  });
  
  router.push(route);
};
</script>

<template>
  <div>
    <div v-for="tab in $ATabs" :key="tab.path">
      {{ tab.label }}
    </div>
  </div>
</template>

---