feat: add version display functionality with CSS styling and update script

Author: chenxuan520

static/index.html

@@ -14,6 +14,7 @@
             <div class="header-top">
                 <h1 id="mainTitle">RoadbookMaker</h1>
                 <div id="onlineModeActions" class="online-mode-actions"></div>
+                <span id="version-display"></span>
                 <div class="theme-toggle-container">
                     <button id="themeToggleBtn" class="theme-toggle-btn" title="切换主题">
                         <span id="themeIcon">☀️</span>

static/style.css

@@ -2813,3 +2813,24 @@ body.dark-mode .leaflet-tile {
     text-decoration: underline;
 }
 
+#version-display {
+    display: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1001;
+    right: 170px; /* Calculated: 90px (theme btn right) + 10px (gap) + ~70px (avg version width) */
+}
+
+#version-display.version-visible {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 400;
+    padding: 0.1rem 0.5rem;
+    background-color: rgba(255,255,255,0.2);
+    color: white;
+    border-radius: 8px;
+    vertical-align: middle;
+}
+
+

update_version.sh

@@ -0,0 +1,62 @@
+#!/bin/bash
+
+INDEX_FILE="static/index.html"
+ORIGINAL_SPAN='<span id="version-display"></span>'
+
+# Function to display help message
+display_help() {
+    echo "Usage: $0 [OPTION]"
+    echo ""
+    echo "Update the version string in index.html with the current Git commit hash or tag."
+    echo ""
+    echo "Options:"
+    echo "  reset     Revert index.html to its original state (no version displayed)."
+    echo "  -h, --help  Display this help message."
+    echo ""
+    echo "If no option is provided, the script will update the version string."
+    exit 0
+}
+
+# Argument parsing
+if [ "$1" == "-h" ] || [ "$1" == "--help" ]; then
+    display_help
+fi
+
+# Reset mode: if the first argument is 'reset', revert the span to its original state
+if [ "$1" == "reset" ]; then
+    # This sed command finds the version span (regardless of its content or class)
+    # and replaces it with the original, empty, class-less span.
+    # Using '#' as a delimiter to avoid issues with '/' or '>' in HTML tags
+    sed -i -E 's#<span id="version-display"[^>]*>.*</span>#<span id="version-display"></span>#g' "$INDEX_FILE"
+    echo "Version display has been reset in $INDEX_FILE"
+    exit 0
+fi
+
+# Default mode: Update version
+# Get the git version string using describe for a more readable version
+GIT_VERSION=$(git describe --tags --always)
+if [ -z "$GIT_VERSION" ]; then
+    echo "Error: Not a git repository or no commits yet."
+    exit 1
+fi
+
+# The version string is the git version itself, no 'v' prefix needed here
+VERSION_STRING="$GIT_VERSION"
+
+# Check if the index file exists
+if [ ! -f "$INDEX_FILE" ]; then
+    echo "Error: $INDEX_FILE not found."
+    exit 1
+fi
+
+# Use sed to update the version and add the visibility class.
+# This works by finding the empty version-display span and replacing its outer HTML
+# with the version string and the class attribute.
+sed -i -E 's#<span id="version-display"></span>#<span id="version-display" class="version-visible">'${VERSION_STRING}'</span>#g' "$INDEX_FILE"
+
+echo "Successfully updated version in $INDEX_FILE to $VERSION_STRING"
+
+# A small check to see if it worked.
+if ! grep -q "version-visible" "$INDEX_FILE"; then
+    echo "Warning: Failed to make version visible. The span tag might not have been found correctly."
+fi