复制<template>
  <div class="tuff-demo-row">
    <TxButton size="sm">操作</TxButton>
    <TuffSwitch :model-value="true" />
    <TxStatusBadge text="在线" status="success" />
    <TxTag label="专注" />
    <TxProgressBar :percentage="62" style="width: 140px;" />
  </div>
</template>

 复制<script setup lang="ts">
import { ref } from 'vue'

const query = ref('')
const selectedKeys = ref([1])
const automationEnabled = ref(true)
</script>

<template>
  <section class="workflow-panel">
    <header>
      <h3>发布工作台</h3>
      <TxButton variant="primary" size="sm" icon="i-carbon-rocket">发布</TxButton>
    </header>
    <TuffInput v-model="query" placeholder="搜索任务" prefix-icon="i-carbon-search" clearable />
    <TuffSwitch v-model="automationEnabled" />
    <TxProgressBar :percentage="84" status="success" show-text />
    <TxStatusBadge text="审阅中" status="warning" />
    <TxDataTable v-model:selected-keys="selectedKeys" :columns="columns" :data="rows" row-key="id" selectable />
  </section>
</template>

 复制<script setup lang="ts">
import DashboardSparklineChart from '~/components/dashboard/DashboardSparklineChart.client.vue'
</script>

<template>
  <DashboardSparklineChart
    :values="[18, 24, 21, 36, 42, 38, 54]"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    color="var(--tx-color-primary, #409eff)"
    show-grid
  />
</template>

 复制<template>
  <section class="grid gap-3">
    <TxStatCard
      variant="progress"
      value="99.9%"
      label="API 可用率"
      meta="正常"
      :progress="99"
      icon-class="i-carbon-cloud-monitoring text-[var(--tx-color-success)]"
    />
    <TxStatusBadge text="审阅完成" status="success" size="sm" />
    <TxProgressBar :percentage="86" status="success" show-text />
  </section>
</template>

 复制<template>
  <section class="grid gap-3">
    <TxLoadingState title="正在加载规则" surface="card" />
    <TxEmptyState variant="no-data" title="还没有自动化规则" surface="card" />
    <TxErrorState title="规则加载失败" surface="card" />
  </section>
</template>

 复制<script setup lang="ts">
import { toast } from '@talex-touch/tuffex/utils'
import { ref } from 'vue'

const syncing = ref(true)
</script>

<template>
  <section class="grid gap-3">
    <TxToastHost />
    <TxTooltip content="Tooltip 只解释当前动作。">
      <TxButton @click="toast({ title: '同步任务已排队', duration: 0 })">发送提示</TxButton>
    </TxTooltip>
    <TxLoadingOverlay :loading="syncing" text="正在刷新任务队列…">
      <TxSpinner :size="16" />
    </TxLoadingOverlay>
  </section>
</template>

 复制<script setup lang="ts">
import { computed, ref } from 'vue'

const query = ref('')
const selectedScope = ref<string | number>('all')
const scopeOptions = [
  { value: 'all', label: '全部' },
  { value: 'docs', label: '文档' },
  { value: 'tasks', label: '任务' },
]
const filteredRecords = computed(() => (query.value ? [] : scopeOptions))
</script>

<template>
  <section class="grid gap-3">
    <TxSearchInput v-model="query" remote placeholder="搜索插件 / 文档 / 任务" />
    <TxSearchSelect v-model="selectedScope" :options="scopeOptions" placeholder="筛选范围" />
    <TxSearchEmpty v-if="!filteredRecords.length" surface="card" />
  </section>
</template>

 复制<template>
  <section class="grid gap-3">
    <TxDataTable :columns="columns" :data="pagedRows" row-key="id" selectable />
    <TxPagination v-model:current-page="page" :total="rows.length" :page-size="4" show-info />
    <TxSkeleton :loading="true" :lines="3" />
  </section>
</template>

 复制<script setup lang="ts">
import { ref } from 'vue'

const selectedScope = ref<string | number>('release')
const ownerTeam = ref<string | number | undefined>('docs')
const assignedKeys = ref<Array<string | number>>(['read-docs'])
</script>

<template>
  <section class="grid gap-3">
    <TxTree v-model="selectedScope" :nodes="scopeNodes" />
    <TxTreeSelect v-model="ownerTeam" :nodes="teamNodes" placeholder="归属团队" />
    <TxTransfer v-model="assignedKeys" :data="resources" />
    <TxTimeline>
      <TxTimelineItem title="分配资源" time="10:20" color="success" active />
    </TxTimeline>
  </section>
</template>

 复制<script setup lang="ts">
import { ref } from 'vue'

const releasePath = ref(['desktop', 'stable', 'macos'])
const packageFormat = ref('signed')
const rolloutMode = ref('phased')
const riskLevel = ref(2)
const traffic = ref(35)
const labels = ref(['nexus', 'verified'])
const scopeOptions = [
  {
    value: 'desktop',
    label: '桌面端',
    children: [
      {
        value: 'stable',
        label: '稳定通道',
        children: [{ value: 'macos', label: 'macOS', leaf: true }],
      },
    ],
  },
]
const riskSegments = [
  { value: 1, label: '低' },
  { value: 2, label: '中' },
  { value: 3, label: '高' },
  { value: 4, label: '冻结' },
]
</script>

<template>
  <section class="grid gap-3">
    <TxCascader v-model="releasePath" :options="scopeOptions" placeholder="发布范围" />
    <TxFlatSelect v-model="packageFormat" placeholder="包格式">
      <TxFlatSelectItem value="signed" label="签名构建" />
    </TxFlatSelect>
    <TxFlatSelect v-model="rolloutMode" placeholder="发布模式">
      <TxFlatSelectItem value="phased" label="分阶段" />
    </TxFlatSelect>
    <TxSegmentedSlider v-model="riskLevel" :segments="riskSegments" />
    <TxSlider v-model="traffic" :min="5" :max="100" :step="5" show-value />
    <TxTagInput v-model="labels" placeholder="输入标签后回车" />
  </section>
</template>

 复制<template>
  <section class="grid gap-3">
    <TxDropdownMenu>
      <template #trigger>
        <TxButton>发布操作</TxButton>
      </template>
      <TxDropdownItem>快速发布</TxDropdownItem>
    </TxDropdownMenu>
    <TxPopover>
      <template #reference>
        <TxButton variant="secondary">策略说明</TxButton>
      </template>
      浮层只放短说明和轻量动作。
    </TxPopover>
    <TxTabs placement="left" indicator-variant="pill">
      <TxTabItem name="总览" activation>总览配置</TxTabItem>
    </TxTabs>
    <TxDrawer :visible="false" title="发布策略" />
  </section>
</template>