feat: Add infotip demo

style: level demo style beautification

src/components/Infotip/src/Infotip.vue

@@ -35,10 +35,10 @@ const keyClick = (key: string) => {
   >
     <div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']">
       <Icon icon="bi:exclamation-circle-fill" :size="22" color="var(--el-color-primary)" />
-      <span :class="[`${prefixCls}__title`, 'pl-5px text-14px font-bold']">{{ title }}</span>
+      <span :class="[`${prefixCls}__title`, 'pl-5px text-16px font-bold']">{{ title }}</span>
     </div>
     <div :class="`${prefixCls}__content`">
-      <p v-for="(item, $index) in schema" :key="$index" class="pl-8px text-14px mt-15px">
+      <p v-for="(item, $index) in schema" :key="$index" class="text-14px mt-15px">
         <Highlight
           :keys="typeof item === 'string' ? [] : item.keys"
           :color="highlightColor"

src/locales/en.ts

@@ -92,7 +92,8 @@ export default {
     countTo: 'Count to',
     watermark: 'Watermark',
     qrcode: 'Qrcode',
-    highlight: 'Highlight'
+    highlight: 'Highlight',
+    infotip: 'Infotip'
   },
   analysis: {
     newUser: 'New user',
@@ -252,5 +253,13 @@ export default {
     message: 'The best time to plant a tree is ten years ago, followed by now.',
     keys1: 'ten years ago',
     keys2: 'now'
+  },
+  infotipDemo: {
+    infotip: 'Infotip',
+    infotipDes: 'Secondary packaging of components based on Highlight',
+    title: 'matters needing attention'
+  },
+  levelDemo: {
+    menu: 'Multi level menu cache'
   }
 }

src/locales/zh-CN.ts

@@ -92,7 +92,8 @@ export default {
     countTo: '数字动画',
     watermark: '水印',
     qrcode: '二维码',
-    highlight: '高亮'
+    highlight: '高亮',
+    infotip: '信息提示'
   },
   analysis: {
     newUser: '新增用户',
@@ -251,5 +252,13 @@ export default {
     message: '种一棵树最好的时间是十年前，其次就是现在。',
     keys1: '十年前',
     keys2: '现在'
+  },
+  infotipDemo: {
+    infotip: '信息提示',
+    infotipDes: '基于 Highlight 组件二次封装',
+    title: '注意事项'
+  },
+  levelDemo: {
+    menu: '多级菜单缓存'
   }
 }

src/router/index.ts

@@ -143,6 +143,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.highlight')
         }
+      },
+      {
+        path: 'infotip',
+        component: () => import('@/views/Components/Infotip.vue'),
+        name: 'Infotip',
+        meta: {
+          title: t('router.infotip')
+        }
       }
     ]
   },

src/views/Components/Infotip.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Infotip } from '@/components/Infotip'
+
+const { t } = useI18n()
+
+const keyClick = (key: string) => {
+  if (key === t('iconDemo.accessAddress')) {
+    window.open('https://iconify.design/')
+  }
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('infotipDemo.infotip')" :message="t('infotipDemo.infotipDes')">
+    <Infotip
+      :show-index="false"
+      :title="`${t('iconDemo.recommendedUse')}${t('iconDemo.iconify')}`"
+      :schema="[
+        {
+          label: t('iconDemo.recommendeDes'),
+          keys: ['Iconify']
+        },
+        {
+          label: t('iconDemo.accessAddress'),
+          keys: [t('iconDemo.accessAddress')]
+        }
+      ]"
+      @click="keyClick"
+    />
+  </ContentWrap>
+</template>

src/views/Level/Menu111.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts" name="Menu111">
-import { onMounted } from 'vue'
-onMounted(() => {
-  console.log('????')
-})
+import { ElInput } from 'element-plus'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+
+const text = ref('')
 </script>
 
 <template>
-  <div class="h-[100000px]">Menu111 <input type="text" /></div>
+  <ContentWrap :title="t('levelDemo.menu')">
+    <div class="flex items-center"> Menu111: <ElInput v-model="text" class="pl-20px" /> </div>
+  </ContentWrap>
 </template>

src/views/Level/Menu12.vue

@@ -1,5 +1,16 @@
-<script setup lang="ts"></script>
+<script setup lang="ts" name="Menu12">
+import { ElInput } from 'element-plus'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+
+const text = ref('')
+</script>
 
 <template>
-  <div>Menu12 <input type="text" /></div>
+  <ContentWrap :title="t('levelDemo.menu')">
+    <div class="flex items-center"> Menu12: <ElInput v-model="text" class="pl-20px" /> </div>
+  </ContentWrap>
 </template>

src/views/Level/Menu2.vue

@@ -1,5 +1,16 @@
-<script setup lang="ts"></script>
+<script setup lang="ts" name="Menu2">
+import { ElInput } from 'element-plus'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+
+const text = ref('')
+</script>
 
 <template>
-  <div>Menu2 <input type="text" /></div>
+  <ContentWrap :title="t('levelDemo.menu')">
+    <div class="flex items-center"> Menu2: <ElInput v-model="text" class="pl-20px" /> </div>
+  </ContentWrap>
 </template>