Улучшение фронта

front_vue/src/Design/views/DashboardView.vue

@@ -19,8 +19,10 @@ onMounted(async () => {
 <template>
   <div class="dashboard-view">
     <ServicesGrid />
-    <SitesTable />
-    <ProxiesTable />
+    <div class="dashboard-tables">
+      <SitesTable />
+      <ProxiesTable />
+    </div>
   </div>
 </template>
 
@@ -30,4 +32,22 @@ onMounted(async () => {
   flex-direction: column;
   gap: var(--space-xl);
 }
+
+.dashboard-tables {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+}
+
+@media (min-width: 2200px) {
+  .dashboard-tables {
+    flex-direction: row;
+    gap: var(--space-xl);
+  }
+
+  .dashboard-tables > * {
+    flex: 1;
+    min-width: 0;
+  }
+}
 </style>

front_vue/src/Design/views/ProxyEditView.vue

@@ -1,9 +1,9 @@
-<script setup>
+<script setup>
 const { t } = useI18n()
 const router = useRouter()
 const proxiesStore = useProxiesStore()
 const { success, error } = useNotification()
-const modal = useModal()
+const { confirmDelete: showConfirm } = useConfirm()
 
 const props = defineProps({
   domain: { type: String, required: true },
@@ -20,7 +20,6 @@ const form = reactive({
   autoSSL: false,
 })
 
-import { api } from '@core/api/index.js'
 
 const saving = ref(false)
 
@@ -66,21 +65,20 @@ const saveProxy = async () => {
   saving.value = false
 }
 
-const confirmDelete = () => {
-  modal.open({
+const confirmDelete = async () => {
+  const result = await showConfirm({
     title: t('proxies.deleteTitle'),
-    message: t('proxies.deleteConfirm', { domain: form.domain }),
-    onConfirm: async () => {
-      const result = await proxiesStore.remove(form.domain)
-      if (result && !String(result).startsWith('Error')) {
-        success(t('notify.proxyDeleted'))
-        router.push('/')
-      } else {
-        error(String(result))
-      }
-      modal.close()
-    },
+    message: form.domain,
   })
+  if (result) {
+    const res = await proxiesStore.remove(form.domain)
+    if (res && !String(res).startsWith('Error')) {
+      success(t('notify.proxyDeleted'))
+      router.push('/')
+    } else {
+      error(String(res))
+    }
+  }
 }
 </script>
 

front_vue/src/Design/views/SettingsView.vue

@@ -62,7 +62,7 @@ const toggleAcme = async () => {
 <template>
   <div class="settings-view">
     <div class="settings-header">
-      <h2 class="section-title">{{ t('settings.title') }}</h2>
+      <VSectionHeader :title="t('settings.title')" />
       <VButton variant="success" icon="fas fa-save" :loading="saving" @click="saveSettings">
         {{ saving ? t('settings.saving') : t('settings.save') }}
       </VButton>
@@ -127,20 +127,25 @@ const toggleAcme = async () => {
 }
 
 .settings-card {
-  background: var(--glass-bg-light);
-  backdrop-filter: var(--backdrop-blur);
+  background: rgba(var(--accent-rgb), 0.02);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius);
   padding: var(--space-lg);
+  transition: all var(--transition-base);
+}
+
+.settings-card:hover {
+  background: rgba(var(--accent-rgb), 0.04);
+  border-color: rgba(var(--accent-rgb), 0.2);
 }
 
 .settings-card-title {
-  font-size: var(--text-lg);
+  font-size: var(--text-md);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin: 0 0 20px 0;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--divider-subtle);
+  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
   display: flex;
   align-items: center;
   gap: var(--space-sm);

front_vue/src/Design/views/SiteEditView.vue

@@ -1,9 +1,9 @@
-<script setup>
+<script setup>
 const { t } = useI18n()
 const router = useRouter()
 const sitesStore = useSitesStore()
 const { success, error } = useNotification()
-const modal = useModal()
+const { confirmDelete: showConfirm } = useConfirm()
 
 const props = defineProps({
   host: { type: String, required: true },
@@ -19,7 +19,6 @@ const form = reactive({
   autoSSL: false,
 })
 
-import { api } from '@core/api/index.js'
 
 const saving = ref(false)
 const aliasInput = ref('')
@@ -81,22 +80,20 @@ const saveSite = async () => {
   saving.value = false
 }
 
-const confirmDelete = () => {
-  modal.open({
+const confirmDelete = async () => {
+  const result = await showConfirm({
     title: t('sites.deleteTitle'),
-    message: t('sites.deleteConfirm', { name: form.name, host: form.host }),
-    warning: t('sites.deleteWarning'),
-    onConfirm: async () => {
-      const result = await sitesStore.remove(form.host)
-      if (result && !String(result).startsWith('Error')) {
-        success(t('notify.siteDeleted'))
-        router.push('/')
-      } else {
-        error(String(result))
-      }
-      modal.close()
-    },
+    message: `${form.name} (${form.host})`,
   })
+  if (result) {
+    const res = await sitesStore.remove(form.host)
+    if (res && !String(res).startsWith('Error')) {
+      success(t('notify.siteDeleted'))
+      router.push('/')
+    } else {
+      error(String(res))
+    }
+  }
 }
 </script>
 

front_vue/src/Design/views/VAccessView.vue

@@ -1,6 +1,4 @@
-<script setup>
-import { api } from '@core/api/index.js'
-import { useDraggable } from '@core/composables/useDraggable.js'
+<script setup>
 
 const { t } = useI18n()
 const route = useRoute()