pan/HomeOS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Vue 3 project scaffolding with Tailwind, Router, Pinia, and Sidebar

Browse Source 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
walkpan
2026-03-29 21:58:14 +08:00
parent c4d35be54d
commit f02ff5db0c
15 changed files with 2577 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MQTT Home</title>
</head>
<body class="bg-gray-50 min-h-screen">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2380
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
frontend/package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "mqtt-home-frontend",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.0",
"vue-router": "^4.4.0",
"pinia": "^2.2.0",
"@heroicons/vue": "^2.2.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.0",
"vite": "^5.4.0",
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0"
}
}

6
frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

12
frontend/src/App.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="flex min-h-screen">
<Sidebar />
<main class="flex-1 p-6 overflow-auto">
<router-view />
</main>
</div>
</template>
<script setup>
import Sidebar from './components/Sidebar.vue'
</script>

54
frontend/src/components/Sidebar.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<aside class="w-56 bg-white shadow-sm border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<h1 class="text-xl font-bold text-primary-700">MQTT Home</h1>
</div>
<nav class="flex-1 p-2 space-y-1">
<router-link
v-for="item in navItems"
:key="item.path"
:to="item.path"
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors"
:class="isActive(item.path) ? 'bg-primary-50 text-primary-700' : 'text-gray-600 hover:bg-gray-100'"
>
<component :is="item.icon" class="w-5 h-5" />
{{ item.label }}
</router-link>
</nav>
<div class="p-3 border-t border-gray-200">
<div class="flex items-center gap-2 text-xs text-gray-500">
<span class="w-2 h-2 rounded-full" :class="connected ? 'bg-green-500' : 'bg-red-500'"></span>
{{ connected ? 'MQTT 已连接' : 'MQTT 未连接' }}
</div>
</div>
</aside>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { HomeIcon, CpuChipIcon, ServerIcon } from '@heroicons/vue/24/outline'
const route = useRoute()
const connected = ref(false)
const navItems = [
{ path: '/dashboard', label: '仪表盘', icon: HomeIcon },
{ path: '/devices', label: '设备管理', icon: CpuChipIcon },
{ path: '/broker', label: 'Broker', icon: ServerIcon },
]
function isActive(path) {
return route.path.startsWith(path) && path !== '/'
}
onMounted(async () => {
try {
const res = await fetch('/health')
const data = await res.json()
connected.value = data.mqtt_connected
} catch {
connected.value = false
}
})
</script>

10
frontend/src/main.js Normal file
View File

@@ -0,0 +1,10 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './style.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

30
frontend/src/router/index.js Normal file
View File

@@ -0,0 +1,30 @@
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', redirect: '/dashboard' },
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('../views/DashboardView.vue'),
},
{
path: '/devices',
name: 'Devices',
component: () => import('../views/DevicesView.vue'),
},
{
path: '/devices/:id',
name: 'DeviceDetail',
component: () => import('../views/DeviceDetailView.vue'),
},
{
path: '/broker',
name: 'Broker',
component: () => import('../views/BrokerView.vue'),
},
],
})
export default router

7
frontend/src/style.css Normal file
View File

@@ -0,0 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

1
frontend/src/views/BrokerView.vue Normal file
View File

@@ -0,0 +1 @@
<template><div>Broker</div></template>

1
frontend/src/views/DashboardView.vue Normal file
View File

@@ -0,0 +1 @@
<template><div>Dashboard</div></template>

1
frontend/src/views/DeviceDetailView.vue Normal file
View File

@@ -0,0 +1 @@
<template><div>Device Detail</div></template>

1
frontend/src/views/DevicesView.vue Normal file
View File

@@ -0,0 +1 @@
<template><div>Devices</div></template>

18
frontend/tailwind.config.js Normal file
View File

@@ -0,0 +1,18 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts}'],
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
},
},
},
},
plugins: [],
}

20
frontend/vite.config.js Normal file
View File

@@ -0,0 +1,20 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8000',
'/ws': {
target: 'http://localhost:8000',
ws: true,
},
'/health': 'http://localhost:8000',
},
},
build: {
outDir: 'dist',
},
})