feat: add system information drawer (#44)

frontend/admin/src/components/TopLead.vue

@@ -85,6 +85,11 @@
             v-tooltip.top="'Журнал событий'"
             @click="showLogsDrawer = true"
           />
+          <Button
+            icon="fa fa-info-circle"
+            v-tooltip.top="'Системная информация'"
+            @click="showSystemInfoDrawer = true"
+          />
         </ButtonGroup>
         <ButtonGroup>
           <Button
@@ -121,24 +126,96 @@
     >
       <LogsViewer/>
     </Drawer>
+
+    <Drawer
+      v-model:visible="showSystemInfoDrawer"
+      header="Системная информация"
+      position="right"
+      :baseZIndex="1000"
+      class="tw:!w-full tw:md:!w-1/2"
+    >
+      <div class="tw:flex tw:flex-col tw:gap-4 tw:h-full">
+        <div class="tw:flex tw:justify-end">
+          <Button
+            label="Скопировать"
+            icon="fa fa-copy"
+            @click="copySystemInfo"
+            :disabled="!systemInfo"
+          />
+        </div>
+        <Textarea
+          v-model="systemInfo"
+          readonly
+          class="tw:w-full tw:h-full tw:font-mono tw:text-sm"
+          style="font-family: monospace;"
+        />
+      </div>
+    </Drawer>
   </div>
 </template>
 
 <script setup>
 import {useSettingsStore} from "@/stores/settings.js";
 import {useStatsStore} from "@/stores/stats.js";
-import {onMounted, ref} from "vue";
+import {onMounted, ref, watch} from "vue";
 import OcImagePicker from "@/components/OcImagePicker.vue";
 import {apiGet} from "@/utils/http.js";
 import ResetCacheBtn from "@/components/Form/ResetCacheBtn.vue";
 import {Button, ButtonGroup, Drawer} from "primevue";
+import Textarea from 'primevue/textarea';
 import {rub} from "@/utils/helpers.js";
 import LogsViewer from "@/components/LogsViewer.vue";
+import {useToast} from "primevue/usetoast";
 
 const settings = useSettingsStore();
 const stats = useStatsStore();
+const toast = useToast();
 const tgMe = ref(null);
 const showLogsDrawer = ref(false);
+const showSystemInfoDrawer = ref(false);
+const systemInfo = ref('');
+
+const fetchSystemInfo = async () => {
+  try {
+    const response = await apiGet('getSystemInfo');
+    if (response.success) {
+      systemInfo.value = response.data;
+    } else {
+      systemInfo.value = 'Ошибка при получении системной информации: ' + (response.error || 'Unknown error');
+    }
+  } catch (error) {
+    systemInfo.value = 'Ошибка при получении системной информации: ' + (error.message || 'Unknown error');
+  }
+};
+
+const copySystemInfo = async () => {
+  if (!systemInfo.value) {
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(systemInfo.value);
+    toast.add({
+      severity: 'success',
+      summary: 'Скопировано',
+      detail: 'Системная информация скопирована в буфер обмена',
+      life: 3000
+    });
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: 'Ошибка',
+      detail: 'Не удалось скопировать информацию',
+      life: 3000
+    });
+  }
+};
+
+watch(showSystemInfoDrawer, (newValue) => {
+  if (newValue && !systemInfo.value) {
+    fetchSystemInfo();
+  }
+});
 
 onMounted(async () => {
   await stats.fetchStats();