把界面，带入视界。

<script setup lang="ts">
import { AgmButton, AgmPanel, AgmSelect, AgmSlider, AgmSwitch } from 'augma'
import { shallowRef } from 'vue'

const mode = shallowRef('focus')
const enabled = shallowRef(true)
const opacity = shallowRef(80)
const options = [
  { label: '专注', value: 'focus' },
  { label: '探索', value: 'explore' },
]
function reset() {
  mode.value = 'focus'
  enabled.value = true
  opacity.value = 80
}
</script>

<template>
  <AgmPanel title="控制面板" class="control-example">
    <AgmSelect v-model="mode" label="场景模式" :options="options" />
    <AgmSwitch v-model="enabled" label="显示导航" />
    <AgmSlider v-model="opacity" label="导航不透明度" :min="30" />
    <output>
      当前：{{ mode === 'focus' ? '专注' : '探索' }} · 导航{{
        enabled ? '开启' : '关闭'
      }}
      · {{ opacity }}%
    </output>
    <AgmButton variant="outline" @click="reset">恢复默认设置</AgmButton>
  </AgmPanel>
</template>

<style scoped>
.control-example {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 420px;
}
output {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>

<script setup lang="ts">
import { AgmHudProgress, AgmHudStatus, AgmPanel } from 'augma'
</script>

<template>
  <AgmPanel title="任务状态" class="hud-example">
    <div>
      <AgmHudStatus>界面就绪</AgmHudStatus>
      <AgmHudStatus tone="warning">等待授权</AgmHudStatus>
      <AgmHudStatus tone="danger">设备离线</AgmHudStatus>
    </div>
    <AgmHudProgress label="资源加载" :value="72" variant="ring" />
    <AgmHudProgress label="等待设备连接" />
    <p>示例状态，不会访问设备或请求权限。</p>
  </AgmPanel>
</template>

<style scoped>
.hud-example {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: 100%;
}
.hud-example > div:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.hud-example > .agm-progress:not(.agm-progress--ring) {
  width: 100%;
}
p {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>

<script setup lang="ts">
import { AgmButton, AgmHudProgress, AgmPanel } from 'augma'
import { shallowRef } from 'vue'

const value = shallowRef(25)
</script>

<template>
  <AgmPanel title="自定义强调色" class="theme-example">
    <AgmHudProgress label="示例进度" :value="value" />
    <AgmButton @click="value = value >= 100 ? 0 : value + 25">
      推进进度
    </AgmButton>
    <p>通过语义变量定制颜色，保持组件结构与键盘行为。</p>
  </AgmPanel>
</template>

<style scoped>
.theme-example {
  --agm-accent: #7951bd;
  --agm-accent-hover: #65419e;
  --agm-on-accent: #fff;
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 420px;
}
p {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>