系统维护工具

Weak hands cannot be planted, meager skills have no foundation. Shallow wisdom is futile, how can one hope for a good name?扰扰从役倦，屑屑身事微。少壮轻年月，迟暮惜光辉。系统维护工具

登出

+ / home / labeautef / rochasson-risoul.com / wp-content / plugins / hostinger-reach / frontend / vue / components / [ 返回根目录 ]

名称	大小	权限	修改时间
..	-	-	-
Modals	[目录]	drwxr-xr-x	2026-03-18 13:10
skeletons	[目录]	drwxr-xr-x	2026-03-18 13:10
ActionButton.vue	1.96 KB	-rw-r--r--	2026-03-18 13:10
ActionButtonsSection.vue	728.00 B	-rw-r--r--	2026-03-18 13:10
Banner.vue	4.09 KB	-rw-r--r--	2026-03-18 13:10
FAQ.vue	4.17 KB	-rw-r--r--	2026-03-18 13:10
FormItem.vue	5.81 KB	-rw-r--r--	2026-03-18 13:10
FormsSection.vue	3.12 KB	-rw-r--r--	2026-03-18 13:10
Hero.vue	7.38 KB	-rw-r--r--	2026-03-18 13:10
Integrations.vue	5.61 KB	-rw-r--r--	2026-03-18 13:10
Pagination.vue	3.60 KB	-rw-r--r--	2026-03-18 13:10
PluginEntriesTable.vue	7.35 KB	-rw-r--r--	2026-03-18 13:10
PluginEntry.vue	8.92 KB	-rw-r--r--	2026-03-18 13:10
PluginExpansion.vue	2.23 KB	-rw-r--r--	2026-03-18 13:10
SyncStatusLabel.vue	1.50 KB	-rw-r--r--	2026-03-18 13:10
Tabs.vue	1.30 KB	-rw-r--r--	2026-03-18 13:10
Toggle.vue	1.60 KB	-rw-r--r--	2026-03-18 13:10
UsageCard.vue	5.07 KB	-rw-r--r--	2026-03-18 13:10
UsageCardsRow.vue	1022.00 B	-rw-r--r--	2026-03-18 13:10
UsageCardsSection.vue	1.00 KB	-rw-r--r--	2026-03-18 13:10
WooCommerce.vue	3.04 KB	-rw-r--r--	2026-03-18 13:10
WooCommerceEntriesTable.vue	5.65 KB	-rw-r--r--	2026-03-18 13:10

代码编辑器 :FormsSection.vue

import reachOverviewBannerBackground from '@/assets/images/backgrounds/overview-banner-background.png';
import Banner from '@/components/Banner.vue';
import PluginEntriesTable from '@/components/PluginEntriesTable.vue';
import { useModal } from '@/composables/useModal';
import { useIntegrationsStore } from '@/stores/integrationsStore';
import { ModalName } from '@/types/enums';
import type { Form } from '@/types/models';
import { translate } from '@/utils/translate';

const emit = defineEmits<{
	goToPlugin: [id: string];
	disconnectPlugin: [id: string];
	toggleFormStatus: [form: Form, status: boolean];
	viewForm: [form: Form];
	editForm: [form: Form];
	addForm: [id: string];
}>();

const { openModal } = useModal();
const integrationsStore = useIntegrationsStore();

const handleAddForm = () => {
	openModal(ModalName.ADD_FORM_MODAL, {}, { hasCloseButton: true });
};

const shouldShowTable = computed(
	() => integrationsStore?.activeIntegrations?.length > 1 || integrationsStore.hasAnyForms
);
const isBannerVisible = computed(() => !integrationsStore.isLoading && !shouldShowTable.value);
const isTableVisible = computed(() => integrationsStore.isLoading || shouldShowTable.value);
const isAddButtonVisible = computed(() => !integrationsStore.isLoading && shouldShowTable.value);
</script>

<template>
	<div class="forms-section">
		<div class="forms-section__header">
			<HText as="h1" variant="heading-1">
				{{ translate('hostinger_reach_forms_title') }}
			</HText>
			<span>
				<HButton
					v-if="isAddButtonVisible"
					variant="outline"
					color="neutral"
					size="small"
					icon-prepend="ic-plus-16"
					:is-loading="integrationsStore.isLoading"
					@click="handleAddForm"
				>
					{{ translate('hostinger_reach_forms_add_more_button_text') }}
				</HButton>
			</span>
		</div>

<PluginEntriesTable
			v-if="isTableVisible"
			:integrations="integrationsStore.integrations"
			:is-loading="integrationsStore.isLoading"
			@go-to-plugin="emit('goToPlugin', $event)"
			@disconnect-plugin="emit('disconnectPlugin', $event)"
			@toggle-form-status="(form, status) => emit('toggleFormStatus', form, status)"
			@view-form="emit('viewForm', $event)"
			@edit-form="emit('editForm', $event)"
			@add-form="emit('addForm', $event)"
		/>
	</div>
</template>

&__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-self: stretch;
	}
}

@media (max-width: 1023px) {
	.forms-section {
		&__header {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;

> :last-child {
				align-self: stretch;
				justify-content: flex-end;
			}
		}
	}
}
</style>