From e4b7a769126d6f0fca424007c294ff229eefcb35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Wed, 26 Jan 2022 11:27:06 +0800
Subject: [PATCH] feat: Add Infotip component

feat: Add Icon demo
---
 .../ContentWrap/src/ContentWrap.vue           |  6 +--
 src/components/Infotip/index.ts               |  3 ++
 src/components/Infotip/src/Infotip.vue        | 52 +++++++++++++++++++
 src/hooks/web/useIntro.ts                     |  6 +++
 src/layout/components/ToolHeader.vue          |  3 +-
 src/locales/en.ts                             | 17 +++++-
 src/locales/zh-CN.ts                          | 17 +++++-
 src/router/index.ts                           | 38 ++++++++------
 src/views/Components/Icon.vue                 | 47 +++++++++++++++++
 types/componentType/infotip.d.ts              |  4 ++
 10 files changed, 167 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Infotip/index.ts
 create mode 100644 src/components/Infotip/src/Infotip.vue
 create mode 100644 src/views/Components/Icon.vue
 create mode 100644 types/componentType/infotip.d.ts

diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
index 2c75f0d..705b6bb 100644
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/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>
diff --git a/src/components/Infotip/index.ts b/src/components/Infotip/index.ts
new file mode 100644
index 0000000..413fa5f
--- /dev/null
+++ b/src/components/Infotip/index.ts
@@ -0,0 +1,3 @@
+import Infotip from './src/Infotip.vue'
+
+export { Infotip }
diff --git a/src/components/Infotip/src/Infotip.vue b/src/components/Infotip/src/Infotip.vue
new file mode 100644
index 0000000..54d3b5d
--- /dev/null
+++ b/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>
diff --git a/src/hooks/web/useIntro.ts b/src/hooks/web/useIntro.ts
index 1c21d8b..85604df 100644
--- a/src/hooks/web/useIntro.ts
+++ b/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'),
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index 3d4eadb..7072dd4 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/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'
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 0c9ae6f..4a9a6c9 100644
--- a/src/locales/en.ts
+++ b/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'
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 913fd46..e644fad 100644
--- a/src/locales/zh-CN.ts
+++ b/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: '访问地址'
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 7d8a0d3..303afa1 100644
--- a/src/router/index.ts
+++ b/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'
-        }
-      }
-    ]
   }
 ]
 
diff --git a/src/views/Components/Icon.vue b/src/views/Components/Icon.vue
new file mode 100644
index 0000000..44385bf
--- /dev/null
+++ b/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>
diff --git a/types/componentType/infotip.d.ts b/types/componentType/infotip.d.ts
new file mode 100644
index 0000000..9c2338a
--- /dev/null
+++ b/types/componentType/infotip.d.ts
@@ -0,0 +1,4 @@
+declare interface TipSchema {
+  label: string
+  keys?: string[]
+}