Migrate web UI to Vue 3/Nuxt 4 for modular structure

.github/workflows/build-gui-cli.yml

@@ -3,18 +3,18 @@ name: Build and Release GUI and CLI
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
   workflow_dispatch:
     inputs:
       version:
-        description: 'Release Version (e.g., v3.1)'
+        description: "Release Version (e.g., v3.1)"
         required: true
       update_jsons_only:
-        description: 'Only update the JSONs and Changelog (skip build and release)'
+        description: "Only update the JSONs and Changelog (skip build and release)"
         type: boolean
         default: false
       only_build_update_zip:
-        description: 'Only build the update ZIP (skip rootfs and full ZIP)'
+        description: "Only build the update ZIP (skip rootfs and full ZIP)"
         type: boolean
         default: false
 
@@ -34,6 +34,10 @@ jobs:
           ref: main
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
 
       - name: Install dependencies
         run: sudo apt update && sudo apt install -y jq
@@ -112,7 +116,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: ${{ matrix.branch }}
-          fetch-depth: 0  # Fetch all history for proper tag comparison
+          fetch-depth: 0 # Fetch all history for proper tag comparison
 
       - name: Install dependencies
         run: sudo apt update && sudo apt install -y rsync python3

.gitignore

@@ -1,3 +1,8 @@
 *.tar*
 *.zip
 *.conf
+
+**/.nuxt
+**/.output
+**/dist
+**/node_modules

build_zip.sh

@@ -2,7 +2,7 @@
 set -e
 
 # Check for required dependencies
-deps=("rsync" "python3")
+deps=("rsync" "python3" "bun")
 for dep in "${deps[@]}"; do
     if ! command -v "$dep" >/dev/null 2>&1; then
         echo "$dep is required but not installed."
@@ -44,8 +44,18 @@ rm -f "$ZIP_NAME"
 
 TMP_DIR=$(mktemp -d)
 
+# Build webroot
+cd webroot
+bun i
+bun run generate
+cd ..
+
 # Copy all files except excluded
-rsync -a --exclude='.git*' --exclude='Screenshots' --exclude='Docker' --exclude='CHANGELOG.md' --exclude='out' --exclude='update-*.json' --exclude='update_meta.sh' --exclude='build_zip.sh' "$PWD/" "$TMP_DIR/"
+rsync -a --exclude='.git*' --exclude='node_modules' --exclude='Screenshots' --exclude='Docker' --exclude='CHANGELOG.md' --exclude='out' --exclude='update-*.json' --exclude='update_meta.sh' --exclude='build_zip.sh' "$PWD/" "$TMP_DIR/"
+
+# Replace webroot/app with built .output
+rm -rf "$TMP_DIR/webroot"
+cp -r webroot/.output/public "$TMP_DIR/webroot"
 
 # For update builds, remove tar.gz files and add update marker
 if [ "$UPDATE_FLAG" = "--update" ]; then

tools/chroot.sh

@@ -22,6 +22,7 @@ HOLDER_PID_FILE="${BASE_CHROOT_DIR}/holder.pid"
 SILENT=0
 SKIP_POST_EXEC=0
 CHROOT_SETUP_IN_PROGRESS=0
+NO_AUTO_START=0
 
 # --- Debug mode ---
 LOGGING_ENABLED=${LOGGING_ENABLED:-0}
@@ -71,6 +72,7 @@ usage() {
     echo "  [user]        Username to log in as (default: root)."
     echo "  --no-shell    Setup chroot without entering an interactive shell."
     echo "  --skip-post-exec  Skip running post-execution scripts."
+    echo "  --no-auto-start  Prevent automatic chroot startup for commands."
     echo "  -s            Silent mode (suppress informational output)."
     exit 1
 }
@@ -139,7 +141,7 @@ run_in_chroot() {
     local command="$*"
 
     # Ensure chroot is started if not running - but prevent recursion during setup
-    if [ "$CHROOT_SETUP_IN_PROGRESS" -eq 0 ]; then
+    if [ "$CHROOT_SETUP_IN_PROGRESS" -eq 0 ] && [ "$NO_AUTO_START" -eq 0 ]; then
         if ! is_chroot_running; then
             log "Starting chroot for command execution..."
             start_chroot > /dev/null 2>&1 || {
@@ -773,11 +775,35 @@ show_status() {
     fi
 }
 
+show_raw_status() {
+    if is_chroot_running; then
+        echo "RUNNING"
+    else
+        echo "STOPPED"
+    fi
+}
+
 list_users() {
+    if [ "$NO_AUTO_START" -eq 1 ] && ! is_chroot_running; then
+        echo ""
+        return
+    fi
     run_in_chroot "awk -F: '\$3 >= 1000 && \$3 < 65534 {print \$1}' /etc/passwd 2>/dev/null | tr '\n' ',' | sed 's/,$//'"
 }
 
+check_existing() {
+    if [ -d "$CHROOT_PATH" ] || [ -f "$ROOTFS_IMG" ]; then
+        echo "exists"
+    else
+        echo "not_exists"
+    fi
+}
+
 run_command() {
+    if [ "$NO_AUTO_START" -eq 1 ] && ! is_chroot_running; then
+        error "Chroot is not running and auto-start is disabled"
+        return 1
+    fi
     local command="$*"
     run_in_chroot "$command"
 }
@@ -1157,11 +1183,12 @@ WEBUI_MODE=0
 
 for arg in "$@"; do
     case "$arg" in
-        start|stop|restart|status|umount|fstrim|backup|restore|uninstall|list-users|run|resize)
+        start|stop|restart|status|raw-status|umount|fstrim|backup|restore|uninstall|list-users|run|resize|check_existing)
             COMMAND="$arg" ;;
         --no-shell) NO_SHELL_FLAG=1 ;;
         --webui) WEBUI_MODE=1 ;;
         --skip-post-exec) SKIP_POST_EXEC=1 ;;
+        --no-auto-start) NO_AUTO_START=1 ;;
         -s) SILENT=1 ;;
         -h|--help) usage ;;
         -*) echo "Unknown option: $arg"; usage ;;
@@ -1191,6 +1218,7 @@ case "$COMMAND" in
         if [ "$NO_SHELL_FLAG" -eq 0 ]; then enter_chroot "$USER_ARG"; else log "Chroot setup complete (no-shell mode). Use 'sh $0 start' to enter."; fi
         ;;
     status) show_status ;;
+    raw-status) show_raw_status ;;
     umount)
         log "Umounting chroot filesystems..."; umount_chroot; log "Chroot filesystems unmounted successfully." ;;
     fstrim)
@@ -1221,5 +1249,6 @@ case "$COMMAND" in
             exit 1
         fi
         resize_sparse "$RESIZE_SIZE" ;;
+    check_existing) check_existing ;;
     *) error "Invalid command: $COMMAND"; usage ;;
 esac

webroot/app/app.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </div>
+</template>
+
+<script setup>
+import "@/assets/css/light.css";
+import "@/assets/css/dark.css";
+import "@/assets/css/animations.css";
+</script>
+>

webroot/app/assets/css/animations.css

@@ -0,0 +1,80 @@
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 8px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes chunkFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dotFill {
+  0%,
+  20.1%,
+  100% {
+    opacity: 0.3;
+  }
+  0.1%,
+  20% {
+    opacity: 1;
+  }
+}
+
+.loading-dot {
+  animation: dotFill 3.75s infinite;
+}
+
+.loading-dot:nth-child(1) {
+  animation-delay: 0s;
+}
+.loading-dot:nth-child(2) {
+  animation-delay: 0.75s;
+}
+.loading-dot:nth-child(3) {
+  animation-delay: 1.5s;
+}
+.loading-dot:nth-child(4) {
+  animation-delay: 2.25s;
+}
+.loading-dot:nth-child(5) {
+  animation-delay: 3s;
+}
+
+.console > div.progress-indicator.log-immediate {
+  animation: pulse 1.5s ease-in-out infinite !important;
+}
+
+.console > div.log-immediate {
+  animation: none;
+}
+
+.console > div.log-chunk-fade {
+  animation: chunkFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.console > div.log-fade-in {
+  animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.console .progress-indicator {
+  animation: pulse 1.5s ease-in-out infinite;
+}