build(frontend): Phase 2 — scaffold Vite + Vue 3 + AD-Vue 4

Adds a frontend/ directory that lives alongside the legacy web/html/
Vue 2 templates during the migration. Vite builds into ../web/dist/
so the Go binary will be able to embed the result via embed.FS once
Phase 4 starts moving real pages over.

- package.json pins Vue 3.5, Ant Design Vue 4.2, Vite 6, vue-i18n 10
- vite.config.js: dev server on :5173 with API proxy to the Go panel
  on :2053; build output to ../web/dist/
- src/App.vue is currently a smoke-test placeholder — delete once the
  first real page (login) lands in Phase 4
- node_modules and dist are already ignored at repo root

To verify locally:
  cd frontend && npm install && npm run dev

Pages will be migrated one at a time on the vue3-migration branch.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MHSanaei
2026-05-08 10:36:03 +02:00
parent f874060a4d
commit 179c025250
7 changed files with 183 additions and 0 deletions
+48
View File
@@ -0,0 +1,48 @@
<script setup>
import { ref } from 'vue';
const message = ref('Vue 3 + Ant Design Vue 4 scaffold is alive');
const count = ref(0);
</script>
<template>
<a-layout class="layout">
<a-layout-header class="header">
<h1>3x-ui (vue3-migration scaffold)</h1>
</a-layout-header>
<a-layout-content class="content">
<a-space direction="vertical" :size="16" style="width: 100%">
<a-alert :message="message" type="success" show-icon />
<a-card title="Smoke test">
<p>If you see this card with a styled button below, the toolchain works.</p>
<a-space>
<a-button type="primary" @click="count++">Clicked {{ count }} times</a-button>
<a-button @click="count = 0">Reset</a-button>
</a-space>
</a-card>
</a-space>
</a-layout-content>
</a-layout>
</template>
<style>
.layout {
min-height: 100vh;
}
.header {
background: #001529;
color: #fff;
display: flex;
align-items: center;
padding: 0 24px;
}
.header h1 {
color: #fff;
margin: 0;
font-size: 18px;
}
.content {
padding: 24px;
background: #f0f2f5;
}
</style>
+9
View File
@@ -0,0 +1,9 @@
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import App from './App.vue';
const app = createApp(App);
app.use(Antd);
app.mount('#app');