验证器广泛使用 CPU 设计中常见的一种优化技术，即流水线。当输入数据流需要通过一系列步骤进行处理，并且每个步骤由不同的硬件负责时，流水线是完成这项工作的正确工具。典型的例子是使用洗衣机和烘干机来洗涤/烘干/折叠几堆衣物。洗涤必须在烘干之前进行，烘干必须在折叠之前进行，但这三个操作中的每一个都由单独的单元执行。为了最大限度地提高效率，人们创建了一个阶段流水线。我们将洗衣机称为一个阶段，烘干机称为另一个阶段，折叠过程称为第三个阶段。要运行该流水线，人们在将第一批衣物放入烘干机后立即将第二批衣物放入洗衣机。同样，在第二批衣物放入烘干机并且第一批衣物折叠完毕后，将第三批衣物放入洗衣机。通过这种方式，人们可以同时洗涤三批衣物。在负载无限的情况下，流水线将始终以流水线中最慢阶段的速率完成负载。



## Solana中的流水线

Solana Validator包含两个流水线进程， 其一名为 **TPU（Transaction Processing Unit）** ，用于作为领导模式；其二名为 **TVU（Transaction Validation Unit）**，用于验证器模式。两种情况下流水线的硬件相同，网络输入、GPU 卡、CPU 核心、磁盘写入以及网络输出。它们对硬件的处理方式不同。TPU 用于创建账本条目，而 TVU 用于验证账本条目。

![80363557f6db629b18ab5ed242fee0e5.png](http://icstudio.top/static/img/f2d6e571ae756b8bdfb3548318ca93d2.80363557f6db629b18ab5ed242fee0e5.webp)

### TPU

当一个验证器成为 Leader，它需要负责处理用户提交的交易并打包成区块，这一过程由 TPU 完成。


![53959c2777d46c540e5886c4961d5037.png](http://icstudio.top/static/img/d182f4045f9b981bf0a7453b792b6db9.53959c2777d46c540e5886c4961d5037.webp)

交易被编码并以 QUIC 流的形式从客户端（网络的其他验证器/用户）发送到验证器，如下所示

- 客户端提交交易（通过 QUIC 协议，带有 pps 限制）。
- Fetch Stage：收集交易数据包。
- SigVerify Stage：验证交易签名，并进行去重。
- Banking Stage：执行交易逻辑，结合 PoH 生成有序的交易记录。
- Broadcast Stage：将打包好的区块分片（shreds）广播到下游验证器。

### Blockstore

Blockstore 是 Solana 验证器（Validator）内部一个非常关键的组件，用来存储和管理分片（shreds）以及在分叉（fork）状态下对账本状态的维护。<br />
在区块被“最终确定”（finalized）之前，会有多个可能的分叉（forks）并存，因为 Leader 的轮换（leader rotation）可能导致某些 slot 没有被打满或者出现多个区块分支。Blockstore 是用来处理这些未最终确定状态期间的所有可能性 —— 即使顺序不同或者分叉，也要能存储、回放、且最终收敛

**shred 与 Blockstore 的基本规则?**

Shred 是 Solana 的数据单位，是 Leader 在打包期间将区块数据切割的分片。每个 shred 带有 slot 信息、shred index。Blockstore 可以接受 任何顺序 的 shred（只要是合法 Leader 签名的）。 <br />
Shreds 存储的 key 是 leader slot + shred index，value 是实际的数据。这个 slot-relative shred index 是每个 slot 内独立编号的。 

<hr />

Blockstore的功能如下：
| 功能                            | 作用                                                                                                                                                           |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **持久化（Persistence）**          | 一旦 shred 被接收并验证签名，就立即存储（persistent），不需要等待 slot 完成。这样保证不会因为网络顺序问题丢数据。                                                                   |
| **修复 / Repair**               | 如果某些 shreds 没有到达（或丢失），Blockstore 能够为这些请求提供重传（repair）。最近的 shreds 从内存或刚写入的文件里找，老的 shreds 则可能需要读深层存储。                                     |
| **支持分叉（Forks）**               | 由于 leader 更换和 slot 可能并不按顺序埋满，会产生分叉。Blockstore 支持“随机访问 shreds”（random access），使验证器可以回滚（rollback）到某 Bank checkpoint，然后从那个点重演（replay）可能的链。  |
| **重启 / 重播（Restart / Replay）** | 在节点重启或从 clean state 恢复时，可以从 slot 0 开始按顺序枚举 entries（通过 shreds 重建 entries），然后重演：特别是最近未 final 的部分，还是需要处理分叉情况。                             |

[1]: https://docs.anza.xyz/validator/blockstore "Blockstore in a Solana Validator | Agave"

### TVU

TVU（交易验证单元）是验证器的逻辑单元，负责在验证器之间传播区块，并确保这些区块的交易到达重放阶段。其主要的外部接口是Turbo协议。

![fa4275f98e4da4722439d62133acb0bd.png](http://icstudio.top/static/img/e69a2fae23f965d60b0cc9c25e476f92.fa4275f98e4da4722439d62133acb0bd.webp)

#### 重传机制


![7e3588b9e3e1ba780c2dc46f17b09a0f.png](http://icstudio.top/static/img/016ff33c7129b90a25c8415ef50f08dd.7e3588b9e3e1ba780c2dc46f17b09a0f.webp)

在复杂的网络环境中，部分分片可能会丢失或损坏。Solana 通过 重传机制 保证数据完整性：

- ShredFilter：过滤无效/重复分片。
- Blockstore：存储分片，供后续 Replay 使用。
- Repair Service：若分片缺失，会主动向其他节点请求补齐。
- Retransmitter：负责将分片再次扩散，保证全网同步。
- Deshredder：将分片重新组装成完整交易记录。

Solana 验证器：从交易提交到共识收敛

LeetCode第十题

Rust基于 NFA（非确定有限自动机） 和 DFA（确定有限自动机）实现**正则匹配引擎**




---

## 1. 总体目标

给定一个字符串 `s` 和一个模式串 `p`，判断 `s` 是否匹配 `p`。

这里的模式串 `p` 规则很简单，只支持：

* `.`  ：匹配任意一个字符
* `*`  ：匹配前一个字符（或 `.`）的 **零次或多次**

---

## 2. 数据结构设计

### Row

```rust
struct Row {
    row: [Option<usize>; 26], // 普通字符的转移
    eps: Option<usize>,       // ε 转移（空串转移）
}
```

* `row[j]` 表示遇到字母 `a + j` 时能跳到的 NFA 状态。
* `eps` 表示从该状态可以“不消耗输入”直接跳到的状态（ε-closure）。

### NFA

```rust
struct NFA {
    rows: Vec<Row>,                       // 状态列表
    start: usize,                         // 起始状态
    end: usize,                           // 接收状态
    eps_reach: HashMap<usize, HashSet<usize>>, // 每个状态的 ε-闭包
}
```

* NFA 支持 ε-转移，因此要预计算所有状态的 ε-闭包（某个状态能在不消耗字符的情况下到达的状态集合）。

### DFA

```rust
struct DFA {
    rows: Vec<[Option<usize>; 26]>, // 转移表（DFA 里没有 ε 转移）
    start: usize,                   // 起始状态
    end: HashSet<usize>,            // 接收状态集合
}
```

* DFA 是通过 **子集构造法（subset construction）** 从 NFA 转换来的。
* 一个 DFA 状态 = 一组 NFA 状态。

---

## 3. 构造 NFA：`NFA::build_nfa`

```rust
while i < p.len() {
    if i+1 < p.len() && p[i+1] == b'*' { 
        // case: 带 *
    } else {
        // case: 单个字符或 '.'
    }
}
```

### 情况 A: `a*`

```rust
rows.push(Row::new());       // 新状态 (cur+1)
rows[cur_state].eps = Some(cur_state + 1); // 从 cur ε 到 cur+1
cur_state += 1;

rows.push(Row::new());       // 再建一个状态 (cur+1)
if p[i] == '.' {
    for j in 0..26 { rows[cur_state].row[j] = Some(cur_state); }
} else {
    rows[cur_state].row[ne] = Some(cur_state);
}
rows[cur_state].eps = Some(cur_state + 1); // 自环 + ε 跳过
cur_state += 1;
i += 2;
```

效果：

```
(cur) -ε-> (loop_state) --c--> (loop_state) -ε-> (next)
```

即：

* 可以直接跳过（零次匹配）。
* 可以在 loop\_state 自循环（多次匹配）。

### 情况 B: `a` 或 `.`

```rust
rows.push(Row::new());
if p[i] == '.' {
    for j in 0..26 { rows[cur_state].row[j] = Some(cur_state + 1); }
} else {
    rows[cur_state].row[ne] = Some(cur_state + 1);
}
cur_state += 1;
i += 1;
```

效果：

```
(cur) --c--> (cur+1)
```

### ε-闭包计算

```rust
for cur in (0..=cur_state).rev() {
    let mut eps_reach = HashSet::from([cur]);
    if let Some(ne) = rows[cur].eps {
        eps_reach.extend(_cache_eps_reach[&ne].iter());
    }
    _cache_eps_reach.insert(cur, eps_reach);
}
```

* 从后往前计算：一个状态的 ε-闭包 = 自己 + 它 ε 指向的状态的闭包。
* 存到 `eps_reach` 中。

---

## 4. NFA → DFA 转换：`DFA::build_dfa`

核心思想是 **子集构造法**：

* 一个 DFA 状态 = 一组 NFA 状态（+它们的 ε-闭包）。

```rust
let mut state_list: Vec<HashSet<usize>> = vec![nfa.eps_reach[&nfa.start].clone()];
```

* DFA 初始状态 = NFA 起始状态的 ε-闭包。

#### 遍历每个 DFA 状态

```rust
while i < state_list.len() {
    let mut row: [Option<usize>; 26] = [None; 26];
    for c in 0..26 {
        let mut next_state_list: HashSet<usize> = HashSet::new();
        for cur in state_list[i].iter() {
            if let Some(next) = nfa.rows[*cur].row[c] {
                next_state_list.insert(next);
                next_state_list.extend(nfa.eps_reach[&next].iter());
            }
        }
        if !next_state_list.is_empty() {
            let next_state_i = {
                if let Some(pos) = state_list.iter().position(|x| x == &next_state_list) {
                    pos
                } else {
                    state_list.push(next_state_list);
                    state_list.len() - 1
                }
            };
            row[c] = Some(next_state_i);
        }
    }
    rows.push(row);
    i += 1;
}
```

* 遍历当前 DFA 状态里所有的 NFA 状态：

  * 根据字符 `c` 进行转移 → 得到一组新的 NFA 状态。
  * 加上它们的 ε-闭包 → 形成一个新的 DFA 状态。
* 如果这个 DFA 状态是新出现的，就加入 `state_list`。
* 最终，`rows` 保存了 DFA 的完整转移表。

#### 终止状态集合

```rust
let end = {
    let mut end = HashSet::new();
    for i in 0..state_list.len() {
        if state_list[i].contains(&nfa.end) {
            end.insert(i);
        }
    }
    end
};
```

* 如果某个 DFA 状态包含了 NFA 的终止状态，那么它就是 DFA 的终止状态。

---

## 5. DFA 运行：`is_match`

```rust
fn is_match(&self, s: &str) -> bool {
    let s = s.as_bytes();
    let mut cur = self.start;
    for c in s {
        if let Some(next) = self.rows[cur][(*c - b'a') as usize] {
            cur = next;
        } else {
            return false;
        }
    }
    self.end.contains(&cur)
}
```

* 从 DFA 初始状态开始，逐字符走转移表。
* 如果某个字符无法转移，就匹配失败。
* 最后检查当前 DFA 状态是否在终止状态集合中。

---

## 完整代码

```rust
use std::collections::{HashMap, HashSet};
struct Row {
    row: [Option<usize>; 26],
    eps: Option<usize>,
}
impl Row {
    fn new() -> Self {
        Row {
            row: [None; 26],
            eps: None,
        }
    }
}
struct NFA {
    rows: Vec<Row>,
    start: usize,
    end: usize,
    eps_reach: HashMap<usize, HashSet<usize>>,
}
impl NFA {
    fn build_nfa(p: &str) -> Self {
        let mut cur_state = 0 as usize;
        let mut rows = vec![Row::new()];
        let p = p.as_bytes();
        let mut i = 0 as usize;
        while i < p.len() {
            let ne = (p[i] - b'a') as usize;
            if i + 1 < p.len() && p[i + 1] == b'*' {
                rows.push(Row::new());
                rows[cur_state].eps = Some(cur_state + 1);
                cur_state += 1;
                rows.push(Row::new());
                if p[i] == b'.' {
                    for j in 0..26 {
                        rows[cur_state].row[j] = Some(cur_state);
                    }
                } else {
                    rows[cur_state].row[ne] = Some(cur_state);
                }
                rows[cur_state].eps = Some(cur_state + 1);
                cur_state += 1;
                i += 2;
            } else {
                rows.push(Row::new());
                if p[i] == b'.' {
                    for j in 0..26 {
                        rows[cur_state].row[j] = Some(cur_state + 1);
                    }
                } else {
                    rows[cur_state].row[ne] = Some(cur_state + 1);
                }
                cur_state += 1;
                i += 1;
            }
        }
        let mut _cache_eps_reach: HashMap<usize, HashSet<usize>> = HashMap::new();
        for cur in (0..=cur_state).rev() {
            let mut eps_reach = HashSet::from([cur]);
            if let Some(ne) = rows[cur].eps {
                eps_reach.extend(_cache_eps_reach[&ne].iter());
            }
            _cache_eps_reach.insert(cur, eps_reach);
        }
        Self {
            rows,
            start: 0,
            end: cur_state,
            eps_reach: _cache_eps_reach,
        }
    }
}
struct DFA {
    rows: Vec<[Option<usize>; 26]>,
    start: usize,
    end: HashSet<usize>,
}
impl DFA {
    fn build_dfa(nfa: &NFA) -> Self {
        let mut state_list: Vec<HashSet<usize>> = vec![nfa.eps_reach[&nfa.start].clone()];
        let mut rows: Vec<[Option<usize>; 26]> = Vec::new();
        let mut i = 0;
        while i < state_list.len() {
            let mut row: [Option<usize>; 26] = [None; 26];
            for c in 0..26 {
                let mut next_state_list: HashSet<usize> = HashSet::new();
                for cur in state_list[i].iter() {
                    if let Some(next) = nfa.rows[*cur].row[c] {
                        next_state_list.insert(next);
                        next_state_list.extend(nfa.eps_reach[&next].iter());
                    }
                }
                if !next_state_list.is_empty() {
                    let next_state_i = {
                        if let Some(pos) = state_list.iter().position(|x| x == &next_state_list) {
                            pos
                        } else {
                            state_list.push(next_state_list);
                            state_list.len() - 1
                        }
                    };
                    row[c] = Some(next_state_i);
                }
            }
            rows.push(row);
            i += 1;
        }
        let end = {
            let mut end = HashSet::new();
            for i in 0..state_list.len() {
                if state_list[i].contains(&nfa.end) {
                    end.insert(i);
                }
            }
            end
        };
        Self {
            rows,
            start: 0,
            end,
        }
    }
    fn is_match(&self, s: &str) -> bool {
        let s = s.as_bytes();
        let mut cur = self.start;
        for c in s {
            if let Some(next) = self.rows[cur][(*c - b'a') as usize] {
                cur = next;
            } else {
                return false;
            }
        }
        self.end.contains(&cur)
    }
}
impl Solution {
    pub fn is_match(s: String, p: String) -> bool {
        let nfa = NFA::build_nfa(&p);
        let dfa = DFA::build_dfa(&nfa);
        dfa.is_match(&s)
    }
}

```

leetcode10：正则表达式匹配

前几天了解了Nextjs做的prefetch的一些原理，然后看到了一个很好玩的hook，也就是乐观更新这个概念（我觉得是挺有用的（bushi））



## useOptimistic

我们先看一下官方给的解释 <br />
useOptimistic 是一个 React Hook，它允许你在进行异步操作时显示不同 state。它接受 state 作为参数，并返回该 state 的副本，在异步操作（如网络请求）期间可以不同。你需要提供一个函数，该函数接受当前 state 和操作的输入，并返回在操作挂起期间要使用的乐观状态。

这个状态被称为“乐观”状态是因为通常用于立即向用户呈现执行操作的结果，即使实际上操作需要一些时间来完成。

```tsx
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
```

也就是说，当页面进行更新（如网络请求，异步操作等需要消耗一定时间的操作）时，我们可以假设它更新是成功的（你得自信，自信使你的页面快乐），并且立刻向页面呈现状态

```tsx
import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // 更新函数
    (currentState, optimisticValue) => {
      // 使用乐观值
      // 合并并返回新 state
    }
  );
}
```

其中
- state : 初始时和没有挂起操作时要返回的值，其实就是你的「真实数据」。
- updateFn : 一个更新函数 `(currentState, optimisticValue) => newState`，它会在你调用 `addOptimistic()` 时运行，把「真实数据」和「乐观数据」合并，得到一个临时的新 state。  

> 失败是小概率事件，但成功是大概率事件。
> 与其等成功的返回，不如直接假设成功。

相信聪明的你已经想到了，其实我们的使用场景也很简单，我目前认为最合适，最适配的就是类似于评论区之类的东西，我们来写一个实现一键三连的小组件实战一下

```tsx
"use client";

import { useOptimistic } from "react";
import { Heart, Coins, Bookmark } from "lucide-react";
import { likeVideo, coinVideo, favoriteVideo } from "@/app/actions";

type Stats = {
  likes: number;
  coins: number;
  favorites: number;
};

type Props = {
  initial: Stats; // Initial counts from server
  videoId: string; // ID of the current video
};

/**
 * @example
 * ```tsx
 * <BilibiliActions
 *   videoId="abc123"
 *   initial={{ likes: 120, coins: 50, favorites: 33 }}
 * />
 * ```
 */
export default function BilibiliActions({ initial, videoId }: Props) {
  /**
   * useOptimistic hook
   *
   * @param state - The current stats (likes, coins, favorites)
   * @param action - The action to apply (which field to increment)
   * @returns Updated stats with optimistic increment applied
   */
  const [optimisticStats, updateOptimistic] = useOptimistic(
    initial,
    (state: Stats, action: { type: keyof Stats }) => {
      return { ...state, [action.type]: state[action.type] + 1 };
    }
  );

  /**
   * Handles user interaction and sends server request.
   * First updates UI optimistically, then calls the corresponding server action.
   *
   * @param type - Which stat to increment ("likes" | "coins" | "favorites")
   */
  async function handleAction(type: keyof Stats) {
    updateOptimistic({ type });

    switch (type) {
      case "likes":
        await likeVideo(videoId);
        break;
      case "coins":
        await coinVideo(videoId);
        break;
      case "favorites":
        await favoriteVideo(videoId);
        break;
    }
  }

  return (
    <div className="flex gap-6 items-center">
      {/* Like button */}
      <button
        onClick={() => handleAction("likes")}
        className="flex items-center gap-1 text-gray-600 hover:text-pink-500 transition"
      >
        <Heart className="w-5 h-5" />
        <span className="text-sm">{optimisticStats.likes}</span>
      </button>

      {/* Coin button */}
      <button
        onClick={() => handleAction("coins")}
        className="flex items-center gap-1 text-gray-600 hover:text-yellow-500 transition"
      >
        <Coins className="w-5 h-5" />
        <span className="text-sm">{optimisticStats.coins}</span>
      </button>

      {/* Favorite button */}
      <button
        onClick={() => handleAction("favorites")}
        className="flex items-center gap-1 text-gray-600 hover:text-blue-500 transition"
      >
        <Bookmark className="w-5 h-5" />
        <span className="text-sm">{optimisticStats.favorites}</span>
      </button>
    </div>
  );
}

```

你也发现了，乐观更新的好处还有之一：也就是后端不再返回数据，只需要一个成功or失败就可以了

### useOptimistic && startTransiton

首先我们要知道transition是干什么的：

transiton将会标记一个state为异步非阻塞状态（也就是说这一次的更新并不会阻塞渲染），比如你的某个组件可能会进行高频更新（假如用户反复点击点赞按钮，状态并不会第一时间更新，而是等这一阶段的transition结束之后再更新state）

```tsx
"use client";

import { useOptimistic, useTransition } from "react";
import { startTransition as s } from "react"; // 也可用 useTransition
import { likeVideo } from "@/app/actions";

export function LikeWithOptimistic({ initial, videoId }: { initial: number; videoId: string }) {
  const [likes, setLikes] = useState(initial);
  const [optimisticLikes, addOptimistic] = useOptimistic(likes, (s, step: number) => s + step);
  const [isPending, startTransition] = useTransition();

  async function onLike() {
    addOptimistic(1); // 立即+1

    // 低优先级刷新真实数据（例如从服务端返回最新计数）
    startTransition(async () => {
      const next = await likeVideo(videoId); // server action
      setLikes(next);
    });
  }

  return (
    <button onClick={onLike} className="btn">
      👍 {optimisticLikes} {isPending && <small className="ml-2 text-gray-500">同步中</small>}
    </button>
  );
}

```

### 手搓一个乐观更新！

知道原理了，我们直接手搓一个！
其实我们仔细思考一下无非就是
1. 更新乐观state到state上
2. 如果传入state和乐观state一致时候，保持不变
3. 如果传入state为空或者不一致时候，state进行回滚

（还没实现 主包困了明天再写）

乐观更新与prefetch

本系列文章不适合前端新手，如果你学过一定的Vue/React，我希望我的文章对你能有一定的帮助，本系列文章为主播经历了一段时间的 Next.js 开发后，沉淀出来的一些内容，希望能对你有一些帮助，仅供参考




## 保持组件纯粹

通常来讲，我们在使用编写很多很多个组件来组成我们的程序时候，通常希望每个组件各司其职，也就是我们希望一个组件的渲染应该是高度可预测的。<br />
React组件的设计和拆分就是围绕这一概念设计而成的，在进行React组件设计时候，我们遵从如下的设计范式：
```typescript
UI = f(state)
```
React假设你编写的所有组件都是纯函数，也就是说对于相同的输入，你的组件总是返回相同的jsx。

### 副作用隔离

接下来就是设计组件中的不纯粹部分，我们通常需要对他们进行抽离解耦，下面是一个错误的示范

```tsx
function Component() {
    state = state + 1 // 组件在内部自行发生了变化
    return <div>{state}</div>
}
```
————这会导致一定的渲染不可预测，渲染结果如下图所示
```tsx
function Component() {
    state = state + 1 // 组件在内部自行发生了变化
    return <div>{state}</div>
}

export default function App() {
    return (
        <div>
            <Component />
            <Component />
            <Component />
        </div>
    )
}
```
这时候的渲染结果是这样子的：（有待补图，可以自行拿着代码跑一下）

### 隔离副作用

未完待续...

React设计哲学理念一：组件设计原理

# 基于Vue3 + TypeScript + ElementPlus实现的登录注册页面模板
很早之前就想把登录注册页做在一起，开源的一些又比较简陋或者技术栈不太一样，b站上一些很精美的又是原生三件套做的，最近刚好有个项目要做，就先做了一个练练手


### 代码解读
其实页面很简单，需要注意的就几点<br>
1. 在页面切换时需要使用await nextTick等待Dom元素完全更新后切换，不然会报错
2. 如果要取消滚动条，请修改App.vue中的全局样式

```html
<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 添加这行来防止滚动 */
}

#app {
  height: 100%; /* 确保 app 容器也是全高的 */
}
</style>
```
3. 模板并没有详细写业务逻辑部分，业务逻辑详细内容请自行填充

### 程序源码

```html
<template>
  <div class="login-page">
    <div class="content-box">
      <div class="form-side">
        <div class="header">
          <h2 class="title">{{ model ? '欢迎回来' : '创建账号' }}</h2>
          <p class="subtitle">{{ model ? '登录您的账号' : '开始您的旅程' }}</p>
        </div>

        <div class="form-container">
          <el-form v-if="model" :model="loginForm" :rules="loginRules" ref="loginFormRef" class="login-form">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="用户名/学号/邮箱" prefix-icon="User" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="Lock" />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="login" class="submit-btn">
                {{ loading ? '登录中...' : '登录' }}
              </el-button>
            </el-form-item>
          </el-form>

          <el-form v-else :model="registerForm" :rules="registerRules" ref="registerFormRef" class="register-form">
            <el-form-item prop="studentId">
              <el-input v-model="registerForm.studentId" placeholder="学号" prefix-icon="Ticket" />
            </el-form-item>
            <el-form-item prop="username">
              <el-input v-model="registerForm.username" placeholder="用户名" prefix-icon="User" />
            </el-form-item>
            <el-form-item prop="email">
              <el-input v-model="registerForm.email" placeholder="邮箱" prefix-icon="Message" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="registerForm.password" type="password" placeholder="密码" prefix-icon="Lock" />
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input v-model="registerForm.confirmPassword" type="password" placeholder="确认密码" prefix-icon="Lock" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="register" class="submit-btn">
                {{ loading ? '注册中...' : '注册' }}
              </el-button>
            </el-form-item>
          </el-form>

          <div class="switch-area">
            <div class="switch-button" :class="{ 'right-aligned': model }">
              <span class="switch-text">{{ model ? '初来乍到？' : '已有账号？' }}</span>
              <el-button link type="primary" @click="handleSwitch" class="switch-link">
                {{ model ? '注册账号' : '返回登录' }}
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="image-side">
        <div class="overlay"></div>
        <img src="@/assets/login-background.jpg" alt="Login Background" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, onUnmounted } from 'vue'
import type { FormInstance } from 'element-plus'

const model = ref(true)
const loginFormRef = ref<FormInstance>()
const registerFormRef = ref<FormInstance>()

const handleSwitch = async () => {
  // 先重置当前表单
  if (model.value) {
    loginFormRef.value?.resetFields()
  } else {
    registerFormRef.value?.resetFields()
  }

  // 切换模式
  model.value = !model.value

  // 等待 DOM 更新
  await nextTick()
}

const loginForm = ref({
  username: '',
  password: '',
  rememberMe: false
})

const loading = ref(false)

// 增强密码验证规则
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const passwordValidator = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 8) {
    callback(new Error('密码长度不能小于8位'))
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
    callback(new Error('密码必须包含大小写字母和数字'))
  } else {
    callback()
  }
}

// 确认密码验证
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const confirmPasswordValidator = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.value.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const loginRules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: passwordValidator, trigger: 'blur' }
  ]
})

const registerForm = ref({
  username: '',
  studentId: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const registerRules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  studentId: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { pattern: /^\d+$/, message: '学号必须为数字', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: passwordValidator, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: confirmPasswordValidator, trigger: 'blur' }
  ]
})

// 在组件挂载时检查是否有保存的登录信息
onMounted(() => {
  const savedCredentials = localStorage.getItem('userCredentials')
  if (savedCredentials) {
    const { username, rememberMe } = JSON.parse(savedCredentials)
    loginForm.value.username = username
    loginForm.value.rememberMe = rememberMe
  }
})

onUnmounted(() => {
  localStorage.removeItem('userCredentials')
})

const login = async () => {
  if (!loginFormRef.value) return

  try {
    loading.value = true
    const valid = await loginFormRef.value.validate()

    if (valid) {
      // 处理登录逻辑...
      if (loginForm.value.rememberMe) {
        localStorage.setItem('userCredentials', JSON.stringify({
          username: loginForm.value.username,
          rememberMe: true
        }))
      } else {
        localStorage.removeItem('userCredentials')
      }
    }
  } catch (error) {
    console.error('登录验证失败:', error)
  } finally {
    loading.value = false
  }
}

const register = async () => {
  if (!registerFormRef.value) return

  try {
    loading.value = true
    const valid = await registerFormRef.value.validate()

    if (valid) {
      // 处理注册逻辑...
    }
  } catch (error) {
    console.error('注册验证失败:', error)
  } finally {
    loading.value = false
  }
}

</script>

<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Open+Sans&display=swap');

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #5a1167 100%);
  padding: 20px;

  .content-box {
    display: flex;
    background: white;
    width: 800px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;

    &:hover {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }

    .form-side {
      flex: 1;
      padding: 40px;
      min-width: 300px;
    }

    .image-side {
      position: relative;
      width: 400px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg,
            rgba(149, 3, 127, 0.4) 0%,
            rgba(0, 0, 0, 0.4) 100%);
        z-index: 1;
      }

      &:hover img {
        transform: scale(1.05);
      }
    }
  }

  .header {
    text-align: center;
    margin-bottom: 40px;

    .title {
      font-size: 28px;
      color: #2c3e50;
      margin: 0 0 8px;
      font-weight: 600;
      font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
      letter-spacing: 0.5px;
    }

    .subtitle {
      font-size: 16px;
      color: #7f8c8d;
      margin: 0;
      font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: 0.3px;
    }
  }

  .form-container {
    .el-form-item {
      margin-bottom: 16px;
    }

    :deep(.el-input) {
      .el-input__wrapper {
        padding: 6px;
        border-radius: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #dcdfe6;
        background-color: transparent;
        transition: all 0.3s ease;

        &.is-focus {
          border-bottom-color: var(--el-color-primary);
        }
      }
    }

    .submit-btn {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      border-radius: 8px;
      margin-top: 12px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    :deep(.el-checkbox) {
      margin-left: 0;
      margin-bottom: 8px;

      .el-checkbox__label {
        color: #7f8c8d;
      }
    }
  }

  .switch-area {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #eee;

    .switch-button {
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;

      &.right-aligned {
        justify-content: flex-end;
      }

      .switch-text {
        color: #7f8c8d;
        font-size: 14px;
      }

      .switch-link {
        font-size: 14px;
        font-weight: 500;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 900px) {
  .login-page {
    .content-box {
      width: 100%;
      max-width: 500px;
      margin: 20px;

      .image-side {
        display: none;
      }
    }
  }
}

@media (max-width: 480px) {
  .login-page {
    .content-box {
      .form-side {
        padding: 24px;
      }
    }
  }
}
</style>


```