Темная тема

frontend/src/views/RequestsView.vue

@@ -1,27 +1,43 @@
 <template>
-  <div class="min-h-screen bg-gray-100">
-    <div class="max-w-4xl mx-auto p-6">
-      <h1 class="text-2xl font-bold text-gray-900 mb-6">Создание заявки</h1>
+  <div class="min-h-screen bg-primary text-primary">
+    <!-- Шапка -->
+    <header class="bg-secondary border-b border-border mb-6">
+      <div class="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
+        <h1 class="text-xl font-semibold">IT Support</h1>
+        <div class="flex items-center space-x-4">
+          <ThemeToggle />
+          <button 
+            @click="handleLogout" 
+            class="text-button-primary hover:text-button-hover transition-colors"
+          >
+            Выйти
+          </button>
+        </div>
+      </div>
+    </header>
 
-      <form @submit.prevent="handleSubmit" class="space-y-6 bg-white shadow-lg rounded-lg p-6">
+    <div class="max-w-4xl mx-auto p-6">
+      <h1 class="text-2xl font-bold mb-6">Создание заявки</h1>
+
+      <form @submit.prevent="handleSubmit" class="space-y-6 bg-card rounded-lg shadow-lg p-6">
         <div>
-          <label for="title" class="block text-sm font-medium text-gray-700">Заголовок</label>
+          <label for="title" class="block text-sm font-medium text-secondary mb-1">Заголовок</label>
           <input
             id="title"
             v-model="formData.title"
             type="text"
-            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
             required
             placeholder="Краткое описание проблемы"
           />
         </div>
 
         <div>
-          <label for="department" class="block text-sm font-medium text-gray-700">Отдел</label>
+          <label for="department" class="block text-sm font-medium text-secondary mb-1">Отдел</label>
           <select
             id="department"
             v-model="formData.department"
-            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
             required
           >
             <option value="">Выберите отдел</option>
@@ -33,11 +49,11 @@
         </div>
 
         <div>
-          <label for="request_type" class="block text-sm font-medium text-gray-700">Тип заявки</label>
+          <label for="request_type" class="block text-sm font-medium text-secondary mb-1">Тип заявки</label>
           <select
             id="request_type"
             v-model="formData.request_type"
-            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
             required
           >
             <option value="">Выберите тип</option>
@@ -49,11 +65,11 @@
         </div>
 
         <div>
-          <label for="priority" class="block text-sm font-medium text-gray-700">Приоритет</label>
+          <label for="priority" class="block text-sm font-medium text-secondary mb-1">Приоритет</label>
           <select
             id="priority"
             v-model="formData.priority"
-            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
             required
           >
             <option value="">Выберите приоритет</option>
@@ -65,12 +81,12 @@
         </div>
 
         <div>
-          <label for="description" class="block text-sm font-medium text-gray-700">Описание</label>
+          <label for="description" class="block text-sm font-medium text-secondary mb-1">Описание</label>
           <textarea
             id="description"
             v-model="formData.description"
             rows="4"
-            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
             placeholder="Опишите вашу проблему..."
             required
           ></textarea>
@@ -79,11 +95,11 @@
         <div class="flex justify-end">
           <button
             type="submit"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            class="px-4 py-2 bg-button-primary hover:bg-button-hover text-white font-medium rounded-lg transition-colors"
             :disabled="loading"
           >
-            <span v-if="loading">
-              <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <span v-if="loading" class="flex items-center">
+              <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
               </svg>
@@ -107,16 +123,11 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import axios from 'axios'
+import ThemeToggle from '@/components/ThemeToggle.vue'
 
-interface Employee {
-  id: number
-  first_name: string
-  last_name: string
-  department: string
-  office: string
-}
-
+const router = useRouter()
 const formData = reactive({
   title: '',
   department: '',
@@ -134,7 +145,7 @@ onMounted(() => {
   // Получаем данные сотрудника из localStorage
   const employeeData = localStorage.getItem('employee')
   if (employeeData) {
-    const employee = JSON.parse(employeeData) as Employee
+    const employee = JSON.parse(employeeData)
     formData.employee_id = employee.id
   }
 })
@@ -176,4 +187,61 @@ const handleSubmit = async () => {
     loading.value = false
   }
 }
-</script> 
+
+const handleLogout = () => {
+  localStorage.removeItem('token')
+  localStorage.removeItem('employee')
+  router.push('/login')
+}
+</script>
+
+<style>
+/* Используем CSS переменные для цветов */
+.bg-primary {
+  background-color: var(--color-bg-primary);
+}
+
+.bg-secondary {
+  background-color: var(--color-bg-secondary);
+}
+
+.bg-card {
+  background-color: var(--color-card-bg);
+}
+
+.bg-input {
+  background-color: var(--color-input-bg);
+}
+
+.text-primary {
+  color: var(--color-text-primary);
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.border-border {
+  border-color: var(--color-border);
+}
+
+.border-input-border {
+  border-color: var(--color-input-border);
+}
+
+.bg-button-primary {
+  background-color: var(--color-button-primary);
+}
+
+.hover\:bg-button-hover:hover {
+  background-color: var(--color-button-hover);
+}
+
+.text-button-primary {
+  color: var(--color-button-primary);
+}
+
+.hover\:text-button-hover:hover {
+  color: var(--color-button-hover);
+}
+</style>