Initial commit

2026-06-30 15:14:37 +08:00
commit 15dab96872
311 changed files with 95639 additions and 0 deletions
@@ -0,0 +1,334 @@
+# MeshRay - 首页编译追踪报告
+
+**追踪时间**: 2026-03-24  
+**追踪目标**: 确认编译后首页对应的源码页面
+
+---
+
+## 🎯 **核心结论**
+
+### ✅ **首页 = 登录页**
+
+**访问路径**: `http://localhost:9531/`  
+**对应源码**: [`web/src/views/Login.vue`](file://e:\Project\MeshRay\web\src\views\Login.vue)  
+**编译产物**: 
+- JS: `web/dist/assets/Login-DB9x1P_y.js`
+- CSS: `web/dist/assets/Login-DB9x1P_y.css`
+
+---
+
+## 📊 **完整的路由映射**
+
+### 1️⃣ **路由配置** (`web/src/router/index.js`)
+
+```javascript
+const routes = [
+  {
+    path: '/login',              // ✅ 登录页路由
+    name: 'Login',
+    component: () => import('@/views/Login.vue')  // ← 导入 Login.vue
+  },
+  {
+    path: '/',                   // ✅ 首页（根路径）
+    redirect: '/login'           // ← 重定向到登录页
+  }
+]
+```
+
+**流程**:
+```mermaid
+graph LR
+    A[访问 /] --> B[路由匹配]
+    B --> C[执行 redirect: '/login']
+    C --> D[加载 /login 路由]
+    D --> E[导入 @/views/Login.vue]
+    E --> F[显示登录页面]
+```
+
+---
+
+### 2️⃣ **源码验证** (`web/src/views/Login.vue`)
+
+**文件位置**: [`web/src/views/Login.vue`](file://e:\Project\MeshRay\web\src\views\Login.vue)
+
+**关键特征**:
+```vue
+<template>
+  <div class="login-container">  ✅ 特征 class
+    <el-card class="login-card" shadow="always">
+      <div class="logo">
+        <el-icon :size="48"><Connection /></el-icon>
+        <h1>MeshRay</h1>  ✅ 标题
+      </div>
+      
+      <el-form ...>
+        <el-form-item label="用户名">  ✅ 用户名字段
+        <el-form-item label="密码">    ✅ 密码字段
+        <el-button type="primary">登录</el-button>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  ✅ 渐变背景
+}
+
+.login-card {
+  width: 450px;
+  padding: 20px;
+}
+</style>
+```
+
+---
+
+### 3️⃣ **编译产物验证**
+
+#### JS 文件：[`web/dist/assets/Login-DB9x1P_y.js`](file://e:\Project\MeshRay\web\dist\assets\Login-DB9x1P_y.js)
+
+**编译后的代码特征**（已压缩）:
+
+```javascript
+import{n as e,F as l,E as a}from"./element-plus-CWITzeOz.js";
+import{_ as t}from"./_plugin-vue_export-helper-BCo6x5W8.js";
+import{k as u,H as o,L as n,M as r,O as s,P as d,u as i,Y as p,V as v,I as c,Z as m,X as g,ag as f,e as b,ah as _,c as h}from"./vue-vendor-BBChLKcR.js";
+
+const w={class:"login-container"},  // ✅ 特征 class
+      y={class:"logo"},             // ✅ logo class
+      V=t({__name:"Login",setup(_){  // ✅ 组件名：Login
+        const v=o(),y=I(),          // router 和 store
+        S=h(null),j=h(!1),x=h(!0),  // formRef, loading, loginHint
+        V=c({username:"",password:""}),  // ✅ 表单数据
+        z={username:[{required:!0,message:"请输入用户名",trigger:"blur"}],  // ✅ 验证规则
+           password:[{required:!0,message:"请输入密码",trigger:"blur"},
+                    {min:6,message:"密码长度至少 6 位",trigger:"blur"}]},
+        q=async()=>{  // handleLogin
+          try{await S.value.validate(),j.value=!0,
+              await y.login(V.username,V.password),
+              w.success("登录成功"),
+              v.push("/dashboard")}  // ✅ 跳转到 dashboard
+          catch(e){...}
+          finally{j.value=!1}
+        };
+        return(o,c)=>{
+          const h=s("el-icon"),w=s("el-input"),_=s("el-form-item"),
+                v=s("el-button"),y=s("el-alert"),I=s("el-form"),L=s("el-card");
+          return t(),e("div",w,[  // ✅ 渲染 login-container
+            a(L,{class:"login-card",shadow:"always"},{
+              default:r(()=>[
+                l("div",y,[  // ✅ logo div
+                  a(h,{size:48},{default:r(()=>[a(n(p))]),_:1}),
+                  c[2]||(c[2]=l("h1",null,"MeshRay",-1))  // ✅ MeshRay 标题
+                ]),
+                a(I,{ref_key:"formRef",ref:S,model:V,rules:z,...},...)
+              ]),_:1
+            })
+          ])
+        }
+      }},[["__scopeId","data-v-c11fdd16"]]);  // ✅ 作用域 ID
+
+export{V as default};
+```
+
+**证据**:
+- ✅ `class:"login-container"` 匹配源码
+- ✅ `class:"logo"` 匹配源码
+- ✅ `__name:"Login"` 组件名
+- ✅ `{username:"",password:""}` 表单字段
+- ✅ "请输入用户名"、"请输入密码" 验证提示
+- ✅ `v.push("/dashboard")` 登录后跳转
+- ✅ `"MeshRay"` 标题
+
+---
+
+#### CSS 文件：[`web/dist/assets/Login-DB9x1P_y.css`](file://e:\Project\MeshRay\web\dist\assets\Login-DB9x1P_y.css)
+
+**编译后的样式**（已压缩）:
+
+```css
+.login-container[data-v-c11fdd16]{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  min-height:100vh;
+  background:linear-gradient(135deg,#667eea,#764ba2)  /* ✅ 渐变背景 */
+}
+
+.login-card[data-v-c11fdd16]{
+  width:450px;
+  padding:20px
+}
+
+.login-card .logo[data-v-c11fdd16]{
+  text-align:center;
+  margin-bottom:30px
+}
+
+.login-card .logo .el-icon[data-v-c11fdd16]{
+  color:#409eff
+}
+
+.login-card .logo h1[data-v-c11fdd16]{
+  margin-top:10px;
+  font-size:32px;
+  color:#303133
+}
+```
+
+**证据**:
+- ✅ `.login-container` 完全匹配源码
+- ✅ `.login-card` 宽度 450px、padding 20px
+- ✅ `.logo` 居中对齐、margin-bottom 30px
+- ✅ `h1` 字体大小 32px、颜色 #303133
+- ✅ `[data-v-c11fdd16]` Vue 作用域 ID
+
+---
+
+### 4️⃣ **HTML 入口** ([`web/dist/index.html`](file://e:\Project\MeshRay\web\dist\index.html))
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MeshRay - 简单、高效异地组网</title>
+    
+    <!-- ✅ 入口 JS 文件 -->
+    <script type="module" crossorigin src="/assets/index-AIAUiq89.js"></script>
+    
+    <!-- ✅ 依赖预加载 -->
+    <link rel="modulepreload" crossorigin href="/assets/vue-vendor-BBChLKcR.js">
+    <link rel="modulepreload" crossorigin href="/assets/element-plus-CWITzeOz.js">
+    
+    <!-- ✅ 样式文件 -->
+    <link rel="stylesheet" crossorigin href="/assets/index-JLRO43JB.css">
+  </head>
+  <body>
+    <div id="app"></div>  <!-- ✅ Vue 应用挂载点 -->
+  </body>
+</html>
+```
+
+**加载流程**:
+```mermaid
+sequenceDiagram
+    participant Browser as 浏览器
+    participant Server as Go 服务器
+    participant Embed as embed.FS
+    
+    Browser->>Server: GET /
+    Server->>Embed: Open("index.html")
+    Embed-->>Server: HTML 内容
+    Server->>Browser: 返回 index.html
+    Browser->>Server: GET /assets/index-AIAUiq89.js
+    Server->>Embed: Open("assets/index-AIAUiq89.js")
+    Embed-->>Server: JS 内容
+    Server->>Browser: application/javascript
+    Browser->>Browser: 执行 Vue 应用
+    Browser->>Server: GET /assets/Login-DB9x1P_y.js
+    Server->>Embed: Open("assets/Login-DB9x1P_y.js")
+    Embed-->>Server: Login 组件
+    Server->>Browser: Login 组件 JS
+    Browser->>Browser: 渲染登录页面 ✅
+```
+
+---
+
+## 🔍 **完整的编译映射表**
+
+| 源码 | 编译产物 | 说明 |
+|------|----------|------|
+| `src/views/Login.vue` | `assets/Login-DB9x1P_y.js` + `.css` | ✅ 登录页面 |
+| `src/views/Dashboard.vue` | `assets/Dashboard-DSsX0xA1.js` + `.css` | 仪表盘 |
+| `src/views/Networks/List.vue` | `assets/device-0MIz2MNw.js` | 网络列表 |
+| `src/views/Monitor/Logs.vue` | `assets/Logs-DhsQParu.js` | 日志监控 |
+| `src/main.js` | `assets/index-AIAUiq89.js` | 应用入口 |
+| `src/App.vue` | 合并到 `index-AIAUiq89.js` | 根组件 |
+| `src/router/index.js` | 合并到 `vue-vendor-BBChLKcR.js` | 路由配置 |
+
+---
+
+## 📋 **验证清单**
+
+### ✅ Login.vue 源码特征
+
+- [x] `class="login-container"` 
+- [x] `class="logo"` + `<h1>MeshRay</h1>`
+- [x] 表单字段：`username`, `password`
+- [x] 验证提示："请输入用户名"、"请输入密码"
+- [x] 渐变背景：`linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
+- [x] 卡片宽度：`450px`
+- [x] 登录后跳转：`router.push('/dashboard')`
+
+---
+
+### ✅ 编译产物特征
+
+- [x] `class:"login-container"` 在 JS 中
+- [x] `__name:"Login"` 组件名
+- [x] `.login-container[data-v-c11fdd16]` 在 CSS 中
+- [x] `background:linear-gradient(135deg,#667eea,#764ba2)` 在 CSS 中
+- [x] `width:450px` 在 CSS 中
+- [x] "请输入用户名" 验证规则在 JS 中
+
+---
+
+### ✅ 路由配置验证
+
+- [x] `/` 重定向到 `/login`
+- [x] `/login` 导入 `@/views/Login.vue`
+- [x] 路由守卫：未登录访问任意页面 → 跳转到 `/login`
+- [x] 登录成功后 → 跳转到 `/dashboard`
+
+---
+
+## 🎯 **最终结论**
+
+### **首页对应的源码页面**: 
+
+**[`web/src/views/Login.vue`](file://e:\Project\MeshRay\web\src\views\Login.vue)** ✅
+
+**编译产物**:
+- JS: [`web/dist/assets/Login-DB9x1P_y.js`](file://e:\Project\MeshRay\web\dist\assets\Login-DB9x1P_y.js)
+- CSS: [`web/dist/assets/Login-DB9x1P_y.css`](file://e:\Project\MeshRay\web\dist\assets\Login-DB9x1P_y.css)
+
+**访问流程**:
+```
+用户访问 http://localhost:9531/
+  ↓
+路由器匹配到 redirect: '/login'
+  ↓
+加载 /login 路由
+  ↓
+动态导入 Login.vue
+  ↓
+Vite 编译后的 Login-DB9x1P_y.js 被加载
+  ↓
+Vue 渲染登录页面
+  ↓
+显示 "MeshRay" Logo + 登录表单 ✅
+```
+
+---
+
+## 💡 **关键证据链**
+
+1. **路由配置** → `/` 重定向到 `/login`
+2. **路由定义** → `/login` 导入 `Login.vue`
+3. **编译产物** → `Login-DB9x1P_y.js` 包含 Login 组件代码
+4. **样式文件** → `Login-DB9x1P_y.css` 包含登录页样式
+5. **实际测试** → curl 返回的 HTML 包含登录页引用的 JS
+
+**证据确凿，无可辩驳！** ✅
+
+---
+
+*MeshRay - 抽丝剥茧，真相大白！* ✨🔧