index.vue
2.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
<n-modal v-model:show="showRef" class="go-create-modal" @afterLeave="closeHandle">
<n-space size="large">
<n-card class="card-box" hoverable>
<template #header>
<n-text class="card-box-tite">{{ $t('project.create_tip') }}</n-text>
</template>
<template #header-extra>
<n-text @click="closeHandle">
<n-icon size="20">
<component :is="CloseIcon"></component>
</n-icon>
</n-text>
</template>
<n-space class="card-box-content" justify="center">
<n-button
size="large"
:disabled="item.disabled"
v-for="item in typeList"
:key="item.key"
@click="btnHandle"
>
<component :is="item.title"></component>
<template #icon>
<n-icon size="18">
<component :is="item.icon"></component>
</n-icon>
</template>
</n-button>
</n-space>
<template #action></template>
</n-card>
</n-space>
</n-modal>
</template>
<script lang="ts" setup>
import { ref, watch, shallowRef } from 'vue'
import { icon } from '@/plugins'
import { PageEnum, ChartEnum } from '@/enums/pageEnum'
import { fetchPathByName, routerTurnByPath, renderLang, getUUID } from '@/utils'
const { FishIcon, CloseIcon } = icon.ionicons5
const { StoreIcon, ObjectStorageIcon } = icon.carbon
const showRef = ref(false)
const emit = defineEmits(['close'])
const props = defineProps({
show: Boolean
})
const typeList = shallowRef([
{
title: renderLang('project.new_project'),
key: ChartEnum.CHART_HOME_NAME,
icon: FishIcon,
disabled: false
},
{
title: renderLang('project.my_templete'),
key: PageEnum.BASE_HOME_TEMPLATE_NAME,
icon: ObjectStorageIcon,
disabled: true
},
{
title: renderLang('project.template_market'),
key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
icon: StoreIcon,
disabled: true
}
])
watch(props, newValue => {
showRef.value = newValue.show
})
// 关闭对话框
const closeHandle = () => {
emit('close', false)
}
// 处理按钮点击
const btnHandle = (key: string) => {
closeHandle()
const id = getUUID()
const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href')
routerTurnByPath(path, [id], undefined, true)
}
</script>
<style lang="scss" scoped>
$cardWidth: 570px;
@include go('create-modal') {
position: fixed;
top: 200px;
left: 50%;
transform: translateX(-50%);
.card-box {
width: $cardWidth;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0);
@extend .go-transition;
&:hover {
@include hover-border-color('hover-border-color');
}
&-tite {
font-size: 14px;
}
&-content {
padding: 0px 10px;
width: 100%;
}
}
}
</style>