init

wangzhibo

2023-10-31 9da39812105bfc387db3b3b7c4896983e03d247d

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import byteSize from 'byte-size'
import dayjs from 'dayjs'
import { toFinite } from 'lodash'
import { useI18n } from '~/i18n'
import type { SubscriptionInfo as ISubscriptionInfo } from '~/types'
 
const getSubscriptionsInfo = (subscriptionInfo: ISubscriptionInfo) => {
  const { Download = 0, Upload = 0, Total = 0, Expire = 0 } = subscriptionInfo
 
  const total = byteSize(Total, { units: 'iec' })
  const used = byteSize(Download + Upload, {
    units: 'iec',
  })
  const percentage = toFinite((((Download + Upload) / Total) * 100).toFixed(2))
 
  const expirePrefix = () => {
    const [t] = useI18n()
 
    return t('expire')
  }
 
  const expireStr = () => {
    const [t] = useI18n()
 
    if (Expire === 0) {
      return t('noExpire')
    }
 
    return dayjs(Expire * 1000).format('YYYY-MM-DD')
  }
 
  return {
    total,
    used,
    percentage,
    expirePrefix,
    expireStr,
  }
}
 
export const SubscriptionInfo = (props: {
  subscriptionInfo?: ISubscriptionInfo
}) => {
  if (!props.subscriptionInfo) {
    return
  }
 
  const info = getSubscriptionsInfo(props.subscriptionInfo)
 
  return (
    <>
      <progress class="progress" value={info.percentage} max="100" />
 
      <div class="text-sm text-slate-500">
        {`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
      </div>
 
      <div class="text-sm text-slate-500">
        {info.expirePrefix()}: {info.expireStr()}
      </div>
    </>
  )
}