VC-HB3-Accelerator/DLE
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

ваше сообщение коммита

Browse Source
This commit is contained in:
Alex
2025-07-06 00:36:20 +03:00
parent 6182c2ced1
commit af3771ad8c
32 changed files with 3935 additions and 3166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

559
frontend/src/components/CloudflareDnsManager.vue
View File

@@ -1,559 +0,0 @@
<template>
<div class="dns-manager">
<h3>Управление DNS записями</h3>
<!-- Индикатор загрузки -->
<div v-if="isLoading" class="loading-section">
<div class="loading-spinner"></div>
<span>Загрузка DNS записей...</span>
</div>
<!-- Сообщения об ошибках -->
<div v-if="errorMessage" class="error-message">
{{ errorMessage }}
</div>
<!-- Сообщения об успехе -->
<div v-if="successMessage" class="success-message">
{{ successMessage }}
</div>
<!-- Таблица DNS записей -->
<div v-if="!isLoading && records.length > 0" class="dns-records-table">
<table>
<thead>
<tr>
<th>Тип</th>
<th>Имя</th>
<th>Содержимое</th>
<th>TTL</th>
<th>Прокси</th>
<th>Действия</th>
</tr>
</thead>
<tbody>
<tr v-for="record in records" :key="record.id">
<td>{{ record.type }}</td>
<td>{{ record.name }}</td>
<td class="content-cell">{{ record.content }}</td>
<td>{{ record.ttl === 1 ? 'Auto' : record.ttl }}</td>
<td>
<span v-if="['A', 'AAAA', 'CNAME'].includes(record.type)"
:class="['proxy-status', record.proxied ? 'proxied' : 'not-proxied']">
{{ record.proxied ? 'Да' : 'Нет' }}
</span>
<span v-else>-</span>
</td>
<td class="actions-cell">
<button class="btn-edit" @click="editRecord(record)">
<i class="fas fa-edit"></i>
</button>
<button class="btn-delete" @click="deleteRecord(record.id)"
:disabled="isDeletingRecord === record.id">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Пустое состояние -->
<div v-if="!isLoading && records.length === 0 && !errorMessage" class="empty-state">
<p>DNS записи не найдены</p>
</div>
<!-- Кнопка добавления новой записи -->
<div class="add-record-section" v-if="!isLoading && !errorMessage">
<button class="btn-primary" @click="showAddForm = true" v-if="!showAddForm">
<i class="fas fa-plus"></i> Добавить DNS запись
</button>
</div>
<!-- Форма создания/редактирования DNS записи -->
<div v-if="showAddForm || editingRecord" class="dns-form">
<h4>{{ editingRecord ? 'Редактирование DNS записи' : 'Добавление DNS записи' }}</h4>
<div class="form-row">
<div class="form-group">
<label>Тип записи:</label>
<select v-model="formData.type" class="form-control">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="TXT">TXT</option>
<option value="SRV">SRV</option>
<option value="NS">NS</option>
</select>
</div>
<div class="form-group">
<label>Имя:</label>
<input v-model="formData.name" type="text" class="form-control"
placeholder="example.com или @" />
</div>
</div>
<div class="form-group">
<label>Содержимое:</label>
<input v-model="formData.content" type="text" class="form-control"
:placeholder="getContentPlaceholder(formData.type)" />
</div>
<div class="form-row">
<div class="form-group">
<label>TTL:</label>
<select v-model="formData.ttl" class="form-control">
<option value="1">Auto</option>
<option value="300">5 минут</option>
<option value="1800">30 минут</option>
<option value="3600">1 час</option>
<option value="14400">4 часа</option>
<option value="86400">1 день</option>
</select>
</div>
<div class="form-group" v-if="['A', 'AAAA', 'CNAME'].includes(formData.type)">
<label>
<input type="checkbox" v-model="formData.proxied" />
Проксировать через Cloudflare
</label>
</div>
</div>
<div class="form-actions">
<button class="btn-primary" @click="saveRecord" :disabled="isSavingRecord">
{{ isSavingRecord ? 'Сохранение...' : (editingRecord ? 'Обновить' : 'Создать') }}
</button>
<button class="btn-secondary" @click="cancelForm">Отмена</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
const emit = defineEmits(['dns-updated']);
const records = ref([]);
const isLoading = ref(false);
const errorMessage = ref('');
const successMessage = ref('');
const showAddForm = ref(false);
const editingRecord = ref(null);
const isSavingRecord = ref(false);
const isDeletingRecord = ref(null);
const formData = ref({
type: 'A',
name: '',
content: '',
ttl: 1,
proxied: false
});
// Загрузка DNS записей
async function loadDnsRecords() {
isLoading.value = true;
errorMessage.value = '';
try {
const response = await fetch('/api/cloudflare/dns-records');
const data = await response.json();
if (data.success) {
records.value = data.records || [];
} else {
errorMessage.value = data.message || 'Ошибка загрузки DNS записей';
}
} catch (e) {
errorMessage.value = 'Ошибка соединения: ' + e.message;
} finally {
isLoading.value = false;
}
}
// Получение placeholder для поля content в зависимости от типа записи
function getContentPlaceholder(type) {
const placeholders = {
A: '192.168.1.1',
AAAA: '2001:db8::1',
CNAME: 'example.com',
MX: '10 mail.example.com',
TXT: 'v=spf1 include:_spf.google.com ~all',
SRV: '10 5 443 target.example.com',
NS: 'ns1.example.com'
};
return placeholders[type] || 'Введите значение';
}
// Начало редактирования записи
function editRecord(record) {
editingRecord.value = record;
formData.value = {
type: record.type,
name: record.name,
content: record.content,
ttl: record.ttl,
proxied: record.proxied || false
};
showAddForm.value = false;
}
// Сохранение записи (создание или обновление)
async function saveRecord() {
if (!formData.value.name || !formData.value.content) {
errorMessage.value = 'Заполните все обязательные поля';
return;
}
isSavingRecord.value = true;
errorMessage.value = '';
successMessage.value = '';
try {
const body = {
type: formData.value.type,
name: formData.value.name,
content: formData.value.content,
ttl: parseInt(formData.value.ttl),
proxied: formData.value.proxied
};
if (editingRecord.value) {
body.recordId = editingRecord.value.id;
}
const response = await fetch('/api/cloudflare/dns-records', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
const data = await response.json();
if (data.success) {
successMessage.value = data.message || 'DNS запись сохранена';
cancelForm();
await loadDnsRecords();
emit('dns-updated');
// Очищаем сообщение об успехе через 3 секунды
setTimeout(() => {
successMessage.value = '';
}, 3000);
} else {
errorMessage.value = data.message || 'Ошибка сохранения DNS записи';
}
} catch (e) {
errorMessage.value = 'Ошибка соединения: ' + e.message;
} finally {
isSavingRecord.value = false;
}
}
// Удаление записи
async function deleteRecord(recordId) {
if (!confirm('Вы уверены, что хотите удалить эту DNS запись?')) {
return;
}
isDeletingRecord.value = recordId;
errorMessage.value = '';
successMessage.value = '';
try {
const response = await fetch(`/api/cloudflare/dns-records/${recordId}`, {
method: 'DELETE'
});
const data = await response.json();
if (data.success) {
successMessage.value = data.message || 'DNS запись удалена';
await loadDnsRecords();
emit('dns-updated');
// Очищаем сообщение об успехе через 3 секунды
setTimeout(() => {
successMessage.value = '';
}, 3000);
} else {
errorMessage.value = data.message || 'Ошибка удаления DNS записи';
}
} catch (e) {
errorMessage.value = 'Ошибка соединения: ' + e.message;
} finally {
isDeletingRecord.value = null;
}
}
// Отмена формы
function cancelForm() {
showAddForm.value = false;
editingRecord.value = null;
formData.value = {
type: 'A',
name: '',
content: '',
ttl: 1,
proxied: false
};
}
// Очистка сообщений при изменении формы
watch([() => formData.value.type, () => formData.value.name, () => formData.value.content], () => {
errorMessage.value = '';
});
onMounted(() => {
loadDnsRecords();
});
defineExpose({
loadDnsRecords
});
</script>
<style scoped>
.dns-manager {
margin-top: 2rem;
padding: 1.5rem;
border: 1px solid #e1e5e9;
border-radius: 8px;
background: #f8f9fa;
}
.loading-section {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: #fff;
border-radius: 6px;
border: 1px solid #e1e5e9;
}
.loading-spinner {
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-message {
padding: 0.75rem 1rem;
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 6px;
margin-bottom: 1rem;
}
.success-message {
padding: 0.75rem 1rem;
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 6px;
margin-bottom: 1rem;
}
.dns-records-table {
background: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dns-records-table table {
width: 100%;
border-collapse: collapse;
}
.dns-records-table th,
.dns-records-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #e1e5e9;
}
.dns-records-table th {
background: #f8f9fa;
font-weight: 600;
color: #495057;
}
.content-cell {
max-width: 200px;
word-break: break-all;
font-family: monospace;
font-size: 0.9em;
}
.proxy-status.proxied {
color: #28a745;
font-weight: 500;
}
.proxy-status.not-proxied {
color: #6c757d;
}
.actions-cell {
width: 100px;
}
.btn-edit,
.btn-delete {
background: none;
border: none;
padding: 0.25rem 0.5rem;
margin: 0 0.25rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-edit {
color: #007bff;
}
.btn-edit:hover {
background: #e3f2fd;
}
.btn-delete {
color: #dc3545;
}
.btn-delete:hover {
background: #fdeaea;
}
.btn-delete:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.empty-state {
text-align: center;
padding: 2rem;
color: #6c757d;
background: #fff;
border-radius: 6px;
}
.add-record-section {
margin-top: 1rem;
}
.dns-form {
margin-top: 1.5rem;
padding: 1.5rem;
background: #fff;
border-radius: 6px;
border: 1px solid #e1e5e9;
}
.dns-form h4 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #495057;
}
.form-row {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.form-group {
flex: 1;
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #495057;
}
.form-control {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 0.9rem;
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}
.form-actions {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
}
.btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 4px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.2s;
}
.btn-primary:hover {
background: var(--color-primary-dark);
}
.btn-primary:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.btn-secondary {
background: #6c757d;
color: #fff;
border: none;
border-radius: 4px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.2s;
}
.btn-secondary:hover {
background: #5a6268;
}
@media (max-width: 768px) {
.form-row {
flex-direction: column;
}
.dns-records-table {
font-size: 0.8rem;
}
.content-cell {
max-width: 120px;
}
}
</style>

8
frontend/src/router/index.js
View File

@@ -5,7 +5,7 @@ const SettingsAiView = () => import('../views/settings/AiSettingsView.vue');
const SettingsBlockchainView = () => import('../views/settings/BlockchainSettingsView.vue');
const SettingsSecurityView = () => import('../views/settings/SecuritySettingsView.vue');
const SettingsInterfaceView = () => import('../views/settings/Interface/InterfaceSettingsView.vue');
const SettingsInterfaceCloudflareDetailsView = () => import('../views/settings/Interface/CloudflareDetailsView.vue');
import axios from 'axios';
import { setToStorage } from '../utils/storage.js';
@@ -53,11 +53,7 @@ const routes = [
name: 'settings-interface',
component: SettingsInterfaceView,
},
{
path: 'interface/cloudflare-details',
name: 'settings-interface-cloudflare-details',
component: SettingsInterfaceCloudflareDetailsView,
},
{
path: 'telegram',
name: 'settings-telegram',

115
frontend/src/views/settings/DomainConnectBlock.vue
View File

@@ -1,115 +0,0 @@
<template>
<div class="domain-block">
<h3>Подключение домена</h3>
<p>Укажите свой домен, чтобы привязать его к опубликованному в IPFS фронтенду. Следуйте инструкции ниже для настройки DNS.</p>
<div class="form-group">
<input v-model="domain" class="form-control" placeholder="example.com" />
<button class="btn-primary" :disabled="loading || !domain" @click="checkDomain">
{{ loading ? 'Проверка...' : 'Проверить' }}
</button>
</div>
<div v-if="error" class="error">Ошибка: {{ error }}</div>
<div v-if="success" class="success">DNS-записи найдены: <pre>{{ records }}</pre></div>
<div class="instruction">
<b>Инструкция по подключению:</b>
<ol>
<li>Опубликуйте фронтенд в IPFS и получите CID.</li>
<li>В панели управления доменом создайте DNS-запись типа <b>CNAME</b> или <b>TXT</b> (или используйте IPFS gateway).</li>
<li>Для CNAME: укажите <code>yourdomain.com CNAME gateway.ipfs.io</code> или аналогичный шлюз.</li>
<li>Для TXT: <code>_dnslink.yourdomain.com TXT dnslink=/ipfs/&lt;ваш CID&gt;</code></li>
<li>Дождитесь обновления DNS и проверьте домен через эту форму.</li>
</ol>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import axios from '../../api/axios';
const domain = ref('');
const loading = ref(false);
const error = ref('');
const success = ref(false);
const records = ref('');
async function checkDomain() {
loading.value = true;
error.value = '';
success.value = false;
records.value = '';
try {
const { data } = await axios.post('/api/settings/interface/check-domain', { domain: domain.value });
if (data.success && data.records) {
records.value = JSON.stringify(data.records, null, 2);
success.value = true;
} else {
error.value = data.error || 'DNS-записи не найдены';
}
} catch (e) {
error.value = e.response?.data?.error || e.message || 'Ошибка запроса';
} finally {
loading.value = false;
}
}
</script>
<style scoped>
.domain-block {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
padding: 2rem;
margin-bottom: 2rem;
max-width: 500px;
}
.form-group {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.form-control {
flex: 1;
padding: 0.5rem 1rem;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 1rem;
}
.btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 0.5rem 1.5rem;
cursor: pointer;
font-size: 1rem;
transition: background 0.2s;
}
.btn-primary:disabled {
background: #ccc;
cursor: not-allowed;
}
.success {
margin-top: 1rem;
color: var(--color-success, #2e7d32);
}
.error {
margin-top: 1rem;
color: var(--color-danger, #c62828);
}
.instruction {
margin-top: 1.5rem;
font-size: 0.95em;
color: #555;
background: #f8f8f8;
border-radius: 8px;
padding: 1rem;
}
pre {
background: #f4f4f4;
border-radius: 6px;
padding: 0.5rem;
font-size: 0.95em;
margin: 0.5rem 0 0 0;
}
</style>

346
frontend/src/views/settings/Interface/CloudflareDetailsView.vue
View File

@@ -1,346 +0,0 @@
<template>
<div class="cloudflare-details settings-panel">
<button class="close-btn" @click="goBack">×</button>
<h2>Настройка Cloudflare и подключение домена</h2>
<ol class="instruction-block">
<li>Зайдите в свой аккаунт <a href="https://dash.cloudflare.com/" target="_blank">Cloudflare</a> и добавьте ваш домен.</li>
<li>Смените NS-записи у регистратора домена на те, что выдаст Cloudflare (см. <a href="https://developers.cloudflare.com/fundamentals/setup/add-site/ns/" target="_blank">инструкцию</a>).</li>
<li>Дождитесь, когда домен будет обслуживаться Cloudflare (обычно 5-30 минут).</li>
<li>Сгенерируйте <a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank">API Token</a> с правами управления DNS и туннелями.</li>
<li>Введите API Token и домен ниже для автоматической настройки туннеля и DNS.</li>
<li><b>Один раз выполните в терминале WSL2:</b>
<pre style="white-space:pre-line;font-size:0.95em;">curl -fsSL https://pkg.cloudflare.com/cloudflare-main.gpg | sudo tee /usr/share/keyrings/cloudflare-main.gpg >/dev/null
echo 'deb [signed-by=/usr/share/keyrings/cloudflare-main.gpg] https://pkg.cloudflare.com/cloudflared noble main' | sudo tee /etc/apt/sources.list.d/cloudflared.list
sudo apt update
sudo apt install cloudflared</pre>
</li>
<li>Нажмите кнопку <b>Автоматически настроить и открыть приложение</b> и дождитесь появления ссылки.</li>
</ol>
<form class="form-block" @submit.prevent="saveToken">
<label>Cloudflare API Token:</label>
<input v-model="apiToken" type="text" class="form-control" placeholder="Введите API Token" />
<button class="btn-primary" type="submit">Сохранить токен</button>
</form>
<div v-if="accounts.length" class="form-block">
<label>Выберите аккаунт Cloudflare:</label>
<select v-model="selectedAccountId" class="form-control">
<option v-for="acc in accounts" :key="acc.id" :value="acc.id">
{{ acc.name }} ({{ acc.id }})
</option>
</select>
<button class="btn-primary" @click="saveAccountId">Сохранить аккаунт</button>
<div v-if="accountStatusMsg" class="status-block">{{ accountStatusMsg }}</div>
</div>
<form class="form-block" @submit.prevent="connectDomain">
<label>Домен для туннеля:</label>
<input v-model="domain" type="text" class="form-control" placeholder="example.com" />
<button class="btn-primary" type="submit">Проверить и подключить домен</button>
</form>
<div class="status-block">
<b>Статус Cloudflared:</b> {{ tunnelStatus }}<br>
<b>Статус домена:</b> {{ domainStatusMsg }}<br>
<b>Статус туннеля:</b> {{ tunnelStatusMsg }}<br>
<span v-if="statusMsg">{{ statusMsg }}</span>
</div>
<div v-if="appUrl" class="app-link-block">
<a :href="appUrl" target="_blank" class="btn-primary open-app-btn">
Открыть приложение
</a>
</div>
<div v-if="autoSetupSteps.length" class="auto-setup-steps">
<div v-for="step in autoSetupSteps" :key="step.step" :class="['auto-setup-step', step.status]">
{{ step.message }}
</div>
</div>
<!-- Кнопка управления DNS записями -->
<div v-if="appUrl || (accounts.length && selectedAccountId && domain)" class="dns-management-section">
<button class="btn-primary" @click="showDnsManager = !showDnsManager">
<i class="fas fa-cog"></i> {{ showDnsManager ? 'Скрыть' : 'Управлять' }} DNS записями
</button>
</div>
<!-- Компонент управления DNS записями -->
<CloudflareDnsManager
v-if="showDnsManager"
@dns-updated="onDnsUpdated"
ref="dnsManager"
/>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import CloudflareDnsManager from '@/components/CloudflareDnsManager.vue';
const router = useRouter();
const goBack = () => router.push('/settings/interface');
const apiToken = ref('');
const domain = ref('');
const statusMsg = ref('');
const tunnelStatus = ref('');
const domainStatusMsg = ref('');
const tunnelStatusMsg = ref('');
const appUrl = ref('');
const autoSetupSteps = ref([]);
const accounts = ref([]);
const selectedAccountId = ref('');
const accountStatusMsg = ref('');
const showDnsManager = ref(false);
const dnsManager = ref(null);
async function loadSettings() {
try {
console.log('[CloudflareDetails] loadSettings: start');
const res = await fetch('/api/cloudflare/settings');
const data = await res.json();
console.log('[CloudflareDetails] loadSettings: data', data);
if (data.success && data.settings) {
apiToken.value = data.settings.api_token || '';
domain.value = data.settings.domain || '';
}
} catch (e) {
console.error('[CloudflareDetails] loadSettings: error', e);
}
}
async function saveToken() {
try {
console.log('[CloudflareDetails] saveToken: start', apiToken.value);
const res = await fetch('/api/cloudflare/token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: apiToken.value })
});
const data = await res.json();
console.log('[CloudflareDetails] saveToken: data', data);
statusMsg.value = data.message || 'Токен сохранён!';
// Получить список аккаунтов
const accRes = await fetch('/api/cloudflare/accounts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ api_token: apiToken.value })
});
const accData = await accRes.json();
if (accData.success && accData.accounts) {
accounts.value = accData.accounts;
accountStatusMsg.value = 'Выберите аккаунт и сохраните.';
} else {
accountStatusMsg.value = accData.message || 'Ошибка получения аккаунтов';
}
getStatus();
} catch (e) {
console.error('[CloudflareDetails] saveToken: error', e);
statusMsg.value = 'Ошибка при сохранении токена';
accountStatusMsg.value = 'Ошибка получения аккаунтов';
}
}
async function saveAccountId() {
try {
const res = await fetch('/api/cloudflare/account-id', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ account_id: selectedAccountId.value })
});
const data = await res.json();
accountStatusMsg.value = data.message || 'Account ID сохранён!';
getStatus();
} catch (e) {
accountStatusMsg.value = 'Ошибка при сохранении Account ID';
}
}
async function connectDomain() {
try {
statusMsg.value = 'Выполняется автоматическая настройка...';
appUrl.value = '';
autoSetupSteps.value = [];
const res = await fetch('/api/cloudflare/domain', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ domain: domain.value })
});
const data = await res.json();
if (data.success) {
statusMsg.value = data.message || 'Готово!';
appUrl.value = data.app_url || '';
autoSetupSteps.value = data.steps || [];
// Автоматически показываем DNS менеджер после успешного создания туннеля
showDnsManager.value = true;
// Обновляем DNS записи в менеджере, если он уже загружен
setTimeout(() => {
if (dnsManager.value && dnsManager.value.loadDnsRecords) {
dnsManager.value.loadDnsRecords();
}
}, 1000);
} else {
statusMsg.value = data.error || 'Ошибка автоматической настройки';
autoSetupSteps.value = data.steps || [];
}
getStatus();
} catch (e) {
statusMsg.value = 'Ошибка автоматической настройки: ' + e.message;
}
}
async function getStatus() {
try {
console.log('[CloudflareDetails] getStatus: start');
const res = await fetch('/api/cloudflare/status');
const data = await res.json();
console.log('[CloudflareDetails] getStatus: data', data);
tunnelStatus.value = data.status || '';
domainStatusMsg.value = data.domainMsg || '';
tunnelStatusMsg.value = data.tunnelMsg || '';
} catch (e) {
console.error('[CloudflareDetails] getStatus: error', e);
tunnelStatus.value = 'Ошибка';
domainStatusMsg.value = 'Ошибка';
tunnelStatusMsg.value = 'Ошибка';
}
}
function onDnsUpdated() {
console.log('[CloudflareDetails] DNS records updated');
// Обновляем статус после изменения DNS
getStatus();
}
onMounted(() => {
loadSettings();
getStatus();
});
</script>
<style scoped>
.cloudflare-details.settings-panel {
padding: var(--block-padding);
background-color: var(--color-light);
border-radius: var(--radius-md);
margin-top: var(--spacing-lg);
animation: fadeIn var(--transition-normal);
min-height: 200px;
position: relative;
}
h2 {
margin-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--color-grey-light);
padding-bottom: var(--spacing-md);
}
.instruction-block {
background: #f8f8f8;
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
font-size: 1rem;
}
.form-block {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
max-width: 400px;
}
.form-control {
padding: 0.5rem 1rem;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 1rem;
}
.btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 0.5rem 1.5rem;
cursor: pointer;
font-size: 1rem;
transition: background 0.2s;
margin-top: 0.5rem;
align-self: flex-start;
}
.btn-primary:hover {
background: var(--color-primary-dark);
}
.btn-primary.install-btn {
margin-top: 2rem;
}
.status-block {
margin: 1.5rem 0 0.5rem 0;
font-size: 1.05rem;
color: #555;
}
.close-btn {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: #bbb;
transition: color 0.2s;
z-index: 10;
}
.close-btn:hover {
color: #333;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.app-link-block {
margin-top: 2rem;
}
.open-app-btn {
display: inline-block;
padding: 0.7rem 2rem;
font-size: 1.1rem;
background: var(--color-success, #2cae4f);
color: #fff;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s;
}
.open-app-btn:hover {
background: var(--color-success-dark, #1e7d32);
}
.auto-setup-btn {
margin-top: 1.5rem;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 0.5rem 1.5rem;
cursor: pointer;
font-size: 1rem;
transition: background 0.2s;
display: block;
}
.auto-setup-steps {
margin-top: 1.5rem;
}
.auto-setup-step {
margin-bottom: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 6px;
background: #f8f8f8;
font-size: 1rem;
}
.auto-setup-step.ok {
color: #2cae4f;
}
.auto-setup-step.error {
color: #c62828;
}
.dns-management-section {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-grey-light);
}
</style>

57
frontend/src/views/settings/Interface/InterfaceSettingsView.vue
View File

@@ -1,51 +1,11 @@
<template>
<div class="interface-settings settings-panel" style="position:relative;min-height:120px">
<button class="close-btn" @click="goBack">×</button>
<h2>Традиционный хостинг</h2>
<!-- Cloudflare -->
<div class="web3-service-block">
<div class="service-header">
<h3>Cloudflare</h3>
<span class="service-badge cloudflare">Туннели и CDN</span>
</div>
<p>Подключите ваш локальный DApp к интернету через Cloudflare Tunnels. Быстрый доступ и защита от DDoS атак.</p>
<div class="service-features">
<span class="feature">✓ Cloudflare Tunnels</span>
<span class="feature">✓ Защита от DDoS</span>
<span class="feature">✓ Глобальная CDN</span>
</div>
<button
class="btn-primary"
@click="isAdmin ? goToCloudflareDetails() : null"
:disabled="!isAdmin"
>
Подробнее
</button>
</div>
<h2>Web3 Хостинг</h2>
<!-- Pinata IPFS -->
<div class="web3-service-block">
<div class="service-header">
<h3>Pinata IPFS</h3>
<span class="service-badge">Децентрализованное хранение</span>
</div>
<p>Разместите ваш DApp на IPFS с помощью Pinata. Поддержка пользовательских доменов, CDN и автоматические деплои.</p>
<div class="service-features">
<span class="feature">✓ IPFS хостинг</span>
<span class="feature">✓ CDN глобально</span>
<span class="feature">✓ Домен</span>
</div>
<button
class="btn-primary"
@click="isAdmin ? goToPinataDetails() : null"
:disabled="!isAdmin"
>
Подробнее
</button>
</div>
<!-- Akash Network -->
<div class="web3-service-block">
@@ -97,13 +57,8 @@ import { useAuthContext } from '@/composables/useAuth';
const router = useRouter();
const { isAdmin } = useAuthContext();
const goBack = () => router.push('/settings');
const goToCloudflareDetails = () => router.push('/settings/interface/cloudflare-details');
// Web3 сервисы
const goToPinataDetails = () => {
// Пока открываем в новой вкладке, позже можно создать отдельные страницы
window.open('https://pinata.cloud/pricing', '_blank');
};
const goToAkashDetails = () => {
window.open('https://akash.network/', '_blank');
@@ -174,10 +129,6 @@ h2:first-of-type {
font-weight: 500;
}
.service-badge.cloudflare {
background: linear-gradient(135deg, #f38020, #f5af19);
}
.service-badge.akash {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}