feat(demo): add Time demo page(时间组件-demo #140) (#311)

Co-authored-by: jackhoo_98 <[email protected]>
vbenjs · Dec 23, 2023 · 8601dfb · 8601dfb
1 parent 4cbbbe0
commit 8601dfb
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 0 deletions.
diff --git a/apps/admin/src/pages/demo/Time.vue b/apps/admin/src/pages/demo/Time.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Time } from '@vben/demo'
+</script>
+<template>
+  <Time />
+</template>
diff --git a/packages/demo/index.ts b/packages/demo/index.ts
@@ -12,3 +12,4 @@ export { default as Google } from './src/Charts/Google.vue'
 export { default as QrCode } from './src/QrCode/index.vue'
 export { default as Editor } from './src/Editor/Editor.vue'
 export { default as CountTo } from './src/CountTo/index.vue'
+export { default as Time } from './src/Time/index.vue'
diff --git a/packages/demo/src/Time/index.vue b/packages/demo/src/Time/index.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { Time } from '@vben/components'
+
+const now = new Date().getTime()
+const state = reactive({
+  time1: now - 60 * 3 * 1000,
+  time2: now - 86400 * 3 * 1000,
+})
+</script>
+
+<template>
+  <VbenCard title="时间组件示例" :bordered="false">
+    <VbenGrid :x-gap="12" :y-gap="8" :cols="1">
+      <VbenGridItem>
+        <VbenCard hoverable title="基础示例">
+          <Time :value="state.time1" />
+          <br />
+          <Time :value="state.time2" />
+        </VbenCard>
+      </VbenGridItem>
+      <VbenGridItem>
+        <VbenCard hoverable title="定时更新">
+          <Time :value="now" :step="1" />
+          <br />
+          <Time :value="now" :step="5" />
+        </VbenCard>
+      </VbenGridItem>
+      <VbenGridItem>
+        <VbenCard hoverable title="定时更新">
+          <Time :value="now" mode="date" />
+          <br />
+          <Time :value="now" mode="datetime" />
+          <br />
+          <Time :value="now" />
+        </VbenCard>
+      </VbenGridItem>
+    </VbenGrid>
+  </VbenCard>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/packages/locale/src/lang/en/component.ts b/packages/locale/src/lang/en/component.ts
@@ -8,4 +8,13 @@ export default {
     normalText: 'Get SMS code',
     sendText: 'Reacquire in {0}s',
   },
+  time: {
+    before: ' ago',
+    after: ' after',
+    just: ' just now',
+    seconds: ' seconds',
+    minutes: ' minutes',
+    hours: ' hours',
+    days: ' days',
+  },
 }
diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts
@@ -17,6 +17,7 @@ export default {
     form: 'Form',
     qrcode: 'QR code',
     countTo: 'Count To',
+    time: 'Relative Time"',
     table: {
       table: 'table',
       basic: 'basic',

diff --git a/packages/locale/src/lang/zh-CN/component.ts b/packages/locale/src/lang/zh-CN/component.ts
@@ -8,4 +8,13 @@ export default {
     normalText: '获取验证码',
     sendText: '{0}秒后重新获取',
   },
+  time: {
+    before: '前',
+    after: '后',
+    just: '刚刚',
+    seconds: '秒',
+    minutes: '分钟',
+    hours: '小时',
+    days: '天',
+  },
 }
diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts
@@ -17,6 +17,7 @@ export default {
     form: '表单',
     qrcode: '二维码组件',
     countTo: '数字动画',
+    time: '相对时间',
     table: {
       table: '表格',
       basic: '基础表格',

diff --git a/packages/router/src/routes/modules/demo/demo.ts b/packages/router/src/routes/modules/demo/demo.ts
@@ -135,6 +135,14 @@ const dashboard: RouteRecordItem = {
         title: 'routes.demo.countTo',
       },
     },
+    {
+      path: 'time',
+      name: 'Time',
+      component: () => import('@/pages/demo/Time.vue'),
+      meta: {
+        title: 'routes.demo.time',
+      },
+    },
   ],
 }