diff --git a/new_web/merchant/CLAUDE.md b/new_web/merchant/CLAUDE.md
new file mode 100644
index 0000000..f7f808a
--- /dev/null
+++ b/new_web/merchant/CLAUDE.md
@@ -0,0 +1,203 @@
+# 信息管理系统原型项目
+
+## 项目概述
+这是一个传统的中文信息管理系统原型，采用纯HTML/CSS/JavaScript技术栈，实现左侧菜单栏 + 中央tab展示区域的经典布局。项目专注于演示系统架构和交互流程，不追求视觉美观。
+
+## 核心架构
+
+### 技术栈
+- **前端**: 纯HTML5 + CSS3 + 原生JavaScript ES6+
+- **架构模式**: 单页应用(SPA) + 动态内容加载
+- **样式系统**: 自定义CSS，无外部框架依赖
+- **模块化**: 页面内容与逻辑完全分离
+
+### 文件结构
+```
+merchant/
+├── index.html              # 主框架页面
+├── styles.css              # 全局样式文件
+├── script.js               # 核心JavaScript逻辑
+├── pages/                  # 页面内容目录
+│   ├── level-settings.html    # 等级设置页面
+│   └── member-view.html       # 会员查看页面
+└── CLAUDE.md               # 项目文档
+```
+
+### 架构特点
+1. **内容与逻辑分离**: 所有页面内容存储为独立HTML文件
+2. **动态加载**: 使用fetch API异步加载页面内容
+3. **Tab管理**: 支持多页面同时打开，可独立关闭
+4. **菜单系统**: 二级菜单展开/收起，防重复打开
+
+## 核心功能
+
+### 左侧菜单系统
+- **一级菜单**: 主功能模块入口
+- **二级菜单**: 具体功能页面，点击展开/收起
+- **当前实现**: 会员管理 > 等级设置、会员查看
+
+### 中央Tab系统
+- **多页面管理**: 支持同时打开多个页面tab
+- **防重复**: 相同页面不会重复打开，直接激活已存在tab
+- **可关闭**: 每个tab都有独立关闭按钮(首页除外)
+- **智能切换**: 关闭当前tab时自动激活相邻tab
+
+### 页面加载机制
+- **异步加载**: 使用`fetch`API动态加载HTML内容
+- **错误处理**: 包含完整的加载失败降级方案
+- **缓存管理**: 每次点击都重新加载，保证内容最新
+
+## 开发约束和规范
+
+### 重要约束 ⚠️
+1. **禁止硬编码HTML**: 所有页面内容必须存储在独立的HTML文件中
+2. **优先编辑现有文件**: 禁止随意创建新文件，优先修改现有文件
+3. **保持架构一致性**: 新页面必须遵循现有的加载和展示模式
+4. **中文本地化**: 所有界面文本必须使用中文
+
+### 开发规范
+```javascript
+// 添加新页面的步骤：
+// 1. 在pages/目录创建对应的HTML文件
+// 2. 在HTML中添加新的菜单项，指向该页面
+// 3. 确保contentType参数与文件名匹配
+
+// 正确的调用方式：
+onclick="openTab('新页面', 'new-page')"
+// 对应文件：pages/new-page.html
+```
+
+### 文件命名规范
+- 页面文件：`pages/功能名称.html` (使用kebab-case)
+- contentType参数：与文件名保持一致
+- Tab标题：使用中文友好名称
+
+## 核心函数说明
+
+### `openTab(title, contentType)`
+- **参数**: title(中文标题), contentType(文件名前缀)
+- **功能**: 创建新tab并异步加载页面内容
+- **特性**: 防重复打开、错误处理、自动激活
+
+### `loadPageContent(contentType)`
+- **参数**: contentType(对应pages/目录下的文件名)
+- **返回**: Promise<string> HTML内容
+- **错误处理**: 加载失败时返回默认提示内容
+
+### `toggleSubmenu(submenuId)`
+- **参数**: submenuId(子菜单DOM元素ID)
+- **功能**: 切换子菜单展开/收起状态
+- **特性**: 互斥展开(同时只能展开一个子菜单)
+
+## 扩展指南
+
+### 添加新的功能模块
+1. **创建一级菜单**:
+   ```html
+   <div class="menu-item">
+       <div class="menu-title" onclick="toggleSubmenu('new-submenu')">
+           <span>新功能模块</span>
+           <span class="arrow">▼</span>
+       </div>
+       <div class="submenu" id="new-submenu">
+           <!-- 二级菜单项 -->
+       </div>
+   </div>
+   ```
+
+2. **添加二级菜单项**:
+   ```html
+   <div class="submenu-item" onclick="openTab('功能名称', 'function-name')">
+       功能名称
+   </div>
+   ```
+
+3. **创建页面内容**:
+   ```bash
+   # 在pages/目录创建对应HTML文件
+   pages/function-name.html
+   ```
+
+### 页面内容模板
+```html
+<div class="page-content">
+    <h2>页面标题</h2>
+    
+    <!-- 表单区域 -->
+    <div class="form-group">
+        <label>字段名称:</label>
+        <input type="text" placeholder="请输入...">
+    </div>
+    
+    <!-- 操作按钮 -->
+    <button class="btn btn-primary">主要操作</button>
+    <button class="btn">次要操作</button>
+    
+    <!-- 数据表格 -->
+    <table class="table">
+        <thead>
+            <tr>
+                <th>列标题</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>数据内容</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+## 样式系统
+
+### CSS类命名规范
+- `.page-content`: 页面内容容器
+- `.form-group`: 表单字段组
+- `.btn`, `.btn-primary`: 按钮样式
+- `.table`: 数据表格
+- `.menu-item`, `.submenu-item`: 菜单项
+
+### 主题色彩
+- 主色调：深蓝色 `#2c3e50`
+- 高亮色：蓝色 `#3498db`
+- 背景色：浅灰 `#f5f5f5`
+- 边框色：灰色 `#bdc3c7`
+
+## 测试和部署
+
+### 本地运行
+```bash
+# 推荐使用本地HTTP服务器(必需，因为使用了fetch API)
+python -m http.server 8000
+# 或
+npx serve .
+# 然后访问 http://localhost:8000
+```
+
+### 浏览器兼容性
+- Chrome 60+ (支持fetch API和ES6 async/await)
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+### 快捷键
+- `ESC`: 关闭当前激活的tab(首页除外)
+
+## 注意事项
+
+### 开发限制
+- ❌ 不要在JavaScript中硬编码HTML内容
+- ❌ 不要随意创建新文件，优先编辑现有文件
+- ❌ 不要破坏现有的架构模式
+- ✅ 所有页面内容必须存储在pages/目录
+- ✅ 使用中文界面文本
+- ✅ 遵循现有的命名和结构约定
+
+### 技术限制
+- 必须运行在HTTP服务器环境(不支持file://协议)
+- 依赖现代浏览器的fetch API和ES6特性
+- 所有数据都是前端模拟，无后端API集成
+
+## 项目目标
+此项目是一个快速原型系统，用于演示传统管理系统的布局意图和交互流程。专注于功能架构而非视觉设计，为后续开发提供清晰的技术基础和扩展方向。
\ No newline at end of file
diff --git a/new_web/merchant/index.html b/new_web/merchant/index.html
new file mode 100644
index 0000000..1502751
--- /dev/null
+++ b/new_web/merchant/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>信息管理系统</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <!-- 左侧菜单栏 -->
+        <div class="sidebar">
+            <div class="logo">
+                <h2>管理系统</h2>
+            </div>
+            <nav class="menu">
+                <div class="menu-item">
+                    <div class="menu-title" onclick="toggleSubmenu('member-submenu')">
+                        <span>会员管理</span>
+                        <span class="arrow">▼</span>
+                    </div>
+                    <div class="submenu" id="member-submenu">
+                        <div class="submenu-item" onclick="openTab('等级设置', 'level-settings')">等级设置</div>
+                        <div class="submenu-item" onclick="openTab('会员查看', 'member-view')">会员查看</div>
+                    </div>
+                </div>
+            </nav>
+        </div>
+
+        <!-- 中央内容区域 -->
+        <div class="main-content">
+            <!-- Tab栏 -->
+            <div class="tab-bar">
+                <div class="tab active" id="home-tab">
+                    <span>首页</span>
+                </div>
+            </div>
+
+            <!-- 内容展示区域 -->
+            <div class="content-area">
+                <div class="tab-content active" id="home-content">
+                    <h1>欢迎使用信息管理系统</h1>
+                    <p>请从左侧菜单选择功能模块</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/new_web/merchant/pages/level-settings.html b/new_web/merchant/pages/level-settings.html
new file mode 100644
index 0000000..e56e619
--- /dev/null
+++ b/new_web/merchant/pages/level-settings.html
@@ -0,0 +1,57 @@
+<div class="page-content">
+    <h2>等级设置</h2>
+    <div class="form-group">
+        <label>等级名称:</label>
+        <input type="text" placeholder="请输入等级名称">
+    </div>
+    <div class="form-group">
+        <label>等级要求:</label>
+        <input type="number" placeholder="积分要求">
+    </div>
+    <div class="form-group">
+        <label>等级描述:</label>
+        <textarea placeholder="请输入等级描述" rows="3"></textarea>
+    </div>
+    <button class="btn btn-primary">保存设置</button>
+    <button class="btn">取消</button>
+    
+    <table class="table">
+        <thead>
+            <tr>
+                <th>等级名称</th>
+                <th>积分要求</th>
+                <th>会员数量</th>
+                <th>操作</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>普通会员</td>
+                <td>0</td>
+                <td>1,234</td>
+                <td>
+                    <button class="btn">编辑</button>
+                    <button class="btn">删除</button>
+                </td>
+            </tr>
+            <tr>
+                <td>银牌会员</td>
+                <td>1,000</td>
+                <td>567</td>
+                <td>
+                    <button class="btn">编辑</button>
+                    <button class="btn">删除</button>
+                </td>
+            </tr>
+            <tr>
+                <td>金牌会员</td>
+                <td>5,000</td>
+                <td>123</td>
+                <td>
+                    <button class="btn">编辑</button>
+                    <button class="btn">删除</button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/new_web/merchant/pages/member-view.html b/new_web/merchant/pages/member-view.html
new file mode 100644
index 0000000..ed18fde
--- /dev/null
+++ b/new_web/merchant/pages/member-view.html
@@ -0,0 +1,70 @@
+<div class="page-content">
+    <h2>会员查看</h2>
+    <div class="form-group">
+        <label>搜索会员:</label>
+        <input type="text" placeholder="请输入会员姓名或手机号">
+    </div>
+    <div class="form-group">
+        <label>会员等级:</label>
+        <select>
+            <option value="">全部等级</option>
+            <option value="normal">普通会员</option>
+            <option value="silver">银牌会员</option>
+            <option value="gold">金牌会员</option>
+        </select>
+    </div>
+    <button class="btn btn-primary">搜索</button>
+    <button class="btn">重置</button>
+    
+    <table class="table">
+        <thead>
+            <tr>
+                <th>会员ID</th>
+                <th>姓名</th>
+                <th>手机号</th>
+                <th>等级</th>
+                <th>积分</th>
+                <th>注册时间</th>
+                <th>操作</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>M001</td>
+                <td>张小明</td>
+                <td>138****1234</td>
+                <td>金牌会员</td>
+                <td>8,500</td>
+                <td>2024-01-15</td>
+                <td>
+                    <button class="btn">查看详情</button>
+                    <button class="btn">编辑</button>
+                </td>
+            </tr>
+            <tr>
+                <td>M002</td>
+                <td>李小红</td>
+                <td>139****5678</td>
+                <td>银牌会员</td>
+                <td>2,300</td>
+                <td>2024-02-20</td>
+                <td>
+                    <button class="btn">查看详情</button>
+                    <button class="btn">编辑</button>
+                </td>
+            </tr>
+            <tr>
+                <td>M003</td>
+                <td>王小刚</td>
+                <td>137****9012</td>
+                <td>普通会员</td>
+                <td>450</td>
+                <td>2024-03-10</td>
+                <td>
+                    <button class="btn">查看详情</button>
+                    <button class="btn">编辑</button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/new_web/merchant/script.js b/new_web/merchant/script.js
new file mode 100644
index 0000000..6b759fe
--- /dev/null
+++ b/new_web/merchant/script.js
@@ -0,0 +1,190 @@
+// 全局变量
+let tabCounter = 0;
+let activeTabId = 'home-tab';
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    initializeSystem();
+});
+
+// 初始化系统
+function initializeSystem() {
+    console.log('信息管理系统已加载');
+}
+
+// 切换子菜单显示/隐藏
+function toggleSubmenu(submenuId) {
+    const submenu = document.getElementById(submenuId);
+    const arrow = submenu.parentElement.querySelector('.arrow');
+    
+    if (submenu.classList.contains('expanded')) {
+        submenu.classList.remove('expanded');
+        arrow.classList.remove('rotated');
+    } else {
+        // 先关闭其他所有子菜单
+        const allSubmenus = document.querySelectorAll('.submenu');
+        const allArrows = document.querySelectorAll('.arrow');
+        
+        allSubmenus.forEach(menu => menu.classList.remove('expanded'));
+        allArrows.forEach(arrow => arrow.classList.remove('rotated'));
+        
+        // 展开当前子菜单
+        submenu.classList.add('expanded');
+        arrow.classList.add('rotated');
+    }
+}
+
+// 打开新的tab页面
+async function openTab(title, contentType) {
+    tabCounter++;
+    const tabId = `tab-${tabCounter}`;
+    const contentId = `content-${tabCounter}`;
+    
+    // 检查是否已经存在相同标题的tab
+    const existingTab = Array.from(document.querySelectorAll('.tab')).find(tab => 
+        tab.querySelector('span').textContent === title
+    );
+    
+    if (existingTab) {
+        // 如果已存在，直接激活该tab
+        switchTab(existingTab.id);
+        return;
+    }
+    
+    // 创建新的tab
+    const tabBar = document.querySelector('.tab-bar');
+    const newTab = document.createElement('div');
+    newTab.className = 'tab';
+    newTab.id = tabId;
+    newTab.innerHTML = `
+        <span>${title}</span>
+        <button class="close-btn" onclick="closeTab('${tabId}')" aria-label="关闭">×</button>
+    `;
+    
+    // 添加点击事件
+    newTab.addEventListener('click', function(e) {
+        if (!e.target.classList.contains('close-btn')) {
+            switchTab(tabId);
+        }
+    });
+    
+    tabBar.appendChild(newTab);
+    
+    // 创建对应的内容区域
+    const contentArea = document.querySelector('.content-area');
+    const newContent = document.createElement('div');
+    newContent.className = 'tab-content';
+    newContent.id = contentId;
+    
+    // 动态加载页面内容
+    try {
+        const pageContent = await loadPageContent(contentType);
+        newContent.innerHTML = pageContent;
+    } catch (error) {
+        console.error('加载页面内容失败:', error);
+        newContent.innerHTML = `
+            <div class="page-content">
+                <h2>${title}</h2>
+                <p>页面加载失败，请稍后重试。</p>
+            </div>
+        `;
+    }
+    
+    contentArea.appendChild(newContent);
+    
+    // 激活新创建的tab
+    switchTab(tabId);
+}
+
+// 切换到指定的tab
+function switchTab(tabId) {
+    // 移除所有tab的active状态
+    document.querySelectorAll('.tab').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    
+    // 隐藏所有内容
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.remove('active');
+    });
+    
+    // 激活指定的tab
+    const targetTab = document.getElementById(tabId);
+    if (targetTab) {
+        targetTab.classList.add('active');
+        activeTabId = tabId;
+        
+        // 显示对应的内容
+        const contentId = tabId.replace('tab', 'content');
+        const targetContent = document.getElementById(contentId);
+        if (targetContent) {
+            targetContent.classList.add('active');
+        }
+    }
+}
+
+// 关闭tab
+function closeTab(tabId) {
+    const tab = document.getElementById(tabId);
+    const contentId = tabId.replace('tab', 'content');
+    const content = document.getElementById(contentId);
+    
+    if (!tab) return;
+    
+    // 如果关闭的是当前激活的tab
+    if (tabId === activeTabId) {
+        // 找到前一个tab来激活
+        const allTabs = document.querySelectorAll('.tab');
+        let targetTab = null;
+        
+        for (let i = 0; i < allTabs.length; i++) {
+            if (allTabs[i].id === tabId) {
+                // 优先选择前一个tab，如果没有就选择后一个
+                targetTab = allTabs[i - 1] || allTabs[i + 1];
+                break;
+            }
+        }
+        
+        if (targetTab) {
+            switchTab(targetTab.id);
+        } else {
+            // 如果没有其他tab，激活首页
+            switchTab('home-tab');
+        }
+    }
+    
+    // 移除tab和对应的内容
+    tab.remove();
+    if (content) {
+        content.remove();
+    }
+}
+
+// 动态加载页面内容
+async function loadPageContent(contentType) {
+    try {
+        const response = await fetch(`pages/${contentType}.html`);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const content = await response.text();
+        return content;
+    } catch (error) {
+        console.error('加载页面失败:', error);
+        // 返回默认内容
+        return `
+            <div class="page-content">
+                <h2>页面加载中...</h2>
+                <p>页面正在开发中，敬请期待...</p>
+            </div>
+        `;
+    }
+}
+
+// 键盘快捷键支持
+document.addEventListener('keydown', function(e) {
+    // ESC键关闭当前tab（除了首页）
+    if (e.key === 'Escape' && activeTabId !== 'home-tab') {
+        closeTab(activeTabId);
+    }
+});
\ No newline at end of file
diff --git a/new_web/merchant/styles.css b/new_web/merchant/styles.css
new file mode 100644
index 0000000..7fd986b
--- /dev/null
+++ b/new_web/merchant/styles.css
@@ -0,0 +1,243 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: #f5f5f5;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+}
+
+/* 左侧菜单栏样式 */
+.sidebar {
+    width: 250px;
+    background-color: #2c3e50;
+    color: white;
+    flex-shrink: 0;
+}
+
+.logo {
+    padding: 20px;
+    border-bottom: 1px solid #34495e;
+    text-align: center;
+}
+
+.logo h2 {
+    color: white;
+    font-size: 18px;
+}
+
+.menu {
+    padding: 10px 0;
+}
+
+.menu-item {
+    margin-bottom: 5px;
+}
+
+.menu-title {
+    padding: 12px 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.3s;
+}
+
+.menu-title:hover {
+    background-color: #34495e;
+}
+
+.arrow {
+    transition: transform 0.3s;
+    font-size: 12px;
+}
+
+.arrow.rotated {
+    transform: rotate(-90deg);
+}
+
+.submenu {
+    background-color: #34495e;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.submenu.expanded {
+    max-height: 200px;
+}
+
+.submenu-item {
+    padding: 10px 40px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    border-left: 3px solid transparent;
+}
+
+.submenu-item:hover {
+    background-color: #3d566e;
+    border-left-color: #3498db;
+}
+
+/* 中央内容区域样式 */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+}
+
+.tab-bar {
+    background-color: #ecf0f1;
+    border-bottom: 1px solid #bdc3c7;
+    display: flex;
+    padding: 0 10px;
+    min-height: 40px;
+    align-items: end;
+}
+
+.tab {
+    padding: 8px 16px;
+    background-color: #bdc3c7;
+    border: 1px solid #95a5a6;
+    border-bottom: none;
+    margin-right: 2px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    min-width: 100px;
+    border-radius: 4px 4px 0 0;
+    position: relative;
+}
+
+.tab.active {
+    background-color: white;
+    border-color: #bdc3c7;
+    border-bottom: 1px solid white;
+    margin-bottom: -1px;
+}
+
+.tab span {
+    margin-right: 8px;
+}
+
+.tab .close-btn {
+    background: none;
+    border: none;
+    color: #7f8c8d;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+}
+
+.tab .close-btn:hover {
+    background-color: #e74c3c;
+    color: white;
+}
+
+.content-area {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.tab-content h1 {
+    color: #2c3e50;
+    margin-bottom: 10px;
+}
+
+.tab-content p {
+    color: #7f8c8d;
+    line-height: 1.6;
+}
+
+/* 页面内容样式 */
+.page-content {
+    max-width: 800px;
+}
+
+.page-content h2 {
+    color: #2c3e50;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #3498db;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #2c3e50;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #bdc3c7;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-right: 10px;
+}
+
+.btn-primary {
+    background-color: #3498db;
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #2980b9;
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.table th,
+.table td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid #ecf0f1;
+}
+
+.table th {
+    background-color: #f8f9fa;
+    font-weight: bold;
+    color: #2c3e50;
+}
\ No newline at end of file