335 lines
9.6 KiB
Markdown
335 lines
9.6 KiB
Markdown
# 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 - 抽丝剥茧，真相大白！* ✨🔧
|