From eb206b0cc31ac7da3dfd8b3d4b874061c5c91d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Thu, 27 Jan 2022 10:10:25 +0800
Subject: [PATCH] feat: Add highlight demo

---
 src/locales/en.ts                  |  9 ++++++++-
 src/locales/zh-CN.ts               |  9 ++++++++-
 src/router/index.ts                |  8 ++++++++
 src/views/Components/Highlight.vue | 20 ++++++++++++++++++++
 src/views/Components/Qrcode.vue    | 18 +++++++++---------
 5 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 src/views/Components/Highlight.vue

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 71ea71d..4686757 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -91,7 +91,8 @@ export default {
     echart: 'Echart',
     countTo: 'Count to',
     watermark: 'Watermark',
-    qrcode: 'Qrcode'
+    qrcode: 'Qrcode',
+    highlight: 'Highlight'
   },
   analysis: {
     newUser: 'New user',
@@ -245,5 +246,11 @@ export default {
     logoConfig: 'Logo config',
     logoStyle: 'Logo style',
     size: 'size config'
+  },
+  highlightDemo: {
+    highlight: 'Highlight',
+    message: 'The best time to plant a tree is ten years ago, followed by now.',
+    keys1: 'ten years ago',
+    keys2: 'now'
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index ecfe1cc..3b4c815 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -91,7 +91,8 @@ export default {
     echart: '图表',
     countTo: '数字动画',
     watermark: '水印',
-    qrcode: '二维码'
+    qrcode: '二维码',
+    highlight: '高亮'
   },
   analysis: {
     newUser: '新增用户',
@@ -244,5 +245,11 @@ export default {
     logoConfig: 'logo配置',
     logoStyle: 'logo样式',
     size: '大小配置'
+  },
+  highlightDemo: {
+    highlight: '高亮',
+    message: '种一棵树最好的时间是十年前，其次就是现在。',
+    keys1: '十年前',
+    keys2: '现在'
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 5ae64bf..7b607ed 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -135,6 +135,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.qrcode')
         }
+      },
+      {
+        path: 'highlight',
+        component: () => import('@/views/Components/Highlight.vue'),
+        name: 'Highlight',
+        meta: {
+          title: t('router.highlight')
+        }
       }
     ]
   },
diff --git a/src/views/Components/Highlight.vue b/src/views/Components/Highlight.vue
new file mode 100644
index 0000000..96baedc
--- /dev/null
+++ b/src/views/Components/Highlight.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Highlight } from '@/components/Highlight'
+import { ElMessage } from 'element-plus'
+
+const { t } = useI18n()
+
+const keyClick = (key: string) => {
+  ElMessage.info(key)
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('highlightDemo.highlight')">
+    <Highlight :keys="[t('highlightDemo.keys1'), t('highlightDemo.keys2')]" @click="keyClick">
+      {{ t('highlightDemo.message') }}
+    </Highlight>
+  </ContentWrap>
+</template>
diff --git a/src/views/Components/Qrcode.vue b/src/views/Components/Qrcode.vue
index 242c872..5cd7efd 100644
--- a/src/views/Components/Qrcode.vue
+++ b/src/views/Components/Qrcode.vue
@@ -34,19 +34,19 @@ const disabledClick = () => {
     <ElRow :gutter="20" justify="space-between">
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.basicUsage') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.basicUsage') }}</div>
           <Qrcode :text="title" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.imgTag') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.imgTag') }}</div>
           <Qrcode :text="title" tag="img" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.style') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.style') }}</div>
           <Qrcode
             :text="title"
             :options="{
@@ -60,31 +60,31 @@ const disabledClick = () => {
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.click') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.click') }}</div>
           <Qrcode :text="title" @click="codeClick" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.asynchronousContent') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.asynchronousContent') }}</div>
           <Qrcode :text="asyncTitle" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.invalid') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.invalid') }}</div>
           <Qrcode :text="title" disabled @disabled-click="disabledClick" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.logoConfig') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.logoConfig') }}</div>
           <Qrcode :text="title" :logo="logoImg" />
         </ElCard>
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.logoStyle') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.logoStyle') }}</div>
           <Qrcode
             :text="title"
             :logo="{
@@ -99,7 +99,7 @@ const disabledClick = () => {
       </ElCol>
       <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
         <ElCard shadow="hover" class="mb-10px text-center">
-          <div class="font-bold mb-10px">{{ t('qrcodeDemo.size') }}</div>
+          <div class="font-bold">{{ t('qrcodeDemo.size') }}</div>
           <Qrcode :text="title" :width="250" />
         </ElCard>
       </ElCol>