shiouhoo
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: optimization statistic component (#1608) 

* fix: update statistic componets

* fix: update demo of props

* fix: update statistic style

* docs: update demo
This commit is contained in:
James 2024-05-09 02:48:41 -07:00 committed by GitHub
parent e164688824
commit d4faaacdad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 212 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
examples/sites/demos/apis/statistic.js
View File

@ -31,7 +31,8 @@ export default {
},
{
name: 'title',
type: 'string | array',
type: 'string | ITitleType',
typeAnchorName: 'ITitleType',
defaultValue: '',
desc: {
'zh-CN': '设置数字内容标题',
@ -41,18 +42,6 @@ export default {
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'group-separator',
type: 'string',
defaultValue: ',',
desc: {
'zh-CN': '设置千分位标志符',
'en-US': 'Set Millennial Flag'
},
mode: ['pc'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'prefix',
type: 'string',
@ -77,28 +66,16 @@ export default {
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'formatter',
type: '(value) => {}',
defaultValue: '',
desc: {
'zh-CN': '设置自定义数字格式化',
'en-US': 'Set custom number formatting'
},
mode: ['pc'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'value-style',
type: 'string | object | array',
type: 'object | array',
defaultValue: '',
desc: {
'zh-CN': '设置数字样式',
'en-US': 'Set Number Style'
},
mode: ['pc'],
pcDemo: 'basic-usage',
pcDemo: 'prefix-suffix-slot',
mfDemo: ''
}
],
@ -114,6 +91,7 @@ export default {
'en-US': 'Digital content front slot'
},
mode: ['pc'],
pcDemo: 'prefix-suffix-slot',
mfDemo: ''
},
{
@ -125,6 +103,7 @@ export default {
'en-US': 'Digital content rear slot'
},
mode: ['pc'],
pcDemo: 'prefix-suffix-slot',
mfDemo: ''
},
{
@ -136,9 +115,22 @@ export default {
'en-US': 'Digital content title slot'
},
mode: ['pc'],
pcDemo: 'statistic-slot',
mfDemo: ''
}
]
}
],
types: [
{
name: 'ITitleType',
type: '',
code: `
interface ITitleType {
value?: string // 标题文本
position?: string // 标题位置，取值：top | bottom
}
`
}
]
}

18
examples/sites/demos/pc/app/statistic/basic-usage-composition-api.vue
View File

@ -1,25 +1,19 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true" class="row-bg">
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="0" title="用户活跃度"></tiny-statistic>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="num" :precision="0"></tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="2" title="消费额度"></tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="0" title="来访数量" prefix="view:"></tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="123" :precision="0" title="男女占比例" suffix="/100"></tiny-statistic>
<tiny-col :span="8">
<tiny-statistic :value="num" :precision="2"></tiny-statistic>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>
</template>
<script setup lang="jsx">
<script setup>
import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
const num = 306526.23

16
examples/sites/demos/pc/app/statistic/basic-usage.vue
View File

@ -1,18 +1,12 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true" class="row-bg">
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="0" title="用户活跃度"></tiny-statistic>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="num" :precision="0"></tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="2" title="消费额度"></tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="0" title="来访数量" prefix="view:"></tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="123" :precision="0" title="男女占比例" suffix="/100"></tiny-statistic>
<tiny-col :span="8">
<tiny-statistic :value="num" :precision="2"></tiny-statistic>
</tiny-col>
</tiny-row>
</tiny-layout>

21
examples/sites/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
</tiny-col>
<tiny-col :span="8">
<tiny-statistic :value="306">
<template #prefix>已使用容量(GB)</template>
<template #suffix><span style="font-size: 32px">GB</span></template>
</tiny-statistic>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>
</template>
<script setup>
import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
</script>

30
examples/sites/demos/pc/app/statistic/prefix-suffix-slot.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
</tiny-col>
<tiny-col :span="8">
<tiny-statistic :value="306">
<template #prefix>已使用容量(GB)</template>
<template #suffix><span style="font-size: 32px">GB</span></template>
</tiny-statistic>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>
</template>
<script>
import { Statistic, Layout, Row, Col } from '@opentiny/vue'
export default {
components: {
TinyStatistic: Statistic,
TinyLayout: Layout,
TinyRow: Row,
TinyCol: Col
}
}
</script>

33
examples/sites/demos/pc/app/statistic/statistic-slot-composition-api.vue
View File

@ -1,28 +1,13 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true" class="row-bg">
<tiny-col :span="3">
<tiny-statistic :value="10010258" :precision="0">
<template #title> 活跃度 </template>
</tiny-statistic>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="2" :title="msg"> </tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="2" :title="money">
<template #title:data="{ scoped }">{{ scoped }}</template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="600" :precision="0" title="队伍比分">
<template #suffix>/220</template>
<tiny-col :span="8">
<tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">
<template #title>存储平均值</template>
</tiny-statistic>
</tiny-col>
</tiny-row>
@ -30,10 +15,6 @@
</div>
</template>
<script setup lang="jsx">
<script setup>
import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
const num = 306526.23
const msg = { value: '额度' }
const money = { value: '存款' }
</script>

34
examples/sites/demos/pc/app/statistic/statistic-slot.vue
View File

@ -1,28 +1,13 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true" class="row-bg">
<tiny-col :span="3">
<tiny-statistic :value="10010258" :precision="0">
<template #title> 活跃度 </template>
</tiny-statistic>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="2" :title="msg"> </tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="2" :title="money">
<template #title:data="{ scoped }">{{ scoped }}</template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="num" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="3">
<tiny-statistic :value="600" :precision="0" title="队伍比分">
<template #suffix>/220</template>
<tiny-col :span="8">
<tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">
<template #title>存储平均值</template>
</tiny-statistic>
</tiny-col>
</tiny-row>
@ -39,13 +24,6 @@ export default {
TinyLayout: Layout,
TinyRow: Row,
TinyCol: Col
},
data() {
return {
num: 306526.23,
msg: { value: '额度' },
money: { value: '存款' }
}
}
}
</script>

36
examples/sites/demos/pc/app/statistic/statistic-style-composition-api.vue
View File

@ -1,20 +1,24 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true" class="row-bg">
<tiny-row :flex="true">
<tiny-col :span="6">
<tiny-statistic :value="num" :value-style="{ color: '#b12220' }" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
<tiny-statistic
:value="306526"
:value-style="{ 'color': '#3ac295' }"
:title="{ value: '进行中', position: 'top' }"
>
</tiny-statistic>
</tiny-col>
<tiny-col :span="6">
<tiny-statistic :value="num" :value-style="{ 'color': '#3ac295' }" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="6">
<tiny-statistic :value="num" :value-style="[{ 'color': '#e37d29' }]" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
<tiny-statistic
:value="306526.23"
:value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
:title="{ position: 'bottom' }"
>
<template #title>
<div class="title-content">失败</div>
</template>
</tiny-statistic>
</tiny-col>
</tiny-row>
@ -22,8 +26,14 @@
</div>
</template>
<script setup lang="jsx">
<script setup>
import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
const num = 306526.23
</script>
<style scoped>
.title-content {
width: 200px;
text-align: center;
color: #a9a9a9;
}
</style>

37
examples/sites/demos/pc/app/statistic/statistic-style.vue
View File

@ -1,20 +1,24 @@
<template>
<div>
<tiny-layout>
<tiny-row :flex="true" class="row-bg">
<tiny-row :flex="true">
<tiny-col :span="6">
<tiny-statistic :value="num" :value-style="{ color: '#b12220' }" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
<tiny-statistic
:value="306526"
:value-style="{ 'color': '#3ac295' }"
:title="{ value: '进行中', position: 'top' }"
>
</tiny-statistic>
</tiny-col>
<tiny-col :span="6">
<tiny-statistic :value="num" :value-style="{ 'color': '#3ac295' }" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="6">
<tiny-statistic :value="num" :value-style="[{ 'color': '#e37d29' }]" :precision="0" title="点赞数量">
<template #prefix> Like:</template>
<tiny-statistic
:value="306526.23"
:value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
:title="{ position: 'bottom' }"
>
<template #title>
<div class="title-content">失败</div>
</template>
</tiny-statistic>
</tiny-col>
</tiny-row>
@ -31,11 +35,14 @@ export default {
TinyLayout: Layout,
TinyRow: Row,
TinyCol: Col
},
data() {
return {
num: 306526.23
}
}
}
</script>
<style scoped>
.title-content {
width: 200px;
text-align: center;
color: #a9a9a9;
}
</style>

2
examples/sites/demos/pc/app/statistic/webdoc/statistic.cn.md
View File

@ -4,4 +4,4 @@ title: Statistic 统计组件
# Statistic 统计组件
显示统计。
显示统计数据。

32
examples/sites/demos/pc/app/statistic/webdoc/statistic.js
View File

@ -9,31 +9,39 @@ export default {
'en-US': 'Basic Usage'
},
desc: {
'zh-CN':
'通过<code>value</code>设置数字内容，<code>precision</code>设置数字精度值，<code>title</code>设置数字内容标题，<code>prefix</code>设置数字内容前置插槽，<code>suffix</code>设置数字内容后置插槽。',
'en-US':
'Set digital content through<code>value</code>,<code>precision</code>set digital precision value,<code>title</code>set digital content title,<code>prefix</code>set digital content front slot, and<code>suffix</code>set digital content rear slot.'
'zh-CN': '通过<code>value</code>设置数字内容，<code>precision</code>设置数字精度值。',
'en-US': 'Set digital content through<code>value</code>,<code>precision</code>set digital precision value.'
},
codeFiles: ['basic-usage.vue']
},
{
demoId: 'statistic-slot',
demoId: 'prefix-suffix-slot',
name: {
'zh-CN': '插槽用法',
'en-US': 'Slot Usage'
'zh-CN': '前后缀',
'en-US': 'Usage of Prefix and Suffix'
},
desc: {
'zh-CN':
'通过<code>title</code>设置标题插槽，<code>prefix</code>设置数字前缀插槽，<code>suffix</code>设置数字后缀插槽。',
'en-US':
'Set the title slot through<code>title</code>, set the number prefix slot through<code>prefix</code>, and set the number suffix slot through<code>suffix</code>.'
'zh-CN': '<code>prefix</code>设置前缀，<code>suffix</code>设置后缀。',
'en-US': 'Set the prefix through<code>prefix</code>, and set the number suffix through<code>suffix</code>.'
},
codeFiles: ['prefix-suffix-slot.vue']
},
{
demoId: 'statistic-slot',
name: {
'zh-CN': '标题',
'en-US': 'Title Usage'
},
desc: {
'zh-CN': '通过<code>title</code>设置标题。',
'en-US': 'Set the title through<code>title</code>.'
},
codeFiles: ['statistic-slot.vue']
},
{
demoId: 'statistic-style',
name: {
'zh-CN': '样式用法',
'zh-CN': '样式',
'en-US': 'Style Usage'
},
desc: {

18
packages/theme/src/statistic/index.less
View File

@ -7,23 +7,20 @@
.component-css-vars-statistic();
width: 100%;
text-align: center;
&__title {
font-size: var(--ti-statistic-font-size);
color: var(--ti-statistic-font-color);
font-weight: var(--ti-statistic-title-font-weight);
line-height: var(--ti-statistic-title-line-height);
// margin-top: var(--ti-statistic-title-margin-top);
margin-bottom: var(--ti-statistic-title-margin-bottom);
}
&__footer-title {
margin-top: var(--ti-statistic-title-margin-bottom);
margin-left: var(--ti-statistic-description-margin-left);
}
&__slots {
font-weight: var(--ti-statistic-font-weight);
font-size: var(--ti-statistic-font-size);
font-size: var(--ti-statistic-title-font-size);
color: var(--ti-statistic-font-color);
}
@ -31,12 +28,14 @@
margin-right: var(--ti-statistic-prefix-margin-right);
font-weight: var(--ti-statistic-prefix-font-weight);
display: inline-block;
font-size: var(--ti-statistic-prefix-font-size);
font-size: var(--ti-statistic-font-size);
vertical-align: middle;
}
&__description {
font-size: var(--ti-statistic-description-font-size);
display: inline-block;
margin-left: var(--ti-statistic-description-margin-left);
}
&__suffix {
@ -45,4 +44,9 @@
font-weight: var(--ti-statistic-suffix-font-weight);
display: inline-block;
}
&__description-margin {
margin-bottom: var(--ti-statistic-description-margin-bottom);
margin-top: var(--ti-statistic-description-margin-top);
}
}

7
packages/theme/src/statistic/smb-theme.js
View File

@ -1,6 +1,5 @@
export const tinyStatisticSmbTheme = {
'ti-statistic-font-size': '24px',
'ti-statistic-prefix-font-size': '24px',
'ti-statistic-font-color': '#191919',
'ti-statistic-suffix-font-size': 'var(--ti-common-font-size-4)'
'ti-statistic-description-font-size': 'var(--ti-common-font-size-5)',
'ti-statistic-font-color': 'var(--ti-common-color-primary-normal)',
'ti-statistic-suffix-font-size': 'var(--ti-common-font-size-0)'
}

26
packages/theme/src/statistic/vars.less
View File

@ -1,28 +1,36 @@
.component-css-vars-statistic() {
// 标题字体大小
--ti-statistic-font-size: var(--ti-common-font-size-base);
// 后缀字体大小
--ti-statistic-suffix-font-size: var(--ti-common-font-size-base);
// 标题内容字体大小
--ti-statistic-title-font-size: var(--ti-common-font-size-6);
// 标题内容左间距
--ti-statistic-description-margin-left: var(--ti-common-space-4x);
// 标题字体颜色
--ti-statistic-font-color: var(--ti-common-color-text-weaken);
--ti-statistic-font-color: var(--ti-common-color-info-text);
// 标题字体粗细
--ti-statistic-title-font-weight: var(--ti-common-font-weight-5);
--ti-statistic-title-font-weight: var(--ti-common-font-weight-4);
// 标题上间距
--ti-statistic-title-margin-top: var(--ti-common-space-5x);
// 描述上间距
--ti-statistic-description-margin-top: -8px;
// 描述下间距
--ti-statistic-description-margin-bottom: var(--ti-common-space-6x);
// 标题下间距
--ti-statistic-title-margin-bottom: var(--ti-common-space-base);
--ti-statistic-title-margin-bottom: var(--ti-common-space-5x);
// 标题行高
--ti-statistic-title-line-height: var(ti-common-line-height-4);
// 前缀插槽字体粗细
--ti-statistic-font-weight: var(--ti-common-font-weight-5);
// 前缀缀插槽间距值
// 前缀插槽间距值
--ti-statistic-prefix-margin-right: var(--ti-common-space-6);
// 前缀字体大小
--ti-statistic-prefix-font-size: var(--ti-common-font-size-4);
// 前缀字体粗细
--ti-statistic-prefix-font-weight: var(--ti-common-font-weight-5);
// 后缀插槽间距值
--ti-statistic-suffix-margin-left: var(--ti-common-space-6);
// 后缀字体大小
--ti-statistic-suffix-font-size: var(--ti-common-font-size-4);
// 后缀字体粗细
--ti-statistic-suffix-font-weight: var(--ti-common-font-weight-5);
// 数字内容字体
--ti-statistic-description-font-size: var(--ti-common-font-size-4);
--ti-statistic-description-font-size: var(--ti-common-font-size-6);
}

7
packages/vue/src/statistic/src/index.ts
View File

@ -1,4 +1,3 @@
import type { PropType } from '@opentiny/vue-common'
import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
import template from 'virtual-template?pc'
@ -6,8 +5,6 @@ export const $constants = {
PREFIX: 'tiny-statistic'
}
export const definePropType = <T>(val: any): PropType<T> => val
export const statisticProps = {
...$props,
_constants: {
@ -20,14 +17,14 @@ export const statisticProps = {
},
formatter: Function,
value: {
type: definePropType<number | object>([Number, Object]),
type: Number,
default: 0
},
prefix: String,
suffix: String,
title: [String, Object],
valueStyle: {
type: [String, Object, Array]
type: [Object, Array]
},
groupSeparator: {
type: String,

31
packages/vue/src/statistic/src/pc.vue
View File

@ -1,33 +1,40 @@
<template>
<div class="tiny-statistic">
<div class="tiny-statistic__title">
<div v-if="title && typeof title === 'string'">
{{ title }}
<div
class="tiny-statistic__title"
v-if="!(title instanceof Object) || (title instanceof Object && title.position !== 'bottom')"
>
<div v-if="$slots.title">
<slot name="title"> </slot>
</div>
<div v-else-if="$slots.title">
<slot name="title" :data="title">
{{ title }}
</slot>
<div v-else-if="typeof title === 'string'">{{ title }}</div>
<div v-else-if="title instanceof Object">
{{ title.value }}
</div>
</div>
<div class="tiny-statistic__slots">
<div
:class="[
'tiny-statistic__slots',
title && title.position === 'bottom' ? 'tiny-statistic__description-margin' : ''
]"
>
<div v-if="$slots.prefix || prefix" class="tiny-statistic__prefix">
<slot name="prefix">
<span>{{ prefix }}</span>
</slot>
</div>
<span class="tiny-statistic__description" :style="valueStyle">
<div :class="['tiny-statistic__description']" :style="valueStyle">
{{ state.value }}
</span>
</div>
<div v-if="$slots.suffix || suffix" class="tiny-statistic__suffix">
<slot name="suffix">
<span>{{ suffix }}</span>
</slot>
</div>
</div>
<div v-if="title && title instanceof Object" :class="['tiny-statistic__footer-title', 'tiny-statistic__title']">
<div v-if="title && title instanceof Object && title.position === 'bottom'" :class="['tiny-statistic__title']">
<div v-if="$slots.title">
<slot name="title" :data="title"> </slot>
<slot name="title"> </slot>
</div>
<div v-else>
<span>{{ title.value }}</span>