oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260720172840

Browse Source
This commit is contained in:
oneao committed 2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
3117 files changed
+201407 -1236
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/.claude/skills/antdv-next/references/components/statistic/demo/_semantic.md
+49
View File
@@ -0,0 +1,49 @@
# _semantic
## Source
```vue
<script setup lang="ts">
import { ArrowUpOutlined } from '@antdv-next/icons'
import { computed } from 'vue'
import { SemanticPreview } from '@/components/semantic'
import { useComponentLocale } from '@/composables/use-locale'
import { locales } from '../locales'
const { t } = useComponentLocale(locales)
const semantics = computed(() => [
{ name: 'root', desc: t('root'), version: '1.0.0' },
{ name: 'header', desc: t('header'), version: '1.0.0' },
{ name: 'title', desc: t('title'), version: '1.0.0' },
{ name: 'prefix', desc: t('prefix'), version: '1.0.0' },
{ name: 'content', desc: t('content'), version: '1.0.0' },
{ name: 'value', desc: t('value'), version: '1.3.0' },
{ name: 'suffix', desc: t('suffix'), version: '1.0.0' },
])
</script>
<template>
<SemanticPreview
component-name="Statistic"
:semantics="semantics"
>
<template #default="{ classes }">
<div :style="{ position: 'absolute' }">
<a-statistic
title="Active"
:value="11.28"
:precision="2"
:styles="{ content: { color: '#3f8600' } }"
suffix="%"
:classes="classes"
>
<template #prefix>
<ArrowUpOutlined />
</template>
</a-statistic>
</div>
</template>
</SemanticPreview>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/statistic/demo/basic.md
+26
View File
@@ -0,0 +1,26 @@
# Basic
## Description (en-US)
Simplest Usage.
## Source
```vue
<template>
<a-row :gutter="16">
<a-col :span="12">
<a-statistic title="Active Users" :value="112893" />
</a-col>
<a-col :span="12">
<a-statistic title="Account Balance (CNY)" :value="112893" :precision="2" />
<a-button style="margin: 16px" type="primary">
Recharge
</a-button>
</a-col>
<a-col :span="12">
<a-statistic title="Active Users" :value="112893" loading />
</a-col>
</a-row>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/statistic/demo/card.md
+36
View File
@@ -0,0 +1,36 @@
# In Card
## Description (en-US)
Display statistic data in Card.
## Source
```vue
<script setup lang="ts">
import { ArrowDownOutlined, ArrowUpOutlined } from '@antdv-next/icons'
</script>
<template>
<a-row :gutter="16">
<a-col :span="12">
<a-card variant="borderless">
<a-statistic title="Active" :value="11.28" :precision="2" :styles="{ content: { color: '#3f8600' } }" suffix="%">
<template #prefix>
<ArrowUpOutlined />
</template>
</a-statistic>
</a-card>
</a-col>
<a-col :span="12">
<a-card variant="borderless">
<a-statistic title="Idle" :value="9.3" :precision="2" :styles="{ content: { color: '#cf1322' } }" suffix="%">
<template #prefix>
<ArrowDownOutlined />
</template>
</a-statistic>
</a-card>
</a-col>
</a-row>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/statistic/demo/style-class.md
+68
View File
@@ -0,0 +1,68 @@
# Custom semantic dom styling
## Description (en-US)
## Source
```vue
<script setup lang="ts">
import type { StatisticProps } from 'antdv-next'
import { ArrowDownOutlined, ArrowUpOutlined } from '@antdv-next/icons'
const classes = {
root: 'custom-statistic-root',
}
const styleFn: StatisticProps['styles'] = ({ props }) => {
const numValue = Number(props.value ?? 0)
const isNegative = Number.isFinite(numValue) && numValue < 0
if (isNegative) {
return {
title: {
color: '#ff4d4f',
},
content: {
color: '#ff7875',
},
} satisfies StatisticProps['styles']
}
return {}
}
</script>
<template>
<a-flex vertical gap="middle">
<a-statistic
:value="93241"
title="Monthly Active Users"
:classes="classes"
:styles="{ title: { color: '#1890ff', fontWeight: '600px' }, content: { fontSize: '24px' } }"
suffix="users"
>
<template #prefix>
<ArrowUpOutlined />
</template>
</a-statistic>
<a-statistic
:value="-18.7"
title="Yearly Loss"
:precision="1"
:classes="classes"
:styles="styleFn"
suffix="%"
>
<template #prefix>
<ArrowDownOutlined />
</template>
</a-statistic>
</a-flex>
</template>
<style scoped>
.custom-statistic-root {
border: 2px dashed #ccc;
padding: 16px;
border-radius: 8px;
}
</style>
```
code/fms/.claude/skills/antdv-next/references/components/statistic/demo/timer.md
+60
View File
@@ -0,0 +1,60 @@
# Timer
## Description (en-US)
Timer component.
## Source
```vue
<script setup lang="ts">
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30 // Dayjs is also OK
const before = Date.now() - 1000 * 60 * 60 * 24 * 2 + 1000 * 30
const tenSecondsLater = Date.now() + 10 * 1000
function onFinish() {
console.log('finished!')
}
function onChange(val?: number) {
if (typeof val === 'number' && 4.95 * 1000 < val && val < 5 * 1000) {
console.log('changed!')
}
}
</script>
<template>
<a-row :gutter="16">
<a-col :span="12">
<a-statistic-timer type="countdown" :value="deadline" @finish="onFinish" />
</a-col>
<a-col :span="12">
<a-statistic-timer type="countdown" title="Million Seconds" :value="deadline" format="HH:mm:ss:SSS" />
</a-col>
<a-col :span="12">
<a-statistic-timer
type="countdown" title="Countdown" :value="tenSecondsLater"
@change="onChange"
/>
</a-col>
<a-col :span="12">
<a-statistic-timer type="countup" title="Countup" :value="before" @change="onChange" />
</a-col>
<a-col :span="24" style="margin-top: 32px">
<a-statistic-timer
type="countdown"
title="Day Level (Countdown)"
:value="deadline"
format="D 天 H 时 m 分 s 秒"
/>
</a-col>
<a-col :span="24" style="margin-top: 32px">
<a-statistic-timer
type="countup"
title="Day Level (Countup)"
:value="before"
format="D 天 H 时 m 分 s 秒"
/>
</a-col>
</a-row>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/statistic/demo/unit.md
+28
View File
@@ -0,0 +1,28 @@
# Unit
## Description (en-US)
Add unit through `prefix` and `suffix`.
## Source
```vue
<script lang="ts" setup>
import { LikeOutlined } from '@antdv-next/icons'
</script>
<template>
<a-row :gutter="16">
<a-col :span="12">
<a-statistic title="Feedback" :value="1128">
<template #prefix>
<LikeOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="12">
<a-statistic title="Unmerged" :value="93" suffix="/ 100" />
</a-col>
</a-row>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/statistic/docs.md
+78
View File
@@ -0,0 +1,78 @@
---
title: Statistic
description: Display statistic number.
---
## When To Use
- When want to highlight some data.
- When want to display statistic data with description.
## Demos
| Demo | Path |
| --- | --- |
| Basic | demo/basic.md |
| Unit | demo/unit.md |
| In Card | demo/card.md |
| Timer | demo/timer.md |
| Custom semantic dom styling | demo/style-class.md |
## API
Common props ref：[Common props](../../docs/vue/common-props.md)
### Statistic
#### Props
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the Statistic component. Supports object or function | StatisticClassNamesType | - | - | ✓ |
| decimalSeparator | The decimal separator | string | `.` | - | × |
| formatter | Customize value display logic | (value: number \| string) =&gt; VueNode | - | - | × |
| groupSeparator | Group separator | string | `,` | - | × |
| loading | Loading status of Statistic | boolean | false | - | × |
| precision | The precision of input value | number | - | - | × |
| prefix | The prefix node of value | VueNode | - | - | × |
| styles | Customize inline style for each semantic structure inside the Statistic component. Supports object or function | StatisticStylesType | - | - | ✓ |
| suffix | The suffix node of value | VueNode | - | - | × |
| title | Display title | VueNode | - | - | × |
| value | Display value | string \| number | - | - | × |
| valueStyle | Set value section style | CSSProperties | - | - | × |
#### Slots
| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| formatter | Customize value display logic | (value: number \| string) =&gt; VueNode | - |
| prefix | The prefix node of value | () =&gt; VueNode | - |
| suffix | The suffix node of value | () =&gt; VueNode | - |
| title | Display title | () =&gt; VueNode | - |
### Statistic.Timer
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | StatisticClassNamesType | - | - |
| format | Format as [dayjs](https://day.js.org/) | string | `HH:mm:ss` | - |
| prefix | The prefix node of value | VueNode | - | - |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | StatisticStylesType | - | - |
| suffix | The suffix node of value | VueNode | - | - |
| title | Display title | VueNode | - | - |
| type | Timer type, countdown or countup | `countdown` \| `countup` | - | - |
| value | Set target time | number | - | - |
| valueStyle | Set value section style | CSSProperties | - | - |
#### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Trigger when time's changing | (value: number) =&gt; void | - |
| finish | Trigger when time's up, only to be called when type is `countdown` | () =&gt; void | - |
#### Slots
| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| prefix | The prefix node of value | () =&gt; VueNode | - |
| suffix | The suffix node of value | () =&gt; VueNode | - |
| title | Display title | () =&gt; VueNode | - |
## Semantic DOM
| _semantic | demo/_semantic.md |
code/fms/.claude/skills/antdv-next/references/components/statistic/token.md
+27
View File
@@ -0,0 +1,27 @@
# statistic Token
Use these variables through `theme.components.Statistic`. This document lists definitions only and does not include values.
```vue
<a-config-provider
:theme="{
token: {
// Global token configuration
},
components: {
Statistic: {
// Token name: value
},
},
}"
>
...
</a-config-provider>
```
## Token List
| Token | Type | Description |
| --- | --- | --- |
| `titleFontSize` | `number` | Title font size |
| `contentFontSize` | `string \| number` | Content font size |