refactor(support): 重构support页面代码
- 将segement tab移至单独的vue组件 - 增添部分i18n文本
This commit is contained in:
65
app/components/SupportTabs.vue
Normal file
65
app/components/SupportTabs.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="page-tab">
|
||||
<el-segmented
|
||||
v-model="activeTab"
|
||||
class="segmented"
|
||||
:options="options"
|
||||
block
|
||||
size="large"
|
||||
@change="handleSegmentedChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const activeTab = ref(props.modelValue || '')
|
||||
const options = [
|
||||
{ label: '服务支持', value: '' },
|
||||
{ label: '常见问题', value: 'faq' },
|
||||
{ label: '文档资料', value: 'documents' },
|
||||
{ label: '联系售后', value: 'contact-us' },
|
||||
]
|
||||
|
||||
const handleSegmentedChange = (value: string) => {
|
||||
const localePath = useLocalePath()
|
||||
navigateTo(localePath(`/support/${value}`))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.segmented {
|
||||
--el-segmented-bg-color: transparent;
|
||||
--el-segmented-item-active-color: var(--el-color-primary);
|
||||
--el-segmented-item-color: var(--el-text-color-secondary);
|
||||
--el-segmented-item-hover-color: var(--el-color-primary);
|
||||
--el-segmented-item-border-color: transparent;
|
||||
--el-segmented-item-active-border-color: transparent;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item-selected) {
|
||||
/* --el-border-radius-base: 16px; */
|
||||
transition: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item) {
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--el-color-primary-dark-2);
|
||||
border-bottom: 4px solid var(--el-color-primary-dark-2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="content">
|
||||
<div class="page-tab">
|
||||
<el-segmented v-model="activeTab" class="segmented" :options="options" block size="large" @change="handleSegmentedChange" />
|
||||
</div>
|
||||
<support-tabs model-value="contact-us" />
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
@ -43,19 +41,6 @@ const strapiLocale = getStrapiLocale()
|
||||
|
||||
const content = ref<string>('')
|
||||
|
||||
const activeTab = ref('contact-us')
|
||||
const options = [
|
||||
{ label: '服务支持', value: '' },
|
||||
{ label: '常见问题', value: 'faq' },
|
||||
{ label: '联系售后', value: 'contact-us' },
|
||||
{ label: '文档资料', value: 'documents' },
|
||||
]
|
||||
|
||||
const handleSegmentedChange = (value: string) => {
|
||||
const localePath = useLocalePath()
|
||||
navigateTo(localePath(`/support/${value}`))
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
|
||||
@ -90,35 +75,6 @@ onMounted(async () => {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
--el-segmented-bg-color: transparent;
|
||||
--el-segmented-item-active-color: var(--el-color-primary);
|
||||
--el-segmented-item-color: var(--el-text-color-secondary);
|
||||
--el-segmented-item-hover-color: var(--el-color-primary);
|
||||
--el-segmented-item-border-color: transparent;
|
||||
--el-segmented-item-active-border-color: transparent;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item-selected) {
|
||||
/* --el-border-radius-base: 16px; */
|
||||
transition: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item) {
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--el-color-primary-dark-2);
|
||||
border-bottom: 4px solid var(--el-color-primary-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
41
app/pages/support/documents.vue
Normal file
41
app/pages/support/documents.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<support-tabs model-value="documents"/>
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.documents') }}</h1>
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/support/documents')">{{ $t('navigation.documents') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header {
|
||||
display: flex;
|
||||
padding: 2rem 2rem 0rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
43
app/pages/support/faq.vue
Normal file
43
app/pages/support/faq.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<support-tabs model-value="faq" />
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.faq') }}</h1>
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/support/faq')">{{ $t('navigation.faq') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header {
|
||||
display: flex;
|
||||
padding: 2rem 2rem 0rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-tab">
|
||||
<el-segmented
|
||||
v-model="activeTab" class="segmented" :options="options" block size="large"
|
||||
@change="handleSegmentedChange" />
|
||||
</div>
|
||||
<support-tabs />
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.support') }}</h1>
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
@ -43,18 +39,6 @@ v-model="activeTab" class="segmented" :options="options" block size="large"
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const activeTab = ref('support')
|
||||
const options = [
|
||||
{ label: '服务支持', value: 'support' },
|
||||
{ label: '常见问题', value: 'faq' },
|
||||
{ label: '联系售后', value: 'contact-us' },
|
||||
{ label: '文档资料', value: 'documents' },
|
||||
]
|
||||
|
||||
const handleSegmentedChange = (value: string) => {
|
||||
const localePath = useLocalePath()
|
||||
navigateTo(localePath(`/support/${value}`))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -74,35 +58,6 @@ const handleSegmentedChange = (value: string) => {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
--el-segmented-bg-color: transparent;
|
||||
--el-segmented-item-active-color: var(--el-color-primary);
|
||||
--el-segmented-item-color: var(--el-text-color-secondary);
|
||||
--el-segmented-item-hover-color: var(--el-color-primary);
|
||||
--el-segmented-item-border-color: transparent;
|
||||
--el-segmented-item-active-border-color: transparent;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item-selected) {
|
||||
/* --el-border-radius-base: 16px; */
|
||||
transition: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item) {
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--el-color-primary-dark-2);
|
||||
border-bottom: 4px solid var(--el-color-primary-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user