Add Vite+Vue app: docker/traefik, pug, router, Public/Dashboard, public assets, README

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.DS_Store
+*.log

a.html

@@ -0,0 +1 @@
+<img src="index.jpg">

docker-compose.yaml

@@ -0,0 +1,22 @@
+services:
+  app:
+    image: node:lts-alpine
+    container_name: tsa-app
+    working_dir: /app
+    restart: unless-stopped
+    volumes:
+      - .:/app
+    command: sh -c "npm install && npm run dev"
+    labels:
+      - traefik.enable=true
+      - traefik.docker.network=zorro-bpm
+      - traefik.http.routers.tsa.rule=Host(`app.telecom.quest`)
+      - traefik.http.routers.tsa.entrypoints=web
+      - traefik.http.routers.tsa.service=tsa
+      - traefik.http.services.tsa.loadbalancer.server.port=5173
+    networks:
+      - zorro-bpm
+
+networks:
+  zorro-bpm:
+    external: true

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TSA</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "tsa",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 5173"
+  },
+  "dependencies": {
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "latest",
+    "pug": "latest",
+    "vite": "latest"
+  }
+}

src/App.vue

@@ -0,0 +1,6 @@
+<template lang="pug">
+router-view
+</template>
+
+<script setup>
+</script>

src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from "vue"
+import App from "./App.vue"
+import router from "./router"
+createApp(App).use(router).mount("#app")

src/router.js

@@ -0,0 +1,11 @@
+import { createRouter, createWebHistory } from "vue-router"
+import Public from "./views/Public.vue"
+import Dashboard from "./views/Dashboard.vue"
+
+export default createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: "/", component: Public },
+    { path: "/dashboard", component: Dashboard }
+  ]
+})

src/views/Dashboard.vue

@@ -0,0 +1,29 @@
+<template lang="pug">
+main.wrap
+  h1 Dashboard 123
+  p Vue {{ version }} · TSA
+  .grid
+    .card(v-for="c in cards" :key="c.label")
+      .num {{ c.val }}
+      .lbl {{ c.label }}
+  router-link.back(to="/") ← Public
+</template>
+
+<script setup>
+import { version } from "vue"
+const cards = [
+  { label: "Users", val: 128 },
+  { label: "Sessions", val: 42 },
+  { label: "Errors", val: 3 }
+]
+</script>
+
+<style scoped>
+.wrap{font-family:system-ui;min-height:100vh;padding:2rem;color:#213547}
+h1{color:#42b883;margin-top:0}
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:1.5rem}
+.card{background:#f4f4f5;border-radius:12px;padding:1.5rem;text-align:center}
+.num{font-size:2.5rem;font-weight:700;color:#42b883}
+.lbl{color:#666;margin-top:.25rem}
+.back{display:inline-block;margin-top:2rem;color:#42b883;text-decoration:none}
+</style>

src/views/Public.vue

@@ -0,0 +1,12 @@
+<template lang="pug">
+.public
+  router-link.enter(to="/dashboard") Dashboard →
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.public{min-height:100vh;background:url("/index.jpg") center/cover no-repeat fixed}
+.enter{position:fixed;right:1.5rem;bottom:1.5rem;padding:.6rem 1.2rem;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;text-decoration:none;font-family:system-ui}
+</style>

vite.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: "0.0.0.0",
+    port: 5173,
+    strictPort: true,
+    allowedHosts: ["app.telecom.quest", "localhost", ".telecom.quest"],
+    watch: { usePolling: true }
+  }
+})