Skip to content

Commit e4b7a76

Browse files
kailong502431556kailong502431556
committed
feat: Add Infotip component
feat: Add Icon demo
1 parent 0832194 commit e4b7a76

File tree

10 files changed

+167
-26
lines changed

10 files changed

+167
-26
lines changed

‎src/components/ContentWrap/src/ContentWrap.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ defineProps({
1414
</script>
1515

1616
<template>
17-
<ElCard :class="prefixCls" shadow="never">
17+
<ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
1818
<template v-if="title" #header>
1919
<div class="flex items-center">
20-
{{ title }}
20+
<span class="text-16px font-700">{{ title }}</span>
2121
<ElTooltip v-if="message" effect="dark" placement="right">
2222
<template #content>
2323
<div class="max-w-200px">{{ message }}</div>
@@ -31,5 +31,3 @@ defineProps({
3131
</div>
3232
</ElCard>
3333
</template>
34-
35-
<style lang="less" scoped></style>

‎src/components/Infotip/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Infotip from './src/Infotip.vue'
2+
3+
export { Infotip }

‎src/components/Infotip/src/Infotip.vue

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script setup lang="ts">
2+
import { PropType } from 'vue'
3+
import { Highlight } from '@//components/Highlight'
4+
import { useDesign } from '@/hooks/web/useDesign'
5+
import { propTypes } from '@/utils/propTypes'
6+
7+
const { getPrefixCls } = useDesign()
8+
9+
const prefixCls = getPrefixCls('infotip')
10+
11+
defineProps({
12+
title: propTypes.string.def(''),
13+
schema: {
14+
type: Array as PropType<Array<string | TipSchema>>,
15+
required: true,
16+
default: () => []
17+
},
18+
showIndex: propTypes.bool.def(true),
19+
highlightColor: propTypes.string.def('var(--el-color-primary)')
20+
})
21+
22+
const emit = defineEmits(['click'])
23+
24+
const keyClick = (key: string) => {
25+
emit('click', key)
26+
}
27+
</script>
28+
29+
<template>
30+
<div
31+
:class="[
32+
prefixCls,
33+
'p-20px mb-20px border-1px border-solid border-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)]'
34+
]"
35+
>
36+
<div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']">
37+
<Icon icon="bi:exclamation-circle-fill" :size="22" color="var(--el-color-primary)" />
38+
<span :class="[`${prefixCls}__title`, 'pl-5px text-14px font-bold']">{{ title }}</span>
39+
</div>
40+
<div :class="`${prefixCls}__content`">
41+
<p v-for="(item, $index) in schema" :key="$index" class="pl-8px text-14px mt-15px">
42+
<Highlight
43+
:keys="typeof item === 'string' ? [] : item.keys"
44+
:color="highlightColor"
45+
@click="keyClick"
46+
>
47+
{{ showIndex ? `${$index + 1}、` : '' }}{{ typeof item === 'string' ? item : item.label }}
48+
</Highlight>
49+
</p>
50+
</div>
51+
</div>
52+
</template>

‎src/hooks/web/useIntro.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ export const useIntro = (setps?: Step[], options?: Options) => {
1616
intro: t('common.menuDes'),
1717
position: 'right'
1818
},
19+
{
20+
element: `#${variables.namespace}-tool-header`,
21+
title: t('common.tool'),
22+
intro: t('common.toolDes'),
23+
position: 'left'
24+
},
1925
{
2026
element: `#${variables.namespace}-tags-view`,
2127
title: t('common.tagsView'),

‎src/layout/components/ToolHeader.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Breadcrumb } from '@/components/Breadcrumb'
99
import { useAppStore } from '@/store/modules/app'
1010
import { useDesign } from '@/hooks/web/useDesign'
1111
12-
const { getPrefixCls } = useDesign()
12+
const { getPrefixCls, variables } = useDesign()
1313
1414
const prefixCls = getPrefixCls('tool-header')
1515
@@ -38,6 +38,7 @@ export default defineComponent({
3838
setup() {
3939
return () => (
4040
<div
41+
id={`${variables.namespace}-tool-header`}
4142
class={[
4243
prefixCls,
4344
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'

‎src/locales/en.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ export default {
2727
collapse: 'Collapse',
2828
collapseDes: 'Expand and zoom the menu bar',
2929
tagsView: 'Tags view',
30-
tagsViewDes: 'Used to record routing history'
30+
tagsViewDes: 'Used to record routing history',
31+
tool: 'Tool',
32+
toolDes: 'Used to set up custom systems'
3133
},
3234
setting: {
3335
projectSetting: 'Project setting',
@@ -83,7 +85,9 @@ export default {
8385
dashboard: 'Dashboard',
8486
analysis: 'Analysis',
8587
workplace: 'Workplace',
86-
guide: 'Guide'
88+
guide: 'Guide',
89+
component: 'Component',
90+
icon: 'Icon'
8791
},
8892
analysis: {
8993
newUser: 'New user',
@@ -190,5 +194,14 @@ export default {
190194
start: 'Start',
191195
message:
192196
'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'
197+
},
198+
iconDemo: {
199+
icon: 'Icon',
200+
localIcon: 'Local Icon',
201+
iconify: 'Iconify component',
202+
recommendedUse: 'Recommended use',
203+
recommendeDes:
204+
'Iconify component basically contains all icons. You can query any icon you want. And packaging will only package the icons used.',
205+
accessAddress: 'Access address'
193206
}
194207
}

‎src/locales/zh-CN.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ export default {
2727
collapse: '展开缩收',
2828
collapseDes: '展开和缩放菜单栏',
2929
tagsView: '标签页',
30-
tagsViewDes: '用于记录路由历史记录'
30+
tagsViewDes: '用于记录路由历史记录',
31+
tool: '工具',
32+
toolDes: '用于设置定制系统'
3133
},
3234
setting: {
3335
projectSetting: '项目配置',
@@ -83,7 +85,9 @@ export default {
8385
dashboard: '首页',
8486
analysis: '分析页',
8587
workplace: '工作台',
86-
guide: '引导'
88+
guide: '引导',
89+
component: '组件',
90+
icon: '图标'
8791
},
8892
analysis: {
8993
newUser: '新增用户',
@@ -190,5 +194,14 @@ export default {
190194
start: '开始',
191195
message:
192196
'引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。引导页基于 intro.js'
197+
},
198+
iconDemo: {
199+
icon: '图标',
200+
localIcon: '本地图标',
201+
iconify: 'Iconify组件',
202+
recommendedUse: '推荐使用',
203+
recommendeDes:
204+
'Iconify组件基本包含所有的图标，你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。',
205+
accessAddress: '访问地址'
193206
}
194207
}

‎src/router/index.ts

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,27 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
8585
}
8686
]
8787
},
88+
{
89+
path: '/components',
90+
component: Layout,
91+
redirect: '/components/icon',
92+
name: 'ComponentsDemo',
93+
meta: {
94+
title: t('router.component'),
95+
icon: 'bx:bxs-component',
96+
alwaysShow: true
97+
},
98+
children: [
99+
{
100+
path: 'icon',
101+
component: () => import('@/views/Components/Icon.vue'),
102+
name: 'Icon',
103+
meta: {
104+
title: t('router.icon')
105+
}
106+
}
107+
]
108+
},
88109
{
89110
path: '/level',
90111
component: Layout,
@@ -143,23 +164,6 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
143164
}
144165
}
145166
]
146-
},
147-
{
148-
path: '/icon',
149-
component: Layout,
150-
name: 'IconsDemo',
151-
meta: {},
152-
children: [
153-
{
154-
path: 'index',
155-
component: () => import('@/views/Level/Menu2.vue'),
156-
name: 'Icons',
157-
meta: {
158-
title: '图标',
159-
icon: 'carbon:skill-level-advanced'
160-
}
161-
}
162-
]
163167
}
164168
]
165169

‎src/views/Components/Icon.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script setup lang="ts">
2+
import { ContentWrap } from '@/components/ContentWrap'
3+
import { useI18n } from '@/hooks/web/useI18n'
4+
import { Infotip } from '@/components/Infotip'
5+
6+
const { t } = useI18n()
7+
8+
const keyClick = (key: string) => {
9+
if (key === t('iconDemo.accessAddress')) {
10+
window.open('https://iconify.design/')
11+
}
12+
}
13+
</script>
14+
15+
<template>
16+
<Infotip
17+
:show-index="false"
18+
:title="`${t('iconDemo.recommendedUse')}${t('iconDemo.iconify')}`"
19+
:schema="[
20+
{
21+
label: t('iconDemo.recommendeDes'),
22+
keys: ['Iconify']
23+
},
24+
{
25+
label: t('iconDemo.accessAddress'),
26+
keys: [t('iconDemo.accessAddress')]
27+
}
28+
]"
29+
@click="keyClick"
30+
/>
31+
<ContentWrap :title="t('iconDemo.localIcon')">
32+
<div class="flex justify-between">
33+
<Icon icon="svg-icon:peoples" />
34+
<Icon icon="svg-icon:money" />
35+
<Icon icon="svg-icon:message" />
36+
<Icon icon="svg-icon:shopping" />
37+
</div>
38+
</ContentWrap>
39+
<ContentWrap :title="t('iconDemo.iconify')">
40+
<div class="flex justify-between">
41+
<Icon icon="ep:aim" />
42+
<Icon icon="ep:alarm-clock" />
43+
<Icon icon="ep:baseball" />
44+
<Icon icon="ep:chat-line-round" />
45+
</div>
46+
</ContentWrap>
47+
</template>

‎types/componentType/infotip.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare interface TipSchema {
2+
label: string
3+
keys?: string[]
4+
}

0 commit comments

Comments
 (0)