feat: Add Infotip component

feat: Add Icon demo

src/components/ContentWrap/src/ContentWrap.vue

@@ -14,10 +14,10 @@ defineProps({
 </script>
 
 <template>
-  <ElCard :class="prefixCls" shadow="never">
+  <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
     <template v-if="title" #header>
       <div class="flex items-center">
-        {{ title }}
+        <span class="text-16px font-700">{{ title }}</span>
         <ElTooltip v-if="message" effect="dark" placement="right">
           <template #content>
             <div class="max-w-200px">{{ message }}</div>
@@ -31,5 +31,3 @@ defineProps({
     </div>
   </ElCard>
 </template>
-
-<style lang="less" scoped></style>

src/components/Infotip/index.ts

@@ -0,0 +1,3 @@
+import Infotip from './src/Infotip.vue'
+
+export { Infotip }

src/components/Infotip/src/Infotip.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Highlight } from '@//components/Highlight'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('infotip')
+
+defineProps({
+  title: propTypes.string.def(''),
+  schema: {
+    type: Array as PropType<Array<string | TipSchema>>,
+    required: true,
+    default: () => []
+  },
+  showIndex: propTypes.bool.def(true),
+  highlightColor: propTypes.string.def('var(--el-color-primary)')
+})
+
+const emit = defineEmits(['click'])
+
+const keyClick = (key: string) => {
+  emit('click', key)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      prefixCls,
+      'p-20px mb-20px border-1px border-solid border-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)]'
+    ]"
+  >
+    <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>
+    </div>
+    <div :class="`${prefixCls}__content`">
+      <p v-for="(item, $index) in schema" :key="$index" class="pl-8px text-14px mt-15px">
+        <Highlight
+          :keys="typeof item === 'string' ? [] : item.keys"
+          :color="highlightColor"
+          @click="keyClick"
+        >
+          {{ showIndex ? `${$index + 1}、` : '' }}{{ typeof item === 'string' ? item : item.label }}
+        </Highlight>
+      </p>
+    </div>
+  </div>
+</template>

src/hooks/web/useIntro.ts

@@ -16,6 +16,12 @@ export const useIntro = (setps?: Step[], options?: Options) => {
       intro: t('common.menuDes'),
       position: 'right'
     },
+    {
+      element: `#${variables.namespace}-tool-header`,
+      title: t('common.tool'),
+      intro: t('common.toolDes'),
+      position: 'left'
+    },
     {
       element: `#${variables.namespace}-tags-view`,
       title: t('common.tagsView'),

src/layout/components/ToolHeader.vue

@@ -9,7 +9,7 @@ import { Breadcrumb } from '@/components/Breadcrumb'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
-const { getPrefixCls } = useDesign()
+const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('tool-header')
 
@@ -38,6 +38,7 @@ export default defineComponent({
   setup() {
     return () => (
       <div
+        id={`${variables.namespace}-tool-header`}
         class={[
           prefixCls,
           'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'

src/locales/en.ts

@@ -27,7 +27,9 @@ export default {
     collapse: 'Collapse',
     collapseDes: 'Expand and zoom the menu bar',
     tagsView: 'Tags view',
-    tagsViewDes: 'Used to record routing history'
+    tagsViewDes: 'Used to record routing history',
+    tool: 'Tool',
+    toolDes: 'Used to set up custom systems'
   },
   setting: {
     projectSetting: 'Project setting',
@@ -83,7 +85,9 @@ export default {
     dashboard: 'Dashboard',
     analysis: 'Analysis',
     workplace: 'Workplace',
-    guide: 'Guide'
+    guide: 'Guide',
+    component: 'Component',
+    icon: 'Icon'
   },
   analysis: {
     newUser: 'New user',
@@ -190,5 +194,14 @@ export default {
     start: 'Start',
     message:
       'The guide page is very useful for some people who enter the project for the first time. You can briefly introduce the functions of the project. The boot page is based on intro js'
+  },
+  iconDemo: {
+    icon: 'Icon',
+    localIcon: 'Local Icon',
+    iconify: 'Iconify component',
+    recommendedUse: 'Recommended use',
+    recommendeDes:
+      'Iconify component basically contains all icons. You can query any icon you want. And packaging will only package the icons used.',
+    accessAddress: 'Access address'
   }
 }

src/locales/zh-CN.ts

@@ -27,7 +27,9 @@ export default {
     collapse: '展开缩收',
     collapseDes: '展开和缩放菜单栏',
     tagsView: '标签页',
-    tagsViewDes: '用于记录路由历史记录'
+    tagsViewDes: '用于记录路由历史记录',
+    tool: '工具',
+    toolDes: '用于设置定制系统'
   },
   setting: {
     projectSetting: '项目配置',
@@ -83,7 +85,9 @@ export default {
     dashboard: '首页',
     analysis: '分析页',
     workplace: '工作台',
-    guide: '引导'
+    guide: '引导',
+    component: '组件',
+    icon: '图标'
   },
   analysis: {
     newUser: '新增用户',
@@ -190,5 +194,14 @@ export default {
     start: '开始',
     message:
       '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。引导页基于 intro.js'
+  },
+  iconDemo: {
+    icon: '图标',
+    localIcon: '本地图标',
+    iconify: 'Iconify组件',
+    recommendedUse: '推荐使用',
+    recommendeDes:
+      'Iconify组件基本包含所有的图标，你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。',
+    accessAddress: '访问地址'
   }
 }

src/router/index.ts

@@ -85,6 +85,27 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/components',
+    component: Layout,
+    redirect: '/components/icon',
+    name: 'ComponentsDemo',
+    meta: {
+      title: t('router.component'),
+      icon: 'bx:bxs-component',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'icon',
+        component: () => import('@/views/Components/Icon.vue'),
+        name: 'Icon',
+        meta: {
+          title: t('router.icon')
+        }
+      }
+    ]
+  },
   {
     path: '/level',
     component: Layout,
@@ -143,23 +164,6 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         }
       }
     ]
-  },
-  {
-    path: '/icon',
-    component: Layout,
-    name: 'IconsDemo',
-    meta: {},
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/Level/Menu2.vue'),
-        name: 'Icons',
-        meta: {
-          title: '图标',
-          icon: 'carbon:skill-level-advanced'
-        }
-      }
-    ]
   }
 ]
 

src/views/Components/Icon.vue

@@ -0,0 +1,47 @@
+<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>
+  <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 :title="t('iconDemo.localIcon')">
+    <div class="flex justify-between">
+      <Icon icon="svg-icon:peoples" />
+      <Icon icon="svg-icon:money" />
+      <Icon icon="svg-icon:message" />
+      <Icon icon="svg-icon:shopping" />
+    </div>
+  </ContentWrap>
+  <ContentWrap :title="t('iconDemo.iconify')">
+    <div class="flex justify-between">
+      <Icon icon="ep:aim" />
+      <Icon icon="ep:alarm-clock" />
+      <Icon icon="ep:baseball" />
+      <Icon icon="ep:chat-line-round" />
+    </div>
+  </ContentWrap>
+</template>

types/componentType/infotip.d.ts

@@ -0,0 +1,4 @@
+declare interface TipSchema {
+  label: string
+  keys?: string[]
+}