update index.html

index.html

@@ -568,56 +568,147 @@
         welcome: {
           title: "欢迎页面",
           content: "welcome",
+          hash: "#welcome",
         },
         calculator: {
           title: "电费计算器",
           url: "electricity_calculator.html",
+          hash: "#calculator",
         },
         number: {
           title: "程序员计算器",
           url: "number.html",
+          hash: "#number",
         },
         color: {
           title: "颜色选择器",
           url: "color_pick.html",
+          hash: "#color",
         },
         json: {
           title: "JSON 格式化",
           url: "json_formatter.html",
+          hash: "#json",
         },
         other: {
           title: "其他功能",
           url: "other_function.html",
+          hash: "#other",
         },
       };
 
       const mainContent = document.getElementById("main-content");
+      let currentTool = "welcome";
 
       // 工具切换功能
       allToolItems.forEach((item) => {
-        item.addEventListener("click", function () {
+        item.addEventListener("click", function (e) {
+          e.preventDefault();
           const toolName = this.dataset.tool;
 
-          // 更新活动状态
-          allToolItems.forEach((i) => i.classList.remove("active"));
-          this.classList.add("active");
-
-          // 加载对应工具
-          loadTool(toolName);
+          // 更新URL和加载工具
+          navigateToTool(toolName);
         });
       });
 
       // 首页标题点击事件
-      homeTitle.addEventListener("click", function () {
-        // 更新活动状态
-        allToolItems.forEach((i) => i.classList.remove("active"));
-
-        // 加载首页内容
-        loadTool("welcome");
+      homeTitle.addEventListener("click", function (e) {
+        e.preventDefault();
+        navigateToTool("welcome");
       });
 
-      function loadTool(toolName) {
+      // 页面加载时检查URL hash
+      window.addEventListener("DOMContentLoaded", function () {
+        handleInitialHash();
+      });
+
+      // 监听浏览器前进后退
+      window.addEventListener("popstate", function (e) {
+        if (e.state && e.state.tool) {
+          loadTool(e.state.tool, true);
+        } else {
+          // 处理直接通过hash访问的情况
+          const toolName = getToolFromHash();
+          if (toolName) {
+            loadTool(toolName, true);
+          } else {
+            loadTool("welcome", true);
+          }
+        }
+      });
+
+      // 监听hash变化
+      window.addEventListener("hashchange", function () {
+        const toolName = getToolFromHash();
+        if (toolName && toolName !== currentTool) {
+          loadTool(toolName, true);
+        }
+      });
+
+      // 处理初始页面加载时的hash
+      function handleInitialHash() {
+        const toolName = getToolFromHash();
+        if (toolName) {
+          loadTool(toolName, true);
+        } else {
+          loadTool("welcome", true);
+        }
+      }
+
+      // 从URL hash获取工具名称
+      function getToolFromHash() {
+        const hash = window.location.hash.slice(1); // 移除#符号
+        for (const [key, tool] of Object.entries(tools)) {
+          if (tool.hash === "#" + hash || key === hash) {
+            return key;
+          }
+        }
+        return null;
+      }
+
+      // 导航到指定工具
+      function navigateToTool(toolName) {
         const tool = tools[toolName];
+        if (!tool) return;
+
+        // 更新浏览器地址栏和历史记录
+        if (toolName === "welcome") {
+          // 清除hash，只保留基础URL
+          history.pushState(
+            { tool: toolName },
+            tool.title,
+            window.location.pathname,
+          );
+        } else {
+          // 设置hash
+          history.pushState({ tool: toolName }, tool.title, tool.hash);
+        }
+
+        // 加载工具
+        loadTool(toolName, true);
+      }
+
+      function loadTool(toolName, updateActive = true) {
+        const tool = tools[toolName];
+        if (!tool) return;
+
+        currentTool = toolName;
+
+        // 更新活动状态
+        if (updateActive) {
+          allToolItems.forEach((i) => i.classList.remove("active"));
+
+          // 激活对应的工具项
+          const targetItem = document.querySelector(
+            `[data-tool="${toolName}"]`,
+          );
+          if (targetItem) {
+            targetItem.classList.add("active");
+          }
+        }
+
+        // 更新页面标题
+        document.title = tool.title + " - 功能工具箱";
 
         if (toolName === "welcome") {
           // 显示欢迎页面
@@ -634,12 +725,14 @@
                   <span class="feature-tag">⚡ 快速响应</span>
                   <span class="feature-tag">📱 响应式设计</span>
                   <span class="feature-tag">🔒 数据安全</span>
+                  <span class="feature-tag">🔗 支持直接链接分享</span>
                 </div>
               </div>
 
               <div class="tool-preview" style="margin-top: 30px; border-left-color: #e74c3c;">
                 <h3>🚀 使用说明</h3>
                 <p>点击左侧的工具名称即可在右侧区域打开对应工具。所有数据都在本地处理，不会上传到服务器，保护您的隐私安全。</p>
+                <p style="margin-top: 10px;"><strong>分享链接：</strong>每个工具都有独立的URL，您可以直接复制地址栏链接分享给他人。</p>
               </div>
 
               <div class="tool-preview" style="margin-top: 30px; border-left-color: #27ae60;">