Skip to content

Commit 7f5ef99

Browse files
kailong321200875kailong321200875
committed
feat: Detail组件重构完成
1 parent 34221f3 commit 7f5ef99

File tree

12 files changed

+833
-148
lines changed

12 files changed

+833
-148
lines changed

‎components.d.ts

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,25 @@
44

55
declare module 'vue' {
66
export interface GlobalComponents {
7-
404: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Error/404.vue')['default']
7+
404: typeof import('./src/components/Error/404.vue')['default']
88
Aa: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/aa.vue')['default']
9-
CountTo: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/CountTo/index.vue')['default']
10-
Dialog: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Dialog/index.vue')['default']
11-
Echart: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Echart/index.vue')['default']
12-
Editor: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Editor/index.vue')['default']
9+
Avatars: typeof import('./src/components/Avatars/index.vue')['default']
10+
CountTo: typeof import('./src/components/CountTo/index.vue')['default']
11+
Detail: typeof import('./src/components/Detail/index.vue')['default']
12+
Dialog: typeof import('./src/components/Dialog/index.vue')['default']
13+
Echart: typeof import('./src/components/Echart/index.vue')['default']
14+
Editor: typeof import('./src/components/Editor/index.vue')['default']
1315
ElAlert: typeof import('element-plus/es')['ElAlert']
16+
ElAvatar: typeof import('element-plus/es')['ElAvatar']
1417
ElBacktop: typeof import('element-plus/es')['ElBacktop']
1518
ElButton: typeof import('element-plus/es')['ElButton']
19+
ElCard: typeof import('element-plus/es')['ElCard']
1620
ElCol: typeof import('element-plus/es')['ElCol']
21+
ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
1722
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
1823
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
24+
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
25+
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
1926
ElDialog: typeof import('element-plus/es')['ElDialog']
2027
ElDrawer: typeof import('element-plus/es')['ElDrawer']
2128
ElDropdown: typeof import('element-plus/es')['ElDropdown']
@@ -38,16 +45,18 @@ declare module 'vue' {
3845
ElSwitch: typeof import('element-plus/es')['ElSwitch']
3946
ElTabPane: typeof import('element-plus/es')['ElTabPane']
4047
ElTabs: typeof import('element-plus/es')['ElTabs']
48+
ElTag: typeof import('element-plus/es')['ElTag']
4149
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
4250
ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
4351
ElTooltip: typeof import('element-plus/es')['ElTooltip']
4452
Highlight: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Highlight/index.vue')['default']
45-
ParentView: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/ParentView/index.vue')['default']
46-
Preview: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Preview/index.vue')['default']
47-
Qrcode: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Qrcode/index.vue')['default']
48-
Redirect: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Redirect/index.vue')['default']
49-
Search: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/Search/index.vue')['default']
50-
SvgIcon: typeof import('E:/HBuilderProjects/element-plus-admin/src/components/SvgIcon/index.vue')['default']
53+
Loading: typeof import('element-plus/es')['ElLoadingDirective']
54+
ParentView: typeof import('./src/components/ParentView/index.vue')['default']
55+
Preview: typeof import('./src/components/Preview/index.vue')['default']
56+
Qrcode: typeof import('./src/components/Qrcode/index.vue')['default']
57+
Redirect: typeof import('./src/components/Redirect/index.vue')['default']
58+
Search: typeof import('./src/components/Search/index.vue')['default']
59+
SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
5160
}
5261
}
5362

‎package.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"build:dev": "vue-tsc --noEmit && vite build --mode dev",
1111
"build:test": "vue-tsc --noEmit && vite build --mode test",
1212
"serve": "vite preview",
13-
"check": "npm-check-updates",
13+
"check": "npx npm-check-updates",
1414
"clean": "npx rimraf docs/node_modules && npx rimraf node_modules",
1515
"clean:docs": "npx rimraf docs/node_modules",
1616
"clean:main": "npx rimraf node_modules",
@@ -25,12 +25,12 @@
2525
"dependencies": {
2626
"@element-plus/icons": "^0.0.11",
2727
"@vueuse/core": "^6.5.3",
28-
"axios": "^0.22.0",
28+
"axios": "^0.23.0",
2929
"clipboard": "^2.0.8",
3030
"echarts": "^5.2.1",
3131
"echarts-wordcloud": "^2.0.0",
32-
"element-plus": "1.1.0-beta.20",
33-
"highlight.js": "^11.2.0",
32+
"element-plus": "1.1.0-beta.21",
33+
"highlight.js": "^11.3.1",
3434
"intro.js": "^4.2.2",
3535
"lodash-es": "^4.17.21",
3636
"mockjs": "^1.1.0",
@@ -76,17 +76,17 @@
7676
"stylelint-config-prettier": "^8.0.2",
7777
"stylelint-config-standard": "^22.0.0",
7878
"stylelint-order": "^4.1.0",
79-
"typescript": "^4.4.3",
80-
"unplugin-element-plus": "^0.1.0",
81-
"unplugin-vue-components": "^0.15.6",
82-
"vite": "^2.6.4",
79+
"typescript": "^4.4.4",
80+
"unplugin-element-plus": "^0.1.3",
81+
"unplugin-vue-components": "^0.16.0",
82+
"vite": "^2.6.10",
8383
"vite-plugin-commonjs-externals": "^0.1.1",
8484
"vite-plugin-eslint": "^1.3.0",
8585
"vite-plugin-style-import": "^1.2.1",
8686
"vite-plugin-svg-icons": "^1.0.5",
8787
"vite-plugin-vue-setup-extend": "^0.1.0",
8888
"vue-eslint-parser": "^7.11.0",
89-
"vue-tsc": "^0.3.0"
89+
"vue-tsc": "^0.28.7"
9090
},
9191
"engines": {
9292
"node": ">= 14.0.0",

‎src/components/Avatars/index.vue

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<div class="avatars-wrap">
3+
<template v-if="tooltip">
4+
<el-tooltip
5+
v-for="(item, $index) in avatarsData"
6+
:key="$index"
7+
:content="item.text"
8+
placement="top"
9+
>
10+
<div
11+
:class="
12+
showAvatar ? 'avatars-item-img' : ['avatars-item', `avatars-${item.type || 'default'}`]
13+
"
14+
>
15+
<el-avatar v-if="showAvatar" :size="40" :src="item.url">
16+
<img :src="defaultImg" />
17+
</el-avatar>
18+
<span v-else>{{ item.text.substr(0, 1) }}</span>
19+
</div>
20+
</el-tooltip>
21+
<div v-if="max && data.length - max > 0" :class="['avatars-item', 'avatars-item-img']">
22+
<span>+{{ data.length - max }}</span>
23+
</div>
24+
</template>
25+
<template v-else>
26+
<div
27+
v-for="(item, $index) in avatarsData"
28+
:key="$index"
29+
:class="
30+
showAvatar ? 'avatars-item-img' : ['avatars-item', `avatars-${item.type || 'default'}`]
31+
"
32+
>
33+
<el-avatar v-if="showAvatar" :size="40" :src="item.url">
34+
<img :src="defaultImg" />
35+
</el-avatar>
36+
<span v-else>{{ item.text.substr(0, 1) }}</span>
37+
</div>
38+
<div v-if="max && data.length - max > 0" :class="['avatars-item', 'avatars-item-img']">
39+
<span>+{{ data.length - max }}</span>
40+
</div>
41+
</template>
42+
</div>
43+
</template>
44+
45+
<script setup lang="ts" name="Avatars">
46+
import { PropType, computed } from 'vue'
47+
import { deepClone } from '@/utils'
48+
import { AvatarConfig } from './types'
49+
import defaultImg from '@/assets/img/default-avatar.png'
50+
51+
const props = defineProps({
52+
// 展示的数据
53+
data: {
54+
type: Array as PropType<AvatarConfig[]>,
55+
default: () => []
56+
},
57+
// 最大展示数量
58+
max: {
59+
type: Number as PropType<number>,
60+
default: 0
61+
},
62+
// 是否使用头像
63+
showAvatar: {
64+
type: Boolean as PropType<boolean>,
65+
default: false
66+
},
67+
// 是否显示完整名称
68+
tooltip: {
69+
type: Boolean as PropType<boolean>,
70+
default: true
71+
}
72+
})
73+
74+
const avatarsData = computed(() => {
75+
if (props.max) {
76+
if (props.data.length <= props.max) {
77+
return props.data
78+
} else {
79+
const data = deepClone(props.data).splice(0, props.max)
80+
return data
81+
}
82+
} else {
83+
return props.data
84+
}
85+
})
86+
</script>
87+
88+
<style lang="less" scoped>
89+
.avatars-wrap {
90+
display: flex;
91+
92+
.avatars-item {
93+
display: inline-block;
94+
width: 40px;
95+
height: 40px;
96+
line-height: 40px;
97+
color: #fff;
98+
text-align: center;
99+
background: #2d8cf0;
100+
border: 1px solid #fff;
101+
border-radius: 50%;
102+
}
103+
104+
.avatars-item-img {
105+
display: inline-block;
106+
border-radius: 50%;
107+
108+
.el-avatar--circle {
109+
border: 1px solid #fff;
110+
}
111+
}
112+
113+
.avatars-item-img + .avatars-item-img {
114+
margin-left: -12px;
115+
}
116+
117+
.avatars-item + .avatars-item {
118+
margin-left: -12px;
119+
}
120+
121+
.avatars-default {
122+
color: #bae7ff;
123+
background: #096dd9;
124+
}
125+
126+
.avatars-success {
127+
color: #f6ffed;
128+
background: #52c41a;
129+
}
130+
131+
.avatars-danger {
132+
color: #fff1f0;
133+
background: #f5222d;
134+
}
135+
136+
.avatars-warning {
137+
color: #fffbe6;
138+
background: #faad14;
139+
}
140+
}
141+
</style>

‎src/components/Avatars/types.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface AvatarConfig {
2+
text: string
3+
type?: string
4+
url?: string
5+
}

0 commit comments

Comments
 (0)