Refactor Matrix Calculator Architecture

.gitignore

@@ -12,6 +12,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+server.log
 
 # Editor directories and files
 .idea

src/App.vue

@@ -1,20 +1,80 @@
 <template>
-  <div id="app">
-    <MatrixInput />
+  <div id="app" class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-blue-900 text-gray-100 p-4 md:p-8">
+    <div class="max-w-7xl mx-auto">
+      <AppHeader />
+      <main class="space-y-8">
+        <MatrixInput
+          v-model:matrixSize="matrixSize"
+          v-model:matrixA="matrixA"
+          v-model:matrixB="matrixB"
+          v-model:vectorB="vectorB"
+        />
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <MatrixOperations
+            :calculate-determinant="calculateDeterminant"
+            :add-matrices="addMatrices"
+            :subtract-matrices="subtractMatrices"
+            :multiply-matrices="multiplyMatrices"
+            :solve-linear-equations="solveLinearEquations"
+            :calculate-eigenvalues="calculateEigenvalues"
+            :lu-decomposition="luDecomposition"
+            :qr-decomposition="qrDecomposition"
+            :save-matrix="saveMatrix"
+            :load-matrix="loadMatrix"
+          />
+          <MatrixResult
+            :operation-result="operationResult"
+            :determinant="determinant"
+            :solution="solution"
+            :eigenvalues="eigenvalues"
+            :lu="lu"
+            :qr="qr"
+            :error="error"
+            :format-decomposition="formatDecomposition"
+          />
+        </div>
+      </main>
+      <AppFooter />
+    </div>
   </div>
 </template>
 
-<script>
+<script setup>
+import { provide } from 'vue';
+import AppHeader from './components/AppHeader.vue';
+import AppFooter from './components/AppFooter.vue';
 import MatrixInput from './components/MatrixInput.vue';
+import MatrixOperations from './components/MatrixOperations.vue';
+import MatrixResult from './components/MatrixResult.vue';
+import { useMatrixOperations } from './composables/useMatrixOperations';
 
-export default {
-  components: {
-    MatrixInput,
-  },
-};
-</script>
-
-<style>
+const {
+  matrixSize,
+  matrixA,
+  matrixB,
+  vectorB,
+  operationResult,
+  determinant,
+  solution,
+  eigenvalues,
+  lu,
+  qr,
+  error,
+  calculateDeterminant,
+  addMatrices,
+  subtractMatrices,
+  multiplyMatrices,
+  solveLinearEquations,
+  calculateEigenvalues,
+  luDecomposition,
+  qrDecomposition,
+  saveMatrix,
+  loadMatrix,
+  formatDecomposition
+} = useMatrixOperations();
 
-
-</style>
+provide('matrixSize', matrixSize);
+provide('matrixA', matrixA);
+provide('matrixB', matrixB);
+provide('vectorB', vectorB);
+</script>

src/components/AppFooter.vue

@@ -0,0 +1,8 @@
+<template>
+  <footer class="text-center text-blue-200 mt-12 pb-6">
+    <p>Matrix Calculator &copy; {{ new Date().getFullYear() }} | Perform complex matrix operations with ease</p>
+  </footer>
+</template>
+
+<script setup>
+</script>

src/components/AppHeader.vue

@@ -0,0 +1,13 @@
+<template>
+  <header class="text-center mb-8">
+    <h1 class="text-3xl md:text-4xl font-bold mb-2 flex items-center justify-center gap-3">
+      <i class="fas fa-calculator"></i> Matrix Calculator
+    </h1>
+    <p class="text-blue-200 max-w-2xl mx-auto">
+      Perform matrix operations, solve linear equations, and decompose matrices with this powerful calculator
+    </p>
+  </header>
+</template>
+
+<script setup>
+</script>