feat: implementa estrutura base da aplicação com navegação e tema escuro

- Configura HTML principal com tema escuro e idioma português - Adiciona Vue Router com rotas para Dashboard e Seções - Cria componentes de navegação: SidePanel e NavButton - Implementa páginas Dashboard e Sections - Configura sistema de cores personalizado no Tailwind CSS - Estabelece layout principal com painel lateral de navegação - Remove componente HelloWorld padrão do template
2025-08-14 12:17:32 -03:00 · 2025-08-14 12:17:32 -03:00 · eec21b7118
parent 63257b987f
commit eec21b7118
13 changed files with 149 additions and 58 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,16 @@
 <!doctype html>
-<html lang="en">
+<html lang="pt-BR" data-theme="dark">
+
 <head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS</title>
 </head>
+
 <body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
 </body>
+
 </html>
--- a/package.json
+++ b/package.json
@ -9,7 +9,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "vue": "^3.5.18"
+    "vue": "^3.5.18",
+    "vue-router": "4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
--- a/router.ts
+++ b/router.ts
@ -0,0 +1,22 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import Dashboard from './src/pages/Dashboard.vue';
+import Sections from './src/pages/Sections.vue';
+const routes = [
+    {
+        path: '/',
+        name: 'dashboard',
+        component: Dashboard
+    },
+    {
+        path: '/sections',
+        name: 'Seções',
+        component: Sections
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes
+})
+
+export default router;
--- a/src/App.vue
+++ b/src/App.vue
@ -1,5 +1,14 @@
 <script setup lang="ts">
+import SidePanel from './components/SidePanel.vue';
+
+
 </script>

 <template>
+  <div class="flex">
+    <SidePanel />
+    <main class="flex-1">
+      <RouterView />
+    </main>
+  </div>
 </template>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
--- a/src/components/NavButton.vue
+++ b/src/components/NavButton.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+interface Props {
+    title: string;
+    isActive: boolean;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <button :class="`text-2xl bg-bg p-2 w-full rounded-lg border-2 border-border 
+        capitalize font-bold hover:bg-cardHover transition duration-150 
+        ${props.isActive ? 'text-accent' : ''}`">
+        {{ props.title }}
+    </button>
+</template>
--- a/src/components/SidePanel.vue
+++ b/src/components/SidePanel.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import NavButton from './NavButton.vue';
+
+const route = useRouter();
+</script>
+
+<template>
+    <div class="h-screen bg-cardBg w-fit p-10 border-r-2 border-border flex flex-col gap-10">
+        <h1 class="text-accent font-bold text-3xl">Omnihit Manager</h1>
+        <div class="flex flex-col gap-3">
+            <RouterLink to="/">
+                <NavButton title="painel" :isActive="true" />
+            </RouterLink>
+            <RouterLink to="/sections">
+                <NavButton title="Seções" :isActive="true" />
+            </RouterLink>
+
+        </div>
+
+    </div>
+</template>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,5 +1,6 @@
 import { createApp } from 'vue'
-import './style.css'
+import router from '../router'
 import App from './App.vue'
+import './style.css'

-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@ -0,0 +1,8 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="bg-bg h-screen text-text">
+    </div>
+</template>
--- a/src/pages/Sections.vue
+++ b/src/pages/Sections.vue
@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <h1 class="text-text">Section</h1>
+</template>
--- a/src/style.css
+++ b/src/style.css
@ -1,3 +1,24 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+:root {
+  --color-bg: #f8f9fa;
+  --color-card-bg: #ffffff;
+  --color-card-hover: #f1f3f5;
+  --color-accent: #fc5700;
+  --color-text: #1a1a1a;
+  --color-text-secondary: #555555;
+  --color-border: #dddddd;
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+  --color-bg: #26292b;
+  --color-card-bg: #151718;
+  --color-card-hover: #1d1f21;
+  --color-accent: #fc5700;
+  --color-text: #f5f5f5;
+  --color-text-secondary: #a0a0a0;
+  --color-border: #333638;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -4,8 +4,19 @@ export default {
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
+  darkMode: ['dark', 'dark-theme="dark"'],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        bg: 'var(--color-bg)',
+        cardBg: 'var(--color-card-bg)',
+        cardHover: 'var(--color-card-hover)',
+        accent: 'var(--color-accent)',
+        text: 'var(--color-text)',
+        textSecondary: 'var(--color-text-secondary)',
+        border: 'var(--color-border)',
+      }
+    },
  },
  plugins: [],
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -414,6 +414,11 @@
    de-indent "^1.0.2"
    he "^1.2.0"

+"@vue/devtools-api@^6.6.4":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/language-core@3.0.5":
  version "3.0.5"
  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-3.0.5.tgz#c296c65e7b2e6d69fbf2088f0208a55362825323"
@ -1304,6 +1309,13 @@ vscode-uri@^3.0.8:
  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.1.0.tgz#dd09ec5a66a38b5c3fffc774015713496d14e09c"
  integrity sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==

+vue-router@4:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.5.1.tgz#47bffe2d3a5479d2886a9a244547a853aa0abf69"
+  integrity sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==
+  dependencies:
+    "@vue/devtools-api" "^6.6.4"
+
 vue-tsc@^3.0.5:
  version "3.0.5"
  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-3.0.5.tgz#2edb2222393fd8b70613c083aacc72484a9296be"